Merge commit 'bb0ae86f67c2dccf8df6e96f4fc825569fc45200' into develop

components/ActionSheetComponents/SocialMenu.tsx

@@ -0,0 +1,146 @@
+import React, { useRef } from "react";
+import { View, Platform, Text } from "react-native";
+import ActionSheet ,{ ScrollView } from "react-native-actions-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ListItem } from "@rneui/themed";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Linking } from "react-native";
+import TouchableScale from "react-native-touchable-scale";
+export const Social = () => {
+  const actionSheetRef = useRef(null);
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ActionSheet
+      gestureEnabled
+      CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+      isModal={Platform.OS == "ios"}
+      containerStyle={
+        Platform.OS == "android"
+          ? {
+              paddingBottom: insets.bottom,
+            }
+          : {}
+      }
+      useBottomSafeAreaPadding={Platform.OS == "android"}
+    >
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderTopRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+          height: "100%",
+        }}
+      >
+        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+
+          <View
+            style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+          >
+            <MaterialCommunityIcons
+              name="web"
+              style={{ padding: 5 }}
+              color="white"
+              size={30}
+            />
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+              JR四国公式SNS一族
+            </Text>
+          </View>
+          <ScrollView
+            style={{
+              padding: 10,
+              backgroundColor: "white",
+              borderBottomLeftRadius: 10,
+              borderBottomRightRadius: 10,
+              flex:1
+            }}
+          >
+            {[
+              {
+                url: "https://twitter.com/jr_shikoku_info",
+                name: "ＪＲ四国列車運行情報",
+              },
+
+              {
+                url: "https://twitter.com/JRshikoku_eigyo",
+                name: "JR四国営業部【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_tokyo",
+                name: "JR四国 東京営業情報【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_osaka",
+                name: "JR四国 大阪営業部【公式】",
+              },
+              {
+                url: "https://twitter.com/jrs_matsuyama",
+                name: "JR四国 松山駅 【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_kochi",
+                name: "JR四国 高知駅【公式】",
+              },
+              {
+                url: "https://twitter.com/jr_tokust",
+                name: "JR四国 徳島駅【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_uwjm",
+                name: "JR四国 宇和島駅【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_wkama",
+                name: "JR四国 ワープ高松支店【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_wkoch",
+                name: "JR四国 ワープ高知支店【公式】",
+              },
+              {
+                url: "https://twitter.com/Yoakemonogatari",
+                name: "志国土佐　時代の夜明けのものがたり【公式】",
+              },
+              {
+                url: "https://twitter.com/Smile_Eki_Chan",
+                name: "すまいるえきちゃん♡JR四国【公式】",
+              },
+              {
+                url: "https://twitter.com/sper_ponchan",
+                name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
+              },
+            ].map((d) => (
+              <ListItem
+                bottomDivider
+                onPress={() => Linking.openURL(d.url)}
+                key={d.url}
+                friction={90} //
+                tension={100} // These props are passed to the parent component (here TouchableScale)
+                activeScale={0.95} //
+                Component={TouchableScale}
+              >
+                <ListItem.Content>
+                  <ListItem.Title>{d.name}</ListItem.Title>
+                </ListItem.Content>
+                <ListItem.Chevron />
+              </ListItem>
+            ))}
+          </ScrollView>
+      </View>
+    </ActionSheet>
+  );
+};

components/ActionSheetComponents/SpecialTrainInfo.tsx

@@ -0,0 +1,51 @@
+import React, { useRef } from "react";
+import { View, Platform } from "react-native";
+import ActionSheet from "react-native-actions-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { SpecialTrainInfoBox } from "../Menu/SpecialTrainInfoBox";
+export const SpecialTrainInfo = ({ payload }) => {
+  const { navigate } = payload;
+  const actionSheetRef = useRef(null);
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ActionSheet
+      gestureEnabled
+      CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+      isModal={Platform.OS == "ios"}
+      containerStyle={
+        Platform.OS == "android"
+          ? {
+              paddingBottom: insets.bottom,
+            }
+          : {}
+      }
+      useBottomSafeAreaPadding={Platform.OS == "android"}
+    >
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderTopRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+        }}
+      >
+        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+        <SpecialTrainInfoBox navigate={navigate} />
+      </View>
+    </ActionSheet>
+  );
+};

