多層建て列車対応

components/ActionSheetComponents/EachTrainInfo.js

@@ -51,6 +51,7 @@ export const EachTrainInfo = (props) => {
   const [isConcatNear, setIsConcatNear] = useState(false);
   const [tailStation, setTailStation] = useState();
   const [headStation, setHeadStation] = useState();
+  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
 
   //裏列車探索
   useEffect(() => {
@@ -165,7 +166,12 @@ export const EachTrainInfo = (props) => {
       originalStationList,
       from: "AllTrainDiagramView",
     };
-    //SheetManager.show("EachTrainInfo", { payload });
+    SheetManager.hide("EachTrainInfo").then(() => {
+      //0.1秒待機してから開く
+      setTimeout(() => {
+        SheetManager.show("EachTrainInfo", { payload });
+      }, 1);
+    });
   };
   useEffect(() => {
     setCurrentTrainData(
@@ -380,7 +386,7 @@ export const EachTrainInfo = (props) => {
   const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
   return (
     <ActionSheet
-      gestureEnabled={true}
+      //gestureEnabled={!actionSheetHorizonalScroll}
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
       drawUnderStatusBar={false}
@@ -448,6 +454,9 @@ export const EachTrainInfo = (props) => {
         </View>
         {from == "AllTrainDiagramView" || (
           <ScrollView
+            //onTouchStart={() => setActionSheetHorizonalScroll(true)}
+            //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+            //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
             style={{
               flexDirection: "row",
               //width: widthPercentageToDP("200%"),
@@ -460,6 +469,8 @@ export const EachTrainInfo = (props) => {
             <TrainDataView
               currentTrainData={currentTrainData}
               currentPosition={currentPosition}
+              nearTrainIDList={nearTrainIDList}
+              openTrainInfo={openTrainInfo}
             />
             {/* <View
               style={{
@@ -853,7 +864,12 @@ const StationButton = ({
   );
 };
 
-const TrainDataView = ({ currentTrainData, currentPosition }) => {
+const TrainDataView = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
   return (
     <View
       style={{
@@ -880,23 +896,46 @@ const TrainDataView = ({ currentTrainData, currentPosition }) => {
         }
       />
       <View style={{ flex: 1, flexDirection: "column" }}>
-        <StateBox
-          title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
-          text={`${currentTrainData?.delay}${
-            isNaN(currentTrainData?.delay) ? "" : "分"
-          }`}
-        />
-        <StateBox title="列番" text={currentTrainData?.num} />
+        <View style={{ flex: 1, flexDirection: "row" }}>
+          <StateBox
+            title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
+            text={`${currentTrainData?.delay}${
+              isNaN(currentTrainData?.delay) ? "" : "分"
+            }`}
+          />
+        </View>
+        <TouchableOpacity
+          style={{ flex: 1, flexDirection: "row" }}
+          disabled={nearTrainIDList.length == 0}
+          onPress={() => {
+            if (nearTrainIDList.length == 0) return;
+            openTrainInfo(nearTrainIDList[0]);
+          }}
+        >
+          {nearTrainIDList.length == 0 ? (
+            <StateBox title="列番" text={currentTrainData?.num} />
+          ) : (
+            <StateBox
+              title="増解結相手を表示▶️"
+              text={`${nearTrainIDList}`}
+              style={{
+                borderWidth: 1,
+                borderColor: "red",
+                borderStyle: "solid",
+              }}
+            />
+          )}
+        </TouchableOpacity>
       </View>
     </View>
   );
 };
 
-const StateBox = ({ text, title }) => (
-  <View style={boxStyle}>
-    <Text style={{ fontSize: 15, color: "#0099CC" }}>{title}</Text>
+const StateBox = ({ text, title, style }) => (
+  <View style={{ ...boxStyle, ...style }}>
+    <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
     <View style={{ flex: 1 }} />
-    <View style={{ fontSize: 32, color: "#0099CC", textAlign: "right" }}>
+    <View style={{ fontSize: 25, color: "#0099CC", textAlign: "right" }}>
       {text?.match("～") ? (
         <>
           <Text style={boxTextStyle}>{text.split("～")[0]}</Text>
@@ -917,7 +956,7 @@ const boxStyle = {
   margin: 10,
 };
 const boxTextStyle = {
-  fontSize: 28,
+  fontSize: 25,
   color: "#0099CC",
   textAlign: "right",
 };