Add left padding to settings selects
This commit is contained in:
parent
1016997269
commit
a284f045d2
127
SettingsPage.tsx
127
SettingsPage.tsx
|
@ -11,11 +11,11 @@ import {
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
import DocumentPicker from 'react-native-document-picker'
|
import DocumentPicker from 'react-native-document-picker'
|
||||||
import {Button, Subheading} from 'react-native-paper'
|
import {Button, Subheading} from 'react-native-paper'
|
||||||
import {darkColors, lightColors} from './colors'
|
import {ITEM_PADDING, MARGIN} from './constants'
|
||||||
import {MARGIN} from './constants'
|
|
||||||
import {settingsRepo} from './db'
|
import {settingsRepo} from './db'
|
||||||
import DrawerHeader from './DrawerHeader'
|
import DrawerHeader from './DrawerHeader'
|
||||||
import Input from './input'
|
import Input from './input'
|
||||||
|
import {darkOptions, lightOptions, themeOptions} from './options'
|
||||||
import Page from './Page'
|
import Page from './Page'
|
||||||
import Select from './Select'
|
import Select from './Select'
|
||||||
import Switch from './Switch'
|
import Switch from './Switch'
|
||||||
|
@ -142,9 +142,7 @@ export default function SettingsPage() {
|
||||||
else toast('Enabled sound for rest timer alarms.')
|
else toast('Enabled sound for rest timer alarms.')
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const switches: Input<boolean>[] = useMemo(
|
const switches: Input<boolean>[] = [
|
||||||
() =>
|
|
||||||
[
|
|
||||||
{name: 'Rest timers', value: alarm, onChange: changeAlarmEnabled},
|
{name: 'Rest timers', value: alarm, onChange: changeAlarmEnabled},
|
||||||
{name: 'Vibrate', value: vibrate, onChange: changeVibrate},
|
{name: 'Vibrate', value: vibrate, onChange: changeVibrate},
|
||||||
{name: 'Disable sound', value: noSound, onChange: changeNoSound},
|
{name: 'Disable sound', value: noSound, onChange: changeNoSound},
|
||||||
|
@ -153,27 +151,7 @@ export default function SettingsPage() {
|
||||||
{name: 'Show unit', value: showUnit, onChange: changeUnit},
|
{name: 'Show unit', value: showUnit, onChange: changeUnit},
|
||||||
{name: 'Show steps', value: steps, onChange: changeSteps},
|
{name: 'Show steps', value: steps, onChange: changeSteps},
|
||||||
{name: 'Show date', value: showDate, onChange: changeShowDate},
|
{name: 'Show date', value: showDate, onChange: changeShowDate},
|
||||||
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase())),
|
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase()))
|
||||||
[
|
|
||||||
term,
|
|
||||||
showDate,
|
|
||||||
changeShowDate,
|
|
||||||
alarm,
|
|
||||||
changeAlarmEnabled,
|
|
||||||
vibrate,
|
|
||||||
changeVibrate,
|
|
||||||
noSound,
|
|
||||||
changeNoSound,
|
|
||||||
notify,
|
|
||||||
changeNotify,
|
|
||||||
images,
|
|
||||||
changeImages,
|
|
||||||
showUnit,
|
|
||||||
changeUnit,
|
|
||||||
steps,
|
|
||||||
changeSteps,
|
|
||||||
],
|
|
||||||
)
|
|
||||||
|
|
||||||
const changeTheme = useCallback(
|
const changeTheme = useCallback(
|
||||||
(value: string) => {
|
(value: string) => {
|
||||||
|
@ -210,7 +188,7 @@ export default function SettingsPage() {
|
||||||
[setLightColor],
|
[setLightColor],
|
||||||
)
|
)
|
||||||
|
|
||||||
const renderItem = useCallback(
|
const renderSwitch = useCallback(
|
||||||
({item}: {item: Input<boolean>}) => (
|
({item}: {item: Input<boolean>}) => (
|
||||||
<Switch
|
<Switch
|
||||||
onPress={() => item.onChange(!item.value)}
|
onPress={() => item.onChange(!item.value)}
|
||||||
|
@ -223,6 +201,44 @@ export default function SettingsPage() {
|
||||||
[],
|
[],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const selects: Input<string>[] = [
|
||||||
|
{name: 'Theme', value: theme, onChange: changeTheme, items: themeOptions},
|
||||||
|
{
|
||||||
|
name: 'Dark color',
|
||||||
|
value: darkColor,
|
||||||
|
onChange: changeDarkColor,
|
||||||
|
items: lightOptions,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Light color',
|
||||||
|
value: lightColor,
|
||||||
|
onChange: changeLightColor,
|
||||||
|
items: darkOptions,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Date format',
|
||||||
|
value: date,
|
||||||
|
onChange: changeDate,
|
||||||
|
items: formatOptions.map(option => ({
|
||||||
|
label: format(today, option),
|
||||||
|
value: option,
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase()))
|
||||||
|
|
||||||
|
const renderSelect = useCallback(
|
||||||
|
({item}: {item: Input<string>}) => (
|
||||||
|
<Select
|
||||||
|
value={item.value}
|
||||||
|
onChange={item.onChange}
|
||||||
|
label={item.name}
|
||||||
|
style={styles.select}
|
||||||
|
items={item.items}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
[],
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DrawerHeader name="Settings" />
|
<DrawerHeader name="Settings" />
|
||||||
|
@ -230,64 +246,19 @@ export default function SettingsPage() {
|
||||||
<FlatList
|
<FlatList
|
||||||
style={{marginTop: MARGIN}}
|
style={{marginTop: MARGIN}}
|
||||||
data={switches}
|
data={switches}
|
||||||
renderItem={renderItem}
|
renderItem={renderSwitch}
|
||||||
/>
|
/>
|
||||||
{'theme'.includes(term.toLowerCase()) && (
|
<FlatList
|
||||||
<Select
|
style={{paddingLeft: ITEM_PADDING}}
|
||||||
label="Theme"
|
data={selects}
|
||||||
value={theme}
|
renderItem={renderSelect}
|
||||||
onChange={changeTheme}
|
|
||||||
style={styles.select}
|
|
||||||
items={[
|
|
||||||
{label: 'Follow system theme', value: 'system'},
|
|
||||||
{label: 'Dark theme', value: 'dark'},
|
|
||||||
{label: 'Light theme', value: 'light'},
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
{'color'.includes(term.toLowerCase()) && (
|
|
||||||
<Select
|
|
||||||
label="Dark color"
|
|
||||||
value={darkColor}
|
|
||||||
onChange={changeDarkColor}
|
|
||||||
style={styles.select}
|
|
||||||
items={lightColors.map(color => ({
|
|
||||||
label: color.name,
|
|
||||||
value: color.hex,
|
|
||||||
color: color.hex,
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{'color'.includes(term.toLowerCase()) && (
|
|
||||||
<Select
|
|
||||||
value={lightColor}
|
|
||||||
onChange={changeLightColor}
|
|
||||||
label="Light color"
|
|
||||||
style={styles.select}
|
|
||||||
items={darkColors.map(color => ({
|
|
||||||
label: color.name,
|
|
||||||
value: color.hex,
|
|
||||||
color: color.hex,
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{'date format'.includes(term.toLowerCase()) && (
|
|
||||||
<Select
|
|
||||||
value={date}
|
|
||||||
onChange={changeDate}
|
|
||||||
label="Date format"
|
|
||||||
style={styles.select}
|
|
||||||
items={formatOptions.map(option => ({
|
|
||||||
label: format(today, option),
|
|
||||||
value: option,
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{'alarm sound'.includes(term.toLowerCase()) && (
|
{'alarm sound'.includes(term.toLowerCase()) && (
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
paddingLeft: ITEM_PADDING,
|
||||||
}}>
|
}}>
|
||||||
<Subheading style={styles.select}>Alarm sound</Subheading>
|
<Subheading style={styles.select}>Alarm sound</Subheading>
|
||||||
<Button onPress={changeSound}>{soundString || 'Default'}</Button>
|
<Button onPress={changeSound}>{soundString || 'Default'}</Button>
|
||||||
|
|
|
@ -1,2 +1,3 @@
|
||||||
export const MARGIN = 10
|
export const MARGIN = 10
|
||||||
export const PADDING = 10
|
export const PADDING = 10
|
||||||
|
export const ITEM_PADDING = 8
|
||||||
|
|
3
input.ts
3
input.ts
|
@ -1,5 +1,8 @@
|
||||||
|
import {Item} from './Select'
|
||||||
|
|
||||||
export default interface Input<T> {
|
export default interface Input<T> {
|
||||||
name: string
|
name: string
|
||||||
value?: T
|
value?: T
|
||||||
onChange: (value: T) => void
|
onChange: (value: T) => void
|
||||||
|
items?: Item[]
|
||||||
}
|
}
|
||||||
|
|
19
options.ts
Normal file
19
options.ts
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import {darkColors, lightColors} from './colors'
|
||||||
|
|
||||||
|
export const themeOptions = [
|
||||||
|
{label: 'Follow system theme', value: 'system'},
|
||||||
|
{label: 'Dark theme', value: 'dark'},
|
||||||
|
{label: 'Light theme', value: 'light'},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const lightOptions = lightColors.map(color => ({
|
||||||
|
label: color.name,
|
||||||
|
value: color.hex,
|
||||||
|
color: color.hex,
|
||||||
|
}))
|
||||||
|
|
||||||
|
export const darkOptions = darkColors.map(color => ({
|
||||||
|
label: color.name,
|
||||||
|
value: color.hex,
|
||||||
|
color: color.hex,
|
||||||
|
}))
|
Loading…
Reference in New Issue
Block a user