From 6cc5708ce0db74f4bb70f383ec037e51fadb9e9a Mon Sep 17 00:00:00 2001
From: harukin-expo-dev-env <harukin@haruk.in>
Date: Sat, 31 Aug 2024 08:20:53 +0000
Subject: [PATCH] =?UTF-8?q?NextPreStationLine=E3=82=92=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/駅名表/NextPreStationLine.tsx | 104 +++++++++++++++++
 components/駅名表/Sign.js                | 117 +-------------------
 2 files changed, 106 insertions(+), 115 deletions(-)
 create mode 100644 components/駅名表/NextPreStationLine.tsx

diff --git a/components/駅名表/NextPreStationLine.tsx b/components/駅名表/NextPreStationLine.tsx
new file mode 100644
index 0000000..cf1bd91
--- /dev/null
+++ b/components/駅名表/NextPreStationLine.tsx
@@ -0,0 +1,104 @@
+import React, { CSSProperties, FC } from "react";
+import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+import { Text, TextStyle, View, ViewStyle } from "react-native";
+import { StationName } from "./StationName";
+export const NextPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
+  return (
+    <View style={下枠フレーム}>
+      <View style={下枠フレーム}>
+        {!!preStation && (
+          <>
+            <BottomSideArrow isMatsuyama={isMatsuyama} children={"◀"} />
+            {!!preStation.StationNumber && (
+              <BottomStationNumberView
+                isMatsuyama={isMatsuyama}
+                children={preStation.StationNumber}
+              />
+            )}
+            <StationName
+              stringData={preStation}
+              ss={{ flex: 1, alignItems: "flex-start" }}
+            />
+          </>
+        )}
+      </View>
+      <View style={下枠フレーム}>
+        {!!nexStation && (
+          <>
+            <StationName
+              stringData={nexStation}
+              ss={{ flex: 1, alignItems: "flex-end" }}
+            />
+            {!!nexStation.StationNumber && (
+              <BottomStationNumberView
+                isMatsuyama={isMatsuyama}
+                children={nexStation.StationNumber}
+              />
+            )}
+            <BottomSideArrow isMatsuyama={isMatsuyama} children={"▶"} />
+          </>
+        )}
+      </View>
+    </View>
+  );
+};
+
+type FCimport = {
+  isMatsuyama: boolean;
+  children: string;
+};
+const BottomSideArrow: FC<FCimport> = ({ isMatsuyama, children }) => {
+  return !isMatsuyama && <Text style={下枠左右マーク}>{children}</Text>;
+};
+
+const BottomStationNumberView: FC<FCimport> = ({ isMatsuyama, children }) => {
+  return (
+    <View style={isMatsuyama ? 下枠駅ナンバーB : 下枠駅ナンバー}>
+      <View style={{ flex: 1 }} />
+      <Text
+        style={{
+          fontSize: parseInt("10%"),
+          color: isMatsuyama ? "black" : "white",
+        }}
+      >
+        {children}
+      </Text>
+      <View style={{ flex: 1 }} />
+    </View>
+  );
+};
+
+const 下枠フレーム: ViewStyle = {
+  flex: 1,
+  flexDirection: "row",
+  alignContent: "center",
+  alignItems: "center",
+};
+const 下枠左右マーク: TextStyle = {
+  fontWeight: "bold",
+  fontSize: parseInt("20%"),
+  color: "white",
+  paddingHorizontal: 10,
+  textAlignVertical: "center",
+};
+const 下枠駅ナンバー: ViewStyle = {
+  alignContent: "center",
+  alignItems: "center",
+  width: wp("8%"),
+  height: wp("8%"),
+  margin: wp("1%"),
+  borderColor: "white",
+  borderWidth: parseInt("2%"),
+  borderRadius: parseInt("100%"),
+};
+const 下枠駅ナンバーB: ViewStyle = {
+  alignContent: "center",
+  alignItems: "center",
+  width: wp("7%"),
+  height: wp("7%"),
+  margin: wp("2%"),
+  borderColor: "black",
+  backgroundColor: "white",
+  borderWidth: parseInt("2%"),
+  borderRadius: parseInt("100%"),
+};
diff --git a/components/駅名表/Sign.js b/components/駅名表/Sign.js
index 49d1436..a320202 100644
--- a/components/駅名表/Sign.js
+++ b/components/駅名表/Sign.js
@@ -10,6 +10,7 @@ import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
 import { StationName } from "./StationName";
 import { StationNameArea } from "./StationNameArea";
 import { StationNumberMaker } from "./StationNumberMaker";
