@rn-components-dropdown/dropdown 1.0.12 → 1.0.13

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

@@ -49,9 +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, 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([
@@ -102,7 +105,11 @@ const DropdownComponent = (props) => {
                 <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([
@@ -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

@@ -48,6 +48,7 @@ export declare const useDropdownStyle: (props: Props) => {
         };
         title: {
             fontSize: number;
+            color: string;
             marginVertical: number;
             writingDirection: "ltr" | "rtl";
         };
@@ -62,6 +63,7 @@ export declare const useDropdownStyle: (props: Props) => {
         textItem: {
             flex: number;
             fontSize: number;
+            color: string;
             writingDirection: "ltr" | "rtl";
         };
         icon: {

package/dist/components/dropdown/DropdownStyle.js

@@ -6,8 +6,8 @@ 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/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/DropdownInterface.d.ts

@@ -67,7 +67,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/package.json

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

package/src/components/dropdown/Dropdown.tsx

@@ -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,
@@ -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,
                     },
                   ]}
                 />
@@ -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

@@ -2,7 +2,12 @@ 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';
+import {
+  DEFAULT_COLORS,
+  SCREEN_WIDTH,
+  SPACING,
+  LIGHT_COLORS,
+} from '../../style';
 
 interface Props {
   size?: number;
@@ -11,8 +16,8 @@ interface Props {
 }
 
 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 +64,7 @@ export const useDropdownStyle = (props: Props) => {
       },
       title: {
         fontSize: 16,
+        color: colors.gray,
         marginVertical: SPACING.s6,
         writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
       },
@@ -73,6 +79,7 @@ export const useDropdownStyle = (props: Props) => {
       textItem: {
         flex: 1,
         fontSize: 16,
+        color: colors.gray,
         writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
       },
       icon: {
@@ -96,7 +103,7 @@ export const useDropdownStyle = (props: Props) => {
         paddingVertical: SPACING.s6,
       },
       labelTextStyle: {
-        color: colors.black,
+        color: colors.gray,
       },
       itemIconContainer: {
         borderWidth: 2,

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/DropdownInterface.ts

@@ -88,7 +88,7 @@ export type DropdownProps<S, T extends SelectionType> = {
 };
 
 export interface IUseDetectDevice {
-  isAndroid: boolean;
   isIOS: boolean;
   isTablet: boolean;
+  isAndroid: boolean;
 }