125 lines
4.3 KiB
JavaScript
125 lines
4.3 KiB
JavaScript
import React from "react";
|
||
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
|
||
import { useNavigation } from "@react-navigation/native";
|
||
import { SwitchArea } from "../atom/SwitchArea";
|
||
import { CheckBox } from "react-native-elements";
|
||
import { TripleSwitchArea } from "../atom/TripleSwitchArea";
|
||
import { SheetHeaderItem } from "../atom/SheetHeaderItem";
|
||
|
||
export const LayoutSettings = ({
|
||
navigate,
|
||
iconSetting,
|
||
setIconSetting,
|
||
mapSwitch,
|
||
setMapSwitch,
|
||
stationMenu,
|
||
setStationMenu,
|
||
usePDFView,
|
||
setUsePDFView,
|
||
trainMenu,
|
||
setTrainMenu,
|
||
trainPosition,
|
||
setTrainPosition,
|
||
headerSize,
|
||
setHeaderSize,
|
||
}) => {
|
||
const { goBack } = useNavigation();
|
||
return (
|
||
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
|
||
<SheetHeaderItem title="レイアウト設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
|
||
<ScrollView style={{ flex: 1, backgroundColor: "white" }}>
|
||
<View style={{ flex: 1 }}>
|
||
<SwitchArea
|
||
str="列車アイコン表示"
|
||
bool={iconSetting}
|
||
setBool={setIconSetting}
|
||
falseImage={require("../../assets/configuration/icon_default.jpg")}
|
||
trueImage={require("../../assets/configuration/icon_original.jpg")}
|
||
falseText={"本家\n(文字アイコン)"}
|
||
trueText={"オリジナル\n(車種アイコン)"}
|
||
/>
|
||
<SwitchArea
|
||
str="トップメニュー表示"
|
||
bool={mapSwitch}
|
||
setBool={setMapSwitch}
|
||
falseImage={require("../../assets/configuration/menu_default.jpg")}
|
||
trueImage={require("../../assets/configuration/menu_original.jpg")}
|
||
falseText={"本家\n(文字＆路線リスト)"}
|
||
trueText={"オリジナル\n(マップ＆お気に入り)"}
|
||
/>
|
||
<SwitchArea
|
||
str="駅メニュー表示"
|
||
bool={stationMenu}
|
||
setBool={setStationMenu}
|
||
falseText={"本家\n(文字)"}
|
||
trueText={"オリジナル\n(駅名標)"}
|
||
falseImage={require("../../assets/configuration/station_default.jpg")}
|
||
trueImage={require("../../assets/configuration/station_original.jpg")}
|
||
>
|
||
<SimpleSwitch
|
||
bool={usePDFView}
|
||
setBool={setUsePDFView}
|
||
color="red"
|
||
str="時刻表PDFをアプリの外で表示する"
|
||
/>
|
||
</SwitchArea>
|
||
<SwitchArea
|
||
str="列車メニュー"
|
||
bool={trainMenu}
|
||
setBool={setTrainMenu}
|
||
falseText={"本家"}
|
||
trueText={"オリジナル"}
|
||
falseImage={require("../../assets/configuration/train_default.jpg")}
|
||
trueImage={require("../../assets/configuration/train_original.jpg")}
|
||
>
|
||
<TripleSwitchArea
|
||
str={"ヘッダーサイズ"}
|
||
bool={headerSize}
|
||
setBool={setHeaderSize}
|
||
firstItem={{
|
||
firstImage: require("../../assets/configuration/train_original_small.jpg"),
|
||
firstText: "小固定",
|
||
firstValue: "small",
|
||
}}
|
||
secondItem={{
|
||
secondImage: require("../../assets/configuration/train_original.jpg"),
|
||
secondText: "既定(可変)",
|
||
secondValue: "default",
|
||
}}
|
||
thirdItem={{
|
||
thirdImage: require("../../assets/configuration/train_original.jpg"),
|
||
thirdText: "大固定",
|
||
thirdValue: "big",
|
||
}}
|
||
/>
|
||
<SimpleSwitch
|
||
bool={trainPosition}
|
||
setBool={setTrainPosition}
|
||
color="red"
|
||
str="列車の現在地表示/ジャンプ"
|
||
/>
|
||
</SwitchArea>
|
||
</View>
|
||
</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>
|
||
);
|