差分調整6

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -0,0 +1,71 @@
+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 { 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" }}>
+      <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>
+  );
+};

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}
+    />
+  ) : (
+    <></>
+  );
+};