@rn-components-dropdown/dropdown 1.0.27 → 1.0.28

package/dist/style/index.js

@@ -1,23 +1,6 @@
-"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 __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.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");
-exports.SCREEN_WIDTH = react_native_1.Dimensions.get('window').width;
-exports.SCREEN_HEIGHT = react_native_1.Dimensions.get('window').height;
+export * from './colors';
+export * from './spacing';
+export * from './shadow';
+import { Dimensions } from 'react-native';
+export const SCREEN_WIDTH = Dimensions.get('window').width;
+export const SCREEN_HEIGHT = Dimensions.get('window').height;

package/dist/style/shadow.d.ts

@@ -1,24 +1,4 @@
 export declare const SHADOW: {
-    noShadow: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow0: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
     shadow1: {
         shadowColor: string;
         shadowOffset: {
@@ -29,133 +9,4 @@ export declare const SHADOW: {
         shadowRadius: number;
         elevation: number;
     };
-    shadow2: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow3: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow4: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow5: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow6: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow7: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow8: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow9: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow10: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow11: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow12: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    containerShadow: {
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
-    shadow13: {
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-    };
 };

package/dist/style/shadow.js

@@ -1,27 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SHADOW = void 0;
-exports.SHADOW = {
-    noShadow: {
-        shadowColor: 'transparent',
-        shadowOffset: {
-            width: 0,
-            height: 0,
-        },
-        shadowOpacity: 0,
-        shadowRadius: 0,
-        elevation: 0,
-    },
-    shadow0: {
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 1,
-        },
-        shadowOpacity: 0.18,
-        shadowRadius: 1.0,
-        elevation: 1,
-    },
+export const SHADOW = {
     shadow1: {
         shadowColor: '#000',
         shadowOffset: {
@@ -32,127 +9,4 @@ exports.SHADOW = {
         shadowRadius: 1.41,
         elevation: 2,
     },
-    shadow2: {
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 1,
-        },
-        shadowOpacity: 0.22,
-        shadowRadius: 0.8,
-        elevation: 3,
-    },
-    shadow3: {
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.23,
-        shadowRadius: 2.62,
-        elevation: 4,
-    },
-    shadow4: {
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.25,
-        shadowRadius: 3.84,
-        elevation: 5,
-    },
-    shadow5: {
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 3,
-        },
-        shadowOpacity: 0.27,
-        shadowRadius: 4.65,
-        elevation: 6,
-    },
-    shadow6: {
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 3,
-        },
-        shadowOpacity: 0.29,
-        shadowRadius: 4.65,
-        elevation: 7,
-    },
-    shadow7: {
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 4,
-        },
-        shadowOpacity: 0.3,
-        shadowRadius: 4.65,
-        elevation: 8,
-    },
-    shadow8: {
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 4,
-        },
-        shadowOpacity: 0.32,
-        shadowRadius: 5.46,
-        elevation: 9,
-    },
-    shadow9: {
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 5,
-        },
-        shadowOpacity: 0.34,
-        shadowRadius: 6.27,
-        elevation: 10,
-    },
-    shadow10: {
-        shadowColor: '#C3C3C3',
-        shadowOffset: { width: 0, height: 0 },
-        shadowOpacity: 0.3,
-        shadowRadius: 5,
-        elevation: 5,
-    },
-    shadow11: {
-        shadowColor: '#3683BC',
-        shadowOffset: {
-            width: 1,
-            height: 1,
-        },
-        shadowOpacity: 0.3,
-        shadowRadius: 1,
-        elevation: 1,
-    },
-    shadow12: {
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 1,
-            height: 1,
-        },
-        shadowOpacity: 0.1,
-        shadowRadius: 3,
-        elevation: 5,
-    },
-    containerShadow: {
-        shadowOffset: { width: 2, height: 1 },
-        shadowOpacity: 0.5,
-        shadowRadius: 6,
-        elevation: 5,
-    },
-    shadow13: {
-        shadowColor: '#3683BC',
-        shadowOffset: {
-            width: 1,
-            height: 1,
-        },
-        shadowOpacity: 0.005,
-        shadowRadius: 3,
-        elevation: 1,
-    },
 };

package/dist/style/spacing.d.ts

