diff --git a/components/ActionSheetComponents/EachTrainInfo.js b/components/ActionSheetComponents/EachTrainInfo.js index d3f5368..9fdceaf 100644 --- a/components/ActionSheetComponents/EachTrainInfo.js +++ b/components/ActionSheetComponents/EachTrainInfo.js @@ -52,16 +52,6 @@ export const EachTrainInfo = (props) => { const [isConcatNear, setIsConcatNear] = useState(false); const [tailStation, setTailStation] = useState(); const [headStation, setHeadStation] = useState(); - const { height, width } = useWindowDimensions(); - const [isLandscape, setIsLandscape] = useState(false); - useEffect(() => { - if (height / width > 1.5) { - setIsLandscape(false); - } - if (height / width < 1.5) { - setIsLandscape(true); - } - }, [width, height]); // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false); //裏列車探索 @@ -85,102 +75,6 @@ export const EachTrainInfo = (props) => { }); }, [trainData, showNearTrain]); - const openBackTrainInfo = (stationInfo, currentTrainIndex) => { - const migrationArray = (stationInfo) => { - const mainTrainStationPosition = trainData.findIndex( - (d) => d.split(",")[0] == stationInfo - ); - - const relationMain = (() => { - if (mainTrainStationPosition == 0) return "head"; - if (mainTrainStationPosition == trainData.length - 1) return "tail"; - return "middle"; - })(); - - const subTrainStationPosition = showNearTrain.findIndex( - (d) => d.split(",")[0] == stationInfo - ); - const relationSub = (() => { - if (subTrainStationPosition == 0) return "head"; - if (subTrainStationPosition == showNearTrain.length - 1) return "tail"; - return "middle"; - })(); - - switch (relationMain) { - case "head": - if (relationSub == "head") { - return; - } else if (relationSub == "tail") { - return [ - ...showNearTrain.slice(0, subTrainStationPosition), - ...trainData, - ]; - } else if (relationSub == "middle") { - return [ - ...showNearTrain.slice(0, subTrainStationPosition), - ...trainData, - ]; - } else return; - case "tail": - if (relationSub == "head") { - return [ - ...trainData.slice(0, mainTrainStationPosition), - ...showNearTrain, - ]; - } else if (relationSub == "tail") { - return; - } else if (relationSub == "middle") { - return [ - ...trainData.slice(0, mainTrainStationPosition), - ...showNearTrain.slice(subTrainStationPosition), - ]; - } else return; - case "middle": - if (relationSub == "head") { - return [ - ...trainData.slice(0, mainTrainStationPosition), - ...showNearTrain, - ]; - } else if (relationSub == "tail") { - return [ - ...showNearTrain.slice(0, subTrainStationPosition), - ...trainData.slice(mainTrainStationPosition), - ]; - } else return; - } - }; - const array = migrationArray(stationInfo); - if (!array) return; - setTrainData(array); - setIsConcatNear(true); - }; - - const openTrainInfo = (d) => { - const train = customTrainDataDetector(d); - let TrainNumber = ""; - if (train.trainNumDistance != undefined) { - const timeInfo = - parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance; - TrainNumber = timeInfo + "号"; - } - const payload = { - data: { - trainNum: d, - limited: `${getTrainType(train.type).data}:${ - train.trainName - }${TrainNumber}`, - }, - navigate, - originalStationList, - from: "AllTrainDiagramView", - }; - SheetManager.hide("EachTrainInfo").then(() => { - //0.1秒待機してから開く - setTimeout(() => { - SheetManager.show("EachTrainInfo", { payload }); - }, 1); - }); - }; useEffect(() => { setCurrentTrainData( checkDuplicateTrainData( @@ -189,17 +83,6 @@ export const EachTrainInfo = (props) => { ); }, [currentTrain]); - useEffect(() => { - //列車現在地アイコン表示スイッチ - AS.getItem("trainPositionSwitch") - .then((d) => { - if (d) { - setTrainPositionSwitch(d); - } else { - } - }) - .catch((d) => AS.setItem("trainPositionSwitch", "false")); - }, []); //bconst insets = useSafeAreaInsets(); const getStationData = (stationName) => { const Stations = stationList.map((a) => @@ -213,18 +96,6 @@ export const EachTrainInfo = (props) => { if (!Station[0]) return []; return Station.map((d) => d.StationNumber)[0]; }; - useEffect(() => { - //currentTrainData.Pos = "鴨川～端岡"; //test - if (!currentTrainData?.Pos) return; - if (currentTrainData?.Pos.match("～")) { - const pos = currentTrainData?.Pos.replace("（下り）", "") - .replace("（上り）", "") - .split("～"); - setCurrentPosition([getStationData(pos[0]), getStationData(pos[1])]); - } else { - setCurrentPosition([getStationData(currentTrainData?.Pos)]); - } - }, [currentTrainData]); const stationList = originalStationList && @@ -361,37 +232,8 @@ export const EachTrainInfo = (props) => { console.log(e); } } - // 使用例 - const points = - trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : []; - useEffect(() => { - if (!data.trainNum) return; - const TD = trainList[data.trainNum]; - if (!TD) { - setTrainData([]); - return; - } - setTrainData(TD.split("#").filter((d) => d != "")); - }, [data]); - const getType = (string) => { - switch (string) { - case "express": - return "特急"; - case "rapid": - return "快速"; - default: - return ""; - } - }; - - const migrateTrainName = (string) => { - return string - .replace("マリン", "マリンライナー") - .replace("ライナーライナー", "ライナー"); - }; const actionSheetRef = useRef(null); - const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef); return ( { //useBottomSafeAreaPadding={Platform.OS == "android"} > - - - - - - - {data.limited - ? getType(data.limited.split(":")[0]) + - migrateTrainName( - data.limited.split(":")[1] || - (trainData.length > 0 - ? trainData[trainData.length - 1].split(",")[0] + "行き" - : " ") - ) - : ""} - - - - {data.trainNum} - {isConcatNear ? ` + ${nearTrainIDList}` : ""} - - - {data.limited != undefined && - getType(data.limited.split(":")[0]) && - !data.limited.split(":")[1].match("サンポート") && ( - { - LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true); - navigate("trainbase", { - info: "train.html?tn=" + data.trainNum, - from, - }); - SheetManager.hide("EachTrainInfo"); - }} - /> - )} - - {isLandscape ? ( - - ) : ( - - ) - } - topStickyContent={ - - } - > - {headStation && !isConcatNear && ( - openBackTrainInfo(headStation)} - style={{ - padding: 10, - flexDirection: "row", - borderColor: "blue", - borderWidth: 1, - margin: 10, - borderRadius: 5, - alignItems: "center", - }} - > - - 「本当の始発駅」を表示 - - - )} - {/* - ほげほげふがふが */} - - {trainData.map((i, index) => - i.split(",")[1] == "提" ? ( - - ) : ( - - ) - )} - {tailStation && !isConcatNear && ( - openBackTrainInfo(tailStation)} - style={{ - padding: 10, - flexDirection: "row", - borderColor: "blue", - borderWidth: 1, - margin: 10, - borderRadius: 5, - alignItems: "center", - }} - > - - 「本当の終着駅」を表示 - - - )} - - - - - - - - - ) : ( - - ) : ( - - ) - } - longHeader={ - from == "AllTrainDiagramView" ? ( - <> - ) : ( - - ) - } - topStickyContent={ - - } - > - {headStation && !isConcatNear && ( - openBackTrainInfo(headStation)} - style={{ - padding: 10, - flexDirection: "row", - borderColor: "blue", - borderWidth: 1, - margin: 10, - borderRadius: 5, - alignItems: "center", - }} - > - - 「本当の始発駅」を表示 - - - )} - {/* - ほげほげふがふが */} - - {trainData.map((i, index) => - i.split(",")[1] == "提" ? ( - - ) : ( - - ) - )} - {tailStation && !isConcatNear && ( - openBackTrainInfo(tailStation)} - style={{ - padding: 10, - flexDirection: "row", - borderColor: "blue", - borderWidth: 1, - margin: 10, - borderRadius: 5, - alignItems: "center", - }} - > - - 「本当の終着駅」を表示 - - - )} - - - - - - - - - )} - + /> ); }; @@ -700,3 +297,464 @@ const styles = StyleSheet.create({ textAlign: "center", }, }); +const Hoge = ({ + actionSheetRef, + data, + trainData, + isConcatNear, + nearTrainIDList, + navigate, + from, + currentTrainData, + currentPosition, + headStation, + tailStation, + stationList, + openStationACFromEachTrainInfo, + trainPositionSwitch, + findReversalPoints, + setTrainData, + trainList, + showNearTrain, + setIsConcatNear, + customTrainDataDetector, + getTrainType, + originalStationList, + SheetManager, + AS, + setTrainPositionSwitch, + getStationData, + setCurrentPosition, +}) => { + const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef); + const migrateTrainName = (string) => { + return string + .replace("マリン", "マリンライナー") + .replace("ライナーライナー", "ライナー"); + }; + const getType = (string) => { + switch (string) { + case "express": + return "特急"; + case "rapid": + return "快速"; + default: + return ""; + } + }; + + // 使用例 + const points = + trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : []; + const { height, width } = useWindowDimensions(); + const [isLandscape, setIsLandscape] = useState(false); + useEffect(() => { + //currentTrainData.Pos = "鴨川～端岡"; //test + if (!currentTrainData?.Pos) return; + if (currentTrainData?.Pos.match("～")) { + const pos = currentTrainData?.Pos.replace("（下り）", "") + .replace("（上り）", "") + .split("～"); + setCurrentPosition([getStationData(pos[0]), getStationData(pos[1])]); + } else { + setCurrentPosition([getStationData(currentTrainData?.Pos)]); + } + }, [currentTrainData]); + useEffect(() => { + if (height / width > 1.5) { + setIsLandscape(false); + } + if (height / width < 1.5) { + setIsLandscape(true); + } + }, [width, height]); + useEffect(() => { + if (!data.trainNum) return; + const TD = trainList[data.trainNum]; + if (!TD) { + setTrainData([]); + return; + } + setTrainData(TD.split("#").filter((d) => d != "")); + }, [data]); + useEffect(() => { + //列車現在地アイコン表示スイッチ + AS.getItem("trainPositionSwitch") + .then((d) => { + if (d) { + setTrainPositionSwitch(d); + } else { + } + }) + .catch((d) => AS.setItem("trainPositionSwitch", "false")); + }, []); + + const openBackTrainInfo = (stationInfo, currentTrainIndex) => { + const migrationArray = (stationInfo) => { + const mainTrainStationPosition = trainData.findIndex( + (d) => d.split(",")[0] == stationInfo + ); + + const relationMain = (() => { + if (mainTrainStationPosition == 0) return "head"; + if (mainTrainStationPosition == trainData.length - 1) return "tail"; + return "middle"; + })(); + + const subTrainStationPosition = showNearTrain.findIndex( + (d) => d.split(",")[0] == stationInfo + ); + const relationSub = (() => { + if (subTrainStationPosition == 0) return "head"; + if (subTrainStationPosition == showNearTrain.length - 1) return "tail"; + return "middle"; + })(); + + switch (relationMain) { + case "head": + if (relationSub == "head") { + return; + } else if (relationSub == "tail") { + return [ + ...showNearTrain.slice(0, subTrainStationPosition), + ...trainData, + ]; + } else if (relationSub == "middle") { + return [ + ...showNearTrain.slice(0, subTrainStationPosition), + ...trainData, + ]; + } else return; + case "tail": + if (relationSub == "head") { + return [ + ...trainData.slice(0, mainTrainStationPosition), + ...showNearTrain, + ]; + } else if (relationSub == "tail") { + return; + } else if (relationSub == "middle") { + return [ + ...trainData.slice(0, mainTrainStationPosition), + ...showNearTrain.slice(subTrainStationPosition), + ]; + } else return; + case "middle": + if (relationSub == "head") { + return [ + ...trainData.slice(0, mainTrainStationPosition), + ...showNearTrain, + ]; + } else if (relationSub == "tail") { + return [ + ...showNearTrain.slice(0, subTrainStationPosition), + ...trainData.slice(mainTrainStationPosition), + ]; + } else return; + } + }; + const array = migrationArray(stationInfo); + if (!array) return; + setTrainData(array); + setIsConcatNear(true); + }; + + const openTrainInfo = (d) => { + const train = customTrainDataDetector(d); + let TrainNumber = ""; + if (train.trainNumDistance != undefined) { + const timeInfo = + parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance; + TrainNumber = timeInfo + "号"; + } + const payload = { + data: { + trainNum: d, + limited: `${getTrainType(train.type).data}:${ + train.trainName + }${TrainNumber}`, + }, + navigate, + originalStationList, + from: "AllTrainDiagramView", + }; + SheetManager.hide("EachTrainInfo").then(() => { + //0.1秒待機してから開く + setTimeout(() => { + SheetManager.show("EachTrainInfo", { payload }); + }, 1); + }); + }; + return ( + + + + + + + {data.limited + ? getType(data.limited.split(":")[0]) + + migrateTrainName( + data.limited.split(":")[1] || + (trainData.length > 0 + ? trainData[trainData.length - 1].split(",")[0] + "行き" + : " ") + ) + : ""} + + + + {data.trainNum} + {isConcatNear ? ` + ${nearTrainIDList}` : ""} + + + {data.limited != undefined && + getType(data.limited.split(":")[0]) && + !data.limited.split(":")[1].match("サンポート") && ( + { + LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true); + navigate("trainbase", { + info: "train.html?tn=" + data.trainNum, + from, + }); + SheetManager.hide("EachTrainInfo"); + }} + /> + )} + + {isLandscape ? ( + + ) : ( + + ) + } + topStickyContent={ + + } + > + {headStation && !isConcatNear && ( + openBackTrainInfo(headStation)} + style={{ + padding: 10, + flexDirection: "row", + borderColor: "blue", + borderWidth: 1, + margin: 10, + borderRadius: 5, + alignItems: "center", + }} + > + + 「本当の始発駅」を表示 + + + )} + {/* + ほげほげふがふが */} + + {trainData.map((i, index) => + i.split(",")[1] == "提" ? ( + + ) : ( + + ) + )} + {tailStation && !isConcatNear && ( + openBackTrainInfo(tailStation)} + style={{ + padding: 10, + flexDirection: "row", + borderColor: "blue", + borderWidth: 1, + margin: 10, + borderRadius: 5, + alignItems: "center", + }} + > + + 「本当の終着駅」を表示 + + + )} + + + + + + + + + ) : ( + + ) : ( + + ) + } + longHeader={ + from == "AllTrainDiagramView" ? ( + <> + ) : ( + + ) + } + topStickyContent={ + + } + > + {headStation && !isConcatNear && ( + openBackTrainInfo(headStation)} + style={{ + padding: 10, + flexDirection: "row", + borderColor: "blue", + borderWidth: 1, + margin: 10, + borderRadius: 5, + alignItems: "center", + }} + > + + 「本当の始発駅」を表示 + + + )} + {/* + ほげほげふがふが */} + + {trainData.map((i, index) => + i.split(",")[1] == "提" ? ( + + ) : ( + + ) + )} + {tailStation && !isConcatNear && ( + openBackTrainInfo(tailStation)} + style={{ + padding: 10, + flexDirection: "row", + borderColor: "blue", + borderWidth: 1, + margin: 10, + borderRadius: 5, + alignItems: "center", + }} + > + + 「本当の終着駅」を表示 + + + )} + + + + + + + + + )} + + ); +};