diff --git a/assets/configuration/train_original_small.jpg b/assets/configuration/train_original_small.jpg new file mode 100644 index 0000000..6aacc9e Binary files /dev/null and b/assets/configuration/train_original_small.jpg differ diff --git a/components/DynamicHeaderScrollView.js b/components/DynamicHeaderScrollView.js index e6f652b..9fc6bd1 100644 --- a/components/DynamicHeaderScrollView.js +++ b/components/DynamicHeaderScrollView.js @@ -1,6 +1,7 @@ import { ScrollView, View, Animated, LayoutAnimation } from "react-native"; -import React, { useMemo, useState } from "react"; +import React, { useEffect, useMemo, useState, useLayoutEffect } from "react"; import { useScrollHandlers } from "react-native-actions-sheet"; +import { AS } from "../storageControl"; export const DynamicHeaderScrollView = (props) => { const { @@ -13,7 +14,30 @@ export const DynamicHeaderScrollView = (props) => { styles, from, } = props; - + const [headerSize, setHeaderSize] = useState("default"); + useLayoutEffect(() => { + AS.getItem("headerSize") + .then((res) => { + if (res) { + setHeaderSize(res); + } + }) + .catch((e) => { + AS.setItem("headerSize", "default"); + }); + }, []); + useEffect(() => { + switch (headerSize) { + case "small": + setHeaderVisible(true); + return; + case "big": + case "default": + default: + setHeaderVisible(false); + break; + } + }, [headerSize]); const viewHeader = useMemo(() => { switch (from) { case "AllTrainDiagramView": @@ -25,7 +49,7 @@ export const DynamicHeaderScrollView = (props) => { } }, [from]); - const Max_Header_Height = viewHeader ? 0 : 200; + const Max_Header_Height = headerSize == "small" ? 0 : viewHeader ? 0 : 200; const Min_Header_Height = viewHeader ? 0 : 80; const Scroll_Distance = Max_Header_Height - Min_Header_Height; @@ -87,13 +111,24 @@ export const DynamicHeaderScrollView = (props) => { const [headerVisible, setHeaderVisible] = useState(false); const onScroll = (event) => { - const scrollY = event.nativeEvent.contentOffset.y; - if (Scroll_Distance < scrollY == headerVisible) return; - LayoutAnimation.configureNext({ - duration: 100, - update: { type: "easeOut" }, - }); - setHeaderVisible(Scroll_Distance < scrollY); + switch (headerSize) { + case "big": + setHeaderVisible(false); + return; + case "small": + setHeaderVisible(true); + return; + case "default": + default: + const scrollY = event.nativeEvent.contentOffset.y; + if (Scroll_Distance < scrollY == headerVisible) return; + LayoutAnimation.configureNext({ + duration: 100, + update: { type: "easeOut" }, + }); + setHeaderVisible(Scroll_Distance < scrollY); + break; + } }; return ( diff --git a/components/Settings/LayoutSettings.js b/components/Settings/LayoutSettings.js index 1bda4d5..09e0547 100644 --- a/components/Settings/LayoutSettings.js +++ b/components/Settings/LayoutSettings.js @@ -2,6 +2,7 @@ import React from "react"; import { View, Text, TouchableOpacity, ScrollView } from "react-native"; import { SwitchArea } from "../atom/SwitchArea"; import { CheckBox } from "react-native-elements"; +import { TripleSwitchArea } from "../atom/TripleSwitchArea"; export const LayoutSettings = ({ navigate, @@ -17,6 +18,8 @@ export const LayoutSettings = ({ setTrainMenu, trainPosition, setTrainPosition, + headerSize, + setHeaderSize, }) => { return ( @@ -106,12 +109,34 @@ export const LayoutSettings = ({ trueImage={require("../../assets/configuration/train_original.jpg")} /> {trainMenu == "true" && ( - + <> + + + )} diff --git a/components/Settings/settings.js b/components/Settings/settings.js index 7c40ce3..fbeb3ba 100644 --- a/components/Settings/settings.js +++ b/components/Settings/settings.js @@ -32,6 +32,7 @@ export default function Setting(props) { const [usePDFView, setUsePDFView] = useState(false); const [trainMenu, setTrainMenu] = useState(false); const [trainPosition, setTrainPosition] = useState(false); + const [headerSize, setHeaderSize] = useState("default"); useLayoutEffect(() => { AS.getItem("iconSwitch").then(setIconSetting); AS.getItem("mapSwitch").then(setMapSwitch); @@ -39,6 +40,7 @@ export default function Setting(props) { AS.getItem("usePDFView").then(setUsePDFView); AS.getItem("trainSwitch").then(setTrainMenu); AS.getItem("trainPositionSwitch").then(setTrainPosition); + AS.getItem("headerSize").then(setHeaderSize); }, []); const testNFC = async () => { const result = await ExpoFelicaReader.scan(); @@ -52,6 +54,7 @@ export default function Setting(props) { AS.setItem("usePDFView", usePDFView.toString()), AS.setItem("trainSwitch", trainMenu.toString()), AS.setItem("trainPositionSwitch", trainPosition.toString()), + AS.setItem("headerSize", headerSize), ]).then(() => Updates.reloadAsync()); }; return ( @@ -115,6 +118,8 @@ export default function Setting(props) { setTrainPosition={setTrainPosition} testNFC={testNFC} updateAndReload={updateAndReload} + headerSize={headerSize} + setHeaderSize={setHeaderSize} /> )} diff --git a/components/atom/TripleSwitchArea.js b/components/atom/TripleSwitchArea.js new file mode 100644 index 0000000..026b454 --- /dev/null +++ b/components/atom/TripleSwitchArea.js @@ -0,0 +1,52 @@ +import { View, Text, Image, TouchableOpacity } from "react-native"; +import { SimpleSwitch } from "./SimpleSwitch"; +export const TripleSwitchArea = ({ + str, + bool, + setBool, + firstItem: { firstImage, firstText, firstValue }, + secondItem: { secondImage, secondText, secondValue }, + thirdItem: { thirdImage, thirdText, thirdValue }, +}) => { + return ( + + + {str} + + + + + + + + ); +};