@nocobase/client 0.7.0-alpha.4 → 0.7.0-alpha.56

package/src/schema-component/antd/kanban/index.md

@@ -5,90 +5,8 @@ group:
   path: /schema-components
 ---
 
-# Kanban <Badge>待定</Badge>
-
-## 参数说明
-
-* dataSource 数据源
-* groupField 分组字段，dataSource 以哪个字段作为分组
-* useDataSource，动态数据源
-* useGroupField，动态的分组字段
+# KanbanV2
 
 ## 示例
 
-### 静态数据
-
 <code src="./demos/demo1.tsx" />
-
-```ts
-{
-  'x-component': 'Kanban',
-  'x-component-props': {
-    dataSource: [],
-    groupField: {
-      name: 'status',
-      enum: [
-        { label: '进行中', value: 'running' }
-        { label: '已完成', value: 'done',  }
-      ],
-    },
-  },
-}
-```
-
-### 动态数据
-
-```ts
-{
-  'x-component': 'Kanban',
-  'x-component-props': {
-    useDataSource: (options) => {
-      // 与表格、日历类似
-      return useRequest(() => Promise.resolve({ data: [] }), options);
-    },
-    useGroupField: () => {
-      // 从上下文获取
-      return {
-        name: 'status',
-        enum: [
-          { label: '进行中', value: 'running' }
-          { label: '已完成', value: 'done',  }
-        ],
-      },
-    },
-  },
-}
-```
-
-### 特殊节点
-
-* Kanban. Card 卡片的 schema
-* Kanban. CardViewer 卡片点击打开的详情
-* Kanban. CardAdder 添加卡片的按钮
-
-```ts
-{
-  'x-component': 'Kanban',
-  'x-component-props': {
-    dataSource: [],
-    groupField: {
-      name: 'status',
-      enum: [
-        { label: '进行中', value: 'running' }
-        { label: '已完成', value: 'done',  }
-      ],
-    },
-  },
-  properties: {
-    card: {
-      'x-component': 'Kanban.Card',
-    },
-    viewer: {
-      'x-component': 'Kanban.CardViewer',
-    },
-    adder: {
-      'x-component': 'Kanban.CardAdder',
-    },
-  }
-}
-```

package/src/schema-component/antd/kanban/index.ts

@@ -1 +1,16 @@
-export * from './Kanban';
+import { Action } from '../action';
+import { Kanban } from './Kanban';
+import { KanbanCard } from './Kanban.Card';
+import { KanbanCardDesigner } from './Kanban.Card.Designer';
+import { KanbanCardViewer } from './Kanban.CardViewer';
+import { KanbanDesigner } from './Kanban.Designer';
+
+Kanban.Card = KanbanCard;
+Kanban.CardAdder = Action;
+Kanban.CardViewer = KanbanCardViewer;
+Kanban.Card.Designer = KanbanCardDesigner;
+Kanban.Designer = KanbanDesigner;
+
+const KanbanV2 = Kanban;
+
+export { Kanban, KanbanV2 };

package/src/schema-component/antd/menu/Menu.Designer.tsx

@@ -223,35 +223,43 @@ export const MenuDesigner = () => {
       });
     });
   };
