Change width of select label
This commit is contained in:
parent
521fa0e9d3
commit
a3e0ba84cb
|
@ -1,5 +1,5 @@
|
|||
import {useCallback, useMemo, useState} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {StyleProp, View, ViewStyle} from 'react-native'
|
||||
import {Button, Menu, Subheading, useTheme} from 'react-native-paper'
|
||||
|
||||
export interface Item {
|
||||
|
@ -13,11 +13,13 @@ export default function Select({
|
|||
onChange,
|
||||
items,
|
||||
label,
|
||||
style,
|
||||
}: {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
items: Item[]
|
||||
label?: string
|
||||
style?: StyleProp<ViewStyle>
|
||||
}) {
|
||||
const [show, setShow] = useState(false)
|
||||
const {colors} = useTheme()
|
||||
|
@ -41,7 +43,7 @@ export default function Select({
|
|||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
{label && <Subheading>{label}</Subheading>}
|
||||
{label && <Subheading style={style}>{label}</Subheading>}
|
||||
<Menu
|
||||
visible={show}
|
||||
onDismiss={() => setShow(false)}
|
||||
|
|
|
@ -6,6 +6,7 @@ import {
|
|||
FlatList,
|
||||
NativeModules,
|
||||
Platform,
|
||||
StyleSheet,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import DocumentPicker from 'react-native-document-picker'
|
||||
|
@ -236,6 +237,7 @@ export default function SettingsPage() {
|
|||
label="Theme"
|
||||
value={theme}
|
||||
onChange={changeTheme}
|
||||
style={styles.select}
|
||||
items={[
|
||||
{label: 'Follow system theme', value: 'system'},
|
||||
{label: 'Dark theme', value: 'dark'},
|
||||
|
@ -248,6 +250,7 @@ export default function SettingsPage() {
|
|||
label="Dark color"
|
||||
value={darkColor}
|
||||
onChange={changeDarkColor}
|
||||
style={styles.select}
|
||||
items={lightColors.map(color => ({
|
||||
label: color.name,
|
||||
value: color.hex,
|
||||
|
@ -260,6 +263,7 @@ export default function SettingsPage() {
|
|||
value={lightColor}
|
||||
onChange={changeLightColor}
|
||||
label="Light color"
|
||||
style={styles.select}
|
||||
items={darkColors.map(color => ({
|
||||
label: color.name,
|
||||
value: color.hex,
|
||||
|
@ -272,6 +276,7 @@ export default function SettingsPage() {
|
|||
value={date}
|
||||
onChange={changeDate}
|
||||
label="Date format"
|
||||
style={styles.select}
|
||||
items={formatOptions.map(option => ({
|
||||
label: format(today, option),
|
||||
value: option,
|
||||
|
@ -292,3 +297,7 @@ export default function SettingsPage() {
|
|||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
select: {width: 100},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue
Block a user