@janiscommerce/ui-native 1.2.0 → 1.4.0

package/dist/env.json

@@ -0,0 +1 @@
+{ "LOAD_STORYBOOK": true, "WEB_MODE": false }

package/dist/{components → src/components}/Avatar/index.js

@@ -3,6 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import Image from '../Image';
 import Text from '../Text';
 import { formatPlaceholder } from './utils/formatPlaceholder/index';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
 export const sizeValues = {
     sm: 24,
     md: 36,
@@ -25,6 +26,13 @@ const Avatar = ({ size = 'sm', textColor = '#FFFFFF', bgColor = '#E8EAF6', image
         return null;
     }
     const initials = formatPlaceholder(String(placeholder));
+    const calculateBorderRadius = getSize(size, customSize) / 2;
+    const calculateSize = getSize(size, customSize);
+    const calculateFontSize = getSize(size, customSize) * 0.4;
+    const validBorderRadius = scaledForDevice(calculateBorderRadius, moderateScale);
+    const validWidth = scaledForDevice(calculateSize, horizontalScale);
+    const validHeight = scaledForDevice(calculateSize, moderateScale);
+    const validFontSize = scaledForDevice(calculateFontSize, moderateScale);
     const handleOnErrorImage = () => {
         setShowInitials(true);
         if (onErrorImg) {
@@ -35,22 +43,20 @@ const Avatar = ({ size = 'sm', textColor = '#FFFFFF', bgColor = '#E8EAF6', image
             styles.container,
             {
                 backgroundColor: bgColor,
-                borderRadius: getSize(size, customSize) / 2,
-                height: getSize(size, customSize),
-                width: getSize(size, customSize),
+                borderRadius: validBorderRadius,
+                height: validHeight,
+                width: validWidth,
             },
             style,
         ]} {...props}>
 			{!!imageUrl && !showInitials && (<Image accessibilityRole="image" onError={handleOnErrorImage} onLoad={() => setShowInitials(false)} source={{
                 uri: imageUrl,
             }} style={{
-                height: getSize(size, customSize),
-                width: getSize(size, customSize),
+                height: validHeight,
+                width: validWidth,
             }}/>)}
 
-			{(showInitials || !imageUrl) && !!initials.length && (<Text style={[styles.text, { color: textColor, fontSize: getSize(size, customSize) * 0.4 }]}>
-					{initials}
-				</Text>)}
+			{(showInitials || !imageUrl) && !!initials.length && (<Text style={[styles.text, { color: textColor, fontSize: validFontSize }]}>{initials}</Text>)}
 		</View>);
 };
 export default Avatar;

package/dist/{components → src/components}/BaseButton/index.d.ts

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { PressableProps, ViewStyle } from 'react-native';
+import { PressableProps, ViewStyle, TextStyle } from 'react-native';
 interface BaseButtonProps extends PressableProps {
     title?: string | null;
     icon?: string;
@@ -9,7 +9,7 @@ interface BaseButtonProps extends PressableProps {
     pressedColor?: string;
     style?: ViewStyle;
     iconStyle?: ViewStyle;
-    textStyle?: ViewStyle;
+    textStyle?: TextStyle;
     children?: React.ReactNode;
 }
 declare const BaseButton: FC<BaseButtonProps>;

package/dist/{components → src/components}/BaseButton/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Pressable, StyleSheet } from 'react-native';
+import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
 import { palette } from '../../theme/palette';
 import Text from '../Text';
 import Icon from '../Icon';
@@ -10,24 +11,30 @@ const BaseButton = ({ title = null, icon = null, iconRight = false, disabled = f
     const bgColor = !disabled ? palette.primary.main : palette.grey[200];
     const iconPaddingLeft = iconRight && title ? 8 : 0;
     const iconPaddingRight = !iconRight && title ? 8 : 0;
+    const validatePaddingVertical = scaledForDevice(10, moderateScale);
+    const validatePaddingHorizontal = scaledForDevice(16, horizontalScale);
+    const validateFontSize = scaledForDevice(14, moderateScale);
+    const validateBorderRadius = scaledForDevice(borderRadius, moderateScale);
+    const validatePaddingRightIcon = scaledForDevice(iconPaddingRight, horizontalScale);
+    const validatePaddingLeftIcon = scaledForDevice(iconPaddingLeft, horizontalScale);
     const styles = StyleSheet.create({
         container: {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            paddingHorizontal: 16,
-            paddingVertical: 10,
-            borderRadius,
+            paddingHorizontal: validatePaddingHorizontal,
+            paddingVertical: validatePaddingVertical,
+            borderRadius: validateBorderRadius,
             backgroundColor: bgColor,
         },
         icon: {
             color: palette.base.white,
-            paddingRight: iconPaddingRight,
-            paddingLeft: iconPaddingLeft,
+            paddingRight: validatePaddingRightIcon,
+            paddingLeft: validatePaddingLeftIcon,
         },
         title: {
-            fontSize: 14,
+            fontSize: validateFontSize,
             fontWeight: '500',
             textAlign: 'center',
             color: palette.base.white,

package/dist/{components → src/components}/CheckBox/index.js

@@ -1,36 +1,43 @@
 import React from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import { base, grey, primary } from '../../theme/palette';
+import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
 import Icon from './icon/CheckedIcon';
 const getCheckBoxScale = (size, divisor) => size / divisor;
 const CheckBox = ({ checked, customSize = 16, checkOnColor = primary.main, checkOffColor = grey[500], iconCheckColor = base.white, borderRadius, disabled = false, style, ...props }) => {
     const hasBorderRadius = !borderRadius ? getCheckBoxScale(customSize, 4) : borderRadius;
+    const validateIconSize = scaledForDevice(customSize, moderateScale);
+    const validWidth = scaledForDevice(customSize, horizontalScale);
+    const validHeight = scaledForDevice(customSize, moderateScale);
+    const validBorderRadius = scaledForDevice(hasBorderRadius, moderateScale);
     const styles = StyleSheet.create({
         touchableOpacity: {
-            width: customSize,
-            height: customSize,
-            borderRadius: hasBorderRadius,
+            width: validWidth,
+            height: validHeight,
+            borderRadius: validBorderRadius,
         },
         checkOn: {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
             backgroundColor: !disabled ? checkOnColor : grey[200],
-            width: customSize,
-            height: customSize,
-            borderRadius: hasBorderRadius,
+            width: validWidth,
+            height: validHeight,
+            borderRadius: validBorderRadius,
         },
         checkOff: {
             borderWidth: getCheckBoxScale(customSize, 16),
             borderColor: !disabled ? checkOffColor : grey[200],
-            width: customSize,
-            height: customSize,
+            width: validWidth,
+            height: validHeight,
             borderRadius: hasBorderRadius,
         },
     });
     const isChecked = checked ? styles.checkOn : styles.checkOff;
     return (<TouchableOpacity disabled={disabled} activeOpacity={0.6} style={[styles.touchableOpacity, style]} {...props}>
-			<View style={isChecked}>{checked && <Icon color={iconCheckColor} size={customSize}/>}</View>
+			<View style={isChecked}>
+				{checked && <Icon color={iconCheckColor} size={validateIconSize}/>}
+			</View>
 		</TouchableOpacity>);
 };
 export default CheckBox;

package/dist/{components → src/components}/Icon/index.js

@@ -2,11 +2,13 @@ import React from 'react';
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
 import icoMoonConfig from './assets/fonts/selection.json';
 import { primary } from '../../theme/palette';
+import { moderateScale, scaledForDevice } from '../../scale';
 const IconComponent = createIconSetFromIcoMoon(icoMoonConfig, 'janis-font-icon', 'janis-font-icon.ttf');
 const Icon = ({ name, color = primary.main, size = 16, ...props }) => {
     if (!name) {
         return null;
     }
-    return <IconComponent name={name} color={color} size={size} {...props}/>;
+    const validateSize = scaledForDevice(size, moderateScale);
+    return <IconComponent name={name} color={color} size={validateSize} {...props}/>;
 };
 export default Icon;

package/dist/{components → src/components}/Input/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { TextInput, StyleSheet, View, Text, } from 'react-native';
 import { getBorderColor, getInputInitialState, getLabelColor, getStatusMessageColor, raiseLabel, showStatusMessage, } from './utils';
+import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
 export var keyboardTypes;
 (function (keyboardTypes) {
     keyboardTypes["default"] = "default";
@@ -44,34 +45,40 @@ const Input = React.forwardRef(({ disabled = false, readOnly = false, label, pla
         status,
     });
     const validStatusMessageColor = getStatusMessageColor(status);
+    const validBottom = scaledForDevice(25, moderateScale);
+    const validHeight = scaledForDevice(50, moderateScale);
+    const validBorderBottomWidth = scaledForDevice(1, horizontalScale);
+    const validLineHeight = scaledForDevice(19, moderateScale);
+    const validFontSize = scaledForDevice(16, moderateScale);
+    const validateMarginTop = scaledForDevice(5, moderateScale);
     const styles = StyleSheet.create({
         container: {
             width: '100%',
         },
         inputWrapper: {
-            height: 50,
+            height: validHeight,
             borderBottomColor: validBorderColor,
-            borderBottomWidth: 1,
+            borderBottomWidth: validBorderBottomWidth,
             justifyContent: 'flex-end',
         },
         label: {
             color: validLabelColor,
-            fontSize: 16,
+            fontSize: validFontSize,
             letterSpacing: 0,
-            lineHeight: 19,
+            lineHeight: validLineHeight,
             position: 'absolute',
-            bottom: raiseLabel({ disabled, hasMessage, inputState }) ? 25 : 0,
+            bottom: raiseLabel({ disabled, hasMessage, inputState }) ? validBottom : 0,
         },
         input: {
             color: valueColor,
-            fontSize: 16,
+            fontSize: validFontSize,
             letterSpacing: 0,
-            lineHeight: 19,
+            lineHeight: validLineHeight,
             padding: 0,
         },
         statusMessage: {
             color: validStatusMessageColor,
-            marginTop: 5,
+            marginTop: validateMarginTop,
         },
     });
     return (<View style={styles.container}>

package/dist/{components → src/components}/Loading/index.js

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { StyleSheet, View, Animated, Easing } from 'react-native';
 import LoadingSvg from './LoadingSvg';
 import { primary } from '../../theme/palette';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
 const startRotationAnimation = ({ duration, rotationDegree, timingAnimation }) => Animated.loop(Animated.timing(rotationDegree, {
     duration,
     toValue: 360,
@@ -10,13 +11,16 @@ const startRotationAnimation = ({ duration, rotationDegree, timingAnimation }) =
 })).start();
 const Loading = ({ isLoading, color = primary.main, size = 64, duration = 1000, children = null, style, ...props }) => {
     const rotationDegree = useRef(new Animated.Value(0)).current;
+    const validWidth = scaledForDevice(size, horizontalScale);
+    const validHeight = scaledForDevice(size, moderateScale);
+    const validSize = scaledForDevice(size, moderateScale);
     const styles = StyleSheet.create({
         container: {
             position: 'relative',
             justifyContent: 'center',
             alignItems: 'center',
-            width: size,
-            height: size,
+            width: validWidth,
+            height: validHeight,
         },
         spinner: {
             position: 'absolute',
@@ -49,7 +53,7 @@ const Loading = ({ isLoading, color = primary.main, size = 64, duration = 1000,
         return <></>;
     }
     return (<View style={[styles.container, style]} {...props}>
-			<LoadingSvg style={[styles.spinner, { ...animationSpinnerStyle }]} size={size} color={color}/>
+			<LoadingSvg style={[styles.spinner, { ...animationSpinnerStyle }]} size={validSize} color={color}/>
 			{children}
 		</View>);
 };

package/dist/{components → src/components}/LoadingFullScreen/index.js

@@ -3,6 +3,12 @@ import { StyleSheet, Modal, Text, View } from 'react-native';
 import Loading from '../Loading';
 import Svg from '../Svg';
 import { grey, white } from '../../theme/palette';
+import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
+const validFontSize = scaledForDevice(16, moderateScale);
+const validLineHeight = scaledForDevice(24, moderateScale);
+const validMarginTop = scaledForDevice(25, moderateScale);
+const validWidth = scaledForDevice(36, horizontalScale);
+const validHeight = scaledForDevice(25, moderateScale);
 const styles = StyleSheet.create({
     ContainerStyles: {
         flex: 1,
@@ -11,14 +17,14 @@ const styles = StyleSheet.create({
         backgroundColor: white.semiTransparent,
     },
     TextStyles: {
-        fontSize: 16,
-        lineHeight: 24,
+        fontSize: validFontSize,
+        lineHeight: validLineHeight,
         fontFamily: 'Roboto',
         color: grey[700],
         textAlign: 'center',
         fontWeight: '500',
         width: '50%',
-        marginTop: 25,
+        marginTop: validMarginTop,
     },
 });
 const LoadingFullScreen = ({ text, isLoading, svgName = 'janis-logo', spinnerDuration = 2000, style, ...props }) => {
@@ -26,7 +32,7 @@ const LoadingFullScreen = ({ text, isLoading, svgName = 'janis-logo', spinnerDur
     return (<Modal visible={isLoading} transparent animationType="fade" testID="loading modal" {...props}>
 			<View style={[styles.ContainerStyles, style]}>
 				<Loading isLoading={isLoading} duration={spinnerDuration}>
-					<Svg name={svgName} width={36} height={25}/>
+					<Svg name={svgName} width={validWidth} height={validHeight}/>
 				</Loading>
 				{hasTextPassed && <Text style={styles.TextStyles}>{text}</Text>}
 			</View>

package/dist/{components → src/components}/ProgressBar/index.js

@@ -1,7 +1,9 @@
+/* istanbul ignore file */
 import React, { useEffect, useRef } from 'react';
 import { View, StyleSheet, Animated, Easing } from 'react-native';
 import { palette } from '../../theme/palette';
 import { getBarColor, getPercentage } from './utils';
+import { moderateScale, scaledForDevice } from '../../scale';
 const ProgressBar = ({ value, totalValue, isAnimated = false, duration = 300, style, ...props }) => {
     const { white } = palette;
     const widthAnimation = useRef(new Animated.Value(0)).current;
@@ -22,20 +24,23 @@ const ProgressBar = ({ value, totalValue, isAnimated = false, duration = 300, st
             widthAnimation.setValue(percentValue);
         }
     }, [isAnimated, percentValue, timeDuration, widthAnimation]);
+    const validHeight = scaledForDevice(4, moderateScale);
+    const validBorderRadius = scaledForDevice(2, moderateScale);
+    const validMarginTop = scaledForDevice(12, moderateScale);
     const styles = StyleSheet.create({
         container: {
             position: 'relative',
             width: '100%',
-            height: 4,
-            marginTop: 12,
-            borderRadius: 2,
+            height: validHeight,
+            marginTop: validMarginTop,
+            borderRadius: validBorderRadius,
             backgroundColor: white.main,
         },
         fill: {
             position: 'absolute',
             left: 0,
-            height: 4,
-            borderRadius: 2,
+            height: validHeight,
+            borderRadius: validBorderRadius,
             zIndex: 10,
             backgroundColor: colorValue,
         },

package/dist/{components → src/components}/RadioButton/index.js

@@ -2,17 +2,21 @@ import React from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import Text from '../Text';
 import CheckBox from '../CheckBox';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
 const checkLocation = ['left', 'right'];
 const CheckSizeValues = {
     sm: 16,
     md: 24,
     lg: 32,
 };
+const validPaddingHorizontal = scaledForDevice(16, horizontalScale);
+const validMarginVertical = scaledForDevice(10, moderateScale);
+const validMarginHorizontal = scaledForDevice(15, horizontalScale);
 const styles = StyleSheet.create({
     container: {
         alignItems: 'center',
-        paddingHorizontal: 16,
-        marginVertical: 10,
+        paddingHorizontal: validPaddingHorizontal,
+        marginVertical: validMarginVertical,
         height: 'auto',
     },
     row: {
@@ -24,10 +28,10 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
     },
     checkToLeft: {
-        marginLeft: 15,
+        marginLeft: validMarginHorizontal,
     },
     checkToRight: {
-        marginRight: 15,
+        marginRight: validMarginHorizontal,
     },
 });
 const RadioButton = ({ children, onPress, selected = false, checkPosition = 'left', checkSize = 'sm', disabled = false, style, ...props }) => {
@@ -39,7 +43,7 @@ const RadioButton = ({ children, onPress, selected = false, checkPosition = 'lef
     const checkLeft = checkPosition === 'left';
     const customSize = CheckSizeValues[checkSize];
     return (<TouchableOpacity style={[container, checkLeft ? row : reverseRow, style]} disabled={disabled} onPress={onPress} {...props}>
-			<CheckBox checked={selected} disabled={disabled} customSize={customSize} borderRadius={customSize / 2}/>
+			<CheckBox checked={selected} disabled={disabled} customSize={customSize} borderRadius={customSize / 2} onPress={onPress}/>
 			<View style={checkLeft ? checkToLeft : checkToRight}>
 				{isStringChild ? <Text>{children}</Text> : children}
 			</View>

package/dist/src/components/Select/Components/Dropdown/index.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { DropdownMeasures } from '../..';
+export interface DropdownProps {
+    show: boolean;
+    setShow: (isShowed: boolean) => void;
+    children: React.Component | React.ReactNode;
+    measures: DropdownMeasures;
+}
+declare const Dropdown: FC<DropdownProps>;
+export default Dropdown;

package/dist/src/components/Select/Components/Dropdown/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Modal, Pressable, StyleSheet, View } from 'react-native';
+const Dropdown = ({ show, setShow, children, measures }) => {
+    const styles = StyleSheet.create({
+        background: {
+            width: '100%',
+            height: '100%',
+        },
+        dropdown: {
+            position: 'absolute',
+            height: '100%',
+            width: measures.width,
+            top: measures.pageY,
+            left: measures.pageX,
+        },
+    });
+    return (<Modal animationType="fade" transparent visible={show}>
+			<Pressable style={styles.background} onPress={() => setShow(false)}>
+				<View style={styles.dropdown}>{children}</View>
+			</Pressable>
+		</Modal>);
+};
+export default Dropdown;

package/dist/src/components/Select/Components/Modal/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { DropdownProps } from '../Dropdown';
+interface ModalProps extends DropdownProps {
+    isMulti: boolean;
+    modalAcceptText: string;
+}
+declare const Modal: FC<ModalProps>;
+export default Modal;

package/dist/src/components/Select/Components/Modal/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Modal as ModalComponent, StyleSheet, View } from 'react-native';
+import { base, primary, white } from '../../../../theme/palette';
+import BaseButton from '../../../BaseButton';
+import { moderateScale, scaledForDevice } from '../../../../scale';
+const Modal = ({ show, setShow, isMulti, modalAcceptText, children }) => {
+    const validBottom = scaledForDevice(20, moderateScale);
+    const validMinWidth = scaledForDevice(270, moderateScale);
+    const validPaddingTop = scaledForDevice(24, moderateScale);
+    const validPaddingBottom = scaledForDevice(12, moderateScale);
+    const validPaddingHorizontal = scaledForDevice(20, moderateScale);
+    const validLeft = scaledForDevice(8, moderateScale);
+    const validTop = scaledForDevice(4, moderateScale);
+    const validFontSize = scaledForDevice(13, moderateScale);
+    const styles = StyleSheet.create({
+        background: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#0009',
+        },
+        containerModal: {
+            justifyContent: 'space-between',
+        },
+        contentWrapper: {
+            bottom: validBottom,
+            minWidth: validMinWidth,
+            paddingTop: validPaddingTop,
+            paddingBottom: validPaddingBottom,
+            paddingLeft: validPaddingHorizontal,
+            paddingRight: validPaddingHorizontal,
+            backgroundColor: base.white,
+            elevation: 5,
+        },
+        buttonWrapper: {
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            flexWrap: 'wrap',
+            left: validLeft,
+            top: validTop,
+        },
+        button: {
+            backgroundColor: base.white,
+        },
+        buttonText: {
+            color: primary.main,
+            fontSize: validFontSize,
+            fontWeight: '700',
+            textTransform: 'uppercase',
+        },
+    });
+    return (<ModalComponent animationType="fade" transparent visible={show}>
+			<View style={styles.background}>
+				<View style={styles.contentWrapper}>
+					<View style={styles.containerModal}>{children}</View>
+					{isMulti && (<View style={styles.buttonWrapper}>
+							<BaseButton title={modalAcceptText} iconRight={false} pressedColor={white.main} style={styles.button} textStyle={styles.buttonText} onPress={() => setShow(false)}/>
+						</View>)}
+				</View>
+			</View>
+		</ModalComponent>);
+};
+export default Modal;

package/dist/src/components/Select/Components/Options/index.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { CustomOptionComponent, DropdownMeasures, Option, VariantOptions } from '../..';
+interface OptionsProps {
+    variantOptions: VariantOptions;
+    dropdownMeasures: DropdownMeasures;
+    isShowedOptions: boolean;
+    setIsShowedOptions: (isShowed: boolean) => void;
+    filteredOptions: Option[];
+    selectedOptions: Option[];
+    noOptionsMessage: string;
+    optionStyles?: {};
+    callbackOption: (option: Option) => void;
+    customOptionComponent?: CustomOptionComponent | null;
+    isMulti: boolean;
+    modalAcceptText: string;
+}
+declare const Options: FC<OptionsProps>;
+export default Options;

package/dist/{components/Select/Components/Dropdown → src/components/Select/Components/Options}/index.js

@@ -1,27 +1,27 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
 import { base, black, grey, primary, white } from '../../../../theme/palette';
-const Dropdown = (props) => {
-    const { isShowedDropdown, filteredOptions, callbackOption, selectedOptions, noOptionsMessage, optionStyles, customOptionComponent = null, } = props;
-    if (!isShowedDropdown) {
-        return null;
-    }
+import SwitcherComponent from '../SwitcherComponent';
+const Options = (props) => {
+    const { variantOptions, dropdownMeasures, isShowedOptions, setIsShowedOptions, filteredOptions, callbackOption, selectedOptions, noOptionsMessage, optionStyles, customOptionComponent = null, isMulti, modalAcceptText, } = props;
     const handleSelectedOption = (option) => callbackOption(option);
+    const isModal = variantOptions === 'Modal';
     const styles = StyleSheet.create({
         container: {
+            position: 'relative',
             width: '100%',
-            padding: 8,
+            padding: !isModal ? 8 : 0,
         },
         optionWrapper: {
-            position: 'absolute',
+            position: !isModal ? 'absolute' : 'relative',
             maxHeight: 168,
+            minHeight: 'auto',
             borderColor: grey[200],
             backgroundColor: base.white,
             width: '100%',
-            top: 60,
+            top: !isModal ? 60 : 0,
             marginBottom: 20,
-            elevation: 5,
-            zIndex: 10,
+            elevation: !isModal ? 5 : 0,
             flex: 1,
         },
         option: {
@@ -66,8 +66,10 @@ const Dropdown = (props) => {
     const noRenderOptions = (<View aria-disabled>
 			<Text style={styles.noOptionText}> {noOptionsMessage}</Text>
 		</View>);
-    return (<ScrollView style={styles.optionWrapper} contentContainerStyle={styles.container}>
-			{filteredOptions?.length ? renderOptions : noRenderOptions}
-		</ScrollView>);
+    return (<SwitcherComponent measures={dropdownMeasures} variant={variantOptions} show={isShowedOptions} setShow={setIsShowedOptions} isMulti={isMulti} modalAcceptText={modalAcceptText}>
+			<ScrollView style={styles.optionWrapper} contentContainerStyle={styles.container}>
+				{filteredOptions?.length ? renderOptions : noRenderOptions}
+			</ScrollView>
+		</SwitcherComponent>);
 };
-export default Dropdown;
+export default Options;

package/dist/src/components/Select/Components/SwitcherComponent/index.d.ts

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { DropdownMeasures, VariantOptions } from '../..';
+interface SwitcherProps {
+    show: boolean;
+    isMulti: boolean;
+    variant: VariantOptions;
+    measures: DropdownMeasures;
+    children: React.Component | React.ReactNode;
+    modalAcceptText: string;
+    setShow: (isShowed: boolean) => void;
+}
+declare const SwitcherComponent: FC<SwitcherProps>;
+export default SwitcherComponent;

package/dist/src/components/Select/Components/SwitcherComponent/index.js

@@ -0,0 +1,8 @@
+import Dropdown from '../Dropdown';
+import Modal from '../Modal';
+const components = {
+    Dropdown,
+    Modal,
+};
+const SwitcherComponent = (props) => components[props?.variant](props);
+export default SwitcherComponent;

package/dist/{components → src/components}/Select/index.d.ts

@@ -9,6 +9,15 @@ declare enum KeyboardTypes {
     PhonePad = "phone-pad",
     URL = "url"
 }
+export declare enum VariantOptions {
+    Dropdown = "Dropdown",
+    Modal = "Modal"
+}
+export interface DropdownMeasures {
+    width: number;
+    pageY: number;
+    pageX: number;
+}
 export interface Option {
     label: string;
     value: string | number;
@@ -23,11 +32,11 @@ export type CustomOptionComponent = (props: CustomOptionComponentProps) => React
 interface SelectProps {
     options: Option[];
     label: string;
-    value?: string;
+    value?: Option[];
+    variantOptions?: VariantOptions;
     optionStyles?: {};
     placeholder?: string;
     inputProps?: TextInput;
-    isSearchable?: boolean;
     isMulti?: boolean;
     isDisabled?: boolean;
     noOptionsMessage?: string;
@@ -36,6 +45,7 @@ interface SelectProps {
     onFocus?: () => void;
     onSelectOption?: (selectedOptions: Option[]) => void;
     customOptionComponent?: CustomOptionComponent | null;
+    modalAcceptText?: string;
 }
 declare const Select: FC<SelectProps>;
 export default Select;