+  const schema = {
+    type: 'object',
+    title: t('Edit menu item'),
+    properties: {
+      title: {
+        title: t('Menu item title'),
+        required: true,
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        'x-component-props': {},
+      },
+      icon: {
+        title: t('Menu item icon'),
+        'x-component': 'IconPicker',
+        'x-decorator': 'FormItem',
+      },
+    },
+  };
+  const initialValues = {
+    title: field.title,
+    icon: field.componentProps.icon,
+  };
+  if (fieldSchema['x-component'] === 'Menu.URL') {
+    schema.properties['href'] = {
+      title: t('Link'),
+      'x-component': 'Input',
+      'x-decorator': 'FormItem',
+    };
+    initialValues['href'] = field.componentProps.href;
+  }
   return (
     <GeneralSchemaDesigner>
       <SchemaSettings.ModalItem
         title={t('Edit')}
-        schema={
-          {
-            type: 'object',
-            title: t('Edit menu item'),
-            properties: {
-              title: {
-                title: t('Menu item title'),
-                required: true,
-                'x-decorator': 'FormItem',
-                'x-component': 'Input',
-                'x-component-props': {},
-              },
-              icon: {
-                title: t('Menu item icon'),
-                'x-component': 'IconPicker',
-                'x-decorator': 'FormItem',
-              },
-            },
-          } as ISchema
-        }
-        initialValues={{
-          title: field.title,
-          icon: field.componentProps.icon,
-        }}
-        onSubmit={({ title, icon }) => {
+        schema={schema as ISchema}
+        initialValues={initialValues}
+        onSubmit={({ title, icon, href }) => {
           const schema = {
             ['x-uid']: fieldSchema['x-uid'],
           };
@@ -262,9 +270,11 @@ export const MenuDesigner = () => {
             refresh();
           }
           field.componentProps.icon = icon;
-          schema['x-component-props'] = { icon };
+          field.componentProps.href = href;
+          schema['x-component-props'] = { icon, href };
           fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
           fieldSchema['x-component-props']['icon'] = icon;
+          fieldSchema['x-component-props']['href'] = href;
           dn.emit('patch', {
             schema,
           });

package/src/schema-component/antd/menu/Menu.tsx

@@ -5,7 +5,7 @@ import {
   Schema,
   SchemaExpressionScopeContext,
   useField,
-  useFieldSchema
+  useFieldSchema,
 } from '@formily/react';
 import { Menu as AntdMenu } from 'antd';
 import React, { createContext, useContext, useEffect, useState } from 'react';
@@ -386,7 +386,17 @@ Menu.URL = observer((props) => {
     >
       <SortableItem className={designerCss}>
         <Icon type={icon} />
-        {field.title}
+        <span
+          className={css`
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            width: 100%;
+            vertical-align: middle;
+          `}
+        >
+          {field.title}
+        </span>
         <Designer />
       </SortableItem>
     </AntdMenu.Item>

package/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx

@@ -7,6 +7,7 @@ import { BlockAssociationContext } from '../../../block-provider';
 import { CollectionProvider, useCollection } from '../../../collection-manager';
 import { RecordProvider } from '../../../record-provider';
 import { FormProvider } from '../../core';
+import { useCompile } from '../../hooks';
 import { ActionContext } from '../action';
 import { useFieldNames } from './useFieldNames';
 
@@ -18,6 +19,7 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
   const { getField } = useCollection();
   const collectionField = getField(fieldSchema.name);
   const [record, setRecord] = useState({});
+  const compile = useCompile();
   return collectionField ? (
     <div>
       <BlockAssociationContext.Provider value={`${collectionField.collectionName}.${collectionField.name}`}>
@@ -34,7 +36,7 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
                       setRecord(record);
                     }}
                   >
-                    {record?.[fieldNames?.label || 'label']}
+                    {compile(record?.[fieldNames?.label || 'label'])}
                   </a>
                 </span>
               );

package/src/schema-component/antd/table/Table.Void.Designer.tsx

@@ -39,7 +39,7 @@ export const TableVoidDesigner = () => {
         onChange={(dragSort) => {
           field.decoratorProps.dragSort = dragSort;
           fieldSchema['x-decorator-props'].dragSort = dragSort;
-          ctx.run({ ...ctx.params?.[0], sort: defaultSort });
+          ctx.run({ ...ctx.params?.[0], sort: 'sort' });
           dn.emit('patch', {
             schema: {
               ['x-uid']: fieldSchema['x-uid'],

package/src/schema-component/antd/table-v2/Table.Column.Designer.tsx

@@ -32,7 +32,7 @@ export const TableColumnDesigner = (props) => {
     fieldSchema?.['x-component-props']?.['fieldNames'] || uiSchema?.['x-component-props']?.['fieldNames'];
   const options = useLabelFields(collectionField?.target);
   return (
-    <GeneralSchemaDesigner>
+    <GeneralSchemaDesigner disableInitializer>
       <SchemaSettings.ModalItem
         title={t('Custom column title')}
         schema={

package/src/schema-component/antd/table-v2/TableBlockDesigner.tsx

@@ -10,7 +10,7 @@ import { useSchemaTemplate } from '../../../schema-templates';
 import { useDesignable } from '../../hooks';
 
 export const TableBlockDesigner = () => {
-  const { name, title } = useCollection();
+  const { name, title, sortable } = useCollection();
   const field = useField();
   const fieldSchema = useFieldSchema();
   const dataSource = useCollectionFilterOptions(name);
@@ -41,7 +41,7 @@ export const TableBlockDesigner = () => {
         onChange={(dragSort) => {
           field.decoratorProps.dragSort = dragSort;
           fieldSchema['x-decorator-props'].dragSort = dragSort;
-          service.run({ ...service.params?.[0], sort: defaultSort });
+          service.run({ ...service.params?.[0], sort: 'sort' });
           dn.emit('patch', {
             schema: {
               ['x-uid']: fieldSchema['x-uid'],

package/src/schema-component/antd/table-v2/TableSelectorDesigner.tsx

@@ -2,7 +2,7 @@ import { ArrayItems } from '@formily/antd';
 import { ISchema, useField, useFieldSchema } from '@formily/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useTableBlockContext } from '../../../block-provider';
+import { useTableSelectorContext } from '../../../block-provider';
 import { useCollection } from '../../../collection-manager';
 import { useCollectionFilterOptions, useSortFields } from '../../../collection-manager/action-hooks';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
@@ -15,7 +15,7 @@ export const TableSelectorDesigner = () => {
   const fieldSchema = useFieldSchema();
   const dataSource = useCollectionFilterOptions(name);
   const sortFields = useSortFields(name);
-  const { service } = useTableBlockContext();
+  const { service } = useTableSelectorContext();
   const { t } = useTranslation();
   const { dn } = useDesignable();
   const defaultFilter = fieldSchema?.['x-decorator-props']?.params?.filter || {};
@@ -34,7 +34,7 @@ export const TableSelectorDesigner = () => {
   const template = useSchemaTemplate();
   const { dragSort } = field.decoratorProps;
   return (
-    <GeneralSchemaDesigner template={template} title={title || name}>
+    <GeneralSchemaDesigner template={template} title={title || name} disableInitializer>
       <SchemaSettings.ModalItem
         title={t('Set the data scope')}
         schema={

package/src/schema-component/antd/tabs/Tabs.Designer.tsx

@@ -10,7 +10,7 @@ export const TabsDesigner = () => {
   const { dn } = useDesignable();
   const { t } = useTranslation();
   return (
-    <GeneralSchemaDesigner>
+    <GeneralSchemaDesigner disableInitializer>
       <SchemaSettings.ModalItem
         title={t('Edit')}
         schema={

package/src/schema-component/common/dnd-context/index.tsx

@@ -57,6 +57,7 @@ const useDragEnd = (props?: any) => {
 };
 
 export const DndContext = observer((props: Props) => {
+  const { t } = useTranslation();
   return (
     <DndKitContext collisionDetection={rectIntersection} {...props} onDragEnd={useDragEnd(props)}>
       <DragOverlay
@@ -65,7 +66,7 @@ export const DndContext = observer((props: Props) => {
           easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
         }}
       >
-        <span style={{ whiteSpace: 'nowrap' }}>拖拽中</span>
+        <span style={{ whiteSpace: 'nowrap' }}>{t('Dragging')}</span>
       </DragOverlay>
       {props.children}
     </DndKitContext>

package/src/schema-initializer/buttons/BlockInitializers.tsx

@@ -9,7 +9,7 @@ export const BlockInitializers = {
     {
       key: 'dataBlocks',
       type: 'itemGroup',
-      title: 'Data blocks',
+      title: '{{t("Data blocks")}}',
       children: [
         {
           key: 'table',

package/src/schema-initializer/buttons/CreateFormBlockInitializers.tsx

@@ -5,11 +5,14 @@ import { gridRowColWrap } from '../utils';
 
 export const CreateFormBlockInitializers = (props: any) => {
   const { t } = useTranslation();
+  const { insertPosition, component } = props;
   return (
     <SchemaInitializer.Button
       wrap={gridRowColWrap}
-      title={t('Add block')}
+      title={component ? null : t('Add block')}
       icon={'PlusOutlined'}
+      insertPosition={insertPosition}
+      component={component}
       items={[
         {
           type: 'itemGroup',

package/src/schema-initializer/buttons/FormItemInitializers.tsx

@@ -6,6 +6,7 @@ import { gridRowColWrap, useFormItemInitializerFields } from '../utils';
 // 表单里配置字段
 export const FormItemInitializers = (props: any) => {
   const { t } = useTranslation();
+  const { insertPosition, component } = props;
   return (
     <SchemaInitializer.Button
       wrap={gridRowColWrap}
@@ -35,8 +36,9 @@ export const FormItemInitializers = (props: any) => {
           },
         },
       ]}
-    >
-      {t('Configure fields')}
-    </SchemaInitializer.Button>
+      insertPosition={insertPosition}
+      component={component}
+      title={component ? null : t('Configure fields')}
+    />
   );
 };

package/src/schema-initializer/buttons/ReadPrettyFormItemInitializers.tsx

@@ -5,6 +5,7 @@ import { gridRowColWrap, useFormItemInitializerFields } from '../utils';
 
 export const ReadPrettyFormItemInitializers = (props: any) => {
   const { t } = useTranslation();
+  const { insertPosition, component } = props;
   return (
     <SchemaInitializer.Button
       wrap={gridRowColWrap}
@@ -34,8 +35,9 @@ export const ReadPrettyFormItemInitializers = (props: any) => {
           },
         },
       ]}
-    >
-      {t('Configure fields')}
-    </SchemaInitializer.Button>
+      insertPosition={insertPosition}
+      component={component}
+      title={component ? null : t('Configure fields')}
+    />
   );
 };

package/src/schema-initializer/buttons/RecordBlockInitializers.tsx

@@ -20,10 +20,13 @@ const useRelationFields = () => {
 
 export const RecordBlockInitializers = (props: any) => {
   const { t } = useTranslation();
+  const { insertPosition, component } = props;
   return (
     <SchemaInitializer.Button
       wrap={gridRowColWrap}
-      title={t('Add block')}
+      insertPosition={insertPosition}
+      component={component}
+      title={component ? null : t('Add block')}
       icon={'PlusOutlined'}
       items={[
         {

package/src/schema-initializer/utils.ts

@@ -91,7 +91,7 @@ export const useFormItemInitializerFields = (options?: any) => {
   const { name, fields } = useCollection();
   const { getInterface } = useCollectionManager();
   const form = useForm();
-  const { readPretty = form.readPretty } = options || {};
+  const { readPretty = form.readPretty, block = 'Form' } = options || {};
   return fields
     ?.filter((field) => field?.interface)
     ?.map((field) => {
@@ -112,7 +112,7 @@ export const useFormItemInitializerFields = (options?: any) => {
         component: 'CollectionFieldInitializer',
         remove: removeGridFormItem,
         schemaInitialize: (s) => {
-          interfaceConfig?.schemaInitialize?.(s, { field, block: 'Form', readPretty });
+          interfaceConfig?.schemaInitialize?.(s, { field, block, readPretty });
         },
         schema,
       } as SchemaInitializerItemOptions;

package/src/schema-settings/GeneralSchemaDesigner.tsx

@@ -1,11 +1,12 @@
-import { DragOutlined, MenuOutlined } from '@ant-design/icons';
+import { DragOutlined, MenuOutlined, PlusOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
 import { useField, useFieldSchema } from '@formily/react';
 import { Space } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { DragHandler, useCompile, useDesignable } from '../schema-component';
+import { DragHandler, useCompile, useDesignable, useGridContext, useGridRowContext } from '../schema-component';
+import { gridRowColWrap } from '../schema-initializer/utils';
 import { SchemaSettings } from './SchemaSettings';
 
 const titleCss = css`
@@ -31,7 +32,7 @@ const titleCss = css`
 `;
 
 export const GeneralSchemaDesigner = (props: any) => {
-  const { title, template, draggable = true } = props;
+  const { disableInitializer, title, template, draggable = true } = props;
   const { dn, designable } = useDesignable();
   const field = useField();
   const { t } = useTranslation();
@@ -45,14 +46,22 @@ export const GeneralSchemaDesigner = (props: any) => {
   if (!designable) {
     return null;
   }
-  const templateName = ['FormItem', 'ReadPrettyFormItem'].includes(template?.componentName)  ? `${template?.name} ${t('(Fields only)')}` : template?.name;
+  const rowCtx = useGridRowContext();
+  const ctx = useGridContext();
+  const templateName = ['FormItem', 'ReadPrettyFormItem'].includes(template?.componentName)
+    ? `${template?.name} ${t('(Fields only)')}`
+    : template?.name;
   return (
     <div className={'general-schema-designer'}>
       {title && (
         <div className={classNames('general-schema-designer-title', titleCss)}>
           <Space size={2}>
             <span className={'title-tag'}>{compile(title)}</span>
-            {template && <span className={'title-tag'}>{t('Reference template')}: {templateName || t('Untitled')}</span>}
+            {template && (
+              <span className={'title-tag'}>
+                {t('Reference template')}: {templateName || t('Untitled')}
+              </span>
+            )}
           </Space>
         </div>
       )}
@@ -63,6 +72,12 @@ export const GeneralSchemaDesigner = (props: any) => {
               <DragOutlined />
             </DragHandler>
           )}
+          {!disableInitializer &&
+            ctx?.renderSchemaInitializer?.({
+              insertPosition: 'afterEnd',
+              wrap: rowCtx?.cols?.length > 1 ? undefined : gridRowColWrap,
+              component: <PlusOutlined style={{ cursor: 'pointer', fontSize: 12 }} />,
+            })}
           <SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />} {...schemaSettingsProps}>
             {props.children}
           </SchemaSettings>

package/src/schema-templates/schemas/uiSchemaTemplates.ts

@@ -1,5 +1,18 @@
 import { ISchema } from '@formily/react';
 import { uid } from '@formily/shared';
+import { useUpdateActionProps } from '../../block-provider/hooks';
+import { useSchemaTemplateManager } from '../SchemaTemplateManagerProvider';
+
+const useUpdateSchemaTemplateActionProps = () => {
+  const props = useUpdateActionProps();
+  const { refresh } = useSchemaTemplateManager();
+  return {
+    async onClick() {
+      await props.onClick();
+      refresh();
+    }
+  }
+}
 
 export const uiSchemaTemplatesSchema: ISchema = {
   type: 'object',
@@ -70,14 +83,14 @@ export const uiSchemaTemplatesSchema: ISchema = {
                     split: '|',
                   },
                   properties: {
-                    view: {
-                      title: '{{ t("View") }}',
-                      'x-action': 'view',
-                      'x-component': 'RecordLink',
-                      'x-component-props': {
-                        to: '/admin/plugins/block-templates/${record.key}',
-                      },
-                    },
+                    // view: {
+                    //   title: '{{ t("View") }}',
+                    //   'x-action': 'view',
+                    //   'x-component': 'RecordLink',
+                    //   'x-component-props': {
+                    //     to: '/admin/plugins/block-templates/${record.key}',
+                    //   },
+                    // },
                     edit: {
                       type: 'void',
                       title: '{{ t("Edit") }}',
@@ -132,13 +145,13 @@ export const uiSchemaTemplatesSchema: ISchema = {
                                       },
                                       properties: {
                                         submit: {
-                                          title: 'Submit',
+                                          title: '{{t("Submit")}}',
                                           'x-action': 'submit',
                                           'x-component': 'Action',
                                           'x-component-props': {
                                             type: 'primary',
                                             htmlType: 'submit',
-                                            useProps: '{{ useUpdateActionProps }}',
+                                            useProps: useUpdateSchemaTemplateActionProps,
                                           },
                                           type: 'void',
                                         },