103 lines
3.1 KiB
JavaScript
103 lines
3.1 KiB
JavaScript
import React, { useEffect, useState } 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";
|
||
|
||
export const FavoriteSettings = ({ navigate }) => {
|
||
const { favoriteStation } = useFavoriteStation();
|
||
return (
|
||
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
|
||
<View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
|
||
<View style={{ flex: 1 }}>
|
||
<TouchableOpacity
|
||
onPress={() => navigate("settingTopPage")}
|
||
style={{
|
||
flexDirection: "column",
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{
|
||
fontSize: 20,
|
||
fontWeight: "bold",
|
||
textAlign: "left",
|
||
textAlignVertical: "center",
|
||
color: "white",
|
||
padding: 10,
|
||
}}
|
||
>
|
||
＜ 設定
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
<Text
|
||
style={{
|
||
fontSize: 20,
|
||
fontWeight: "bold",
|
||
textAlign: "center",
|
||
color: "white",
|
||
padding: 10,
|
||
}}
|
||
>
|
||
お気に入り設定
|
||
</Text>
|
||
<View style={{ flex: 1 }}></View>
|
||
</View>
|
||
<ScrollView style={{ flex: 1, backgroundColor: "white" }}>
|
||
<Text>作成中</Text>
|
||
{favoriteStation.map((currentStation) => {
|
||
return (
|
||
<ListItem>
|
||
<Text style={{ fontSize: 20, flex: 2 }}>
|
||
{currentStation
|
||
.map((d) => d.StationNumber)
|
||
.filter((d) => d !== null)
|
||
.join("/")}
|
||
</Text>
|
||
<Text style={{ fontSize: 20, flex: 3 }}>
|
||
{currentStation[0].Station_JP}
|
||
</Text>
|
||
<View
|
||
style={{
|
||
flex: 2,
|
||
flexDirection: "row",
|
||
alignContent: "center",
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
<View style={{ flex: 1 }} />
|
||
<Text style={{ fontSize: 20 }}>移動する</Text>
|
||
<Icon name="chevron-right" size={20} />
|
||
</View>
|
||
</ListItem>
|
||
);
|
||
})}
|
||
</ScrollView>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
const SimpleSwitch = ({ bool, setBool, str }) => (
|
||
<View style={{ flexDirection: "row" }}>
|
||
<CheckBox
|
||
checked={bool == "true" ? true : false}
|
||
checkedColor="red"
|
||
onPress={() => setBool(bool == "true" ? "false" : "true")}
|
||
containerStyle={{
|
||
flex: 1,
|
||
backgroundColor: "#00000000",
|
||
borderColor: "white",
|
||
alignContent: "center",
|
||
}}
|
||
textStyle={{ fontSize: 20, fontWeight: "normal" }}
|
||
title={str}
|
||
/>
|
||
</View>
|
||
);
|