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/atom/BigButton.tsx b/components/atom/BigButton.tsx index 1e13926..a014fee 100644 --- a/components/atom/BigButton.tsx +++ b/components/atom/BigButton.tsx @@ -1,12 +1,21 @@ import React, { FC } from "react"; -import { Text, TouchableOpacity, View, ViewStyle } from "react-native"; +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 = ({ onPress, string,style }) => { +export const BigButton: FC = (props) => { + const { onPress, string, style, tS, children } = props; return ( = ({ onPress, string,style }) => { onPress={onPress} > - + {children} + {string} diff --git a/components/news.js b/components/news.tsx similarity index 78% rename from components/news.js rename to components/news.tsx index 79e4172..cd5c09a 100644 --- a/components/news.js +++ b/components/news.tsx @@ -1,13 +1,11 @@ -import React from "react"; -import { View, Text, TouchableOpacity } from "react-native"; +import React, { FC } from "react"; +import { View } 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"; import { BigButton } from "./atom/BigButton"; -var Status = StatusbarDetect(); -export default function News() { +const News: FC = () => { const { navigate } = useNavigation(); return ( @@ -28,4 +26,5 @@ export default function News() { /> ); -} +}; +export default News; 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} - - - -);