77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
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: 18,
|
|
fontWeight: "bold",
|
|
color: "white",
|
|
};
|
|
|
|
export const HeaderText: FC<Props> = ({
|
|
data,
|
|
trainData,
|
|
showHeadStation,
|
|
showTailStation,
|
|
headStation,
|
|
tailStation,
|
|
navigate,
|
|
from,
|
|
}) => {
|
|
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 }} />
|
|
<Text style={textConfig}>
|
|
{typeName}{" "}
|
|
{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>
|
|
);
|
|
};
|