From 1a2d678ef3011f913df66f364b00f95140213ae6 Mon Sep 17 00:00:00 2001
From: harukin-expo-dev-env <harukin@haruk.in>
Date: Thu, 3 Apr 2025 09:15:42 +0000
Subject: [PATCH] =?UTF-8?q?StationDeteilView=E3=81=AE=E9=A0=85=E7=9B=AE?=
 =?UTF-8?q?=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../StationDeteilView.js                      | 188 ++++--------------
 .../StationInsideMapButton.tsx                |  43 ++++
 .../StationDeteilView/StationMapButton.tsx    |  16 ++
 .../StationTimeTableButton.tsx                |  32 +++
 .../StationDeteilView/TrainBusButton.tsx      |  21 ++
 .../StationDeteilView/WebSiteButton.tsx       |  28 +++
 6 files changed, 175 insertions(+), 153 deletions(-)
 create mode 100644 components/ActionSheetComponents/StationDeteilView/StationInsideMapButton.tsx
 create mode 100644 components/ActionSheetComponents/StationDeteilView/StationMapButton.tsx
 create mode 100644 components/ActionSheetComponents/StationDeteilView/StationTimeTableButton.tsx
 create mode 100644 components/ActionSheetComponents/StationDeteilView/TrainBusButton.tsx
 create mode 100644 components/ActionSheetComponents/StationDeteilView/WebSiteButton.tsx

diff --git a/components/ActionSheetComponents/StationDeteilView.js b/components/ActionSheetComponents/StationDeteilView.js
index baa6610..fea49f6 100644
--- a/components/ActionSheetComponents/StationDeteilView.js
+++ b/components/ActionSheetComponents/StationDeteilView.js
@@ -18,16 +18,15 @@ import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import { getPDFViewURL } from "../../lib/getPdfViewURL";
 import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
 import { AS } from "../../storageControl";
