typeの整備

2025-08-23 20:07:05 +00:00
parent 7e46dcda2f
commit c2226eb49e
3 changed files with 122 additions and 89 deletions
--- a/components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx
+++ b/components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx
@@ -1,9 +1,30 @@
-import React from "react";
+import React, { FC } from "react";
 import { View, Text, TouchableWithoutFeedback } from "react-native";
 import dayjs from "dayjs";
 import lineColorList from "../../../assets/originData/lineColorList";

-export const EachStopList = ({
+type seTypes = "発編" | "着編" | "通編" | "頃編" | "発" | "着" | string;
+
+type currentTrainDataType = {
+  Index: number;
+  num: string;
+  delay: "入線" | number;
+  Pos: string;
+  PosNum: number;
+  Direction: number;
+  Type: string;
+  Line: string;
+};
+type props = {
+  i: string;
+  index: number;
+  stationList: { StationName: string; StationNumber: string }[][];
+  points: boolean;
+  currentTrainData?: currentTrainDataType;
+  openStationACFromEachTrainInfo?: (station: string) => void;
+  showThrew: boolean;
+};
+export const EachStopList: FC<props> = ({
  i,
  index,
  stationList,
@@ -12,11 +33,11 @@ export const EachStopList = ({
  openStationACFromEachTrainInfo,
  showThrew,
 }) => {
+  const [station, se, time] = i.split(",") as [string, seTypes, string]; // 阿波池田,発,6:21
  if (!showThrew) {
-    if (i.split(",")[1] == "通過") return null;
-    if (i.split(",")[1] == "通編") return null;
+    if (se == "通過") return null;
+    if (se == "通編") return null;
  }
-  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), []);
@@ -52,22 +73,12 @@ export const EachStopList = ({
    }
  })();
  // 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 = se == "通過" ? "" : dates.format("HH:mm");
-
+  const textColor = `#${seType == "community" ? "44f" : "000"}${
+    se == "通過" || se == "通編" ? "5" : ""
+  }`;
  return (
    <TouchableWithoutFeedback
      onPress={() =>
@@ -76,12 +87,7 @@ export const EachStopList = ({
      }
      key={station}
    >
-      <View
-        style={{
-          flexDirection: "row",
-          backgroundColor: "#ffffffc2",
-        }}
-      >
+      <View style={{ flexDirection: "row", backgroundColor: "#ffffffc2" }}>
        <View
          style={{
            width: 35,
@@ -91,31 +97,8 @@ export const EachStopList = ({
            height: "101%",
          }}
        >
-          {lineIDs.map((lineID, index) => (
-            <View
-              style={{
-                backgroundColor: `${lineColorList[lineID]}${
-                  se == "通過" || se == "通編" ? "80" : ""
-                }`,
-                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>
+          {StationNumbers.map((stn, index) => (
+            <StationNumbersBox stn={stn} se={se} key={index} />
          ))}
        </View>
        <View
@@ -130,7 +113,7 @@ export const EachStopList = ({
          <Text
            style={{
              fontSize: 20,
-              color: `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`,
+              color: textColor,
              fontStyle: seType == "community" ? "italic" : "normal",
            }}
          >
@@ -138,18 +121,18 @@ export const EachStopList = ({
          </Text>
          <View style={{ flex: 1 }} />
          <View style={{ position: "relative", width: 0 }}>
-            {points ? (
+            {points && (
              <Text style={{ fontSize: 20, position: "absolute", left: -60 }}>
                🚊
              </Text>
-            ) : null}
+            )}
          </View>

-          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
+          {currentTrainData.delay != "入線" && currentTrainData?.delay != 0 && (
            <Text
              style={{
                fontSize: 15,
-                color: `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`,
+                color: textColor,
                width: 60,
                position: "absolute",
                right: 120,
@@ -161,23 +144,72 @@ export const EachStopList = ({
              {time}
            </Text>
          )}
-          <Text
-            style={{
-              fontSize: 20,
-              color: isNaN(currentTrainData?.delay)
-                ? `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`
-                : currentTrainData?.delay == 0
-                ? `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`
-                : "red",
-              width: 60,
-              fontStyle: seType == "community" ? "italic" : "normal",
-            }}
-          >
-            {se == "通過" ? "レ" : timeString}
+          <StationTimeBox
+            delay={currentTrainData?.delay}
+            textColor={textColor}
+            seType={seType}
+            se={se}
+            time={time}
+          />
+          <Text style={{ fontSize: 18, width: 50, color: textColor }}>
+            {seString}
          </Text>
-          <Text style={{ fontSize: 18, width: 50,color:`#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}` }}>{seString}</Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
 };
+
+const StationNumbersBox: FC<{ stn: string; se: seTypes }> = (props) => {
+  const { stn, se } = props;
+  const lineColor = lineColorList[stn.charAt(0)];
+  const hasThrew = se == "通過" || se == "通編" ? "80" : "";
+  const backgroundColor = `${lineColor}${hasThrew}`;
+  return (
+    <View style={{ backgroundColor, flex: 1 }} key={stn}>
+      <View style={{ flex: 1 }} />
+      <Text
+        style={{
+          color: "white",
+          textAlign: "center",
+          fontSize: 10,
+          fontWeight: "bold",
+        }}
+      >
+        {stn.charAt(0)}
+        {"\n"}
+        {stn.slice(1)}
+      </Text>
+      <View style={{ flex: 1 }} />
+    </View>
+  );
+};
+
+type StationTimeBoxType = {
+  delay: "入線" | number;
+  textColor: string;
+  seType: seTypes;
+  se: string;
+  time: string;
+};
+
+const StationTimeBox: FC<StationTimeBoxType> = (props) => {
+  const { delay, textColor, seType, se, time } = props;
+  const dates = dayjs()
+    .set("hour", parseInt(time.split(":")[0]))
+    .set("minute", parseInt(time.split(":")[1]))
+    .add(delay == "入線" ? 0 : delay, "minute");
+  const timeString = se == "通過" ? "" : dates.format("HH:mm");
+  return (
+    <Text
+      style={{
+        fontSize: 20,
+        color: delay != "入線" ? delay != 0 && "red" : textColor,
+        width: 60,
+        fontStyle: seType == "community" ? "italic" : "normal",
+      }}
+    >
+      {se == "通過" ? "レ" : timeString}
+    </Text>
+  );
+};
--- a/components/ActionSheetComponents/SpecialTrainInfo.tsx
+++ b/components/ActionSheetComponents/SpecialTrainInfo.tsx
@@ -1,10 +1,14 @@
-import React, { useRef } from "react";
+import React, { FC, useRef } from "react";
 import { View, Platform } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";

 import { SpecialTrainInfoBox } from "../Menu/SpecialTrainInfoBox";
-export const SpecialTrainInfo = ({ payload }) => {
+
+type props = {
+  payload: { navigate: (screen: string, params?: object) => void };
+};
+export const SpecialTrainInfo: FC<props> = ({ payload }) => {
  const { navigate } = payload;
  const actionSheetRef = useRef(null);
  const insets = useSafeAreaInsets();
--- a/components/Menu/SpecialTrainInfoBox.tsx
+++ b/components/Menu/SpecialTrainInfoBox.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useLayoutEffect, useState } from "react";
+import { FC, useLayoutEffect, useState } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import { getPDFViewURL } from "@/lib/getPdfViewURL";
 import { ScrollView, SheetManager } from "react-native-actions-sheet";
@@ -6,20 +6,27 @@ import { ScrollView, SheetManager } from "react-native-actions-sheet";
 type props = {
  navigate: (screen: string, params?: object) => void;
 };
+type specialDataType = { address: string; text: string; description: string };
+
 export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
-  const [specialData, setSpecialData] = useState([]);
+  const [specialData, setSpecialData] = useState<specialDataType[]>([]);
  useLayoutEffect(() => {
    fetch("https://n8n.haruk.in/webhook/sptrainfo")
      .then((res) => res.json())
      .then((data) => setSpecialData(data.data))
      .catch((err) => console.log(err));
  }, []);
+
+  const onPressItem: (d: specialDataType) => void = (d) => {
+    navigate("howto", {
+      info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
+      goTo: "menu",
+    });
+    SheetManager.hide("SpecialTrainInfo");
+  };
+  
  return (
-    <View
-      style={{
-        backgroundColor: "#0099CC",
-      }}
-    >
+    <View style={{ backgroundColor: "#0099CC" }}>
      <View style={{ flexDirection: "row", alignItems: "center" }}>
        <Text
          style={{
@@ -33,20 +40,10 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
          臨時列車情報
        </Text>
      </View>
-      <ScrollView
-        style={{
-          backgroundColor: "white",
-        }}
-      >
+      <ScrollView style={{ backgroundColor: "white" }}>
        {specialData.map((d) => (
          <TouchableOpacity
-            onPress={() => {
-              navigate("howto", {
-                info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
-                goTo: "menu",
-              });
-              SheetManager.hide("SpecialTrainInfo");
-            }}
+            onPress={() => onPressItem(d)}
            onLongPress={() => alert(d.description)}
            key={d.address}
            style={{