jrshikoku/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

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";
import { useFonts } from "expo-font";

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: 18,
  fontWeight: "bold",
  color: "white",
};

export const HeaderText: FC<Props> = ({
  data,
  trainData,
  showHeadStation,
  showTailStation,
  headStation,
  tailStation,
  navigate,
  from,
}) => {
  const [loaded, error] = useFonts({
    "JR-Nishi": require("../../../assets/fonts/西日本方向幕ロゴ.otf"),
    "Zou": require("../../../assets/fonts/DelaGothicOne-Regular.ttf"),
  });
  const [typeName, 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 }} />
      <View
        style={{
          //backgroundColor: "rgb(69, 69, 69)",
          borderRadius: 5,
          //borderWidth: 1,
          flexDirection: "row",
          alignItems: "center",
        }}
      >
        {loaded ? (
          <>
            <Text
              style={{
                fontSize: 20,
                fontFamily: "JR-Nishi",
                textShadowColor: "white",
                textShadowOffset: { width: 0, height: 0 },
                textShadowRadius: 0,
                //margin: 2,
                marginRight: 5,
                //backgroundColor: "rgb(69, 69, 69)",
                color: "white",
              }}
            >
              {(() => {
                if (typeName) return typeName;
                switch (true) {
                  case !!data.trainNum.match("T"):
                  case !!data.trainNum.match("R"):
                  case !!data.trainNum.match("E"):
                  case !!data.trainNum.match("L"):
                  case !!data.trainNum.match("A"):
                  case !!data.trainNum.match("B"):
                    return "回送";
                  case !!data.trainNum.match("D"):
                  case !!data.trainNum.match("M"):
                    return "普通";
                  default:
                    return "";
                }
              })()}
            </Text>
            {new RegExp(/^4[1-9]\d\d[DM]$/).test(data.trainNum) || new RegExp(/^5[1-7]\d\d[DM]$/).test(data.trainNum) || data.trainNum ==="3621D" ?
            
            <View style={{ flexDirection: "column", marginRight: 7 }}>
              <Text
                style={{
                  fontSize: 12,
                  textShadowColor: "white",
                  textShadowOffset: { width: 0, height: 0 },
                  textShadowRadius: 0,
                  margin: -2,
                  marginRight: 5,
                  color: "white",
                  fontFamily: "Zou",
                }}
              >
                ワン
              </Text>
              <Text
                style={{
                  fontSize: 12,
                  textShadowColor: "white",
                  textShadowOffset: { width: 0, height: 0 },
                  textShadowRadius: 0,
                  margin: -2,
                  color: "white",
                  fontFamily: "Zou",
                }}
              >
                {"　"}マン
              </Text>
            </View>
           : null} 
          </>
        ) : (
          <Text style={textConfig}>{typeName}</Text>
        )}
        <Text
          style={{
            fontSize: 18,
            textShadowColor: "white",
            textShadowOffset: { width: 0, height: 0 },
            textShadowRadius: 0,
            //borderWidth: 1,
            //borderColor: "white",
            fontWeight: "bold",
            //fontStyle: "italic",
            // color: (() => {
            //   switch (typeName) {
            //     case "快速":
            //       return "rgb(7, 124, 192)";
            //     case "特急":
            //       return "rgb(211, 13, 6)";
            //     default:
            //       return "white";
            //   }
            // })(),
            color: "white",
          }}
        >
          {trainName}
        </Text>
      </View>

      <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>
  );
};