Finish removing react-native-picker-select
Replaced with react-native-paper menus.
This commit is contained in:
parent
e7e2f299da
commit
3528ba593f
41
Select.tsx
41
Select.tsx
|
@ -1,7 +1,12 @@
|
||||||
import {useState} from 'react'
|
import {useCallback, useMemo, useState} from 'react'
|
||||||
import {Button, Menu, useTheme} from 'react-native-paper'
|
import {Button, Menu, useTheme} from 'react-native-paper'
|
||||||
import RNPickerSelect from 'react-native-picker-select'
|
import {MARGIN} from './constants'
|
||||||
import {Item} from 'react-native-picker-select'
|
|
||||||
|
export interface Item {
|
||||||
|
value: string
|
||||||
|
label: string
|
||||||
|
color?: string
|
||||||
|
}
|
||||||
|
|
||||||
export default function Select({
|
export default function Select({
|
||||||
value,
|
value,
|
||||||
|
@ -12,17 +17,39 @@ export default function Select({
|
||||||
onChange: (value: string) => void
|
onChange: (value: string) => void
|
||||||
items: Item[]
|
items: Item[]
|
||||||
}) {
|
}) {
|
||||||
const {colors} = useTheme()
|
|
||||||
const [show, setShow] = useState(false)
|
const [show, setShow] = useState(false)
|
||||||
|
const {colors} = useTheme()
|
||||||
|
|
||||||
|
const selected = useMemo(
|
||||||
|
() => items.find(item => item.value === value),
|
||||||
|
[items, value],
|
||||||
|
)
|
||||||
|
|
||||||
|
const handlePress = useCallback(
|
||||||
|
(newValue: string) => {
|
||||||
|
onChange(newValue)
|
||||||
|
setShow(false)
|
||||||
|
},
|
||||||
|
[onChange],
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Menu
|
<Menu
|
||||||
style={{alignSelf: 'flex-start', justifyContent: 'flex-start'}}
|
|
||||||
visible={show}
|
visible={show}
|
||||||
onDismiss={() => setShow(false)}
|
onDismiss={() => setShow(false)}
|
||||||
anchor={<Button style={{alignSelf: 'flex-start'}}>{value}</Button>}>
|
anchor={
|
||||||
|
<Button
|
||||||
|
onPress={() => setShow(true)}
|
||||||
|
style={{alignSelf: 'flex-start', marginTop: MARGIN}}>
|
||||||
|
{selected.label}
|
||||||
|
</Button>
|
||||||
|
}>
|
||||||
{items.map(item => (
|
{items.map(item => (
|
||||||
<Menu.Item title={item.label} onPress={() => onChange(item.value)} />
|
<Menu.Item
|
||||||
|
titleStyle={{color: item.color || colors.text}}
|
||||||
|
title={item.label}
|
||||||
|
onPress={() => handlePress(item.value)}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</Menu>
|
</Menu>
|
||||||
)
|
)
|
||||||
|
|
|
@ -238,7 +238,7 @@ export default function SettingsPage() {
|
||||||
value={date}
|
value={date}
|
||||||
onChange={changeDate}
|
onChange={changeDate}
|
||||||
items={formatOptions.map(option => ({
|
items={formatOptions.map(option => ({
|
||||||
label: format(today, option),
|
label: `Date format: ${format(today, option)}`,
|
||||||
value: option,
|
value: option,
|
||||||
}))}
|
}))}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -39,7 +39,6 @@
|
||||||
"react-native-linear-gradient": "^2.6.2",
|
"react-native-linear-gradient": "^2.6.2",
|
||||||
"react-native-pager-view": "^6.0.1",
|
"react-native-pager-view": "^6.0.1",
|
||||||
"react-native-paper": "^4.12.5",
|
"react-native-paper": "^4.12.5",
|
||||||
"react-native-picker-select": "^8.0.4",
|
|
||||||
"react-native-reanimated": "^2.12.0",
|
"react-native-reanimated": "^2.12.0",
|
||||||
"react-native-safe-area-context": "^4.4.1",
|
"react-native-safe-area-context": "^4.4.1",
|
||||||
"react-native-screens": "^3.18.2",
|
"react-native-screens": "^3.18.2",
|
||||||
|
|
21
yarn.lock
21
yarn.lock
|
@ -2200,16 +2200,6 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@react-native-picker/picker@npm:^1.8.3":
|
|
||||||
version: 1.16.8
|
|
||||||
resolution: "@react-native-picker/picker@npm:1.16.8"
|
|
||||||
peerDependencies:
|
|
||||||
react: 16 || 17
|
|
||||||
react-native: ">=0.57"
|
|
||||||
checksum: c0176e41ba7486bf0a27ab5471315848cb166330313bd12e29ee65b7d2e1dfde22383de6a89be15770d132b33bca1764e64feee3acf22c67c3733fd877d3e91f
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"@react-native-picker/picker@npm:^2.4.4":
|
"@react-native-picker/picker@npm:^2.4.4":
|
||||||
version: 2.4.8
|
version: 2.4.8
|
||||||
resolution: "@react-native-picker/picker@npm:2.4.8"
|
resolution: "@react-native-picker/picker@npm:2.4.8"
|
||||||
|
@ -7324,7 +7314,6 @@ __metadata:
|
||||||
react-native-linear-gradient: ^2.6.2
|
react-native-linear-gradient: ^2.6.2
|
||||||
react-native-pager-view: ^6.0.1
|
react-native-pager-view: ^6.0.1
|
||||||
react-native-paper: ^4.12.5
|
react-native-paper: ^4.12.5
|
||||||
react-native-picker-select: ^8.0.4
|
|
||||||
react-native-reanimated: ^2.12.0
|
react-native-reanimated: ^2.12.0
|
||||||
react-native-safe-area-context: ^4.4.1
|
react-native-safe-area-context: ^4.4.1
|
||||||
react-native-screens: ^3.18.2
|
react-native-screens: ^3.18.2
|
||||||
|
@ -8907,16 +8896,6 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"react-native-picker-select@npm:^8.0.4":
|
|
||||||
version: 8.0.4
|
|
||||||
resolution: "react-native-picker-select@npm:8.0.4"
|
|
||||||
dependencies:
|
|
||||||
"@react-native-picker/picker": ^1.8.3
|
|
||||||
lodash.isequal: ^4.5.0
|
|
||||||
checksum: 9656a2f7b330a9e5a8b6b90393140fc5370762d2a14de4c5d31ce43de8abc677870c7f2ee8a493f48535157ddcbc3311cf3f41dac262bd84e50e913f0d4a24ff
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"react-native-reanimated@npm:^2.12.0":
|
"react-native-reanimated@npm:^2.12.0":
|
||||||
version: 2.12.0
|
version: 2.12.0
|
||||||
resolution: "react-native-reanimated@npm:2.12.0"
|
resolution: "react-native-reanimated@npm:2.12.0"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user