@@ -1,8 +1,4 @@
 export declare const SPACING: {
-    none: number;
-    s1: number;
-    s2: number;
-    s3: number;
     s4: number;
     s6: number;
     s8: number;
@@ -10,14 +6,6 @@ export declare const SPACING: {
     s12: number;
     s14: number;
     s16: number;
-    s18: number;
     s20: number;
-    s22: number;
-    s24: number;
-    s30: number;
-    s36: number;
-    s40: number;
     s45: number;
-    s48: number;
-    s50: number;
 };

package/dist/style/spacing.js

@@ -1,11 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SPACING = void 0;
-exports.SPACING = {
-    none: 0,
-    s1: 1,
-    s2: 2,
-    s3: 3,
+export const SPACING = {
     s4: 4,
     s6: 6,
     s8: 8,
@@ -13,14 +6,6 @@ exports.SPACING = {
     s12: 12,
     s14: 14,
     s16: 16,
-    s18: 18,
     s20: 20,
-    s22: 22,
-    s24: 24,
-    s30: 30,
-    s36: 36,
-    s40: 40,
-    s45: 45,
-    s48: 48,
-    s50: 50,
+    s45: 45
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-components-dropdown/dropdown",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage": "https://www.npmjs.com/package/@rn-components-dropdown/dropdown",

package/src/components/dropdown/Dropdown.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import {
   View,
   Modal,
@@ -16,8 +15,7 @@ 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 { ArrowDown, ArrowUp, CheckIcon } from '../../assets/svg';
 import SearchInput from './component/input/TextInput';
 import { DropdownProps } from './interface/DropdownInterface';
 
@@ -47,7 +45,6 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     maxHeight = 300,
     inverted = true,
     renderRightIcon,
-    backgroundColor,
     placeholderStyle,
     inputSearchStyle,
     searchPlaceholder,
@@ -251,19 +248,22 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
       );
     },
     [
-      font,
-      colors,
-      styles,
-      labelField,
-      renderItem,
-      valueField,
-      activeColor,
       currentValue,
-      itemTextStyle,
       itemTestIDField,
+      labelField,
       accessibilityLabel,
-      itemContainerStyle,
       itemAccessibilityLabelField,
+      activeColor,
+      itemContainerStyle,
+      renderItem,
+      valueField,
+      styles,
+      multiSelectIcon,
+      colors,
+      checkIconColor,
+      itemTextStyle,
+      font,
+      onCheckPress,
     ],
   );
 
@@ -307,7 +307,6 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     },
     [
       font,
-      colors,
       styles,
       onSelect,
       labelField,
@@ -358,16 +357,17 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     return null;
   }, [
     search,
+    renderInputSearch,
+    onChangeText,
+    onSearch,
+    setSearchText,
+    searchText,
     testID,
     colors,
     styles,
-    onSearch,
-    searchText,
-    onChangeText,
     inputSearchStyle,
-    renderInputSearch,
-    searchPlaceholder,
     accessibilityLabel,
+    searchPlaceholder,
   ]);
 
   const _renderList = useCallback(
@@ -405,16 +405,19 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
       );
     },
     [
-      styles,
-      testID,
       inverted,
-      listData,
-      scrollIndex,
+      styles,
       renderSearch,
+      refList,
+      listData,
       flatListProps,
-      renderCheckItem,
+      testID,
+      scrollIndex,
       accessibilityLabel,
       showsVerticalScrollIndicator,
+      selectionType,
+      _renderItem,
+      renderCheckItem,
     ],
   );
 
@@ -513,7 +516,6 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     _renderList,
     keyboardHeight,
     containerStyle,
-    backgroundColor,
     dropdownPosition,
     keyboardAvoiding,
   ]);
@@ -534,7 +536,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
     <View style={styles.mainContainer}>
       {_renderLabel()}
       <View
-        ref={ref}
+        ref={ref as any}
         onLayout={onMeasure}
         style={StyleSheet.flatten([styles.mainWrap, style])}
       >

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

@@ -18,9 +18,9 @@ import _ from 'lodash';
 import { useDetectDevice } from './useDetectDevice';
 import { useDeviceOrientation } from './useOrientation';
 import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../../style';
-import { DropdownProps } from '../interface/DropdownInterface';
+import { DropdownProps, SELECTIONS_TYPE } from '../interface/DropdownInterface';
 
