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