コードの整理
This commit is contained in:
parent
f60161b664
commit
139ce0ed7b
@ -6,30 +6,46 @@ type stateBox = {
|
|||||||
title: string;
|
title: string;
|
||||||
style?: ViewStyle;
|
style?: ViewStyle;
|
||||||
mode?: number;
|
mode?: number;
|
||||||
|
endText?: string;
|
||||||
};
|
};
|
||||||
export const StateBox: FC<stateBox> = ({ text, title, style, mode }) => (
|
export const StateBox: FC<stateBox> = (props) => {
|
||||||
<View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
|
const { text, title, style, mode, endText } = props;
|
||||||
<Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
|
return (
|
||||||
<View style={{ flex: 1 }} />
|
<View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
|
||||||
<View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
|
<Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
|
||||||
{text?.match("~") ? (
|
<View style={{ flex: 1 }} />
|
||||||
<>
|
<View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
|
||||||
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
|
{text?.match("~") ? (
|
||||||
{text.split("~")[0]}
|
<>
|
||||||
|
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
|
||||||
|
{text.split("~")[0]}
|
||||||
|
</Text>
|
||||||
|
<Text style={{ color: "#0099CC", textAlign: "right" }}>
|
||||||
|
{mode == 2 ? "→" : "↓"}
|
||||||
|
</Text>
|
||||||
|
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
|
||||||
|
{text.split("~")[1]}
|
||||||
|
</Text>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
{endText && (
|
||||||
|
<View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
|
||||||
|
fontSize: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{endText}
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={{ color: "#0099CC", textAlign: "right" }}>
|
</View>
|
||||||
{mode == 2 ? "→" : "↓"}
|
|
||||||
</Text>
|
|
||||||
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
|
|
||||||
{text.split("~")[1]}
|
|
||||||
</Text>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
|
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
);
|
||||||
);
|
};
|
||||||
const boxStyle: ViewStyle = {
|
const boxStyle: ViewStyle = {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
|
@ -19,7 +19,7 @@ export const TrainDataView = ({
|
|||||||
const { isLandscape } = useDeviceOrientationChange();
|
const { isLandscape } = useDeviceOrientationChange();
|
||||||
const { inject } = useCurrentTrain();
|
const { inject } = useCurrentTrain();
|
||||||
const [mapsStationData, setMapsStationData] = useState(undefined);
|
const [mapsStationData, setMapsStationData] = useState(undefined);
|
||||||
|
|
||||||
const [platformNumber, setPlatformNumber] = useState();
|
const [platformNumber, setPlatformNumber] = useState();
|
||||||
const [platformDescription, setPlatformDescription] = useState();
|
const [platformDescription, setPlatformDescription] = useState();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -41,9 +41,11 @@ export const TrainDataView = ({
|
|||||||
}, []);
|
}, []);
|
||||||
const onLine = !!currentPosition?.toString().length;
|
const onLine = !!currentPosition?.toString().length;
|
||||||
const trainPositionText = (trainData) => {
|
const trainPositionText = (trainData) => {
|
||||||
const { isBetween, Pos } = trainPosition(trainData);
|
const { isBetween, Pos: PosData } = trainPosition(trainData);
|
||||||
if (isBetween === true) return `${Pos.from}~${Pos.to}`;
|
const { from, to, Pos } = PosData;
|
||||||
else return Pos.Pos == "" ? "" : `${Pos.Pos}${platformNumber ? ` ${platformNumber}番線`:""}${platformDescription ? `\n${platformNumber}番線`:""}`;
|
if (isBetween === true) return `${from}~${to}`;
|
||||||
|
if (Pos == "") return "";
|
||||||
|
return `${Pos}${platformNumber ? ` ${platformNumber}番線` : ""}`;
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
@ -84,6 +86,7 @@ export const TrainDataView = ({
|
|||||||
mode={mode}
|
mode={mode}
|
||||||
title={`現在地 ${currentPosition?.toString()}${onLine ? "▶️" : ""}`}
|
title={`現在地 ${currentPosition?.toString()}${onLine ? "▶️" : ""}`}
|
||||||
text={trainPositionText(currentTrainData)}
|
text={trainPositionText(currentTrainData)}
|
||||||
|
endText={platformDescription ? `${platformDescription}` : ""}
|
||||||
style={
|
style={
|
||||||
onLine
|
onLine
|
||||||
? { borderWidth: 1, borderColor: "red", borderStyle: "solid" }
|
? { borderWidth: 1, borderColor: "red", borderStyle: "solid" }
|
||||||
|
Loading…
Reference in New Issue
Block a user