Merge commit 'd15d4b39107634db525a93cded1585ecd24e0d1d' into develop

app.json

@@ -300,7 +300,7 @@
             }
           },
           {
-            "name": "s7200",
+            "name": "7200",
             "ios": "./assets/icons/s7200.png",
             "android": {
               "foregroundImage": "./assets/icons/s7200.png",

components/FavoriteList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { FC, useEffect } from "react";
 import { View, Text, ScrollView } from "react-native";
 
 import Icon from "react-native-vector-icons/Entypo";
@@ -8,7 +8,7 @@ import { useNavigation } from "@react-navigation/native";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { FavoriteListItem } from "./atom/FavoriteListItem";
 import { BigButton } from "./atom/BigButton";
-export default function FavoriteList() {
+export const FavoriteList: FC = () => {
   const { favoriteStation } = useFavoriteStation();
   const { webview } = useCurrentTrain();
   const { navigate, addListener, goBack, canGoBack } = useNavigation();
@@ -92,4 +92,4 @@ export default function FavoriteList() {
       <BigButton onPress={() => goBack()} string="閉じる" />
     </View>
   );
-}
+};

components/Settings/FavoriteSettings.js

@@ -4,51 +4,17 @@ import { useNavigation } from "@react-navigation/native";
 import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
 import { CheckBox } from "react-native-elements";
 import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
+import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 
 export const FavoriteSettings = () => {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   const { goBack } = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+      <SheetHeaderItem
-        <View style={{ flex: 1 }}>
+        title="お気に入り設定"
-          <TouchableOpacity
+        LeftItem={{ title: "＜ 設定", onPress: goBack }}
-            onPress={goBack}
+      />
-            style={{
-              flexDirection: "column",
-              flex: 1,
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Text
-              style={{
-                fontSize: 20,
-                fontWeight: "bold",
-                textAlign: "left",
-                textAlignVertical: "center",
-                color: "white",
-                padding: 10,
-              }}
-            >
-              ＜ 設定
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-        </View>
-
-        <Text
-          style={{
-            fontSize: 20,
-            fontWeight: "bold",
-            textAlign: "center",
-            color: "white",
-            padding: 10,
-          }}
-        >
-          お気に入り設定
-        </Text>
-        <View style={{ flex: 1 }}></View>
-      </View>
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         {favoriteStation.map((currentStation, index, array) => (
           <FavoriteSettingsItem

components/Settings/LauncherIconSettings.js

@@ -14,6 +14,7 @@ import { AS } from "../../storageControl";
 import icons from "../../assets/icons/icons";
 import { setAlternateAppIcon, getAppIconName } from "expo-alternate-app-icons";
 import { widthPercentageToDP } from "react-native-responsive-screen";
+import { SheetHeaderItem } from "../atom/SheetHeaderItem";
 
 export const LauncherIconSettings = ({ navigate }) => {
   const { goBack } = useNavigation();
@@ -21,45 +22,7 @@ export const LauncherIconSettings = ({ navigate }) => {
   const [currentIcon] = useState(getAppIconName());
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+      <SheetHeaderItem title="アイコン設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={goBack}
-            style={{
-              flexDirection: "column",
-              flex: 1,
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Text
-              style={{
-                fontSize: 20,
-                fontWeight: "bold",
-                textAlign: "left",
-                textAlignVertical: "center",
-                color: "white",
-                padding: 10,
-              }}
-            >
-              ＜ 設定
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-        </View>
-
-        <Text
-          style={{
-            fontSize: 20,
-            fontWeight: "bold",
-            textAlign: "center",
-            color: "white",
-            padding: 10,
-          }}
-        >
-          アイコン設定
-        </Text>
-        <View style={{ flex: 1 }}></View>
-      </View>
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         {currentIcon ? (
           <>

components/Settings/LayoutSettings.js

@@ -4,6 +4,7 @@ import { useNavigation } from "@react-navigation/native";
 import { SwitchArea } from "../atom/SwitchArea";
 import { CheckBox } from "react-native-elements";
 import { TripleSwitchArea } from "../atom/TripleSwitchArea";
+import { SheetHeaderItem } from "../atom/SheetHeaderItem";
 
 export const LayoutSettings = ({
   navigate,
@@ -25,45 +26,7 @@ export const LayoutSettings = ({
   const { goBack } = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+      <SheetHeaderItem title="レイアウト設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={goBack}
-            style={{
-              flexDirection: "column",
-              flex: 1,
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Text
-              style={{
-                fontSize: 20,
-                fontWeight: "bold",
-                textAlign: "left",
-                textAlignVertical: "center",
-                color: "white",
-                padding: 10,
-              }}
-            >
-              ＜ 設定
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-        </View>
-
-        <Text
-          style={{
-            fontSize: 20,
-            fontWeight: "bold",
-            textAlign: "center",
-            color: "white",
-            padding: 10,
-          }}
-        >
-          レイアウト設定
-        </Text>
-        <View style={{ flex: 1 }}></View>
-      </View>
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         <View style={{ flex: 1 }}>
           <SwitchArea

components/Settings/NotificationSettings.js

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
-import * as Clipboard from 'expo-clipboard';
+import * as Clipboard from "expo-clipboard";
 
 import { CheckBox } from "react-native-elements";
 import { AS } from "../../storageControl";
 import { useNotification } from "../../stateBox/useNotifications";
 import { useNavigation } from "@react-navigation/native";
+import { SheetHeaderItem } from "../atom/SheetHeaderItem";
 
 export const NotificationSettings = () => {
   const { expoPushToken } = useNotification();
@@ -19,48 +20,7 @@ export const NotificationSettings = () => {
     AS.getItem("strangeTrain").then(setStrangeTrain);
   }, []);
 
-  return (
+  const setRegister = () => {
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={goBack}
-            style={{
-              flexDirection: "column",
-              flex: 1,
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Text
-              style={{
-                fontSize: 20,
-                fontWeight: "bold",
-                textAlign: "left",
-                textAlignVertical: "center",
-                color: "white",
-                padding: 10,
-              }}
-            >
-              ＜ 設定
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-        </View>
-
-        <Text
-          style={{
-            fontSize: 20,
-            fontWeight: "bold",
-            textAlign: "center",
-            color: "white",
-            padding: 10,
-          }}
-        >
-          通知設定(β)
-        </Text>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={() => {
     fetch(
       "https://n8n.haruk.in/webhook/jr-shikoku-notification-configurations",
       {
@@ -82,29 +42,14 @@ export const NotificationSettings = () => {
         AS.setItem("strangeTrain", strangeTrain.toString()),
       ]).then(() => alert("通知の設定を保存、登録しました"));
     });
-            }}
+  };
-            style={{
+  return (
-              flexDirection: "column",
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-              flex: 1,
+      <SheetHeaderItem
-            }}
+        title="通知設定(β)"
-          >
+        LeftItem={{ title: "＜ 設定", onPress: goBack }}
-            <View style={{ flex: 1 }} />
+        RightItem={{ title: "登録実行", onPress: setRegister }}
-            <Text
+      />
-              style={{
-                fontSize: 20,
-                fontWeight: "bold",
-                textAlign: "right",
-                textAlignVertical: "center",
-                color: "pink",
-                padding: 10,
-              }}
-            >
-              登録実行
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-        </View>
-      </View>
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         <SimpleSwitch
           bool={traInfoEX}

components/Settings/SettingTopPage.js

@@ -15,6 +15,7 @@ import { ListItem } from "@rneui/themed";
 import TouchableScale from "react-native-touchable-scale";
 import { SwitchArea } from "../atom/SwitchArea";
 import { useNotification } from "../../stateBox/useNotifications";
+import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 
 const versionCode = "6.0";
 
@@ -29,45 +30,10 @@ export const SettingTopPage = ({
   const navigation = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+      <SheetHeaderItem title="アプリの設定画面" LeftItem={{
-        <View style={{ flex: 1 }}>
+        title: "閉じる",
-          <TouchableOpacity
+        onPress: () => navigation.goBack(),
-            onPress={() => navigation.goBack()}
+      }} />
-            style={{
-              flexDirection: "column",
-              flex: 1,
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Text
-              style={{
-                fontSize: 20,
-                fontWeight: "bold",
-                textAlign: "left",
-                textAlignVertical: "center",
-                color: "white",
-                padding: 10,
-              }}
-            >
-              閉じる
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-        </View>
-
-        <Text
-          style={{
-            fontSize: 20,
-            fontWeight: "bold",
-            textAlign: "center",
-            color: "white",
-            padding: 10,
-          }}
-        >
-          アプリの設定画面
-        </Text>
-        <View style={{ flex: 1 }}></View>
-      </View>
       <ScrollView style={{ flex: 1, backgroundColor: "#f8f8fc" }}>
         <View style={{ height: 300, padding: 10 }}>
           <View style={{ flex: 1 }} />

components/Settings/WidgetSettings.js

@@ -8,6 +8,7 @@ import { getInfoString } from "../AndroidWidget/InfoWidget";
 import { AS } from "../../storageControl";
 import { nameToWidget } from "../AndroidWidget/widget-task-handler";
 import { ListItem } from "native-base";
+import { SheetHeaderItem } from "../atom/SheetHeaderItem";
 
 export const WidgetSettings = ({ navigate }) => {
   const { JR_shikoku_train_info, Info_Widget } = nameToWidget;
@@ -41,45 +42,10 @@ export const WidgetSettings = ({ navigate }) => {
   }, []);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+      <SheetHeaderItem
-        <View style={{ flex: 1 }}>
+        title="ウィジェット設定"
-          <TouchableOpacity
+        LeftItem={{ title: "＜ 設定", onPress: goBack }}
-            onPress={goBack}
+      />
-            style={{
-              flexDirection: "column",
-              flex: 1,
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Text
-              style={{
-                fontSize: 20,
-                fontWeight: "bold",
-                textAlign: "left",
-                textAlignVertical: "center",
-                color: "white",
-                padding: 10,
-              }}
-            >
-              ＜ 設定
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-        </View>
-
-        <Text
-          style={{
-            fontSize: 20,
-            fontWeight: "bold",
-            textAlign: "center",
-            color: "white",
-            padding: 10,
-          }}
-        >
-          ウィジェット設定
-        </Text>
-        <View style={{ flex: 1 }}></View>
-      </View>
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         <View style={{ alignContent: "center", alignItems: "center" }}>
           <View

components/atom/FavoriteListItem.tsx

@@ -1,8 +1,17 @@
-import React from "react";
+import React, { FC } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import lineColorList from "../../assets/originData/lineColorList";
 
-export const FavoriteListItem = ({ currentStation, children, onPress }) => {
+
+type Props = {
+  currentStation: {
+    Station_JP: string;
+    StationNumber: string;
+  }[];
+  onPress: () => void;
+  children: React.ReactNode;
+}
+export const FavoriteListItem:FC<Props> = ({ currentStation, children, onPress }) => {
   const lineIDs = [];
   const EachIDs = [];
   currentStation.forEach((d) => {

components/atom/SheetHeaderItem.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from "react";
+import { View, Text, TouchableOpacity, TextStyle } from "react-native";
+
+type Props = {
+  LeftItem?: SideItemProps;
+  RightItem?: SideItemProps;
+  title: string;
+};
+
+const textStyle: TextStyle = {
+  fontSize: 20,
+  fontWeight: "bold",
+  color: "white",
+  padding: 10,
+  textAlignVertical: "center",
+};
+export const SheetHeaderItem: FC<Props> = (props) => {
+  const { LeftItem, RightItem, title } = props;
+  return (
+    <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+      <View style={{ flex: 1 }}>
+        {LeftItem ? <SideItem {...LeftItem} position="left" /> : <></>}
+      </View>
+      <Text style={{ textAlign: "center",...textStyle }}>{title}</Text>
+      <View style={{ flex: 1 }}>
+        {RightItem ? <SideItem {...RightItem} position="right" /> : <></>}
+      </View>
+    </View>
+  );
+};
+
+type SideItemProps = {
+  onPress: () => void;
+  title: string;
+  position: "left" | "right";
+};
+const SideItem: FC<SideItemProps> = ({ onPress, title, position }) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={{ flexDirection: "column", flex: 1 }}
+    >
+      <View style={{ flex: 1 }} />
+      <Text style={{ textAlign: position, ...textStyle }}>{title}</Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};