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 React, { useState } from 'react';
-import { styled, Popover } from '@toeverything/components/ui';
+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}>
+                <PendantPopover
-                    <TriggerLine className="triggerLine" />
+                    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')`
+const StyledTriggerLine = styled('div')<{ isHover: boolean }>(({ isHover }) => {
-    padding: 4px 0;
+    return {
-    width: 100px;
+        padding: '4px 0',
-    cursor: default;
+        width: '100px',
-    display: flex;
+        cursor: 'default',
-    align-items: flex-end;
+        display: 'flex',
-    position: relative;
+        alignItems: 'flex-end',
-    //background: red;
+        position: 'relative',
-    ::after {
+
-        content: '';
+        '::before': {
-        width: 100%;
+            content: "''",
-        height: 2px;
+            width: '100%',
-        background: #d9d9d9;
+            height: '2px',
-        display: none;
+            background: '#dadada',
-        position: absolute;
+            display: 'none',
-        left: 0;
+            position: 'absolute',
-        top: 4px;
+            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<{
+export const PendantPopover: FC<
-    block: AsyncBlock;
+    {
-    container: HTMLElement;
+        block: AsyncBlock;
-    children?: React.ReactElement;
+    } & Omit<PopperProps, 'content'>
-}> = props => {
+> = props => {
-    const { block, children, container } = 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}
-        >
+            {...popoverProps}
-            {children}
+        />
-        </Popover>
     );
 };
 

libs/components/ui/src/popper/Popper.tsx

@@ -6,8 +6,6 @@ import React, {
     useRef,
     useState,
 } from 'react';
-import type { PropsWithChildren } from 'react';
-
 import {
     MuiPopper,
     MuiClickAwayListener as ClickAwayListener,
@@ -18,7 +16,7 @@ import { styled } from '../styled';
 import { PopperProps, PopperHandler, VirtualElement } from './interface';
 import { useTheme } from '../theme';
 import { PopperArrow } from './PopoverArrow';
-export const Popper = forwardRef<PopperHandler, PropsWithChildren<PopperProps>>(
+export const Popper = forwardRef<PopperHandler, PopperProps>(
     (
         {
             children,

libs/components/ui/src/popper/interface.ts

@@ -17,6 +17,10 @@ export type PopperArrowProps = {
 export type PopperProps = {
     // Popover content
     content: ReactNode;
+
+    // Popover trigger
+    children?: ReactNode;
+
     // Position of Popover
     placement?: PopperPlacementType;