Start simplifying Switch.tsx
This commit is contained in:
parent
d088cf313b
commit
667b96ec33
25
LabelledButton.tsx
Normal file
25
LabelledButton.tsx
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
import {View} from 'react-native'
|
||||||
|
import {ITEM_PADDING} from './constants'
|
||||||
|
import {Button, Subheading} from 'react-native-paper'
|
||||||
|
|
||||||
|
export default function LabelledButton({
|
||||||
|
label,
|
||||||
|
onPress,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
label?: string
|
||||||
|
onPress: () => void
|
||||||
|
children: string
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingLeft: ITEM_PADDING,
|
||||||
|
}}>
|
||||||
|
<Subheading style={{width: 100}}>{label}</Subheading>
|
||||||
|
<Button onPress={onPress}>{children}</Button>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
|
@ -6,7 +6,7 @@ import {
|
||||||
import {format} from 'date-fns'
|
import {format} from 'date-fns'
|
||||||
import {useCallback, useEffect, useMemo, useState} from 'react'
|
import {useCallback, useEffect, useMemo, useState} from 'react'
|
||||||
import {Controller, useForm} from 'react-hook-form'
|
import {Controller, useForm} from 'react-hook-form'
|
||||||
import {DeviceEventEmitter, NativeModules, Platform, View} from 'react-native'
|
import {NativeModules, Platform, View} from 'react-native'
|
||||||
import DocumentPicker from 'react-native-document-picker'
|
import DocumentPicker from 'react-native-document-picker'
|
||||||
import {Dirs, FileSystem} from 'react-native-file-access'
|
import {Dirs, FileSystem} from 'react-native-file-access'
|
||||||
import {Button, Subheading} from 'react-native-paper'
|
import {Button, Subheading} from 'react-native-paper'
|
||||||
|
@ -16,6 +16,7 @@ import {AppDataSource} from './data-source'
|
||||||
import {setRepo, settingsRepo} from './db'
|
import {setRepo, settingsRepo} from './db'
|
||||||
import {DrawerParamList} from './drawer-param-list'
|
import {DrawerParamList} from './drawer-param-list'
|
||||||
import DrawerHeader from './DrawerHeader'
|
import DrawerHeader from './DrawerHeader'
|
||||||
|
import LabelledButton from './LabelledButton'
|
||||||
import {darkOptions, lightOptions, themeOptions} from './options'
|
import {darkOptions, lightOptions, themeOptions} from './options'
|
||||||
import Page from './Page'
|
import Page from './Page'
|
||||||
import Select from './Select'
|
import Select from './Select'
|
||||||
|
@ -41,16 +42,12 @@ export default function SettingsPage() {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (Object.keys(settings).length === 0) return
|
if (Object.keys(settings).length === 0) return
|
||||||
console.log(`${SettingsPage.name}.update`)
|
console.log(`${SettingsPage.name}.update`, {settings})
|
||||||
settingsRepo.update({}, settings)
|
settingsRepo.update({}, settings)
|
||||||
setLightColor(settings.lightColor)
|
setLightColor(settings.lightColor)
|
||||||
setDarkColor(settings.darkColor)
|
setDarkColor(settings.darkColor)
|
||||||
setTheme(settings.theme)
|
setTheme(settings.theme)
|
||||||
if (!settings.alarm || ignoring) return
|
if (!settings.alarm || ignoring) return
|
||||||
DeviceEventEmitter.emit('toast', {
|
|
||||||
value: 'Timers will now run after each set',
|
|
||||||
timeout: 4000,
|
|
||||||
})
|
|
||||||
NativeModules.SettingsModule.ignoreBattery()
|
NativeModules.SettingsModule.ignoreBattery()
|
||||||
setIgnoring(true)
|
setIgnoring(true)
|
||||||
}, [settings, setDarkColor, setLightColor, setTheme, ignoring])
|
}, [settings, setDarkColor, setLightColor, setTheme, ignoring])
|
||||||
|
@ -86,21 +83,9 @@ export default function SettingsPage() {
|
||||||
|
|
||||||
const renderSwitch = useCallback(
|
const renderSwitch = useCallback(
|
||||||
(key: keyof Settings) => (
|
(key: keyof Settings) => (
|
||||||
<Controller
|
<Switch control={control} name={key}>
|
||||||
key={key}
|
{toSentenceCase(key)}
|
||||||
name={key}
|
</Switch>
|
||||||
control={control}
|
|
||||||
render={({field: {onChange, value}}) => (
|
|
||||||
<Switch
|
|
||||||
value={value as boolean}
|
|
||||||
onPress={() => {
|
|
||||||
onChange(!value)
|
|
||||||
}}
|
|
||||||
onChange={onChange}>
|
|
||||||
{toSentenceCase(key)}
|
|
||||||
</Switch>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
),
|
),
|
||||||
[control],
|
[control],
|
||||||
)
|
)
|
||||||
|
@ -185,48 +170,34 @@ export default function SettingsPage() {
|
||||||
toast('Database exported. Check downloads.')
|
toast('Database exported. Check downloads.')
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const buttons = useMemo(
|
const buttons = [
|
||||||
() => [
|
{
|
||||||
{
|
name: 'Alarm sound',
|
||||||
name: 'Alarm sound',
|
element: (
|
||||||
element: (
|
<LabelledButton label="Alarm sound" onPress={changeSound}>
|
||||||
<View
|
{soundString || 'Default'}
|
||||||
key="alarm-sound"
|
</LabelledButton>
|
||||||
style={{
|
),
|
||||||
flexDirection: 'row',
|
},
|
||||||
alignItems: 'center',
|
{
|
||||||
paddingLeft: ITEM_PADDING,
|
name: 'Export database',
|
||||||
}}>
|
element: (
|
||||||
<Subheading style={{width: 100}}>Alarm sound</Subheading>
|
<Button style={{alignSelf: 'flex-start'}} onPress={exportDatabase}>
|
||||||
<Button onPress={changeSound}>{soundString || 'Default'}</Button>
|
Export database
|
||||||
</View>
|
</Button>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Export database',
|
name: 'Import database',
|
||||||
element: (
|
element: (
|
||||||
<Button
|
<Button
|
||||||
key="export-db"
|
style={{alignSelf: 'flex-start'}}
|
||||||
style={{alignSelf: 'flex-start'}}
|
onPress={() => setImporting(true)}>
|
||||||
onPress={exportDatabase}>
|
Import database
|
||||||
Export database
|
</Button>
|
||||||
</Button>
|
),
|
||||||
),
|
},
|
||||||
},
|
]
|
||||||
{
|
|
||||||
name: 'Import database',
|
|
||||||
element: (
|
|
||||||
<Button
|
|
||||||
key="import-db"
|
|
||||||
style={{alignSelf: 'flex-start'}}
|
|
||||||
onPress={() => setImporting(true)}>
|
|
||||||
Import database
|
|
||||||
</Button>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[changeSound, exportDatabase, soundString],
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
49
Switch.tsx
49
Switch.tsx
|
@ -1,36 +1,41 @@
|
||||||
|
import {Control, Controller} from 'react-hook-form'
|
||||||
import {Platform, Pressable} from 'react-native'
|
import {Platform, Pressable} from 'react-native'
|
||||||
import {Switch as PaperSwitch, Text, useTheme} from 'react-native-paper'
|
import {Switch as PaperSwitch, Text, useTheme} from 'react-native-paper'
|
||||||
import {MARGIN} from './constants'
|
import {MARGIN} from './constants'
|
||||||
|
|
||||||
export default function Switch({
|
export default function Switch({
|
||||||
value,
|
control,
|
||||||
onChange,
|
name,
|
||||||
onPress,
|
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
value?: boolean
|
name: string
|
||||||
onChange: (value: boolean) => void
|
control: Control<any, any>
|
||||||
onPress: () => void
|
|
||||||
children: string
|
children: string
|
||||||
}) {
|
}) {
|
||||||
const {colors} = useTheme()
|
const {colors} = useTheme()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Pressable
|
<Controller
|
||||||
onPress={onPress}
|
name={name}
|
||||||
style={{
|
control={control}
|
||||||
flexDirection: 'row',
|
render={({field: {onChange, value}}) => (
|
||||||
flexWrap: 'wrap',
|
<Pressable
|
||||||
alignItems: 'center',
|
onPress={() => onChange(!value)}
|
||||||
marginBottom: Platform.OS === 'ios' ? MARGIN : null,
|
style={{
|
||||||
}}>
|
flexDirection: 'row',
|
||||||
<PaperSwitch
|
flexWrap: 'wrap',
|
||||||
color={colors.primary}
|
alignItems: 'center',
|
||||||
style={{marginRight: MARGIN}}
|
marginBottom: Platform.OS === 'ios' ? MARGIN : null,
|
||||||
value={value}
|
}}>
|
||||||
onValueChange={onChange}
|
<PaperSwitch
|
||||||
/>
|
color={colors.primary}
|
||||||
<Text>{children}</Text>
|
style={{marginRight: MARGIN}}
|
||||||
</Pressable>
|
value={value}
|
||||||
|
onValueChange={onChange}
|
||||||
|
/>
|
||||||
|
<Text>{children}</Text>
|
||||||
|
</Pressable>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user