Merge commit '72412e87e887a1cbcf3987927c16fc9cb9e36949' into develop

Apps.js

@@ -1,8 +1,15 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
-import { View, Platform, Text, TouchableOpacity } from "react-native";
+import {
+  View,
+  Platform,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+} from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
 import { Ionicons } from "@expo/vector-icons";
+
 import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
 import { getStationList, lineList } from "./lib/getStationList";
@@ -11,15 +18,27 @@ import { checkDuplicateTrainData } from "./lib/checkDuplicateTrainData";
 import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { useCurrentTrain } from "./stateBox/useCurrentTrain";
 import { SheetManager } from "react-native-actions-sheet";
+import TrainMenu from "./components/trainMenu";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
 
 export default function Apps({ navigation, webview, stationData }) {
   const { currentTrain } = useCurrentTrain();
+  const { height, width } = useWindowDimensions();
   const { navigate } = navigation;
   var urlcache = "";
   const { favoriteStation } = useFavoriteStation();
+  const [isLandscape, setIsLandscape] = useState(false); //画面が横向きかどうか
+  const handleLayout = () => {};
+  useEffect(() => {
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [height, width]);
 
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
@@ -271,8 +290,22 @@ export default function Apps({ navigation, webview, stationData }) {
       style={{
         height: "100%",
         paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+        flexDirection: isLandscape ? "row" : "column",
       }}
+      onLayout={handleLayout}
     >
+      {isLandscape ? (
+        <TrainMenu
+          webview={webview}
+          stationData={stationData}
+          navigation={{ navigate: null }}
+          style={{
+            width: (width / 100) * 40,
+            height: "100%",
+            flexDirection: "column-reverse",
+          }}
+        />
+      ) : null}
       {/* {Status} */}
       <WebView
         useWebKit
@@ -310,11 +343,13 @@ export default function Apps({ navigation, webview, stationData }) {
           }
         }}
       />
-      <MapsButton
+      {isLandscape || (
-        onPress={() => navigate("trainMenu", { webview })}
+        <MapsButton
-        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+          onPress={() => navigate("trainMenu", { webview })}
-        mapSwitch={mapSwitch == "true" ? "flex" : "none"}
+          top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
-      />
+          mapSwitch={mapSwitch == "true" ? "flex" : "none"}
+        />
+      )}
       <ReloadButton
         onPress={() => webview.current.reload()}
         top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}

app.json

@@ -8,7 +8,7 @@
       "android"
     ],
     "version": "4.6",
