Change select style
This commit is contained in:
parent
717c07d512
commit
1d13cb9c5d
73
Select.tsx
73
Select.tsx
|
@ -1,6 +1,13 @@
|
|||
import React, { useCallback, useMemo, useState } from "react";
|
||||
import { View } from "react-native";
|
||||
import { Button, Menu, Subheading, useTheme } from "react-native-paper";
|
||||
import { Pressable, View } from "react-native";
|
||||
import {
|
||||
Button,
|
||||
IconButton,
|
||||
Menu,
|
||||
Subheading,
|
||||
useTheme,
|
||||
} from "react-native-paper";
|
||||
import AppInput from "./AppInput";
|
||||
import { ITEM_PADDING } from "./constants";
|
||||
|
||||
export interface Item {
|
||||
|
@ -22,13 +29,14 @@ function Select({
|
|||
}) {
|
||||
const [show, setShow] = useState(false);
|
||||
const { colors } = useTheme();
|
||||
let menuButton: React.Ref<View> = null;
|
||||
|
||||
const selected = useMemo(
|
||||
() => items.find((item) => item.value === value) || items[0],
|
||||
[items, value]
|
||||
);
|
||||
|
||||
const handlePress = useCallback(
|
||||
const press = useCallback(
|
||||
(newValue: string) => {
|
||||
onChange(newValue);
|
||||
setShow(false);
|
||||
|
@ -37,38 +45,35 @@ function Select({
|
|||
);
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingLeft: ITEM_PADDING,
|
||||
}}
|
||||
>
|
||||
{label && <Subheading style={{ width: 100 }}>{label}</Subheading>}
|
||||
<Menu
|
||||
visible={show}
|
||||
onDismiss={() => setShow(false)}
|
||||
anchor={
|
||||
<Button
|
||||
onPress={() => setShow(true)}
|
||||
style={{
|
||||
alignSelf: "flex-start",
|
||||
}}
|
||||
<Menu
|
||||
visible={show}
|
||||
onDismiss={() => setShow(false)}
|
||||
anchor={
|
||||
<View>
|
||||
<Pressable onPress={() => setShow(true)}>
|
||||
<AppInput label={label} value={selected.label} editable={false} />
|
||||
</Pressable>
|
||||
<View
|
||||
style={{ position: "absolute", right: 0, flexDirection: "row" }}
|
||||
>
|
||||
{selected?.label}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{items.map((item) => (
|
||||
<Menu.Item
|
||||
titleStyle={{ color: item.color || colors.onSurface }}
|
||||
key={item.value}
|
||||
title={item.label}
|
||||
onPress={() => handlePress(item.value)}
|
||||
/>
|
||||
))}
|
||||
</Menu>
|
||||
</View>
|
||||
<IconButton
|
||||
ref={menuButton}
|
||||
icon="menu-down"
|
||||
onPress={() => setShow(true)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
>
|
||||
{items.map((item) => (
|
||||
<Menu.Item
|
||||
title={item.label}
|
||||
key={item.value}
|
||||
onPress={() => press(item.value)}
|
||||
titleStyle={{ color: item.color || colors.onSurface }}
|
||||
/>
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@ import { NavigationProp, useNavigation } from "@react-navigation/native";
|
|||
import { format } from "date-fns";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { NativeModules, ScrollView } from "react-native";
|
||||
import { NativeModules, ScrollView, View } from "react-native";
|
||||
import DocumentPicker from "react-native-document-picker";
|
||||
import { Dirs, FileSystem } from "react-native-file-access";
|
||||
import ConfirmDialog from "./ConfirmDialog";
|
||||
|
@ -324,6 +324,7 @@ export default function SettingsPage() {
|
|||
<Page term={term} search={setTerm} style={{ flexGrow: 1 }}>
|
||||
<ScrollView style={{ marginTop: MARGIN, flex: 1 }}>
|
||||
{switchesMarkup}
|
||||
<View style={{ marginBottom: MARGIN }} />
|
||||
{selectsMarkup}
|
||||
{buttonsMarkup}
|
||||
</ScrollView>
|
||||
|
|
Loading…
Reference in New Issue