Merge remote-tracking branch 'upstream/main'

fateh999 · Jul 21, 2024 · e169b9b · e169b9b
2 parents 2c0d2e2 + 9d5baad
commit e169b9b
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-paper-dropdown",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Dropdown component using React Native Paper TextInput and Menu, now also with multiselect",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

diff --git a/src/DropDown.tsx → src/dropdown.tsx b/src/DropDown.tsx → src/dropdown.tsx
@@ -1,27 +1,12 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  Keyboard,
-  ScrollView,
-  useWindowDimensions,
-  View,
-  LayoutChangeEvent,
-  LayoutRectangle,
-  ViewStyle,
-} from 'react-native';
+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, DropdownRef } from './types';
+import useDropdown from './use-dropdown';
+import { forwardRef, useImperativeHandle } from 'react';
 
 function Dropdown(props: DropdownProps, ref: React.Ref<DropdownRef>) {
-  const [enable, setEnable] = useState(false);
-  const { height } = useWindowDimensions();
   const {
     options,
     mode,
@@ -31,7 +16,7 @@ function Dropdown(props: DropdownProps, ref: React.Ref<DropdownRef>) {
     menuDownIcon = <TextInput.Icon icon={'menu-down'} pointerEvents="none" />,
     value,
     onSelect,
-    maxMenuHeight = height / 2.5,
+    maxMenuHeight,
     menuContentStyle,
     CustomDropdownItem = DropdownItem,
     CustomDropdownInput = DropdownInput,
@@ -42,40 +27,22 @@ function Dropdown(props: DropdownProps, ref: React.Ref<DropdownRef>) {
     menuTestID,
   } = props;
   const selectedLabel = options.find((option) => option.value === value)?.label;
-  const [dropdownLayout, setDropdownLayout] = useState<LayoutRectangle>({
-    x: 0,
-    y: 0,
-    height: 0,
-    width: 0,
-  });
+  const {
+    enable,
+    setEnable,
+    toggleMenu,
+    onLayout,
+    menuStyle,
+    scrollViewStyle,
+    dropdownLayout,
+  } = useDropdown(maxMenuHeight);
   const rightIcon = enable ? menuUpIcon : menuDownIcon;
 
-  const toggleMenu = useCallback(() => {
-    Keyboard.dismiss();
-    setEnable(!enable);
-  }, [enable]);
-
-  const onLayout = useCallback(
-    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
-      setDropdownLayout(layout);
-    },
-    []
-  );
-
-  const menuStyle: ViewStyle = useMemo(
-    () => ({
-      width: dropdownLayout.width,
-    }),
-    [dropdownLayout.width]
-  );
-
   useImperativeHandle(ref, () => ({
     focus() {
-      Keyboard.dismiss();
       setEnable(true);
     },
     blur() {
-      Keyboard.dismiss();
       setEnable(false);
     },
   }));
@@ -110,7 +77,7 @@ function Dropdown(props: DropdownProps, ref: React.Ref<DropdownRef>) {
       contentStyle={menuContentStyle}
       testID={menuTestID}
     >
-      <ScrollView style={{ maxHeight: maxMenuHeight }} bounces={false}>
+      <ScrollView style={scrollViewStyle} bounces={false}>
         {options.map((option, index) => {
           return (
             <CustomDropdownItem

diff --git a/src/multi-select-dropdown.tsx b/src/multi-select-dropdown.tsx
@@ -1,30 +1,15 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  Keyboard,
-  ScrollView,
-  useWindowDimensions,
-  View,
-  LayoutChangeEvent,
-  LayoutRectangle,
-  ViewStyle,
-} from 'react-native';
+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 { DropdownRef, MultiSelectDropdownProps } from './types';
+import useDropdown from './use-dropdown';
 
 function MultiSelectDropdown(
   props: MultiSelectDropdownProps,
   ref: React.Ref<DropdownRef>
 ) {
-  const [enable, setEnable] = useState(false);
-  const { height } = useWindowDimensions();
   const {
     options,
     mode,
@@ -34,8 +19,8 @@ function MultiSelectDropdown(
     menuDownIcon = <TextInput.Icon icon={'menu-down'} pointerEvents="none" />,
     value = [],
     onSelect,
-    maxMenuHeight = height / 2.5,
     menuContentStyle,
+    maxMenuHeight,
     CustomMultiSelectDropdownItem = MultiSelectDropdownItem,
     CustomMultiSelectDropdownInput = DropdownInput,
     Touchable = TouchableRipple,
@@ -53,40 +38,22 @@ function MultiSelectDropdown(
         .join(', '),
     [options, value]
   );
-  const [dropdownLayout, setDropdownLayout] = useState<LayoutRectangle>({
-    x: 0,
-    y: 0,
-    height: 0,
-    width: 0,
-  });
+  const {
+    enable,
+    setEnable,
+    toggleMenu,
+    onLayout,
+    menuStyle,
+    scrollViewStyle,
+    dropdownLayout,
+  } = useDropdown(maxMenuHeight);
   const rightIcon = enable ? menuUpIcon : menuDownIcon;
 
-  const toggleMenu = useCallback(() => {
-    Keyboard.dismiss();
-    setEnable(!enable);
-  }, [enable]);
-
-  const onLayout = useCallback(
-    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
-      setDropdownLayout(layout);
-    },
-    []
-  );
-
-  const menuStyle: ViewStyle = useMemo(
-    () => ({
-      width: dropdownLayout.width,
-    }),
-    [dropdownLayout.width]
-  );
-
   useImperativeHandle(ref, () => ({
     focus() {
-      Keyboard.dismiss();
       setEnable(true);
     },
     blur() {
-      Keyboard.dismiss();
       setEnable(false);
     },
   }));
@@ -121,7 +88,7 @@ function MultiSelectDropdown(
       }
       contentStyle={menuContentStyle}
     >
-      <ScrollView style={{ maxHeight: maxMenuHeight }} bounces={false}>
+      <ScrollView style={scrollViewStyle} bounces={false}>
         {options.map((option, index) => {
           return (
             <CustomMultiSelectDropdownItem

diff --git a/src/use-dropdown.ts b/src/use-dropdown.ts
@@ -0,0 +1,59 @@
+import { useCallback, useState, useMemo } from 'react';
+import {
+  Keyboard,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  useWindowDimensions,
+  ViewStyle,
+} from 'react-native';
+
+function useDropdown(maxMenuHeight?: number, maxHeightFraction: number = 2.5) {
+  const [enable, setEnable] = useState(false);
+  const { height } = useWindowDimensions();
+  const finalMenuHeight = maxMenuHeight ?? height / maxHeightFraction;
+
+  const [dropdownLayout, setDropdownLayout] = useState<LayoutRectangle>({
+    x: 0,
+    y: 0,
+    height: 0,
+    width: 0,
+  });
+
+  const toggleMenu = useCallback(() => {
+    Keyboard.dismiss();
+    setEnable((prev) => !prev);
+  }, []);
+
+  const onLayout = useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      setDropdownLayout(layout);
+    },
+    []
+  );
+
+  const menuStyle: ViewStyle = useMemo(
+    () => ({
+      width: dropdownLayout.width,
+    }),
+    [dropdownLayout.width]
+  );
+
+  const scrollViewStyle: ViewStyle = useMemo(
+    () => ({
+      maxHeight: finalMenuHeight,
+    }),
+    [finalMenuHeight]
+  );
+
+  return {
+    enable,
+    setEnable,
+    toggleMenu,
+    onLayout,
+    menuStyle,
+    scrollViewStyle,
+    dropdownLayout,
+  };
+}
+
+export default useDropdown;