From 07f4b3cd8c85155014240fa1b770ff87dbb185f6 Mon Sep 17 00:00:00 2001 From: Fateh Farooqui Date: Mon, 22 Jul 2024 00:29:35 +0530 Subject: [PATCH 1/3] refactor --- src/{DropDown.tsx => drop-down.tsx} | 51 ++++++------------------- src/multi-select-dropdown.tsx | 52 +++++++------------------- src/use-dropdown.ts | 58 +++++++++++++++++++++++++++++ 3 files changed, 83 insertions(+), 78 deletions(-) rename src/{DropDown.tsx => drop-down.tsx} (70%) create mode 100644 src/use-dropdown.ts diff --git a/src/DropDown.tsx b/src/drop-down.tsx similarity index 70% rename from src/DropDown.tsx rename to src/drop-down.tsx index c4d62f4..f6259ba 100644 --- a/src/DropDown.tsx +++ b/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 = , 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({ - 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 ( - + {options.map((option, index) => { return ( , 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({ - 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 ( - + {options.map((option, index) => { return ( ({ + 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; From 15afe8c7656e8b9403b1153b7f37df10da9d03df Mon Sep 17 00:00:00 2001 From: Fateh Farooqui Date: Mon, 22 Jul 2024 00:30:10 +0530 Subject: [PATCH 2/3] Fix file name --- src/{drop-down.tsx => dropdown.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{drop-down.tsx => dropdown.tsx} (100%) diff --git a/src/drop-down.tsx b/src/dropdown.tsx similarity index 100% rename from src/drop-down.tsx rename to src/dropdown.tsx From 9d5baad721e16a5ba6a39c237af83bde34af8d84 Mon Sep 17 00:00:00 2001 From: Fateh Farooqui Date: Mon, 22 Jul 2024 00:30:36 +0530 Subject: [PATCH 3/3] chore: release 2.0.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index eb0c15a..3d2a9c7 100644 --- 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",