From c6cad6a911e17b9dc087bb32302c8626bf90f1a9 Mon Sep 17 00:00:00 2001
From: qishaoxuan <qishaoxuan777@gmail.com>
Date: Tue, 26 Jul 2022 18:18:11 +0800
Subject: [PATCH] feat: support editing title when editing tag, resolved #538

---
 .../PendantHistoryPanel.tsx                   |  1 +
 .../UpdatePendantPanel.tsx                    | 33 ++++++-
 .../pendant-render/PandentRender.tsx          | 95 ++++++++-----------
 3 files changed, 70 insertions(+), 59 deletions(-)

diff --git a/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx
index 263ae1560d..3ed9a0e244 100644
--- a/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx
+++ b/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx
@@ -69,6 +69,7 @@ export const PendantHistoryPanel = ({
                                             item.id
                                         ].setVisible(false);
                                     }}
+                                    titleEditable={false}
                                 />
                             )
                         }
diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx
index 4d4edcea73..02b22e9f7e 100644
--- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx
+++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { PendantModifyPanel } from '../pendant-modify-panel';
 import type { AsyncBlock } from '../../editor';
 import {
@@ -29,6 +29,8 @@ import {
     StyledPopoverSubTitle,
 } from '../StyledComponent';
 import { IconMap, pendantOptions } from '../config';
+import { Input, Tooltip } from '@toeverything/components/ui';
+import { HelpCenterIcon } from '@toeverything/components/icons';
 
 type SelectPropertyType = MultiSelectProperty | SelectProperty;
 
@@ -39,6 +41,7 @@ type Props = {
     hasDelete?: boolean;
     onSure?: () => void;
     onCancel?: () => void;
+    titleEditable?: boolean;
 };
 
 export const UpdatePendantPanel = ({
@@ -48,6 +51,7 @@ export const UpdatePendantPanel = ({
     hasDelete = false,
     onSure,
     onCancel,
+    titleEditable = false,
 }: Props) => {
     const { updateSelect } = useSelectProperty();
     const { setPendant, removePendant } = usePendant(block);
@@ -55,6 +59,7 @@ export const UpdatePendantPanel = ({
     const iconConfig = getPendantConfigByType(property.type);
     const Icon = IconMap[iconConfig.iconName];
     const { updateProperty } = useRecastBlockMeta();
+    const [fieldTitle, setFieldTitle] = useState(property.name);
 
     return (
         <StyledPopoverWrapper>
@@ -70,7 +75,25 @@ export const UpdatePendantPanel = ({
                 {property.type}
             </StyledPopoverContent>
             <StyledOperationLabel>Field Title</StyledOperationLabel>
-            <StyledPopoverContent>{property.name}</StyledPopoverContent>
+            {titleEditable ? (
+                <Input
+                    value={fieldTitle}
+                    placeholder="Input your field name here"
+                    onChange={e => {
+                        setFieldTitle(e.target.value);
+                    }}
+                    endAdornment={
+                        <Tooltip content="Help info here">
+                            <StyledInputEndAdornment>
+                                <HelpCenterIcon />
+                            </StyledInputEndAdornment>
+                        </Tooltip>
+                    }
+                />
+            ) : (
+                <StyledPopoverContent>{property.name}</StyledPopoverContent>
+            )}
+
             <StyledDivider />
             {pendantOption.subTitle && (
                 <StyledPopoverSubTitle>
@@ -190,6 +213,12 @@ export const UpdatePendantPanel = ({
                         await setPendant(property, newValue);
                     }
 
+                    if (fieldTitle !== property.name) {
+                        await updateProperty({
+                            ...property,
+                            name: fieldTitle,
+                        });
+                    }
                     onSure?.();
                 }}
                 onDelete={
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 5f391b9f45..b60b1ea872 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,5 +1,5 @@
-import React, {useRef, useState} from 'react';
-import {AsyncBlock} from '../../editor';
+import React, { useRef, useState } from 'react';
+import { AsyncBlock } from '../../editor';
 import {
     getRecastItemValue,
     RecastBlockValue,
@@ -12,38 +12,22 @@ import {
     PopperHandler,
     styled,
 } from '@toeverything/components/ui';
-import {PendantTag} from '../PendantTag';
-import {
-    UpdatePendantPanel
-} from '../pendant-operation-panel';
-import {AddPendantPopover} from '../AddPendantPopover';
+import { PendantTag } from '../PendantTag';
+import { UpdatePendantPanel } from '../pendant-operation-panel';
+import { AddPendantPopover } from '../AddPendantPopover';
 
-export const PendantRender = ({block}: { block: AsyncBlock }) => {
-    const [propertyWithValue, setPropertyWithValue] = useState<{
-        value: RecastBlockValue;
-        property: RecastMetaProperty;
-    }>();
+export const PendantRender = ({ block }: { block: AsyncBlock }) => {
     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();
 
-    const propertyWithValues = properties
-        .map(property => {
-            return {
-                value: getValue(property.id),
-                property,
-            };
-        })
-        .filter(v => v.value);
+    const hasAddBtn = properties.some(property => getValue(property.id));
 
     return (
         <BlockPendantContainer
@@ -55,13 +39,14 @@ export const PendantRender = ({block}: { block: AsyncBlock }) => {
                 setShowAddBtn(false);
             }}
         >
-            {propertyWithValues.map(pWithV => {
-                const {id, type} = pWithV.value;
+            {properties.map(property => {
+                const value = getValue(property.id);
 
-                /* （暂时关闭，HOOK中需要加入Scene的判断）Remove duplicate label(tag) */
-                // if (groupBy?.id === id) {
-                //     return null;
-                // }
+                if (!value) {
+                    return null;
+                }
+
+                const { id } = value;
 
                 return (
                     <Popover
@@ -73,24 +58,23 @@ export const PendantRender = ({block}: { block: AsyncBlock }) => {
                         trigger="click"
                         placement="bottom-start"
                         content={
-                            propertyWithValue && (
-                                <UpdatePendantPanel
-                                    block={block}
-                                    value={propertyWithValue.value}
-                                    property={propertyWithValue.property}
-                                    hasDelete={false}
-                                    onSure={() => {
-                                        popoverHandlerRef.current[
-                                            id
-                                        ].setVisible(false);
-                                    }}
-                                    onCancel={() => {
-                                        popoverHandlerRef.current[
-                                            id
-                                        ].setVisible(false);
-                                    }}
-                                />
-                            )
+                            <UpdatePendantPanel
+                                block={block}
+                                value={value}
+                                property={property}
+                                hasDelete={false}
+                                onSure={() => {
+                                    popoverHandlerRef.current[id].setVisible(
+                                        false
+                                    );
+                                }}
+                                onCancel={() => {
+                                    popoverHandlerRef.current[id].setVisible(
+                                        false
+                                    );
+                                }}
+                                titleEditable={true}
+                            />
                         }
                     >
                         <PendantTag
@@ -99,25 +83,22 @@ export const PendantRender = ({block}: { block: AsyncBlock }) => {
                                 marginRight: 10,
                                 marginTop: 4,
                             }}
-                            onClick={e => {
-                                setPropertyWithValue(pWithV);
-                            }}
-                            value={pWithV.value}
-                            property={pWithV.property}
+                            value={value}
+                            property={property}
                             closeable
                             onClose={async () => {
-                                await removeValue(pWithV.property.id);
+                                await removeValue(property.id);
                             }}
                         />
                     </Popover>
                 );
             })}
-            {propertyWithValues.length ? (
+            {hasAddBtn ? (
                 <MuiZoom in={showAddBtn}>
                     <div>
                         <AddPendantPopover
                             block={block}
-                            iconStyle={{marginTop: 4}}
+                            iconStyle={{ marginTop: 4 }}
                             container={blockRenderContainerRef.current}
                         />
                     </div>