ファイルの分離、整理

2024-08-30 06:13:26 +00:00 · 2024-08-30 06:13:26 +00:00 · 820623f2ce
commit 820623f2ce
parent 76c8bb8486
5 changed files with 139 additions and 51 deletions
--- a/MenuPage.js
+++ b/MenuPage.js
@ -73,7 +73,7 @@ export function MenuPage() {
      <Stack.Screen
        name="howto"
        options={optionData}
-        children={(props) => <HowTo {...props} />}
+        component={HowTo}
      />
    </Stack.Navigator>
  );
--- a/components/ActionSheetComponents/EachTrainInfoCore.js
+++ b/components/ActionSheetComponents/EachTrainInfoCore.js
@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react";
 import {
  View,
-  LayoutAnimation,
  Text,
  TouchableOpacity,
  StyleSheet,
@ -9,7 +8,6 @@ import {
  BackHandler,
  Linking,
 } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
 import { SheetManager } from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
 import trainList from "../../assets/originData/trainList";
@ -33,8 +31,8 @@ import { getType } from "../../lib/eachTrainInfoCoreLib/getType";
 import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecialTrain";
 import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo";
 import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
-import { TrainIconStatus } from "./EachTrainInfo/trainIconStatus";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
+import { HeaderText } from "./EachTrainInfoCore/HeaderText";

 export const EachTrainInfoCore = ({
  actionSheetRef,
@ -45,10 +43,7 @@ export const EachTrainInfoCore = ({
 }) => {
  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
  const { currentTrain } = useCurrentTrain();
-  const {
-    setTrainInfo,
-    originalStationList,
-  } = useTrainMenu();
+  const { setTrainInfo, originalStationList } = useTrainMenu();
  const [currentTrainData, setCurrentTrainData] = useState();

  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
@ -84,7 +79,6 @@ export const EachTrainInfoCore = ({
  const [currentPosition, setCurrentPosition] = useState([]);
  const [trainData, setTrainData] = useState([]);

-
  const stationList =
    originalStationList &&
    lineList.map((d) =>
@ -283,37 +277,17 @@ export const EachTrainInfoCore = ({
          />
        </View>
      )}
-      <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
-        <TrainIconStatus trainData={data} />
-        <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
-          {trainName}
-        </Text>
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
-          {showHeadStation.map((d) => `${headStation[d].id} + `)}
-          {data.trainNum}
-          {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
-        </Text>
+      <HeaderText
+        data={data}
+        trainData={trainData}
+        showHeadStation={showHeadStation}
+        showTailStation={showTailStation}
+        headStation={headStation}
+        tailStation={tailStation}
+        navigate={navigate}
+        from={from}
+      />

-        {data.limited != undefined &&
-          getType(data.limited.split(":")[0]) &&
-          !data.limited.split(":")[1].match("サンポート") && (
-            <Ionicons
-              name="subway"
-              color="white"
-              size={30}
-              style={{ margin: 5 }}
-              onPress={() => {
-                LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
-                navigate("trainbase", {
-                  info: "train.html?tn=" + data.trainNum,
-                  from,
-                });
-                SheetManager.hide("EachTrainInfo");
-              }}
-            />
-          )}
-      </View>
      <DynamicHeaderScrollView
        from={from}
        styles={styles}
--- a/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx
+++ b/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx
@ -0,0 +1,73 @@
+import React, { CSSProperties, FC, useEffect, useMemo, useState } from "react";
+import { Text, View, LayoutAnimation, TextStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { SheetManager } from "react-native-actions-sheet";
+import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";
+import { migrateTrainName } from "../../../lib/eachTrainInfoCoreLib/migrateTrainName";
+import { TrainIconStatus } from "./trainIconStatus";
+import { TrainViewIcon } from "./trainViewIcon";
+
+type Props = {
+  data: { trainNum: string; limited: string };
+  trainData: string[];
+  showHeadStation: number[];
+  showTailStation: number[];
+  headStation: { id: string }[];
+  tailStation: { id: string }[];
+  navigate: any;
+  from: string;
+};
+
+const textConfig: TextStyle = {
+  fontSize: 20,
+  fontWeight: "bold",
+  color: "white",
+};
+
+export const HeaderText: FC<Props> = ({
+  data,
+  trainData,
+  showHeadStation,
+  showTailStation,
+  headStation,
+  tailStation,
+  navigate,
+  from,
+}) => {
+  const trainName = useMemo(() => {
+    if (!data.limited) return "";
+    const limitedArray = data.limited.split(":");
+    const type = getType(limitedArray[0]);
+
+    switch (true) {
+      case !!limitedArray[1]:
+        // 特急の場合は、列車名を取得
+        return type + migrateTrainName(limitedArray[1]);
+      case trainData.length == 0:
+        // 特急以外の場合は、列車番号を取得
+        return type;
+      default:
+        // 行先がある場合は、行先を取得
+        return (
+          type +
+          migrateTrainName(
+            trainData[trainData.length - 1].split(",")[0] + "行き"
+          )
+        );
+    }
+  }, [data.limited, trainData]);
+  return (
+    <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
+      <TrainIconStatus {...{ data, navigate, from }}/>
+      <Text style={textConfig}>{trainName}</Text>
+      <View style={{ flex: 1 }} />
+      <Text style={textConfig}>
+        {showHeadStation.map((d) => `${headStation[d].id} + `)}
+        {data.trainNum}
+        {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
+      </Text>
+
+      <TrainViewIcon {...{ data, navigate, from }} />
+    </View>
+  );
+};
--- a/components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx
+++ b/components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx
@ -1,27 +1,27 @@
 import React, { ComponentProps, FC, useEffect, useState } from "react";
-import { View, Image } from "react-native";
+import { View, Image, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import dayjs from "dayjs";
 import { useInterval } from "../../../lib/useInterval";
 import { Icon } from "@expo/vector-icons/build/createIconSet";

 type GlyphNames = ComponentProps<typeof Ionicons>["name"];
+
 type Props = {
-  trainData: {
-    trainNum: string;
-    limited: string;
-  };
+  data: { trainNum: string; limited: string };
+  navigate: any;
+  from: string;
 };
 type apt = {
  name: GlyphNames;
  color: string;
 };
-export const TrainIconStatus: FC<Props> = ({ trainData }) => {
+export const TrainIconStatus: FC<Props> = ({ data,navigate,from }) => {
  const [trainIcon, setTrainIcon] = useState(null);
  const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
  useEffect(() => {
-    if (!trainData.trainNum) return;
-    switch (trainData.trainNum) {
+    if (!data.trainNum) return;
+    switch (data.trainNum) {
      case "32D":
      case "36D":
      case "44D":
@ -34,12 +34,12 @@ export const TrainIconStatus: FC<Props> = ({ trainData }) => {
      case "57D":
        setTrainIcon(
          "https://n8n.haruk.in/webhook/dosan-anpanman-pictures.png?trainNum=" +
-            trainData.trainNum
+          data.trainNum
        );
        fetch(
          `https://n8n.haruk.in/webhook/dosan-anpanman?month=${dayjs().format(
            "M"
-          )}&day=${dayjs().format("D")}&trainNum=${trainData.trainNum}`
+          )}&day=${dayjs().format("D")}&trainNum=${data.trainNum}`
        )
          .then((d) => d.json())
          .then((d) => {
@ -53,7 +53,7 @@ export const TrainIconStatus: FC<Props> = ({ trainData }) => {
          });
        break;
    }
-  }, [trainData.trainNum]);
+  }, [data.trainNum]);
  const [move, setMove] = useState(true);
  useInterval(
    () => {
@ -66,7 +66,7 @@ export const TrainIconStatus: FC<Props> = ({ trainData }) => {
  return (
    <>
      {trainIcon && (
-        <View style={{}}>
+        <View style={{}} >
          {move ? (
            <Image
              source={{ uri: trainIcon }}
--- a/components/ActionSheetComponents/EachTrainInfoCore/trainViewIcon.tsx
+++ b/components/ActionSheetComponents/EachTrainInfoCore/trainViewIcon.tsx
@ -0,0 +1,41 @@
+import React, { FC, useEffect, useState } from "react";
+import { Ionicons } from "@expo/vector-icons";
+import { LayoutAnimation } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
+import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";
+
+type Props = {
+  data: { trainNum: string; limited: string };
+  navigate: any;
+  from: string;
+};
+export const TrainViewIcon: FC<Props> = ({ data, navigate, from }) => {
+  const [isTrainView, setIsTrainView] = useState(false);
+  //トレインビュー表示対象(特急、マリン)かを判定
+  useEffect(() => {
+    if (!data.limited) return;
+    setIsTrainView(
+      getType(data.limited.split(":")[0]) &&
+        !data.limited.split(":")[1].match("サンポート")
+    );
+  }, [data.limited]);
+  const onPressTrainView = () => {
+    LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
+    navigate("trainbase", {
+      info: "train.html?tn=" + data.trainNum,
+      from,
+    });
+    SheetManager.hide("EachTrainInfo");
+  };
+  return isTrainView ? (
+    <Ionicons
+      name="subway"
+      color="white"
+      size={30}
+      style={{ margin: 5 }}
+      onPress={onPressTrainView}
+    />
+  ) : (
+    <></>
+  );
+};