@rn-components-dropdown/dropdown 1.0.12 → 1.0.14

package/README.md

@@ -9,13 +9,13 @@ Supports **single** & **multiple selection**, custom icons, styling, and easy in
 
 ### Install Package
 
-```bash
+```bash title="install.sh" copy
 npm install @rn-components-dropdown/dropdown
 ```
 
 ### React Hook Form (optional — required only for DropdownController)
 
-```bash
+```bash title="install.sh" copy
 npm install react-hook-form
 ```
 
@@ -102,8 +102,7 @@ export default function FormScreen() {
   return (
     <DropdownController
       control={control}
-      name="fruit"
-      rules={{ required: "Please select a fruit" }}
+      controller="fruit"
       dropProps={{
         data: [
           { id: 1, label: "Apple" },
@@ -125,10 +124,10 @@ export default function FormScreen() {
 | Prop          | Type        | Description                                   |
 |---------------|-------------|-----------------------------------------------|
 | control       | Control     | React Hook Form control object                |
-| name          | string      | Field name in the form                        |
+| controller    | string      | Field name in the form                        |
 | rules         | object      | Validation rules (optional)                   |
-| dropProps     | object      | All dropdown props                             |
-| defaultValue  | any         | Initial/default value                          |
+| dropProps     | object      | All dropdown props                            |
+| defaultValue  | any         | Initial/default value                         |
 
 ---
 

package/dist/components/dropdown/Dropdown.js

@@ -40,18 +40,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_native_1 = require("react-native");
 const lodash_1 = __importDefault(require("lodash"));
 const AppText_1 = __importDefault(require("../text/AppText"));
-const Chip_1 = __importDefault(require("./components/chip/Chip"));
+const Chip_1 = __importDefault(require("./component/chip/Chip"));
 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 TextInput_1 = __importDefault(require("./component/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, iconColor = 'gray', accessibilityLabel, itemContainerStyle, labelContainer = {}, labelTextStyle = {}, selectedTextProps = {}, chipContainerProps = {}, 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, checkIconColor, radioIconColor, multiSelectIcon, itemTestIDField, maxHeight = 300, inverted = true, renderRightIcon, backgroundColor, 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 { styles, colors } = (0, DropdownStyle_1.useDropdownStyle)({});
+    const { styles, colors } = (0, DropdownStyle_1.useDropdownStyle)({
+        checkIconColor: checkIconColor,
+        radioIconColor: radioIconColor,
+    });
     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([
@@ -96,13 +99,17 @@ const DropdownComponent = (props) => {
     }, [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)));
-        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)}>
+        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={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={[
                     styles.checkContainer,
                     {
-                        backgroundColor: isSelected ? colors.gray : colors.white,
+                        backgroundColor: isSelected
+                            ? checkIconColor
+                                ? checkIconColor
+                                : colors.gray
+                            : colors.white,
                     },
                 ]}/>
                 <AppText_1.default style={react_native_1.StyleSheet.flatten([
@@ -134,7 +141,7 @@ const DropdownComponent = (props) => {
         const isSelected = currentValue && lodash_1.default.get(currentValue, valueField);
         const selected = lodash_1.default.isEqual(lodash_1.default.get(item, valueField), isSelected);
         lodash_1.default.assign(item, { _index: index });
-        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={() => onSelect(item)}>
+        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={activeColor} onPress={() => onSelect(item)}>
           <react_native_1.View style={react_native_1.StyleSheet.flatten([itemContainerStyle])}>
             {renderItem ? (renderItem(item, selected, labelField, valueField)) : (<react_native_1.View style={styles.item}>
                 {renderRadio(selected)}
@@ -255,7 +262,6 @@ const DropdownComponent = (props) => {
               <react_native_1.View style={react_native_1.StyleSheet.flatten([
                         styles.flex1,
                         isFull && styles.styleContainerVertical,
-                        backgroundColor && { backgroundColor: backgroundColor },
                         keyboardStyle,
                     ])}>
                 <react_native_1.View style={react_native_1.StyleSheet.flatten([

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

@@ -1,8 +1,7 @@
-import { ThemeColors } from '../../interface/colors.interface';
 interface Props {
     size?: number;
-    radioIconColor?: keyof ThemeColors;
-    checkIconColor?: keyof ThemeColors;
+    radioIconColor?: string;
+    checkIconColor?: string;
 }
 export declare const useDropdownStyle: (props: Props) => {
     styles: {
@@ -48,6 +47,7 @@ export declare const useDropdownStyle: (props: Props) => {
         };
         title: {
             fontSize: number;
+            color: string;
             marginVertical: number;
             writingDirection: "ltr" | "rtl";
         };
@@ -62,6 +62,7 @@ export declare const useDropdownStyle: (props: Props) => {
         textItem: {
             flex: number;
             fontSize: number;
+            color: string;
             writingDirection: "ltr" | "rtl";
         };
         icon: {

package/dist/components/dropdown/DropdownStyle.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDropdownStyle = void 0;
+const style_1 = require("../../style");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const useOrientation_1 = require("./hooks/useOrientation");
-const style_1 = require("../../style");
 const useDropdownStyle = (props) => {
-    const orientation = (0, useOrientation_1.useDeviceOrientation)();
     const { ...colors } = style_1.LIGHT_COLORS;
+    const orientation = (0, useOrientation_1.useDeviceOrientation)();
     const { size = 16, radioIconColor, checkIconColor } = props;
     const styles = (0, react_1.useMemo)(() => {
         return react_native_1.StyleSheet.create({
@@ -53,6 +53,7 @@ const useDropdownStyle = (props) => {
             },
             title: {
                 fontSize: 16,
+                color: colors.gray,
                 marginVertical: style_1.SPACING.s6,
                 writingDirection: react_native_1.I18nManager.isRTL ? 'rtl' : 'ltr',
             },
@@ -67,6 +68,7 @@ const useDropdownStyle = (props) => {
             textItem: {
                 flex: 1,
                 fontSize: 16,
+                color: colors.gray,
                 writingDirection: react_native_1.I18nManager.isRTL ? 'rtl' : 'ltr',
             },
             icon: {
@@ -90,7 +92,7 @@ const useDropdownStyle = (props) => {
                 paddingVertical: style_1.SPACING.s6,
             },
             labelTextStyle: {
-                color: colors.black,
+                color: colors.gray,
             },
             itemIconContainer: {
                 borderWidth: 2,

package/dist/components/dropdown/component/chip/Chip.d.ts

@@ -0,0 +1,3 @@
+import { ChipInterface } from '../../interface/ChipInterface';
+declare const Chip: (props: ChipInterface) => import("react").JSX.Element;
+export default Chip;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
+const ChipStyle_1 = __importDefault(require("./ChipStyle"));
+const AppText_1 = __importDefault(require("../../../text/AppText"));
+const svg_1 = require("../../../../assets/svg");
+const SvgButton_1 = __importDefault(require("../../../svgButton/SvgButton"));
+const Chip = (props) => {
+    const { styles, colors } = (0, ChipStyle_1.default)({ ...props });
+    const { label, onClearPress, textColor, clearIcon } = props;
+    return (<react_native_1.View style={styles.box}>
+      <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={8} color={textColor ? textColor : colors.white}/>} onPress={onClearPress} style={styles.clearIcon}/>
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+exports.default = Chip;

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

@@ -0,0 +1,83 @@
+import { ChipInterface } from '../../interface/ChipInterface';
+declare const useChipStyle: (props: ChipInterface) => {
+    styles: {
+        box: {
+            elevation: number;
+            width: "auto";
+            borderRadius: number;
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "center";
+            backgroundColor: import("react-native").ColorValue;
+            margin: number;
+            height: number;
+        } | {
+            elevation: number;
+            width: "auto";
+            borderRadius: number;
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "center";
+            backgroundColor: import("react-native").ColorValue;
+            shadowRadius?: undefined;
+            shadowOpacity?: undefined;
+            shadowColor?: undefined;
+            shadowOffset?: undefined;
+            margin: number;
+            height: number;
+        } | {
+            elevation: number;
+            width: "auto";
+            borderRadius: number;
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "center";
+            backgroundColor: import("react-native").ColorValue;
+            shadowRadius: number;
+            shadowOpacity: number;
+            shadowColor: string;
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            margin: number;
+            height: number;
+        };
+        chipText: {
+            paddingLeft: number;
+            fontWeight: "600";
+        };
+        clearContainer: {
+            width: number;
+            height: number;
+            borderWidth: number;
+            borderRadius: number;
+            marginHorizontal: number;
+            alignItems: "center";
+            justifyContent: "center";
+            borderColor: import("react-native").ColorValue;
+            backgroundColor: import("react-native").ColorValue;
+        };
+        clearIcon: {
+            width: number;
+            height: number;
+            borderRadius: number;
+            alignItems: "center";
+            justifyContent: "center";
+        };
+    };
+    colors: {
+        blue: string;
+        gray: string;
+        error: string;
+        green: string;
+        white: string;
+        black: string;
+        primary: string;
+        lightGray: string;
+        grayishBlue: string;
+        red: string;
+        border: string;
+    };
+};
+export default useChipStyle;

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const style_1 = require("../../../../style");
+const react_native_1 = require("react-native");
+const useChipStyle = (props) => {
+    const { chipColor, textColor } = props;
+    const { ...colors } = style_1.LIGHT_COLORS;
+    const styles = (0, react_1.useMemo)(() => {
+        return react_native_1.StyleSheet.create({
+            box: {
+                margin: 4,
+                height: 26,
+                ...react_native_1.Platform.select({
+                    android: {
+                        elevation: 5,
+                    },
+                    ios: {
+                        shadowRadius: 1.84,
+                        shadowOpacity: 0.35,
+                        shadowColor: colors.black,
+                        shadowOffset: { width: 0, height: 2 },
+                    },
+                }),
+                elevation: 5,
+                width: 'auto',
+                borderRadius: 30,
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: chipColor ? chipColor : colors.lightGray,
+            },
+            chipText: {
+                paddingLeft: 10,
+                fontWeight: '600',
+            },
+            clearContainer: {
+                width: 18,
+                height: 18,
+                borderWidth: 2,
+                borderRadius: 100,
+                marginHorizontal: 4,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderColor: textColor ? textColor : colors.white,
+                backgroundColor: chipColor ? chipColor : colors.lightGray,
+            },
+            clearIcon: {
+                width: 12,
+                height: 12,
+                borderRadius: 100,
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+        });
+    }, [chipColor, colors, textColor]);
+    return {
+        styles,
+        colors,
+    };
+};
+exports.default = useChipStyle;

package/dist/components/dropdown/component/input/TextInput.d.ts

@@ -0,0 +1,3 @@
+import type { CTextInput } from '../../interface/InputProps';
+declare const TextInputComponent: CTextInput;
+export default TextInputComponent;

package/dist/components/dropdown/component/input/TextInput.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const TextInputStyle_1 = require("./TextInputStyle");
+const react_1 = __importStar(require("react"));
+const svg_1 = require("../../../../assets/svg");
+const react_native_1 = require("react-native");
+const AppTextInput_1 = __importDefault(require("../../../textInput/AppTextInput"));
+const TextInputComponent = props => {
+    const { value, placeholder = '', placeholderTextColor = '#000', onChangeText = (_value) => { }, searchIcon, } = props;
+    const [searchtext, setSearchText] = (0, react_1.useState)('');
+    const { styles } = (0, TextInputStyle_1.useTextStyle)();
+    (0, react_1.useEffect)(() => {
+        if (value) {
+            setSearchText(value);
+        }
+    }, [value]);
+    const onChange = (text) => {
+        setSearchText(text);
+        onChangeText(text);
+    };
+    return (<react_native_1.TouchableWithoutFeedback>
+      <AppTextInput_1.default {...props} value={searchtext} style={styles.input} onChangeText={onChange} placeholder={placeholder} textStyle={styles.inputContainer} placeholderTextColor={placeholderTextColor} icon={searchIcon ? searchIcon : <svg_1.SearchIcon />}/>
+    </react_native_1.TouchableWithoutFeedback>);
+};
+exports.default = TextInputComponent;

package/dist/components/dropdown/component/input/TextInputStyle.d.ts

@@ -0,0 +1,32 @@
+export declare const useTextStyle: () => {
+    styles: {
+        input: {
+            height: number;
+            width: "95%";
+            fontSize: number;
+            borderWidth: number;
+            borderRadius: number;
+            marginVertical: number;
+            marginHorizontal: number;
+            borderColor: string;
+        };
+        inputContainer: {
+            width: "90%";
+            fontSize: number;
+            color: string;
+        };
+    };
+    colors: {
+        blue: string;
+        gray: string;
+        error: string;
+        green: string;
+        white: string;
+        black: string;
+        primary: string;
+        lightGray: string;
+        grayishBlue: string;
+        red: string;
+        border: string;
+    };
+};

package/dist/components/dropdown/component/input/TextInputStyle.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTextStyle = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const style_1 = require("../../../../style");
+const useTextStyle = () => {
+    const { ...colors } = style_1.LIGHT_COLORS;
+    const styles = (0, react_1.useMemo)(() => {
+        return react_native_1.StyleSheet.create({
+            input: {
+                height: 40,
+                width: '95%',
+                fontSize: 16,
+                borderWidth: 1,
+                borderRadius: 3,
+                marginVertical: 10,
+                marginHorizontal: 8,
+                borderColor: colors.border,
+            },
+            inputContainer: {
+                width: '90%',
+                fontSize: 14,
+                color: colors.gray,
+            },
+        });
+    }, [colors]);
+    return {
+        styles,
+        colors,
+    };
+};
+exports.useTextStyle = useTextStyle;

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

@@ -234,12 +234,11 @@ const useDropdown = (props) => {
         });
     }, [setCurrentValue, valueField, onChange, currentValue]);
     const onClearPress = (0, react_1.useCallback)((item) => {
-        const clone = lodash_1.default.clone(currentValue);
-        const rem = lodash_1.default.remove(clone, i => i?.[valueField] !== item[valueField]);
-        const val = rem?.map(i => i?.[valueField]);
-        setCurrentValue(rem);
+        const updated = currentValue.filter((i) => i[valueField] !== item[valueField]);
+        const val = currentValue.map((i) => i[valueField]);
+        setCurrentValue(updated);
         onChange?.(item[valueField], val);
-    }, [onChange]);
+    }, [currentValue, valueField, onChange, setCurrentValue]);
     return {
         ref,
         font,

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

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

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

@@ -1,7 +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;
     close: () => void;
@@ -24,8 +23,11 @@ export type DropdownProps<S, T extends SelectionType> = {
     placeholder?: string;
     onFocus?: () => void;
     autoScroll?: boolean;
+    activeColor?: string;
     searchField?: keyof S;
     value?: S[] | undefined;
+    checkIconColor?: string;
+    radioIconColor?: string;
     itemTestIDField?: string;
     backgroundColor?: string;
     keyboardAvoiding?: boolean;
@@ -37,11 +39,8 @@ export type DropdownProps<S, T extends SelectionType> = {
     selectedTextProps?: TextProps;
     subfixIcon?: React.JSX.Element;
     onClear?: (id?: number) => void;
-    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>;
@@ -67,7 +66,7 @@ export type DropdownProps<S, T extends SelectionType> = {
     onChange?: (selecteValue?: keyof S, selectedList?: SelectionType extends 'single' | 'multi' ? S[] : S) => void;
 };
 export interface IUseDetectDevice {
-    isAndroid: boolean;
     isIOS: boolean;
     isTablet: boolean;
+    isAndroid: boolean;
 }

package/dist/components/text/AppText.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { TextProps } from 'react-native';
-import { ThemeColors } from '../../interface/colors.interface';
+import { ColorValue, TextProps } from 'react-native';
 interface props extends TextProps {
     size?: number;
     fontFamily?: any;
     required?: boolean;
-    color?: keyof ThemeColors;
+    color?: ColorValue;
     type?: 'error' | 'normal';
 }
 declare const AppText: ({ size, style, color, children, type, fontFamily, required, ...props }: props) => React.JSX.Element;

package/dist/components/text/AppText.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
 const AppTextStyle_1 = require("./AppTextStyle");
+const react_native_1 = require("react-native");
 const AppText = ({ size, style, color, children, type = 'normal', fontFamily = 'regular', required, ...props }) => {
     const family = fontFamily;
     const styles = (0, AppTextStyle_1.useAppTextStyle)({

package/dist/components/text/AppTextStyle.d.ts

@@ -1,14 +1,13 @@
-import { TextStyle } from 'react-native';
-import { ThemeColors } from '../../interface/colors.interface';
+import { ColorValue, TextStyle } from 'react-native';
 interface props {
     size?: number;
     style?: TextStyle;
-    color?: keyof ThemeColors;
+    color?: ColorValue;
     type?: 'error' | 'normal';
 }
 export declare const useAppTextStyle: ({ size, style, color, type, }: props) => {
     container: {
-        color: import("react-native").ColorValue;
+        color: ColorValue;
         fontFamily?: string | undefined;
         fontSize: number;
         fontStyle?: "normal" | "italic" | undefined;
@@ -18,8 +17,8 @@ export declare const useAppTextStyle: ({ size, style, color, type, }: props) =>
         textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
         textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
         textDecorationStyle?: "solid" | "double" | "dotted" | "dashed" | undefined;
-        textDecorationColor?: import("react-native").ColorValue | undefined;
-        textShadowColor?: import("react-native").ColorValue | undefined;
+        textDecorationColor?: ColorValue | undefined;
+        textShadowColor?: ColorValue | undefined;
         textShadowOffset?: {
             width: number;
             height: number;
@@ -30,33 +29,33 @@ export declare const useAppTextStyle: ({ size, style, color, type, }: props) =>
         fontVariant?: import("react-native").FontVariant[] | undefined;
         writingDirection?: "auto" | "ltr" | "rtl" | undefined;
         backfaceVisibility?: "visible" | "hidden" | undefined;
-        backgroundColor?: import("react-native").ColorValue | undefined;
-        borderBlockColor?: import("react-native").ColorValue | undefined;
-        borderBlockEndColor?: import("react-native").ColorValue | undefined;
-        borderBlockStartColor?: import("react-native").ColorValue | undefined;
-        borderBottomColor?: import("react-native").ColorValue | undefined;
+        backgroundColor?: ColorValue | undefined;
+        borderBlockColor?: ColorValue | undefined;
+        borderBlockEndColor?: ColorValue | undefined;
+        borderBlockStartColor?: ColorValue | undefined;
+        borderBottomColor?: ColorValue | undefined;
         borderBottomEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
         borderBottomLeftRadius?: import("react-native").AnimatableNumericValue | string | undefined;
         borderBottomRightRadius?: import("react-native").AnimatableNumericValue | string | undefined;
         borderBottomStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
-        borderColor?: import("react-native").ColorValue | undefined;
+        borderColor?: ColorValue | undefined;
         borderCurve?: "circular" | "continuous" | undefined;
-        borderEndColor?: import("react-native").ColorValue | undefined;
+        borderEndColor?: ColorValue | undefined;
         borderEndEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
         borderEndStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
-        borderLeftColor?: import("react-native").ColorValue | undefined;
+        borderLeftColor?: ColorValue | undefined;
         borderRadius?: import("react-native").AnimatableNumericValue | string | undefined;
-        borderRightColor?: import("react-native").ColorValue | undefined;
-        borderStartColor?: import("react-native").ColorValue | undefined;
+        borderRightColor?: ColorValue | undefined;
+        borderStartColor?: ColorValue | undefined;
         borderStartEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
         borderStartStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
         borderStyle?: "solid" | "dotted" | "dashed" | undefined;
-        borderTopColor?: import("react-native").ColorValue | undefined;
+        borderTopColor?: ColorValue | undefined;
         borderTopEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
         borderTopLeftRadius?: import("react-native").AnimatableNumericValue | string | undefined;
         borderTopRightRadius?: import("react-native").AnimatableNumericValue | string | undefined;
         borderTopStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
-        outlineColor?: import("react-native").ColorValue | undefined;
+        outlineColor?: ColorValue | undefined;
         outlineOffset?: import("react-native").AnimatableNumericValue | undefined;
         outlineStyle?: "solid" | "dotted" | "dashed" | undefined;
         outlineWidth?: import("react-native").AnimatableNumericValue | undefined;
@@ -145,7 +144,7 @@ export declare const useAppTextStyle: ({ size, style, color, type, }: props) =>
         paddingInline?: import("react-native").DimensionValue | undefined;
         paddingInlineEnd?: import("react-native").DimensionValue | undefined;
         paddingInlineStart?: import("react-native").DimensionValue | undefined;
-        shadowColor?: import("react-native").ColorValue | undefined;
+        shadowColor?: ColorValue | undefined;
         shadowOffset?: Readonly<{
             width: number;
             height: number;

package/dist/components/text/AppTextStyle.js

@@ -10,11 +10,7 @@ const useAppTextStyle = ({ size, style, color, type = 'normal', }) => {
         return react_native_1.StyleSheet.create({
             container: {
                 fontSize: size || 14,
-                color: type === 'error'
-                    ? colors.error
-                    : color
-                        ? colors[color]
-                        : colors.primary,
+                color: type === 'error' ? colors.error : color ? color : colors.primary,
                 ...style,
             },
             require: {

package/dist/interface/svg.interface.d.ts

@@ -1,4 +1,5 @@
+import { ColorValue } from "react-native";
 export interface SvgInterface {
     size?: number;
-    color?: string;
+    color?: ColorValue;
 }

package/dist/style/index.d.ts

@@ -1,7 +1,5 @@
 export * from './colors';
 export * from './spacing';
 export * from './shadow';
-export declare const addAlphaToHex: (color: string, opacity: number) => string;
 export declare const SCREEN_WIDTH: number;
 export declare const SCREEN_HEIGHT: number;
-export declare const MIN_DEVICE_WIDTH: number;

package/dist/style/index.js

@@ -14,16 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MIN_DEVICE_WIDTH = exports.SCREEN_HEIGHT = exports.SCREEN_WIDTH = exports.addAlphaToHex = void 0;
+exports.SCREEN_HEIGHT = exports.SCREEN_WIDTH = void 0;
 __exportStar(require("./colors"), exports);
 __exportStar(require("./spacing"), exports);
 __exportStar(require("./shadow"), exports);
 const react_native_1 = require("react-native");
-const addAlphaToHex = (color, opacity) => {
-    const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
-    return color + _opacity.toString(16).toUpperCase();
-};
-exports.addAlphaToHex = addAlphaToHex;
 exports.SCREEN_WIDTH = react_native_1.Dimensions.get('window').width;
 exports.SCREEN_HEIGHT = react_native_1.Dimensions.get('window').height;
-exports.MIN_DEVICE_WIDTH = react_native_1.Platform.OS === 'ios' ? 390 : 360;

package/package.json

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

package/src/components/dropdown/Dropdown.tsx

@@ -11,14 +11,14 @@ import {
 } from 'react-native';
 import _ from 'lodash';
 import AppText from '../text/AppText';
-import Chip from './components/chip/Chip';
+import Chip from './component/chip/Chip';
 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 SearchInput from './component/input/TextInput';
 import { DropdownProps } from './interface/DropdownInterface';
 
 const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
@@ -40,6 +40,8 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     containerStyle,
     search = false,
     renderLeftIcon,
+    checkIconColor,
+    radioIconColor,
     multiSelectIcon,
     itemTestIDField,
     maxHeight = 300,
@@ -58,12 +60,12 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     labelTextStyle = {},
     selectedTextProps = {},
     chipContainerProps = {},
+    keyboardAvoiding = true,
     selectionType = 'single',
     activeColor = 'lightGray',
-    keyboardAvoiding = true,
     dropdownPosition = 'auto',
-    placeholder = 'Select item',
     itemAccessibilityLabelField,
+    placeholder = 'Please select',
     showsVerticalScrollIndicator = true,
   } = props;
 
@@ -74,7 +76,10 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     onClearPress: onClear,
   } = chipContainerProps;
 
-  const { styles, colors } = useDropdownStyle({});
+  const { styles, colors } = useDropdownStyle({
+    checkIconColor: checkIconColor,
+    radioIconColor: radioIconColor,
+  });
   const {
     ref,
     font,
@@ -202,7 +207,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
             item,
             itemAccessibilityLabelField || labelField,
           )}
-          underlayColor={colors[activeColor]}
+          underlayColor={activeColor}
           onPress={() => onCheckPress(item)}
         >
           <View style={StyleSheet.flatten([itemContainerStyle])}>
@@ -222,7 +227,11 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
                   style={[
                     styles.checkContainer,
                     {
-                      backgroundColor: isSelected ? colors.gray : colors.white,
+                      backgroundColor: isSelected
+                        ? checkIconColor
+                          ? checkIconColor
+                          : colors.gray
+                        : colors.white,
                     },
                   ]}
                 />
@@ -272,7 +281,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
             item,
             itemAccessibilityLabelField || labelField,
           )}
-          underlayColor={colors[activeColor]}
+          underlayColor={activeColor}
           onPress={() => onSelect(item)}
         >
           <View style={StyleSheet.flatten([itemContainerStyle])}>
@@ -457,7 +466,6 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
                 style={StyleSheet.flatten([
                   styles.flex1,
                   isFull && styles.styleContainerVertical,
-                  backgroundColor && { backgroundColor: backgroundColor },
                   keyboardStyle,
                 ])}
               >

package/src/components/dropdown/DropdownStyle.ts

@@ -1,18 +1,22 @@
+import {
+  SPACING,
+  LIGHT_COLORS,
+  SCREEN_WIDTH,
+  DEFAULT_COLORS,
+} from '../../style';
 import { useMemo } from 'react';
 import { I18nManager, StyleSheet } from 'react-native';
 import { useDeviceOrientation } from './hooks/useOrientation';
-import { ThemeColors } from '../../interface/colors.interface';
-import { DEFAULT_COLORS, SCREEN_WIDTH, SPACING, LIGHT_COLORS } from '../../style';
 
 interface Props {
   size?: number;
-  radioIconColor?: keyof ThemeColors;
-  checkIconColor?: keyof ThemeColors;
+  radioIconColor?: string;
+  checkIconColor?: string;
 }
 
 export const useDropdownStyle = (props: Props) => {
+  const { ...colors } = LIGHT_COLORS;
   const orientation = useDeviceOrientation();
-  const { ...colors } = LIGHT_COLORS
   const { size = 16, radioIconColor, checkIconColor } = props;
 
   const styles = useMemo(() => {
@@ -59,6 +63,7 @@ export const useDropdownStyle = (props: Props) => {
       },
       title: {
         fontSize: 16,
+        color: colors.gray,
         marginVertical: SPACING.s6,
         writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
       },
@@ -73,6 +78,7 @@ export const useDropdownStyle = (props: Props) => {
       textItem: {
         flex: 1,
         fontSize: 16,
+        color: colors.gray,
         writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
       },
       icon: {
@@ -96,7 +102,7 @@ export const useDropdownStyle = (props: Props) => {
         paddingVertical: SPACING.s6,
       },
       labelTextStyle: {
-        color: colors.black,
+        color: colors.gray,
       },
       itemIconContainer: {
         borderWidth: 2,

package/src/components/dropdown/{components → component}/chip/Chip.tsx

@@ -26,7 +26,7 @@ const Chip = (props: ChipInterface) => {
             icon={
               <ClearIcon
                 size={8}
-                color={textColor ? colors[textColor] : colors.white}
+                color={textColor ? textColor : colors.white}
               />
             }
             onPress={onClearPress}

package/src/components/dropdown/{components → component}/chip/ChipStyle.ts

@@ -28,7 +28,7 @@ const useChipStyle = (props: ChipInterface) => {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: chipColor ? colors[chipColor] : colors.lightGray,
+        backgroundColor: chipColor ? chipColor : colors.lightGray,
       },
       chipText: {
         paddingLeft: 10,
@@ -42,8 +42,8 @@ const useChipStyle = (props: ChipInterface) => {
         marginHorizontal: 4,
         alignItems: 'center',
         justifyContent: 'center',
-        borderColor: textColor ? colors[textColor] : colors.white,
-        backgroundColor: chipColor ? colors[chipColor] : colors.lightGray,
+        borderColor: textColor ? textColor : colors.white,
+        backgroundColor: chipColor ? chipColor : colors.lightGray,
       },
       clearIcon: {
         width: 12,

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

@@ -323,13 +323,14 @@ const useDropdown = <T, Mode extends 'single' | 'multi'>(
 
   const onClearPress = useCallback(
     (item: T) => {
-      const clone = _.clone(currentValue);
-      const rem = _.remove(clone, i => i?.[valueField] !== item[valueField]);
-      const val = rem?.map(i => i?.[valueField]);
-      setCurrentValue(rem);
+      const updated = currentValue.filter(
+        (i: any) => i[valueField] !== item[valueField],
+      );
+      const val = currentValue.map((i: any) => i[valueField]);
+      setCurrentValue(updated);
       onChange?.(item[valueField] as keyof T, val);
     },
-    [onChange],
+    [currentValue, valueField, onChange, setCurrentValue],
   );
 
   return {

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

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

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

@@ -8,7 +8,6 @@ import type {
   FlatListProps,
 } from 'react-native';
 import { ChipInterface } from './ChipInterface';
-import { ThemeColors } from '../../../interface/colors.interface';
 
 export type IDropdownRef = {
   open: () => void;
@@ -34,8 +33,11 @@ export type DropdownProps<S, T extends SelectionType> = {
   placeholder?: string;
   onFocus?: () => void;
   autoScroll?: boolean;
+  activeColor?: string;
   searchField?: keyof S;
   value?: S[] | undefined;
+  checkIconColor?: string;
+  radioIconColor?: string;
   itemTestIDField?: string;
   backgroundColor?: string;
   keyboardAvoiding?: boolean;
@@ -47,11 +49,8 @@ export type DropdownProps<S, T extends SelectionType> = {
   selectedTextProps?: TextProps;
   subfixIcon?: React.JSX.Element;
   onClear?: (id?: number) => void;
-  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>;
@@ -88,7 +87,7 @@ export type DropdownProps<S, T extends SelectionType> = {
 };
 
 export interface IUseDetectDevice {
-  isAndroid: boolean;
   isIOS: boolean;
   isTablet: boolean;
+  isAndroid: boolean;
 }

package/src/components/text/AppText.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { Text, TextProps } from 'react-native';
 import { useAppTextStyle } from './AppTextStyle';
-import { ThemeColors } from '../../interface/colors.interface';
+import { ColorValue, Text, TextProps } from 'react-native';
 
 interface props extends TextProps {
   size?: number;
   fontFamily?: any;
   required?: boolean;
-  color?: keyof ThemeColors;
+  color?: ColorValue;
   type?: 'error' | 'normal';
 }
 

package/src/components/text/AppTextStyle.ts

@@ -1,12 +1,11 @@
 import { useMemo } from 'react';
 import { LIGHT_COLORS } from '../../style';
-import { StyleSheet, TextStyle } from 'react-native';
-import { ThemeColors } from '../../interface/colors.interface';
+import { ColorValue, StyleSheet, TextStyle } from 'react-native';
 
 interface props {
   size?: number;
   style?: TextStyle;
-  color?: keyof ThemeColors;
+  color?: ColorValue;
   type?: 'error' | 'normal';
 }
 
@@ -22,12 +21,7 @@ export const useAppTextStyle = ({
     return StyleSheet.create({
       container: {
         fontSize: size || 14,
-        color:
-          type === 'error'
-            ? colors.error
-            : color
-            ? colors[color]
-            : colors.primary,
+        color: type === 'error' ? colors.error : color ? color : colors.primary,
         ...style,
       },
       require: {

package/src/interface/svg.interface.ts

@@ -1,4 +1,6 @@
+import { ColorValue } from "react-native";
+
 export interface SvgInterface {
   size?: number;
-  color?: string;
+  color?: ColorValue;
 }

package/src/style/index.ts

@@ -3,12 +3,5 @@ export * from './spacing';
 export * from './shadow';
 import { Dimensions, Platform } from 'react-native';
 
-export const addAlphaToHex = (color: string, opacity: number) => {
-  const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
-  return color + _opacity.toString(16).toUpperCase();
-};
-
 export const SCREEN_WIDTH = Dimensions.get('window').width;
 export const SCREEN_HEIGHT = Dimensions.get('window').height;
-export const MIN_DEVICE_WIDTH = Platform.OS === 'ios' ? 390 : 360;
-