Merge pull request #108 from cervisebas/main

feat: add focus and blur methods by reference
fateh999 · Jul 21, 2024 · 5141683 · 5141683
2 parents 9d5baad + e169b9b
commit 5141683
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 10 deletions.
diff --git 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<string>();
   const [colors, setColors] = useState<string[]>([]);
+  const refDropdown1 = useRef<DropdownRef>(null);
   const Theme = nightMode ? MD3DarkTheme : MD3LightTheme;
 
   return (
@@ -146,6 +149,7 @@ export default function App() {
               <View style={styles.spacer} />
               <Paragraph>Default Dropdown</Paragraph>
               <Dropdown
+                ref={refDropdown1}
                 label={'Gender'}
                 placeholder="Select Gender"
                 options={OPTIONS}
@@ -214,6 +218,25 @@ export default function App() {
                 onSelect={setColors}
                 mode={'outlined'}
               />
+
+              <View style={styles.spacer} />
+              <View style={styles.spacer} />
+
+              <Headline>References</Headline>
+              <View style={styles.spacer} />
+              <Button
+                mode={'contained'}
+                onPress={() => refDropdown1.current?.focus()}
+              >
+                Focus
+              </Button>
+              <View style={styles.spacer} />
+              <Button
+                mode={'contained'}
+                onPress={() => refDropdown1.current?.blur()}
+              >
+                Blur
+              </Button>
             </View>
           </ScrollView>
         </View>

diff --git 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
@@ -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
@@ -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 (
     <TextInput
@@ -14,6 +21,7 @@ function DropdownInput(props: DropdownInputProps) {
       mode={mode}
       editable={false}
       disabled={disabled}
+      error={error}
     />
   );
 }

diff --git 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<DropdownRef>) {
   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 (
     <Menu
       visible={enable}
@@ -86,4 +97,4 @@ function Dropdown(props: DropdownProps) {
   );
 }
 
-export default Dropdown;
+export default forwardRef(Dropdown);
diff --git a/src/index.tsx b/src/index.tsx
@@ -10,6 +10,7 @@ import {
   Option,
   MultiSelectDropdownProps,
   MultiSelectDropdownItemProps,
+  DropdownRef,
 } from './types';
 
 export {
@@ -24,4 +25,5 @@ export {
   Option,
   MultiSelectDropdownProps,
   MultiSelectDropdownItemProps,
+  DropdownRef,
 };
diff --git a/src/multi-select-dropdown.tsx b/src/multi-select-dropdown.tsx
@@ -1,12 +1,15 @@
-import { useMemo } from 'react';
+import { forwardRef, useImperativeHandle, useMemo } from 'react';
 import { ScrollView, View } from 'react-native';
 import { Menu, TextInput, TouchableRipple } from 'react-native-paper';
 import DropdownInput from './dropdown-input';
 import MultiSelectDropdownItem from './multi-select-dropdown-item';
-import { MultiSelectDropdownProps } from './types';
+import { DropdownRef, MultiSelectDropdownProps } from './types';
 import useDropdown from './use-dropdown';
 
-function MultiSelectDropdown(props: MultiSelectDropdownProps) {
+function MultiSelectDropdown(
+  props: MultiSelectDropdownProps,
+  ref: React.Ref<DropdownRef>
+) {
   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 (
     <Menu
       testID={menuTestID}
@@ -94,4 +107,4 @@ function MultiSelectDropdown(props: MultiSelectDropdownProps) {
   );
 }
 
-export default MultiSelectDropdown;
+export default forwardRef(MultiSelectDropdown);
diff --git a/src/types.ts b/src/types.ts
@@ -78,3 +78,8 @@ export type MultiSelectDropdownItemProps = {
   isLast: boolean;
   menuItemTestID?: string;
 };
+
+export type DropdownRef = {
+  blur: () => void;
+  focus: () => void;
+};
diff --git 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,