設定機能を実装

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

@@ -1,13 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
-import { SwitchArea } from "../atom/SwitchArea";
 import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
 import { CheckBox } from "react-native-elements";
-import { ListItem } from "native-base";
+import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
-import Icon from "react-native-vector-icons/Entypo";
 
 export const FavoriteSettings = ({ navigate }) => {
-  const { favoriteStation } = useFavoriteStation();
+  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
@@ -51,33 +49,15 @@ export const FavoriteSettings = ({ navigate }) => {
       </View>
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         <Text>作成中</Text>
-        {favoriteStation.map((currentStation) => {
+        {favoriteStation.map((currentStation, index, array) => (
-          return (
+          <FavoriteSettingsItem
-            <ListItem>
+            currentStation={currentStation}
-              <Text style={{ fontSize: 20, flex: 2 }}>
+            setFavoriteStation={setFavoriteStation}
-                {currentStation
+            index={index}
-                  .map((d) => d.StationNumber)
+            array={array}
-                  .filter((d) => d !== null)
+            key={currentStation[0].StationNumber}
-                  .join("/")}
+          />
-              </Text>
+        ))}
-              <Text style={{ fontSize: 20, flex: 3 }}>
-                {currentStation[0].Station_JP}
-              </Text>
-              <View
-                style={{
-                  flex: 2,
-                  flexDirection: "row",
-                  alignContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                <View style={{ flex: 1 }} />
-                <Text style={{ fontSize: 20 }}>移動する</Text>
-                <Icon name="chevron-right" size={20} />
-              </View>
-            </ListItem>
-          );
-        })}
       </ScrollView>
     </View>
   );