diff --git a/README.md b/README.md index 324d56c1..4040fd78 100644 --- a/README.md +++ b/README.md @@ -135,6 +135,8 @@ For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@danish1658/react-native-d | ---- | ---- | ----------- | | save| string | Pass ('key' or 'value') to save data of your choice in your local state variable | onSelect| Function | Pass any function that you want to trigger immediately after a value is selected +| onOpen| Function | Pass any function that you want to trigger when the dropdown is opened +| onClose| Function | Pass any function that you want to trigger when the dropdown is closed | placeholder | String | Placeholder text that will be displayed in the select box | search | boolean | set to false if you dont want to use search functionality | maxHeight| Number | Maximum height of the dropdown wrapper to occupy diff --git a/components/MultipleSelectList.tsx b/components/MultipleSelectList.tsx index a3bba1d8..8abe8af8 100644 --- a/components/MultipleSelectList.tsx +++ b/components/MultipleSelectList.tsx @@ -34,6 +34,8 @@ const MultipleSelectList: React.FC = ({ search = true, searchPlaceholder = "search", onSelect = () => {}, + onOpen = () => {}, + onClose = () => {}, label, notFoundText = "No data found", disabledItemStyles, @@ -58,22 +60,22 @@ const MultipleSelectList: React.FC = ({ const slidedown = () => { setDropdown(true) - Animated.timing(animatedvalue,{ toValue:height, duration:500, useNativeDriver:false, }).start() + onOpen() } const slideup = () => { - Animated.timing(animatedvalue,{ toValue:0, duration:500, useNativeDriver:false, }).start(() => setDropdown(false)) + onClose() } React.useEffect( () => { diff --git a/components/SelectList.tsx b/components/SelectList.tsx index 234a7e10..824efd09 100644 --- a/components/SelectList.tsx +++ b/components/SelectList.tsx @@ -35,6 +35,8 @@ const SelectList: React.FC = ({ disabledItemStyles, disabledTextStyles, onSelect = () => {}, + onOpen = () => {}, + onClose = () => {}, save = 'key', dropdownShown = false, fontFamily @@ -57,15 +59,16 @@ const SelectList: React.FC = ({ useNativeDriver:false, }).start() + onOpen() } const slideup = () => { - Animated.timing(animatedvalue,{ toValue:0, duration:500, useNativeDriver:false, }).start(() => setDropdown(false)) + onClose() } React.useEffect( () => { diff --git a/index.d.ts b/index.d.ts index cee3ba03..5c102efd 100644 --- a/index.d.ts +++ b/index.d.ts @@ -78,6 +78,16 @@ export interface SelectListProps { */ onSelect?: () => void, + /** + * Trigger an action when dropdown is opened + */ + onOpen?: () => void, + + /** + * Trigger an action when dropdown is closed + */ + onClose?: () => void, + /** * set fontFamily of whole component Text */ @@ -191,6 +201,16 @@ export interface MultipleSelectListProps { */ onSelect?: () => void, + /** + * Trigger an action when dropdown is opened + */ + onOpen?: () => void, + + /** + * Trigger an action when dropdown is closed + */ + onClose?: () => void, + /** * set text of label which appears soon after multiple values are selected */