Merge pull request 'Change width of select label' (#123) from settings-page-select-styling into master
Reviewed-on: brandon.presley/Massive#123
This commit is contained in:
commit
4a32f5c85e
|
@ -1,5 +1,5 @@
|
||||||
import {useCallback, useMemo, useState} from 'react'
|
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'
|
import {Button, Menu, Subheading, useTheme} from 'react-native-paper'
|
||||||
|
|
||||||
export interface Item {
|
export interface Item {
|
||||||
|
@ -13,11 +13,13 @@ 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()
|
||||||
|
@ -41,7 +43,7 @@ export default function Select({
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
}}>
|
}}>
|
||||||
{label && <Subheading>{label}</Subheading>}
|
{label && <Subheading style={style}>{label}</Subheading>}
|
||||||
<Menu
|
<Menu
|
||||||
visible={show}
|
visible={show}
|
||||||
onDismiss={() => setShow(false)}
|
onDismiss={() => setShow(false)}
|
||||||
|
|
|
@ -6,6 +6,7 @@ import {
|
||||||
FlatList,
|
FlatList,
|
||||||
NativeModules,
|
NativeModules,
|
||||||
Platform,
|
Platform,
|
||||||
|
StyleSheet,
|
||||||
View,
|
View,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
import DocumentPicker from 'react-native-document-picker'
|
import DocumentPicker from 'react-native-document-picker'
|
||||||
|
@ -236,6 +237,7 @@ export default function SettingsPage() {
|
||||||
label="Theme"
|
label="Theme"
|
||||||
value={theme}
|
value={theme}
|
||||||
onChange={changeTheme}
|
onChange={changeTheme}
|
||||||
|
style={styles.select}
|
||||||
items={[
|
items={[
|
||||||
{label: 'Follow system theme', value: 'system'},
|
{label: 'Follow system theme', value: 'system'},
|
||||||
{label: 'Dark theme', value: 'dark'},
|
{label: 'Dark theme', value: 'dark'},
|
||||||
|
@ -248,6 +250,7 @@ export default function SettingsPage() {
|
||||||
label="Dark color"
|
label="Dark color"
|
||||||
value={darkColor}
|
value={darkColor}
|
||||||
onChange={changeDarkColor}
|
onChange={changeDarkColor}
|
||||||
|
style={styles.select}
|
||||||
items={lightColors.map(color => ({
|
items={lightColors.map(color => ({
|
||||||
label: color.name,
|
label: color.name,
|
||||||
value: color.hex,
|
value: color.hex,
|
||||||
|
@ -260,6 +263,7 @@ export default function SettingsPage() {
|
||||||
value={lightColor}
|
value={lightColor}
|
||||||
onChange={changeLightColor}
|
onChange={changeLightColor}
|
||||||
label="Light color"
|
label="Light color"
|
||||||
|
style={styles.select}
|
||||||
items={darkColors.map(color => ({
|
items={darkColors.map(color => ({
|
||||||
label: color.name,
|
label: color.name,
|
||||||
value: color.hex,
|
value: color.hex,
|
||||||
|
@ -272,6 +276,7 @@ export default function SettingsPage() {
|
||||||
value={date}
|
value={date}
|
||||||
onChange={changeDate}
|
onChange={changeDate}
|
||||||
label="Date format"
|
label="Date format"
|
||||||
|
style={styles.select}
|
||||||
items={formatOptions.map(option => ({
|
items={formatOptions.map(option => ({
|
||||||
label: format(today, option),
|
label: format(today, option),
|
||||||
value: 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