fix(Button): added state for btn and removed some types

lad-tech · Aug 13, 2024 · 25ff1f8 · 25ff1f8
1 parent 1f0881c
commit 25ff1f8
Show file tree

Hide file tree

Showing 12 changed files with 392 additions and 158 deletions.
diff --git a/packages/core/src/cta/components/Button/Button.tsx b/packages/core/src/cta/components/Button/Button.tsx
@@ -1,6 +1,6 @@
 import {FC, forwardRef, PropsWithChildren} from 'react';
 
-import {getCounterType} from '../../utils';
+import {getCounterType, getDefaultFont, getSpinnerColor} from '../../utils';
 import {ITouchableOpacity, TouchableOpacity} from '../../../basic';
 import useStyles from '../../../styles/hooks/useStyles';
 import {TypographyLegacy} from '../../../typography';
@@ -9,9 +9,8 @@ import {ISizeSpinner} from '../../../progress/components/Spinner/types';
 import {ICounterSize} from '../../../other';
 import Counter from '../../../other/components/Badge/Counter/Counter';
 
-import {IButtonProps, IButtonSize, IButtonTypes} from './types';
+import {IButtonProps, IButtonSize, IButtonTypes, IStateBtn} from './types';
 import stylesCreate from './stylesCreate';
-import {getDefaultFont} from './getDefaultFont';
 
 const Button = forwardRef<ITouchableOpacity, IButtonProps>((props, ref) => {
   const {
@@ -27,21 +26,20 @@ const Button = forwardRef<ITouchableOpacity, IButtonProps>((props, ref) => {
     font,
     count,
     textProps,
+    state = disabled ? IStateBtn.disabled : IStateBtn.default,
     ...otherProps
   } = props;
   const [styles, theme] = useStyles(
     stylesCreate,
-    disabled ? IButtonTypes.disabled : type,
+    type,
     size,
     Boolean(leftIcon),
     Boolean(rightIcon),
     Boolean(text),
+    state,
   );
 
-  const defaultFont = getDefaultFont(
-    size,
-    disabled ? IButtonTypes.disabled : type,
-  );
+  const defaultFont = getDefaultFont(size, type, state);
 
   const counterSize =
     size === IButtonSize.small ? ICounterSize.small : ICounterSize.medium;
@@ -61,24 +59,11 @@ const Button = forwardRef<ITouchableOpacity, IButtonProps>((props, ref) => {
     </TouchableOpacity>
   );
 
-  const getSpinnerColor = (): string => {
-    if (disabled) {
-      return theme.colors.IconWhite;
-    }
-    switch (type) {
-      case IButtonTypes.secondary:
-      case IButtonTypes.tertiary:
-        return theme.colors.IconBase;
-      default:
-        return theme.colors.IconWhite;
-    }
-  };
-
   if (loading || type === IButtonTypes.loading) {
     return (
       <Container>
         <Spinner
-          fill={getSpinnerColor()}
+          fill={getSpinnerColor({type, state, theme})}
           size={size === IButtonSize.small ? ISizeSpinner.XXS : ISizeSpinner.XS}
         />
       </Container>
@@ -101,7 +86,7 @@ const Button = forwardRef<ITouchableOpacity, IButtonProps>((props, ref) => {
         <Counter
           count={count}
           size={counterSize}
-          type={getCounterType(type)}
+          type={getCounterType({type, state})}
           style={styles.counter}
         />
       ) : null}

diff --git a/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -208,7 +208,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly destructive 1`] = `
             "minHeight": 20,
           },
           {
-            "color": "#F54C3D",
+            "color": "#2B78EE",
             "paddingHorizontal": 6,
             "textAlign": "center",
           },
@@ -662,7 +662,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading disabled 1`] =
     }
   >
     <SvgMock
-      fill="#FFFFFF"
+      fill="#D0D6E0"
       height="24"
       width="24"
     />
@@ -932,7 +932,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 4`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "#FFFFFF",
+          "backgroundColor": "#2B78EE",
           "borderRadius": 12,
           "height": 24,
           "justifyContent": "center",
@@ -957,7 +957,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 4`] = `
             "minHeight": 20,
           },
           {
-            "color": "#2B78EE",
+            "color": "#FFFFFF",
             "paddingHorizontal": 6,
             "textAlign": "center",
           },
@@ -1089,7 +1089,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 6`] = `
     {
       "alignItems": "center",
       "alignSelf": "stretch",
-      "backgroundColor": "#F2F4F7",
+      "backgroundColor": "#2B78EE",
       "borderRadius": 12,
       "flexDirection": "row",
       "justifyContent": "center",
@@ -1099,45 +1099,23 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 6`] = `
   }
 >
   <View
+    collapsable={false}
     style={
-      [
-        {
-          "alignItems": "center",
-          "alignSelf": "center",
-          "backgroundColor": "#FFFFFF",
-          "borderRadius": 12,
-          "height": 24,
-          "justifyContent": "center",
-          "minWidth": 24,
-          "zIndex": 1,
-        },
-        {
-          "marginLeft": 2,
-        },
-      ]
-    }
-  >
-    <Text
-      allowFontScaling={true}
-      style={
-        [
-          {
-            "color": "#FFFFFF",
-            "fontFamily": "Inter-SemiBold",
-            "fontSize": 16,
-            "lineHeight": 20,
-            "minHeight": 20,
-          },
+      {
+        "alignSelf": "center",
+        "transform": [
           {
-            "color": "#9BA1B0",
-            "paddingHorizontal": 6,
-            "textAlign": "center",
+            "rotate": "0deg",
           },
-        ]
+        ],
       }
-    >
-      23
-    </Text>
+    }
+  >
+    <SvgMock
+      fill="#FFFFFF"
+      height="24"
+      width="24"
+    />
   </View>
 </View>
 `;
@@ -1175,7 +1153,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 7`] = `
     {
       "alignItems": "center",
       "alignSelf": "stretch",
-      "backgroundColor": "#2B78EE",
+      "backgroundColor": "#F2F4F7",
       "borderRadius": 12,
       "flexDirection": "row",
       "justifyContent": "center",
@@ -1185,23 +1163,45 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 7`] = `
   }
 >
   <View
-    collapsable={false}
     style={
-      {
-        "alignSelf": "center",
-        "transform": [
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "center",
+          "backgroundColor": "#FFFFFF",
+          "borderRadius": 12,
+          "height": 24,
+          "justifyContent": "center",
+          "minWidth": 24,
+          "zIndex": 1,
+        },
+        {
+          "marginLeft": 2,
+        },
+      ]
+    }
+  >
+    <Text
+      allowFontScaling={true}
+      style={
+        [
           {
-            "rotate": "0deg",
+            "color": "#FFFFFF",
+            "fontFamily": "Inter-SemiBold",
+            "fontSize": 16,
+            "lineHeight": 20,
+            "minHeight": 20,
           },
-        ],
+          {
+            "color": "#2B78EE",
+            "paddingHorizontal": 6,
+            "textAlign": "center",
+          },
+        ]
       }
-    }
-  >
-    <SvgMock
-      fill="#FFFFFF"
-      height="24"
-      width="24"
-    />
+    >
+      23
+    </Text>
   </View>
 </View>
 `;
@@ -1279,7 +1279,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 8`] = `
             "minHeight": 20,
           },
           {
-            "color": "#F54C3D",
+            "color": "#2B78EE",
             "paddingHorizontal": 6,
             "textAlign": "center",
           },

diff --git a/packages/core/src/cta/components/Button/getDefaultFont.tsx b/packages/core/src/cta/components/Button/getDefaultFont.tsx