correcciones componente select - sin tests

App.tsx

@@ -27,54 +27,55 @@ const App = () => {
 	return (
 		<View style={style}>
 			<Select
-				style={{marginBottom: 20}}
-				value={[listaPaises[9]]}
 				options={listaPaises}
 				label={'Paises'}
 				optionStyles={() => {}}
 				multiOptionsText={'others'}
 				placeholder={'seleccione un pais'}
-				isDisabled={false}
-				isMulti={false}
 				isSearchable={false}
+				variantOptions={'Modal'}
 				// eslint-disable-next-line no-console
 				onSelectOption={(option) => console.log(option)}
 			/>
+
 			<Select
+				style={{marginBottom: 20}}
 				value={[listaPaises[1]]}
 				options={listaPaises}
 				label={'Paises'}
 				optionStyles={() => {}}
 				multiOptionsText={'others'}
 				placeholder={'seleccione un pais'}
-				isDisabled={true}
+				isDisabled={false}
 				isMulti={false}
 				isSearchable={false}
 				// eslint-disable-next-line no-console
 				onSelectOption={(option) => console.log(option)}
 			/>
 			<Select
-				value={[listaPaises[5], listaPaises[8]]}
 				options={listaPaises}
 				label={'Paises'}
 				optionStyles={() => {}}
-				// multiOptionsText={'others'}
+				multiOptionsText={'others'}
 				placeholder={'seleccione un pais'}
-				isDisabled={false}
+				// isDisabled={true}
 				isMulti={true}
 				isSearchable={false}
+				variantOptions={'Modal'}
 				// eslint-disable-next-line no-console
 				onSelectOption={(option) => console.log(option)}
 			/>
 			<Select
+				value={[listaPaises[0], listaPaises[1]]}
 				options={listaPaises}
 				label={'Paises'}
 				optionStyles={() => {}}
-				multiOptionsText={'others'}
+				// multiOptionsText={'others'}
 				placeholder={'seleccione un pais'}
 				isDisabled={false}
 				isMulti={false}
-				isSearchable={false}
+				isSearchable={true}
+				// variantOptions={'Modal'}
 				// eslint-disable-next-line no-console
 				onSelectOption={(option) => console.log(option)}
 			/>

src/components/BaseButton/index.tsx

@@ -1,5 +1,5 @@
 import React, {FC} from 'react';
-import {Pressable, PressableProps, ViewStyle, StyleSheet} from 'react-native';
+import {Pressable, PressableProps, ViewStyle, StyleSheet, TextStyle} from 'react-native';
 import {palette} from '../../theme/palette';
 import Text from '../Text';
 import Icon from '../Icon';
@@ -17,7 +17,7 @@ interface BaseButtonProps extends PressableProps {
 	pressedColor?: string;
 	style?: ViewStyle;
 	iconStyle?: ViewStyle;
-	textStyle?: ViewStyle;
+	textStyle?: TextStyle;
 	children?: React.ReactNode;
 }
 

src/components/Select/Components/Dropdown/index.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {create} from 'react-test-renderer';
+import Dropdown from '.';
+import Text from '../../../Text';
+import {Pressable} from 'react-native';
+
+const validData = {
+	show: true,
+	setShow: () => {},
+	children: <Text>Option 1</Text>,
+	measures: {
+		width: 0,
+		pageY: 0,
+		pageX: 0,
+	},
+};
+
+describe('Dropdown component', () => {
+	it('render correctly and press to change show value', () => {
+		const {root} = create(<Dropdown {...validData} />);
+		const PresableComp = root.findByType(Pressable);
+		PresableComp.props.onPress();
+
+		expect(root).toBeTruthy();
+	});
+});

src/components/Select/Components/Dropdown/index.tsx

@@ -0,0 +1,36 @@
+import React, {FC} from 'react';
+import {Modal, Pressable, StyleSheet, View} from 'react-native';
+import {DropdownMeasures} from '../..';
+
+export interface DropdownProps {
+	show: boolean;
+	setShow: (isShowed: boolean) => void;
+	children: React.Component | React.ReactNode;
+	measures: DropdownMeasures;
+}
+
+const Dropdown: FC<DropdownProps> = ({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;

src/components/Select/Components/Modal/index.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {create} from 'react-test-renderer';
+import Text from '../../../Text';
+import BaseButton from '../../../BaseButton';
+import Modal from '.';
+
+const validData = {
+	show: true,
+	setShow: () => {},
+	children: <Text>Option 1</Text>,
+	measures: {
+		width: 0,
+		pageY: 0,
+		pageX: 0,
+	},
+	isMulti: true,
+	modalAcceptText: 'accept',
+};
+
+describe('Modal component', () => {
+	it('render correctly and press to change show value', () => {
+		const {root} = create(<Modal {...validData} />);
+		const PresableComp = root.findByType(BaseButton);
+		PresableComp.props.onPress();
+
+		expect(root).toBeTruthy();
+	});
+});

src/components/Select/Components/Modal/index.tsx

@@ -0,0 +1,77 @@
+import {FC} from 'react';
+import {Modal as ModalComponent, StyleSheet, View} from 'react-native';
+import {base, primary, white} from '../../../../theme/palette';
+import BaseButton from '../../../BaseButton';
+import {DropdownProps} from '../Dropdown';
+import React from 'react';
+
+interface ModalProps extends DropdownProps {
+	isMulti: boolean;
+	modalAcceptText: string;
+}
+
+const Modal: FC<ModalProps> = ({show, setShow, isMulti, modalAcceptText, children}) => {
+	const styles = StyleSheet.create({
+		background: {
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center',
+			width: '100%',
+			height: '100%',
+			backgroundColor: '#0009',
+		},
+		containerModal: {
+			justifyContent: 'space-between',
+		},
+		contentWrapper: {
+			bottom: 20,
+			minWidth: 270,
+			paddingTop: 24,
+			paddingBottom: 12,
+			paddingLeft: 20,
+			paddingRight: 20,
+			backgroundColor: base.white,
+			elevation: 5,
+		},
+		buttonWrapper: {
+			flexDirection: 'row',
+			justifyContent: 'flex-end',
+			flexWrap: 'wrap',
+			left: 8,
+			top: 4,
+		},
+		button: {
+			backgroundColor: base.white,
+		},
+		buttonText: {
+			color: primary.main,
+			fontSize: 13,
+			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;