@rn-components-dropdown/dropdown 1.0.13 → 1.0.15

package/dist/assets/svg/ArrowDown.d.ts

@@ -1,6 +1,4 @@
 import React from "react";
-declare const ArrowDown: ({ size, color }: {
-    size?: number | undefined;
-    color?: string | undefined;
-}) => React.JSX.Element;
+import { SvgInterface } from "../../interface/svg.interface";
+declare const ArrowDown: ({ size, color }: SvgInterface) => React.JSX.Element;
 export default ArrowDown;

package/dist/components/dropdown/Dropdown.js

@@ -40,14 +40,14 @@ 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, 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;
@@ -99,7 +99,7 @@ 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={[
@@ -141,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)}

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

@@ -1,8 +1,8 @@
-import { ThemeColors } from '../../interface/colors.interface';
+import { ColorValue } from 'react-native';
 interface Props {
     size?: number;
-    radioIconColor?: keyof ThemeColors;
-    checkIconColor?: keyof ThemeColors;
+    radioIconColor?: ColorValue;
+    checkIconColor?: ColorValue;
 }
 export declare const useDropdownStyle: (props: Props) => {
     styles: {
@@ -98,13 +98,13 @@ export declare const useDropdownStyle: (props: Props) => {
             alignItems: "center";
             justifyContent: "center";
             padding: number;
-            borderColor: string;
+            borderColor: ColorValue;
         };
         iconSubContainer: {
             width: "100%";
             height: "100%";
             borderRadius: number;
-            backgroundColor: string;
+            backgroundColor: ColorValue;
         };
         styleHorizontal: {
             width: number | "100%";
@@ -122,7 +122,7 @@ export declare const useDropdownStyle: (props: Props) => {
             height: number;
             alignItems: "center";
             justifyContent: "center";
-            borderColor: string;
+            borderColor: ColorValue;
         };
         showMultiSelectContainer: {
             width: "90%";

package/dist/components/dropdown/DropdownStyle.js

@@ -1,10 +1,10 @@
 "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 { ...colors } = style_1.LIGHT_COLORS;
     const orientation = (0, useOrientation_1.useDeviceOrientation)();

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/interface/ChipInterface.d.ts

@@ -1,8 +1,8 @@
-import { ThemeColors } from '../../../interface/colors.interface';
+import { ColorValue } from "react-native";
 export interface ChipInterface {
     label?: string;
+    chipColor?: ColorValue;
+    textColor?: ColorValue;
     onClearPress?: () => void;
-    chipColor?: keyof ThemeColors;
-    textColor?: keyof ThemeColors;
     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 type { StyleProp, TextStyle, ViewStyle, TextProps, ImageStyle, FlatListProps, ColorValue } from 'react-native';
 import { ChipInterface } from './ChipInterface';
-import { ThemeColors } from '../../../interface/colors.interface';
 export type IDropdownRef = {
     open: () => void;
     close: () => void;
@@ -14,7 +13,6 @@ export type DropdownProps<S, T extends SelectionType> = {
     disable?: boolean;
     selectionType?: T;
     maxHeight?: number;
-    iconColor?: string;
     minHeight?: number;
     inverted?: boolean;
     fontFamily?: string;
@@ -25,23 +23,24 @@ export type DropdownProps<S, T extends SelectionType> = {
     onFocus?: () => void;
     autoScroll?: boolean;
     searchField?: keyof S;
+    iconColor?: ColorValue;
     value?: S[] | undefined;
+    activeColor?: ColorValue;
     itemTestIDField?: string;
-    backgroundColor?: string;
     keyboardAvoiding?: boolean;
     searchPlaceholder?: string;
     label?: string | undefined;
+    checkIconColor?: ColorValue;
+    radioIconColor?: ColorValue;
     confirmSelectItem?: boolean;
     accessibilityLabel?: string;
+    backgroundColor?: ColorValue;
     style?: StyleProp<ViewStyle>;
     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>;

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/controller/dropDownController/DropdownController.js

@@ -14,11 +14,11 @@ const AppDropdownController = (props) => {
     const { styles } = (0, DropdownControllerStyle_1.useDropdownControllerStyle)();
     return (<react_hook_form_1.Controller control={control} name={controller} render={({ fieldState: { error }, field: { onBlur, onChange, value }, }) => (<react_native_1.View style={styles.mainContainer}>
           <Dropdown_1.default data={data} value={value} label={label} onBlur={onBlur} onChange={(selectValue, selectedItem) => {
-                if (selectionType === 'single') {
-                    return onChange(selectValue);
+                if (selectionType === 'multi') {
+                    return onChange(selectedItem);
                 }
-                return onChange(selectedItem);
-            }} labelField={labelField} valueField={valueField} placeholder={placeholder} selectionType={selectionType} containerStyle={containerStyle} labelTextStyle={styles.labelText} itemTextStyle={styles.dropdownText} placeholderStyle={styles.itemContainer} selectedTextStyle={styles.selectionText} style={[styles.dropdownContainer, error && styles.errorWrapper]} {...rest}/>
+                return onChange(selectValue);
+            }} labelField={labelField} valueField={valueField} placeholder={placeholder} containerStyle={containerStyle} labelTextStyle={styles.labelText} itemTextStyle={styles.dropdownText} placeholderStyle={styles.itemContainer} selectedTextStyle={styles.selectionText} style={[styles.dropdownContainer, error && styles.errorWrapper]} {...rest}/>
           {error && <AppText_1.default style={styles.error}>{error?.message}</AppText_1.default>}
         </react_native_1.View>)}/>);
 };

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.13",
+  "version": "1.0.15",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {

package/src/assets/svg/ArrowDown.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Svg, { Path, Mask, Rect, G } from "react-native-svg";
+import { SvgInterface } from "../../interface/svg.interface";
 
-const ArrowDown = ({ size = 16, color = "black" }) => (
+const ArrowDown = ({ size = 16, color = "black" }: SvgInterface) => (
   <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Mask
       id="mask0_2371_2505"

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'>(
@@ -207,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])}>
@@ -281,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])}>

package/src/components/dropdown/DropdownStyle.ts

@@ -1,18 +1,17 @@
-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,
+  SCREEN_WIDTH,
+  DEFAULT_COLORS,
 } from '../../style';
+import { useMemo } from 'react';
+import { ColorValue, I18nManager, StyleSheet } from 'react-native';
+import { useDeviceOrientation } from './hooks/useOrientation';
 
 interface Props {
   size?: number;
-  radioIconColor?: keyof ThemeColors;
-  checkIconColor?: keyof ThemeColors;
+  radioIconColor?: ColorValue;
+  checkIconColor?: ColorValue;
 }
 
 export const useDropdownStyle = (props: Props) => {

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/interface/ChipInterface.ts

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

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

@@ -6,9 +6,9 @@ import type {
   TextProps,
   ImageStyle,
   FlatListProps,
+  ColorValue,
 } from 'react-native';
 import { ChipInterface } from './ChipInterface';
-import { ThemeColors } from '../../../interface/colors.interface';
 
 export type IDropdownRef = {
   open: () => void;
@@ -24,7 +24,6 @@ export type DropdownProps<S, T extends SelectionType> = {
   disable?: boolean;
   selectionType?: T;
   maxHeight?: number;
-  iconColor?: string;
   minHeight?: number;
   inverted?: boolean;
   fontFamily?: string;
@@ -35,23 +34,24 @@ export type DropdownProps<S, T extends SelectionType> = {
   onFocus?: () => void;
   autoScroll?: boolean;
   searchField?: keyof S;
+  iconColor?: ColorValue;
   value?: S[] | undefined;
+  activeColor?: ColorValue;
   itemTestIDField?: string;
-  backgroundColor?: string;
   keyboardAvoiding?: boolean;
   searchPlaceholder?: string;
   label?: string | undefined;
+  checkIconColor?: ColorValue;
+  radioIconColor?: ColorValue;
   confirmSelectItem?: boolean;
   accessibilityLabel?: string;
+  backgroundColor?: ColorValue;
   style?: StyleProp<ViewStyle>;
   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>;

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/controller/dropDownController/DropdownController.tsx

@@ -54,15 +54,14 @@ const AppDropdownController = <
             label={label}
             onBlur={onBlur}
             onChange={(selectValue: any, selectedItem: any) => {
-              if (selectionType === 'single') {
-                return onChange(selectValue);
+              if (selectionType === 'multi') {
+                return onChange(selectedItem);
               }
-              return onChange(selectedItem);
+              return onChange(selectValue);
             }}
             labelField={labelField}
             valueField={valueField}
             placeholder={placeholder}
-            selectionType={selectionType}
             containerStyle={containerStyle}
             labelTextStyle={styles.labelText}
             itemTextStyle={styles.dropdownText}

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

@@ -1,14 +1,7 @@
 export * from './colors';
 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();
-};
+import { Dimensions } from 'react-native';
 
 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;
-