Merge commit '6ad46c0e632c6fd1448cf743b8eadab2e5d8b216' into develop

components/Settings/FavoliteSettings/FavoiliteSettingsItem.js

@@ -2,14 +2,10 @@ 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 Ionicons from "react-native-vector-icons/Ionicons";
 import { AS } from "../../../storageControl";
 
-export const FavoriteSettingsItem = ({
+export const FavoriteSettingsItem = ({ currentStation }) => {
-  currentStation,
-  setFavoriteStation,
-  index,
-  array,
-}) => {
   const lineIDs = [];
   const EachIDs = [];
   console.log(currentStation);
@@ -19,27 +15,6 @@ export const FavoriteSettingsItem = ({
     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(() => {
-    switch (true) {
-      case array.length == 1:
-        setHead(true);
-        setTail(true);
-        break;
-      case index == 0:
-        setHead(true);
-        setTail(false);
-        break;
-      case index == array.length - 1:
-        setHead(false);
-        setTail(true);
-        break;
-      default:
-        setHead(false);
-        setTail(false);
-    }
-  }, [array]);
 
   return (
     <View style={{ flexDirection: "row", backgroundColor: "white" }}>
@@ -47,7 +22,7 @@ export const FavoriteSettingsItem = ({
         style={{
           width: 35,
           position: "relative",
-          marginHorizontal: 15,
+          marginHorizontal: 10,
           flexDirection: "row",
           height: "101%",
         }}
@@ -91,43 +66,15 @@ export const FavoriteSettingsItem = ({
       >
         <Text style={{ fontSize: 20 }}>{currentStation[0].Station_JP}</Text>
         <View style={{ flex: 1 }} />
-        <TouchableOpacity
+      </View>
-          style={{ marginHorizontal: 10, marginVertical: 4, width: 30 }}
+      <View
-          onPress={() => {
+        style={{
-            console.log("up");
+          alignContent: "center",
-            LayoutAnimation.configureNext(
+          alignItems: "center",
-              LayoutAnimation.Presets.easeInEaseOut
+          alignSelf: "center",
-            );
+        }}
-            const removedStation = [...array].filter((d, i) => {
+      >
-              if (i == index) return false;
+        <Ionicons name={"reorder-two"} size={20} style={{ marginHorizontal: 10 }} />
-              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,31 +1,57 @@
-import React from "react";
+import React, { useCallback } from "react";
-import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { View, Text, StyleSheet } from "react-native";
+import Animated, { useAnimatedRef } from "react-native-reanimated";
 import { useNavigation } from "@react-navigation/native";
+import Sortable from "react-native-sortables";
 import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
-import { CheckBox } from "react-native-elements";
 import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
 import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 
 export const FavoriteSettings = () => {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
+  const scrollableRef = useAnimatedRef();
   const { goBack } = useNavigation();
+  const renderItem = useCallback((props) => {
+    const { item, index } = props;
+    return (
+      <FavoriteSettingsItem
+        currentStation={item}
+        key={item[0].StationNumber}
+      />
+    );
+  }, []);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <SheetHeaderItem
         title="お気に入り設定"
         LeftItem={{ title: "＜ 設定", onPress: goBack }}
       />
-      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
+      <Animated.ScrollView
-        {favoriteStation.map((currentStation, index, array) => (
+        style={{ flex: 1, backgroundColor: "white" }}
-          <FavoriteSettingsItem
+        contentContainerStyle={styles.contentContainer}
-            currentStation={currentStation}
+        ref={scrollableRef}
-            setFavoriteStation={setFavoriteStation}
+      >
-            index={index}
+        <Sortable.Grid
-            array={array}
+          columnGap={0}
-            key={currentStation[0].StationNumber}
+          columns={1}
-          />
+          data={favoriteStation}
-        ))}
+          renderItem={renderItem}
-      </ScrollView>
+          rowGap={0}
+          scrollableRef={scrollableRef} // required for auto scroll
+          snapOffsetY={0}
+          onDragEnd={(newOrder) => {
+            const newFavoriteStation = newOrder.indexToKey.map((item,index,array)=>{
+              let returnData = [];
+              favoriteStation.forEach((station) => {
+                if (station[0].StationNumber === item) returnData = station;
+              });
+              return returnData;
+            });
+            setFavoriteStation(newFavoriteStation);
+          }}
+          keyExtractor={(item) => item[0].StationNumber}
+        />
+      </Animated.ScrollView>
       <Text
         style={{
           backgroundColor: "white",
@@ -39,20 +65,19 @@ export const FavoriteSettings = () => {
   );
 };
 
-const SimpleSwitch = ({ bool, setBool, str }) => (
+const styles = StyleSheet.create({
-  <View style={{ flexDirection: "row" }}>
+  card: {
-    <CheckBox
+    alignItems: "center",
-      checked={bool == "true" ? true : false}
+    backgroundColor: "#36877F",
-      checkedColor="red"
+    borderRadius: 10,
-      onPress={() => setBool(bool == "true" ? "false" : "true")}
+    height: 100,
-      containerStyle={{
+    justifyContent: "center",
-        flex: 1,
+  },
-        backgroundColor: "#00000000",
+  contentContainer: {
-        borderColor: "white",
+    padding: 10,
-        alignContent: "center",
+  },
-      }}
+  text: {
-      textStyle={{ fontSize: 20, fontWeight: "normal" }}
+    color: "white",
-      title={str}
+    fontWeight: "bold",
-    />
+  },
-  </View>
+});
-);