Merge commit 'de172e9a39bc17bac609afba588e9e9fc182f836' into feature/widget-config

components/Settings/FavoliteSettings/FavoiliteSettingsItem.js

@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from "react";
+import Icon from "react-native-vector-icons/Entypo";
+import { View, Text, TouchableOpacity, LayoutAnimation } from "react-native";
+import lineColorList from "../../../assets/originData/lineColorList";
+import { AS } from "../../../storageControl";
+
+export const FavoriteSettingsItem = ({
+  currentStation,
+  setFavoriteStation,
+  index,
+  array,
+}) => {
+  const lineIDs = [];
+  const EachIDs = [];
+  console.log(currentStation);
+  currentStation.forEach((d) => {
+    if (!d.StationNumber) return;
+    const textArray = d.StationNumber.split("");
+    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
+    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
+  });
+  const [head, setHead] = useState(false);
+  const [tail, setTail] = useState(false);
+  useEffect(() => {
+    if (index == 0) {
+      setHead(true);
+    } else if (index == array.length - 1) {
+      setTail(true);
+    } else {
+      setHead(false);
+      setTail(false);
+    }
+  }, [array]);
+
+  return (
+    <View style={{ flexDirection: "row", backgroundColor: "white" }}>
+      <View
+        style={{
+          width: 35,
+          position: "relative",
+          marginHorizontal: 15,
+          flexDirection: "row",
+          height: "101%",
+        }}
+      >
+        {lineIDs.map((lineID, index) => (
+          <View
+            style={{
+              backgroundColor: lineColorList[lineID],
+              flex: 1,
+            }}
+            key={lineID}
+          >
+            <View style={{ flex: 1 }} />
+            <Text
+              style={{
+                color: "white",
+                textAlign: "center",
+                fontSize: 12,
+                fontWeight: "bold",
+              }}
+            >
+              {lineIDs[index]}
+              {"\n"}
+              {EachIDs[index]}
+            </Text>
+            <View style={{ flex: 1 }} />
+          </View>
+        ))}
+      </View>
+
+      <View
+        style={{
+          padding: 8,
+          flexDirection: "row",
+          borderBottomWidth: 1,
+          borderBottomColor: "#f0f0f0",
+          flex: 1,
+          alignContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Text style={{ fontSize: 20 }}>{currentStation[0].Station_JP}</Text>
+        <View style={{ flex: 1 }} />
+        <TouchableOpacity
+          style={{ marginHorizontal: 10, marginVertical: 4, width: 30 }}
+          onPress={() => {
+            console.log("up");
+            LayoutAnimation.configureNext(
+              LayoutAnimation.Presets.easeInEaseOut
+            );
+            const removedStation = [...array].filter((d, i) => {
+              if (i == index) return false;
+              return true;
+            });
+            removedStation.splice(index - 1, 0, currentStation);
+            setFavoriteStation(removedStation);
+
+            AS.setItem("favoriteStation", JSON.stringify(removedStation));
+          }}
+        >
+          {head ? null : <Icon name="chevron-up" size={26} />}
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={{ marginHorizontal: 10, marginVertical: 4, width: 30 }}
+          onPress={() => {
+            console.log("down");
+            LayoutAnimation.configureNext(
+              LayoutAnimation.Presets.easeInEaseOut
+            );
+            const removedStation = [...array].filter((d, i) => {
+              if (i == index) return false;
+              return true;
+            });
+            removedStation.splice(index + 1, 0, currentStation);
+            setFavoriteStation(removedStation);
+            AS.setItem("favoriteStation", JSON.stringify(removedStation));
+          }}
+        >
+          {tail ? null : <Icon name="chevron-down" size={26} />}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};

components/Settings/FavoriteSettings.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
+import { CheckBox } from "react-native-elements";
+import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
+
+export const FavoriteSettings = ({ navigate }) => {
+  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+        <View style={{ flex: 1 }}>
+          <TouchableOpacity
+            onPress={() => navigate("settingTopPage")}
+            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
+            currentStation={currentStation}
+            setFavoriteStation={setFavoriteStation}
+            index={index}
+            array={array}
+            key={currentStation[0].StationNumber}
+          />
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const SimpleSwitch = ({ bool, setBool, str }) => (
+  <View style={{ flexDirection: "row" }}>
+    <CheckBox
+      checked={bool == "true" ? true : false}
+      checkedColor="red"
+      onPress={() => setBool(bool == "true" ? "false" : "true")}
+      containerStyle={{
+        flex: 1,
+        backgroundColor: "#00000000",
+        borderColor: "white",
+        alignContent: "center",
+      }}
+      textStyle={{ fontSize: 20, fontWeight: "normal" }}
+      title={str}
+    />
+  </View>
+);

components/Settings/SettingTopPage.js

@@ -115,7 +115,10 @@ export const SettingTopPage = ({
         </View>
 
         <View style={{ flex: 1, borderTopWidth: 1, borderColor: "gray" }}>
-          <ListItem style={{ flexDirection: "row" }} onPress={() => {}}>
+          <ListItem
+            style={{ flexDirection: "row" }}
+            onPress={() => navigate("FavoriteSettings")}
+          >
             <Text
               style={{
                 fontSize: 20,
@@ -125,7 +128,7 @@ export const SettingTopPage = ({
                 textAlignVertical: "center",
               }}
             >
-              お気に入り登録の管理(工事中)
+              お気に入り登録の並び替え
             </Text>
             <View style={{ flex: 1 }} />
             <Text

components/Settings/settings.js

@@ -20,6 +20,7 @@ import { Switch } from "react-native-elements";
 import AutoHeightImage from "react-native-auto-height-image";
 import { SettingTopPage } from "./SettingTopPage";
 import { LayoutSettings } from "./LayoutSettings";
+import { FavoriteSettings } from "./FavoriteSettings";
 import { WidgetSettings } from "./WidgetSettings";
 
 const Stack = createStackNavigator();
@@ -136,6 +137,18 @@ export default function Setting(props) {
       >
         {(props) => <WidgetSettings {...props} navigate={navigate} />}
       </Stack.Screen>
+      <Stack.Screen
+        name="FavoriteSettings"
+        options={{
+          gestureEnabled: true,
+          ...TransitionPresets.SlideFromRightIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      >
+        {(props) => <FavoriteSettings {...props} navigate={navigate} />}
+      </Stack.Screen>
     </Stack.Navigator>
   );
 }

components/駅名表/Sign.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import LottieView from "lottie-react-native";
@@ -16,7 +16,7 @@ export default function Sign(props) {
   const [preStation, setPreStation] = useState();
   const [nexStation, setNexStation] = useState();
   const [testButtonStatus, setTestButtonStatus] = useState(false);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const isFavorite = favoriteStation.filter((d) => {
       const compare = JSON.stringify(d);
       const current = JSON.stringify(currentStation);