Add labels to selects
This commit is contained in:
parent
d3c3a09a0f
commit
de4c8081a6
14
Select.tsx
14
Select.tsx
|
@ -1,6 +1,6 @@
|
|||
import {useCallback, useMemo, useState} from 'react'
|
||||
import {Button, Menu, useTheme} from 'react-native-paper'
|
||||
import {MARGIN} from './constants'
|
||||
import {View} from 'react-native'
|
||||
import {Button, Menu, Subheading, useTheme} from 'react-native-paper'
|
||||
|
||||
export interface Item {
|
||||
value: string
|
||||
|
@ -12,10 +12,12 @@ export default function Select({
|
|||
value,
|
||||
onChange,
|
||||
items,
|
||||
label,
|
||||
}: {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
items: Item[]
|
||||
label?: string
|
||||
}) {
|
||||
const [show, setShow] = useState(false)
|
||||
const {colors} = useTheme()
|
||||
|
@ -34,6 +36,12 @@ export default function Select({
|
|||
)
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
{label && <Subheading>{label}</Subheading>}
|
||||
<Menu
|
||||
visible={show}
|
||||
onDismiss={() => setShow(false)}
|
||||
|
@ -42,7 +50,6 @@ export default function Select({
|
|||
onPress={() => setShow(true)}
|
||||
style={{
|
||||
alignSelf: 'flex-start',
|
||||
marginTop: MARGIN,
|
||||
}}>
|
||||
{selected?.label}
|
||||
</Button>
|
||||
|
@ -56,5 +63,6 @@ export default function Select({
|
|||
/>
|
||||
))}
|
||||
</Menu>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -6,9 +6,10 @@ import {
|
|||
FlatList,
|
||||
NativeModules,
|
||||
Platform,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import DocumentPicker from 'react-native-document-picker'
|
||||
import {Button} from 'react-native-paper'
|
||||
import {Button, Subheading} from 'react-native-paper'
|
||||
import {darkColors, lightColors} from './colors'
|
||||
import {MARGIN} from './constants'
|
||||
import {settingsRepo} from './db'
|
||||
|
@ -232,6 +233,7 @@ export default function SettingsPage() {
|
|||
/>
|
||||
{'theme'.includes(term.toLowerCase()) && (
|
||||
<Select
|
||||
label="Theme"
|
||||
value={theme}
|
||||
onChange={changeTheme}
|
||||
items={[
|
||||
|
@ -243,10 +245,11 @@ export default function SettingsPage() {
|
|||
)}
|
||||
{'color'.includes(term.toLowerCase()) && (
|
||||
<Select
|
||||
label="Dark color"
|
||||
value={darkColor}
|
||||
onChange={changeDarkColor}
|
||||
items={lightColors.map(color => ({
|
||||
label: `Dark color: ${color.name}`,
|
||||
label: color.name,
|
||||
value: color.hex,
|
||||
color: color.hex,
|
||||
}))}
|
||||
|
@ -256,8 +259,9 @@ export default function SettingsPage() {
|
|||
<Select
|
||||
value={lightColor}
|
||||
onChange={changeLightColor}
|
||||
label="Light color"
|
||||
items={darkColors.map(color => ({
|
||||
label: `Light color: ${color.name}`,
|
||||
label: color.name,
|
||||
value: color.hex,
|
||||
color: color.hex,
|
||||
}))}
|
||||
|
@ -267,18 +271,22 @@ export default function SettingsPage() {
|
|||
<Select
|
||||
value={date}
|
||||
onChange={changeDate}
|
||||
label="Date format"
|
||||
items={formatOptions.map(option => ({
|
||||
label: `Date format: ${format(today, option)}`,
|
||||
label: format(today, option),
|
||||
value: option,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
{'alarm sound'.includes(term.toLowerCase()) && (
|
||||
<Button
|
||||
style={{alignSelf: 'flex-start', marginTop: MARGIN}}
|
||||
onPress={changeSound}>
|
||||
Alarm sound{soundString}
|
||||
</Button>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<Subheading>Alarm sound</Subheading>
|
||||
<Button onPress={changeSound}>{soundString || 'Default'}</Button>
|
||||
</View>
|
||||
)}
|
||||
</Page>
|
||||
</>
|
||||
|
|
|
@ -102,6 +102,7 @@ export default function ViewBest() {
|
|||
<StackHeader title={params.best.name} />
|
||||
<View style={{padding: PADDING}}>
|
||||
<Select
|
||||
label="Metric"
|
||||
items={[
|
||||
{value: Metrics.Volume, label: Metrics.Volume},
|
||||
{value: Metrics.OneRepMax, label: Metrics.OneRepMax},
|
||||
|
@ -114,6 +115,7 @@ export default function ViewBest() {
|
|||
value={metric}
|
||||
/>
|
||||
<Select
|
||||
label="Period"
|
||||
items={[
|
||||
{value: Periods.Weekly, label: Periods.Weekly},
|
||||
{value: Periods.Monthly, label: Periods.Monthly},
|
||||
|
|
Loading…
Reference in New Issue
Block a user