@rn-components-dropdown/dropdown 1.0.6 → 1.0.8

package/dist/assets/svg/ArrowDown.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
-const ArrowDown = ({ size = 24, color = "black" }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+const ArrowDown = ({ size = 16, color = "black" }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Mask id="mask0_2371_2505" maskUnits="userSpaceOnUse" x={0} y={0} width={24} height={24}>
       <react_native_svg_1.Rect width={24} height={24} rx={1} fill="#fff"/>
     </react_native_svg_1.Mask>

package/dist/assets/svg/ArrowUp.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
-const ArrowUp = ({ size = 24, color = "#1C1B1F" }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+const ArrowUp = ({ size = 16, color = "#1C1B1F" }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Mask id="mask0_2375_2500" maskUnits="userSpaceOnUse" x={0} y={0} width={24} height={24}>
       <react_native_svg_1.Rect x={24} y={24} width={24} height={24} rx={1} transform="rotate(-180 24 24)" fill={color}/>
     </react_native_svg_1.Mask>

package/dist/assets/svg/SearchIcon.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
-const SearchIcon = ({ size = 24, color = "#1C1B1F" }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 18 18" fill={color}>
+const SearchIcon = ({ size = 18, color = "#1C1B1F" }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 18 18" fill={color}>
     <react_native_svg_1.Path d="M17.3 17.3C16.9134 17.6866 16.2866 17.6866 15.9 17.3L11.6989 13.0989C10.9025 12.3025 9.63504 12.2695 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.2695 9.63504 12.3025 10.9025 13.0989 11.6989L17.3 15.9C17.6866 16.2866 17.6866 16.9134 17.3 17.3ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z"/>
   </react_native_svg_1.default>);
 exports.default = SearchIcon;

package/dist/components/dropdown/Dropdown.js

@@ -53,7 +53,7 @@ const DropdownComponent = (props) => {
     const { styles, colors } = (0, DropdownStyle_1.useDropdownStyle)({});
     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.ArrowDown color={iconColor}/> : <svg_1.ArrowUp color={iconColor}/>} onPress={showOrClose} style={react_native_1.StyleSheet.flatten([
+        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([
                 iconStyle,
                 styles.icon,
                 { tintColor: iconColor },
@@ -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.6",
+  "version": "1.0.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {

package/src/assets/svg/ArrowDown.tsx

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

package/src/assets/svg/ArrowUp.tsx

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

package/src/assets/svg/SearchIcon.tsx

@@ -1,8 +1,8 @@
 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 = 24, color = "#1C1B1F" }: SvgInterface) => (
+const SearchIcon = ({  size= 18, color = "#1C1B1F" }: SvgInterface) => (
   <Svg width={size} height={size} viewBox="0 0 18 18" fill={color}>
     <Path d="M17.3 17.3C16.9134 17.6866 16.2866 17.6866 15.9 17.3L11.6989 13.0989C10.9025 12.3025 9.63504 12.2695 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.2695 9.63504 12.3025 10.9025 13.0989 11.6989L17.3 15.9C17.6866 16.2866 17.6866 16.9134 17.3 17.3ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z"/>
   </Svg>

package/src/components/dropdown/Dropdown.tsx

@@ -92,7 +92,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
       renderRightIcon(visible)
     ) : (
       <SvgButton
-        icon={subfixIcon ? subfixIcon : visible ? <ArrowDown color={iconColor} />  : <ArrowUp color={iconColor} />}
+        icon={subfixIcon ? subfixIcon : visible ?  <ArrowUp color={iconColor} /> : <ArrowDown color={iconColor} />}
         onPress={showOrClose}
         style={StyleSheet.flatten([
           iconStyle,
@@ -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,