diff --git a/StatusbarDetect.js b/StatusbarDetect.tsx similarity index 65% rename from StatusbarDetect.js rename to StatusbarDetect.tsx index 930d558..d8b8439 100644 --- a/StatusbarDetect.js +++ b/StatusbarDetect.tsx @@ -1,10 +1,12 @@ -import React from "react"; +import React, { FC } from "react"; import { Platform, StatusBar, View } from "react-native"; -export default function StatusbarDetect() { +const StatusbarDetect: FC = () => { if (Platform.OS == "ios") { return ; } else if (Platform.OS == "android") { return ; } -} +}; + +export default StatusbarDetect; diff --git a/Top.js b/Top.js index acbd5d8..5449cbb 100644 --- a/Top.js +++ b/Top.js @@ -3,7 +3,6 @@ import { createStackNavigator, TransitionPresets, } from "@react-navigation/stack"; -import { getStationList2 } from "./lib/getStationList2"; import Apps from "./components/Apps"; import TrainBase from "./components/trainbaseview"; import HowTo from "./howto"; @@ -29,7 +28,6 @@ export const Top = ({ navigationRef }) => { return unsubscribe; }, [{ navigate, addListener }]); - const goToTrainMenu = () => { if (navigationRef.current?.getCurrentRoute().name == "Apps") { if (mapSwitch == "true") { diff --git a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js index 6b84549..98e0541 100644 --- a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js +++ b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js @@ -5,7 +5,6 @@ import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientati import { getStationList2 } from "../../../lib/getStationList2"; import { useCurrentTrain } from "../../../stateBox/useCurrentTrain"; import { SheetManager } from "react-native-actions-sheet"; -import { useNavigation } from "@react-navigation/native"; export const TrainDataView = ({ currentTrainData, diff --git a/components/ActionSheetComponents/EachTrainInfoCore.js b/components/ActionSheetComponents/EachTrainInfoCore.js index d6f9678..c145c36 100644 --- a/components/ActionSheetComponents/EachTrainInfoCore.js +++ b/components/ActionSheetComponents/EachTrainInfoCore.js @@ -33,6 +33,7 @@ import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainI import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain"; import { useTrainMenu } from "../../stateBox/useTrainMenu"; import { HeaderText } from "./EachTrainInfoCore/HeaderText"; +import { useStationList } from "../../stateBox/useStationList"; export const EachTrainInfoCore = ({ actionSheetRef, @@ -43,7 +44,8 @@ export const EachTrainInfoCore = ({ }) => { // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false); const { currentTrain } = useCurrentTrain(); - const { setTrainInfo, originalStationList } = useTrainMenu(); + const { originalStationList } = useStationList(); + const { setTrainInfo } = useTrainMenu(); const [currentTrainData, setCurrentTrainData] = useState(); // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false); diff --git a/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx b/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx index 9479047..45b0ab0 100644 --- a/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx +++ b/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx @@ -58,7 +58,7 @@ export const HeaderText: FC = ({ }, [data.limited, trainData]); return ( - + {trainName} diff --git a/components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx b/components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx index 1fcd4cf..141a10b 100644 --- a/components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx +++ b/components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx @@ -72,7 +72,7 @@ export const TrainIconStatus: FC = ({ data, navigate, from }) => { onPress={() => { navigate("howto", { info: "https://www.jr-eki.com/aptrain/index.html", - goTo: from, + goTo: from == "LED" ? "menu" : from, }); SheetManager.hide("EachTrainInfo"); }} diff --git a/components/ActionSheetComponents/sheets.js b/components/ActionSheetComponents/sheets.ts similarity index 100% rename from components/ActionSheetComponents/sheets.js rename to components/ActionSheetComponents/sheets.ts diff --git a/components/AllTrainDiagramView.js b/components/AllTrainDiagramView.js index 15585f4..07169b7 100644 --- a/components/AllTrainDiagramView.js +++ b/components/AllTrainDiagramView.js @@ -12,19 +12,13 @@ import { import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram"; import { customTrainDataDetector } from "./custom-train-data"; -import { getStationList } from "../lib/getStationList"; import { getTrainType } from "../lib/getTrainType"; import { SheetManager } from "react-native-actions-sheet"; import { useNavigation } from "@react-navigation/native"; -import { useTrainMenu } from "../stateBox/useTrainMenu"; +import { BigButton } from "./atom/BigButton"; export default function AllTrainDiagramView() { const { navigate } = useNavigation(); - const { allTrainDiagram } = useAllTrainDiagram(); - const [keyList, setKeyList] = useState(); // 第二要素 - useEffect( - () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)), - [] - ); + const { keyList } = useAllTrainDiagram(); const [input, setInput] = useState(""); // 文字入力 const [keyBoardVisible, setKeyBoardVisible] = useState(false); @@ -50,13 +44,10 @@ export default function AllTrainDiagramView() { parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance; TrainNumber = timeInfo + "号"; } + const type = getTrainType(train.type).data; + const limited = `${type}:${train.trainName}${TrainNumber}`; const payload = { - data: { - trainNum: d, - limited: `${getTrainType(train.type).data}:${ - train.trainName - }${TrainNumber}`, - }, + data: { trainNum: d, limited }, navigate, from: "AllTrainIDList", }; @@ -69,11 +60,9 @@ export default function AllTrainDiagramView() { d.includes(input))} - renderItem={({ item }) => ( - - )} + renderItem={({ item }) => } keyExtractor={(item) => item} - initialNumToRender={100} + //initialNumToRender={100} /> { - setKeyBoardVisible(true); - }} + onFocus={() => setKeyBoardVisible(true)} onEndEditing={() => {}} - onChange={(ret) => { - setInput(ret.nativeEvent.text); - }} + onChange={(ret) => setInput(ret.nativeEvent.text)} value={input} style={{ flex: 1 }} /> - - navigate("menu")} + string="閉じる" style={{ - padding: 10, - flexDirection: "row", - borderColor: "white", - borderWidth: 1, - margin: 10, - borderRadius: 5, - alignItems: "center", display: Platform.OS === "ios" ? "flex" : keyBoardVisible ? "none" : "flex", }} - onPress={() => navigate("menu")} - > - - - 閉じる - - - + /> ); } diff --git a/components/Apps.js b/components/Apps.js index 52af34a..2052ba7 100644 --- a/components/Apps.js +++ b/components/Apps.js @@ -22,6 +22,7 @@ import { NewMenu } from "./Apps/NewMenu"; import { MapsButton } from "./Apps/MapsButton"; import { ReloadButton } from "./Apps/ReloadButton"; import { LandscapeBackButton } from "./Apps/LandscapeBackButton"; +import { useStationList } from "../stateBox/useStationList"; /* import StatusbarDetect from '../StatusbarDetect'; var Status = StatusbarDetect(); */ @@ -34,13 +35,9 @@ export default function Apps() { const { navigate } = useNavigation(); const { isLandscape } = useDeviceOrientationChange(); const handleLayout = () => {}; - const { - setInjectJavaScript, - mapSwitch, - trainInfo, - setTrainInfo, - originalStationList, - } = useTrainMenu(); + const { originalStationList } = useStationList(); + const { setInjectJavaScript, mapSwitch, trainInfo, setTrainInfo } = + useTrainMenu(); const openStationACFromEachTrainInfo = async (stationName) => { await SheetManager.hide("EachTrainInfo"); diff --git a/components/Apps/WebView.jsx b/components/Apps/WebView.jsx index 7e64959..e5e8d7d 100644 --- a/components/Apps/WebView.jsx +++ b/components/Apps/WebView.jsx @@ -12,17 +12,18 @@ import { SheetManager } from "react-native-actions-sheet"; import { useNavigation } from "@react-navigation/native"; import { useTrainMenu } from "../../stateBox/useTrainMenu"; import { stationNamePair } from "../../lib/getStationList2"; +import { useStationList } from "../../stateBox/useStationList"; export const AppsWebView = ({ openStationACFromEachTrainInfo }) => { const { webview, currentTrain } = useCurrentTrain(); const { navigate } = useNavigation(); const { favoriteStation } = useFavoriteStation(); const { isLandscape } = useDeviceOrientationChange(); + const { originalStationList } = useStationList(); const { setSelectedLine, mapsStationData: stationData, setLoadError, setTrainInfo, - originalStationList, injectJavascript, } = useTrainMenu(); var urlcache = ""; diff --git a/components/CurrentTrainListView.js b/components/CurrentTrainListView.js index 72a6a1d..250a5da 100644 --- a/components/CurrentTrainListView.js +++ b/components/CurrentTrainListView.js @@ -1,53 +1,15 @@ -import React, { useRef } from "react"; -import { View, Text, TouchableOpacity, Linking } from "react-native"; -import MapView, { Marker } from "react-native-maps"; -import { MaterialCommunityIcons } from "@expo/vector-icons"; +import React from "react"; +import { View, Text } from "react-native"; import { useCurrentTrain } from "../stateBox/useCurrentTrain"; import { useNavigation } from "@react-navigation/native"; +import { BigButton } from "./atom/BigButton"; export default function CurrentTrainListView() { const { navigate } = useNavigation(); const { currentTrain } = useCurrentTrain(); return ( {currentTrain && currentTrain.map((d) => {d.num})} - navigate("menu")} - > - - - 閉じる - - - + navigate("menu")} string="閉じる" /> ); } -const UsefulBox = (props) => { - const { icon, backgroundColor, flex, onPressButton, children } = props; - return ( - - - - {children} - - - ); -}; diff --git a/components/FavoriteList.js b/components/FavoriteList.js index e46b613..d942952 100644 --- a/components/FavoriteList.js +++ b/components/FavoriteList.js @@ -7,6 +7,7 @@ import { useCurrentTrain } from "../stateBox/useCurrentTrain"; import { useNavigation } from "@react-navigation/native"; import { useTrainMenu } from "../stateBox/useTrainMenu"; import { FavoriteListItem } from "./atom/FavoriteListItem"; +import { BigButton } from "./atom/BigButton"; export default function FavoriteList() { const { favoriteStation } = useFavoriteStation(); const { webview } = useCurrentTrain(); @@ -78,24 +79,7 @@ export default function FavoriteList() { > お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。 - goBack()} - > - - - 閉じる - - - + goBack()} string="閉じる" /> ); } diff --git a/components/TrainMenu/MapPin.tsx b/components/TrainMenu/MapPin.tsx new file mode 100644 index 0000000..e7e5d72 --- /dev/null +++ b/components/TrainMenu/MapPin.tsx @@ -0,0 +1,32 @@ +import React, { FC } from "react"; +import { Marker } from "react-native-maps"; +type Props = { + index: number; + indexBase: number; + latlng: string[]; + D: any; + d: string; + navigate: (screen: string) => void; + webview: any; +}; + +export const MapPin: FC = (props) => { + const { index, indexBase, latlng, D, d, navigate, webview } = props; + return ( + { + webview.current?.injectJavaScript( + `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}'); + document.getElementById("disp").insertAdjacentHTML("afterbegin", "
");` + ); + if (navigate) navigate("Apps"); + }} + image={require("../../assets/reccha-small.png")} + > + ); +}; diff --git a/components/TrainMenu/MapsButton.tsx b/components/TrainMenu/MapsButton.tsx new file mode 100644 index 0000000..52bc5de --- /dev/null +++ b/components/TrainMenu/MapsButton.tsx @@ -0,0 +1,35 @@ +import React, { FC } from "react"; +import { View, TouchableOpacity, TouchableOpacityProps } from "react-native"; +import { Ionicons } from "@expo/vector-icons"; + +type Props = { + onPress: () => void; + top: number; + mapSwitch: "flex" | "none"; +}; + +export const MapsButton: FC = ({ onPress, top, mapSwitch }) => { + const styles: TouchableOpacityProps["style"] = { + position: "absolute", + top, + left: 10, + width: 50, + height: 50, + backgroundColor: "#0099CC", + borderColor: "white", + borderStyle: "solid", + borderWidth: 1, + borderRadius: 50, + alignContent: "center", + alignSelf: "center", + alignItems: "center", + display: mapSwitch, + }; + return ( + + + + + + ); +}; diff --git a/components/TrainMenu/UsefulBox.tsx b/components/TrainMenu/UsefulBox.tsx new file mode 100644 index 0000000..0acdc2b --- /dev/null +++ b/components/TrainMenu/UsefulBox.tsx @@ -0,0 +1,32 @@ +import React, { FC } from "react"; +import { Text, TouchableOpacity } from "react-native"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; + +type Props = { + icon: keyof typeof MaterialCommunityIcons.glyphMap; + backgroundColor: string; + flex: number; + onPressButton: () => void; + children: string; +}; + +export const UsefulBox: FC = (props) => { + const { icon, backgroundColor, flex, onPressButton, children } = props; + return ( + + + + {children} + + + ); +}; diff --git a/components/atom/BigButton.tsx b/components/atom/BigButton.tsx new file mode 100644 index 0000000..a014fee --- /dev/null +++ b/components/atom/BigButton.tsx @@ -0,0 +1,41 @@ +import React, { FC } from "react"; +import { + Text, + TextStyle, + TouchableOpacity, + View, + ViewStyle, +} from "react-native"; + +type Props = { + onPress: () => void; + string: string; + style?: ViewStyle; + tS?: TextStyle; + children?: any; +}; +export const BigButton: FC = (props) => { + const { onPress, string, style, tS, children } = props; + return ( + + + {children} + + {string} + + + + ); +}; diff --git a/components/custom-train-data.js b/components/custom-train-data.ts similarity index 99% rename from components/custom-train-data.js rename to components/custom-train-data.ts index c9e0349..71ba164 100644 --- a/components/custom-train-data.js +++ b/components/custom-train-data.ts @@ -1,4 +1,4 @@ -export const customTrainDataDetector = (TrainNumber) => { +export const customTrainDataDetector = (TrainNumber: string) => { switch (TrainNumber) { //しおかぜメイン //8000 ノーマル @@ -627,7 +627,7 @@ export const customTrainDataDetector = (TrainNumber) => { break; } }; -export const getJRF = (num) => { +export const getJRF = (num: string) => { switch (num) { case "71": return "東京(タ)→高松(タ)\\n"; @@ -657,7 +657,6 @@ export const getJRF = (num) => { case "9070": return "臨時貨物\\n"; default: - JRF = true; return null; } }; diff --git a/components/news.js b/components/news.js deleted file mode 100644 index 34fef7b..0000000 --- a/components/news.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react"; -import { View, Text, TouchableOpacity } from "react-native"; -import { WebView } from "react-native-webview"; -import StatusbarDetect from "../StatusbarDetect"; -import { AS } from "../storageControl"; -import { news } from "../config/newsUpdate"; -import { useNavigation } from "@react-navigation/native"; -var Status = StatusbarDetect(); -export default function News() { - const { navigate } = useNavigation(); - return ( - - - { - AS.setItem("status", news); - navigate("Apps"); - }} - > - - - 更新情報を閉じる - - - - - ); -} diff --git a/components/news.tsx b/components/news.tsx new file mode 100644 index 0000000..cd5c09a --- /dev/null +++ b/components/news.tsx @@ -0,0 +1,30 @@ +import React, { FC } from "react"; +import { View } from "react-native"; +import { WebView } from "react-native-webview"; +import { AS } from "../storageControl"; +import { news } from "../config/newsUpdate"; +import { useNavigation } from "@react-navigation/native"; +import { BigButton } from "./atom/BigButton"; +const News: FC = () => { + const { navigate } = useNavigation(); + return ( + + + { + AS.setItem("status", news); + navigate("Apps"); + }} + string="更新情報を閉じる" + /> + + ); +}; +export default News; diff --git a/components/trainMenu.js b/components/trainMenu.js index e95df18..ea00fac 100644 --- a/components/trainMenu.js +++ b/components/trainMenu.js @@ -1,7 +1,6 @@ -import React, { useRef, useState, useEffect } from "react"; -import { View, Text, TouchableOpacity, Linking, Platform } from "react-native"; +import React, { useRef, useState, useEffect, useLayoutEffect } from "react"; +import { View, Text, TouchableOpacity, Linking } from "react-native"; import MapView, { Marker } from "react-native-maps"; -import Constants from "expo-constants"; import { MaterialCommunityIcons, Ionicons } from "@expo/vector-icons"; import { useCurrentTrain } from "../stateBox/useCurrentTrain"; import { useNavigation } from "@react-navigation/native"; @@ -10,6 +9,9 @@ import { stationIDPair } from "../lib/getStationList2"; import { lineListPair } from "../lib/getStationList"; import { SheetManager } from "react-native-actions-sheet"; import { useTrainMenu } from "../stateBox/useTrainMenu"; +import { MapPin } from "./TrainMenu/MapPin"; +import { UsefulBox } from "./TrainMenu/UsefulBox"; +import { MapsButton } from "./TrainMenu/MapsButton"; export default function TrainMenu({ style }) { const { webview } = useCurrentTrain(); const mapRef = useRef(); @@ -24,8 +26,8 @@ export default function TrainMenu({ style }) { } = useTrainMenu(); useEffect(() => { const stationPinData = []; - Object.keys(stationData).map((d, indexBase) => { - stationData[d].map((D, index) => { + Object.keys(stationData).forEach((d, indexBase) => { + stationData[d].forEach((D, index) => { if (!D.StationMap) return null; if (selectedLine && selectedLine != d) return; const latlng = D.StationMap.replace( @@ -44,7 +46,7 @@ export default function TrainMenu({ style }) { }); setStationPin(stationPinData); }, [stationData, selectedLine]); - useEffect(() => { + useLayoutEffect(() => { mapRef.current.fitToCoordinates( stationPin.map(({ latlng }) => ({ latitude: parseFloat(latlng[0]), @@ -207,80 +209,4 @@ export default function TrainMenu({ style }) { /> ); -} -const UsefulBox = (props) => { - const { icon, backgroundColor, flex, onPressButton, children } = props; - return ( - - - - {children} - - - ); -}; - -const MapPin = ({ index, indexBase, latlng, D, d, navigate, webview }) => { - return ( - { - webview.current?.injectJavaScript( - `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}'); - document.getElementById("disp").insertAdjacentHTML("afterbegin", "
");` - ); - if (navigate) navigate("Apps"); - }} - image={require("../assets/reccha-small.png")} - > - ); -}; - -const MapsButton = ({ onPress, top, mapSwitch }) => { - const styles = { - touch: { - position: "absolute", - top, - left: 10, - width: 50, - height: 50, - backgroundColor: "#0099CC", - borderColor: "white", - borderStyle: "solid", - borderWidth: 1, - borderRadius: 50, - alignContent: "center", - alignSelf: "center", - alignItems: "center", - display: mapSwitch, - }, - text: { - textAlign: "center", - width: "auto", - height: "auto", - textAlignVertical: "center", - fontWeight: "bold", - color: "white", - }, - }; - return ( - - - - - - ); -}; +} \ No newline at end of file diff --git a/components/trainbaseview.js b/components/trainbaseview.js index dd68263..5c99a28 100644 --- a/components/trainbaseview.js +++ b/components/trainbaseview.js @@ -1,14 +1,9 @@ -import React, { Component, useRef } from "react"; -import { - StatusBar, - Platform, - View, - TouchableOpacity, - Text, -} from "react-native"; +import React, { useRef } from "react"; +import { StatusBar, Platform, View } from "react-native"; import { WebView } from "react-native-webview"; -import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; import { useNavigation } from "@react-navigation/native"; +import { BigButton } from "./atom/BigButton"; export default function TrainBase({ route }) { const { info, from } = route.params; @@ -38,27 +33,16 @@ export default function TrainBase({ route }) { onMessage={(event) => {}} /> {(from == "LED" || from == "LED2" || from == "AllTrainIDList") && ( - navigate(from == "AllTrainIDList" ? "AllTrainIDList" : "menu") } > - - - 閉じる - - - + )} ); diff --git a/components/発車時刻表/EachData.tsx b/components/発車時刻表/EachData.tsx new file mode 100644 index 0000000..1569ffc --- /dev/null +++ b/components/発車時刻表/EachData.tsx @@ -0,0 +1,126 @@ +import React, { FC, useEffect, useState } from "react"; +import { TouchableOpacity } from "react-native"; +import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData"; +import { getTrainDelayStatus } from "../../lib/getTrainDelayStatus"; +import { getTrainType } from "../../lib/getTrainType"; +import { useCurrentTrain } from "../../stateBox/useCurrentTrain"; +import { SheetManager } from "react-native-actions-sheet"; +import { Description } from "./LED_inside_Component/Description"; +import { DependTime } from "./LED_inside_Component/DependTime"; +import { LastStation } from "./LED_inside_Component/LastStation"; +import { StatusAndDelay } from "./LED_inside_Component/StatusAndDelay"; +import { TrainName } from "./LED_inside_Component/TrainName"; + +type Props = { + d: { + train: string; + lastStation: string; + time: string; + }; + trainIDSwitch: boolean; + trainDescriptionSwitch: boolean; + station: { + Station_JP: string; + }; + customTrainDataDetector: (trainID: string) => { + trainName: string; + trainNumDistance?: number; + type: string; + info: string; + }; + navigate: (screen: string, data?: any) => void; + openStationACFromEachTrainInfo: (station: string) => void; +}; +export const EachData: FC = (props) => { + const { + d, + trainIDSwitch, + trainDescriptionSwitch, + station, + customTrainDataDetector, + navigate, + openStationACFromEachTrainInfo, + } = props; + const { currentTrain } = useCurrentTrain(); + const openTrainInfo = (d: { + train: string; + lastStation: string; + time: string; + }) => { + let TrainNumber = ""; + if (train.trainNumDistance != undefined) { + const timeInfo = + parseInt(d.train.replace("M", "").replace("D", "")) - + train.trainNumDistance; + TrainNumber = timeInfo + "号"; + } + const payload = { + data: { + trainNum: d.train, + limited: `${getTrainType(train.type).data}:${ + train.trainName + }${TrainNumber}`, + }, + navigate, + openStationACFromEachTrainInfo, + from: "LED", + }; + SheetManager.show("EachTrainInfo", { + payload, + }); + }; + const [train, setTrain] = useState(customTrainDataDetector(d.train)); + useEffect(() => { + setTrain(customTrainDataDetector(d.train)); + }, [currentTrain, d.train, trainDescriptionSwitch]); + // 土讃線複数存在対策 + const currentTrainData = checkDuplicateTrainData( + currentTrain.filter((a) => a.num == d.train) + ); + const trainDelayStatus = `${getTrainDelayStatus( + currentTrainData, + station.Station_JP + )}`; + const trainPositionText = currentTrainData?.Pos.match("～") + ? `現在地：${ + currentTrainData?.Pos.replace("（下り）", "") + .replace("（上り）", "") + .split("～")[currentTrainData?.Direction == 1 ? 0 : 1] + }→${ + currentTrainData?.Pos.replace("（下り）", "") + .replace("（上り）", "") + .split("～")[currentTrainData?.Direction == 1 ? 1 : 0] + }間を走行中` + : `現在地：${currentTrainData?.Pos}`; + return ( + <> + openTrainInfo(d)} + > + + + + + + {trainDescriptionSwitch && } + {trainDescriptionSwitch && !!train.info && ( + + )} + + ); +}; diff --git a/components/発車時刻表/LED_inside_Component/DependTime.tsx b/components/発車時刻表/LED_inside_Component/DependTime.tsx new file mode 100644 index 0000000..ebcd55c --- /dev/null +++ b/components/発車時刻表/LED_inside_Component/DependTime.tsx @@ -0,0 +1,14 @@ +import React, { FC } from "react"; +import { Text, TextStyle, View } from "react-native"; +const descriptionStyle: TextStyle = { + fontSize: parseInt("16%"), + fontWeight: "bold", +}; +type Props = { + time: string; +}; +export const DependTime: FC = ({ time }) => ( + + {time} + +); diff --git a/components/発車時刻表/LED_inside_Component/Description.tsx b/components/発車時刻表/LED_inside_Component/Description.tsx new file mode 100644 index 0000000..69aba13 --- /dev/null +++ b/components/発車時刻表/LED_inside_Component/Description.tsx @@ -0,0 +1,45 @@ +import React, { FC } from "react"; +import { Text, TextStyle, View, TouchableOpacity } from "react-native"; + +const descriptionStyle: TextStyle = { + fontSize: parseInt("16%"), + fontWeight: "bold", +}; + +type Props = { + info: string; + numberOfLines?: number; + onClick?: () => void; +}; +export const Description:FC = ({ info, numberOfLines = 0, onClick }) => ( + + + {numberOfLines == 1 ? ( + + 運行情報 >{" "} + + ) : ( + > + )} + + + {info} + + + +); diff --git a/components/発車時刻表/LED_inside_Component/LastStation.tsx b/components/発車時刻表/LED_inside_Component/LastStation.tsx new file mode 100644 index 0000000..3238a0b --- /dev/null +++ b/components/発車時刻表/LED_inside_Component/LastStation.tsx @@ -0,0 +1,21 @@ +import React, { FC } from "react"; +import { Text, View } from "react-native"; + +type Props = { + lastStation: string; +}; +export const LastStation: FC = ({ lastStation }) => { + return ( + + 4 ? parseInt("12%") : parseInt("16%"), + color: "white", + fontWeight: "bold", + }} + > + {lastStation} + + + ); +}; diff --git a/components/発車時刻表/LED_inside_Component/StatusAndDelay.tsx b/components/発車時刻表/LED_inside_Component/StatusAndDelay.tsx new file mode 100644 index 0000000..15b3960 --- /dev/null +++ b/components/発車時刻表/LED_inside_Component/StatusAndDelay.tsx @@ -0,0 +1,18 @@ +import React, { FC } from "react"; +import { Text, TextStyle, View } from "react-native"; +const descriptionStyle: TextStyle = { + fontSize: parseInt("16%"), + fontWeight: "bold", +}; +type Props = { + trainDelayStatus: string; +}; +export const StatusAndDelay: FC = ({ trainDelayStatus }) => { + return ( + + + {trainDelayStatus} + + + ); +}; diff --git a/components/発車時刻表/LED_inside_Component/TrainName.tsx b/components/発車時刻表/LED_inside_Component/TrainName.tsx new file mode 100644 index 0000000..88e87e9 --- /dev/null +++ b/components/発車時刻表/LED_inside_Component/TrainName.tsx @@ -0,0 +1,33 @@ +import React, { FC } from "react"; +import { Text, View } from "react-native"; +import { getTrainType } from "../../../lib/getTrainType"; +type Props = { + trainName: string; + trainNumDistance?: number; + trainIDSwitch: boolean; + trainID: string; + type: string; +}; +export const TrainName: FC = (props) => { + const { trainName, trainNumDistance, trainIDSwitch, trainID, type } = props; + const { name, color } = getTrainType(type); + const TrainNumber = + trainNumDistance != undefined + ? `${ + parseInt(trainID.replace("M", "").replace("D", "")) - trainNumDistance + }号` + : ""; + return ( + + 6 ? parseInt("12%") : parseInt("16%"), + color: color, + fontWeight: "bold", + }} + > + {trainIDSwitch ? trainID : `${name} ${trainName}${TrainNumber}`} + + + ); +}; diff --git a/components/発車時刻表/LED_vidion.js b/components/発車時刻表/LED_vidion.js index dd91f9d..f787522 100644 --- a/components/発車時刻表/LED_vidion.js +++ b/components/発車時刻表/LED_vidion.js @@ -1,18 +1,17 @@ import React, { useState, useEffect } from "react"; -import { View, Text, TouchableOpacity } from "react-native"; +import { View } from "react-native"; import { widthPercentageToDP as wp } from "react-native-responsive-screen"; import { customTrainDataDetector } from "../custom-train-data"; import { useInterval } from "../../lib/useInterval"; import { objectIsEmpty } from "../../lib/objectIsEmpty"; -import { getTrainType } from "../../lib/getTrainType"; -import { getTrainDelayStatus } from "../../lib/getTrainDelayStatus"; -import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData"; import { useCurrentTrain } from "../../stateBox/useCurrentTrain"; import { useAreaInfo } from "../../stateBox/useAreaInfo"; -import { SheetManager } from "react-native-actions-sheet"; import { AS } from "../../storageControl"; import { Footer } from "./LED_Vision_Component/Footer"; import { Header } from "./LED_Vision_Component/Header"; +import { Description } from "./LED_inside_Component/Description"; +import { EachData } from "./EachData"; + /** @@ -232,192 +231,3 @@ export default function LED_vision(props) { ); } - -const EachData = (props) => { - const { - d, - trainIDSwitch, - trainDescriptionSwitch, - station, - customTrainDataDetector, - navigate, - openStationACFromEachTrainInfo, - } = props; - const { currentTrain } = useCurrentTrain(); - const openTrainInfo = (d) => { - let TrainNumber = ""; - if (train.trainNumDistance != undefined) { - const timeInfo = - parseInt(d.train.replace("M", "").replace("D", "")) - - train.trainNumDistance; - TrainNumber = timeInfo + "号"; - } - const payload = { - data: { - trainNum: d.train, - limited: `${getTrainType(train.type).data}:${ - train.trainName - }${TrainNumber}`, - }, - navigate, - openStationACFromEachTrainInfo, - from: "LED", - }; - SheetManager.show("EachTrainInfo", { - payload, - }); - }; - const [train, setTrain] = useState(customTrainDataDetector(d.train)); - useEffect(() => { - setTrain(customTrainDataDetector(d.train)); - }, [currentTrain, d.train, trainDescriptionSwitch]); - // 土讃線複数存在対策 - const currentTrainData = checkDuplicateTrainData( - currentTrain.filter((a) => a.num == d.train) - ); - const trainDelayStatus = getTrainDelayStatus( - currentTrainData, - station.Station_JP - ); - const trainPositionText = currentTrainData?.Pos.match("～") - ? `現在地：${ - currentTrainData?.Pos.replace("（下り）", "") - .replace("（上り）", "") - .split("～")[currentTrainData?.Direction == 1 ? 0 : 1] - }→${ - currentTrainData?.Pos.replace("（下り）", "") - .replace("（上り）", "") - .split("～")[currentTrainData?.Direction == 1 ? 1 : 0] - }間を走行中` - : `現在地：${currentTrainData?.Pos}`; - return ( - <> - openTrainInfo(d)} - > - - - - - - {trainDescriptionSwitch && } - {trainDescriptionSwitch && !!train.info && ( - - )} - - ); -}; - -const TrainName = ({ - trainName, - trainNumDistance, - trainIDSwitch, - trainID, - type, -}) => { - const { name, color } = getTrainType(type); - let TrainNumber = - trainNumDistance != undefined - ? `${ - parseInt(trainID.replace("M", "").replace("D", "")) - trainNumDistance - }号` - : ""; - return ( - - 6 ? parseInt("12%") : parseInt("16%"), - color: color, - fontWeight: "bold", - }} - > - {trainIDSwitch ? trainID : `${name} ${trainName}${TrainNumber}`} - - - ); -}; - -const LastStation = ({ lastStation }) => { - return ( - - 4 ? parseInt("12%") : parseInt("16%"), - color: "white", - fontWeight: "bold", - }} - > - {lastStation} - - - ); -}; - -const descriptionStyle = { - fontSize: parseInt("16%"), - fontWeight: "bold", -}; - -const DependTime = ({ time }) => ( - - {time} - -); - -const StatusAndDelay = ({ trainDelayStatus }) => { - return ( - - - {trainDelayStatus} - - - ); -}; - -const Description = ({ info, numberOfLines = 0, onClick }) => ( - - - {numberOfLines == 1 ? ( - - 運行情報 >{" "} - - ) : ( - > - )} - - - {info} - - - -); diff --git a/components/駅名表/Sign.js b/components/駅名表/Sign.js index 2d959f5..7cd1723 100644 --- a/components/駅名表/Sign.js +++ b/components/駅名表/Sign.js @@ -12,13 +12,13 @@ import { StationNumberMaker } from "./StationNumberMaker"; import { NextPreStationLine } from "./NextPreStationLine"; import { LottieDelayView } from "./LottieDelayView"; import { AddressText } from "./AddressText"; -import { useTrainMenu } from "../../stateBox/useTrainMenu"; +import { useStationList } from "../../stateBox/useStationList"; export default function Sign(props) { const { currentStation, oP, oLP, isCurrentStation = false } = props; const { favoriteStation, setFavoriteStation } = useFavoriteStation(); const [nexPrePosition, setNexPrePosition] = useState(0); - const { originalStationList } = useTrainMenu(); + const { originalStationList } = useStationList(); const [preStation, setPreStation] = useState(); const [nexStation, setNexStation] = useState(); diff --git a/config/newsUpdate.js b/config/newsUpdate.ts similarity index 100% rename from config/newsUpdate.js rename to config/newsUpdate.ts diff --git a/howto.js b/howto.js index e36d9a8..7bf9dd2 100644 --- a/howto.js +++ b/howto.js @@ -1,7 +1,7 @@ -const WEBVIEW = "WEBVIEW"; -import React, { Component } from "react"; -import { StatusBar, View, TouchableOpacity, Text } from "react-native"; +import React from "react"; +import { View } from "react-native"; import { WebView } from "react-native-webview"; +import { BigButton } from "./components/atom/BigButton"; export default ({ navigation: { navigate }, route }) => { const { info, goTo, useShow } = route.params; const onExit = () => { @@ -9,30 +9,13 @@ export default ({ navigation: { navigate }, route }) => { useShow && useShow(); }; return ( - + - - - - 閉じる - - - + ); }; -const styles = { - View: { height: "100%", backgroundColor: "#0099CC" }, - touch: { - padding: 10, - flexDirection: "row", - borderColor: "white", - borderWidth: 1, - margin: 10, - borderRadius: 5, - alignItems: "center", - }, -}; +const styles = { height: "100%", backgroundColor: "#0099CC" }; diff --git a/lib/providerTreeProvider.js b/lib/providerTreeProvider.js index e6fdd5f..f759cc7 100644 --- a/lib/providerTreeProvider.js +++ b/lib/providerTreeProvider.js @@ -17,7 +17,7 @@ export const buildProvidersTree = (providers) => { return buildProvidersTree([ ({ children }) => ( - {children} + ), ...providers, diff --git a/lib/webViewInjectjavascript.ts b/lib/webViewInjectjavascript.ts index c5a5177..4f4c922 100644 --- a/lib/webViewInjectjavascript.ts +++ b/lib/webViewInjectjavascript.ts @@ -1,5 +1,3 @@ -import { getJRF } from "../components/custom-train-data"; - type InjectJavascriptData = ( a: string, b: string, diff --git a/menu.js b/menu.js index d410287..066a74b 100644 --- a/menu.js +++ b/menu.js @@ -23,19 +23,19 @@ import { TitleBar } from "./components/Menu/TitleBar"; import { FixedContentBottom } from "./components/Menu/FixedContentBottom"; import { UsefulBox } from "./components/atom/UsefulBox"; -import { getStationList, lineList } from "./lib/getStationList"; +import { lineList } from "./lib/getStationList"; import useInterval from "./lib/useInterval"; import { HeaderConfig } from "./lib/HeaderConfig"; import { useFavoriteStation } from "./stateBox/useFavoriteStation"; import { SheetManager } from "react-native-actions-sheet"; import { useTrainDelayData } from "./stateBox/useTrainDelayData"; import { useNavigation } from "@react-navigation/native"; -import { useTrainMenu } from "./stateBox/useTrainMenu"; +import { useStationList } from "./stateBox/useStationList"; export default function Menu({ getCurrentTrain }) { const { navigate } = useNavigation(); const { favoriteStation } = useFavoriteStation(); - const { originalStationList } = useTrainMenu(); + const { originalStationList } = useStationList(); //位置情報 const [locationStatus, setLocationStatus] = useState(null); @@ -137,6 +137,21 @@ export default function Menu({ getCurrentTrain }) { setTrainDiagram(trainList); }); }, []); + + const oPSign = () => { + const payload = { + currentStation: + originalStationList && + allStationData.length != 0 && + allStationData[selectedCurrentStation], + navigate: navigate, + goTo: "menu", + useShow: () => SheetManager.show("StationDetailView", { payload }), + onExit: () => SheetManager.hide("StationDetailView"), + }; + SheetManager.show("StationDetailView", { payload }); + }; + return ( { - setSelectedCurrentStation(d); - }} + onSnapToItem={setSelectedCurrentStation} renderItem={({ item }) => { return ( { - const payload = { - currentStation: - originalStationList && - allStationData.length != 0 && - allStationData[selectedCurrentStation], - navigate: navigate, - goTo: "menu", - useShow: () => - SheetManager.show("StationDetailView", { - payload, - }), - onExit: () => { - SheetManager.hide("StationDetailView"); - }, - }; - SheetManager.show("StationDetailView", { - payload, - }); - }} + oP={oPSign} /> ); @@ -260,12 +254,8 @@ const TopMenuButton = () => { }; const JRSTraInfoBox = () => { - const { - getTime, - delayData, - loadingDelayData, - setLoadingDelayData, - } = useTrainDelayData(); + const { getTime, delayData, loadingDelayData, setLoadingDelayData } = + useTrainDelayData(); const styles = { touch: { backgroundColor: "#0099CC", diff --git a/stateBox/useAllTrainDiagram.js b/stateBox/useAllTrainDiagram.js index a792222..f6c643c 100644 --- a/stateBox/useAllTrainDiagram.js +++ b/stateBox/useAllTrainDiagram.js @@ -6,12 +6,15 @@ const initialState = { const AllTrainDiagramContext = createContext(initialState); -export const useAllTrainDiagram = () => { - return useContext(AllTrainDiagramContext); -}; +export const useAllTrainDiagram = () => useContext(AllTrainDiagramContext); export const AllTrainDiagramProvider = ({ children }) => { const [allTrainDiagram, setAllTrainDiagram] = useState(); + const [keyList, setKeyList] = useState(); // 第二要素 + useEffect( + () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)), + [allTrainDiagram] + ); const customData = {}; useEffect(() => { fetch( @@ -55,7 +58,7 @@ export const AllTrainDiagramProvider = ({ children }) => { return ( {children} diff --git a/stateBox/useStationList.tsx b/stateBox/useStationList.tsx index 2f66c81..d947796 100644 --- a/stateBox/useStationList.tsx +++ b/stateBox/useStationList.tsx @@ -3,10 +3,8 @@ import React, { useContext, useState, useEffect, - useLayoutEffect, FC, } from "react"; -import { AS } from "../storageControl"; import { getStationList } from "../lib/getStationList"; type initialStateType = { @@ -38,12 +36,11 @@ export const StationListProvider: FC = ({ children }) => { Object.keys(originalStationList).forEach((key) => { originalStationList[key].forEach((station) => { if (station.Station_JP === name) { - if(!!station.jslodApi)returnArray.push(station); + if (!!station.jslodApi) returnArray.push(station); } }); }); return returnArray; - }; return ( diff --git a/stateBox/useTrainMenu.js b/stateBox/useTrainMenu.js index 5e1c10b..fe66c3b 100644 --- a/stateBox/useTrainMenu.js +++ b/stateBox/useTrainMenu.js @@ -2,7 +2,6 @@ import React, { createContext, useContext, useState, useEffect } from "react"; import { AS, ASCore } from "../storageControl"; -import { getStationList } from "../lib/getStationList"; import { getStationList2 } from "../lib/getStationList2"; import { injectJavascriptData } from "../lib/webViewInjectjavascript"; @@ -27,8 +26,6 @@ const initialState = { trainData: undefined, }, setTrainInfo: () => {}, - originalStationList: [], - setOriginalStationList: () => {}, trainMenu: "true", setTrainMenu: () => {}, injectJavascript: "", @@ -61,9 +58,7 @@ export const TrainMenuProvider = ({ children }) => { }); //駅情報画面用 - const [originalStationList, setOriginalStationList] = useState([]); const [trainMenu, setTrainMenu] = useState("true"); - useEffect(() => getStationList().then(setOriginalStationList), []); //地図表示テキスト const injectJavascript = injectJavascriptData( @@ -112,8 +107,6 @@ export const TrainMenuProvider = ({ children }) => { setLoadError, trainInfo, setTrainInfo, - originalStationList, - setOriginalStationList, trainMenu, setTrainMenu, injectJavascript, diff --git a/storageConfig.js b/storageConfig.ts similarity index 100% rename from storageConfig.js rename to storageConfig.ts diff --git a/storageControl.js b/storageControl.ts similarity index 65% rename from storageControl.js rename to storageControl.ts index 294f926..a08cfd4 100644 --- a/storageControl.js +++ b/storageControl.ts @@ -2,8 +2,8 @@ import storage from "./storageConfig"; import * as Updates from "expo-updates"; export const AS = { - getItem: (key) => storage.load({ key }), - setItem: (key, data) => + getItem: (key: string) => storage.load({ key }), + setItem: (key: string, data: any) => storage.save({ key, // Note: Do not use underscore("_") in key! data, @@ -12,9 +12,12 @@ export const AS = { // if set to null, then it will never expire. expires: null, }), - removeItem: (key) => storage.remove({ key }), + removeItem: (key: string) => storage.remove({ key }), }; -export const ASCore = ({ k, s, d, u }) => + +type ASCoreProps = (s: { k: any; s: any; d: any; u: any }) => Promise; + +export const ASCore: ASCoreProps = ({ k, s, d, u }) => AS.getItem(k) .then((d) => d ? s(d) : AS.setItem(k, d).then(() => u && Updates.reloadAsync())