EachTrainInfoをコンポーネントファイル分割

components/ActionSheetComponents/EachTrainInfo/EachStopList.js

@@ -0,0 +1,137 @@
+import React from "react";
+import { View, Text, TouchableWithoutFeedback } from "react-native";
+import dayjs from "dayjs";
+import lineColorList from "../../../assets/originData/lineColorList";
+
+export const EachStopList = ({
+  i,
+  index,
+  stationList,
+  points,
+  currentTrainData,
+  openStationACFromEachTrainInfo,
+}) => {
+  const [station, se, time] = i.split(","); // 阿波池田,発,6:21
+  const Stations = stationList
+    .map((a) => a.filter((d) => d.StationName == station))
+    .reduce((newArray, e) => newArray.concat(e), []);
+  /*Array [
+        Object {
+          "StationName": "佐古",
+          "StationNumber": "T01",
+        },
+        Object {
+          "StationName": "佐古",
+          "StationNumber": "B01",
+        },
+      ] */
+  const StationNumbers =
+    Stations &&
+    Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber);
+  // Array [  "T01",  "B01",]
+  const lineIDs = [];
+  const EachIDs = [];
+  StationNumbers.forEach((d) => {
+    const textArray = d.split("");
+    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
+    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
+  });
+  // Array [  "T",  "B",]
+  // Array [  "01",  "01",]
+
+  const dates = dayjs()
+    .set("hour", parseInt(time.split(":")[0]))
+    .set("minute", parseInt(time.split(":")[1]))
+    .add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute");
+  const timeString = dates.format("HH:mm").split(":");
+
+  return (
+    <TouchableWithoutFeedback
+      onPress={() => openStationACFromEachTrainInfo(station)}
+      key={station}
+    >
+      <View style={{ flexDirection: "row", backgroundColor: "white" }}>
+        <View
+          style={{
+            width: 35,
+            position: "relative",
+            marginHorizontal: 15,
+            flexDirection: "row",
+            height: "101%",
+          }}
+        >
+          {lineIDs.map((lineID, index) => (
+            <View
+              style={{
+                backgroundColor: lineColorList[lineID],
+                flex: 1,
+              }}
+              key={lineID}
+            >
+              <View style={{ flex: 1 }} />
+              <Text
+                style={{
+                  color: "white",
+                  textAlign: "center",
+                  fontSize: 10,
+                  fontWeight: "bold",
+                }}
+              >
+                {lineIDs[index]}
+                {"\n"}
+                {EachIDs[index]}
+              </Text>
+              <View style={{ flex: 1 }} />
+            </View>
+          ))}
+        </View>
+        <View
+          style={{
+            padding: 8,
+            flexDirection: "row",
+            borderBottomWidth: 1,
+            borderBottomColor: "#f0f0f0",
+            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,
+              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>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};