-    "orientation": "portrait",
+    "orientation": "default",
     "icon": "./assets/icon.png",
     "splash": {
       "image": "./assets/splash.png",

components/ActionSheetComponents/EachTrainInfo.js

@@ -6,9 +6,13 @@ import {
   TouchableOpacity,
   Platform,
   StyleSheet,
+  useWindowDimensions,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import ActionSheet, { SheetManager } from "react-native-actions-sheet";
+import ActionSheet, {
+  SheetManager,
+  useScrollHandlers,
+} from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
 import trainList from "../../assets/originData/trainList";
 import { lineList } from "../../lib/getStationList";
@@ -24,6 +28,7 @@ import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
 import { LongHeader } from "./EachTrainInfo/LongHeader";
 import { ShortHeader } from "./EachTrainInfo/ShortHeader";
 import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
+import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
 
 export const EachTrainInfo = (props) => {
   if (!props.payload) return <></>;
@@ -47,6 +52,16 @@ export const EachTrainInfo = (props) => {
   const [isConcatNear, setIsConcatNear] = useState(false);
   const [tailStation, setTailStation] = useState();
   const [headStation, setHeadStation] = useState();
+  const { height, width } = useWindowDimensions();
+  const [isLandscape, setIsLandscape] = useState(false);
+  useEffect(() => {
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [width, height]);
   // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
 
   //裏列車探索
@@ -376,6 +391,7 @@ export const EachTrainInfo = (props) => {
       .replace("ライナーライナー", "ライナー");
   };
   const actionSheetRef = useRef(null);
+  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
   return (
     <ActionSheet
       gestureEnabled={true}
@@ -384,6 +400,7 @@ export const EachTrainInfo = (props) => {
       ref={actionSheetRef}
       drawUnderStatusBar={false}
       isModal={Platform.OS == "ios"}
+
       //useBottomSafeAreaPadding={Platform.OS == "android"}
     >
       <View
@@ -445,60 +462,46 @@ export const EachTrainInfo = (props) => {
               />
             )}
         </View>
-        <DynamicHeaderScrollView
+        {isLandscape ? (
-          styles={styles}
+          <LandscapeTrainInfo
-          containerProps={{ style: { maxHeight: heightPercentageToDP("70%") } }}
+            scrollHandlers={scrollHandlers}
-          Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
+            leftContent={
-          Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
+              from == "AllTrainDiagramView" ? (
-          shortHeader={
+                <></>
-            from == "AllTrainDiagramView" ? (
+              ) : (
-              <></>
+                <LongHeader
-            ) : (
+                  currentTrainData={currentTrainData}
-              <ShortHeader
+                  currentPosition={currentPosition}
-                currentTrainData={currentTrainData}
+                  nearTrainIDList={nearTrainIDList}
-                currentPosition={currentPosition}
+                  openTrainInfo={openTrainInfo}
-                nearTrainIDList={nearTrainIDList}
+                />
-                openTrainInfo={openTrainInfo}
+              )
-              />
+            }
-            )
+            topStickyContent={
-          }
+              <ScrollStickyContent currentTrainData={currentTrainData} />
-          longHeader={
+            }
-            from == "AllTrainDiagramView" ? (
+          >
-              <></>
+            {headStation && !isConcatNear && (
-            ) : (
+              <TouchableOpacity
-              <LongHeader
+                onPress={() => openBackTrainInfo(headStation)}
-                currentTrainData={currentTrainData}
+                style={{
-                currentPosition={currentPosition}
+                  padding: 10,
-                nearTrainIDList={nearTrainIDList}
+                  flexDirection: "row",
-                openTrainInfo={openTrainInfo}
+                  borderColor: "blue",
-              />
+                  borderWidth: 1,
-            )
+                  margin: 10,
-          }
+                  borderRadius: 5,
-          topStickyContent={
+                  alignItems: "center",
-            <ScrollStickyContent currentTrainData={currentTrainData} />
+                }}
-          }
-        >
-          {headStation && !isConcatNear && (
-            <TouchableOpacity
-              onPress={() => openBackTrainInfo(headStation)}
-              style={{
-                padding: 10,
-                flexDirection: "row",
-                borderColor: "blue",
-                borderWidth: 1,
-                margin: 10,
-                borderRadius: 5,
-                alignItems: "center",
-              }}
-            >
-              <Text
-                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
               >
-                「本当の始発駅」を表示
+                <Text
-              </Text>
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
-            </TouchableOpacity>
+                >
-          )}
+                  「本当の始発駅」を表示
-          {/* <LottieView
+                </Text>
+              </TouchableOpacity>
+            )}
+            {/* <LottieView
                 autoPlay
                 loop
                 style={{ width: 150, height: 150, backgroundColor: "#fff" }}
@@ -506,56 +509,175 @@ export const EachTrainInfo = (props) => {
               />
               <Text>ほげほげふがふが</Text> */}
 
-          {trainData.map((i, index) =>
+            {trainData.map((i, index) =>
-            i.split(",")[1] == "提" ? (
+              i.split(",")[1] == "提" ? (
-              <DataFromButton i={i} />
+                <DataFromButton i={i} />
-            ) : (
+              ) : (
-              <EachStopList
+                <EachStopList
-                i={i}
+                  i={i}
-                index={index}
+                  index={index}
-                stationList={stationList}
+                  stationList={stationList}
-                points={points}
+                  points={points}
-                currentTrainData={currentTrainData}
+                  currentTrainData={currentTrainData}
-                openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+                  openStationACFromEachTrainInfo={
-              />
+                    openStationACFromEachTrainInfo
-            )
+                  }
-          )}
+                />
-          {tailStation && !isConcatNear && (
+              )
-            <TouchableOpacity
+            )}
-              onPress={() => openBackTrainInfo(tailStation)}
+            {tailStation && !isConcatNear && (
-              style={{
+              <TouchableOpacity
-                padding: 10,
+                onPress={() => openBackTrainInfo(tailStation)}
-                flexDirection: "row",
+                style={{
-                borderColor: "blue",
+                  padding: 10,
-                borderWidth: 1,
+                  flexDirection: "row",
-                margin: 10,
+                  borderColor: "blue",
-                borderRadius: 5,
+                  borderWidth: 1,
-                alignItems: "center",
+                  margin: 10,
-              }}
+                  borderRadius: 5,
-            >
+                  alignItems: "center",
-              <Text
+                }}
-                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
               >
-                「本当の終着駅」を表示
+                <Text
-              </Text>
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
-            </TouchableOpacity>
+                >
-          )}
+                  「本当の終着駅」を表示
+                </Text>
+              </TouchableOpacity>
+            )}
 
-          <View style={{ flexDirection: "row" }}>
+            <View style={{ flexDirection: "row" }}>
-            <View
+              <View
-              style={{
+                style={{
-                padding: 8,
+                  padding: 8,
-                flexDirection: "row",
+                  flexDirection: "row",
-                borderBottomWidth: 1,
+                  borderBottomWidth: 1,
-                borderBottomColor: "#f0f0f0",
+                  borderBottomColor: "#f0f0f0",
-                flex: 1,
+                  flex: 1,
-              }}
+                }}
-            >
+              >
-              <Text style={{ fontSize: 20 }}> </Text>
+                <Text style={{ fontSize: 20 }}> </Text>
-              <View style={{ flex: 1 }} />
+                <View style={{ flex: 1 }} />
+              </View>
             </View>
-          </View>
+          </LandscapeTrainInfo>
-        </DynamicHeaderScrollView>
+        ) : (
+          <DynamicHeaderScrollView
+            styles={styles}
+            containerProps={{
+              style: { maxHeight: heightPercentageToDP("70%") },
+            }}
+            Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
+            Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
+            shortHeader={
+              from == "AllTrainDiagramView" ? (
+                <></>
+              ) : (
+                <ShortHeader
+                  currentTrainData={currentTrainData}
+                  currentPosition={currentPosition}
+                  nearTrainIDList={nearTrainIDList}
+                  openTrainInfo={openTrainInfo}
+                />
+              )
+            }
+            longHeader={
+              from == "AllTrainDiagramView" ? (
+                <></>
+              ) : (
+                <LongHeader
+                  currentTrainData={currentTrainData}
+                  currentPosition={currentPosition}
+                  nearTrainIDList={nearTrainIDList}
+                  openTrainInfo={openTrainInfo}
+                />
+              )
+            }
+            topStickyContent={
+              <ScrollStickyContent currentTrainData={currentTrainData} />
+            }
+          >
+            {headStation && !isConcatNear && (
+              <TouchableOpacity
+                onPress={() => openBackTrainInfo(headStation)}
+                style={{
+                  padding: 10,
+                  flexDirection: "row",
+                  borderColor: "blue",
+                  borderWidth: 1,
+                  margin: 10,
+                  borderRadius: 5,
+                  alignItems: "center",
+                }}
+              >
+                <Text
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                >
+                  「本当の始発駅」を表示
+                </Text>
+              </TouchableOpacity>
+            )}
+            {/* <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("../../assets/51690-loading-diamonds.json")}
+              />
+              <Text>ほげほげふがふが</Text> */}
+
+            {trainData.map((i, index) =>
+              i.split(",")[1] == "提" ? (
+                <DataFromButton i={i} />
+              ) : (
+                <EachStopList
+                  i={i}
+                  index={index}
+                  stationList={stationList}
+                  points={points}
+                  currentTrainData={currentTrainData}
+                  openStationACFromEachTrainInfo={
+                    openStationACFromEachTrainInfo
+                  }
+                />
+              )
+            )}
+            {tailStation && !isConcatNear && (
+              <TouchableOpacity
+                onPress={() => openBackTrainInfo(tailStation)}
+                style={{
+                  padding: 10,
+                  flexDirection: "row",
+                  borderColor: "blue",
+                  borderWidth: 1,
+                  margin: 10,
+                  borderRadius: 5,
+                  alignItems: "center",
+                }}
+              >
+                <Text
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                >
+                  「本当の終着駅」を表示
+                </Text>
+              </TouchableOpacity>
+            )}
+
+            <View style={{ flexDirection: "row" }}>
+              <View
+                style={{
+                  padding: 8,
+                  flexDirection: "row",
+                  borderBottomWidth: 1,
+                  borderBottomColor: "#f0f0f0",
+                  flex: 1,
+                }}
+              >
+                <Text style={{ fontSize: 20 }}> </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            </View>
+          </DynamicHeaderScrollView>
+        )}
       </View>
     </ActionSheet>
   );

components/ActionSheetComponents/EachTrainInfo/LandscapeTrainInfo.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { View, Text, ScrollView, useWindowDimensions } from "react-native";
+
+export const LandscapeTrainInfo = (props) => {
+  const { leftContent, topStickyContent, children, scrollHandlers } = props;
+  const { height, width } = useWindowDimensions();
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        backgroundColor: "blue",
+        width: width,
+        height: (height / 100) * 70,
+        marginBottom: 50,
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "column",
+          height: (height / 100) * 70,
+          width: width / 2,
+        }}
+      >
+        <Text>{width / 2}</Text>
+        {leftContent}
+      </View>
+      <ScrollView
+        {...scrollHandlers}
+        style={{
+          width: width / 2,
+          height: "auto",
+        }}
+        stickyHeaderIndices={[1]}
+        scrollEventThrottle={16}
+        onScroll={(d) => {
+          console.log(d.nativeEvent.contentOffset.y);
+        }}
+      >
+        <View style={{ height: 0 }} />
+        <View style={{ flexDirection: "column" }} index={1}>
+          {topStickyContent}
+        </View>
+        {children}
+      </ScrollView>
+    </View>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/TrainDataView.js

@@ -1,5 +1,10 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+} from "react-native";
 import { StateBox } from "./StateBox";
 import {
   heightPercentageToDP,
@@ -13,13 +18,24 @@ export const TrainDataView = ({
   openTrainInfo,
   mode = 0,
 }) => {
+  const [isLandscape, setIsLandscape] = useState(false);
+  const { width, height } = useWindowDimensions();
+  useEffect(() => {
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [width, height]);
+
   return (
     <View
       style={{
         flexDirection: "row",
         //minHeight: 200,
         //height: heightPercentageToDP("20%"),
-        width: widthPercentageToDP("100%"),
+        width: isLandscape ? width / 2 : width,
         flex: 1,
       }}
     >

components/trainMenu.js

@@ -6,10 +6,11 @@ export default function TrainMenu({
   navigation: { navigate },
   webview,
   stationData,
+  style,
 }) {
   const mapRef = useRef();
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
       <MapView
         style={{ flex: 1, width: "100%", height: "100%" }}
         showsUserLocation={true}
@@ -46,65 +47,69 @@ export default function TrainMenu({
                     webview.current?.injectJavaScript(
                       `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')`
                     );
-                    navigate("Apps");
+                    if (navigate) navigate("Apps");
                   }}
                 ></Marker>
               );
             })
           )}
       </MapView>
-      <View style={{ flexDirection: "row" }}>
+      {navigate && (
-        <UsefulBox
+        <View style={{ flexDirection: "row" }}>
-          backgroundColor={"#F89038"}
+          <UsefulBox
-          icon="train-car"
+            backgroundColor={"#F89038"}
-          flex={1}
+            icon="train-car"
-          onPressButton={() =>
+            flex={1}
-            navigate("howto", {
+            onPressButton={() =>
-              info: "https://train.jr-shikoku.co.jp/usage.htm",
+              navigate("howto", {
-            })
+                info: "https://train.jr-shikoku.co.jp/usage.htm",
-          }
+              })
+            }
+          >
+            使い方
+          </UsefulBox>
+          <UsefulBox
+            backgroundColor={"#EA4752"}
+            icon="star"
+            flex={1}
+            onPressButton={() => navigate("favoriteList")}
+          >
+            お気に入り
+          </UsefulBox>
+          <UsefulBox
+            backgroundColor={"#91C31F"}
+            icon="clipboard-list-outline"
+            flex={1}
+            onPressButton={() =>
+              Linking.openURL(
+                "https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2"
+              )
+            }
+          >
+            フィードバック
+          </UsefulBox>
+        </View>
+      )}
+      {navigate && (
+        <TouchableOpacity
+          style={{
+            padding: 10,
+            flexDirection: "row",
+            borderColor: "white",
+            borderWidth: 1,
+            margin: 10,
+            borderRadius: 5,
+            alignItems: "center",
+          }}
+          onPress={() => navigate("Apps")}
         >
-          使い方
+          <View style={{ flex: 1 }} />
-        </UsefulBox>
+          <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-        <UsefulBox
+            閉じる
-          backgroundColor={"#EA4752"}
+          </Text>
-          icon="star"
+          <View style={{ flex: 1 }} />
-          flex={1}
+        </TouchableOpacity>
-          onPressButton={() => navigate("favoriteList")}
+      )}
-        >
-          お気に入り
-        </UsefulBox>
-        <UsefulBox
-          backgroundColor={"#91C31F"}
-          icon="clipboard-list-outline"
-          flex={1}
-          onPressButton={() =>
-            Linking.openURL(
-              "https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2"
-            )
-          }
-        >
-          この機能のフィードバック
-        </UsefulBox>
-      </View>
-      <TouchableOpacity
-        style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
-        }}
-        onPress={() => navigate("Apps")}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
     </View>
   );
 }
@@ -115,14 +120,14 @@ const UsefulBox = (props) => {
       style={{
         flex: flex,
         backgroundColor: backgroundColor,
-        padding: 10,
+        padding: 5,
         alignItems: "center",
         margin: 2,
       }}
       onPress={onPressButton}
     >
       <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+      <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
         {children}
       </Text>
     </TouchableOpacity>