From aace2cb788bc5b74927b3307d33fee9c5919433d Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Wed, 17 Aug 2022 18:47:43 +0800
Subject: [PATCH] refactor: clean icon button

---
 libs/components/ui/src/button/IconButton.tsx | 76 +++++++++-----------
 libs/components/ui/src/button/constants.ts   |  6 --
 2 files changed, 32 insertions(+), 50 deletions(-)
 delete mode 100644 libs/components/ui/src/button/constants.ts

diff --git a/libs/components/ui/src/button/IconButton.tsx b/libs/components/ui/src/button/IconButton.tsx
index 0421ecdaf7..9ad863d636 100644
--- a/libs/components/ui/src/button/IconButton.tsx
+++ b/libs/components/ui/src/button/IconButton.tsx
@@ -3,9 +3,7 @@ import type {
     MouseEventHandler,
     PropsWithChildren,
 } from 'react';
-import { cx } from '../clsx';
 import { styled } from '../styled';
-import { buttonStatus } from './constants';
 
 /* Temporary solution, needs to be adjusted */
 const SIZE_SMALL = 'small' as const;
@@ -29,13 +27,18 @@ const SIZE_CONFIG = {
 
 type SizeType = keyof typeof SIZE_CONFIG;
 
-interface IconButtonProps {
+type IconButtonContainerProps = {
+    size?: SizeType;
+    hoverColor?: CSSProperties['backgroundColor'];
+    backgroundColor?: CSSProperties['backgroundColor'];
+    disabled?: boolean;
+};
+
+interface IconButtonProps extends IconButtonContainerProps {
     onClick?: MouseEventHandler;
     disabled?: boolean;
     style?: CSSProperties;
     className?: string;
-    size?: SizeType;
-    hoverColor?: string;
 }
 
 export const IconButton = ({
@@ -50,55 +53,40 @@ export const IconButton = ({
             {...props}
             onClick={disabled ? undefined : onClick}
             disabled={disabled}
-            className={cx({ [buttonStatus.disabled]: disabled }, className)}
         >
             {children}
         </Container>
     );
 };
 
-const Container = styled('button')<{
-    size?: SizeType;
-    hoverColor?: string;
-}>(({ theme, size = SIZE_MIDDLE, hoverColor }) => {
-    const { iconSize, areaSize } = SIZE_CONFIG[size];
+const Container = styled('button')<IconButtonContainerProps>(
+    ({ theme, size = SIZE_MIDDLE, hoverColor, backgroundColor, disabled }) => {
+        const { iconSize, areaSize } = SIZE_CONFIG[size];
 
-    return {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: areaSize,
-        height: areaSize,
-        backgroundColor: 'transparent',
-        color: theme.affine.palette.icons,
-        padding: theme.affine.spacing.iconPadding,
-        borderRadius: '3px',
-
-        '& svg': {
-            width: iconSize,
-            height: iconSize,
+        return {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-        },
+            width: areaSize,
+            height: areaSize,
+            backgroundColor: backgroundColor ?? 'transparent',
+            color: theme.affine.palette.icons,
+            padding: theme.affine.spacing.iconPadding,
+            borderRadius: '3px',
 
-        '&:hover': {
-            backgroundColor: hoverColor || theme.affine.palette.hover,
-        },
+            '& svg': {
+                width: iconSize,
+                height: iconSize,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            },
 
-        [`&${buttonStatus.hover}`]: {
-            backgroundColor: theme.affine.palette.hover,
-        },
+            '&:hover': {
+                backgroundColor: hoverColor || theme.affine.palette.hover,
+            },
 
-        '&:focus': {
-            color: theme.affine.palette.primary,
-        },
-        [`&.${buttonStatus.focus}`]: {
-            color: theme.affine.palette.primary,
-        },
-
-        [`&${buttonStatus.disabled}`]: {
-            cursor: 'not-allowed',
-        },
-    };
-});
+            ...(disabled ? { cursor: 'not-allowed' } : {}),
+        };
+    }
+);
diff --git a/libs/components/ui/src/button/constants.ts b/libs/components/ui/src/button/constants.ts
deleted file mode 100644
index 22ec35c5d1..0000000000
--- a/libs/components/ui/src/button/constants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const buttonStatus = {
-    hover: '.hover',
-    focus: '.focus',
-    active: '.focus',
-    disabled: '.disabled',
-};