列車情報の分離

components/ActionSheetComponents/EachTrainInfo.js

@@ -38,7 +38,6 @@ export const EachTrainInfo = (props) => {
     from,
   } = props.payload;
   const [trainData, setTrainData] = useState([]);
-  const [isTop, setIsTop] = useState(true);
   const [currentPosition, setCurrentPosition] = useState([]);
 
   const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
@@ -66,7 +65,7 @@ export const EachTrainInfo = (props) => {
       })
       .catch((d) => AS.setItem("trainPositionSwitch", "false"));
   }, []);
-  const insets = useSafeAreaInsets();
+  //bconst insets = useSafeAreaInsets();
   const getStationData = (stationName) => {
     const Stations = stationList.map((a) =>
       a.filter((d) => d.StationName == stationName)
@@ -232,7 +231,6 @@ export const EachTrainInfo = (props) => {
     trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];
 
   useEffect(() => {
-    setIsTop(true);
     if (!data.trainNum) return;
     const TD = trainList[data.trainNum];
     if (!TD) {
@@ -261,7 +259,7 @@ export const EachTrainInfo = (props) => {
   const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
   return (
     <ActionSheet
-      gestureEnabled={isTop}
+      gestureEnabled={true}
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
       drawUnderStatusBar={false}
@@ -336,118 +334,10 @@ export const EachTrainInfo = (props) => {
             horizontal
             pagingEnabled
           >
-            <View
+            <TrainDataView
-              style={{
+              currentTrainData={currentTrainData}
-                flexDirection: "row",
+              currentPosition={currentPosition}
-                minHeight: 200,
+            />
-                height: heightPercentageToDP("20%"),
-                width: widthPercentageToDP("100%"),
-              }}
-            >
-              <View
-                style={{
-                  flex: 1,
-                  backgroundColor: "white",
-                  borderRadius: 10,
-                  padding: 10,
-                  margin: 10,
-                }}
-              >
-                <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                  現在地 {currentPosition.toString()}
-                </Text>
-                <View style={{ flex: 1 }} />
-                {currentTrainData?.Pos && currentTrainData?.Pos.match("～") ? (
-                  <>
-                    <Text
-                      style={{
-                        fontSize: 28,
-                        color: "#0099CC",
-                        textAlign: "right",
-                      }}
-                    >
-                      {
-                        currentTrainData?.Pos.replace("（下り）", "")
-                          .replace("（上り）", "")
-                          .split("～")[0]
-                      }
-                    </Text>
-                    <Text style={{ color: "#0099CC", textAlign: "right" }}>
-                      ～
-                    </Text>
-                    <Text
-                      style={{
-                        fontSize: 28,
-                        color: "#0099CC",
-                        textAlign: "right",
-                      }}
-                    >
-                      {
-                        currentTrainData?.Pos.replace("（下り）", "")
-                          .replace("（上り）", "")
-                          .split("～")[1]
-                      }
-                    </Text>
-                  </>
-                ) : (
-                  <Text
-                    style={{
-                      fontSize: 28,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    {currentTrainData?.Pos}
-                  </Text>
-                )}
-              </View>
-              <View style={{ flex: 1, flexDirection: "column" }}>
-                <View
-                  style={{
-                    flex: 1,
-                    backgroundColor: "white",
-                    borderRadius: 10,
-                    padding: 10,
-                    margin: 10,
-                  }}
-                >
-                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                    {isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
-                  </Text>
-                  <View style={{ flex: 1 }} />
-                  <Text
-                    style={{
-                      fontSize: 32,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    {currentTrainData?.delay}
-                    {isNaN(currentTrainData?.delay) ? "" : "分"}
-                  </Text>
-                </View>
-                <View
-                  style={{
-                    flex: 1,
-                    backgroundColor: "white",
-                    borderRadius: 10,
-                    padding: 10,
-                    margin: 10,
-                  }}
-                >
-                  <Text style={{ fontSize: 15, color: "#0099CC" }}>列番</Text>
-                  <Text
-                    style={{
-                      fontSize: 32,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    {currentTrainData?.num}
-                  </Text>
-                </View>
-              </View>
-            </View>
             {/* <View
               style={{
                 flexDirection: "column",
@@ -488,7 +378,9 @@ export const EachTrainInfo = (props) => {
                     margin: 10,
                   }}
                 >
-                <Text style={{ fontSize: 15, color: "#0099CC" }}>車両案内</Text>
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                    車両案内
+                  </Text>
                   <View style={{ flex: 1 }} />
                   <Text
                     style={{
@@ -586,13 +478,9 @@ export const EachTrainInfo = (props) => {
             maxHeight: heightPercentageToDP(
               from == "AllTrainDiagramView" ? "70%" : "50%"
             ),
-          }}
+            backgroundColor: "white",
-          onScroll={(e) => {
-            if (!Platform.OS !== "android") return;
-            setIsTop(e.nativeEvent.contentOffset.y < 0);
           }}
         >
-          <View style={{ backgroundColor: "white", alignItems: "center" }}>
           {/* <LottieView
                 autoPlay
                 loop
@@ -601,7 +489,45 @@ export const EachTrainInfo = (props) => {
               />
               <Text>ほげほげふがふが</Text> */}
 
-            {trainData.map((i, index) => {
+          {trainData.map((i, index) => (
+            <StationButton
+              i={i}
+              index={index}
+              stationList={stationList}
+              points={points}
+              currentTrainData={currentTrainData}
+              openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+            />
+          ))}
+
+          <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>
+        </ScrollView>
+      </View>
+    </ActionSheet>
+  );
+};
+
+const StationButton = ({
+  i,
+  index,
+  stationList,
+  points,
+  currentTrainData,
+  openStationACFromEachTrainInfo,
+}) => {
   const [station, se, time] = i.split(",");
   const Stations = stationList.map((a) =>
     a.filter((d) => d.StationName == station)
@@ -638,6 +564,7 @@ export const EachTrainInfo = (props) => {
   if (!isNaN(currentTrainData?.delay)) {
     date.setMinutes(date.getMinutes() + currentTrainData?.delay);
   }
+
   const timeString = date.toTimeString().split(" ")[0].split(":");
   return (
     <TouchableWithoutFeedback
@@ -708,8 +635,7 @@ export const EachTrainInfo = (props) => {
               🚊
             </Text>
           ) : null}
-                      {!isNaN(currentTrainData?.delay) &&
+          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
-                        currentTrainData?.delay != 0 && (
             <Text
               style={{
                 fontSize: 15,
@@ -744,25 +670,73 @@ export const EachTrainInfo = (props) => {
       </View>
     </TouchableWithoutFeedback>
   );
-            })}
+};
 
-            <View style={{ flexDirection: "row" }}>
+const TrainDataView = ({ currentTrainData, currentPosition }) => {
+  return (
     <View
       style={{
-                  padding: 8,
         flexDirection: "row",
-                  borderBottomWidth: 1,
+        minHeight: 200,
-                  borderBottomColor: "#f0f0f0",
+        height: heightPercentageToDP("20%"),
-                  flex: 1,
+        width: widthPercentageToDP("100%"),
       }}
     >
-                <Text style={{ fontSize: 20 }}> </Text>
+      <StateBox
-                <View style={{ flex: 1 }} />
+        title={`現在地 ${currentPosition.toString()}`}
+        text={
+          currentTrainData?.Pos.match("～")
+            ? `${
+                currentTrainData?.Pos.replace("（下り）", "")
+                  .replace("（上り）", "")
+                  .split("～")[0]
+              }～${
+                currentTrainData?.Pos.replace("（下り）", "")
+                  .replace("（上り）", "")
+                  .split("～")[1]
+              }`
+            : currentTrainData?.Pos
+        }
+      />
+      <View style={{ flex: 1, flexDirection: "column" }}>
+        <StateBox
+          title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
+          text={`${currentTrainData?.delay}${
+            isNaN(currentTrainData?.delay) ? "" : "分"
+          }`}
+        />
+        <StateBox title="列番" text={currentTrainData?.num} />
       </View>
     </View>
-          </View>
-        </ScrollView>
-      </View>
-    </ActionSheet>
   );
 };
+
+const StateBox = ({ text, title }) => (
+  <View style={boxStyle}>
+    <Text style={{ fontSize: 15, color: "#0099CC" }}>{title}</Text>
+    <View style={{ flex: 1 }} />
+    <Text style={{ fontSize: 32, color: "#0099CC", textAlign: "right" }}>
+      {text?.match("～") ? (
+        <>
+          <Text style={boxTextStyle}>{text.split("～")[0]}</Text>
+          <Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
+          <Text style={boxTextStyle}>{text.split("～")[1]}</Text>
+        </>
+      ) : (
+        <Text style={boxTextStyle}>{text}</Text>
+      )}
+    </Text>
+  </View>
+);
+const boxStyle = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 10,
+  margin: 10,
+};
+const boxTextStyle = {
+  fontSize: 28,
+  color: "#0099CC",
+  textAlign: "right",
+};