@rn-components-dropdown/dropdown 1.0.10 → 1.0.12

package/dist/components/dropdown/Dropdown.js

@@ -49,12 +49,12 @@ const CheckIcon_1 = __importDefault(require("../../assets/svg/CheckIcon"));
 const svg_1 = require("../../assets/svg");
 const TextInput_1 = __importDefault(require("./components/input/TextInput"));
 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, chipContainerProps, 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, iconColor = 'gray', accessibilityLabel, itemContainerStyle, labelContainer = {}, labelTextStyle = {}, selectedTextProps = {}, chipContainerProps = {}, 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 },
@@ -95,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,

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>
-      {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>}
+      {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

@@ -38,11 +38,11 @@ export type DropdownProps<S, T extends SelectionType> = {
     subfixIcon?: React.JSX.Element;
     onClear?: (id?: number) => void;
     activeColor?: keyof ThemeColors;
-    chipContainerProps: ChipInterface;
     iconStyle?: StyleProp<ImageStyle>;
-    multiSelectIcon?: React.JSX.Element;
+    chipContainerProps?: ChipInterface;
     checkIconColor?: keyof ThemeColors;
     radioIconColor?: keyof ThemeColors;
+    multiSelectIcon?: React.JSX.Element;
     mode?: 'default' | 'modal' | 'auto';
     itemTextStyle?: StyleProp<TextStyle>;
     itemAccessibilityLabelField?: string;

package/package.json

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

package/src/components/dropdown/Dropdown.tsx

@@ -51,13 +51,13 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     searchPlaceholder,
     selectedTextStyle,
     renderInputSearch,
-    chipContainerProps,
     iconColor = 'gray',
     accessibilityLabel,
     itemContainerStyle,
     labelContainer = {},
     labelTextStyle = {},
     selectedTextProps = {},
+    chipContainerProps = {},
     selectionType = 'single',
     activeColor = 'lightGray',
     keyboardAvoiding = true,
@@ -100,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,
@@ -182,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 (
@@ -200,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,

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

@@ -18,13 +18,22 @@ const Chip = (props: ChipInterface) => {
       >
         {label}
       </AppText>
-      {clearIcon ? clearIcon : <View style={styles.clearContainer}>
-        <SvgButton
-          icon={<ClearIcon size={14} 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

@@ -48,11 +48,11 @@ export type DropdownProps<S, T extends SelectionType> = {
   subfixIcon?: React.JSX.Element;
   onClear?: (id?: number) => void;
   activeColor?: keyof ThemeColors;
-  chipContainerProps: ChipInterface;
   iconStyle?: StyleProp<ImageStyle>;
-  multiSelectIcon?:React.JSX.Element;
+  chipContainerProps?: ChipInterface;
   checkIconColor?: keyof ThemeColors;
   radioIconColor?: keyof ThemeColors;
+  multiSelectIcon?: React.JSX.Element;
   mode?: 'default' | 'modal' | 'auto';
   itemTextStyle?: StyleProp<TextStyle>;
   itemAccessibilityLabelField?: string;