diff --git a/components/Settings/FavoliteSettings/FavoiliteSettingsItem.js b/components/Settings/FavoliteSettings/FavoiliteSettingsItem.js
new file mode 100644
index 0000000..99f5754
--- /dev/null
+++ b/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 (
+
+
+ {lineIDs.map((lineID, index) => (
+
+
+
+ {lineIDs[index]}
+ {"\n"}
+ {EachIDs[index]}
+
+
+
+ ))}
+
+
+
+ {currentStation[0].Station_JP}
+
+ {
+ 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 : }
+
+ {
+ 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 : }
+
+
+
+ );
+};
diff --git a/components/Settings/FavoriteSettings.js b/components/Settings/FavoriteSettings.js
index 4b6bff6..a9334c3 100644
--- a/components/Settings/FavoriteSettings.js
+++ b/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 Icon from "react-native-vector-icons/Entypo";
+import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
export const FavoriteSettings = ({ navigate }) => {
- const { favoriteStation } = useFavoriteStation();
+ const { favoriteStation, setFavoriteStation } = useFavoriteStation();
return (
@@ -51,33 +49,15 @@ export const FavoriteSettings = ({ navigate }) => {
作成中
- {favoriteStation.map((currentStation) => {
- return (
-
-
- {currentStation
- .map((d) => d.StationNumber)
- .filter((d) => d !== null)
- .join("/")}
-
-
- {currentStation[0].Station_JP}
-
-
-
- 移動する
-
-
-
- );
- })}
+ {favoriteStation.map((currentStation, index, array) => (
+
+ ))}
);