diff --git a/components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx b/components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx new file mode 100644 index 0000000..187d0ff --- /dev/null +++ b/components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx @@ -0,0 +1,97 @@ +import { trainPosition } from "@/lib/trainPositionTextArray"; +import React, { CSSProperties, FC } from "react"; +import { View, Text, StyleProp, TextStyle, ViewStyle } from "react-native"; + +type stateBox = { + currentTrainData: any; + platformNumber: any; + title: string; + style?: ViewStyle; + mode?: number; + endText?: string; + lineNumber: string; +}; +export const PositionBox: FC = (props) => { + const { + currentTrainData, + platformNumber, + title, + style, + mode, + endText, + lineNumber, + } = props; + const trainPositionText = (trainData) => { + const { isBetween, Pos: PosData } = trainPosition(trainData); + if (isBetween === true) { + const { from, to } = PosData; + return `${from}~${to}`; + } else { + const { Pos } = PosData; + if (Pos == "") return ""; + if (platformNumber) return `${Pos} ${platformNumber}番乗り場`; + if (lineNumber) return `${Pos} ${lineNumber}番線`; + } + }; + const text = trainPositionText(currentTrainData); + return ( + + {title} + + + {text?.match("~") ? ( + <> + + {text.split("~")[0]} + + + {mode == 2 ? "→" : "↓"} + + + {text.split("~")[1]} + + + ) : ( + {text} + )} + + {endText && ( + + + {endText} + + + )} + + ); +}; +const boxStyle: ViewStyle = { + flex: 1, + backgroundColor: "white", + borderRadius: 10, + padding: 10, + margin: 10, +}; +const boxStyle2: ViewStyle = { + flex: 1, + backgroundColor: "white", + borderRadius: 10, + padding: 5, + margin: 5, +}; +const boxTextStyle2: TextStyle = { + fontSize: 18, + color: "#0099CC", + textAlign: "right", +}; + +const boxTextStyle: TextStyle = { + fontSize: 25, + color: "#0099CC", + textAlign: "right", +}; diff --git a/components/ActionSheetComponents/EachTrainInfo/StateBox.tsx b/components/ActionSheetComponents/EachTrainInfo/StateBox.tsx index fa5f65c..c124e32 100644 --- a/components/ActionSheetComponents/EachTrainInfo/StateBox.tsx +++ b/components/ActionSheetComponents/EachTrainInfo/StateBox.tsx @@ -15,21 +15,7 @@ export const StateBox: FC = (props) => { {title} - {text?.match("~") ? ( - <> - - {text.split("~")[0]} - - - {mode == 2 ? "→" : "↓"} - - - {text.split("~")[1]} - - - ) : ( - {text} - )} + {text} {endText && ( diff --git a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js index 8119a15..4e89aec 100644 --- a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js +++ b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from "react"; import { View, TouchableOpacity, useWindowDimensions } from "react-native"; import { StateBox } from "./StateBox"; +import { PositionBox } from "./PositionBox"; import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange"; import { getStationList2 } from "../../../lib/getStationList"; import { useCurrentTrain } from "../../../stateBox/useCurrentTrain"; @@ -53,14 +54,6 @@ export const TrainDataView = ({ getStationList2().then(setMapsStationData); }, []); const onLine = !!currentPosition?.toString().length; - const trainPositionText = (trainData) => { - const { isBetween, Pos: PosData } = trainPosition(trainData); - const { from, to, Pos } = PosData; - if (isBetween === true) return `${from}~${to}`; - if (Pos == "") return ""; - if (platformNumber) return `${Pos} ${platformNumber}番乗り場`; - if (lineNumber) return `${Pos} ${lineNumber}番線`; - }; const [dialog, setDialog] = useState(false); const [deleteDialog, setDeleteDialog] = useState(false); const [posInput, setPosInput] = useState(""); @@ -148,10 +141,12 @@ export const TrainDataView = ({ SheetManager.hide("EachTrainInfo"); }} > -