設定機能を実装

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>
+  );
+};