brandon.presley/Massive
brandon.presley
/
Massive
4
8
Fork 3
Code Issues 13 Pull Requests Activity

Change select style

This commit is contained in:
Brandon Presley 2023-10-26 20:30:41 +13:00
parent 717c07d512
commit 1d13cb9c5d
2 changed files with 41 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
Select.tsx
View File

@ -1,6 +1,13 @@
import React, { useCallback, useMemo, useState } from "react"; import React, { useCallback, useMemo, useState } from "react";
import { View } from "react-native"; import { Pressable, View } from "react-native";
import { Button, Menu, Subheading, useTheme } from "react-native-paper"; import {
Button,
IconButton,
Menu,
Subheading,
useTheme,
} from "react-native-paper";
import AppInput from "./AppInput";
import { ITEM_PADDING } from "./constants"; import { ITEM_PADDING } from "./constants";
export interface Item { export interface Item {
@ -22,13 +29,14 @@ function Select({
}) { }) {
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const { colors } = useTheme(); const { colors } = useTheme();
let menuButton: React.Ref<View> = null;
const selected = useMemo( const selected = useMemo(
() => items.find((item) => item.value === value) || items[0], () => items.find((item) => item.value === value) || items[0],
[items, value] [items, value]
); );
const handlePress = useCallback( const press = useCallback(
(newValue: string) => { (newValue: string) => {
onChange(newValue); onChange(newValue);
setShow(false); setShow(false);
@ -37,38 +45,35 @@ function Select({
); );
return ( return (
<View
style={{
flexDirection: "row",
alignItems: "center",
paddingLeft: ITEM_PADDING,
}}
>
{label && <Subheading style={{ width: 100 }}>{label}</Subheading>}
<Menu <Menu
visible={show} visible={show}
onDismiss={() => setShow(false)} onDismiss={() => setShow(false)}
anchor={ anchor={
<Button <View>
onPress={() => setShow(true)} <Pressable onPress={() => setShow(true)}>
style={{ <AppInput label={label} value={selected.label} editable={false} />
alignSelf: "flex-start", </Pressable>
}} <View
style={{ position: "absolute", right: 0, flexDirection: "row" }}
> >
{selected?.label} <IconButton
</Button> ref={menuButton}
icon="menu-down"
onPress={() => setShow(true)}
/>
</View>
</View>
} }
> >
{items.map((item) => ( {items.map((item) => (
<Menu.Item <Menu.Item
titleStyle={{ color: item.color || colors.onSurface }}
key={item.value}
title={item.label} title={item.label}
onPress={() => handlePress(item.value)} key={item.value}
onPress={() => press(item.value)}
titleStyle={{ color: item.color || colors.onSurface }}
/> />
))} ))}
</Menu> </Menu>
</View>
); );
} }

3
SettingsPage.tsx
View File

@ -2,7 +2,7 @@ import { NavigationProp, useNavigation } from "@react-navigation/native";
import { format } from "date-fns"; import { format } from "date-fns";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { useForm } from "react-hook-form"; 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 DocumentPicker from "react-native-document-picker";
import { Dirs, FileSystem } from "react-native-file-access"; import { Dirs, FileSystem } from "react-native-file-access";
import ConfirmDialog from "./ConfirmDialog"; import ConfirmDialog from "./ConfirmDialog";
@ -324,6 +324,7 @@ export default function SettingsPage() {
<Page term={term} search={setTerm} style={{ flexGrow: 1 }}> <Page term={term} search={setTerm} style={{ flexGrow: 1 }}>
<ScrollView style={{ marginTop: MARGIN, flex: 1 }}> <ScrollView style={{ marginTop: MARGIN, flex: 1 }}>
{switchesMarkup} {switchesMarkup}
<View style={{ marginBottom: MARGIN }} />
{selectsMarkup} {selectsMarkup}
{buttonsMarkup} {buttonsMarkup}
</ScrollView> </ScrollView>