Merge pull request #548 from illa-family/develop

Develop
illacloud · Jul 7, 2022 · 059dbea · 059dbea
2 parents 550cab3 + 55615f4
commit 059dbea
Show file tree

Hide file tree

Showing 63 changed files with 443 additions and 672 deletions.
diff --git a/packages/button/src/button.tsx b/packages/button/src/button.tsx
@@ -49,6 +49,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             textColor,
             autoFullHorizontal,
             autoFullVertically,
+            onClick,
             ...otherProps
           } = props
 
@@ -68,17 +69,33 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
               first ?? false,
               last ?? false,
             )};
-            ${applyElementColor(variant, colorScheme, textColor)};
-            ${applyBg(variant, colorScheme, backgroundColor, borderColor)};
+            ${applyElementColor(
+              variant,
+              colorScheme,
+              textColor,
+              disabled || loading,
+            )};
+            ${applyBg(
+              variant,
+              colorScheme,
+              backgroundColor,
+              borderColor,
+              disabled || loading,
+            )};
             ${buttonRadius ? `border-radius: ${buttonRadius};` : ""}
           `
 
           return (
             <button
               ref={ref}
               css={css(finalContainer, sizeCss, _css)}
-              disabled={disabled || loading}
               {...otherProps}
+              onClick={(e) => {
+                if (disabled || loading) {
+                  return
+                }
+                onClick?.(e)
+              }}
             >
               {(loading || leftIcon) && (
                 <span

diff --git a/packages/button/src/style.tsx b/packages/button/src/style.tsx
@@ -206,6 +206,7 @@ export function applyBg(
   colorScheme: ButtonColorScheme,
   backgroundColor?: string,
   borderColor?: string,
+  disabled?: boolean,
 ): SerializedStyles {
   const borderCss = borderColor
     ? css`
@@ -250,6 +251,12 @@ export function applyBg(
         }
       `
     case "dashed":
+      if (disabled) {
+        return css`
+          border: dashed 1px
+            ${getDifferentStatusColor(colorScheme, variant, State.DISABLE)[0]};
+        `
+      }
       return css`
         border: dashed 1px
           ${getDifferentStatusColor(colorScheme, variant, State.DEFAULT)[0]};
@@ -264,13 +271,19 @@ export function applyBg(
           border: dashed 1px
             ${getDifferentStatusColor(colorScheme, variant, State.ACTIVE)[0]};
         }
-
-        &:disabled {
-          border: dashed 1px
-            ${getDifferentStatusColor(colorScheme, variant, State.DISABLE)[0]};
-        }
       `
     case "fill":
+      if (disabled) {
+        return css`
+          background-color: ${getDifferentStatusColor(
+            colorScheme,
+            variant,
+            State.DISABLE,
+          )[0]};
+          ${borderCss}
+          ${backgroundCss}
+        `
+      }
       return css`
         background-color: ${getDifferentStatusColor(
           colorScheme,
@@ -294,18 +307,17 @@ export function applyBg(
             State.ACTIVE,
           )[0]};
         }
-
-        &:disabled {
-          background-color: ${getDifferentStatusColor(
-            colorScheme,
-            variant,
-            State.DISABLE,
-          )[0]};
-        }
         ${borderCss}
         ${backgroundCss}
       `
     case "outline":
+      if (disabled) {
+        return css`
+          border: solid 1px
+            ${getDifferentStatusColor(colorScheme, variant, State.DISABLE)[0]};
+          ${borderCss};
+        `
+      }
       return css`
         border: solid 1px
           ${getDifferentStatusColor(colorScheme, variant, State.DEFAULT)[0]};
@@ -320,14 +332,18 @@ export function applyBg(
           border: solid 1px
             ${getDifferentStatusColor(colorScheme, variant, State.ACTIVE)[0]};
         }
-
-        &:disabled {
-          border: solid 1px
-            ${getDifferentStatusColor(colorScheme, variant, State.DISABLE)[0]};
-        }
         ${borderCss}
       `
     case "light":
+      if (disabled) {
+        return css`
+          background-color: ${getDifferentStatusColor(
+            colorScheme,
+            variant,
+            State.DISABLE,
+          )[0]};
+        `
+      }
       return css`
         background-color: ${getDifferentStatusColor(
           colorScheme,
@@ -350,30 +366,21 @@ export function applyBg(
             State.ACTIVE,
           )[0]};
         }
-
-        &:disabled {
-          background-color: ${getDifferentStatusColor(
-            colorScheme,
-            variant,
-            State.DISABLE,
-          )[0]};
-        }
       `
   }
-  return css``
 }
 
 export function applyCursor(
   loading: boolean,
   disabled: boolean,
 ): SerializedStyles {
-  if (loading) {
+  if (disabled) {
     return css`
-      cursor: default;
+      cursor: not-allowed;
     `
-  } else if (disabled) {
+  } else if (loading) {
     return css`
-      cursor: not-allowed;
+      cursor: default;
     `
   } else {
     return css`
@@ -386,6 +393,7 @@ export function applyElementColor(
   variant: ButtonVariant,
   colorScheme: ButtonColorScheme,
   textColor?: string,
+  disabled?: boolean,
 ): SerializedStyles {
   if (textColor) {
     return css`
@@ -394,22 +402,32 @@ export function applyElementColor(
   }
   switch (variant) {
     case "text":
+      if (disabled) {
+        return css`
+          color: ${getDifferentStatusColor(
+            colorScheme,
+            variant,
+            State.DISABLE,
+          )[1]};
+        `
+      }
       return css`
         color: ${getDifferentStatusColor(
           colorScheme,
           variant,
           State.DEFAULT,
         )[1]};
-
-        &:disabled {
+      `
+    case "light":
+      if (disabled) {
+        return css`
           color: ${getDifferentStatusColor(
             colorScheme,
             variant,
             State.DISABLE,
           )[1]};
-        }
-      `
-    case "light":
+        `
+      }
       return css`
         color: ${getDifferentStatusColor(
           colorScheme,
@@ -432,16 +450,18 @@ export function applyElementColor(
             State.ACTIVE,
           )[1]};
         }
-        &:disabled {
+      `
+    case "outline":
+    case "dashed":
+      if (disabled) {
+        return css`
           color: ${getDifferentStatusColor(
             colorScheme,
             variant,
             State.DISABLE,
           )[1]};
-        }
-      `
-    case "outline":
-    case "dashed":
+        `
+      }
       return css`
         color: ${getDifferentStatusColor(
           colorScheme,
@@ -465,16 +485,17 @@ export function applyElementColor(
             State.ACTIVE,
           )[1]};
         }
-
-        &:disabled {
+      `
+    case "fill":
+      if (disabled) {
+        return css`
           color: ${getDifferentStatusColor(
             colorScheme,
             variant,
             State.DISABLE,
           )[1]};
-        }
-      `
-    case "fill":
+        `
+      }
       return css`
         color: ${getDifferentStatusColor(
           colorScheme,
@@ -498,14 +519,6 @@ export function applyElementColor(
             State.ACTIVE,
           )[1]};
         }
-
-        &:disabled {
-          color: ${getDifferentStatusColor(
-            colorScheme,
-            variant,
-            State.DISABLE,
-          )[1]};
-        }
       `
   }
   return css``