121 lines
3.2 KiB
TypeScript
121 lines
3.2 KiB
TypeScript
import React, { CSSProperties, FC } from "react";
|
|
import {
|
|
Platform,
|
|
Text,
|
|
TextStyle,
|
|
useWindowDimensions,
|
|
View,
|
|
ViewStyle,
|
|
} from "react-native";
|
|
import { StationName } from "./StationName";
|
|
import lineColorList from "../../assets/originData/lineColorList";
|
|
export const NextPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
|
|
const 下枠フレーム: ViewStyle = {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
};
|
|
|
|
return (
|
|
<View style={下枠フレーム}>
|
|
<View style={下枠フレーム}>
|
|
{!!preStation && (
|
|
<>
|
|
<BottomSideArrow isMatsuyama={isMatsuyama} children={"◀"} />
|
|
{!!preStation.StationNumber && (
|
|
<BottomStationNumberView
|
|
isMatsuyama={isMatsuyama}
|
|
children={preStation.StationNumber}
|
|
/>
|
|
)}
|
|
<StationName
|
|
stringData={preStation}
|
|
ss={{ flex: 1, alignItems: "flex-start" }}
|
|
/>
|
|
</>
|
|
)}
|
|
</View>
|
|
<View style={下枠フレーム}>
|
|
{!!nexStation && (
|
|
<>
|
|
<StationName
|
|
stringData={nexStation}
|
|
ss={{ flex: 1, alignItems: "flex-end" }}
|
|
/>
|
|
{!!nexStation.StationNumber && (
|
|
<BottomStationNumberView
|
|
isMatsuyama={isMatsuyama}
|
|
children={nexStation.StationNumber}
|
|
/>
|
|
)}
|
|
<BottomSideArrow isMatsuyama={isMatsuyama} children={"▶"} />
|
|
</>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
type FCimport = {
|
|
isMatsuyama: boolean;
|
|
children: string;
|
|
};
|
|
const BottomSideArrow: FC<FCimport> = ({ isMatsuyama, children }) => {
|
|
const 下枠左右マーク: TextStyle = {
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("20%"),
|
|
color: "white",
|
|
paddingHorizontal: 5,
|
|
textAlignVertical: "center",
|
|
};
|
|
return !isMatsuyama && <Text style={下枠左右マーク}>{children}</Text>;
|
|
};
|
|
|
|
const BottomStationNumberView: FC<FCimport> = ({ isMatsuyama, children }) => {
|
|
const { width } = useWindowDimensions();
|
|
const lineID = children.slice(0, 1);
|
|
const lineName = children.slice(1);
|
|
const 下枠駅ナンバー: ViewStyle = {
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
width: width * 0.08,
|
|
height: width * 0.08,
|
|
margin: width * 0.01,
|
|
backgroundColor: "white",
|
|
borderWidth: parseInt("3%"),
|
|
borderRadius: parseInt("100%"),
|
|
};
|
|
const 下枠駅ナンバーB: ViewStyle = {
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
width: width * 0.07,
|
|
height: width * 0.07,
|
|
margin: width * 0.02,
|
|
backgroundColor: "white",
|
|
borderWidth: parseInt("3%"),
|
|
borderRadius: parseInt("100%"),
|
|
};
|
|
return (
|
|
<View
|
|
style={{
|
|
...(isMatsuyama ? 下枠駅ナンバーB : 下枠駅ナンバー),
|
|
borderColor: lineColorList[lineID],
|
|
}}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text
|
|
style={{
|
|
fontSize: parseInt(Platform.OS === "ios" ? "8%" : "10%"),
|
|
color: "black",
|
|
textAlign: "center",
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
{lineID + "\n" + lineName}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</View>
|
|
);
|
|
};
|