+import { StationMapButton } from "./StationDeteilView/StationMapButton";
+import { TrainBusButton } from "./StationDeteilView/TrainBusButton";
+import { 駅構内図 } from "./StationDeteilView/StationInsideMapButton";
+import { WebSiteButton } from "./StationDeteilView/WebSiteButton";
+import { StationTimeTableButton } from "./StationDeteilView/StationTimeTableButton";
 
 export const StationDeteilView = (props) => {
   if (!props.payload) return <></>;
-  const {
-    currentStation,
-    navigate,
-    onExit,
-    goTo,
-    useShow,
-  } = props.payload;
+  const { currentStation, navigate, onExit, goTo, useShow } = props.payload;
   const { busAndTrainData } = useBusAndTrainData();
   const [trainBus, setTrainBus] = useState();
 
@@ -90,12 +89,7 @@ export const StationDeteilView = (props) => {
         </View>
         <View>
           {currentStation && (
-            <View
-              style={{
-                margin: 10,
-                marginHorizontal: wp("10%"),
-              }}
-            >
+            <View style={{ margin: 10, marginHorizontal: wp("10%") }}>
               <Sign
                 currentStation={currentStation}
                 oP={() => {
@@ -115,102 +109,51 @@ export const StationDeteilView = (props) => {
           {currentStation &&
             currentStation[0].JrHpUrl &&
             currentStation[0].StationNumber != "M12" && (
-              <駅構内図 //高松/阿波池田&後免&須崎kounai.png児島例外/
-                oP={() => {
-                  navigate("howto", {
-                    info:
-                      currentStation[0].JrHpUrl.replace("/index.html", "/") +
-                      "/kounai_map.html",
-                    goTo,
-                    useShow,
-                  });
-                  onExit();
-                }}
-                oLP={() => {
-                  Linking.openURL(
-                    currentStation[0].JrHpUrl.replace("/index.html", "/") +
-                      "/kounai_map.html"
-                  );
-                }}
-                uri={currentStation[0].JrHpUrl.replace("/index.html", "/")}
+              <駅構内図 //児島例外/
+                navigate={navigate}
+                goTo={goTo}
+                useShow={useShow}
+                address={currentStation[0].JrHpUrl}
+                onExit={onExit}
               />
             )}
           {currentStation && (
             <View style={{ flexDirection: "row" }}>
               {!currentStation[0].JrHpUrl || (
-                <TicketBox
-                  backgroundColor={"#AD7FA8"}
-                  icon={<Foundation name="web" color="white" size={50} />}
-                  flex={1}
-                  onPressButton={() => {
-                    navigate("howto", {
-                      info: currentStation[0].JrHpUrl,
-
-                      goTo,
-                      useShow,
-                    });
-                    onExit();
-                  }}
-                  onLongPressButton={() =>
-                    Linking.openURL(currentStation[0].JrHpUrl)
-                  }
-                >
-                  web
-                </TicketBox>
+                <WebSiteButton
+                  navigate={navigate}
+                  info={currentStation[0].JrHpUrl}
+                  goTo={goTo}
+                  useShow={useShow}
+                  onExit={onExit}
+                />
               )}
               {!currentStation[0].StationTimeTable || (
-                <TicketBox
-                  backgroundColor={"#8F5902"}
-                  icon={<FontAwesome name="table" color="white" size={50} />}
-                  flex={1}
-                  onPressButton={() => {
-                    usePDFView == "true"
-                      ? Linking.openURL(currentStation[0].StationTimeTable)
-                      : navigate("howto", {
-                          info,
-
-                          goTo,
-                          useShow,
-                        });
-                    onExit();
-                  }}
-                  onLongPressButton={() =>
-                    Linking.openURL(currentStation[0].StationTimeTable)
-                  }
-                >
-                  時刻表
-                </TicketBox>
+                <StationTimeTableButton
+                  info={info}
+                  address={currentStation[0].StationTimeTable}
+                  usePDFView={usePDFView}
+                  navigate={navigate}
+                  onExit={onExit}
+                  goTo={goTo}
+                  useShow={useShow}
+                />
               )}
               {!currentStation[0].StationMap || (
-                <TicketBox
-                  backgroundColor={"#888A85"}
-                  icon={<Ionicons name="map" color="white" size={50} />}
-                  flex={1}
-                  onPressButton={() =>
-                    Linking.openURL(currentStation[0].StationMap)
-                  }
-                >
-                  Map
-                </TicketBox>
+                <StationMapButton stationMap={currentStation[0].StationMap} />
               )}
               {!trainBus || (
-                <TicketBox
-                  backgroundColor={"#CE5C00"}
-                  icon={<Ionicons name="bus" color="white" size={50} />}
-                  flex={1}
-                  onPressButton={() => {
+                <TrainBusButton
+                  address={trainBus.address}
+                  press={() => {
                     navigate("howto", {
                       info: trainBus.address,
-
                       goTo,
                       useShow,
                     });
                     onExit();
                   }}
-                  onLongPressButton={() => Linking.openURL(trainBus.address)}
-                >
-                  並行バス
-                </TicketBox>
+                />
               )}
             </View>
           )}
@@ -220,67 +163,6 @@ export const StationDeteilView = (props) => {
   );
 };
 
-
-const 駅構内図 = (props) => {
-  const [open, setOpen] = useState(false);
-  return (
-    <>
-      <TouchableOpacity
-        style={{
-          height: 50,
-          backgroundColor: "#888A85",
-          flexDirection: "column",
-          alignContent: "center",
-          alignItems: "center",
-          margin: 2,
-        }}
-        onPress={props.oP}
-        onLongPress={props.oLP}
-        //onPress={() => setOpen(!open)}
-      >
-        <View style={{ flex: 1 }} />
-        <Text
-          style={{
-            color: "white",
-            textAlign: "center",
-            textAlignVertical: "center",
-            flex: 1,
-          }}
-        >
-          {open ? "駅構内図を非表示" : "駅構内図を表示"}
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
-      <View>
-        {open && (
-          <>
-            <AutoHeightImage
-              source={{ uri: props.uri + "images/kounai.gif" }}
-              resizeMode="contain"
-              width={wp("100%")}
-            />
-            <AutoHeightImage
-              source={{ uri: props.uri + "images/kounai.png" }}
-              resizeMode="contain"
-              width={wp("100%")}
-            />
-            <AutoHeightImage
-              source={{ uri: props.uri + "images/kounai_1f.gif" }}
-              resizeMode="contain"
-              width={wp("100%")}
-            />
-            <AutoHeightImage
-              source={{ uri: props.uri + "images/kounai_2f.png" }}
-              resizeMode="contain"
-              width={wp("100%")}
-            />
-          </>
-        )}
-      </View>
-    </>
-  );
-};
-
 const Handler = () => {
   useEffect(() => {
     const backAction = () => {
@@ -294,4 +176,4 @@ const Handler = () => {
     return () => backHandler.remove();
   }, []);
   return <></>;
-};
\ No newline at end of file
+};
diff --git a/components/ActionSheetComponents/StationDeteilView/StationInsideMapButton.tsx b/components/ActionSheetComponents/StationDeteilView/StationInsideMapButton.tsx
new file mode 100644
index 0000000..19cc47a
--- /dev/null
+++ b/components/ActionSheetComponents/StationDeteilView/StationInsideMapButton.tsx
@@ -0,0 +1,43 @@
+import { FC } from "react";
+import { TouchableOpacity, View, Text, Linking } from "react-native";
+type Props = {
+    navigate: (screen: string, params: { info: string; goTo: string; useShow: boolean }) => void;
+    address: string;
+    goTo: string;
+    useShow: boolean;
+    onExit: () => void;
+};
+export const 駅構内図:FC<Props> = (props) => {
+  const { navigate, address, goTo, useShow, onExit } = props;
+  const info = address.replace("/index.html", "/") + "/kounai_map.html";
+  return (
+    <TouchableOpacity
+      style={{
+        height: 50,
+        backgroundColor: "#888A85",
+        flexDirection: "column",
+        alignContent: "center",
+        alignItems: "center",
+        margin: 2,
+      }}
+      onPress={() => {
+        navigate("howto", { info, goTo, useShow });
+        onExit();
+      }}
+      onLongPress={() => Linking.openURL(info)}
+    >
+      <View style={{ flex: 1 }} />
+      <Text
+        style={{
+          color: "white",
+          textAlign: "center",
+          textAlignVertical: "center",
+          flex: 1,
+        }}
+      >
+        駅構内図を表示
+      </Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};
diff --git a/components/ActionSheetComponents/StationDeteilView/StationMapButton.tsx b/components/ActionSheetComponents/StationDeteilView/StationMapButton.tsx
new file mode 100644
index 0000000..09c6c33
--- /dev/null
+++ b/components/ActionSheetComponents/StationDeteilView/StationMapButton.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Linking } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { TicketBox } from "@/components/atom/TicketBox";
+export const StationMapButton = ({stationMap}) => {
+  return (
+    <TicketBox
+      backgroundColor={"#888A85"}
+      icon={<Ionicons name="map" color="white" size={50} />}
+      flex={1}
+      onPressButton={() => Linking.openURL(stationMap)}
+    >
+      Map
+    </TicketBox>
+  );
+};
diff --git a/components/ActionSheetComponents/StationDeteilView/StationTimeTableButton.tsx b/components/ActionSheetComponents/StationDeteilView/StationTimeTableButton.tsx
new file mode 100644
index 0000000..6eae7f3
--- /dev/null
+++ b/components/ActionSheetComponents/StationDeteilView/StationTimeTableButton.tsx
@@ -0,0 +1,32 @@
+import React, { FC } from "react";
+import { Linking } from "react-native";
+import { FontAwesome } from "@expo/vector-icons";
+import { TicketBox } from "@/components/atom/TicketBox";
+type Props = {
+  info: string;
+  address: string;
+  usePDFView: string;
+  navigate: (screen: string, params?: object) => void;
+  onExit: () => void;
+  goTo: string;
+  useShow: string;
+};
+export const StationTimeTableButton: FC<Props> = (props) => {
+  const { info, address, usePDFView, navigate, onExit, goTo, useShow } = props;
+  return (
+    <TicketBox
+      backgroundColor={"#8F5902"}
+      icon={<FontAwesome name="table" color="white" size={50} />}
+      flex={1}
+      onPressButton={() => {
+        usePDFView == "true"
+          ? Linking.openURL(address)
+          : navigate("howto", { info, goTo, useShow });
+        onExit();
+      }}
+      onLongPressButton={() => Linking.openURL(address)}
+    >
+      時刻表
+    </TicketBox>
+  );
+};
diff --git a/components/ActionSheetComponents/StationDeteilView/TrainBusButton.tsx b/components/ActionSheetComponents/StationDeteilView/TrainBusButton.tsx
new file mode 100644
index 0000000..eb1851d
--- /dev/null
+++ b/components/ActionSheetComponents/StationDeteilView/TrainBusButton.tsx
@@ -0,0 +1,21 @@
+import React, { FC } from "react";
+import { Linking } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { TicketBox } from "@/components/atom/TicketBox";
+type Props = {
+  address: string;
+  press: () => void;
+};
+export const TrainBusButton: FC<Props> = ({ address, press }) => {
+  return (
+    <TicketBox
+      backgroundColor={"#CE5C00"}
+      icon={<Ionicons name="bus" color="white" size={50} />}
+      flex={1}
+      onPressButton={press}
+      onLongPressButton={() => Linking.openURL(address)}
+    >
+      並行バス
+    </TicketBox>
+  );
+};
diff --git a/components/ActionSheetComponents/StationDeteilView/WebSiteButton.tsx b/components/ActionSheetComponents/StationDeteilView/WebSiteButton.tsx
new file mode 100644
index 0000000..73b715c
--- /dev/null
+++ b/components/ActionSheetComponents/StationDeteilView/WebSiteButton.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+import { Linking } from "react-native";
+import { Foundation } from "@expo/vector-icons";
+import { TicketBox } from "@/components/atom/TicketBox";
+type Props = {
+  navigate: (screen: string, params: any) => void;
+  info: string;
+  goTo: string;
+  useShow: string;
+  onExit: () => void;
+};
+export const WebSiteButton: FC<Props> = (Props) => {
+  const { navigate, info, goTo, useShow, onExit } = Props;
+  return (
+    <TicketBox
+      backgroundColor={"#AD7FA8"}
+      icon={<Foundation name="web" color="white" size={50} />}
+      flex={1}
+      onPressButton={() => {
+        navigate("howto", { info, goTo, useShow });
+        onExit();
+      }}
+      onLongPressButton={() => Linking.openURL(info)}
+    >
+      web
+    </TicketBox>
+  );
+};