StationDeteilViewの項目分離

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 {
+  const { currentStation, navigate, onExit, goTo, useShow } = props.payload;
-    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
+            <View style={{ margin: 10, marginHorizontal: wp("10%") }}>
-              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={navigate}
-                  navigate("howto", {
+                goTo={goTo}
-                    info:
+                useShow={useShow}
-                      currentStation[0].JrHpUrl.replace("/index.html", "/") +
+                address={currentStation[0].JrHpUrl}
-                      "/kounai_map.html",
+                onExit={onExit}
-                    goTo,
-                    useShow,
-                  });
-                  onExit();
-                }}
-                oLP={() => {
-                  Linking.openURL(
-                    currentStation[0].JrHpUrl.replace("/index.html", "/") +
-                      "/kounai_map.html"
-                  );
-                }}
-                uri={currentStation[0].JrHpUrl.replace("/index.html", "/")}
               />
             )}
           {currentStation && (
             <View style={{ flexDirection: "row" }}>
               {!currentStation[0].JrHpUrl || (
-                <TicketBox
+                <WebSiteButton
-                  backgroundColor={"#AD7FA8"}
+                  navigate={navigate}
-                  icon={<Foundation name="web" color="white" size={50} />}
+                  info={currentStation[0].JrHpUrl}
-                  flex={1}
+                  goTo={goTo}
-                  onPressButton={() => {
+                  useShow={useShow}
-                    navigate("howto", {
+                  onExit={onExit}
-                      info: currentStation[0].JrHpUrl,
+                />
-
-                      goTo,
-                      useShow,
-                    });
-                    onExit();
-                  }}
-                  onLongPressButton={() =>
-                    Linking.openURL(currentStation[0].JrHpUrl)
-                  }
-                >
-                  web
-                </TicketBox>
               )}
               {!currentStation[0].StationTimeTable || (
-                <TicketBox
+                <StationTimeTableButton
-                  backgroundColor={"#8F5902"}
+                  info={info}
-                  icon={<FontAwesome name="table" color="white" size={50} />}
+                  address={currentStation[0].StationTimeTable}
-                  flex={1}
+                  usePDFView={usePDFView}
-                  onPressButton={() => {
+                  navigate={navigate}
-                    usePDFView == "true"
+                  onExit={onExit}
-                      ? Linking.openURL(currentStation[0].StationTimeTable)
+                  goTo={goTo}
-                      : navigate("howto", {
+                  useShow={useShow}
-                          info,
+                />
-
-                          goTo,
-                          useShow,
-                        });
-                    onExit();
-                  }}
-                  onLongPressButton={() =>
-                    Linking.openURL(currentStation[0].StationTimeTable)
-                  }
-                >
-                  時刻表
-                </TicketBox>
               )}
               {!currentStation[0].StationMap || (
-                <TicketBox
+                <StationMapButton stationMap={currentStation[0].StationMap} />
-                  backgroundColor={"#888A85"}
-                  icon={<Ionicons name="map" color="white" size={50} />}
-                  flex={1}
-                  onPressButton={() =>
-                    Linking.openURL(currentStation[0].StationMap)
-                  }
-                >
-                  Map
-                </TicketBox>
               )}
               {!trainBus || (
-                <TicketBox
+                <TrainBusButton
-                  backgroundColor={"#CE5C00"}
+                  address={trainBus.address}
-                  icon={<Ionicons name="bus" color="white" size={50} />}
+                  press={() => {
-                  flex={1}
-                  onPressButton={() => {
                     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 = () => {

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};