From 465ceeea8042abbcf16e571262aca8c2dd87db87 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Fri, 15 May 2020 12:34:16 +0800
Subject: [PATCH] style(button): reduce duplicate code blocks

---
 components/button/button.tsx | 20 ++++++--------------
 components/button/styles.ts  | 23 +++++++----------------
 2 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/components/button/button.tsx b/components/button/button.tsx
index d3ef68d..ad6ea6e 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -47,6 +47,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps })
   const [dripX, setDripX] = useState<number>(0)
   const [dripY, setDripY] = useState<number>(0)
   const groupConfig = useButtonGroupContext()
+  const filteredProps = filterPropsWithGroup(btnProps, groupConfig)
   const {
     children,
     disabled,
@@ -63,22 +64,13 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps })
     iconRight,
     className,
     ...props
-  } = filterPropsWithGroup(btnProps, groupConfig)
+  } = filteredProps
 
-  const { bg, border, color } = useMemo(() => getButtonColors(theme, type, disabled, ghost), [
+  const { bg, border, color } = useMemo(() => getButtonColors(theme, filteredProps), [
     theme,
-    type,
-    disabled,
-    ghost,
-  ])
-  const hover = useMemo(() => getButtonHoverColors(theme, type, disabled, loading, shadow, ghost), [
-    theme,
-    type,
-    disabled,
-    loading,
-    shadow,
-    ghost,
+    filteredProps,
   ])
+  const hover = useMemo(() => getButtonHoverColors(theme, filteredProps), [theme, filteredProps])
   const { cursor, events } = useMemo(() => getButtonCursor(disabled, loading), [disabled, loading])
   const { height, minWidth, padding, width, fontSize } = useMemo(() => getButtonSize(size, auto), [
     size,
@@ -151,7 +143,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps })
           text-align: center;
           white-space: nowrap;
           transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
-            border 200ms ease 0ms;
+            border 200ms ease 0ms, color 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: ${color};
diff --git a/components/button/styles.ts b/components/button/styles.ts
index da7fb82..14e7059 100644
--- a/components/button/styles.ts
+++ b/components/button/styles.ts
@@ -1,5 +1,6 @@
 import { ZeitUIThemes } from '../styles/themes'
 import { NormalSizes, ButtonTypes } from '../utils/prop-types'
+import { ButtonProps } from 'components/button/button'
 
 export interface ButtonColorGroup {
   bg: string
@@ -37,12 +38,8 @@ export const getButtonGhostColors = (
   return colors[type] || null
 }
 
-export const getButtonColors = (
-  theme: ZeitUIThemes,
-  type: ButtonTypes,
-  disabled: boolean,
-  ghost: boolean,
-): ButtonColorGroup => {
+export const getButtonColors = (theme: ZeitUIThemes, props: ButtonProps): ButtonColorGroup => {
+  const { type, disabled, ghost } = props
   const colors: { [key in ButtonTypes]?: ButtonColorGroup } = {
     default: {
       bg: theme.palette.background,
@@ -118,14 +115,8 @@ export const getButtonGhostHoverColors = (
   return colors[type] || null
 }
 
-export const getButtonHoverColors = (
-  theme: ZeitUIThemes,
-  type: ButtonTypes,
-  disabled: boolean,
-  loading: boolean,
-  shadow: boolean,
-  ghost: boolean,
-): ButtonColorGroup => {
+export const getButtonHoverColors = (theme: ZeitUIThemes, props: ButtonProps): ButtonColorGroup => {
+  const { type, disabled, loading, shadow, ghost } = props
   const colors: { [key in ButtonTypes]?: any } = {
     default: {
       bg: theme.palette.background,
@@ -168,10 +159,10 @@ export const getButtonHoverColors = (
     }
   if (loading)
     return {
-      ...getButtonColors(theme, type, disabled, ghost),
+      ...getButtonColors(theme, props),
       color: 'transparent',
     }
-  if (shadow) return getButtonColors(theme, type, disabled, ghost)
+  if (shadow) return getButtonColors(theme, props)
   if (ghost) return getButtonGhostHoverColors(theme, type) || defaultHover
   return colors[type] || defaultHover
 }