LEDの処理大整理

components/CurrentTrainListView.js

@@ -1,53 +1,15 @@
-import React, { useRef } from "react";
+import React from "react";
-import { View, Text, TouchableOpacity, Linking } from "react-native";
+import { View, Text } from "react-native";
-import MapView, { Marker } from "react-native-maps";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
 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 (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       {currentTrain && currentTrain.map((d) => <Text>{d.num}</Text>)}
-      <TouchableOpacity
+      <BigButton onPress={() => navigate("menu")} string="閉じる" />
-        style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
-        }}
-        onPress={() => navigate("menu")}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
     </View>
   );
 }
-const UsefulBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
-  return (
-    <TouchableOpacity
-      style={{
-        flex: flex,
-        backgroundColor: backgroundColor,
-        padding: 10,
-        alignItems: "center",
-        margin: 2,
-      }}
-      onPress={onPressButton}
-    >
-      <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
-        {children}
-      </Text>
-    </TouchableOpacity>
-  );
-};

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() {
       >
         お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
       </Text>
-      <TouchableOpacity
+      <BigButton onPress={() => goBack()} string="閉じる" />
-        style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
-        }}
-        onPress={() => goBack()}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
     </View>
   );
 }

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<Props> = ({ onPress, string,style }) => {
+export const BigButton: FC<Props> = (props) => {
+  const { onPress, string, style, tS, children } = props;
   return (
     <TouchableOpacity
       style={{
@@ -22,7 +31,8 @@ export const BigButton: FC<Props> = ({ onPress, string,style }) => {
       onPress={onPress}
     >
       <View style={{ flex: 1 }} />
-      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+      {children}
+      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white", ...tS }}>
         {string}
       </Text>
       <View style={{ flex: 1 }} />

components/news.tsx

@@ -1,13 +1,11 @@
-import React from "react";
+import React, { FC } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+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();
+const News: FC = () => {
-export default function News() {
   const { navigate } = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
@@ -28,4 +26,5 @@ export default function News() {
       />
     </View>
   );
-}
+};
+export default News;

components/trainbaseview.js

@@ -1,14 +1,9 @@
-import React, { Component, useRef } from "react";
+import React, { useRef } from "react";
-import {
+import { StatusBar, Platform, View } from "react-native";
-  StatusBar,
-  Platform,
-  View,
-  TouchableOpacity,
-  Text,
-} 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") && (
-        <TouchableOpacity
+        <BigButton
-          style={{
+          style={{ borderColor: "black" }}
-            padding: 10,
+          tS={{ color: "black" }}
-            flexDirection: "row",
+          string="閉じる"
-            borderColor: "black",
-            borderWidth: 1,
-            margin: 10,
-            borderRadius: 5,
-            alignItems: "center",
-          }}
           onPress={() =>
             navigate(from == "AllTrainIDList" ? "AllTrainIDList" : "menu")
           }
         >
-          <View style={{ flex: 1 }} />
           <MaterialCommunityIcons name="close" color="black" size={30} />
-          <Text style={{ fontSize: 25, fontWeight: "bold", color: "black" }}>
+        </BigButton>
-            閉じる
-          </Text>
-          <View style={{ flex: 1 }} />
-        </TouchableOpacity>
       )}
     </View>
   );

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> = (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 (
+    <>
+      <TouchableOpacity
+        style={{
+          alignContent: "center",
+          alignItems: "center",
+          width: "94%",
+          marginVertical: 5,
+          marginHorizontal: "3%",
+          backgroundColor: "#000",
+          flexDirection: "row",
+        }}
+        onPress={() => openTrainInfo(d)}
+      >
+        <TrainName
+          trainName={train.trainName}
+          trainNumDistance={train.trainNumDistance}
+          trainIDSwitch={trainIDSwitch}
+          trainID={d.train}
+          type={train.type}
+        />
+        <LastStation lastStation={d.lastStation} />
+        <DependTime time={d.time} />
+        <StatusAndDelay trainDelayStatus={trainDelayStatus} />
+      </TouchableOpacity>
+      {trainDescriptionSwitch && <Description info={`${trainPositionText}`} />}
+      {trainDescriptionSwitch && !!train.info && (
+        <Description info={train.info} />
+      )}
+    </>
+  );
+};

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<Props> = ({ time }) => (
+  <View style={{ flex: 3 }}>
+    <Text style={{ ...descriptionStyle, color: "white" }}>{time}</Text>
+  </View>
+);

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<Props> = ({ info, numberOfLines = 0, onClick }) => (
+  <TouchableOpacity
+    style={{
+      alignContent: "center",
+      alignItems: "center",
+      width: "94%",
+      marginVertical: 5,
+      marginHorizontal: "3%",
+      backgroundColor: "#000",
+      flexDirection: "row",
+      overflow: "hidden",
+    }}
+    onPress={onClick}
+  >
+    <View style={{ flex: 4, flexDirection: "row" }}>
+      {numberOfLines == 1 ? (
+        <Text style={{ ...descriptionStyle, color: "red" }}>
+          運行情報 &gt;{" "}
+        </Text>
+      ) : (
+        <Text style={{ ...descriptionStyle, color: "green" }}> &gt; </Text>
+      )}
+
+      <Text
+        style={{ ...descriptionStyle, color: "green" }}
+        numberOfLines={numberOfLines}
+      >
+        {info}
+      </Text>
+    </View>
+  </TouchableOpacity>
+);

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<Props> = ({ lastStation }) => {
+  return (
+    <View style={{ flex: 4, flexDirection: "row" }}>
+      <Text
+        style={{
+          fontSize: lastStation.length > 4 ? parseInt("12%") : parseInt("16%"),
+          color: "white",
+          fontWeight: "bold",
+        }}
+      >
+        {lastStation}
+      </Text>
+    </View>
+  );
+};

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<Props> = ({ trainDelayStatus }) => {
+  return (
+    <View style={{ flex: 4 }}>
+      <Text style={{ ...descriptionStyle, color: "white", paddingLeft: 1 }}>
+        {trainDelayStatus}
+      </Text>
+    </View>
+  );
+};

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> = (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 (
+    <View style={{ flex: 9 }}>
+      <Text
+        style={{
+          fontSize: trainName.length > 6 ? parseInt("12%") : parseInt("16%"),
+          color: color,
+          fontWeight: "bold",
+        }}
+      >
+        {trainIDSwitch ? trainID : `${name} ${trainName}${TrainNumber}`}
+      </Text>
+    </View>
+  );
+};

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) {
     </View>
   );
 }
-
-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 (
-    <>
-      <TouchableOpacity
-        style={{
-          alignContent: "center",
-          alignItems: "center",
-          width: "94%",
-          marginVertical: 5,
-          marginHorizontal: "3%",
-          backgroundColor: "#000",
-          flexDirection: "row",
-        }}
-        onPress={() => openTrainInfo(d)}
-      >
-        <TrainName
-          trainName={train.trainName}
-          trainNumDistance={train.trainNumDistance}
-          trainIDSwitch={trainIDSwitch}
-          trainID={d.train}
-          type={train.type}
-        />
-        <LastStation lastStation={d.lastStation} />
-        <DependTime time={d.time} />
-        <StatusAndDelay trainDelayStatus={trainDelayStatus} />
-      </TouchableOpacity>
-      {trainDescriptionSwitch && <Description info={`${trainPositionText}`} />}
-      {trainDescriptionSwitch && !!train.info && (
-        <Description info={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 (
-    <View style={{ flex: 9 }}>
-      <Text
-        style={{
-          fontSize: trainName.length > 6 ? parseInt("12%") : parseInt("16%"),
-          color: color,
-          fontWeight: "bold",
-        }}
-      >
-        {trainIDSwitch ? trainID : `${name} ${trainName}${TrainNumber}`}
-      </Text>
-    </View>
-  );
-};
-
-const LastStation = ({ lastStation }) => {
-  return (
-    <View style={{ flex: 4, flexDirection: "row" }}>
-      <Text
-        style={{
-          fontSize: lastStation.length > 4 ? parseInt("12%") : parseInt("16%"),
-          color: "white",
-          fontWeight: "bold",
-        }}
-      >
-        {lastStation}
-      </Text>
-    </View>
-  );
-};
-
-const descriptionStyle = {
-  fontSize: parseInt("16%"),
-  fontWeight: "bold",
-};
-
-const DependTime = ({ time }) => (
-  <View style={{ flex: 3 }}>
-    <Text style={{ ...descriptionStyle, color: "white" }}>{time}</Text>
-  </View>
-);
-
-const StatusAndDelay = ({ trainDelayStatus }) => {
-  return (
-    <View style={{ flex: 4 }}>
-      <Text style={{ ...descriptionStyle, color: "white", paddingLeft: 1 }}>
-        {trainDelayStatus}
-      </Text>
-    </View>
-  );
-};
-
-const Description = ({ info, numberOfLines = 0, onClick }) => (
-  <TouchableOpacity
-    style={{
-      alignContent: "center",
-      alignItems: "center",
-      width: "94%",
-      marginVertical: 5,
-      marginHorizontal: "3%",
-      backgroundColor: "#000",
-      flexDirection: "row",
-      overflow: "hidden",
-    }}
-    onPress={onClick}
-  >
-    <View style={{ flex: 4, flexDirection: "row" }}>
-      {numberOfLines == 1 ? (
-        <Text style={{ ...descriptionStyle, color: "red" }}>
-          運行情報 &gt;{" "}
-        </Text>
-      ) : (
-        <Text style={{ ...descriptionStyle, color: "green" }}> &gt; </Text>
-      )}
-
-      <Text
-        style={{ ...descriptionStyle, color: "green" }}
-        numberOfLines={numberOfLines}
-      >
-        {info}
-      </Text>
-    </View>
-  </TouchableOpacity>
-);