105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import lineColorList from "@/assets/originData/lineColorList";
|
||
import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
|
||
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
|
||
import { useStationList, StationProps } from "@/stateBox/useStationList";
|
||
import { useEffect, useState } from "react";
|
||
import { Text, TouchableOpacity, View } from "react-native";
|
||
|
||
export const FixedStation = ({ stationID }) => {
|
||
const { fixedPosition, setFixedPosition } = useCurrentTrain();
|
||
const { getStationDataFromId } = useStationList();
|
||
const [station, setStation] = useState<StationProps[]>([]);
|
||
useEffect(() => {
|
||
const data = getStationDataFromId(stationID);
|
||
setStation(data);
|
||
}, [stationID]);
|
||
const lineColor =
|
||
station.length > 0
|
||
? lineColorList[station[0]?.StationNumber.slice(0, 1)]
|
||
: "white";
|
||
return (
|
||
<TouchableOpacity
|
||
style={{ flex: 1, flexDirection: "row" }}
|
||
onPress={() => {
|
||
setFixedPosition({ type: null, value: null });
|
||
}}
|
||
>
|
||
<View
|
||
style={{
|
||
flex: 3,
|
||
flexDirection: "column",
|
||
alignContent: "center",
|
||
alignSelf: "center",
|
||
alignItems: "center",
|
||
height: "100%",
|
||
backgroundColor: "white",
|
||
}}
|
||
>
|
||
<View
|
||
style={{
|
||
backgroundColor: lineColor,
|
||
flexDirection: "row",
|
||
width: "100%",
|
||
|
||
}}
|
||
>
|
||
<StationNumberMaker
|
||
currentStation={station}
|
||
singleSize={20}
|
||
useEach={true}
|
||
/>
|
||
<Text
|
||
style={{
|
||
fontSize: 20,
|
||
textAlignVertical: "center",
|
||
margin: 0,
|
||
padding: 0,
|
||
flex:1
|
||
}}
|
||
>
|
||
{station[0]?.Station_JP}
|
||
</Text>
|
||
<View
|
||
style={{
|
||
backgroundColor: "white",
|
||
width: 10,
|
||
borderLeftColor: lineColor,
|
||
borderBottomColor: "white",
|
||
borderBottomWidth: 24,
|
||
borderLeftWidth: 10,
|
||
borderRightWidth: 0,
|
||
borderTopWidth: 0,
|
||
height: "100%",
|
||
}}
|
||
/>
|
||
</View>
|
||
<View
|
||
style={{
|
||
height: "100%",
|
||
backgroundColor: "white",
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 20 }}>駅情報固定中</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View
|
||
style={{
|
||
flex: 5,
|
||
flexDirection: "column",
|
||
backgroundColor: lineColor,
|
||
}}
|
||
>
|
||
|
||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||
<Text style={{ fontSize: 20 }}>次：15:00 快速マリン 岡山</Text>
|
||
</View>
|
||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||
<Text style={{ fontSize: 20 }}>次：15:00 快速マリン 岡山</Text>
|
||
</View>
|
||
</View>
|
||
</TouchableOpacity>
|
||
);
|
||
};
|