🐛 fix: fixed ActionIcon hover double mask (#15)

Co-authored-by: ONLY-yours <[email protected]>
ant-design · Nov 27, 2023 · c98f4d4 · c98f4d4
1 parent 983b601
commit c98f4d4
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 87 deletions.
diff --git a/src/ActionIcon/index.tsx b/src/ActionIcon/index.tsx
@@ -6,9 +6,8 @@ import Spotlight from '@/components/Spotlight';
 import { DivProps } from '@/types';
 import { type TooltipProps } from 'antd';
 
-import { useStyles } from './style';
-
 import { ActionIcon as ProEditorActionIcon } from '@ant-design/pro-editor';
+import { useStyles } from './style';
 
 export type ActionIconSize =
   | 'large'
@@ -116,63 +115,68 @@ export interface ActionIconProps extends DivProps {
   tooltipDelay?: number;
 }
 
-const ActionIcon = forwardRef<HTMLDivElement, ActionIconProps>(
-  (
-    {
-      color,
-      fill,
-      className,
-      active,
-      icon,
-      size = 'normal',
-      style,
-      glass,
-      spotlight,
-      onClick,
-      children,
-      loading,
-      ...props
-    },
-    ref,
-  ) => {
-    const { styles, cx } = useStyles({ active: Boolean(active), glass: Boolean(glass) });
-
-    const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);
-
-    const content = (
-      <>
-        {icon && (
-          <Icon
-            className={styles.icon}
-            color={color}
-            fill={fill}
-            icon={icon}
-            size={size === 'site' ? 'normal' : size}
-          />
-        )}
-        {children}
-      </>
-    );
-
-    const spin = (
-      <Icon color={color} icon={Loader2} size={size === 'site' ? 'normal' : size} spin />
-    );
-
-    const actionIconBlock = (
-      <div
-        className={cx(styles.block, className)}
-        onClick={loading ? undefined : onClick}
-        ref={ref}
-        style={{ borderRadius, height: blockSize, width: blockSize, ...style }}
-        {...props}
-      >
-        {spotlight && <Spotlight />}
-        {loading ? spin : content}
-      </div>
-    );
-
-    return <ProEditorActionIcon {...props} icon={actionIconBlock} />;
-  },
-);
+const ActionIcon = forwardRef<HTMLDivElement, ActionIconProps>((props, ref) => {
+  const {
+    color,
+    fill,
+    className,
+    active,
+    icon,
+    size = 'normal',
+    style,
+    glass,
+    spotlight,
+    onClick,
+    children,
+    loading,
+    title,
+    placement,
+    arrow = false,
+    tooltipDelay = 0.5,
+    ...rest
+  } = props;
+
+  const { styles, cx } = useStyles({ active: Boolean(active), glass: Boolean(glass) });
+
+  const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);
+
+  const content = (
+    <>
+      {icon && (
+        <Icon color={color} fill={fill} icon={icon} size={size === 'site' ? 'normal' : size} />
+      )}
+      {children}
+    </>
+  );
+
+  const spin = <Icon color={color} icon={Loader2} size={size === 'site' ? 'normal' : size} spin />;
+
+  const actionIconBlock = (
+    <div
+      className={cx(styles.block, className)}
+      onClick={loading ? undefined : onClick}
+      ref={ref}
+      style={{ borderRadius, height: blockSize, width: blockSize, ...style }}
+      {...rest}
+    >
+      {spotlight && <Spotlight />}
+      {loading ? spin : content}
+    </div>
+  );
+
+  return (
+    <>
+      <ProEditorActionIcon
+        {...rest}
+        arrow={arrow}
+        tooltipDelay={tooltipDelay}
+        placement={placement}
+        title={title}
+        icon={actionIconBlock}
+        size={blockSize}
+      />
+    </>
+  );
+});
 
 export default ActionIcon;
diff --git a/src/ActionIcon/style.ts b/src/ActionIcon/style.ts
@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(
-  ({ css, token, stylish, cx }, { active, glass }: { active: boolean; glass: boolean }) => {
+  ({ css, stylish, cx }, { glass }: { active: boolean; glass: boolean }) => {
     return {
       block: cx(
         glass && stylish.blur,
@@ -14,34 +14,8 @@ export const useStyles = createStyles(
           flex: none;
           align-items: center;
           justify-content: center;
-
-          color: ${active ? token.colorText : token.colorTextTertiary};
-
-          background: ${active ? token.colorFillTertiary : 'transparent'};
-
-          transition:
-            color 600ms ${token.motionEaseOut},
-            scale 400ms ${token.motionEaseOut},
-            background-color 100ms ${token.motionEaseOut};
-
-          &:hover {
-            color: ${token.colorText};
-            background-color: ${token.colorFillSecondary};
-          }
-
-          &:active {
-            color: ${token.colorText};
-            background-color: ${token.colorFill};
-          }
         `,
       ),
-      icon: css`
-        transition: scale 400ms ${token.motionEaseOut};
-
-        &:active {
-          scale: 0.8;
-        }
-      `,
     };
   },
 );