Use react-native-paper menus on ViewBest
This commit is contained in:
parent
87233f34a8
commit
6fb2022e4d
43
ViewBest.tsx
43
ViewBest.tsx
|
@ -1,4 +1,3 @@
|
||||||
import {Picker} from '@react-native-picker/picker'
|
|
||||||
import {RouteProp, useRoute} from '@react-navigation/native'
|
import {RouteProp, useRoute} from '@react-navigation/native'
|
||||||
import {format} from 'date-fns'
|
import {format} from 'date-fns'
|
||||||
import {useEffect, useState} from 'react'
|
import {useEffect, useState} from 'react'
|
||||||
|
@ -10,13 +9,12 @@ import {setRepo} from './db'
|
||||||
import GymSet from './gym-set'
|
import GymSet from './gym-set'
|
||||||
import {Metrics} from './metrics'
|
import {Metrics} from './metrics'
|
||||||
import {Periods} from './periods'
|
import {Periods} from './periods'
|
||||||
|
import Select from './Select'
|
||||||
import StackHeader from './StackHeader'
|
import StackHeader from './StackHeader'
|
||||||
import useDark from './use-dark'
|
|
||||||
import Volume from './volume'
|
import Volume from './volume'
|
||||||
|
|
||||||
export default function ViewBest() {
|
export default function ViewBest() {
|
||||||
const {params} = useRoute<RouteProp<BestPageParams, 'ViewBest'>>()
|
const {params} = useRoute<RouteProp<BestPageParams, 'ViewBest'>>()
|
||||||
const dark = useDark()
|
|
||||||
const [weights, setWeights] = useState<GymSet[]>([])
|
const [weights, setWeights] = useState<GymSet[]>([])
|
||||||
const [volumes, setVolumes] = useState<Volume[]>([])
|
const [volumes, setVolumes] = useState<Volume[]>([])
|
||||||
const [metric, setMetric] = useState(Metrics.Weight)
|
const [metric, setMetric] = useState(Metrics.Weight)
|
||||||
|
@ -67,24 +65,27 @@ export default function ViewBest() {
|
||||||
<>
|
<>
|
||||||
<StackHeader title={params.best.name} />
|
<StackHeader title={params.best.name} />
|
||||||
<View style={{padding: PADDING}}>
|
<View style={{padding: PADDING}}>
|
||||||
<Picker
|
<Select
|
||||||
style={{color: dark ? 'white' : 'black'}}
|
items={[
|
||||||
dropdownIconColor={dark ? 'white' : 'black'}
|
{value: Metrics.Volume, label: Metrics.Volume},
|
||||||
selectedValue={metric}
|
{value: Metrics.OneRepMax, label: Metrics.OneRepMax},
|
||||||
onValueChange={value => setMetric(value)}>
|
{
|
||||||
<Picker.Item value={Metrics.Volume} label={Metrics.Volume} />
|
label: Metrics.Weight,
|
||||||
<Picker.Item value={Metrics.Weight} label={Metrics.Weight} />
|
value: Metrics.Weight,
|
||||||
<Picker.Item value={Metrics.OneRepMax} label={Metrics.OneRepMax} />
|
},
|
||||||
</Picker>
|
]}
|
||||||
<Picker
|
onChange={value => setMetric(value as Metrics)}
|
||||||
style={{color: dark ? 'white' : 'black'}}
|
value={metric}
|
||||||
dropdownIconColor={dark ? 'white' : 'black'}
|
/>
|
||||||
selectedValue={period}
|
<Select
|
||||||
onValueChange={value => setPeriod(value)}>
|
items={[
|
||||||
<Picker.Item value={Periods.Weekly} label={Periods.Weekly} />
|
{value: Periods.Weekly, label: Periods.Weekly},
|
||||||
<Picker.Item value={Periods.Monthly} label={Periods.Monthly} />
|
{value: Periods.Monthly, label: Periods.Monthly},
|
||||||
<Picker.Item value={Periods.Yearly} label={Periods.Yearly} />
|
{value: Periods.Yearly, label: Periods.Yearly},
|
||||||
</Picker>
|
]}
|
||||||
|
onChange={value => setPeriod(value as Periods)}
|
||||||
|
value={period}
|
||||||
|
/>
|
||||||
{metric === Metrics.Volume ? (
|
{metric === Metrics.Volume ? (
|
||||||
<Chart
|
<Chart
|
||||||
yData={volumes.map(v => v.value)}
|
yData={volumes.map(v => v.value)}
|
||||||
|
|
Loading…
Reference in New Issue