135 lines
3.9 KiB
JavaScript
135 lines
3.9 KiB
JavaScript
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(() => {
|
|
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" }}>
|
|
<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>
|
|
);
|
|
};
|