@rn-components-dropdown/dropdown 1.0.7 → 1.0.8

package/dist/components/dropdown/Dropdown.js

@@ -94,7 +94,7 @@ const DropdownComponent = (props) => {
         const isSelected = lodash_1.default.some(currentValue, h => lodash_1.default.isEqual(lodash_1.default.get(h, valueField), lodash_1.default.get(item, valueField)));
         return (<react_native_1.TouchableHighlight key={index.toString()} testID={lodash_1.default.get(item, itemTestIDField || labelField)} accessible={!!accessibilityLabel} accessibilityLabel={lodash_1.default.get(item, itemAccessibilityLabelField || labelField)} underlayColor={colors[activeColor]} onPress={() => onCheckPress(item)}>
           <react_native_1.View style={react_native_1.StyleSheet.flatten([itemContainerStyle])}>
-            {renderItem ? (renderItem(item, isSelected)) : (<react_native_1.View style={styles.item}>
+            {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,
                     {
@@ -132,7 +132,7 @@ const DropdownComponent = (props) => {
         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)}>
           <react_native_1.View style={react_native_1.StyleSheet.flatten([itemContainerStyle])}>
-            {renderItem ? (renderItem(item, selected)) : (<react_native_1.View style={styles.item}>
+            {renderItem ? (renderItem(item, selected, labelField, valueField)) : (<react_native_1.View style={styles.item}>
                 {renderRadio(selected)}
                 <AppText_1.default style={react_native_1.StyleSheet.flatten([
                     styles.textItem,

package/dist/components/dropdown/hooks/useDropdown.d.ts

@@ -12,7 +12,7 @@ declare const useDropdown: <T, Mode extends "single" | "multi">(props: DropdownP
     position: any;
     onSelect: (item: any) => void;
     onSearch: (text: string) => void;
-    listData: any[];
+    listData: T[];
     onMeasure: () => void;
     searchText: string;
     showOrClose: () => void;

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

@@ -61,7 +61,7 @@ export type DropdownProps<S, T extends SelectionType> = {
     flatListProps?: Omit<FlatListProps<any>, 'renderItem' | 'data'>;
     renderLeftIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
     renderRightIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
-    renderItem?: (item: S, selected?: boolean) => React.JSX.Element | null | undefined;
+    renderItem?: (item: S, selected?: boolean, labelField?: keyof S, valueField?: keyof S) => React.JSX.Element | null | undefined;
     renderInputSearch?: (onSearch: (text: string) => void) => React.JSX.Element | null | undefined;
 };
 export interface IUseDetectDevice {

package/package.json

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

package/src/assets/svg/SearchIcon.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Svg, { Path, SvgProps } from "react-native-svg";
+import Svg, { Path } from "react-native-svg";
 import { SvgInterface } from "../../interface/svg.interface";
 
 const SearchIcon = ({  size= 18, color = "#1C1B1F" }: SvgInterface) => (

package/src/components/dropdown/Dropdown.tsx

@@ -104,7 +104,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
   };
 
   const _renderDropdown = () => {
-    const isSelected = currentValue && _.get(currentValue, valueField);
+    const isSelected: boolean = currentValue && _.get(currentValue, valueField);
     return (
       <TouchableWithoutFeedback
         testID={testID}
@@ -169,7 +169,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
   );
 
   const renderCheckItem = useCallback(
-    ({ item, index }: { item: any; index: number }) => {
+    ({ item, index }: { item: T; index: number }) => {
       const isSelected = _.some(currentValue, h =>
         _.isEqual(_.get(h, valueField), _.get(item, valueField)),
       );
@@ -187,8 +187,8 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
         >
           <View style={StyleSheet.flatten([itemContainerStyle])}>
             {renderItem ? (
-              renderItem(item, isSelected)
-            ) : (
+              renderItem(item, isSelected, labelField, valueField)
+            )  : (
               <View style={styles.item}>
                 <SvgButton
                   icon={multiSelectIcon ? multiSelectIcon : <CheckIcon color={colors.white}/> }
@@ -233,7 +233,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
   );
 
   const _renderItem = useCallback(
-    ({ item, index }: { item: any; index: number }) => {
+    ({ item, index }: { item: T; index: number }) => {
       const isSelected = currentValue && _.get(currentValue, valueField);
       const selected = _.isEqual(_.get(item, valueField), isSelected);
       _.assign(item, { _index: index });
@@ -251,7 +251,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
         >
           <View style={StyleSheet.flatten([itemContainerStyle])}>
             {renderItem ? (
-              renderItem(item, selected)
+              renderItem(item, selected, labelField, valueField)
             ) : (
               <View style={styles.item}>
                 {renderRadio(selected)}

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

@@ -50,7 +50,7 @@ const useDropdown = <T, Mode extends 'single' | 'multi'>(
   const orientation = useDeviceOrientation();
   const [position, setPosition] = useState<any>();
   const [searchText, setSearchText] = useState('');
-  const [listData, setListData] = useState<any[]>(data);
+  const [listData, setListData] = useState<T[]>(data);
   const [visible, setVisible] = useState<boolean>(false);
   const [currentValue, setCurrentValue] = useState<any>(null);
   const statusBarHeight: number = StatusBar.currentHeight || 0;

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

@@ -77,6 +77,8 @@ export type DropdownProps<S, T extends SelectionType> = {
   renderItem?: (
     item: S,
     selected?: boolean,
+    labelField?: keyof S,
+    valueField?: keyof S,
   ) => React.JSX.Element | null | undefined;
   renderInputSearch?: (
     onSearch: (text: string) => void,