From 99fdc83daeeaf10ea0817695b51256b94f2a5de3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=91=E6=98=B6?= <jinchang@baicl.com>
Date: Sat, 18 Jun 2022 20:01:30 +0800
Subject: [PATCH] feat: add block title (#513)

---
 packages/core/client/src/locale/zh_CN.ts      |  7 +++
 .../antd/calendar/Calendar.Designer.tsx       |  1 +
 .../antd/form-v2/Form.Designer.tsx            |  3 ++
 .../antd/g2plot/G2PlotDesigner.tsx            |  1 +
 .../antd/kanban/Kanban.Designer.tsx           |  1 +
 .../antd/table-v2/TableBlockDesigner.tsx      |  3 +-
 .../client/src/schema-initializer/utils.ts    |  2 +-
 .../src/schema-settings/SchemaSettings.tsx    | 47 +++++++++++++++++--
 8 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/packages/core/client/src/locale/zh_CN.ts b/packages/core/client/src/locale/zh_CN.ts
index 7260d66cf..5ef35bfc0 100644
--- a/packages/core/client/src/locale/zh_CN.ts
+++ b/packages/core/client/src/locale/zh_CN.ts
@@ -176,6 +176,13 @@ export default {
   "Many to one description": "用于创建多对一关系，比如一个城市只能属于一个国家，一个国家可以有多个城市。作为字段存在时，它是一个下拉选择用于选择目标数据表的数据。创建后，会在目标数据表里自动生成一个多对一字段。",
   "Many to many description": "用于创建多对多关系，比如一个学生会有多个老师，一个老师也会有多个学生。作为字段存在时，它是一个下拉选择用于选择目标数据表的数据。",
   "Generated automatically if left blank": "留空时，自动生成中间表",
+  "References fields of associated table": "引用关联表的字段",
+  "Toggles the subfield mode": "切换子字段模式",
+  "Selector mode": "选择器模式",
+  "Subtable mode": "子表格模式",
+  "Subform mode": "子表单模式",
+  "Edit block title": "编辑区块标题",
+  "Block title": "区块标题",
   "Add filter": "添加筛选条件",
   "Add filter group": "添加筛选分组",
   "is": "等于",
diff --git a/packages/core/client/src/schema-component/antd/calendar/Calendar.Designer.tsx b/packages/core/client/src/schema-component/antd/calendar/Calendar.Designer.tsx
index 19cffdf99..4d3d5c74d 100644
--- a/packages/core/client/src/schema-component/antd/calendar/Calendar.Designer.tsx
+++ b/packages/core/client/src/schema-component/antd/calendar/Calendar.Designer.tsx
@@ -36,6 +36,7 @@ export const CalendarDesigner = () => {
   const defaultResource = fieldSchema?.['x-decorator-props']?.resource;
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
+      <SchemaSettings.BlockTitleItem />
       <SchemaSettings.SelectItem
         title={t('Title field')}
         value={fieldNames.title}
diff --git a/packages/core/client/src/schema-component/antd/form-v2/Form.Designer.tsx b/packages/core/client/src/schema-component/antd/form-v2/Form.Designer.tsx
index e4b173fb5..8ee7b4f0b 100644
--- a/packages/core/client/src/schema-component/antd/form-v2/Form.Designer.tsx
+++ b/packages/core/client/src/schema-component/antd/form-v2/Form.Designer.tsx
@@ -24,6 +24,7 @@ export const FormDesigner = () => {
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
       {/* <SchemaSettings.Template componentName={'FormItem'} collectionName={name} /> */}
+      <SchemaSettings.BlockTitleItem />
       <SchemaSettings.FormItemTemplate componentName={'FormItem'} collectionName={name} resourceName={defaultResource} />
       <SchemaSettings.Divider />
       <SchemaSettings.Remove
@@ -44,6 +45,7 @@ export const ReadPrettyFormDesigner = () => {
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
       {/* <SchemaSettings.Template componentName={'ReadPrettyForm'} collectionName={name} /> */}
+      <SchemaSettings.BlockTitleItem />
       <SchemaSettings.FormItemTemplate
         insertAdjacentPosition={'beforeEnd'}
         componentName={'ReadPrettyFormItem'}
@@ -87,6 +89,7 @@ export const DetailsDesigner = () => {
   });
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
+      <SchemaSettings.BlockTitleItem />
       <SchemaSettings.ModalItem
         title={t('Set the data scope')}
         schema={
diff --git a/packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx b/packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx
index ba5b9b4d6..7e582236c 100644
--- a/packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx
+++ b/packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx
@@ -31,6 +31,7 @@ export const G2PlotDesigner = () => {
   const compile = useCompile();
   return (
     <GeneralSchemaDesigner>
+      <SchemaSettings.BlockTitleItem />
       <SchemaSettings.ModalItem
         title={t('Edit chart')}
         schema={
diff --git a/packages/core/client/src/schema-component/antd/kanban/Kanban.Designer.tsx b/packages/core/client/src/schema-component/antd/kanban/Kanban.Designer.tsx
index 5fc5a82d4..2a5f2291c 100644
--- a/packages/core/client/src/schema-component/antd/kanban/Kanban.Designer.tsx
+++ b/packages/core/client/src/schema-component/antd/kanban/Kanban.Designer.tsx
@@ -21,6 +21,7 @@ export const KanbanDesigner = () => {
   const template = useSchemaTemplate();
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
+      <SchemaSettings.BlockTitleItem />
       <SchemaSettings.ModalItem
         title={t('Set the data scope')}
         schema={
diff --git a/packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx b/packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx
index 1bd962039..705adac2c 100644
--- a/packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx
@@ -17,7 +17,7 @@ export const TableBlockDesigner = () => {
   const sortFields = useSortFields(name);
   const { service } = useTableBlockContext();
   const { t } = useTranslation();
-  const { dn } = useDesignable();
+  const { dn, refresh } = useDesignable();
   const defaultFilter = fieldSchema?.['x-decorator-props']?.params?.filter || {};
   const defaultSort = fieldSchema?.['x-decorator-props']?.params?.sort || [];
   const defaultResource = fieldSchema?.['x-decorator-props']?.resource;
@@ -36,6 +36,7 @@ export const TableBlockDesigner = () => {
   const { dragSort } = field.decoratorProps;
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
+      <SchemaSettings.BlockTitleItem />
       <SchemaSettings.SwitchItem
         title={t('Enable drag and drop sorting')}
         checked={field.decoratorProps.dragSort}
diff --git a/packages/core/client/src/schema-initializer/utils.ts b/packages/core/client/src/schema-initializer/utils.ts
index d7e827633..2c955c694 100644
--- a/packages/core/client/src/schema-initializer/utils.ts
+++ b/packages/core/client/src/schema-initializer/utils.ts
@@ -1,7 +1,7 @@
 import { ISchema, Schema, useFieldSchema, useForm } from '@formily/react';
 import { uid } from '@formily/shared';
 import { useTranslation } from 'react-i18next';
-import { SchemaInitializerItemOptions } from '../';
+import { SchemaInitializerItemOptions, useTableBlockContext } from '../';
 import { useCollection, useCollectionManager } from '../collection-manager';
 import { useDesignable } from '../schema-component';
 import { useSchemaTemplateManager } from '../schema-templates';
diff --git a/packages/core/client/src/schema-settings/SchemaSettings.tsx b/packages/core/client/src/schema-settings/SchemaSettings.tsx
index c5d734763..334134ba3 100644
--- a/packages/core/client/src/schema-settings/SchemaSettings.tsx
+++ b/packages/core/client/src/schema-settings/SchemaSettings.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { FormDialog, FormItem, FormLayout, Input } from '@formily/antd';
 import { createForm, GeneralField } from '@formily/core';
-import { ISchema, Schema, SchemaOptionsContext, useFieldSchema } from '@formily/react';
+import { ISchema, Schema, SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
 import { uid } from '@formily/shared';
 import { Alert, Button, Dropdown, Menu, MenuItemProps, Modal, Select, Space, Switch } from 'antd';
 import classNames from 'classnames';
@@ -21,6 +21,7 @@ import {
   useAPIClient,
   useCollection,
   useCompile,
+  useDesignable,
 } from '..';
 import { useSchemaTemplateManager } from '../schema-templates';
 import { useBlockTemplateContext } from '../schema-templates/BlockTemplate';
@@ -234,7 +235,6 @@ const findBlockTemplateSchema = (fieldSchema) => {
 
 SchemaSettings.FormItemTemplate = (props) => {
   const { insertAdjacentPosition = 'afterBegin', componentName, collectionName, resourceName } = props;
-  console.log('SchemaSettings.Template', props);
   const { t } = useTranslation();
   const { dn, setVisible, template, fieldSchema } = useSchemaSettings();
   const api = useAPIClient();
@@ -284,7 +284,6 @@ SchemaSettings.FormItemTemplate = (props) => {
       onClick={async () => {
         setVisible(false);
         const gridSchema = findGridSchema(fieldSchema);
-        console.log('gridSchema', gridSchema);
         const values = await FormDialog(t('Save as template'), () => {
           return (
             <FormLayout layout={'vertical'}>
@@ -586,3 +585,45 @@ SchemaSettings.ModalItem = (props) => {
     </SchemaSettings.Item>
   );
 };
+
+SchemaSettings.BlockTitleItem = () => {
+  const field = useField();
+  const fieldSchema = useFieldSchema();
+  const { dn } = useDesignable();
+  const { t } = useTranslation();
+
+  return (
+    <SchemaSettings.ModalItem
+      title={t('Edit block title')}
+      schema={
+        {
+          type: 'object',
+          title: t('Edit block title'),
+          properties: {
+            title: {
+              title: t('Block title'),
+              type: 'string',
+              default: fieldSchema?.['x-component-props']?.['title'],
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+            },
+          },
+        } as ISchema
+      }
+      onSubmit={({ title }) => {
+        const componentProps = fieldSchema['x-component-props'] || {};
+        componentProps.title = title;
+        fieldSchema['x-component-props'] = componentProps;
+        field.componentProps.title = title;
+        dn.emit('patch', {
+          schema: {
+            ['x-uid']: fieldSchema['x-uid'],
+            'x-component-props': fieldSchema['x-component-props'],
+          },
+        });
+        dn.refresh();
+      }}
+    />
+  )
+  
+}