@rn-components-dropdown/dropdown 1.0.9 → 1.0.11

package/dist/components/dropdown/Dropdown.js

@@ -45,15 +45,16 @@ 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 = () => {
-        return renderRightIcon ? (renderRightIcon(visible)) : (<SvgButton_1.default icon={subfixIcon ? subfixIcon : visible ? <svg_1.ArrowUp color={iconColor}/> : <svg_1.ArrowDown color={iconColor}/>} onPress={showOrClose} style={react_native_1.StyleSheet.flatten([
+        return renderRightIcon ? (renderRightIcon(visible)) : (<SvgButton_1.default icon={subfixIcon ? (subfixIcon) : visible ? (<svg_1.ArrowUp color={iconColor}/>) : (<svg_1.ArrowDown color={iconColor}/>)} onPress={showOrClose} style={react_native_1.StyleSheet.flatten([
                 iconStyle,
                 styles.icon,
                 { tintColor: iconColor },
@@ -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>)}
@@ -91,11 +95,11 @@ const DropdownComponent = (props) => {
         </react_native_1.View>);
     }, [styles]);
     const renderCheckItem = (0, react_1.useCallback)(({ item, index }) => {
-        const isSelected = lodash_1.default.some(currentValue, h => lodash_1.default.isEqual(lodash_1.default.get(h, valueField), lodash_1.default.get(item, valueField)));
+        const isSelected = lodash_1.default.some(currentValue, (h) => lodash_1.default.isEqual(lodash_1.default.get(h, valueField), lodash_1.default.get(item, valueField)));
         return (<react_native_1.TouchableHighlight key={index.toString()} testID={lodash_1.default.get(item, itemTestIDField || labelField)} accessible={!!accessibilityLabel} accessibilityLabel={lodash_1.default.get(item, itemAccessibilityLabelField || labelField)} underlayColor={colors[activeColor]} onPress={() => onCheckPress(item)}>
           <react_native_1.View style={react_native_1.StyleSheet.flatten([itemContainerStyle])}>
             {renderItem ? (renderItem(item, isSelected, labelField, valueField)) : (<react_native_1.View style={styles.item}>
-                <SvgButton_1.default icon={multiSelectIcon ? multiSelectIcon : <CheckIcon_1.default color={colors.white}/>} onPress={() => onCheckPress(item)} style={[
+                <SvgButton_1.default icon={multiSelectIcon ? (multiSelectIcon) : (<CheckIcon_1.default color={colors.white}/>)} onPress={() => onCheckPress(item)} style={[
                     styles.checkContainer,
                     {
                         backgroundColor: isSelected ? colors.gray : colors.white,
@@ -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={8} color={textColor ? colors[textColor] : colors.white}/>} onPress={onClearPress} style={styles.clearIcon}/>
+        </react_native_1.View>)}
     </react_native_1.View>);
 };
 exports.default = Chip;

package/dist/components/dropdown/components/chip/ChipStyle.d.ts

@@ -59,8 +59,8 @@ declare const useChipStyle: (props: ChipInterface) => {
             backgroundColor: string;
         };
         clearIcon: {
-            height: number;
             width: number;
+            height: number;
             borderRadius: number;
             alignItems: "center";
             justifyContent: "center";

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

@@ -4,7 +4,7 @@ const react_1 = require("react");
 const style_1 = require("../../../../style");
 const react_native_1 = require("react-native");
 const useChipStyle = (props) => {
-    const { chipColor } = props;
+    const { chipColor, textColor } = props;
     const { ...colors } = style_1.LIGHT_COLORS;
     const styles = (0, react_1.useMemo)(() => {
         return react_native_1.StyleSheet.create({
@@ -17,7 +17,7 @@ const useChipStyle = (props) => {
                     },
                     ios: {
                         shadowRadius: 1.84,
-                        shadowOpacity: 0.25,
+                        shadowOpacity: 0.35,
                         shadowColor: colors.black,
                         shadowOffset: { width: 0, height: 2 },
                     },
@@ -37,23 +37,23 @@ const useChipStyle = (props) => {
             clearContainer: {
                 width: 18,
                 height: 18,
-                borderWidth: 1,
+                borderWidth: 2,
                 borderRadius: 100,
                 marginHorizontal: 4,
                 alignItems: 'center',
                 justifyContent: 'center',
-                borderColor: colors.white,
+                borderColor: textColor ? colors[textColor] : colors.white,
                 backgroundColor: chipColor ? colors[chipColor] : colors.lightGray,
             },
             clearIcon: {
-                height: 12,
                 width: 12,
+                height: 12,
                 borderRadius: 100,
                 alignItems: 'center',
                 justifyContent: 'center',
             },
         });
-    }, [chipColor, colors]);
+    }, [chipColor, colors, textColor]);
     return {
         styles,
         colors,

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;
-    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>;
+    chipContainerProps: ChipInterface;
+    checkIconColor?: keyof ThemeColors;
+    radioIconColor?: keyof ThemeColors;
+    multiSelectIcon?: React.JSX.Element;
     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.11",
   "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,
@@ -92,7 +100,15 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
       renderRightIcon(visible)
     ) : (
       <SvgButton
-        icon={subfixIcon ? subfixIcon : visible ?  <ArrowUp color={iconColor} /> : <ArrowDown color={iconColor} />}
+        icon={
+          subfixIcon ? (
+            subfixIcon
+          ) : visible ? (
+            <ArrowUp color={iconColor} />
+          ) : (
+            <ArrowDown color={iconColor} />
+          )
+        }
         onPress={showOrClose}
         style={StyleSheet.flatten([
           iconStyle,
@@ -140,11 +156,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>
@@ -170,7 +190,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
 
   const renderCheckItem = useCallback(
     ({ item, index }: { item: T; index: number }) => {
-      const isSelected = _.some(currentValue, h =>
+      const isSelected = _.some(currentValue, (h: any) =>
         _.isEqual(_.get(h, valueField), _.get(item, valueField)),
       );
       return (
@@ -188,10 +208,16 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
           <View style={StyleSheet.flatten([itemContainerStyle])}>
             {renderItem ? (
               renderItem(item, isSelected, labelField, valueField)
-            )  : (
+            ) : (
               <View style={styles.item}>
                 <SvgButton
-                  icon={multiSelectIcon ? multiSelectIcon : <CheckIcon color={colors.white}/> }
+                  icon={
+                    multiSelectIcon ? (
+                      multiSelectIcon
+                    ) : (
+                      <CheckIcon color={colors.white} />
+                    )
+                  }
                   onPress={() => onCheckPress(item)}
                   style={[
                     styles.checkContainer,
@@ -370,9 +396,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,22 @@ const Chip = (props: ChipInterface) => {
       >
         {label}
       </AppText>
-      <View style={styles.clearContainer}>
-        <SvgButton
-          icon={clearIcon ? clearIcon : <ClearIcon color={textColor || colors.white}/> } 
-          onPress={onClearPress}
-          style={styles.clearIcon}
-        />
-      </View>
+      {clearIcon ? (
+        clearIcon
+      ) : (
+        <View style={styles.clearContainer}>
+          <SvgButton
+            icon={
+              <ClearIcon
+                size={8}
+                color={textColor ? colors[textColor] : colors.white}
+              />
+            }
+            onPress={onClearPress}
+            style={styles.clearIcon}
+          />
+        </View>
+      )}
     </View>
   );
 };

package/src/components/dropdown/components/chip/ChipStyle.ts

@@ -4,7 +4,7 @@ import { Platform, StyleSheet } from 'react-native';
 import { ChipInterface } from '../../interface/ChipInterface';
 
 const useChipStyle = (props: ChipInterface) => {
-  const { chipColor } = props;
+  const { chipColor, textColor } = props;
   const { ...colors } = LIGHT_COLORS;
   const styles = useMemo(() => {
     return StyleSheet.create({
@@ -17,7 +17,7 @@ const useChipStyle = (props: ChipInterface) => {
           },
           ios: {
             shadowRadius: 1.84,
-            shadowOpacity: 0.25,
+            shadowOpacity: 0.35,
             shadowColor: colors.black,
             shadowOffset: { width: 0, height: 2 },
           },
@@ -37,23 +37,23 @@ const useChipStyle = (props: ChipInterface) => {
       clearContainer: {
         width: 18,
         height: 18,
-        borderWidth: 1,
+        borderWidth: 2,
         borderRadius: 100,
         marginHorizontal: 4,
         alignItems: 'center',
         justifyContent: 'center',
-        borderColor: colors.white,
+        borderColor: textColor ? colors[textColor] : colors.white,
         backgroundColor: chipColor ? colors[chipColor] : colors.lightGray,
       },
       clearIcon: {
-        height: 12,
         width: 12,
+        height: 12,
         borderRadius: 100,
         alignItems: 'center',
         justifyContent: 'center',
       },
     });
-  }, [chipColor, colors]);
+  }, [chipColor, colors, textColor]);
   return {
     styles,
     colors,

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;
-  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>;
+  chipContainerProps: ChipInterface;
+  checkIconColor?: keyof ThemeColors;
+  radioIconColor?: keyof ThemeColors;
+  multiSelectIcon?: React.JSX.Element;
   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 {