Make best view select consistent with SettingsPage
This commit is contained in:
parent
c1b6659058
commit
567e885e76
|
@ -1,6 +1,7 @@
|
||||||
import {useCallback, useMemo, useState} from 'react'
|
import {useCallback, useMemo, useState} from 'react'
|
||||||
import {StyleProp, View, ViewStyle} from 'react-native'
|
import {View} from 'react-native'
|
||||||
import {Button, Menu, Subheading, useTheme} from 'react-native-paper'
|
import {Button, Menu, Subheading, useTheme} from 'react-native-paper'
|
||||||
|
import {ITEM_PADDING} from './constants'
|
||||||
|
|
||||||
export interface Item {
|
export interface Item {
|
||||||
value: string
|
value: string
|
||||||
|
@ -13,13 +14,11 @@ export default function Select({
|
||||||
onChange,
|
onChange,
|
||||||
items,
|
items,
|
||||||
label,
|
label,
|
||||||
style,
|
|
||||||
}: {
|
}: {
|
||||||
value: string
|
value: string
|
||||||
onChange: (value: string) => void
|
onChange: (value: string) => void
|
||||||
items: Item[]
|
items: Item[]
|
||||||
label?: string
|
label?: string
|
||||||
style?: StyleProp<ViewStyle>
|
|
||||||
}) {
|
}) {
|
||||||
const [show, setShow] = useState(false)
|
const [show, setShow] = useState(false)
|
||||||
const {colors} = useTheme()
|
const {colors} = useTheme()
|
||||||
|
@ -42,8 +41,9 @@ export default function Select({
|
||||||
style={{
|
style={{
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
paddingLeft: ITEM_PADDING,
|
||||||
}}>
|
}}>
|
||||||
{label && <Subheading style={style}>{label}</Subheading>}
|
{label && <Subheading style={{width: 100}}>{label}</Subheading>}
|
||||||
<Menu
|
<Menu
|
||||||
visible={show}
|
visible={show}
|
||||||
onDismiss={() => setShow(false)}
|
onDismiss={() => setShow(false)}
|
||||||
|
|
|
@ -232,7 +232,6 @@ export default function SettingsPage() {
|
||||||
value={item.value}
|
value={item.value}
|
||||||
onChange={item.onChange}
|
onChange={item.onChange}
|
||||||
label={item.name}
|
label={item.name}
|
||||||
style={styles.select}
|
|
||||||
items={item.items}
|
items={item.items}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
|
@ -248,11 +247,7 @@ export default function SettingsPage() {
|
||||||
data={switches}
|
data={switches}
|
||||||
renderItem={renderSwitch}
|
renderItem={renderSwitch}
|
||||||
/>
|
/>
|
||||||
<FlatList
|
<FlatList data={selects} renderItem={renderSelect} />
|
||||||
style={{paddingLeft: ITEM_PADDING}}
|
|
||||||
data={selects}
|
|
||||||
renderItem={renderSelect}
|
|
||||||
/>
|
|
||||||
{'alarm sound'.includes(term.toLowerCase()) && (
|
{'alarm sound'.includes(term.toLowerCase()) && (
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
|
@ -260,7 +255,7 @@ export default function SettingsPage() {
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
paddingLeft: ITEM_PADDING,
|
paddingLeft: ITEM_PADDING,
|
||||||
}}>
|
}}>
|
||||||
<Subheading style={styles.select}>Alarm sound</Subheading>
|
<Subheading style={{width: 100}}>Alarm sound</Subheading>
|
||||||
<Button onPress={changeSound}>{soundString || 'Default'}</Button>
|
<Button onPress={changeSound}>{soundString || 'Default'}</Button>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
@ -268,7 +263,3 @@ export default function SettingsPage() {
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
select: {width: 100},
|
|
||||||
})
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user