85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
import React, { useCallback } from "react";
|
||
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 { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
|
||
import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
|
||
import { AS } from "@/storageControl";
|
||
|
||
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 }}
|
||
/>
|
||
<Animated.ScrollView
|
||
style={{ flex: 1, backgroundColor: "white" }}
|
||
contentContainerStyle={styles.contentContainer}
|
||
ref={scrollableRef}
|
||
>
|
||
<Sortable.Grid
|
||
columnGap={0}
|
||
columns={1}
|
||
data={favoriteStation}
|
||
renderItem={renderItem}
|
||
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);
|
||
AS.setItem("favoriteStation", JSON.stringify(newFavoriteStation));
|
||
}}
|
||
keyExtractor={(item) => item[0].StationNumber}
|
||
/>
|
||
</Animated.ScrollView>
|
||
<Text
|
||
style={{
|
||
backgroundColor: "white",
|
||
borderWidth: 1,
|
||
borderStyle: "solid",
|
||
}}
|
||
>
|
||
お気に入り登録した駅を並び替えることができます。一番上に置いた駅が位置情報の起動時に表示されます。(移動不可能な駅の場合エラーが発生します。任意指定が可能になる機能を開発予定です。)
|
||
</Text>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
const styles = StyleSheet.create({
|
||
card: {
|
||
alignItems: "center",
|
||
backgroundColor: "#36877F",
|
||
borderRadius: 10,
|
||
height: 100,
|
||
justifyContent: "center",
|
||
},
|
||
contentContainer: {
|
||
padding: 10,
|
||
},
|
||
text: {
|
||
color: "white",
|
||
fontWeight: "bold",
|
||
},
|
||
});
|