Merge pull request #194 from toeverything/fix/experience

Fix/experience

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

@@ -3,6 +3,8 @@ import { styled } from '@toeverything/components/ui';
 import type { AsyncBlock } from '../editor';
 import { PendantPopover } from './pendant-popover';
 import { PendantRender } from './pendant-render';
+import { useRef } from 'react';
+import { getRecastItemValue, useRecastBlockMeta } from '../recast-block';
 /**
  * @deprecated
  */
@@ -14,13 +16,27 @@ export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
     block,
     children,
 }) => {
+    const triggerRef = useRef<HTMLDivElement>();
+    const { getProperties } = useRecastBlockMeta();
+    const properties = getProperties();
+    const { getValue } = getRecastItemValue(block);
+    const showTriggerLine =
+        properties.filter(property => getValue(property.id)).length === 0;
+
     return (
         <Container>
             {children}
 
-            <PendantPopover block={block}>
-                <StyledTriggerLine />
-            </PendantPopover>
+            {showTriggerLine ? (
+                <StyledPendantContainer ref={triggerRef}>
+                    <PendantPopover
+                        block={block}
+                        container={triggerRef.current}
+                    >
+                        <StyledTriggerLine />
+                    </PendantPopover>
+                </StyledPendantContainer>
+            ) : null}
 
             <PendantRender block={block} />
         </Container>
@@ -43,10 +59,12 @@ const StyledTriggerLine = styled('div')({
         width: '100%',
         height: '2px',
         background: '#dadada',
-        display: 'none',
+        display: 'flex',
         position: 'absolute',
         left: '0',
         top: '4px',
+        transition: 'opacity .2s',
+        opacity: '0',
     },
     '::after': {
         content: "''",
@@ -60,18 +78,24 @@ const StyledTriggerLine = styled('div')({
         transition: 'width .3s',
     },
 });
-
-const Container = styled('div')({
-    position: 'relative',
-    paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
+const StyledPendantContainer = styled('div')({
+    width: '100px',
     '&:hover': {
-        [StyledTriggerLine.toString()]: {
-            '&::before': {
-                display: 'flex',
-            },
+        [`${StyledTriggerLine}`]: {
             '&::after': {
                 width: '100%',
             },
         },
     },
 });
+const Container = styled('div')({
+    position: 'relative',
+    paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
+    '&:hover': {
+        [`${StyledTriggerLine}`]: {
+            '&::before': {
+                opacity: '1',
+            },
+        },
+    },
+});

libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx

@@ -29,6 +29,7 @@ export const PendantHistoryPanel = ({
 
     const [history, setHistory] = useState<RecastBlockValue[]>([]);
     const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
+    const historyPanelRef = useRef<HTMLDivElement>();
     const { getValueHistory } = getRecastItemValue(block);
 
     useEffect(() => {
@@ -84,7 +85,7 @@ export const PendantHistoryPanel = ({
     }, [block, getProperties, groupBlock, recastBlock]);
 
     return (
-        <StyledPendantHistoryPanel>
+        <StyledPendantHistoryPanel ref={historyPanelRef}>
             {history.map(item => {
                 const property = getProperty(item.id);
                 return (
@@ -116,6 +117,7 @@ export const PendantHistoryPanel = ({
                             />
                         }
                         trigger="click"
+                        container={historyPanelRef.current}
                     >
                         <PendantTag
                             style={{

libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx

@@ -1,5 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { Input, Option, Select, Tooltip } from '@toeverything/components/ui';
+import {
+    Input,
+    message,
+    Option,
+    Select,
+    Tooltip,
+} from '@toeverything/components/ui';
 import { HelpCenterIcon } from '@toeverything/components/icons';
 import { AsyncBlock } from '../../editor';
 
@@ -18,6 +24,7 @@ import {
     generateRandomFieldName,
     generateInitialOptions,
     getPendantConfigByType,
+    checkPendantForm,
 } from '../utils';
 import { useOnCreateSure } from './hooks';
 
@@ -74,7 +81,7 @@ export const CreatePendantPanel = ({
                     setFieldName(e.target.value);
                 }}
                 endAdornment={
-                    <Tooltip content="Help info here">
+                    <Tooltip content="Help info here" placement="top">
                         <StyledInputEndAdornment>
                             <HelpCenterIcon />
                         </StyledInputEndAdornment>
@@ -98,6 +105,17 @@ export const CreatePendantPanel = ({
                         )}
                         iconConfig={getPendantConfigByType(selectedOption.type)}
                         onSure={async (type, newPropertyItem, newValue) => {
+                            const checkResult = checkPendantForm(
+                                type,
+                                fieldName,
+                                newPropertyItem,
+                                newValue
+                            );
+
+                            if (!checkResult.passed) {
+                                await message.error(checkResult.message);
+                                return;
+                            }
                             await onCreateSure({
                                 type,
                                 newPropertyItem,

libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Input, Tooltip } from '@toeverything/components/ui';
+import { Input, message, Tooltip } from '@toeverything/components/ui';
 import { HelpCenterIcon } from '@toeverything/components/icons';
 import { PendantModifyPanel } from '../pendant-modify-panel';
 import type { AsyncBlock } from '../../editor';
@@ -8,7 +8,7 @@ import {
     type RecastBlockValue,
     type RecastMetaProperty,
 } from '../../recast-block';
-import { getPendantConfigByType } from '../utils';
+import { checkPendantForm, getPendantConfigByType } from '../utils';
 import {
     StyledPopoverWrapper,
     StyledOperationLabel,
@@ -70,7 +70,7 @@ export const UpdatePendantPanel = ({
                         setFieldName(e.target.value);
                     }}
                     endAdornment={
-                        <Tooltip content="Help info here">
+                        <Tooltip content="Help info here" placement="top">
                             <StyledInputEndAdornment>
                                 <HelpCenterIcon />
                             </StyledInputEndAdornment>
@@ -98,6 +98,17 @@ export const UpdatePendantPanel = ({
                 property={property}
                 type={property.type}
                 onSure={async (type, newPropertyItem, newValue) => {
+                    const checkResult = checkPendantForm(
+                        type,
+                        fieldName,
+                        newPropertyItem,
+                        newValue
+                    );
+
+                    if (!checkResult.passed) {
+                        await message.error(checkResult.message);
+                        return;
+                    }
                     await onUpdateSure({
                         type,
                         newPropertyItem,

libs/components/editor-core/src/block-pendant/pendant-operation-panel/hooks.ts

@@ -23,12 +23,7 @@ import {
     PendantTypes,
     type TempInformationType,
 } from '../types';
-import {
-    checkPendantForm,
-    getOfficialSelected,
-    getPendantConfigByType,
-} from '../utils';
-import { message } from '@toeverything/components/ui';
+import { getOfficialSelected, getPendantConfigByType } from '../utils';
 
 type SelectPropertyType = MultiSelectProperty | SelectProperty;
 type SureParams = {
@@ -56,18 +51,6 @@ export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
         newPropertyItem,
         newValue,
     }: SureParams) => {
-        const checkResult = checkPendantForm(
-            type,
-            fieldName,
-            newPropertyItem,
-            newValue
-        );
-
-        if (!checkResult.passed) {
-            await message.error(checkResult.message);
-            return;
-        }
-
         if (
             type === PendantTypes.MultiSelect ||
             type === PendantTypes.Select ||
@@ -181,18 +164,6 @@ export const useOnUpdateSure = ({
         newPropertyItem,
         newValue,
     }: SureParams) => {
-        const checkResult = checkPendantForm(
-            type,
-            fieldName,
-            newPropertyItem,
-            newValue
-        );
-
-        if (!checkResult.passed) {
-            await message.error(checkResult.message);
-            return;
-        }
-
         if (
             type === PendantTypes.MultiSelect ||
             type === PendantTypes.Select ||

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

@@ -26,6 +26,7 @@ export const PendantPopover: FC<
                     block={block}
                     endElement={
                         <AddPendantPopover
+                            container={popoverProps.container}
                             block={block}
                             onSure={() => {
                                 popoverHandlerRef.current?.setVisible(false);

libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx

@@ -105,6 +105,8 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
                         <AddPendantPopover
                             block={block}
                             iconStyle={{ marginTop: 4 }}
+                            trigger="click"
+                            // trigger={isKanbanView ? 'hover' : 'click'}
                             container={blockRenderContainerRef.current}
                         />
                     </div>