From cb7400b091fe45dc46c55fab39ca6308010a9705 Mon Sep 17 00:00:00 2001
From: qishaoxuan <qishaoxuan777@gmail.com>
Date: Tue, 26 Jul 2022 16:43:31 +0800
Subject: [PATCH] feat: add button only show on hover, resolved #526

---
 .../pendant-render/PandentRender.tsx          | 57 +++++++++----
 libs/components/ui/src/mui.ts                 | 85 +++++++++----------
 2 files changed, 83 insertions(+), 59 deletions(-)

diff --git a/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx b/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx
index 7954b549d..5f391b9f4 100644
--- a/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx
+++ b/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx
@@ -1,30 +1,38 @@
-import React, { useRef, useState } from 'react';
-import { AsyncBlock } from '../../editor';
+import React, {useRef, useState} from 'react';
+import {AsyncBlock} from '../../editor';
 import {
     getRecastItemValue,
-    PropertyType,
     RecastBlockValue,
     RecastMetaProperty,
     useRecastBlockMeta,
 } from '../../recast-block';
-import { Popover, PopperHandler, styled } from '@toeverything/components/ui';
-import { PendantTag } from '../PendantTag';
+import {
+    MuiZoom,
+    Popover,
+    PopperHandler,
+    styled,
+} from '@toeverything/components/ui';
+import {PendantTag} from '../PendantTag';
+import {
+    UpdatePendantPanel
+} from '../pendant-operation-panel';
+import {AddPendantPopover} from '../AddPendantPopover';
 
-import { defaultPendantColors } from '../config';
-import { UpdatePendantPanel } from '../pendant-operation-panel';
-import { AddPendantPopover } from '../AddPendantPopover';
-import { PendantTypes } from '../types';
-
-export const PendantRender = ({ block }: { block: AsyncBlock }) => {
+export const PendantRender = ({block}: { block: AsyncBlock }) => {
     const [propertyWithValue, setPropertyWithValue] = useState<{
         value: RecastBlockValue;
         property: RecastMetaProperty;
     }>();
     const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
+    const blockRenderContainerRef = useRef<HTMLDivElement>(null);
+    const [showAddBtn, setShowAddBtn] = useState(false);
 
-    const { getProperties } = useRecastBlockMeta();
+    const {getProperties} = useRecastBlockMeta();
 
-    const { getValue, removeValue } = getRecastItemValue(block);
+    const {
+        getValue,
+        removeValue
+    } = getRecastItemValue(block);
 
     const properties = getProperties();
 
@@ -38,9 +46,17 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
         .filter(v => v.value);
 
     return (
-        <BlockPendantContainer>
+        <BlockPendantContainer
+            ref={blockRenderContainerRef}
+            onPointerEnter={() => {
+                setShowAddBtn(true);
+            }}
+            onPointerLeave={() => {
+                setShowAddBtn(false);
+            }}
+        >
             {propertyWithValues.map(pWithV => {
-                const { id, type } = pWithV.value;
+                const {id, type} = pWithV.value;
 
                 /* （暂时关闭，HOOK中需要加入Scene的判断）Remove duplicate label(tag) */
                 // if (groupBy?.id === id) {
@@ -52,6 +68,7 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
                         ref={ref => {
                             popoverHandlerRef.current[id] = ref;
                         }}
+                        container={blockRenderContainerRef.current}
                         key={id}
                         trigger="click"
                         placement="bottom-start"
@@ -96,7 +113,15 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
                 );
             })}
             {propertyWithValues.length ? (
-                <AddPendantPopover block={block} iconStyle={{ marginTop: 5 }} />
+                <MuiZoom in={showAddBtn}>
+                    <div>
+                        <AddPendantPopover
+                            block={block}
+                            iconStyle={{marginTop: 4}}
+                            container={blockRenderContainerRef.current}
+                        />
+                    </div>
+                </MuiZoom>
             ) : null}
         </BlockPendantContainer>
     );
diff --git a/libs/components/ui/src/mui.ts b/libs/components/ui/src/mui.ts
index 509a774f5..94025c5f5 100644
--- a/libs/components/ui/src/mui.ts
+++ b/libs/components/ui/src/mui.ts
@@ -4,55 +4,54 @@
 
 /* eslint-disable no-restricted-imports */
 
-import {
-    Box,
-    Collapse,
-    IconButton,
-    CircularProgress,
-    Divider,
-    Typography,
-    Menu,
-    MenuItem,
-    Avatar,
-    Popover,
-    TextField,
-    Modal,
-    Button,
-    List,
-    ListItem,
-    ListItemText,
-    Tooltip,
-    tooltipClasses,
-    Tabs,
-    Tab,
-    OutlinedInput,
-    InputAdornment,
-    Grow,
-    Paper,
-    MenuList,
-    ClickAwayListener,
-    Popper,
-    Select,
-    Switch,
-    Grid,
-    Container,
-    Snackbar,
-    InputBase,
-    FormControlLabel,
-    Checkbox,
-    Input,
-    Radio,
-    Zoom,
-} from '@mui/material';
-
 import type {
+    DividerProps,
     PopoverProps,
     PopperPlacementType,
     SelectChangeEvent,
     TooltipProps,
-    DividerProps,
 } from '@mui/material';
-import { ListItemButton } from '@mui/material';
+import {
+    Avatar,
+    Box,
+    Button,
+    Checkbox,
+    CircularProgress,
+    ClickAwayListener,
+    Collapse,
+    Container,
+    Divider,
+    FormControlLabel,
+    Grid,
+    Grow,
+    IconButton,
+    Input,
+    InputAdornment,
+    InputBase,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemText,
+    Menu,
+    MenuItem,
+    MenuList,
+    Modal,
+    OutlinedInput,
+    Paper,
+    Popover,
+    Popper,
+    Radio,
+    Select,
+    Snackbar,
+    Switch,
+    Tab,
+    Tabs,
+    TextField,
+    Tooltip,
+    tooltipClasses,
+    Typography,
+    Zoom,
+} from '@mui/material';
 
 export { alpha } from '@mui/system';