54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { Text, View } from "react-native";
|
|
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
|
|
import lineColorList from "../../assets/originData/lineColorList";
|
|
|
|
export const StationNumberMaker = (props) => {
|
|
const { currentStation, isMatsuyama } = props;
|
|
const getTop = (array: number[], index: number) => {
|
|
if (array.length == 1) return 20;
|
|
else if (index == 0) return 5;
|
|
else if (index == 1) return 35;
|
|
else return 20;
|
|
};
|
|
return currentStation
|
|
.filter((d) => (d.StationNumber ? true : false))
|
|
.map((d, index, array) => {
|
|
const lineID = d.StationNumber.slice(0, 1);
|
|
const lineName = d.StationNumber.slice(1);
|
|
return (
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
top: `${getTop(array, index)}%`,
|
|
right: "10%",
|
|
width: wp("10%"),
|
|
height: wp("10%"),
|
|
borderColor: lineColorList[lineID],
|
|
backgroundColor: "white",
|
|
borderWidth: parseInt("3%"),
|
|
borderRadius: parseInt("100%"),
|
|
}}
|
|
key={array[index].StationNumber}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text
|
|
style={{
|
|
fontSize: parseInt("13%"),
|
|
margin: 0,
|
|
padding: 0,
|
|
textAlign: "center",
|
|
color: "black",
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
{lineID + "\n" + lineName}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</View>
|
|
);
|
|
});
|
|
};
|