components/ActionSheetComponents/sheets.ts

@@ -4,11 +4,15 @@ import { JRSTraInfo } from "./JRSTraInfo";
 import { StationDeteilView } from "./StationDeteilView";
 import { TrainMenuLineSelector } from "./TrainMenuLineSelector";
 import { TrainIconUpdate } from "./TrainIconUpdate";
+import { SpecialTrainInfo } from "./SpecialTrainInfo";
+import { Social } from "./SocialMenu";
 
 registerSheet("EachTrainInfo", EachTrainInfo);
 registerSheet("JRSTraInfo", JRSTraInfo);
 registerSheet("StationDetailView", StationDeteilView);
 registerSheet("TrainMenuLineSelector", TrainMenuLineSelector);
 registerSheet("TrainIconUpdate", TrainIconUpdate);
+registerSheet("SpecialTrainInfo", SpecialTrainInfo);
+registerSheet("Social", Social);
 
 export {};

components/Menu/FixedContentBottom.js

@@ -6,10 +6,12 @@ import {
   MaterialCommunityIcons,
 } from "@expo/vector-icons";
 import { ListItem } from "@rneui/themed";
-import TouchableScale from 'react-native-touchable-scale';
+import TouchableScale from "react-native-touchable-scale";
 import Icon from "react-native-vector-icons/Entypo";
 import { TextBox } from "../atom/TextBox";
 import { TicketBox } from "../atom/TicketBox";