-const useDropdown = <T, Mode extends 'single' | 'multi'>(
+const useDropdown = <T, Mode extends SELECTIONS_TYPE>(
   props: DropdownProps<T, Mode>,
 ) => {
   const {
@@ -103,7 +103,18 @@ const useDropdown = <T, Mode extends 'single' | 'multi'>(
 
   const onMeasure = useCallback(() => {
     if (ref && ref?.current) {
-      ref.current.measureInWindow((pageX, pageY, width, height) => {
+      (
+        ref?.current as unknown as {
+          measureInWindow: (
+            callback: (
+              x: number,
+              y: number,
+              width: number,
+              height: number,
+            ) => void,
+          ) => void;
+        }
+      )?.measureInWindow((pageX, pageY, width, height) => {
         let isFull = isTablet
           ? false
           : mode === 'modal' || orientation === 'LANDSCAPE';

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

@@ -15,9 +15,9 @@ export type IDropdownRef = {
   close: () => void;
 };
 
-export type SelectionType = 'single' | 'multi';
+export type SELECTIONS_TYPE = 'single' | 'multi';
 
-export type DropdownProps<S, T extends SelectionType> = {
+export type DropdownProps<S, T extends SELECTIONS_TYPE> = {
   data: S[];
   testID?: string;
   search?: boolean;
@@ -63,7 +63,7 @@ export type DropdownProps<S, T extends SelectionType> = {
   placeholderStyle?: StyleProp<TextStyle>;
   inputSearchStyle?: StyleProp<TextStyle>;
   onChangeText?: (search: string) => void;
-  onConfirmSelectItem?: (item: T) => void;
+  onConfirmSelectItem?: (item: S) => void;
   selectedTextStyle?: StyleProp<TextStyle>;
   itemContainerStyle?: StyleProp<ViewStyle>;
   dropdownPosition?: 'auto' | 'top' | 'bottom';
@@ -83,7 +83,7 @@ export type DropdownProps<S, T extends SelectionType> = {
   ) => React.JSX.Element | null | undefined;
   onChange?: (
     selecteValue?: keyof S,
-    selectedList?: SelectionType extends 'single' | 'multi' ? S[] : S,
+    selectedList?: SELECTIONS_TYPE extends 'single' | 'multi' ? S[] : S,
   ) => void;
 };
 

package/src/components/text/AppText.tsx

@@ -22,9 +22,6 @@ const AppText = ({
 }: props) => {
   const family = fontFamily;
   const styles = useAppTextStyle({
-    style: {
-      fontFamily: family,
-    },
     size,
     color,
     type,

package/src/components/text/AppTextStyle.ts

@@ -11,7 +11,6 @@ interface props {
 
 export const useAppTextStyle = ({
   size,
-  style,
   color,
   type = 'normal',
 }: props) => {
@@ -22,13 +21,12 @@ export const useAppTextStyle = ({
       container: {
         fontSize: size || 14,
         color: type === 'error' ? colors.error : color ? color : colors.primary,
-        ...style,
       },
       require: {
         color: colors.error,
       },
     });
-  }, [size, colors, style, type, color]);
+  }, [size, colors, type, color]);
 
   return styles;
 };

package/src/controller/dropDownController/DropdownController.tsx

@@ -3,38 +3,39 @@ import { View } from 'react-native';
 import AppText from '../../components/text/AppText';
 import {
   DropdownProps,
-  SelectionType,
+  SELECTIONS_TYPE,
 } from '../../components/dropdown/interface/DropdownInterface';
 import DropdownComponent from '../../components/dropdown/Dropdown';
 import { useDropdownControllerStyle } from './DropdownControllerStyle';
 import { Control, Controller, FieldValues, Path } from 'react-hook-form';
 
-type DropControllerProps<S, T extends SelectionType, U extends FieldValues> = {
+interface DropControllerProps<
+  U extends FieldValues,
+  S,
+  T extends SELECTIONS_TYPE = 'single',
+> extends DropdownProps<S, T> {
   control: Control<U>;
   controller: Path<U>;
-  dropProps: DropdownProps<S, T>;
-};
+}
 
 const AppDropdownController = <
-  S,
-  T extends SelectionType,
   U extends FieldValues,
+  S,
+  T extends SELECTIONS_TYPE = 'single',
 >(
-  props: DropControllerProps<S, T, U>,
+  props: DropControllerProps<U, S, T>,
 ) => {
   const {
+    data,
+    label,
     control,
+    labelField,
     controller,
-    dropProps: {
-      data,
-      label,
-      labelField,
-      valueField,
-      placeholder,
-      selectionType,
-      containerStyle,
-      ...rest
-    },
+    valueField,
+    placeholder,
+    selectionType,
+    containerStyle,
+    ...rest
   } = props;
 
   const { styles } = useDropdownControllerStyle();