@rn-components-dropdown/dropdown 1.0.32 → 1.0.34

package/dist/components/dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { DropdownProps } from './interface/DropdownInterface';
-declare const DropdownComponent: <T, Mode extends "single" | "multi">(props: DropdownProps<T, Mode>) => React.JSX.Element;
+import { DropdownProps, SELECTIONS_TYPE } from './interface/DropdownInterface';
+declare const DropdownComponent: <T, Mode extends SELECTIONS_TYPE>(props: DropdownProps<T, Mode>) => React.JSX.Element;
 export default DropdownComponent;

package/dist/components/dropdown/Dropdown.js

@@ -6,11 +6,11 @@ import React, { useCallback } from 'react';
 import useDropdown from './hooks/useDropdown';
 import SvgButton from '../svgButton/SvgButton';
 import { useDropdownStyle } from './DropdownStyle';
-import { ArrowDown, ArrowUp, CheckIcon } from '../../assets/svg';
 import SearchInput from './component/input/TextInput';
+import { ArrowDown, ArrowUp, CheckIcon } from '../../assets/svg';
 const DropdownComponent = (props) => {
-    const { label, testID, iconStyle, renderItem, style = {}, subfixIcon, labelField, valueField, onChangeText, itemTextStyle, flatListProps, minHeight = 0, containerStyle, search = false, renderLeftIcon, checkIconColor, radioIconColor, multiSelectIcon, itemTestIDField, maxHeight = 300, inverted = true, renderRightIcon, placeholderStyle, inputSearchStyle, searchPlaceholder, selectedTextStyle, renderInputSearch, iconColor = 'gray', accessibilityLabel, itemContainerStyle, labelContainer = {}, labelTextStyle = {}, selectedTextProps = {}, chipContainerProps = {}, keyboardAvoiding = true, selectionType = 'single', activeColor = 'lightGray', dropdownPosition = 'auto', itemAccessibilityLabelField, placeholder = 'Please select', showsVerticalScrollIndicator = true, } = props;
-    const { chipColor, clearIcon, textColor, onClearPress: onClear, } = chipContainerProps;
+    const { label, testID, iconStyle, renderItem, style = {}, subfixIcon, labelField, valueField, onChangeText, itemTextStyle, flatListProps, minHeight = 0, containerStyle, search = false, renderLeftIcon, checkIconColor, radioIconColor, multiSelectIcon, itemTestIDField, maxHeight = 300, inverted = true, renderRightIcon, placeholderStyle, inputSearchStyle, searchPlaceholder, selectedTextStyle, renderInputSearch, iconColor = 'gray', accessibilityLabel, itemContainerStyle, labelContainer = {}, labelTextStyle = {}, selectedTextProps = {}, chipContainerProps = {}, keyboardAvoiding = true, selectionType = 'single', onClear: onChipClearPress, activeColor = 'lightGray', dropdownPosition = 'auto', itemAccessibilityLabelField, placeholder = 'Please select', showsVerticalScrollIndicator = true, } = props;
+    const { chipColor, clearIcon, textColor } = chipContainerProps;
     const { styles, colors } = useDropdownStyle({
         checkIconColor: checkIconColor,
         radioIconColor: radioIconColor,
@@ -42,8 +42,8 @@ const DropdownComponent = (props) => {
               <ScrollView showsVerticalScrollIndicator={false}>
                 <View style={styles.wraps}>
                   {currentValue?.map?.((i) => (<Chip chipColor={chipColor || 'red'} textColor={textColor || 'white'} clearIcon={clearIcon} key={i?.[valueField]} label={i?.[labelField]} onClearPress={() => {
-                        onClear?.();
                         onClearPress?.(i);
+                        onChipClearPress?.(i?.[valueField]);
                     }}/>))}
                 </View>
               </ScrollView>

package/dist/components/dropdown/hooks/useDropdown.js

@@ -230,7 +230,7 @@ const useDropdown = (props) => {
     }, [setCurrentValue, valueField, onChange, currentValue]);
     const onClearPress = useCallback((item) => {
         const updated = currentValue.filter((i) => i[valueField] !== item[valueField]);
-        const val = currentValue.map((i) => i[valueField]);
+        const val = updated.map((i) => i[valueField]);
         setCurrentValue(updated);
         onChange?.(item[valueField], val);
     }, [currentValue, valueField, onChange, setCurrentValue]);

package/dist/components/dropdown/interface/ChipInterface.d.ts

@@ -1,8 +1,8 @@
-import { ColorValue } from "react-native";
+import { ColorValue } from 'react-native';
 export interface ChipInterface {
     label?: string;
     chipColor?: ColorValue;
     textColor?: ColorValue;
-    onClearPress?: () => void;
     clearIcon?: React.JSX.Element;
+    onClearPress?: (item?: any) => void;
 }

package/dist/controller/dropDownController/DropdownController.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { DropdownProps, SELECTIONS_TYPE } from '../../components/dropdown/interface/DropdownInterface';
 import { Control, FieldValues, Path } from 'react-hook-form';
-interface DropControllerProps<U extends FieldValues, S, T extends SELECTIONS_TYPE = 'single'> extends DropdownProps<S, T> {
+interface DropControllerProps<U extends FieldValues, S, T extends SELECTIONS_TYPE> extends DropdownProps<S, T> {
     control: Control<U>;
     controller: Path<U>;
 }
-declare const AppDropdownController: <U extends FieldValues, S, T extends SELECTIONS_TYPE = "single">(props: DropControllerProps<U, S, T>) => React.JSX.Element;
+declare const AppDropdownController: <U extends FieldValues, S, T extends SELECTIONS_TYPE>(props: DropControllerProps<U, S, T>) => React.JSX.Element;
 export default AppDropdownController;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-components-dropdown/dropdown",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage": "https://www.npmjs.com/package/@rn-components-dropdown/dropdown",

package/src/components/dropdown/Dropdown.tsx

@@ -15,11 +15,11 @@ import React, { useCallback } from 'react';
 import useDropdown from './hooks/useDropdown';
 import SvgButton from '../svgButton/SvgButton';
 import { useDropdownStyle } from './DropdownStyle';
-import { ArrowDown, ArrowUp, CheckIcon } from '../../assets/svg';
 import SearchInput from './component/input/TextInput';
-import { DropdownProps } from './interface/DropdownInterface';
+import { ArrowDown, ArrowUp, CheckIcon } from '../../assets/svg';
+import { DropdownProps, SELECTIONS_TYPE } from './interface/DropdownInterface';
 
-const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
+const DropdownComponent = <T, Mode extends SELECTIONS_TYPE>(
   props: DropdownProps<T, Mode>,
 ) => {
   const {
@@ -59,6 +59,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     chipContainerProps = {},
     keyboardAvoiding = true,
     selectionType = 'single',
+    onClear: onChipClearPress,
     activeColor = 'lightGray',
     dropdownPosition = 'auto',
     itemAccessibilityLabelField,
@@ -66,12 +67,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     showsVerticalScrollIndicator = true,
   } = props;
 
-  const {
-    chipColor,
-    clearIcon,
-    textColor,
-    onClearPress: onClear,
-  } = chipContainerProps;
+  const { chipColor, clearIcon, textColor } = chipContainerProps;
 
   const { styles, colors } = useDropdownStyle({
     checkIconColor: checkIconColor,
@@ -164,8 +160,8 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
                       key={i?.[valueField]}
                       label={i?.[labelField]}
                       onClearPress={() => {
-                        onClear?.();
                         onClearPress?.(i);
+                        onChipClearPress?.(i?.[valueField]);
                       }}
                     />
                   ))}

package/src/components/dropdown/hooks/useDropdown.ts

@@ -337,7 +337,7 @@ const useDropdown = <T, Mode extends SELECTIONS_TYPE>(
       const updated = currentValue.filter(
         (i: any) => i[valueField] !== item[valueField],
       );
-      const val = currentValue.map((i: any) => i[valueField]);
+      const val = updated.map((i: any) => i[valueField]);
       setCurrentValue(updated);
       onChange?.(item[valueField] as keyof T, val);
     },

package/src/components/dropdown/interface/ChipInterface.ts

@@ -1,9 +1,9 @@
-import { ColorValue } from "react-native";
+import { ColorValue } from 'react-native';
 
 export interface ChipInterface {
   label?: string;
   chipColor?: ColorValue;
   textColor?: ColorValue;
-  onClearPress?: () => void;
   clearIcon?: React.JSX.Element;
+  onClearPress?: (item?: any) => void;
 }

package/src/controller/dropDownController/DropdownController.tsx

@@ -12,7 +12,7 @@ import { Control, Controller, FieldValues, Path } from 'react-hook-form';
 interface DropControllerProps<
   U extends FieldValues,
   S,
-  T extends SELECTIONS_TYPE = 'single',
+  T extends SELECTIONS_TYPE,
 > extends DropdownProps<S, T> {
   control: Control<U>;
   controller: Path<U>;
@@ -21,7 +21,7 @@ interface DropControllerProps<
 const AppDropdownController = <
   U extends FieldValues,
   S,
-  T extends SELECTIONS_TYPE = 'single',
+  T extends SELECTIONS_TYPE,
 >(
   props: DropControllerProps<U, S, T>,
 ) => {