@rn-components-dropdown/dropdown 1.0.25 → 1.0.28

package/dist/components/dropdown/Dropdown.js

@@ -1,108 +1,68 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable react-hooks/exhaustive-deps */
-const react_native_1 = require("react-native");
-const lodash_1 = __importDefault(require("lodash"));
-const AppText_1 = __importDefault(require("../text/AppText"));
-const Chip_1 = __importDefault(require("./component/chip/Chip"));
-const react_1 = __importStar(require("react"));
-const useDropdown_1 = __importDefault(require("./hooks/useDropdown"));
-const SvgButton_1 = __importDefault(require("../svgButton/SvgButton"));
-const DropdownStyle_1 = require("./DropdownStyle");
-const CheckIcon_1 = __importDefault(require("../../assets/svg/CheckIcon"));
-const svg_1 = require("../../assets/svg");
-const TextInput_1 = __importDefault(require("./component/input/TextInput"));
+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';
+import useDropdown from './hooks/useDropdown';
+import SvgButton from '../svgButton/SvgButton';
+import { useDropdownStyle } from './DropdownStyle';
+import { ArrowDown, ArrowUp, CheckIcon } from '../../assets/svg';
+import SearchInput from './component/input/TextInput';
 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, 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 { 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 { styles, colors } = (0, DropdownStyle_1.useDropdownStyle)({
+    const { styles, colors } = 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 { ref, font, visible, refList, position, onSelect, listData, onSearch, onMeasure, searchText, showOrClose, scrollIndex, currentValue, onCheckPress, onClearPress, setSearchText, keyboardHeight, } = useDropdown({ ...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([
+        return renderRightIcon ? (renderRightIcon(visible)) : (<SvgButton icon={subfixIcon ? (subfixIcon) : visible ? (<ArrowUp color={iconColor}/>) : (<ArrowDown color={iconColor}/>)} onPress={showOrClose} style={StyleSheet.flatten([
                 iconStyle,
                 styles.icon,
                 { tintColor: iconColor },
             ])}/>);
     };
     const _renderDropdown = () => {
-        const isSelected = currentValue && lodash_1.default.get(currentValue, valueField);
-        return (<react_native_1.TouchableWithoutFeedback testID={testID} accessible={!!accessibilityLabel} accessibilityLabel={accessibilityLabel} onPress={() => (selectionType === 'single' ? showOrClose() : null)}>
-        <react_native_1.View style={styles.dropdown}>
+        const isSelected = currentValue && _.get(currentValue, valueField);
+        return (<TouchableWithoutFeedback testID={testID} accessible={!!accessibilityLabel} accessibilityLabel={accessibilityLabel} onPress={() => (selectionType === 'single' ? showOrClose() : null)}>
+        <View style={styles.dropdown}>
           {renderLeftIcon?.(visible)}
-          {selectionType === 'single' ? (<AppText_1.default style={[
+          {selectionType === 'single' ? (<AppText style={[
                     styles.textItem,
                     isSelected !== null ? selectedTextStyle : placeholderStyle,
                     font(),
                 ]} {...selectedTextProps}>
               {isSelected !== null
-                    ? lodash_1.default.get(currentValue, labelField)
+                    ? _.get(currentValue, labelField)
                     : placeholder}
-            </AppText_1.default>) : currentValue?.length === 0 ? (<AppText_1.default style={[styles.textItem, placeholderStyle, font()]} {...selectedTextProps}>
+            </AppText>) : currentValue?.length === 0 ? (<AppText style={[styles.textItem, placeholderStyle, font()]} {...selectedTextProps}>
               {placeholder}
-            </AppText_1.default>) : (<react_native_1.View style={styles.showMultiSelectContainer}>
-              <react_native_1.ScrollView showsVerticalScrollIndicator={false}>
-                <react_native_1.View style={styles.wraps}>
-                  {currentValue?.map?.((i) => (<Chip_1.default chipColor={chipColor || 'red'} textColor={textColor || 'white'} clearIcon={clearIcon} key={i?.[valueField]} label={i?.[labelField]} onClearPress={() => {
+            </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);
                     }}/>))}
-                </react_native_1.View>
-              </react_native_1.ScrollView>
-            </react_native_1.View>)}
+                </View>
+              </ScrollView>
+            </View>)}
           {renderRight()}
-        </react_native_1.View>
-      </react_native_1.TouchableWithoutFeedback>);
+        </View>
+      </TouchableWithoutFeedback>);
     };
-    const renderRadio = (0, react_1.useCallback)((selected) => {
-        return (<react_native_1.View style={styles.itemIconContainer}>
-          {selected && <react_native_1.View style={styles.iconSubContainer}/>}
-        </react_native_1.View>);
+    const renderRadio = useCallback((selected) => {
+        return (<View style={styles.itemIconContainer}>
+          {selected && <View style={styles.iconSubContainer}/>}
+        </View>);
     }, [styles]);
-    const renderCheckItem = (0, react_1.useCallback)(({ item, index }) => {
-        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={activeColor} onPress={() => onCheckPress(item)}>
-          <react_native_1.View style={react_native_1.StyleSheet.flatten([itemContainerStyle])}>
-            {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={[
+    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)}>
+          <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={[
                     styles.checkContainer,
                     {
                         backgroundColor: isSelected
@@ -112,52 +72,54 @@ const DropdownComponent = (props) => {
                             : colors.white,
                     },
                 ]}/>
-                <AppText_1.default style={react_native_1.StyleSheet.flatten([
+                <AppText style={StyleSheet.flatten([
                     styles.textItem,
                     itemTextStyle,
                     font(),
                 ])}>
-                  {lodash_1.default.get(item, labelField)}
-                </AppText_1.default>
-              </react_native_1.View>)}
-          </react_native_1.View>
-        </react_native_1.TouchableHighlight>);
+                  {_.get(item, labelField)}
+                </AppText>
+              </View>)}
+          </View>
+        </TouchableHighlight>);
     }, [
-        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,
     ]);
-    const _renderItem = (0, react_1.useCallback)(({ item, index }) => {
-        const isSelected = currentValue && lodash_1.default.get(currentValue, valueField);
-        const selected = lodash_1.default.isEqual(lodash_1.default.get(item, valueField), isSelected);
-        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={activeColor} onPress={() => onSelect(item)}>
-          <react_native_1.View style={react_native_1.StyleSheet.flatten([itemContainerStyle])}>
-            {renderItem ? (renderItem(item, selected, labelField, valueField)) : (<react_native_1.View style={styles.item}>
+    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)}>
+          <View style={StyleSheet.flatten([itemContainerStyle])}>
+            {renderItem ? (renderItem(item, selected, labelField, valueField)) : (<View style={styles.item}>
                 {renderRadio(selected)}
-                <AppText_1.default style={react_native_1.StyleSheet.flatten([
+                <AppText style={StyleSheet.flatten([
                     styles.textItem,
                     itemTextStyle,
                     font(),
                 ])}>
-                  {lodash_1.default.get(item, labelField)}
-                </AppText_1.default>
-              </react_native_1.View>)}
-          </react_native_1.View>
-        </react_native_1.TouchableHighlight>);
+                  {_.get(item, labelField)}
+                </AppText>
+              </View>)}
+          </View>
+        </TouchableHighlight>);
     }, [
         font,
-        colors,
         styles,
         onSelect,
         labelField,
@@ -172,7 +134,7 @@ const DropdownComponent = (props) => {
         itemContainerStyle,
         itemAccessibilityLabelField,
     ]);
-    const renderSearch = (0, react_1.useCallback)(() => {
+    const renderSearch = useCallback(() => {
         if (search) {
             if (renderInputSearch) {
                 return renderInputSearch(text => {
@@ -184,7 +146,7 @@ const DropdownComponent = (props) => {
                 });
             }
             else {
-                return (<TextInput_1.default value={searchText} autoCorrect={false} testID={testID + ' input'} placeholderTextColor={colors.black} style={[styles.input, inputSearchStyle]} accessibilityLabel={accessibilityLabel + ' input'} placeholder={searchPlaceholder || 'Write here for search...'} onChangeText={(e) => {
+                return (<SearchInput value={searchText} autoCorrect={false} testID={testID + ' input'} placeholderTextColor={colors.black} style={[styles.input, inputSearchStyle]} accessibilityLabel={accessibilityLabel + ' input'} placeholder={searchPlaceholder || 'Write here for search...'} onChangeText={(e) => {
                         if (onChangeText) {
                             setSearchText(e);
                             onChangeText(e);
@@ -196,42 +158,46 @@ const DropdownComponent = (props) => {
         return null;
     }, [
         search,
+        renderInputSearch,
+        onChangeText,
+        onSearch,
+        setSearchText,
+        searchText,
         testID,
         colors,
         styles,
-        onSearch,
-        searchText,
-        onChangeText,
         inputSearchStyle,
-        renderInputSearch,
-        searchPlaceholder,
         accessibilityLabel,
+        searchPlaceholder,
     ]);
-    const _renderList = (0, react_1.useCallback)((isTopPosition) => {
+    const _renderList = useCallback((isTopPosition) => {
         const isInverted = !inverted ? false : isTopPosition;
         const _renderListHelper = () => {
-            return (<react_native_1.FlatList ref={refList} data={listData} {...flatListProps} testID={testID + ' flatlist'} keyboardShouldPersistTaps="handled" onScrollToIndexFailed={scrollIndex} inverted={isTopPosition ? inverted : false} keyExtractor={(_item, index) => index.toString()} accessibilityLabel={accessibilityLabel + ' flatlist'} showsVerticalScrollIndicator={showsVerticalScrollIndicator} renderItem={selectionType === 'single' ? _renderItem : renderCheckItem}/>);
+            return (<FlatList ref={refList} data={listData} {...flatListProps} testID={testID + ' flatlist'} keyboardShouldPersistTaps="handled" onScrollToIndexFailed={scrollIndex} inverted={isTopPosition ? inverted : false} keyExtractor={(_item, index) => index.toString()} accessibilityLabel={accessibilityLabel + ' flatlist'} showsVerticalScrollIndicator={showsVerticalScrollIndicator} renderItem={selectionType === 'single' ? _renderItem : renderCheckItem}/>);
         };
-        return (<react_native_1.TouchableWithoutFeedback>
-          <react_native_1.View style={styles.flexShrink}>
+        return (<TouchableWithoutFeedback>
+          <View style={styles.flexShrink}>
             {isInverted && _renderListHelper()}
             {renderSearch()}
             {!isInverted && _renderListHelper()}
-          </react_native_1.View>
-        </react_native_1.TouchableWithoutFeedback>);
+          </View>
+        </TouchableWithoutFeedback>);
     }, [
-        styles,
-        testID,
         inverted,
-        listData,
-        scrollIndex,
+        styles,
         renderSearch,
+        refList,
+        listData,
         flatListProps,
-        renderCheckItem,
+        testID,
+        scrollIndex,
         accessibilityLabel,
         showsVerticalScrollIndicator,
+        selectionType,
+        _renderItem,
+        renderCheckItem,
     ]);
-    const _renderModal = (0, react_1.useCallback)(() => {
+    const _renderModal = useCallback(() => {
         if (visible && position) {
             const { isFull, width, height, top, bottom, left } = position;
             const onAutoPosition = () => {
@@ -257,14 +223,14 @@ const DropdownComponent = (props) => {
                     dropdownPosition === 'auto') {
                     extendHeight = keyboardHeight;
                 }
-                return (<react_native_1.Modal transparent visible={visible} statusBarTranslucent onRequestClose={showOrClose} supportedOrientations={['landscape', 'portrait']}>
-            <react_native_1.TouchableWithoutFeedback onPress={showOrClose}>
-              <react_native_1.View style={react_native_1.StyleSheet.flatten([
+                return (<Modal transparent visible={visible} statusBarTranslucent onRequestClose={showOrClose} supportedOrientations={['landscape', 'portrait']}>
+            <TouchableWithoutFeedback onPress={showOrClose}>
+              <View style={StyleSheet.flatten([
                         styles.flex1,
                         isFull && styles.styleContainerVertical,
                         keyboardStyle,
                     ])}>
-                <react_native_1.View style={react_native_1.StyleSheet.flatten([
+                <View style={StyleSheet.flatten([
                         styles.flex1,
                         !isTopPosition
                             ? { paddingTop: extendHeight }
@@ -274,7 +240,7 @@ const DropdownComponent = (props) => {
                             },
                         isFull && styles.fullScreen,
                     ])}>
-                  <react_native_1.View style={react_native_1.StyleSheet.flatten([
+                  <View style={StyleSheet.flatten([
                         styles.container,
                         isFull ? styles.styleHorizontal : styleVertical,
                         {
@@ -283,11 +249,11 @@ const DropdownComponent = (props) => {
                         containerStyle,
                     ])}>
                     {_renderList(isTopPosition)}
-                  </react_native_1.View>
-                </react_native_1.View>
-              </react_native_1.View>
-            </react_native_1.TouchableWithoutFeedback>
-          </react_native_1.Modal>);
+                  </View>
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          </Modal>);
             }
             return null;
         }
@@ -303,23 +269,22 @@ const DropdownComponent = (props) => {
         _renderList,
         keyboardHeight,
         containerStyle,
-        backgroundColor,
         dropdownPosition,
         keyboardAvoiding,
     ]);
-    const _renderLabel = (0, react_1.useCallback)(() => {
-        return label ? (<react_native_1.View style={[styles.labelContainer, labelContainer]}>
-        <AppText_1.default style={[styles.labelTextStyle, labelTextStyle]}>
+    const _renderLabel = useCallback(() => {
+        return label ? (<View style={[styles.labelContainer, labelContainer]}>
+        <AppText style={[styles.labelTextStyle, labelTextStyle]}>
           {label}
-        </AppText_1.default>
-      </react_native_1.View>) : (<></>);
+        </AppText>
+      </View>) : (<></>);
     }, [label, labelContainer, labelTextStyle, styles]);
-    return (<react_native_1.View style={styles.mainContainer}>
+    return (<View style={styles.mainContainer}>
       {_renderLabel()}
-      <react_native_1.View ref={ref} onLayout={onMeasure} style={react_native_1.StyleSheet.flatten([styles.mainWrap, style])}>
+      <View ref={ref} onLayout={onMeasure} style={StyleSheet.flatten([styles.mainWrap, style])}>
         {_renderDropdown()}
         {_renderModal()}
-      </react_native_1.View>
-    </react_native_1.View>);
+      </View>
+    </View>);
 };
-exports.default = DropdownComponent;
+export default DropdownComponent;

package/dist/components/dropdown/DropdownStyle.d.ts

@@ -5,9 +5,9 @@ interface Props {
     checkIconColor?: ColorValue;
 }
 export declare const useDropdownStyle: (props: Props) => {
-    styles: {
+    styles: Readonly<{
         mainContainer: {
-            width: "100%";
+            width: string;
         };
         mainWrap: {
             borderWidth: number;
@@ -98,16 +98,16 @@ export declare const useDropdownStyle: (props: Props) => {
             alignItems: "center";
             justifyContent: "center";
             padding: number;
-            borderColor: ColorValue;
+            borderColor: string | number | import("react-native").NativeColorValue;
         };
         iconSubContainer: {
-            width: "100%";
-            height: "100%";
+            width: string;
+            height: string;
             borderRadius: number;
-            backgroundColor: ColorValue;
+            backgroundColor: string | number | import("react-native").NativeColorValue;
         };
         styleHorizontal: {
-            width: number | "100%";
+            width: string | number;
             alignSelf: "center";
         };
         styleContainerVertical: {
@@ -122,11 +122,11 @@ export declare const useDropdownStyle: (props: Props) => {
             height: number;
             alignItems: "center";
             justifyContent: "center";
-            borderColor: ColorValue;
+            borderColor: string | number | import("react-native").NativeColorValue;
         };
         showMultiSelectContainer: {
-            width: "90%";
-            height: "auto";
+            width: string;
+            height: string;
             maxHeight: number;
         };
         wraps: {
@@ -135,7 +135,7 @@ export declare const useDropdownStyle: (props: Props) => {
             flexDirection: "row";
             paddingHorizontal: number;
         };
-    };
+    }>;
     colors: {
         blue: string;
         gray: string;

package/dist/components/dropdown/DropdownStyle.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDropdownStyle = void 0;
-const style_1 = require("../../style");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const useOrientation_1 = require("./hooks/useOrientation");
-const useDropdownStyle = (props) => {
-    const { ...colors } = style_1.LIGHT_COLORS;
-    const orientation = (0, useOrientation_1.useDeviceOrientation)();
+import { SPACING, LIGHT_COLORS, SCREEN_WIDTH, DEFAULT_COLORS, } from '../../style';
+import { useMemo } from 'react';
+import { I18nManager, StyleSheet } from 'react-native';
+import { useDeviceOrientation } from './hooks/useOrientation';
+export const useDropdownStyle = (props) => {
+    const { ...colors } = LIGHT_COLORS;
+    const orientation = useDeviceOrientation();
     const { size = 16, radioIconColor, checkIconColor } = props;
-    const styles = (0, react_1.useMemo)(() => {
-        return react_native_1.StyleSheet.create({
+    const styles = useMemo(() => {
+        return StyleSheet.create({
             mainContainer: {
                 width: '100%',
             },
@@ -49,13 +46,13 @@ const useDropdownStyle = (props) => {
                 maxHeight: 170,
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                flexDirection: react_native_1.I18nManager.isRTL ? 'row-reverse' : 'row',
+                flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
             },
             title: {
                 fontSize: 16,
                 color: colors.gray,
-                marginVertical: style_1.SPACING.s6,
-                writingDirection: react_native_1.I18nManager.isRTL ? 'rtl' : 'ltr',
+                marginVertical: SPACING.s6,
+                writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
             },
             item: {
                 padding: 17,
@@ -63,13 +60,13 @@ const useDropdownStyle = (props) => {
                 borderBottomWidth: 0.5,
                 borderColor: colors.lightGray,
                 justifyContent: 'space-between',
-                flexDirection: react_native_1.I18nManager.isRTL ? 'row-reverse' : 'row',
+                flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
             },
             textItem: {
                 flex: 1,
                 fontSize: 16,
                 color: colors.gray,
-                writingDirection: react_native_1.I18nManager.isRTL ? 'rtl' : 'ltr',
+                writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
             },
             icon: {
                 width: 20,
@@ -80,16 +77,16 @@ const useDropdownStyle = (props) => {
                 height: 45,
                 borderWidth: 0.5,
                 borderColor: '#DDDDDD',
-                marginBottom: style_1.SPACING.s8,
-                paddingHorizontal: style_1.SPACING.s8,
+                marginBottom: SPACING.s8,
+                paddingHorizontal: SPACING.s8,
             },
             fullScreen: {
                 alignItems: 'center',
                 justifyContent: 'center',
             },
             labelContainer: {
-                marginBottom: style_1.SPACING.s6,
-                paddingVertical: style_1.SPACING.s6,
+                marginBottom: SPACING.s6,
+                paddingVertical: SPACING.s6,
             },
             labelTextStyle: {
                 color: colors.gray,
@@ -112,12 +109,12 @@ const useDropdownStyle = (props) => {
                 backgroundColor: radioIconColor || colors.gray,
             },
             styleHorizontal: {
-                width: orientation === 'LANDSCAPE' ? style_1.SCREEN_WIDTH / 2 : '100%',
+                width: orientation === 'LANDSCAPE' ? SCREEN_WIDTH / 2 : '100%',
                 alignSelf: 'center',
             },
             styleContainerVertical: {
                 alignItems: 'center',
-                backgroundColor: style_1.DEFAULT_COLORS.blackOpacity,
+                backgroundColor: DEFAULT_COLORS.blackOpacity,
             },
             checkContainer: {
                 borderWidth: 2,
@@ -147,4 +144,3 @@ const useDropdownStyle = (props) => {
         colors,
     };
 };
-exports.useDropdownStyle = useDropdownStyle;

package/dist/components/dropdown/component/chip/Chip.js

@@ -1,23 +1,18 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_native_1 = require("react-native");
-const ChipStyle_1 = __importDefault(require("./ChipStyle"));
-const AppText_1 = __importDefault(require("../../../text/AppText"));
-const svg_1 = require("../../../../assets/svg");
-const SvgButton_1 = __importDefault(require("../../../svgButton/SvgButton"));
+import { View } from 'react-native';
+import useChipStyle from './ChipStyle';
+import AppText from '../../../text/AppText';
+import { ClearIcon } from '../../../../assets/svg';
+import SvgButton from '../../../svgButton/SvgButton';
 const Chip = (props) => {
-    const { styles, colors } = (0, ChipStyle_1.default)({ ...props });
+    const { styles, colors } = useChipStyle({ ...props });
     const { label, onClearPress, textColor, clearIcon } = props;
-    return (<react_native_1.View style={styles.box}>
-      <AppText_1.default size={12} fontFamily={'semiBold'} style={styles.chipText} color={textColor ? textColor : 'gray'}>
+    return (<View style={styles.box}>
+      <AppText size={12} fontFamily={'semiBold'} style={styles.chipText} color={textColor ? textColor : 'gray'}>
         {label}
-      </AppText_1.default>
-      {clearIcon ? (clearIcon) : (<react_native_1.View style={styles.clearContainer}>
-          <SvgButton_1.default icon={<svg_1.ClearIcon size={8} color={textColor ? textColor : colors.white}/>} onPress={onClearPress} style={styles.clearIcon}/>
-        </react_native_1.View>)}
-    </react_native_1.View>);
+      </AppText>
+      {clearIcon ? (clearIcon) : (<View style={styles.clearContainer}>
+          <SvgButton icon={<ClearIcon size={8} color={textColor ? textColor : colors.white}/>} onPress={onClearPress} style={styles.clearIcon}/>
+        </View>)}
+    </View>);
 };
-exports.default = Chip;
+export default Chip;