設定画面のヘッダーを一斉変更

2025-03-10 17:48:51 +00:00 · 2025-03-10 17:48:51 +00:00 · bc3aca8c41
commit bc3aca8c41
parent 343bf25139
7 changed files with 97 additions and 280 deletions
--- a/components/Settings/FavoriteSettings.js
+++ b/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" }}>
-        <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>
+      <SheetHeaderItem
+        title="お気に入り設定"
+        LeftItem={{ title: "＜ 設定", onPress: goBack }}
+      />
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        {favoriteStation.map((currentStation, index, array) => (
          <FavoriteSettingsItem
--- a/components/Settings/LauncherIconSettings.js
+++ b/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" }}>
-        <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>
+      <SheetHeaderItem title="アイコン設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        {currentIcon ? (
          <>
--- a/components/Settings/LayoutSettings.js
+++ b/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" }}>
-        <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>
+      <SheetHeaderItem title="レイアウト設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        <View style={{ flex: 1 }}>
          <SwitchArea
--- a/components/Settings/NotificationSettings.js
+++ b/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,92 +20,36 @@ export const NotificationSettings = () => {
    AS.getItem("strangeTrain").then(setStrangeTrain);
  }, []);

+  const setRegister = () => {
+    fetch(
+      "https://n8n.haruk.in/webhook/jr-shikoku-notification-configurations",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          token: expoPushToken,
+          traInfoEX,
+          informations,
+          strangeTrain,
+        }),
+      }
+    ).then(() => {
+      Promise.all([
+        AS.setItem("traInfoEX", traInfoEX.toString()),
+        AS.setItem("informations", informations.toString()),
+        AS.setItem("strangeTrain", strangeTrain.toString()),
+      ]).then(() => alert("通知の設定を保存、登録しました"));
+    });
+  };
  return (
    <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",
-                {
-                  method: "POST",
-                  headers: {
-                    "Content-Type": "application/json",
-                  },
-                  body: JSON.stringify({
-                    token: expoPushToken,
-                    traInfoEX,
-                    informations,
-                    strangeTrain,
-                  }),
-                }
-              ).then(() => {
-                Promise.all([
-                  AS.setItem("traInfoEX", traInfoEX.toString()),
-                  AS.setItem("informations", informations.toString()),
-                  AS.setItem("strangeTrain", strangeTrain.toString()),
-                ]).then(() => alert("通知の設定を保存、登録しました"));
-              });
-            }}
-            style={{
-              flexDirection: "column",
-              flex: 1,
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Text
-              style={{
-                fontSize: 20,
-                fontWeight: "bold",
-                textAlign: "right",
-                textAlignVertical: "center",
-                color: "pink",
-                padding: 10,
-              }}
-            >
-              登録実行
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-        </View>
-      </View>
+      <SheetHeaderItem
+        title="通知設定(β)"
+        LeftItem={{ title: "＜ 設定", onPress: goBack }}
+        RightItem={{ title: "登録実行", onPress: setRegister }}
+      />
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        <SimpleSwitch
          bool={traInfoEX}
--- a/components/Settings/SettingTopPage.js
+++ b/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" }}>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            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>
+      <SheetHeaderItem title="アプリの設定画面" LeftItem={{
+        title: "閉じる",
+        onPress: () => navigation.goBack(),
+      }} />
      <ScrollView style={{ flex: 1, backgroundColor: "#f8f8fc" }}>
        <View style={{ height: 300, padding: 10 }}>
          <View style={{ flex: 1 }} />
--- a/components/Settings/WidgetSettings.js
+++ b/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" }}>
-        <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>
+      <SheetHeaderItem
+        title="ウィジェット設定"
+        LeftItem={{ title: "＜ 設定", onPress: goBack }}
+      />
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        <View style={{ alignContent: "center", alignItems: "center" }}>
          <View
--- a/components/atom/SheetHeaderItem.tsx
+++ b/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>
+  );
+};