73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import React, { FC } from "react";
|
|
import { Text, View } from "react-native";
|
|
import { useWindowDimensions } from "react-native";
|
|
import lineColorList from "../../assets/originData/lineColorList";
|
|
import { StationProps } from "@/stateBox/useStationList";
|
|
|
|
type props = {
|
|
currentStation: StationProps[];
|
|
useEach?: boolean;
|
|
singleSize?: number;
|
|
};
|
|
export const StationNumberMaker: FC<props> = (props) => {
|
|
const { currentStation, useEach = false, singleSize } = props;
|
|
const { width } = useWindowDimensions();
|
|
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={{
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
borderColor: lineColorList[lineID],
|
|
backgroundColor: "white",
|
|
...(useEach ? {
|
|
width: singleSize,
|
|
height: singleSize,
|
|
borderWidth: parseInt("1%"),
|
|
borderRadius: parseInt("100%"),
|
|
} : {
|
|
width: (width / 100) * 10,
|
|
height: (width / 100) * 10,
|
|
borderWidth: parseInt("3%"),
|
|
borderRadius: parseInt("100%"),
|
|
position: "absolute",
|
|
top: `${getTop(array, index)}%`,
|
|
right: "10%"
|
|
})
|
|
}}
|
|
key={array[index].StationNumber}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text
|
|
style={{
|
|
margin: 0,
|
|
padding: 0,
|
|
textAlign: "center",
|
|
color: "black",
|
|
fontWeight: "bold",
|
|
...(useEach ? {
|
|
|
|
fontSize: 6,//singleSize * 0.03,
|
|
}:{
|
|
fontSize: parseInt("13%"),
|
|
})
|
|
}}
|
|
>
|
|
{lineID + "\n" + lineName}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</View>
|
|
);
|
|
})}</>
|
|
};
|