コンテンツ分割、整理

components/ActionSheetComponents/EachTrainInfo.js

@@ -2,18 +2,13 @@ import React, { useEffect, useState, useRef } from "react";
 import {
   View,
   LayoutAnimation,
-  ScrollView,
   Text,
   TouchableOpacity,
   Platform,
-  Animated,
   StyleSheet,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import ActionSheet, {
-  SheetManager,
-  useScrollHandlers,
-} from "react-native-actions-sheet";
+import ActionSheet, { SheetManager } from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
 import trainList from "../../assets/originData/trainList";
 import { lineList } from "../../lib/getStationList";
@@ -25,8 +20,10 @@ import { customTrainDataDetector } from "../custom-train-data";
 import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
 import { EachStopList } from "./EachTrainInfo/EachStopList";
 import { DataFromButton } from "./EachTrainInfo/DataFromButton";
-import { TrainDataView } from "./EachTrainInfo/TrainDataView";
 import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
+import { LongHeader } from "./EachTrainInfo/LongHeader";
+import { ShortHeader } from "./EachTrainInfo/ShortHeader";
+import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
 
 export const EachTrainInfo = (props) => {
   if (!props.payload) return <></>;
@@ -379,9 +376,6 @@ export const EachTrainInfo = (props) => {
       .replace("ライナーライナー", "ライナー");
   };
   const actionSheetRef = useRef(null);
-  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
-
-  const scrollOffsetY = useRef(new Animated.Value(0)).current;
   return (
     <ActionSheet
       gestureEnabled={true}
@@ -460,108 +454,28 @@ export const EachTrainInfo = (props) => {
             from == "AllTrainDiagramView" ? (
               <></>
             ) : (
-              <ScrollView
-                //onTouchStart={() => setActionSheetHorizonalScroll(true)}
-                //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
-                //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
-                style={{
-                  flexDirection: "row",
-                  flex: 1,
-                  //width: widthPercentageToDP("200%"),
-                  // minHeight: 200,
-                  //height: heightPercentageToDP("20%"),
-                }}
-                horizontal
-                pagingEnabled
-              >
-                <TrainDataView
-                  mode={2}
-                  currentTrainData={currentTrainData}
-                  currentPosition={currentPosition}
-                  nearTrainIDList={nearTrainIDList}
-                  openTrainInfo={openTrainInfo}
-                />
-              </ScrollView>
+              <ShortHeader
+                currentTrainData={currentTrainData}
+                currentPosition={currentPosition}
+                nearTrainIDList={nearTrainIDList}
+                openTrainInfo={openTrainInfo}
+              />
             )
           }
           longHeader={
             from == "AllTrainDiagramView" ? (
               <></>
             ) : (
-              <ScrollView
-                //onTouchStart={() => setActionSheetHorizonalScroll(true)}
-                //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
-                //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
-                style={{
-                  flexDirection: "row",
-                  //width: widthPercentageToDP("200%"),
-                  // minHeight: 200,
-                  //height: heightPercentageToDP("20%"),
-                }}
-                horizontal
-                pagingEnabled
-              >
-                <TrainDataView
-                  currentTrainData={currentTrainData}
-                  currentPosition={currentPosition}
-                  nearTrainIDList={nearTrainIDList}
-                  openTrainInfo={openTrainInfo}
-                />
-              </ScrollView>
+              <LongHeader
+                currentTrainData={currentTrainData}
+                currentPosition={currentPosition}
+                nearTrainIDList={nearTrainIDList}
+                openTrainInfo={openTrainInfo}
+              />
             )
           }
           topStickyContent={
-            <View
-              style={{
-                alignItems: "center",
-                backgroundColor: "white",
-                flexDirection: "row",
-              }}
-            >
-              <View
-                style={{
-                  padding: 8,
-                  flexDirection: "row",
-                  borderBottomWidth: 1,
-                  borderBottomColor: "#f0f0f0",
-                  flex: 1,
-                }}
-              >
-                <Text style={{ fontSize: 20 }}>停車駅</Text>
-                <View style={{ flex: 1 }} />
-                <View style={{ flexDirection: "row" }}>
-                  {!isNaN(currentTrainData?.delay) &&
-                    currentTrainData?.delay != 0 && (
-                      <Text
-                        style={{
-                          fontSize: 15,
-                          color: "black",
-                          position: "absolute",
-                          right: 110,
-                          textAlign: "right",
-                          textDecorationLine: "line-through",
-                        }}
-                      >
-                        (定刻)
-                      </Text>
-                    )}
-                  <Text
-                    style={{
-                      fontSize: 20,
-                      color: isNaN(currentTrainData?.delay)
-                        ? "black"
-                        : currentTrainData?.delay == 0
-                        ? "black"
-                        : "red",
-                      width: 60,
-                    }}
-                  >
-                    見込
-                  </Text>
-                  <Text style={{ fontSize: 20, width: 50 }}></Text>
-                </View>
-              </View>
-            </View>
+            <ScrollStickyContent currentTrainData={currentTrainData} />
           }
         >
           {headStation && !isConcatNear && (