@rn-components-dropdown/dropdown 1.0.9 → 1.0.10

package/dist/components/dropdown/Dropdown.js

@@ -45,11 +45,12 @@ const react_1 = __importStar(require("react"));
 const useDropdown_1 = __importDefault(require("./hooks/useDropdown"));
 const SvgButton_1 = __importDefault(require("../svgButton/SvgButton"));
 const DropdownStyle_1 = require("./DropdownStyle");
+const CheckIcon_1 = __importDefault(require("../../assets/svg/CheckIcon"));
 const svg_1 = require("../../assets/svg");
 const TextInput_1 = __importDefault(require("./components/input/TextInput"));
-const CheckIcon_1 = __importDefault(require("../../assets/svg/CheckIcon"));
 const DropdownComponent = (props) => {
-    const { label, testID, iconStyle, renderItem, style = {}, subfixIcon, labelField, valueField, onChangeText, itemTextStyle, flatListProps, minHeight = 0, containerStyle, search = false, renderLeftIcon, multiSelectIcon, itemTestIDField, maxHeight = 300, inverted = true, renderRightIcon, backgroundColor, placeholderStyle, inputSearchStyle, searchPlaceholder, selectedTextStyle, renderInputSearch, iconColor = 'gray', accessibilityLabel, itemContainerStyle, labelContainer = {}, labelTextStyle = {}, selectedTextProps = {}, selectionType = 'single', activeColor = 'lightGray', keyboardAvoiding = true, dropdownPosition = 'auto', placeholder = 'Select item', itemAccessibilityLabelField, showsVerticalScrollIndicator = true, } = props;
+    const { label, testID, iconStyle, renderItem, style = {}, subfixIcon, labelField, valueField, onChangeText, itemTextStyle, flatListProps, minHeight = 0, containerStyle, search = false, renderLeftIcon, multiSelectIcon, itemTestIDField, maxHeight = 300, inverted = true, renderRightIcon, backgroundColor, placeholderStyle, inputSearchStyle, searchPlaceholder, selectedTextStyle, renderInputSearch, chipContainerProps, iconColor = 'gray', accessibilityLabel, itemContainerStyle, labelContainer = {}, labelTextStyle = {}, selectedTextProps = {}, selectionType = 'single', activeColor = 'lightGray', keyboardAvoiding = true, dropdownPosition = 'auto', placeholder = 'Select item', itemAccessibilityLabelField, showsVerticalScrollIndicator = true, } = props;
+    const { chipColor, clearIcon, textColor, onClearPress: onClear, } = chipContainerProps;
     const { styles, colors } = (0, DropdownStyle_1.useDropdownStyle)({});
     const { ref, font, visible, refList, position, onSelect, listData, onSearch, onMeasure, searchText, showOrClose, scrollIndex, currentValue, onCheckPress, onClearPress, setSearchText, keyboardHeight, } = (0, useDropdown_1.default)({ ...props });
     const renderRight = () => {
@@ -77,7 +78,10 @@ const DropdownComponent = (props) => {
             </AppText_1.default>) : (<react_native_1.View style={styles.showMultiSelectContainer}>
               <react_native_1.ScrollView showsVerticalScrollIndicator={false}>
                 <react_native_1.View style={styles.wraps}>
-                  {currentValue?.map?.((i) => (<Chip_1.default chipColor={'red'} textColor={'white'} key={i?.[valueField]} label={i?.[labelField]} onClearPress={() => onClearPress(i)}/>))}
+                  {currentValue?.map?.((i) => (<Chip_1.default chipColor={chipColor || 'red'} textColor={textColor || 'white'} clearIcon={clearIcon} key={i?.[valueField]} label={i?.[labelField]} onClearPress={() => {
+                        onClear?.();
+                        onClearPress?.(i);
+                    }}/>))}
                 </react_native_1.View>
               </react_native_1.ScrollView>
             </react_native_1.View>)}
@@ -209,9 +213,9 @@ const DropdownComponent = (props) => {
           </react_native_1.View>
         </react_native_1.TouchableWithoutFeedback>);
     }, [
-        inverted,
         styles,
         testID,
+        inverted,
         listData,
         scrollIndex,
         renderSearch,

package/dist/components/dropdown/components/chip/Chip.js

@@ -15,9 +15,9 @@ const Chip = (props) => {
       <AppText_1.default size={12} fontFamily={'semiBold'} style={styles.chipText} color={textColor ? textColor : 'gray'}>
         {label}
       </AppText_1.default>
-      <react_native_1.View style={styles.clearContainer}>
-        <SvgButton_1.default icon={clearIcon ? clearIcon : <svg_1.ClearIcon color={textColor || colors.white}/>} onPress={onClearPress} style={styles.clearIcon}/>
-      </react_native_1.View>
+      {clearIcon ? clearIcon : <react_native_1.View style={styles.clearContainer}>
+        <SvgButton_1.default icon={<svg_1.ClearIcon size={14} color={textColor || colors.white}/>} onPress={onClearPress} style={styles.clearIcon}/>
+      </react_native_1.View>}
     </react_native_1.View>);
 };
 exports.default = Chip;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StyleProp, TextStyle, ViewStyle, TextProps, ImageStyle, FlatListProps } from 'react-native';
