Merge commit '244e83eed5ad83dbf1f21178cf70aaaac68937fd' into develop

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,82 @@
+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" }}>
+        <Text>作成中</Text>
+        {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

@@ -114,7 +114,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,

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";
 
 const Stack = createStackNavigator();
 export default function Setting(props) {
@@ -123,6 +124,39 @@ export default function Setting(props) {
           />
         )}
       </Stack.Screen>
+      <Stack.Screen
+        name="FavoriteSettings"
+        options={{
+          gestureEnabled: true,
+          ...TransitionPresets.SlideFromRightIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      >
+        {(props) => (
+          <FavoriteSettings
+            {...props}
+            navigate={navigate}
+            iconSetting={iconSetting}
+            setIconSetting={setIconSetting}
+            mapSwitch={mapSwitch}
+            setMapSwitch={setMapSwitch}
+            stationMenu={stationMenu}
+            setStationMenu={setStationMenu}
+            usePDFView={usePDFView}
+            setUsePDFView={setUsePDFView}
+            trainMenu={trainMenu}
+            setTrainMenu={setTrainMenu}
+            trainPosition={trainPosition}
+            setTrainPosition={setTrainPosition}
+            testNFC={testNFC}
+            updateAndReload={updateAndReload}
+            headerSize={headerSize}
+            setHeaderSize={setHeaderSize}
+          />
+        )}
+      </Stack.Screen>
     </Stack.Navigator>
   );
 }