スワイプをやめてボタンを押して拡張できるように変更

components/ActionSheetComponents/EachTrainInfo.js

@@ -54,6 +54,8 @@ export const EachTrainInfo = (props) => {
   const [nearTrainIDList, setNearTrainIDList] = useState([]);
   const [showNearTrain, setShowNearTrain] = useState([]);
   const [isConcatNear, setIsConcatNear] = useState(false);
+  const [tailStation, setTailStation] = useState();
+  const [headStation, setHeadStation] = useState();
 
   //裏列車探索
   useEffect(() => {
@@ -85,10 +87,22 @@ export const EachTrainInfo = (props) => {
     const TDArray = TD.split("#").filter((d) => d != "");
     setShowNearTrain(TDArray);
   }, [data]);
+  useEffect(() => {
+    if (trainData.length == 0) return;
+    showNearTrain.forEach((d) => {
+      const [station, se, time] = d.split(",");
+
+      console.log(trainData); //trainDataは現在の列車の停車駅リスト
+      console.log(station); //showNearTrainは裏列車の停車駅リスト
+      console.log(trainData[0]);
+      if (station == trainData[0].split(",")[0])
+        setHeadStation(trainData[0].split(",")[0]);
+      if (station == trainData[trainData.length - 1].split(",")[0])
+        setTailStation(trainData[trainData.length - 1].split(",")[0]);
+    });
+  }, [trainData, showNearTrain]);
 
   const openBackTrainInfo = (stationInfo, currentTrainIndex) => {
-    console.log(trainData); //trainDataは現在の列車の停車駅リスト
-    console.log(showNearTrain); //showNearTrainは裏列車の停車駅リスト
     const mainTrainStationPosition = trainData.findIndex(
       (d) => d.split(",")[0] == stationInfo
     );
@@ -98,7 +112,6 @@ export const EachTrainInfo = (props) => {
         : mainTrainStationPosition == trainData.length - 1
         ? "tail"
         : "middle";
-    console.log(relationMain);
 
     const subTrainStationPosition = showNearTrain.findIndex(
       (d) => d.split(",")[0] == stationInfo
@@ -109,7 +122,6 @@ export const EachTrainInfo = (props) => {
         : subTrainStationPosition == showNearTrain.length - 1
         ? "tail"
         : "middle";
-    console.log(relationSub);
     switch (relationMain) {
       case "head":
         if (relationSub == "head") {
@@ -622,6 +634,13 @@ export const EachTrainInfo = (props) => {
             backgroundColor: "white",
           }}
         >
+          {headStation && !isConcatNear && (
+            <TouchableOpacity onPress={() => openBackTrainInfo(headStation)}>
+              <View>
+                <Text>直通列車を表示</Text>
+              </View>
+            </TouchableOpacity>
+          )}
           {/* <LottieView
                 autoPlay
                 loop
@@ -630,19 +649,30 @@ export const EachTrainInfo = (props) => {
               />
               <Text>ほげほげふがふが</Text> */}
 
-          {trainData.map((i, index) => (i.split(",")[1] == "提" ? <DataFromButton i={i} /> :
+          {trainData.map((i, index) =>
-            <StationButton
+            i.split(",")[1] == "提" ? (
-              i={i}
+              <DataFromButton i={i} />
-              index={index}
+            ) : (
-              stationList={stationList}
+              <StationButton
-              points={points}
+                i={i}
-              currentTrainData={currentTrainData}
+                index={index}
-              openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+                stationList={stationList}
-              headAndTail={showNearTrain.map((d) => d.split(",")[0])}
+                points={points}
-              openBackTrainInfo={openBackTrainInfo}
+                currentTrainData={currentTrainData}
-              isConcatNear={isConcatNear}
+                openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
-            />
+                headAndTail={showNearTrain.map((d) => d.split(",")[0])}
-          ))}
+                openBackTrainInfo={openBackTrainInfo}
+                isConcatNear={isConcatNear}
+              />
+            )
+          )}
+          {tailStation && !isConcatNear && (
+            <TouchableOpacity onPress={() => openBackTrainInfo(tailStation)}>
+              <View>
+                <Text>直通列車を表示</Text>
+              </View>
+            </TouchableOpacity>
+          )}
 
           <View style={{ flexDirection: "row" }}>
             <View
@@ -664,7 +694,7 @@ export const EachTrainInfo = (props) => {
   );
 };
 
-const DataFromButton  = ({i}) => {
+const DataFromButton = ({ i }) => {
   const [station, se, time] = i.split(",");
   return (
     <TouchableWithoutFeedback
@@ -684,14 +714,18 @@ const DataFromButton  = ({i}) => {
           <Text style={{ fontSize: 20 }}>{station}</Text>
           <View style={{ flex: 1 }} />
           <Text style={{ fontSize: 18 }}>
-            提供元<MaterialCommunityIcons name={"open-in-new"} color="black" size={20} />
+            提供元
+            <MaterialCommunityIcons
+              name={"open-in-new"}
+              color="black"
+              size={20}
+            />
           </Text>
-          
         </View>
       </View>
     </TouchableWithoutFeedback>
   );
-}
+};
 
 const StationButton = ({
   i,
@@ -744,114 +778,93 @@ const StationButton = ({
   );
   const swipagleRef = useRef(null);
   return (
-    <Swipeable
+    <TouchableWithoutFeedback
-      ref={swipagleRef}
+      onPress={() => openStationACFromEachTrainInfo(station)}
       key={station}
-      onSwipeableOpen={() => {
-        openBackTrainInfo(station, index);
-        swipagleRef.current.close();
-      }}
-      renderRightActions={
-        isConnected && !isConcatNear
-          ? (progress, dragX) => {
-              //openBackTrainInfo(station, index);
-              return <View style={{ flex: 1, backgroundColor: "red" }}></View>;
-            }
-          : null
-      }
     >
-      <TouchableWithoutFeedback
+      <View style={{ flexDirection: "row", backgroundColor: "white" }}>
-        onPress={() => openStationACFromEachTrainInfo(station)}
+        <View
-        key={station}
+          style={{
-      >
+            width: 35,
-        <View style={{ flexDirection: "row", backgroundColor: "white" }}>
+            position: "relative",
-          <View
+            marginHorizontal: 15,
-            style={{
+            flexDirection: "row",
-              width: 35,
+            height: "101%",
-              position: "relative",
+          }}
-              marginHorizontal: 15,
+        >
-              flexDirection: "row",
+          {lineIDs.map((lineID, index) => (
-              height: "101%",
+            <View
-            }}
+              style={{
-          >
+                backgroundColor: lineColorList[lineID],
-            {lineIDs.map((lineID, index) => (
+                flex: 1,
-              <View
+              }}
+              key={lineID}
+            >
+              <View style={{ flex: 1 }} />
+              <Text
                 style={{
-                  backgroundColor: lineColorList[lineID],
+                  color: "white",
-                  flex: 1,
+                  textAlign: "center",
+                  fontSize: 10,
+                  fontWeight: "bold",
                 }}
-                key={lineID}
               >
-                <View style={{ flex: 1 }} />
+                {lineIDs[index]}
-                <Text
+                {"\n"}
-                  style={{
+                {EachIDs[index]}
-                    color: "white",
+              </Text>
-                    textAlign: "center",
+              <View style={{ flex: 1 }} />
-                    fontSize: 10,
+            </View>
-                    fontWeight: "bold",
+          ))}
-                  }}
+        </View>
-                >
+        <View
-                  {lineIDs[index]}
+          style={{
-                  {"\n"}
+            padding: 8,
-                  {EachIDs[index]}
+            flexDirection: "row",
-                </Text>
+            borderBottomWidth: 1,
-                <View style={{ flex: 1 }} />
+            borderBottomColor: "#f0f0f0",
-              </View>
+            flex: 1,
-            ))}
+          }}
-          </View>
+        >
-          <View
+          <Text style={{ fontSize: 20 }}>{station}</Text>
-            style={{
+          <View style={{ flex: 1 }} />
-              padding: 8,
+          {points && points.findIndex((d) => d == index) >= 0 ? (
-              flexDirection: "row",
+            <Text style={{ fontSize: 20, marginRight: 70 }}>🚊</Text>
-              borderBottomWidth: 1,
+          ) : null}
-              borderBottomColor: "#f0f0f0",
+          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
-              borderRightColor: isConnected && !isConcatNear ? "red" : "white",
-              borderRightWidth: 10,
-              paddingRight: 10,
-              flex: 1,
-            }}
-          >
-            <Text style={{ fontSize: 20 }}>{station}</Text>
-            <View style={{ flex: 1 }} />
-            {points && points.findIndex((d) => d == index) >= 0 ? (
-              <Text style={{ fontSize: 20, marginRight: 70 }}>🚊</Text>
-            ) : null}
-            {!isNaN(currentTrainData?.delay) &&
-              currentTrainData?.delay != 0 && (
-                <Text
-                  style={{
-                    fontSize: 15,
-                    color: "black",
-                    width: 60,
-                    position: "absolute",
-                    right: 120,
-                    textAlign: "right",
-                    textDecorationLine: "line-through",
-                  }}
-                >
-                  {time}
-                </Text>
-              )}
             <Text
               style={{
-                fontSize: 20,
+                fontSize: 15,
-                color: isNaN(currentTrainData?.delay)
+                color: "black",
-                  ? "black"
-                  : currentTrainData?.delay == 0
-                  ? "black"
-                  : "red",
                 width: 60,
+                position: "absolute",
+                right: 120,
+                textAlign: "right",
+                textDecorationLine: "line-through",
               }}
             >
-              {timeString[0]}:{timeString[1]}
+              {time}
             </Text>
-            <Text style={{ fontSize: 18, width: 50 }}>
+          )}
-              {se?.replace("発", "出発").replace("着", "到着")}
+          <Text
-            </Text>
+            style={{
-          </View>
+              fontSize: 20,
+              color: isNaN(currentTrainData?.delay)
+                ? "black"
+                : currentTrainData?.delay == 0
+                ? "black"
+                : "red",
+              width: 60,
+            }}
+          >
+            {timeString[0]}:{timeString[1]}
+          </Text>
+          <Text style={{ fontSize: 18, width: 50 }}>
+            {se?.replace("発", "出発").replace("着", "到着")}
+          </Text>
         </View>
-      </TouchableWithoutFeedback>
+      </View>
-    </Swipeable>
+    </TouchableWithoutFeedback>
   );
 };