通過表示のオンオフを実装

components/ActionSheetComponents/EachTrainInfo/EachStopList.js

@@ -10,7 +10,9 @@ export const EachStopList = ({
   points,
   currentTrainData,
   openStationACFromEachTrainInfo,
+  showThrew,
 }) => {
+  if (!showThrew && i.split(",")[1] == "通過") return null;
   const [station, se, time] = i.split(","); // 阿波池田,発,6:21
   const Stations = stationList
     .map((a) => a.filter((d) => d.StationName == station))
@@ -43,7 +45,7 @@ export const EachStopList = ({
     .set("hour", parseInt(time.split(":")[0]))
     .set("minute", parseInt(time.split(":")[1]))
     .add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute");
-  const timeString = se == "通過"? "" :dates.format("HH:mm").split(":");
+  const timeString = se == "通過" ? "" : dates.format("HH:mm").split(":");
 
   return (
     <TouchableWithoutFeedback
@@ -66,7 +68,9 @@ export const EachStopList = ({
           {lineIDs.map((lineID, index) => (
             <View
               style={{
-                backgroundColor: lineColorList[lineID],
+                backgroundColor: `${lineColorList[lineID]}${
+                  se == "通過" ? "80" : ""
+                }`,
                 flex: 1,
               }}
               key={lineID}
@@ -97,7 +101,11 @@ export const EachStopList = ({
             flex: 1,
           }}
         >
-          <Text style={{ fontSize: 20 }}>{station}</Text>
+          <Text
+            style={{ fontSize: 20, color: `#000${se == "通過" ? "5" : ""}` }}
+          >
+            {station}
+          </Text>
           <View style={{ flex: 1 }} />
           {points && points.findIndex((d) => d == index) >= 0 ? (
             <Text style={{ fontSize: 20, marginRight: 70 }}>🚊</Text>

components/ActionSheetComponents/EachTrainInfo/ScrollStickyContent.js

@@ -1,7 +1,8 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View, Text, LayoutAnimation } from "react-native";
 
-export const ScrollStickyContent = ({ currentTrainData }) => {
+export const ScrollStickyContent = (props) => {
+  const { currentTrainData, showThrew, setShowThrew, haveThrough } = props;
   return (
     <View
       style={{
@@ -49,7 +50,27 @@ export const ScrollStickyContent = ({ currentTrainData }) => {
           >
             見込
           </Text>
-          <Text style={{ fontSize: 20, width: 50 }}></Text>
+          <Text
+            style={{
+              fontSize: 15,
+              width: 50,
+              paddingBottom: 0,
+              margin: 0,
+              textAlign: "center",
+              textAlignVertical: "center",
+              opacity: haveThrough ? 1 : 0,
+            }}
+            onPress={() => {
+              if (!haveThrough) return;
+              LayoutAnimation.configureNext({
+                duration: 200,
+                update: { type: "easeInEaseOut", springDamping: 0.6 },
+              });
+              setShowThrew(!showThrew);
+            }}
+          >
+            (通過{showThrew ? "▼" : "▶"})
+          </Text>
         </View>
       </View>
     </View>

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -82,6 +82,8 @@ export const EachTrainInfoCore = ({
   const [currentPosition, setCurrentPosition] = useState([]);
   const [trainData, setTrainData] = useState([]);
   const [trainDataWidhThrough, setTrainDataWithThrough] = useState([]);
+  const [showThrew, setShowThrew] = useState(false);
+  const [haveThrough, setHaveThrough] = useState(false);
 
   const stationList =
     originalStationList &&
@@ -136,13 +138,13 @@ export const EachTrainInfoCore = ({
       originalStationList[
         lineListPair[stationIDPair[betweenStationLine]]
       ].forEach((d) => {
-        console.log(d.StationNumber, baseStationNumberFirst, baseStationNumberSecond);
         if (
           d.StationNumber > baseStationNumberFirst &&
           d.StationNumber < baseStationNumberSecond
         ) {
           console.log(d.Station_JP);
           allThroughStation.push(`${d.Station_JP},通過,`);
+          setHaveThrough(true);
           reverse = false;
         } else {
           if (
@@ -151,6 +153,7 @@ export const EachTrainInfoCore = ({
           ) {
             console.log(d.Station_JP);
             allThroughStation.push(`${d.Station_JP},通過,`);
+            setHaveThrough(true);
             reverse = true;
           }
         }
@@ -161,11 +164,11 @@ export const EachTrainInfoCore = ({
     let mainArray = [...trainData];
     let indexs = 0;
     trainData.forEach((d, index, array) => {
-      indexs = indexs+1;
+      indexs = indexs + 1;
-      if(!allThroughStationList[index]) return;
+      if (!allThroughStationList[index]) return;
-      if(allThroughStationList[index].length == 0) return;
+      if (allThroughStationList[index].length == 0) return;
       mainArray.splice(indexs, 0, ...allThroughStationList[index]);
-      indexs = indexs+allThroughStationList[index].length;
+      indexs = indexs + allThroughStationList[index].length;
     });
     setTrainDataWithThrough(mainArray);
   }, [trainData]);
@@ -366,7 +369,9 @@ export const EachTrainInfoCore = ({
         shortHeader={<ShortHeader {...headerItem} />}
         longHeader={<LongHeader {...headerItem} />}
         topStickyContent={
-          <ScrollStickyContent currentTrainData={currentTrainData} />
+          <ScrollStickyContent
+            {...{ currentTrainData, showThrew, setShowThrew, haveThrough }}
+          />
         }
       >
         {headStation.length != 0 &&
@@ -430,12 +435,15 @@ export const EachTrainInfoCore = ({
             <DataFromButton i={i} />
           ) : (
             <EachStopList
-                i={i}
+              {...{
-                index={index}
+                i,
-                stationList={stationList}
+                index,
-                points={points}
+                stationList,
-                currentTrainData={currentTrainData}
+                points,
-                openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+                currentTrainData,
+                openStationACFromEachTrainInfo,
+                showThrew,
+              }}
             />
           )
         )}