121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
import React, { FC } from "react";
|
|
import { Text, TouchableOpacity, View } from "react-native";
|
|
import lineColorList from "@/assets/originData/lineColorList";
|
|
|
|
type Props = {
|
|
item: any[]; // StationProps[] （路線をまたぐ同名駅の配列）
|
|
width: number;
|
|
height: number;
|
|
onPress?: () => void;
|
|
};
|
|
|
|
/**
|
|
* グリッド表示専用の軽量駅カード。
|
|
* Sign コンポーネントを使わず、駅番号・駅名をシンプルに描画するだけで
|
|
* hooks・Lottie・前後駅計算などを一切持たない純粋な表示コンポーネント。
|
|
*/
|
|
export const GridMiniSign: FC<Props> = React.memo(({ item, width, height, onPress }) => {
|
|
const station = item[0];
|
|
const lineId = station.StationNumber?.slice(0, 1) ?? "Y";
|
|
const lineNum = station.StationNumber?.slice(1) ?? "";
|
|
const lineColor = lineColorList[lineId] ?? "#0099CC";
|
|
const nameLen = station.Station_JP?.length ?? 0;
|
|
const nameFontSize = nameLen <= 3 ? 22 : nameLen <= 5 ? 16 : 12;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
activeOpacity={0.85}
|
|
style={{
|
|
width,
|
|
height,
|
|
borderColor: "#0099CC",
|
|
borderWidth: 1,
|
|
backgroundColor: "white",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{/* 駅番号バッジ */}
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
top: "8%",
|
|
right: "8%",
|
|
width: height * 0.28,
|
|
height: height * 0.28,
|
|
borderRadius: height * 0.14,
|
|
borderColor: lineColor,
|
|
borderWidth: 2,
|
|
backgroundColor: "white",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: height * 0.1,
|
|
fontWeight: "bold",
|
|
color: "black",
|
|
textAlign: "center",
|
|
lineHeight: height * 0.12,
|
|
}}
|
|
numberOfLines={2}
|
|
adjustsFontSizeToFit
|
|
>
|
|
{lineId + "\n" + lineNum}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* 駅名（日本語・英語） */}
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
top: "10%",
|
|
left: 0,
|
|
right: 0,
|
|
bottom: "28%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: nameFontSize,
|
|
fontWeight: "bold",
|
|
color: "#005170",
|
|
textAlign: "center",
|
|
}}
|
|
adjustsFontSizeToFit
|
|
numberOfLines={1}
|
|
>
|
|
{station.Station_JP}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 8,
|
|
color: "#005170",
|
|
textAlign: "center",
|
|
marginTop: 2,
|
|
}}
|
|
numberOfLines={1}
|
|
adjustsFontSizeToFit
|
|
>
|
|
{station.Station_EN}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* 下帯 */}
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: "26%",
|
|
backgroundColor: "#0099CC",
|
|
}}
|
|
/>
|
|
</TouchableOpacity>
|
|
);
|
|
});
|