Add search bar to SettingsPage
This commit is contained in:
parent
35fd648ad3
commit
5d9a458ccd
168
SettingsPage.tsx
168
SettingsPage.tsx
|
@ -1,5 +1,11 @@
|
||||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||||
import React, {useCallback, useEffect, useState} from 'react';
|
import React, {
|
||||||
|
ReactNode,
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
import {
|
import {
|
||||||
NativeModules,
|
NativeModules,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
|
@ -7,7 +13,7 @@ import {
|
||||||
ToastAndroid,
|
ToastAndroid,
|
||||||
View,
|
View,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import {TextInput} from 'react-native-paper';
|
import {Searchbar, TextInput} from 'react-native-paper';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
import MassiveSwitch from './MassiveSwitch';
|
import MassiveSwitch from './MassiveSwitch';
|
||||||
|
|
||||||
|
@ -22,6 +28,7 @@ export default function SettingsPage() {
|
||||||
const [predictive, setPredictive] = useState<boolean>(false);
|
const [predictive, setPredictive] = useState<boolean>(false);
|
||||||
const [battery, setBattery] = useState(false);
|
const [battery, setBattery] = useState(false);
|
||||||
const [ignoring, setIgnoring] = useState(false);
|
const [ignoring, setIgnoring] = useState(false);
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
|
||||||
const refresh = useCallback(async () => {
|
const refresh = useCallback(async () => {
|
||||||
setMinutes((await getItem('minutes')) || '');
|
setMinutes((await getItem('minutes')) || '');
|
||||||
|
@ -57,46 +64,6 @@ export default function SettingsPage() {
|
||||||
[setPredictive],
|
[setPredictive],
|
||||||
);
|
);
|
||||||
|
|
||||||
const textInputs = (
|
|
||||||
<>
|
|
||||||
<TextInput
|
|
||||||
label="Rest minutes"
|
|
||||||
value={minutes}
|
|
||||||
keyboardType="numeric"
|
|
||||||
placeholder="3"
|
|
||||||
onChangeText={text => {
|
|
||||||
setMinutes(text);
|
|
||||||
setItem('minutes', text);
|
|
||||||
}}
|
|
||||||
style={styles.text}
|
|
||||||
selectTextOnFocus
|
|
||||||
/>
|
|
||||||
<TextInput
|
|
||||||
label="Rest seconds"
|
|
||||||
value={seconds}
|
|
||||||
keyboardType="numeric"
|
|
||||||
placeholder="30"
|
|
||||||
onChangeText={s => {
|
|
||||||
setSeconds(s);
|
|
||||||
setItem('seconds', s);
|
|
||||||
}}
|
|
||||||
style={styles.text}
|
|
||||||
selectTextOnFocus
|
|
||||||
/>
|
|
||||||
<TextInput
|
|
||||||
label="Sets per workout"
|
|
||||||
value={maxSets}
|
|
||||||
keyboardType="numeric"
|
|
||||||
onChangeText={value => {
|
|
||||||
setMaxSets(value);
|
|
||||||
setItem('maxSets', value);
|
|
||||||
}}
|
|
||||||
style={styles.text}
|
|
||||||
selectTextOnFocus
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
const changeVibrate = useCallback(
|
const changeVibrate = useCallback(
|
||||||
(value: boolean) => {
|
(value: boolean) => {
|
||||||
setVibrate(value);
|
setVibrate(value);
|
||||||
|
@ -105,21 +72,106 @@ export default function SettingsPage() {
|
||||||
[setVibrate],
|
[setVibrate],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const items: {name: string; element: ReactNode}[] = [
|
||||||
|
{
|
||||||
|
name: 'Sets per workout',
|
||||||
|
element: (
|
||||||
|
<TextInput
|
||||||
|
label="Sets per workout"
|
||||||
|
value={maxSets}
|
||||||
|
keyboardType="numeric"
|
||||||
|
onChangeText={value => {
|
||||||
|
setMaxSets(value);
|
||||||
|
setItem('maxSets', value);
|
||||||
|
}}
|
||||||
|
style={styles.text}
|
||||||
|
selectTextOnFocus
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Rest seconds',
|
||||||
|
element: (
|
||||||
|
<TextInput
|
||||||
|
label="Rest seconds"
|
||||||
|
value={seconds}
|
||||||
|
keyboardType="numeric"
|
||||||
|
placeholder="30"
|
||||||
|
onChangeText={s => {
|
||||||
|
setSeconds(s);
|
||||||
|
setItem('seconds', s);
|
||||||
|
}}
|
||||||
|
style={styles.text}
|
||||||
|
selectTextOnFocus
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Rest minutes',
|
||||||
|
element: (
|
||||||
|
<TextInput
|
||||||
|
label="Rest minutes"
|
||||||
|
value={minutes}
|
||||||
|
keyboardType="numeric"
|
||||||
|
placeholder="3"
|
||||||
|
onChangeText={text => {
|
||||||
|
setMinutes(text);
|
||||||
|
setItem('minutes', text);
|
||||||
|
}}
|
||||||
|
style={styles.text}
|
||||||
|
selectTextOnFocus
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Rest timers',
|
||||||
|
element: (
|
||||||
|
<>
|
||||||
|
<Text style={styles.text}>Rest timers</Text>
|
||||||
|
<MassiveSwitch
|
||||||
|
style={[styles.text, {alignSelf: 'flex-start'}]}
|
||||||
|
value={alarm}
|
||||||
|
onValueChange={changeAlarmEnabled}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Vibrate',
|
||||||
|
element: (
|
||||||
|
<>
|
||||||
|
<Text style={styles.text}>Vibrate</Text>
|
||||||
|
<MassiveSwitch
|
||||||
|
style={[styles.text, {alignSelf: 'flex-start'}]}
|
||||||
|
value={vibrate}
|
||||||
|
onValueChange={changeVibrate}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Predictive sets',
|
||||||
|
element: (
|
||||||
|
<>
|
||||||
|
<Text style={styles.text}>Predictive sets</Text>
|
||||||
|
<MassiveSwitch
|
||||||
|
style={[styles.text, {alignSelf: 'flex-start'}]}
|
||||||
|
value={predictive}
|
||||||
|
onValueChange={changePredictive}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
{textInputs}
|
<Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
|
||||||
<Text style={styles.text}>Rest timers</Text>
|
{items
|
||||||
<MassiveSwitch
|
.filter(item => item.name.toLowerCase().includes(search.toLowerCase()))
|
||||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
.map(item => (
|
||||||
value={alarm}
|
<React.Fragment key={item.name}>{item.element}</React.Fragment>
|
||||||
onValueChange={changeAlarmEnabled}
|
))}
|
||||||
/>
|
|
||||||
<Text style={styles.text}>Vibrate</Text>
|
|
||||||
<MassiveSwitch
|
|
||||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
|
||||||
value={vibrate}
|
|
||||||
onValueChange={changeVibrate}
|
|
||||||
/>
|
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
title="Battery optimizations"
|
title="Battery optimizations"
|
||||||
show={battery}
|
show={battery}
|
||||||
|
@ -130,12 +182,6 @@ export default function SettingsPage() {
|
||||||
}}>
|
}}>
|
||||||
Disable battery optimizations for Massive to use rest timers.
|
Disable battery optimizations for Massive to use rest timers.
|
||||||
</ConfirmDialog>
|
</ConfirmDialog>
|
||||||
<Text style={styles.text}>Predictive sets</Text>
|
|
||||||
<MassiveSwitch
|
|
||||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
|
||||||
value={predictive}
|
|
||||||
onValueChange={changePredictive}
|
|
||||||
/>
|
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user