crear componente button

janis-commerce · Apr 15, 2024 · a5d3718 · a5d3718
1 parent 767c58c
commit a5d3718
Show file tree

Hide file tree

Showing 10 changed files with 265 additions and 108 deletions.
diff --git a/App.tsx b/App.tsx
@@ -9,10 +9,11 @@ const App = () => (
 			icon='box'
 			isLoading={false}
 			type={Type.Main}
-			variant={Variant.Contained}
-			color={Color.Success}
-			iconPosition={IconPosition.Left}
+			variant={Variant.Outlined}
+			color={Color.Primary}
+			// iconPosition={IconPosition.Right}
 			disabled={false}
+			style={{width: '100%'}}
 		/>
 	</View>
 );

diff --git a/src/components/BaseButton/index.tsx b/src/components/BaseButton/index.tsx
@@ -9,23 +9,19 @@ export interface BaseButtonProps extends PressableProps {
 }
 
 const BaseButton: FC<BaseButtonProps> = ({
-	borderRadius = 50,
+	borderRadius = 0,
 	children = null,
 	style,
 	...props
 }) => {
 	if(!children) return null;
 
-	const validatePaddingVertical = scaledForDevice(10, moderateScale);
-	const validatePaddingHorizontal = scaledForDevice(16, horizontalScale);
 	const validateBorderRadius = scaledForDevice(borderRadius, moderateScale);
 
 	const styles = StyleSheet.create({
 		container: {
 			alignItems: 'center',
 			justifyContent: 'center',
-			paddingHorizontal: validatePaddingHorizontal,
-			paddingVertical: validatePaddingVertical,
 			borderRadius: validateBorderRadius,
 		},
 	});

diff --git a/src/components/Button/constants/index.ts b/src/components/Button/constants/index.ts
@@ -0,0 +1,13 @@
+const verticalHeights = ['top', 'bottom'];
+const defaultColor = 'primary';
+const defaultType = 'main';
+const defaultVariant = 'contained';
+const defaultIconPosition = 'left';
+
+export {
+    verticalHeights,
+    defaultColor,
+    defaultType,
+    defaultVariant,
+    defaultIconPosition
+}
diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx
@@ -0,0 +1,3 @@
+describe('Button', () => {
+    /* global expect */
+});
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -28,7 +28,7 @@ export enum Color {
 
 export enum IconPosition {
 	Left = 'left',
-	Right = 'rigth',
+	Right = 'right',
 	Top = 'top',
 	Bottom = 'bottom',
 }
@@ -69,6 +69,7 @@ const Button: FC<ButtonProps> = ({
 	...props
 }) => {
 	const [isPressed, setIsPressed] = useState<Boolean>(false);
+	const hasIconAndText = !!icon && !!value;
 
 	const params = {
 		type,
@@ -78,6 +79,7 @@ const Button: FC<ButtonProps> = ({
 		isLoading,
 		isPressed,
 		disabled,
+		hasIconAndText,
 	};
 	const buttonStyle = getMixedButtonStyles(params)
 	const styles = StyleSheet.create(buttonStyle);		
@@ -113,6 +115,7 @@ const Button: FC<ButtonProps> = ({
 			onPressIn={useCallback(handleOnPressIn, [setIsPressed, isPressed])}
 			onPressOut={useCallback(handleOnPressOut, [setIsPressed, isPressed])}
 			disabled={disabled || isLoading}
+			borderRadius={50}
 			{...props}>
 			{isLoading ? LoadingCompontent : WrapperComponent}
 		</BaseButton>

diff --git a/src/components/Button/theme/configs/index.ts b/src/components/Button/theme/configs/index.ts
@@ -0,0 +1,136 @@
+import { moderateScale, scaledForDevice } from '../../../../scale';
+import { base, black, grey} from '../../../../theme/palette';
+import { SelectedColor } from "../../types"
+
+export const colorConfig = (selectedColor: SelectedColor) => {
+    return {
+        main: {
+            background: {
+                contained:  selectedColor.main,
+                outlined: selectedColor.light,
+                text: 'transparent'
+            },
+            border: {
+                contained:  'transparent',
+                outlined: grey[300],
+                text: 'transparent'
+            },
+            text: {
+                main: {
+                    contained:  base.white,
+                    outlined: black.main,
+                    text: selectedColor.main,
+                },
+                secondary: {
+                    contained:  base.white,
+                    outlined: selectedColor.main,
+                    text: black.main,  
+                }
+            },
+        },
+        pressed: {
+            background: {
+                contained:  selectedColor.dark,
+                outlined: selectedColor.light,
+                text: grey[100],
+            },
+            border: {
+                contained:  'transparent',
+                outlined: selectedColor.main,
+                text: 'transparent',
+            },
+            text: {
+                main: {
+                    contained:  base.white,
+                    outlined: black.main,
+                    text: selectedColor.main,
+                },
+                secondary: {
+                    contained:  base.white,
+                    outlined: selectedColor.main,
+                    text: selectedColor.dark,  
+                }
+            }
+        },
+        disabled: {
+            background: {
+                contained:  grey[200],
+                outlined: grey[100],
+                text: 'transparent'
+            },
+            border: {
+                main: {
+                    contained: 'transparent',
+                    outlined: 'transparent',
+                    text: 'transparent'
+                },
+                secondary: {
+                    contained: 'transparent',
+                    outlined: grey[300],
+                    text: 'transparent'
+                }
+            },
+            text: {
+                main: {
+                    contained:  grey[400],
+                    outlined: grey[300],
+                    text: grey[300],
+                },
+                secondary: {
+                    contained:  grey[400],
+                    outlined: grey[300],
+                    text: grey[300],
+                }
+            },
+        },
+    }
+}
+
+export const stlyeConfig = {
+    container: {
+        height: {
+            main: scaledForDevice(50, moderateScale),
+            secondary: scaledForDevice(42, moderateScale),
+        },
+        shadow : {
+            // android
+            shadowColor: '#000',
+            elevation: 5,
+            // IOS
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            shadowOffset: {
+            width: 0,
+            height: scaledForDevice(3, moderateScale),
+            },
+        }
+    },
+    directionWrapper: {
+        center: {
+            justifyContent: 'center',
+            alignItems: 'center'
+	    },
+        flexDirection: {
+            left: 'row',
+            right: 'row-reverse',
+            top: 'column',
+            bottom: 'column-reverse',
+        }
+    },
+    text: {
+		fontWeight: '500',
+		textAlign: 'center',
+    },
+    icon: {
+        margin: {
+            top: {},
+            bottom: {},
+            left: {
+                right: scaledForDevice(8, moderateScale)
+            },
+            right: {
+                marginLeft: scaledForDevice(8, moderateScale)
+            },
+        }
+    }
+}
diff --git a/src/components/Button/theme/index.ts b/src/components/Button/theme/index.ts
@@ -1,5 +1,4 @@
-import { alert, base, black, error, grey, primary, success, warning} from '../../../theme/palette';
-import type { SelectedColor } from './types';
+import { alert, base, black, error, primary, success, warning} from '../../../theme/palette';
 
 export const themeColors = {
     primary: {
@@ -32,46 +31,4 @@ export const themeColors = {
         main: alert.main,
         dark: alert.dark,
     }
-}
-
-export const mixedColors = (selectedColor: SelectedColor) => {
-    return {
-        mainBgColor: {
-            contained:  selectedColor.main,
-            outlined: selectedColor.light,
-            text: 'transparent'
-        },
-        mainBorderColor: {
-            contained:  'transparent',
-            outlined: grey[300],
-            text: 'transparent'
-        },
-        pressedBgColor: {
-            contained:  selectedColor.dark,
-            outlined: selectedColor.light,
-            text: 'transparent'
-        },
-        pressedBorderColor: {
-            contained:  'transparent',
-            outlined: selectedColor.main,
-            text: 'transparent'
-        },
-        disabledBgColor: {
-            contained:  grey[200],
-            outlined: grey[100],
-            text: 'transparent'
-        },
-        disabledBorderColor: {
-            main: {
-                contained: 'transparent',
-                outlined: 'transparent',
-                text: 'transparent'
-            },
-            secondary: {
-                contained: 'transparent',
-                outlined: grey[300],
-                text: 'transparent'
-            }
-        }
-    }
 }
diff --git a/src/components/Button/theme/types.ts b/src/components/Button/theme/types.ts
diff --git a/src/components/Button/utils/types.ts → src/components/Button/types/index.ts b/src/components/Button/utils/types.ts → src/components/Button/types/index.ts
@@ -1,5 +1,11 @@
 import type { Color, IconPosition, Type, Variant } from "../";
 
+export interface SelectedColor {
+    light: string,
+    main: string,
+    dark: string,
+}
+
 export interface Params {
 	type: Type,
 	variant: Variant,
@@ -25,4 +31,24 @@ export interface ContainerStyle {
 	color: Color,
 	variant: Variant,
 	type: Type,
+	iconPosition: IconPosition,
+}
+
+export interface TextStyle {
+	type: Type,
+	variant: Variant,
+	color: Color,
+	disabled: Boolean,
+	isLoading: Boolean,
+	isPressed: Boolean,
+	hasIconAndText?: Boolean,
+	iconPosition: IconPosition,
+}
+
+export interface LoadingStyle {
+	color: Color,
+}
+
+export interface DirectionStyle {
+	iconPosition: IconPosition,
 }