diff --git a/Example/src/App.tsx b/Example/src/App.tsx index ca48d19..dee3b71 100644 --- a/Example/src/App.tsx +++ b/Example/src/App.tsx @@ -1,7 +1,8 @@ -import { useMemo, useState } from 'react'; +import { useMemo, useRef, useState } from 'react'; import { ScrollView, StyleSheet, View, ViewStyle } from 'react-native'; import { Appbar, + Button, Divider, Headline, MD3DarkTheme, @@ -17,6 +18,7 @@ import { MultiSelectDropdown, DropdownInputProps, DropdownItemProps, + DropdownRef, } from 'react-native-paper-dropdown'; const OPTIONS = [ @@ -119,6 +121,7 @@ export default function App() { const [nightMode, setNightmode] = useState(false); const [gender, setGender] = useState(); const [colors, setColors] = useState([]); + const refDropdown1 = useRef(null); const Theme = nightMode ? MD3DarkTheme : MD3LightTheme; return ( @@ -146,6 +149,7 @@ export default function App() { Default Dropdown + + + + + References + + + + diff --git a/README.md b/README.md index 15b1c90..4a13423 100644 --- a/README.md +++ b/README.md @@ -145,6 +145,13 @@ export default function App() { | `disabled` | `boolean` | Whether the dropdown is disabled. | | `error` | `boolean` | Whether the dropdown has an error. | +## Methods + +| Method | Return | Description | +| ----------- | ------ | ------------------------------ | +| `focus()` | `void` | Open the dropdown manually. | +| `blur()` | `void` | Close the dropdown manually. | + ## Latest Documentation - [https://fateh999.github.io/react-native-paper-dropdown](https://fateh999.github.io/react-native-paper-dropdown) diff --git a/docs/README.md b/docs/README.md index 05e1176..e7a8a7a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -330,6 +330,13 @@ const styles = StyleSheet.create({ | `disabled` | `boolean` | Whether the dropdown is disabled. | | `error` | `boolean` | Whether the dropdown has an error. | +## Methods + +| Method | Return | Description | +| ----------- | ------ | ------------------------------ | +| `focus()` | `void` | Open the dropdown manually. | +| `blur()` | `void` | Close the dropdown manually. | + ## Customization You can customize the appearance and behavior of the dropdowns by using the provided props like `menuUpIcon`, `menuDownIcon`, `CustomDropdownItem`, `CustomDropdownInput`, and `menuContentStyle`. diff --git a/src/dropdown-input.tsx b/src/dropdown-input.tsx index 04396a5..5315271 100644 --- a/src/dropdown-input.tsx +++ b/src/dropdown-input.tsx @@ -2,8 +2,15 @@ import { TextInput } from 'react-native-paper'; import { DropdownInputProps } from './types'; function DropdownInput(props: DropdownInputProps) { - const { placeholder, label, rightIcon, selectedLabel, mode, disabled } = - props; + const { + placeholder, + label, + rightIcon, + selectedLabel, + mode, + disabled, + error, + } = props; return ( ); } diff --git a/src/dropdown.tsx b/src/dropdown.tsx index f6259ba..52adb3b 100644 --- a/src/dropdown.tsx +++ b/src/dropdown.tsx @@ -2,10 +2,11 @@ import { ScrollView, View } from 'react-native'; import { Menu, TextInput, TouchableRipple } from 'react-native-paper'; import DropdownItem from './dropdown-item'; import DropdownInput from './dropdown-input'; -import { DropdownProps } from './types'; +import { DropdownProps, DropdownRef } from './types'; import useDropdown from './use-dropdown'; +import { forwardRef, useImperativeHandle } from 'react'; -function Dropdown(props: DropdownProps) { +function Dropdown(props: DropdownProps, ref: React.Ref) { const { options, mode, @@ -28,6 +29,7 @@ function Dropdown(props: DropdownProps) { const selectedLabel = options.find((option) => option.value === value)?.label; const { enable, + setEnable, toggleMenu, onLayout, menuStyle, @@ -36,6 +38,15 @@ function Dropdown(props: DropdownProps) { } = useDropdown(maxMenuHeight); const rightIcon = enable ? menuUpIcon : menuDownIcon; + useImperativeHandle(ref, () => ({ + focus() { + setEnable(true); + }, + blur() { + setEnable(false); + }, + })); + return ( +) { const { options, mode, @@ -37,6 +40,7 @@ function MultiSelectDropdown(props: MultiSelectDropdownProps) { ); const { enable, + setEnable, toggleMenu, onLayout, menuStyle, @@ -45,6 +49,15 @@ function MultiSelectDropdown(props: MultiSelectDropdownProps) { } = useDropdown(maxMenuHeight); const rightIcon = enable ? menuUpIcon : menuDownIcon; + useImperativeHandle(ref, () => ({ + focus() { + setEnable(true); + }, + blur() { + setEnable(false); + }, + })); + return ( void; + focus: () => void; +}; diff --git a/src/use-dropdown.ts b/src/use-dropdown.ts index 3d99d01..fd20012 100644 --- a/src/use-dropdown.ts +++ b/src/use-dropdown.ts @@ -47,6 +47,7 @@ function useDropdown(maxMenuHeight?: number, maxHeightFraction: number = 2.5) { return { enable, + setEnable, toggleMenu, onLayout, menuStyle,