From 76fa003189cedbacdac6d962e0a8b254330c7b38 Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Thu, 11 Aug 2022 21:27:57 +0800
Subject: [PATCH] feat: update help info of pendant field title

---
 .../src/block-pendant/PendantTag.tsx          |  7 +-----
 .../CreatePendantPanel.tsx                    | 21 +++-------------
 .../FieldTitleInput.tsx                       | 24 +++++++++++++++++++
 .../UpdatePendantPanel.tsx                    | 16 +++----------
 4 files changed, 31 insertions(+), 37 deletions(-)
 create mode 100644 libs/components/editor-core/src/block-pendant/pendant-operation-panel/FieldTitleInput.tsx

diff --git a/libs/components/editor-core/src/block-pendant/PendantTag.tsx b/libs/components/editor-core/src/block-pendant/PendantTag.tsx
index 52d5bfc14d..4c2f788a60 100644
--- a/libs/components/editor-core/src/block-pendant/PendantTag.tsx
+++ b/libs/components/editor-core/src/block-pendant/PendantTag.tsx
@@ -1,9 +1,4 @@
-import React, {
-    FC,
-    FunctionComponent,
-    PropsWithChildren,
-    CSSProperties,
-} from 'react';
+import React from 'react';
 import { Tag, type TagProps } from '@toeverything/components/ui';
 import {
     DateValue,
diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
index 6135d2b3c6..42e36e063f 100644
--- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
+++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
@@ -1,12 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import {
-    Input,
-    message,
-    Option,
-    Select,
-    Tooltip,
-} from '@toeverything/components/ui';
-import { HelpCenterIcon } from '@toeverything/components/icons';
+import { message, Option, Select } from '@toeverything/components/ui';
 import { AsyncBlock } from '../../editor';
 
 import { IconMap, pendantOptions } from '../config';
@@ -14,7 +7,6 @@ import { PendantOptions } from '../types';
 import { PendantModifyPanel } from '../pendant-modify-panel';
 import {
     StyledDivider,
-    StyledInputEndAdornment,
     StyledOperationLabel,
     StyledOperationTitle,
     StyledPopoverSubTitle,
@@ -26,6 +18,7 @@ import {
     getPendantConfigByType,
     checkPendantForm,
 } from '../utils';
+import { FieldTitleInput } from './FieldTitleInput';
 import { useOnCreateSure } from './hooks';
 
 export const CreatePendantPanel = ({
@@ -74,19 +67,11 @@ export const CreatePendantPanel = ({
                 })}
             </Select>
             <StyledOperationLabel>Field Title</StyledOperationLabel>
-            <Input
+            <FieldTitleInput
                 value={fieldName}
-                placeholder="Input your field name here"
                 onChange={e => {
                     setFieldName(e.target.value);
                 }}
-                endAdornment={
-                    <Tooltip content="Help info here" placement="top">
-                        <StyledInputEndAdornment>
-                            <HelpCenterIcon />
-                        </StyledInputEndAdornment>
-                    </Tooltip>
-                }
             />
             {selectedOption ? (
                 <>
diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/FieldTitleInput.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/FieldTitleInput.tsx
new file mode 100644
index 0000000000..6a11bf20d1
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/FieldTitleInput.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Input, Tooltip, InputProps } from '@toeverything/components/ui';
+import { StyledInputEndAdornment } from '../StyledComponent';
+import { HelpCenterIcon } from '@toeverything/components/icons';
+
+export const FieldTitleInput = (props: InputProps) => {
+    return (
+        <Input
+            placeholder="Input your field name here"
+            endAdornment={
+                <Tooltip
+                    offset={[15, -5]}
+                    content="Name your tag of the current series"
+                    placement="top"
+                >
+                    <StyledInputEndAdornment>
+                        <HelpCenterIcon />
+                    </StyledInputEndAdornment>
+                </Tooltip>
+            }
+            {...props}
+        />
+    );
+};
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 2ff5515bab..5b968d33b8 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,6 +1,5 @@
 import { useState } from 'react';
-import { Input, message, Tooltip } from '@toeverything/components/ui';
-import { HelpCenterIcon } from '@toeverything/components/icons';
+import { message } from '@toeverything/components/ui';
 import { PendantModifyPanel } from '../pendant-modify-panel';
 import type { AsyncBlock } from '../../editor';
 import {
@@ -12,13 +11,12 @@ import { checkPendantForm, getPendantConfigByType } from '../utils';
 import {
     StyledPopoverWrapper,
     StyledOperationLabel,
-    StyledInputEndAdornment,
     StyledDivider,
     StyledPopoverContent,
     StyledPopoverSubTitle,
 } from '../StyledComponent';
 import { IconMap, pendantOptions } from '../config';
-
+import { FieldTitleInput } from './FieldTitleInput';
 import { useOnUpdateSure } from './hooks';
 
 type Props = {
@@ -63,19 +61,11 @@ export const UpdatePendantPanel = ({
             </StyledPopoverContent>
             <StyledOperationLabel>Field Title</StyledOperationLabel>
             {titleEditable ? (
-                <Input
+                <FieldTitleInput
                     value={fieldName}
-                    placeholder="Input your field name here"
                     onChange={e => {
                         setFieldName(e.target.value);
                     }}
-                    endAdornment={
-                        <Tooltip content="Help info here" placement="top">
-                            <StyledInputEndAdornment>
-                                <HelpCenterIcon />
-                            </StyledInputEndAdornment>
-                        </Tooltip>
-                    }
                 />
             ) : (
                 <StyledPopoverContent>{property.name}</StyledPopoverContent>