feat: add animate in trigger, resolved #529

libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, { useState, useRef } from 'react';
-import { styled, Popover } from '@toeverything/components/ui';
+import React, { useState } from 'react';
+import { styled } from '@toeverything/components/ui';
 import type { AsyncBlock } from '../editor';
 import { PendantPopover } from './pendant-popover';
 import { PendantRender } from './pendant-render';
@@ -19,12 +19,22 @@ export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
     children,
 }) => {
     const [container, setContainer] = useState<HTMLElement>(null);
+    const [isHover, setIsHover] = useState(false);
     return (
         <Container ref={(dom: HTMLElement) => setContainer(dom)}>
             {children}
             {container && (
-                <PendantPopover block={block} container={container}>
-                    <TriggerLine className="triggerLine" />
+                <PendantPopover
+                    block={block}
+                    container={container}
+                    onVisibleChange={visible => {
+                        setIsHover(visible);
+                    }}
+                >
+                    <StyledTriggerLine
+                        className="triggerLine"
+                        isHover={isHover}
+                    />
                 </PendantPopover>
             )}
             <PendantRender block={block} />
@@ -35,27 +45,40 @@ export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
 const Container = styled('div')({
     position: 'relative',
     padding: '4px',
-    '&:hover .triggerLine::after': {
+    '&:hover .triggerLine::before': {
         display: 'flex',
     },
 });
 
-const TriggerLine = styled('div')`
-    padding: 4px 0;
-    width: 100px;
-    cursor: default;
-    display: flex;
-    align-items: flex-end;
-    position: relative;
-    //background: red;
-    ::after {
-        content: '';
-        width: 100%;
-        height: 2px;
-        background: #d9d9d9;
-        display: none;
-        position: absolute;
-        left: 0;
-        top: 4px;
-    }
-`;
+const StyledTriggerLine = styled('div')<{ isHover: boolean }>(({ isHover }) => {
+    return {
+        padding: '4px 0',
+        width: '100px',
+        cursor: 'default',
+        display: 'flex',
+        alignItems: 'flex-end',
+        position: 'relative',
+
+        '::before': {
+            content: "''",
+            width: '100%',
+            height: '2px',
+            background: '#dadada',
+            display: 'none',
+            position: 'absolute',
+            left: '0',
+            top: '4px',
+        },
+        '::after': {
+            content: "''",
+            width: isHover ? '100%' : '0',
+            height: '2px',
+            background: '#aac4d5',
+            display: 'block',
+            position: 'absolute',
+            left: '0',
+            top: '4px',
+            transition: 'width .3s',
+        },
+    };
+});

libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx

@@ -1,15 +1,19 @@
 import React, { FC, useRef } from 'react';
 import { AsyncBlock } from '../../editor';
 import { PendantHistoryPanel } from '../pendant-history-panel';
-import { Popover, type PopperHandler } from '@toeverything/components/ui';
+import {
+    Popover,
+    type PopperHandler,
+    PopperProps,
+} from '@toeverything/components/ui';
 import { AddPendantPopover } from '../AddPendantPopover';
 
-export const PendantPopover: FC<{
-    block: AsyncBlock;
-    container: HTMLElement;
-    children?: React.ReactElement;
-}> = props => {
-    const { block, children, container } = props;
+export const PendantPopover: FC<
+    {
+        block: AsyncBlock;
+    } & Omit<PopperProps, 'content'>
+> = props => {
+    const { block, ...popoverProps } = props;
     const popoverHandlerRef = useRef<PopperHandler>();
     return (
         <Popover
@@ -17,7 +21,6 @@ export const PendantPopover: FC<{
             pointerEnterDelay={300}
             pointerLeaveDelay={200}
             placement="bottom-start"
-            container={container}
             // visible={true}
             // trigger="click"
             content={
@@ -37,9 +40,8 @@ export const PendantPopover: FC<{
             }
             offset={[0, 0]}
             style={popoverContainerStyle}
-        >
-            {children}
-        </Popover>
+            {...popoverProps}
+        />
     );
 };