correcciones - crear componente button

App.tsx

@@ -1,9 +1,33 @@
+/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
+import Button from './src/components/Button';
 
 const App = () => (
-	<View>
-		<Text>UI native</Text>
+	<View style={{padding: 20, flexDirection: 'row'}}>
+		<Button
+			value="Box Container"
+			icon="box"
+			type={'main'}
+			variant={'outlined'}
+			color="warning"
+			isLoading={false}
+			// iconPosition={'right'}
+			disabled={false}
+			style={{flex: 1}}
+		/>
+		<Button
+			value="Button with Box Icon"
+			icon="box"
+			isLoading={false}
+			type={'main'}
+			variant={'outlined'}
+			color={'primary'}
+			// iconPosition="right"
+			disabled={false}
+			style={{flex: 1}}
+			// iconStyle={{color: 'red', fontSize: 30}}
+		/>
 	</View>
 );
 

src/components/BaseButton/index.test.tsx

@@ -20,13 +20,12 @@ describe('BaseButton Component', () => {
 		});
 	});
 
-	describe('render correctly when has minimum props needed, example', () => {
+	describe('render correctly when has minimum props needed', () => {
 		it('when hasnt minimum props needed', () => {
-			const {toJSON} = create(
+			const {root} = create(
 				<BaseButton borderRadius={validData.borderRadius}>{validData.children}</BaseButton>
 			);
-
-			expect(toJSON()).toBeTruthy();
+			expect(root).toBeTruthy();
 		});
 	});
 });

src/components/BaseButton/index.tsx

@@ -5,10 +5,17 @@ import {moderateScale, scaledForDevice} from '../../scale';
 export interface BaseButtonProps extends PressableProps {
 	borderRadius?: number;
 	children?: ReactNode | null;
+	pressedStyle?: ReactNode;
 	style?: any;
 }
 
-const BaseButton: FC<BaseButtonProps> = ({borderRadius = 0, children = null, style, ...props}) => {
+const BaseButton: FC<BaseButtonProps> = ({
+	borderRadius = 0,
+	children = null,
+	style,
+	pressedStyle,
+	...props
+}) => {
 	if (!children) {
 		return null;
 	}
@@ -24,7 +31,13 @@ const BaseButton: FC<BaseButtonProps> = ({borderRadius = 0, children = null, sty
 	});
 
 	return (
-		<Pressable style={[styles.container, style]} {...props}>
+		<Pressable
+			style={({pressed}) => [
+				styles.container,
+				style,
+				pressed && /* istanbul ignore next */ pressedStyle,
+			]}
+			{...props}>
 			{children}
 		</Pressable>
 	);

src/components/Button/index.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {create} from 'react-test-renderer';
 import {Text} from 'react-native';
 import Icon from '../Icon';
-import BaseButton from '../BaseButton';
 import Loading from '../Loading';
 import Button from './';
 
@@ -12,8 +11,6 @@ const validData = {
 	icon: 'box',
 };
 
-const setIsPressed = jest.fn();
-const spyUseState = jest.spyOn(React, 'useState');
 jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 
@@ -35,29 +32,6 @@ describe('Button component', () => {
 			expect(name).toEqual(validData.icon);
 		});
 
-		it('when it is pressed', () => {
-			spyUseState.mockReturnValueOnce([false, setIsPressed]);
-
-			const {root} = create(
-				<Button
-					type={'main'}
-					variant={'contained'}
-					color={'primary'}
-					value="Button Test"
-					icon="box"
-					iconPosition={'left'}
-				/>
-			);
-
-			const ButtonComp = root.findByType(BaseButton);
-			const {onPressIn, onPressOut} = ButtonComp.props;
-
-			onPressIn();
-			onPressOut();
-
-			expect(setIsPressed).toBeCalledTimes(2);
-		});
-
 		it('when isLoading is true, show an loading spinner', () => {
 			const {root} = create(<Button icon={validData.icon} isLoading={validData.isLoading} />);
 			const LoadingComp = root.findByType(Loading);

src/components/Button/index.tsx

@@ -1,10 +1,10 @@
-import React, {FC, useCallback, useState} from 'react';
+import React, {FC} from 'react';
 import {ViewStyle, StyleSheet, TextStyle, View} from 'react-native';
 import BaseButton, {BaseButtonProps} from '../BaseButton';
+import getButtonStyles from './utils/getButtonStyles';
 import Loading from '../Loading';
 import Text from '../Text';
 import Icon from '../Icon';
-import {getMixedButtonStyles} from './utils';
 
 export const types = {
 	main: 'main',
@@ -19,7 +19,7 @@ export const variant = {
 
 export const color = {
 	primary: 'primary',
-	secondary: 'secondary',
+	black: 'black',
 	success: 'success',
 	error: 'error',
 	warning: 'warning',
@@ -55,10 +55,9 @@ interface ButtonProps extends BaseButtonProps {
 	iconPosition?: keyIconPosition;
 	disabled?: boolean;
 	style?: ViewStyle;
+	pressedStyle?: ViewStyle;
 	iconStyle?: TextStyle;
 	textStyle?: TextStyle;
-	onPressIn?: () => void;
-	onPressOut?: () => void;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -67,46 +66,30 @@ const Button: FC<ButtonProps> = ({
 	color = 'primary',
 	iconPosition = 'left',
 	isLoading = false,
-	value = 'Button',
+	value = '',
 	icon = null,
 	disabled = false,
 	style,
 	iconStyle,
 	textStyle,
-	onPressIn = () => {},
-	onPressOut = () => {},
 	...props
 }) => {
-	const [isPressed, setIsPressed] = useState<Boolean>(false);
+	const validDisabled = disabled || isLoading;
 	const hasIconAndText = !!icon && !!value;
 	const borderRadius = variant === 'text' ? 6 : 50;
 
-	const params = {
+	const buttonStyles = getButtonStyles({
 		type,
 		variant,
 		color,
 		iconPosition,
 		isLoading,
-		isPressed,
 		disabled,
 		hasIconAndText,
-	};
-	const buttonStyle = getMixedButtonStyles(params);
-	const styles = StyleSheet.create(buttonStyle);
-
-	const handleOnPressIn = useCallback(() => {
-		setIsPressed(true);
-		onPressIn();
-	}, [onPressIn]);
+	});
+	const styles = StyleSheet.create(buttonStyles);
 
-	const handleOnPressOut = useCallback(() => {
-		setIsPressed(false);
-		onPressOut();
-	}, [onPressOut]);
-
-	const LoadingCompontent = (
-		<Loading isLoading={isLoading} color={buttonStyle.loadingColor} size={24} />
-	);
+	const LoadingCompontent = <Loading isLoading={isLoading} color={styles.loadingColor} size={24} />;
 
 	const WrapperComponent = (
 		<View style={styles.direction}>
@@ -118,10 +101,9 @@ const Button: FC<ButtonProps> = ({
 	return (
 		<BaseButton
 			style={[styles.container, style]}
-			onPressIn={handleOnPressIn}
-			onPressOut={handleOnPressOut}
-			disabled={disabled || isLoading}
+			pressedStyle={!validDisabled && styles.pressed}
 			borderRadius={borderRadius}
+			disabled={validDisabled}
 			{...props}>
 			{isLoading ? LoadingCompontent : WrapperComponent}
 		</BaseButton>

src/components/Button/types/index.ts

@@ -1,7 +1,6 @@
 import type {keyColor, keyIconPosition, keyType, keyVariant} from '../';
 
 export interface SelectedColor {
-	light: string;
 	main: string;
 	dark: string;
 }
@@ -12,21 +11,20 @@ export interface Params {
 	color: keyColor;
 	iconPosition: keyIconPosition;
 	isLoading: Boolean;
-	isPressed: Boolean;
 	disabled: Boolean;
 	hasIconAndText?: Boolean;
 }
 
 export interface ReturnStyles {
 	container: object;
 	direction: object;
+	pressed: object;
 	icon: object;
 	text: object;
 	loadingColor: any;
 }
 
 export interface ContainerStyle {
-	isPressed: Boolean;
 	disabled: Boolean;
 	isLoading: Boolean;
 	color: keyColor;
@@ -41,7 +39,7 @@ export interface TextStyle {
 	color: keyColor;
 	disabled: Boolean;
 	isLoading: Boolean;
-	isPressed: Boolean;
+
 	hasIconAndText?: Boolean;
 	iconPosition: keyIconPosition;
 }

src/components/Button/utils/index.test.ts → src/components/Button/utils/getButtonStyles/index.test.ts

@@ -1,12 +1,11 @@
-import {getMixedButtonStyles} from '.';
+import getButtonStyles from './';
 
 const validParams = {
 	type: 'secondary',
 	variant: 'outlined',
 	color: 'secondary',
 	iconPosition: 'top',
 	isLoading: true,
-	isPressed: true,
 	disabled: true,
 	hasIconAndText: true,
 };
@@ -17,15 +16,14 @@ const failedParams = {
 	color: undefined,
 	iconPosition: undefined,
 	isLoading: false,
-	isPressed: false,
 	disabled: false,
 	hasIconAndText: false,
 };
 
 describe('getMixedButtonStyles util', () => {
 	it('return styles when params are passed correclty', () => {
 		// @ts-ignore
-		const response = getMixedButtonStyles(validParams);
+		const response = getButtonStyles(validParams);
 		expect(response).toEqual({
 			container: {
 				borderWidth: 1,
@@ -34,6 +32,7 @@ describe('getMixedButtonStyles util', () => {
 				paddingHorizontal: 16.5,
 				paddingVertical: 21,
 			},
+			pressed: {borderColor: '#2979FF', backgroundColor: '#fff'},
 			direction: {
 				justifyContent: 'center',
 				alignItems: 'center',
@@ -46,13 +45,13 @@ describe('getMixedButtonStyles util', () => {
 				fontSize: 29,
 			},
 			icon: {fontWeight: '500', textAlign: 'center', color: '#C4C6CC'},
-			loadingColor: '#2F2F2F',
+			loadingColor: '#2979FF',
 		});
 	});
 
 	it('returns default styles when params is not correct or no exist', () => {
 		// @ts-ignore
-		const response = getMixedButtonStyles(failedParams);
+		const response = getButtonStyles(failedParams);
 		expect(response).toEqual({
 			container: {
 				borderWidth: 1,
@@ -61,6 +60,7 @@ describe('getMixedButtonStyles util', () => {
 				paddingHorizontal: 16.5,
 				height: 104,
 			},
+			pressed: {borderColor: 'transparent', backgroundColor: '#1759FF'},
 			direction: {
 				justifyContent: 'center',
 				alignItems: 'center',