+import { NextPreStationLine } from "./NextPreStationLine";
 
 import lineColorList from "../../assets/originData/lineColorList";
 
@@ -173,11 +174,7 @@ export default function Sign(props) {
       <Text style={styleSheet.JRStyle}>JR</Text>
       <View style={styleSheet[isMatsuyama ? "下帯B" : "下帯"]} />
       <View style={styleSheet[isMatsuyama ? "下帯内容B" : "下帯内容"]}>
-        <NexPreStationLine
-          preStation={preStation}
-          nexStation={nexStation}
-          isMatsuyama={isMatsuyama}
-        />
+        <NextPreStationLine {...{ nexStation, preStation, isMatsuyama }} />
       </View>
     </TouchableOpacity>
   );
@@ -213,82 +210,6 @@ const LottieDelayView = ({
     />
   );
 };
-const NexPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
-  return (
-    <View style={styleSheet.下枠フレーム}>
-      <View style={styleSheet.下枠フレーム}>
-        {preStation ? (
-          <>
-            {!isMatsuyama && <Text style={styleSheet.下枠左右マーク}>◀</Text>}
-            {preStation.StationNumber ? (
-              <View
-                style={
-                  isMatsuyama
-                    ? styleSheet.下枠駅ナンバーB
-                    : styleSheet.下枠駅ナンバー
-                }
-              >
-                <View style={{ flex: 1 }} />
-                <Text
-                  style={{
-                    fontSize: parseInt("10%"),
-                    color: isMatsuyama ? "black" : "white",
-                  }}
-                >
-                  {preStation.StationNumber}
-                </Text>
-                <View style={{ flex: 1 }} />
-              </View>
-            ) : (
-              <></>
-            )}
-            <StationName
-              stringData={preStation}
-              ss={{ flex: 1, alignItems: "flex-start" }}
-            />
-          </>
-        ) : (
-          <></>
-        )}
-      </View>
-      <View style={styleSheet.下枠フレーム}>
-        {nexStation ? (
-          <>
-            <StationName
-              stringData={nexStation}
-              ss={{ flex: 1, alignItems: "flex-end" }}
-            />
-            {nexStation.StationNumber ? (
-              <View
-                style={
-                  isMatsuyama
-                    ? styleSheet.下枠駅ナンバーB
-                    : styleSheet.下枠駅ナンバー
-                }
-              >
-                <View style={{ flex: 1 }} />
-                <Text
-                  style={{
-                    fontSize: parseInt("10%"),
-                    color: isMatsuyama ? "black" : "white",
-                  }}
-                >
-                  {nexStation.StationNumber}
-                </Text>
-                <View style={{ flex: 1 }} />
-              </View>
-            ) : (
-              <></>
-            )}
-            {!isMatsuyama && <Text style={styleSheet.下枠左右マーク}>▶</Text>}
-          </>
-        ) : (
-          <></>
-        )}
-      </View>
-    </View>
-  );
-};
 
 const styleSheet = {
   外枠: {
@@ -338,38 +259,4 @@ const styleSheet = {
     alignItems: "center",
     flexDirection: "column",
   },
-  下枠フレーム: {
-    flex: 1,
-    flexDirection: "row",
-    alignContent: "center",
-    alignItems: "center",
-  },
-  下枠左右マーク: {
-    fontWeight: "bold",
-    fontSize: parseInt("20%"),
-    color: "white",
-    paddingHorizontal: 10,
-    textAlignVertical: "center",
-  },
-  下枠駅ナンバー: {
-    alignContent: "center",
-    alignItems: "center",
-    width: wp("8%"),
-    height: wp("8%"),
-    margin: wp("1%"),
-    borderColor: "white",
-    borderWidth: parseInt("2%"),
-    borderRadius: parseInt("100%"),
-  },
-  下枠駅ナンバーB: {
-    alignContent: "center",
-    alignItems: "center",
-    width: wp("7%"),
-    height: wp("7%"),
-    margin: wp("2%"),
-    borderColor: "black",
-    backgroundColor: "white",
-    borderWidth: parseInt("2%"),
-    borderRadius: parseInt("100%"),
-  },
 };