+import { ChipInterface } from './ChipInterface';
 import { ThemeColors } from '../../../interface/colors.interface';
 export type IDropdownRef = {
     open: () => void;
@@ -33,15 +34,15 @@ export type DropdownProps<S, T extends SelectionType> = {
     confirmSelectItem?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
+    selectedTextProps?: TextProps;
     subfixIcon?: React.JSX.Element;
     onClear?: (id?: number) => void;
+    activeColor?: keyof ThemeColors;
+    chipContainerProps: ChipInterface;
+    iconStyle?: StyleProp<ImageStyle>;
     multiSelectIcon?: React.JSX.Element;
     checkIconColor?: keyof ThemeColors;
     radioIconColor?: keyof ThemeColors;
-    onChange?: (selecteValue?: keyof S, selectedList?: SelectionType extends 'single' | 'multi' ? S[] : S) => void;
-    selectedTextProps?: TextProps;
-    activeColor?: keyof ThemeColors;
-    iconStyle?: StyleProp<ImageStyle>;
     mode?: 'default' | 'modal' | 'auto';
     itemTextStyle?: StyleProp<TextStyle>;
     itemAccessibilityLabelField?: string;
@@ -63,6 +64,7 @@ export type DropdownProps<S, T extends SelectionType> = {
     renderRightIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
     renderItem?: (item: S, selected?: boolean, labelField?: keyof S, valueField?: keyof S) => React.JSX.Element | null | undefined;
     renderInputSearch?: (onSearch: (text: string) => void) => React.JSX.Element | null | undefined;
+    onChange?: (selecteValue?: keyof S, selectedList?: SelectionType extends 'single' | 'multi' ? S[] : S) => void;
 };
 export interface IUseDetectDevice {
     isAndroid: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-components-dropdown/dropdown",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {

package/src/components/dropdown/Dropdown.tsx

@@ -16,10 +16,10 @@ import React, { useCallback } from 'react';
 import useDropdown from './hooks/useDropdown';
 import SvgButton from '../svgButton/SvgButton';
 import { useDropdownStyle } from './DropdownStyle';
+import CheckIcon from '../../assets/svg/CheckIcon';
 import { ArrowDown, ArrowUp } from '../../assets/svg';
 import SearchInput from './components/input/TextInput';
 import { DropdownProps } from './interface/DropdownInterface';
-import CheckIcon from '../../assets/svg/CheckIcon';
 
 const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
   props: DropdownProps<T, Mode>,
@@ -51,6 +51,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     searchPlaceholder,
     selectedTextStyle,
     renderInputSearch,
+    chipContainerProps,
     iconColor = 'gray',
     accessibilityLabel,
     itemContainerStyle,
@@ -66,6 +67,13 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     showsVerticalScrollIndicator = true,
   } = props;
 
+  const {
+    chipColor,
+    clearIcon,
+    textColor,
+    onClearPress: onClear,
+  } = chipContainerProps;
+
   const { styles, colors } = useDropdownStyle({});
   const {
     ref,
@@ -140,11 +148,15 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
                 <View style={styles.wraps}>
                   {currentValue?.map?.((i: any) => (
                     <Chip
-                      chipColor={'red'}
-                      textColor={'white'}
+                      chipColor={chipColor || 'red'}
+                      textColor={textColor || 'white'}
+                      clearIcon={clearIcon}
                       key={i?.[valueField]}
                       label={i?.[labelField]}
-                      onClearPress={() => onClearPress(i)}
+                      onClearPress={() => {
+                        onClear?.();
+                        onClearPress?.(i);
+                      }}
                     />
                   ))}
                 </View>
@@ -370,9 +382,9 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
       );
     },
     [
-      inverted,
       styles,
       testID,
+      inverted,
       listData,
       scrollIndex,
       renderSearch,

package/src/components/dropdown/components/chip/Chip.tsx

@@ -18,13 +18,13 @@ const Chip = (props: ChipInterface) => {
       >
         {label}
       </AppText>
-      <View style={styles.clearContainer}>
+      {clearIcon ? clearIcon : <View style={styles.clearContainer}>
         <SvgButton
-          icon={clearIcon ? clearIcon : <ClearIcon color={textColor || colors.white}/> } 
+          icon={<ClearIcon size={14} color={textColor || colors.white}/> } 
           onPress={onClearPress}
           style={styles.clearIcon}
         />
-      </View>
+      </View>}
     </View>
   );
 };

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

@@ -7,6 +7,7 @@ import type {
   ImageStyle,
   FlatListProps,
 } from 'react-native';
+import { ChipInterface } from './ChipInterface';
 import { ThemeColors } from '../../../interface/colors.interface';
 
 export type IDropdownRef = {
@@ -43,18 +44,15 @@ export type DropdownProps<S, T extends SelectionType> = {
   confirmSelectItem?: boolean;
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
+  selectedTextProps?: TextProps;
   subfixIcon?: React.JSX.Element;
   onClear?: (id?: number) => void;
+  activeColor?: keyof ThemeColors;
+  chipContainerProps: ChipInterface;
+  iconStyle?: StyleProp<ImageStyle>;
   multiSelectIcon?:React.JSX.Element;
   checkIconColor?: keyof ThemeColors;
   radioIconColor?: keyof ThemeColors;
-  onChange?: (
-    selecteValue?: keyof S,
-    selectedList?: SelectionType extends 'single' | 'multi' ? S[] : S,
-  ) => void;
-  selectedTextProps?: TextProps;
-  activeColor?: keyof ThemeColors;
-  iconStyle?: StyleProp<ImageStyle>;
   mode?: 'default' | 'modal' | 'auto';
   itemTextStyle?: StyleProp<TextStyle>;
   itemAccessibilityLabelField?: string;
@@ -83,6 +81,10 @@ export type DropdownProps<S, T extends SelectionType> = {
   renderInputSearch?: (
     onSearch: (text: string) => void,
   ) => React.JSX.Element | null | undefined;
+  onChange?: (
+    selecteValue?: keyof S,
+    selectedList?: SelectionType extends 'single' | 'multi' ? S[] : S,
+  ) => void;
 };
 
 export interface IUseDetectDevice {