+import { SpecialTrainInfoBox } from "./SpecialTrainInfoBox";
+import { SheetManager } from "react-native-actions-sheet";
 
 export const FixedContentBottom = (props) => {
   return (
@@ -54,7 +56,9 @@ export const FixedContentBottom = (props) => {
         backgroundColor="red"
         flex={1}
         onPressButton={() =>
-          Linking.openURL("https://xprocess.haruk.in/JR-shikoku-Apps-Common/2025-update-status")
+          Linking.openURL(
+            "https://xprocess.haruk.in/JR-shikoku-Apps-Common/2025-update-status"
+          )
         }
       >
         <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
@@ -82,7 +86,9 @@ export const FixedContentBottom = (props) => {
         backgroundColor="#0099CC"
         flex={1}
         onPressButton={() =>
-          Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")
+          SheetManager.show("SpecialTrainInfo", {
+            payload: { navigate: props.navigate },
+          })
         }
       >
         <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
@@ -179,105 +185,20 @@ export const FixedContentBottom = (props) => {
           <Text style={{ color: "white" }}>(通話料がかかります)</Text>
         </TouchableOpacity>
       </View>
-      <View
+      <TextBox
-        style={{
+        backgroundColor="#0099CC"
-          backgroundColor: "#0099CC",
+        flex={1}
-          borderRadius: 10,
+        onPressButton={() =>
-          margin: 10,
+          SheetManager.show("Social")
-          borderColor: "black",
+        }
-          borderWidth: 2,
-        }}
       >
-        <View
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+          ソーシャルメディア
-        >
+        </Text>
-          <MaterialCommunityIcons
+        <Text style={{ color: "white", fontSize: 18 }}>
-            name="twitter"
+          JR四国のSNS一覧です。
-            style={{ padding: 5 }}
+        </Text>
-            color="white"
+      </TextBox>
-            size={30}
-          />
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            JR四国公式Twitter一族
-          </Text>
-        </View>
-        <View
-          style={{
-            padding: 10,
-            backgroundColor: "white",
-            borderBottomLeftRadius: 10,
-            borderBottomRightRadius: 10,
-          }}
-        >
-          {[
-            {
-              url: "https://twitter.com/jr_shikoku_info",
-              name: "ＪＲ四国列車運行情報",
-            },
-
-            {
-              url: "https://twitter.com/JRshikoku_eigyo",
-              name: "JR四国営業部【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_tokyo",
-              name: "JR四国 東京営業情報【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_osaka",
-              name: "JR四国 大阪営業部【公式】",
-            },
-            {
-              url: "https://twitter.com/jrs_matsuyama",
-              name: "JR四国 松山駅 【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_kochi",
-              name: "JR四国 高知駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jr_tokust",
-              name: "JR四国 徳島駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_uwjm",
-              name: "JR四国 宇和島駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_wkama",
-              name: "JR四国 ワープ高松支店【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_wkoch",
-              name: "JR四国 ワープ高知支店【公式】",
-            },
-            {
-              url: "https://twitter.com/Yoakemonogatari",
-              name: "志国土佐　時代の夜明けのものがたり【公式】",
-            },
-            {
-              url: "https://twitter.com/Smile_Eki_Chan",
-              name: "すまいるえきちゃん♡JR四国【公式】",
-            },
-            {
-              url: "https://twitter.com/sper_ponchan",
-              name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
-            },
-          ].map((d) => (
-            <ListItem bottomDivider onPress={() => Linking.openURL(d.url)}
-             key={d.url}friction={90} //
-             tension={100} // These props are passed to the parent component (here TouchableScale)
-             activeScale={0.95} //
-             Component={TouchableScale} 
-             >
-              <ListItem.Content>
-                <ListItem.Title>{d.name}</ListItem.Title>
-              </ListItem.Content>
-              <ListItem.Chevron />
-            </ListItem>
-          ))}
-        </View>
-      </View>
       <Text style={{ fontWeight: "bold", fontSize: 20 }}>上級者向け機能</Text>
       <TextBox
         backgroundColor="#8c00d6"

components/Menu/SpecialTrainInfoBox.tsx

@@ -0,0 +1,66 @@
+import { FC, useEffect, useLayoutEffect, useState } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { getPDFViewURL } from "@/lib/getPdfViewURL";
+import { ScrollView, SheetManager } from "react-native-actions-sheet";
+
+type props = {
+  navigate: (screen: string, params?: object) => void;
+};
+export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
+  const [specialData, setSpecialData] = useState([]);
+  useLayoutEffect(() => {
+    fetch("https://n8n.haruk.in/webhook/sptrainfo")
+      .then((res) => res.json())
+      .then((data) => setSpecialData(data.data))
+      .catch((err) => console.log(err));
+  }, []);
+  return (
+    <View
+      style={{
+        backgroundColor: "#0099CC",
+      }}
+    >
+      <View style={{ flexDirection: "row", alignItems: "center" }}>
+        <Text
+          style={{
+            fontSize: 30,
+            fontWeight: "bold",
+            color: "white",
+            paddingHorizontal: 10,
+            paddingVertical: 5,
+          }}
+        >
+          臨時列車情報
+        </Text>
+      </View>
+      <ScrollView
+        style={{
+          backgroundColor: "white",
+        }}
+      >
+        {specialData.map((d) => (
+          <TouchableOpacity
+            onPress={() => {
+              navigate("howto", {
+                info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
+                goTo: "menu",
+              });
+              SheetManager.hide("SpecialTrainInfo");
+            }}
+            onLongPress={() => alert(d.description)}
+            key={d.address}
+            style={{
+              padding: 10,
+              borderBottomWidth: 1,
+              borderBottomColor: "#ccc",
+              flexDirection: "row",
+              alignItems: "center",
+            }}
+          >
+            <Text style={{ color: "black", fontSize: 20 }}>{d.text}</Text>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};