EachTrainInfoをコンポーネントファイル分割

2024-02-06 16:19:30 +09:00
parent b551c75061
commit 32e61a824b
5 changed files with 283 additions and 265 deletions
--- a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
+++ b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
@@ -0,0 +1,74 @@
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { StateBox } from "./StateBox";
+import {
+  heightPercentageToDP,
+  widthPercentageToDP,
+} from "react-native-responsive-screen";
+
+export const TrainDataView = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        minHeight: 200,
+        height: heightPercentageToDP("20%"),
+        width: widthPercentageToDP("100%"),
+      }}
+    >
+      <StateBox
+        title={`現在地 ${currentPosition.toString()}`}
+        text={
+          currentTrainData?.Pos.match("～")
+            ? `${
+                currentTrainData?.Pos.replace("（下り）", "")
+                  .replace("（上り）", "")
+                  .split("～")[0]
+              }～${
+                currentTrainData?.Pos.replace("（下り）", "")
+                  .replace("（上り）", "")
+                  .split("～")[1]
+              }`
+            : currentTrainData?.Pos
+        }
+      />
+      <View style={{ flex: 1, flexDirection: "column" }}>
+        <View style={{ flex: 1, flexDirection: "row" }}>
+          <StateBox
+            title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
+            text={`${currentTrainData?.delay}${
+              isNaN(currentTrainData?.delay) ? "" : "分"
+            }`}
+          />
+        </View>
+        <TouchableOpacity
+          style={{ flex: 1, flexDirection: "row" }}
+          disabled={nearTrainIDList.length == 0}
+          onPress={() => {
+            if (nearTrainIDList.length == 0) return;
+            openTrainInfo(nearTrainIDList[0]);
+          }}
+        >
+          {nearTrainIDList.length == 0 ? (
+            <StateBox title="列番" text={currentTrainData?.num} />
+          ) : (
+            <StateBox
+              title="増解結相手を表示▶️"
+              text={`${nearTrainIDList}`}
+              style={{
+                borderWidth: 1,
+                borderColor: "red",
+                borderStyle: "solid",
+              }}
+            />
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};