refactor

fateh999 · Jul 21, 2024 · 07f4b3c · 07f4b3c
1 parent 792395c
commit 07f4b3c
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 78 deletions.
diff --git a/src/DropDown.tsx → src/drop-down.tsx b/src/DropDown.tsx → src/drop-down.tsx
@@ -1,21 +1,11 @@
-import { useCallback, 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 } from './types';
+import useDropdown from './use-dropdown';
 
 function Dropdown(props: DropdownProps) {
-  const [enable, setEnable] = useState(false);
-  const { height } = useWindowDimensions();
   const {
     options,
     mode,
@@ -25,7 +15,7 @@ function Dropdown(props: DropdownProps) {
     menuDownIcon = <TextInput.Icon icon={'menu-down'} pointerEvents="none" />,
     value,
     onSelect,
-    maxMenuHeight = height / 2.5,
+    maxMenuHeight,
     menuContentStyle,
     CustomDropdownItem = DropdownItem,
     CustomDropdownInput = DropdownInput,
@@ -36,33 +26,16 @@ function Dropdown(props: DropdownProps) {
     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,
+    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]
-  );
-
   return (
     <Menu
       visible={enable}
@@ -93,7 +66,7 @@ function Dropdown(props: DropdownProps) {
       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,21 +1,12 @@
-import { useCallback, useMemo, useState } from 'react';
-import {
-  Keyboard,
-  ScrollView,
-  useWindowDimensions,
-  View,
-  LayoutChangeEvent,
-  LayoutRectangle,
-  ViewStyle,
-} from 'react-native';
+import { 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 useDropdown from './use-dropdown';
 
 function MultiSelectDropdown(props: MultiSelectDropdownProps) {
-  const [enable, setEnable] = useState(false);
-  const { height } = useWindowDimensions();
   const {
     options,
     mode,
@@ -25,8 +16,8 @@ function MultiSelectDropdown(props: MultiSelectDropdownProps) {
     menuDownIcon = <TextInput.Icon icon={'menu-down'} pointerEvents="none" />,
     value = [],
     onSelect,
-    maxMenuHeight = height / 2.5,
     menuContentStyle,
+    maxMenuHeight,
     CustomMultiSelectDropdownItem = MultiSelectDropdownItem,
     CustomMultiSelectDropdownInput = DropdownInput,
     Touchable = TouchableRipple,
@@ -44,33 +35,16 @@ function MultiSelectDropdown(props: MultiSelectDropdownProps) {
         .join(', '),
     [options, value]
   );
-  const [dropdownLayout, setDropdownLayout] = useState<LayoutRectangle>({
-    x: 0,
-    y: 0,
-    height: 0,
-    width: 0,
-  });
+  const {
+    enable,
+    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]
-  );
-
   return (
     <Menu
       testID={menuTestID}
@@ -101,7 +75,7 @@ function MultiSelectDropdown(props: MultiSelectDropdownProps) {
       }
       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,58 @@
+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,
+    toggleMenu,
+    onLayout,
+    menuStyle,
+    scrollViewStyle,
+    dropdownLayout,
+  };
+}
+
+export default useDropdown;