@rn-components-dropdown/dropdown 1.0.33 → 1.0.35

package/README.md

@@ -113,15 +113,13 @@ export default function FormScreen() {
     <DropdownController
       control={control}
       controller="fruit"
-      dropProps={{
-        data: [
+      data={[
           { id: 1, label: "Apple" },
           { id: 2, label: "Banana" },
-        ],
-        labelField: "label",
-        valueField: "id",
-        placeholder: "Pick a fruit",
-      }}
+        ]}
+      labelField="label"
+      valueField= "id"
+      placeholder= "Pick a fruit"
     />
   );
 }
@@ -136,8 +134,7 @@ export default function FormScreen() {
 | control       | Control     | React Hook Form control object                |
 | 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                            |
 
 ---
 

package/dist/components/dropdown/Dropdown.js

@@ -1,5 +1,4 @@
 import { View, Modal, FlatList, StyleSheet, ScrollView, TouchableHighlight, TouchableWithoutFeedback, } from 'react-native';
-import _ from 'lodash';
 import AppText from '../text/AppText';
 import Chip from './component/chip/Chip';
 import React, { useCallback } from 'react';
@@ -9,8 +8,8 @@ import { useDropdownStyle } from './DropdownStyle';
 import SearchInput from './component/input/TextInput';
 import { ArrowDown, ArrowUp, CheckIcon } from '../../assets/svg';
 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, 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 { 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, placeholderStyle, inputSearchStyle, searchPlaceholder, selectedTextStyle, renderInputSearch, iconColor = 'gray', accessibilityLabel, itemContainerStyle, labelContainer = {}, labelTextStyle = {}, selectedTextProps = {}, chipContainerProps = {}, keyboardAvoiding = true, selectionType = 'single', onClear: onChipClearPress, activeColor = 'lightGray', dropdownPosition = 'auto', itemAccessibilityLabelField, placeholder = 'Please select', showsVerticalScrollIndicator = true, } = props;
+    const { chipColor, clearIcon, textColor } = chipContainerProps;
     const { styles, colors } = useDropdownStyle({
         checkIconColor: checkIconColor,
         radioIconColor: radioIconColor,
@@ -24,7 +23,7 @@ const DropdownComponent = (props) => {
             ])}/>);
     };
     const _renderDropdown = () => {
-        const isSelected = currentValue && _.get(currentValue, valueField);
+        const isSelected = currentValue && currentValue?.[valueField];
         return (<TouchableWithoutFeedback testID={testID} accessible={!!accessibilityLabel} accessibilityLabel={accessibilityLabel} onPress={() => (selectionType === 'single' ? showOrClose() : null)}>
         <View style={styles.dropdown}>
           {renderLeftIcon?.(visible)}
@@ -33,17 +32,15 @@ const DropdownComponent = (props) => {
                     isSelected !== null ? selectedTextStyle : placeholderStyle,
                     font(),
                 ]} {...selectedTextProps}>
-              {isSelected !== null
-                    ? _.get(currentValue, labelField)
-                    : placeholder}
+              {isSelected !== null ? currentValue?.[labelField] : placeholder}
             </AppText>) : currentValue?.length === 0 ? (<AppText style={[styles.textItem, placeholderStyle, font()]} {...selectedTextProps}>
               {placeholder}
             </AppText>) : (<View style={styles.showMultiSelectContainer}>
               <ScrollView showsVerticalScrollIndicator={false}>
                 <View style={styles.wraps}>
                   {currentValue?.map?.((i) => (<Chip chipColor={chipColor || 'red'} textColor={textColor || 'white'} clearIcon={clearIcon} key={i?.[valueField]} label={i?.[labelField]} onClearPress={() => {
-                        onClear?.();
                         onClearPress?.(i);
+                        onChipClearPress?.(i?.[valueField]);
                     }}/>))}
                 </View>
               </ScrollView>
@@ -58,8 +55,9 @@ const DropdownComponent = (props) => {
         </View>);
     }, [styles]);
     const renderCheckItem = useCallback(({ item, index }) => {
-        const isSelected = _.some(currentValue, (h) => _.isEqual(_.get(h, valueField), _.get(item, valueField)));
-        return (<TouchableHighlight key={index.toString()} testID={_.get(item, itemTestIDField || labelField)} accessible={!!accessibilityLabel} accessibilityLabel={_.get(item, itemAccessibilityLabelField || labelField)} underlayColor={activeColor} onPress={() => onCheckPress(item)}>
+        const isSelected = currentValue.some((h) => h?.[valueField] === item?.[valueField]);
+        return (<TouchableHighlight key={index.toString()} testID={String(item?.[itemTestIDField] || item?.[labelField])} accessible={!!accessibilityLabel} accessibilityLabel={(item?.[itemAccessibilityLabelField] ||
+                item?.[labelField])} underlayColor={activeColor} onPress={() => onCheckPress(item)}>
           <View style={StyleSheet.flatten([itemContainerStyle])}>
             {renderItem ? (renderItem(item, isSelected, labelField, valueField)) : (<View style={styles.item}>
                 <SvgButton icon={multiSelectIcon ? (multiSelectIcon) : (<CheckIcon color={colors.white}/>)} onPress={() => onCheckPress(item)} style={[
@@ -77,7 +75,7 @@ const DropdownComponent = (props) => {
                     itemTextStyle,
                     font(),
                 ])}>
-                  {_.get(item, labelField)}
+                  {String(item?.[labelField])}
                 </AppText>
               </View>)}
           </View>
@@ -101,10 +99,11 @@ const DropdownComponent = (props) => {
         onCheckPress,
     ]);
     const _renderItem = useCallback(({ item, index }) => {
-        const isSelected = currentValue && _.get(currentValue, valueField);
-        const selected = _.isEqual(_.get(item, valueField), isSelected);
-        _.assign(item, { _index: index });
-        return (<TouchableHighlight key={index.toString()} testID={_.get(item, itemTestIDField || labelField)} accessible={!!accessibilityLabel} accessibilityLabel={_.get(item, itemAccessibilityLabelField || labelField)} underlayColor={activeColor} onPress={() => onSelect(item)}>
+        const isSelected = currentValue && currentValue?.[valueField];
+        const selected = item?.[valueField] === isSelected;
+        Object.assign(item, { _index: index });
+        return (<TouchableHighlight key={index.toString()} testID={String(item?.[itemTestIDField] || item?.[labelField])} accessible={!!accessibilityLabel} accessibilityLabel={(item?.[itemAccessibilityLabelField] ||
+                item?.[labelField])} underlayColor={activeColor} onPress={() => onSelect(item)}>
           <View style={StyleSheet.flatten([itemContainerStyle])}>
             {renderItem ? (renderItem(item, selected, labelField, valueField)) : (<View style={styles.item}>
                 {renderRadio(selected)}
@@ -113,7 +112,7 @@ const DropdownComponent = (props) => {
                     itemTextStyle,
                     font(),
                 ])}>
-                  {_.get(item, labelField)}
+                  {String(item?.[labelField])}
                 </AppText>
               </View>)}
           </View>

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

@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useRef, useState, useEffect, useCallback, useImperativeHandle, } from 'react';
 import { Keyboard, StatusBar, I18nManager, } from 'react-native';
-import _ from 'lodash';
 import { useDetectDevice } from './useDetectDevice';
 import { useDeviceOrientation } from './useOrientation';
 import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../../style';
@@ -110,8 +109,10 @@ const useDropdown = (props) => {
             return;
         }
         else {
-            const defaultValue = typeof value === 'object' ? _.get(value, valueField) : value;
-            const getItem = data.filter(e => _.isEqual(defaultValue, _.get(e, valueField)));
+            const defaultValue = typeof value === 'object'
+                ? valueField && value?.[valueField]
+                : value;
+            const getItem = data.filter(e => JSON.stringify(defaultValue) === JSON.stringify(e?.[valueField]));
             if (getItem.length > 0) {
                 setCurrentValue(getItem[0]);
             }
@@ -125,8 +126,8 @@ const useDropdown = (props) => {
         if (autoScroll && data.length > 0 && listData.length === data.length) {
             setTimeout(() => {
                 if (refList && refList?.current) {
-                    const defaultValue = typeof value === 'object' ? _.get(value, valueField) : value;
-                    const index = _.findIndex(listData, (e) => _.isEqual(defaultValue, _.get(e, valueField)));
+                    const defaultValue = typeof value === 'object' ? value?.[valueField] : value;
+                    const index = listData.findIndex((e) => JSON.stringify(defaultValue) === JSON.stringify(e?.[valueField]));
                     if (index > -1 && index <= listData.length - 1) {
                         refList?.current?.scrollToIndex({
                             index: index,
@@ -174,11 +175,12 @@ const useDropdown = (props) => {
     const onSearch = useCallback((text) => {
         if (text.length > 0) {
             const defaultFilterFunction = (e) => {
-                const item = _.get(e, searchField || labelField)
-                    ?.toLowerCase()
-                    .replace(' ', '')
-                    .normalize('NFD')
-                    .replace(/[\u0300-\u036f]/g, '');
+                const item = e?.[searchField] ||
+                    e?.[labelField]
+                        ?.toLowerCase()
+                        .replace(' ', '')
+                        .normalize('NFD')
+                        .replace(/[\u0300-\u036f]/g, '');
                 const key = text
                     .toLowerCase()
                     .replace(' ', '')
@@ -187,7 +189,7 @@ const useDropdown = (props) => {
                 return item.indexOf(key) >= 0;
             };
             const propSearchFunction = (e) => {
-                const labelText = _.get(e, searchField || labelField);
+                const labelText = e?.[searchField] || e?.[labelField];
                 return searchQuery?.(text, labelText);
             };
             const dataSearch = data.filter(searchQuery ? propSearchFunction : defaultFilterFunction);
@@ -221,7 +223,7 @@ const useDropdown = (props) => {
         setCurrentValue?.((prev) => {
             const exists = prev?.some?.((i) => i[valueField] === item[valueField]);
             const va = exists
-                ? _.filter(prev, i => i?.[valueField] !== item?.[valueField])
+                ? prev?.filter?.(i => i?.[valueField] !== item?.[valueField])
                 : [...prev, item];
             const v = va?.map(i => i[valueField]);
             onChange?.(item[valueField], selectionType === 'multi' ? v : item[valueField]);
@@ -230,7 +232,7 @@ const useDropdown = (props) => {
     }, [setCurrentValue, valueField, onChange, currentValue]);
     const onClearPress = useCallback((item) => {
         const updated = currentValue.filter((i) => i[valueField] !== item[valueField]);
-        const val = currentValue.map((i) => i[valueField]);
+        const val = updated.map((i) => i[valueField]);
         setCurrentValue(updated);
         onChange?.(item[valueField], val);
     }, [currentValue, valueField, onChange, setCurrentValue]);

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-components-dropdown/dropdown",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage": "https://www.npmjs.com/package/@rn-components-dropdown/dropdown",
@@ -34,7 +34,6 @@
   "license": "MIT",
   "description": "Package use for dropdown for single and multi selection with radio and checkbox",
   "devDependencies": {
-    "@types/lodash": "^4.17.20",
     "@types/react": "^19.2.2",
     "typescript": "^5.9.3"
   },
@@ -44,7 +43,6 @@
     "react-native-svg": ">=15.14.0"
   },
   "dependencies": {
-    "lodash": "^4.17.21",
     "react-hook-form": "^7.66.0",
     "react-native-svg": ">=15.14.0"
   }

package/src/components/dropdown/Dropdown.tsx

@@ -8,7 +8,6 @@ import {
   TouchableHighlight,
   TouchableWithoutFeedback,
 } from 'react-native';
-import _ from 'lodash';
 import AppText from '../text/AppText';
 import Chip from './component/chip/Chip';
 import React, { useCallback } from 'react';
@@ -59,6 +58,7 @@ const DropdownComponent = <T, Mode extends SELECTIONS_TYPE>(
     chipContainerProps = {},
     keyboardAvoiding = true,
     selectionType = 'single',
+    onClear: onChipClearPress,
     activeColor = 'lightGray',
     dropdownPosition = 'auto',
     itemAccessibilityLabelField,
@@ -66,12 +66,7 @@ const DropdownComponent = <T, Mode extends SELECTIONS_TYPE>(
     showsVerticalScrollIndicator = true,
   } = props;
 
-  const {
-    chipColor,
-    clearIcon,
-    textColor,
-    onClearPress: onClear,
-  } = chipContainerProps;
+  const { chipColor, clearIcon, textColor } = chipContainerProps;
 
   const { styles, colors } = useDropdownStyle({
     checkIconColor: checkIconColor,
@@ -122,7 +117,7 @@ const DropdownComponent = <T, Mode extends SELECTIONS_TYPE>(
   };
 
   const _renderDropdown = () => {
-    const isSelected: boolean = currentValue && _.get(currentValue, valueField);
+    const isSelected: boolean = currentValue && currentValue?.[valueField];
     return (
       <TouchableWithoutFeedback
         testID={testID}
@@ -141,9 +136,7 @@ const DropdownComponent = <T, Mode extends SELECTIONS_TYPE>(
               ]}
               {...selectedTextProps}
             >
-              {isSelected !== null
-                ? _.get(currentValue, labelField)
-                : placeholder}
+              {isSelected !== null ? currentValue?.[labelField] : placeholder}
             </AppText>
           ) : currentValue?.length === 0 ? (
             <AppText
@@ -164,8 +157,8 @@ const DropdownComponent = <T, Mode extends SELECTIONS_TYPE>(
                       key={i?.[valueField]}
                       label={i?.[labelField]}
                       onClearPress={() => {
-                        onClear?.();
                         onClearPress?.(i);
+                        onChipClearPress?.(i?.[valueField]);
                       }}
                     />
                   ))}
@@ -192,18 +185,21 @@ const DropdownComponent = <T, Mode extends SELECTIONS_TYPE>(
 
   const renderCheckItem = useCallback(
     ({ item, index }: { item: T; index: number }) => {
-      const isSelected = _.some(currentValue, (h: any) =>
-        _.isEqual(_.get(h, valueField), _.get(item, valueField)),
+      const isSelected = currentValue.some(
+        (h: any) => h?.[valueField] === item?.[valueField],
       );
+
       return (
         <TouchableHighlight
           key={index.toString()}
-          testID={_.get(item, itemTestIDField || labelField)}
-          accessible={!!accessibilityLabel}
-          accessibilityLabel={_.get(
-            item,
-            itemAccessibilityLabelField || labelField,
+          testID={String(
+            item?.[itemTestIDField as keyof T] || item?.[labelField],
           )}
+          accessible={!!accessibilityLabel}
+          accessibilityLabel={
+            (item?.[itemAccessibilityLabelField as keyof T] ||
+              item?.[labelField]) as string | undefined
+          }
           underlayColor={activeColor}
           onPress={() => onCheckPress(item)}
         >
@@ -239,7 +235,7 @@ const DropdownComponent = <T, Mode extends SELECTIONS_TYPE>(
                     font(),
                   ])}
                 >
-                  {_.get(item, labelField)}
+                  {String(item?.[labelField])}
                 </AppText>
               </View>
             )}
@@ -269,18 +265,20 @@ const DropdownComponent = <T, Mode extends SELECTIONS_TYPE>(
 
   const _renderItem = useCallback(
     ({ item, index }: { item: T; index: number }) => {
-      const isSelected = currentValue && _.get(currentValue, valueField);
-      const selected = _.isEqual(_.get(item, valueField), isSelected);
-      _.assign(item, { _index: index });
+      const isSelected = currentValue && currentValue?.[valueField];
+      const selected = item?.[valueField] === isSelected;
+      Object.assign(item as object, { _index: index });
       return (
         <TouchableHighlight
           key={index.toString()}
-          testID={_.get(item, itemTestIDField || labelField)}
-          accessible={!!accessibilityLabel}
-          accessibilityLabel={_.get(
-            item,
-            itemAccessibilityLabelField || labelField,
+          testID={String(
+            item?.[itemTestIDField as keyof T] || item?.[labelField],
           )}
+          accessible={!!accessibilityLabel}
+          accessibilityLabel={
+            (item?.[itemAccessibilityLabelField as keyof T] ||
+              item?.[labelField]) as string | undefined
+          }
           underlayColor={activeColor}
           onPress={() => onSelect(item)}
         >
@@ -297,7 +295,7 @@ const DropdownComponent = <T, Mode extends SELECTIONS_TYPE>(
                     font(),
                   ])}
                 >
-                  {_.get(item, labelField)}
+                  {String(item?.[labelField])}
                 </AppText>
               </View>
             )}

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

@@ -14,7 +14,6 @@ import {
   I18nManager,
   KeyboardEvent,
 } from 'react-native';
-import _ from 'lodash';
 import { useDetectDevice } from './useDetectDevice';
 import { useDeviceOrientation } from './useOrientation';
 import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../../style';
@@ -181,10 +180,12 @@ const useDropdown = <T, Mode extends SELECTIONS_TYPE>(
       return;
     } else {
       const defaultValue =
-        typeof value === 'object' ? _.get(value, valueField) : value;
+        typeof value === 'object'
+          ? valueField && value?.[valueField as any]
+          : value;
 
-      const getItem = data.filter(e =>
-        _.isEqual(defaultValue, _.get(e, valueField)),
+      const getItem = data.filter(
+        e => JSON.stringify(defaultValue) === JSON.stringify(e?.[valueField]),
       );
       if (getItem.length > 0) {
         setCurrentValue(getItem[0]);
@@ -201,10 +202,11 @@ const useDropdown = <T, Mode extends SELECTIONS_TYPE>(
       setTimeout(() => {
         if (refList && refList?.current) {
           const defaultValue =
-            typeof value === 'object' ? _.get(value, valueField) : value;
+            typeof value === 'object' ? (value as T)?.[valueField] : value;
 
-          const index = _.findIndex(listData, (e: any) =>
-            _.isEqual(defaultValue, _.get(e, valueField)),
+          const index = listData.findIndex(
+            (e: any) =>
+              JSON.stringify(defaultValue) === JSON.stringify(e?.[valueField]),
           );
           if (index > -1 && index <= listData.length - 1) {
             refList?.current?.scrollToIndex({
@@ -256,11 +258,13 @@ const useDropdown = <T, Mode extends SELECTIONS_TYPE>(
     (text: string) => {
       if (text.length > 0) {
         const defaultFilterFunction = (e: any) => {
-          const item = _.get(e, searchField || labelField)
-            ?.toLowerCase()
-            .replace(' ', '')
-            .normalize('NFD')
-            .replace(/[\u0300-\u036f]/g, '');
+          const item =
+            e?.[searchField] ||
+            e?.[labelField]
+              ?.toLowerCase()
+              .replace(' ', '')
+              .normalize('NFD')
+              .replace(/[\u0300-\u036f]/g, '');
           const key = text
             .toLowerCase()
             .replace(' ', '')
@@ -271,7 +275,7 @@ const useDropdown = <T, Mode extends SELECTIONS_TYPE>(
         };
 
         const propSearchFunction = (e: any) => {
-          const labelText = _.get(e, searchField || labelField);
+          const labelText = e?.[searchField] || e?.[labelField];
 
           return searchQuery?.(text, labelText);
         };
@@ -319,7 +323,7 @@ const useDropdown = <T, Mode extends SELECTIONS_TYPE>(
           (i: any) => i[valueField] === item[valueField],
         );
         const va: T[] = exists
-          ? _.filter(prev, i => i?.[valueField] !== item?.[valueField])
+          ? prev?.filter?.(i => i?.[valueField] !== item?.[valueField])
           : [...prev, item];
         const v = va?.map(i => i[valueField]);
         onChange?.(
@@ -337,7 +341,7 @@ const useDropdown = <T, Mode extends SELECTIONS_TYPE>(
       const updated = currentValue.filter(
         (i: any) => i[valueField] !== item[valueField],
       );
-      const val = currentValue.map((i: any) => i[valueField]);
+      const val = updated.map((i: any) => i[valueField]);
       setCurrentValue(updated);
       onChange?.(item[valueField] as keyof T, val);
     },

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

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