refactor(client): split schema-initializer items into multiple files (#744)

packages/core/client/src/schema-initializer/items/ActionInitializer.tsx

+import React from 'react';
+
+import { InitializerWithSwitch } from './InitializerWithSwitch';
+
+export const ActionInitializer = (props) => {
+  return <InitializerWithSwitch {...props} type={'x-action'} />;
+};

packages/core/client/src/schema-initializer/items/BlockInitializer.tsx

+import React from 'react';
+
+import { SchemaInitializer } from "..";
+
+// Block
+export const BlockInitializer = (props) => {
+  const { item, insert } = props;
+  return (
+    <SchemaInitializer.Item
+      onClick={() => {
+        insert({
+          ...item.schema,
+        });
+      }}
+    />
+  );
+};

packages/core/client/src/schema-initializer/items/BulkDestroyActionInitializer.tsx

+import React from "react";
+
+import { ActionInitializer } from "./ActionInitializer";
+
+export const BulkDestroyActionInitializer = (props) => {
+    const schema = {
+      title: '{{ t("Delete") }}',
+      'x-action': 'destroy',
+      'x-component': 'Action',
+      'x-designer': 'Action.Designer',
+      'x-component-props': {
+        icon: 'DeleteOutlined',
+        confirm: {
+          title: "{{t('Delete record')}}",
+          content: "{{t('Are you sure you want to delete it?')}}",
+        },
+        useProps: '{{ useBulkDestroyActionProps }}',
+      },
+    };
+    return <ActionInitializer {...props} schema={schema} />;
+  };

packages/core/client/src/schema-initializer/items/CalendarBlockInitializer.tsx

+import React, { useContext } from "react";
+import { FormDialog, FormLayout } from "@formily/antd";
+import { FormOutlined } from '@ant-design/icons';
+import { SchemaOptionsContext } from "@formily/react";
+import { useTranslation } from "react-i18next";
+
+import { useCollectionManager } from "../../collection-manager";
+import { SchemaComponent, SchemaComponentOptions } from "../../schema-component";
+import { createCalendarBlockSchema } from "../utils";
+import { DataBlockInitializer } from "./DataBlockInitializer";
+
+export const CalendarBlockInitializer = (props) => {
+  const { insert } = props;
+  const { t } = useTranslation();
+  const { getCollection } = useCollectionManager();
+  const options = useContext(SchemaOptionsContext);
+  return (
+    <DataBlockInitializer
+      {...props}
+      componentType={'Calendar'}
+      icon={<FormOutlined />}
+      onCreateBlockSchema={async ({ item }) => {
+        const collection = getCollection(item.name);
+        const stringFields = collection?.fields
+          ?.filter((field) => field.type === 'string')
+          ?.map((field) => {
+            return {
+              label: field?.uiSchema?.title,
+              value: field.name,
+            };
+          });
+        const dateFields = collection?.fields
+          ?.filter((field) => field.type === 'date')
+          ?.map((field) => {
+            return {
+              label: field?.uiSchema?.title,
+              value: field.name,
+            };
+          });
+        const values = await FormDialog(t('Create calendar block'), () => {
+          return (
+            <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
+              <FormLayout layout={'vertical'}>
+                <SchemaComponent
+                  schema={{
+                    properties: {
+                      title: {
+                        title: t('Title field'),
+                        enum: stringFields,
+                        required: true,
+                        'x-component': 'Select',
+                        'x-decorator': 'FormItem',
+                      },
+                      start: {
+                        title: t('Start date field'),
+                        enum: dateFields,
+                        required: true,
+                        default: 'createdAt',
+                        'x-component': 'Select',
+                        'x-decorator': 'FormItem',
+                      },
+                      end: {
+                        title: t('End date field'),
+                        enum: dateFields,
+                        'x-component': 'Select',
+                        'x-decorator': 'FormItem',
+                      },
+                    },
+                  }}
+                />
+              </FormLayout>
+            </SchemaComponentOptions>
+          );
+        }).open({
+          initialValues: {},
+        });
+        insert(
+          createCalendarBlockSchema({
+            collection: item.name,
+            fieldNames: {
+              ...values,
+            },
+          }),
+        );
+      }}
+    />
+  );
+};

packages/core/client/src/schema-initializer/items/CollectionFieldInitializer.tsx

+import React from "react";
+import { ISchema } from "@formily/react";
+
+import { InitializerWithSwitch } from "./InitializerWithSwitch";
+
+export const CollectionFieldInitializer = (props) => {
+    const schema: ISchema = {};
+    return <InitializerWithSwitch {...props} schema={schema} type={'x-collection-field'} />;
+  };

packages/core/client/src/schema-initializer/items/CreateActionInitializer.tsx

+import React from "react";
+import { ActionInitializer } from "./ActionInitializer";
+
+export const CreateActionInitializer = (props) => {
+    const schema = {
+      type: 'void',
+      title: '{{ t("Add new") }}',
+      'x-action': 'create',
+      'x-designer': 'Action.Designer',
+      'x-component': 'Action',
+      'x-component-props': {
+        icon: 'PlusOutlined',
+        openMode: 'drawer',
+        type: 'primary',
+      },
+      properties: {
+        drawer: {
+          type: 'void',
+          title: '{{ t("Add record") }}',
+          'x-component': 'Action.Container',
+          'x-component-props': {
+            className: 'nb-action-popup',
+          },
+          properties: {
+            tabs: {
+              type: 'void',
+              'x-component': 'Tabs',
+              'x-component-props': {},
+              'x-initializer': 'TabPaneInitializers',
+              properties: {
+                tab1: {
+                  type: 'void',
+                  title: '{{t("Add new")}}',
+                  'x-component': 'Tabs.TabPane',
+                  'x-designer': 'Tabs.Designer',
+                  'x-component-props': {},
+                  properties: {
+                    grid: {
+                      type: 'void',
+                      'x-component': 'Grid',
+                      'x-initializer': 'CreateFormBlockInitializers',
+                      properties: {},
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    };
+    return <ActionInitializer {...props} schema={schema} />;
+  };

packages/core/client/src/schema-initializer/items/CreateFormBlockInitializer.tsx

+import React from "react";
+import { FormOutlined } from '@ant-design/icons';
+
+import { useBlockAssociationContext } from "../../block-provider";
+import { useCollection } from "../../collection-manager";
+import { useSchemaTemplateManager } from "../../schema-templates";
+import { SchemaInitializer } from "../SchemaInitializer";
+import { createFormBlockSchema, useRecordCollectionDataSourceItems } from "../utils";
+
+export const CreateFormBlockInitializer = (props) => {
+    const { onCreateBlockSchema, componentType, createBlockSchema, insert, ...others } = props;
+    const { getTemplateSchemaByMode } = useSchemaTemplateManager();
+    const association = useBlockAssociationContext();
+    const collection = useCollection();
+    return (
+      <SchemaInitializer.Item
+        icon={<FormOutlined />}
+        {...others}
+        onClick={async ({ item }) => {
+          if (item.template) {
+            const s = await getTemplateSchemaByMode(item);
+            if (item.template.componentName === 'FormItem') {
+              const blockSchema = createFormBlockSchema({
+                actionInitializers: 'CreateFormActionInitializers',
+                association,
+                collection: collection.name,
+                template: s,
+              });
+              if (item.mode === 'reference') {
+                blockSchema['x-template-key'] = item.template.key;
+              }
+              insert(blockSchema);
+            } else {
+              insert(s);
+            }
+          } else {
+            insert(
+              createFormBlockSchema({
+                actionInitializers: 'CreateFormActionInitializers',
+                association,
+                collection: collection.name,
+              }),
+            );
+          }
+        }}
+        items={useRecordCollectionDataSourceItems('FormItem')}
+      />
+    );
+  };

packages/core/client/src/schema-initializer/items/CreateSubmitActionInitializer.tsx

+import React from "react";
+
+import { ActionInitializer } from "./ActionInitializer";
+
+export const CreateSubmitActionInitializer = (props) => {
+    const schema = {
+      title: '{{ t("Submit") }}',
+      'x-action': 'submit',
+      'x-component': 'Action',
+      'x-designer': 'Action.Designer',
+      'x-component-props': {
+        type: 'primary',
+        htmlType: 'submit',
+        useProps: '{{ useCreateActionProps }}',
+      },
+    };
+    return <ActionInitializer {...props} schema={schema} />;
+  };

packages/core/client/src/schema-initializer/items/CustomizeActionInitializer.tsx

+import React from 'react';
+
+import { BlockInitializer } from '.';
+
+export const CustomizeActionInitializer = (props) => {
+  return <BlockInitializer {...props} />;
+};

packages/core/client/src/schema-initializer/items/DataBlockInitializer.tsx

+import React from "react";
+import { TableOutlined } from '@ant-design/icons';
+
+import { SchemaInitializer } from "..";
+import { useSchemaTemplateManager } from "../../schema-templates";
+import { useCollectionDataSourceItems } from "../utils";
+
+export const DataBlockInitializer = (props) => {
+  const { templateWrap, onCreateBlockSchema, componentType, createBlockSchema, insert, ...others } = props;
+  const { getTemplateSchemaByMode } = useSchemaTemplateManager();
+  return (
+    <SchemaInitializer.Item
+      icon={<TableOutlined />}
+      {...others}
+      onClick={async ({ item }) => {
+        if (item.template) {
+          const s = await getTemplateSchemaByMode(item);
+          templateWrap ? insert(templateWrap(s, { item })) : insert(s);
+        } else {
+          if (onCreateBlockSchema) {
+            onCreateBlockSchema({ item });
+          } else if (createBlockSchema) {
+            insert(createBlockSchema({ collection: item.name }));
+          }
+        }
+      }}
+      items={useCollectionDataSourceItems(componentType)}
+    />
+  );
+};

packages/core/client/src/schema-initializer/items/DestroyActionInitializer.tsx

+import React from "react";
+
+import { ActionInitializer } from "./ActionInitializer";
+
+export const DestroyActionInitializer = (props) => {
+    const schema = {
+      title: '{{ t("Delete") }}',
+      'x-action': 'destroy',
+      'x-component': 'Action',
+      'x-designer': 'Action.Designer',
+      'x-component-props': {
+        icon: 'DeleteOutlined',
+        confirm: {
+          title: "{{t('Delete record')}}",
+          content: "{{t('Are you sure you want to delete it?')}}",
+        },
+        useProps: '{{ useDestroyActionProps }}',
+      },
+    };
+    return <ActionInitializer {...props} schema={schema} />;
+  };

packages/core/client/src/schema-initializer/items/DetailsBlockInitializer.tsx

+import React from "react";
+import { TableOutlined } from '@ant-design/icons';
+
+import { useCollectionManager } from "../../collection-manager";
+import { createDetailsBlockSchema } from "../utils";
+import { DataBlockInitializer } from "./DataBlockInitializer";
+
+export const DetailsBlockInitializer = (props) => {
+  const { insert } = props;
+  const { getCollection } = useCollectionManager();
+  return (
+    <DataBlockInitializer
+      {...props}
+      icon={<TableOutlined />}
+      componentType={'Details'}
+      onCreateBlockSchema={async ({ item }) => {
+        const collection = getCollection(item.name);
+        const schema = createDetailsBlockSchema({ collection: item.name, rowKey: collection.filterTargetKey || 'id' });
+        insert(schema);
+      }}
+    />
+  );
+};

packages/core/client/src/schema-initializer/items/FilterActionInitializer.tsx

+import React from "react";
+
+import { ActionInitializer } from "./ActionInitializer";
+
+export const FilterActionInitializer = (props) => {
+    const schema = {
+      type: 'void',
+      title: '{{ t("Filter") }}',
+      'x-action': 'filter',
+      'x-designer': 'Filter.Action.Designer',
+      'x-component': 'Filter.Action',
+      'x-component-props': {
+        icon: 'FilterOutlined',
+        useProps: '{{ useFilterActionProps }}',
+      },
+    };
+    return <ActionInitializer {...props} schema={schema} />;
+  };

packages/core/client/src/schema-initializer/items/FormBlockInitializer.tsx

+import React from "react";
+import { FormOutlined } from '@ant-design/icons';
+import { createFormBlockSchema } from "../utils";
+import { DataBlockInitializer } from "./DataBlockInitializer";
+
+export const FormBlockInitializer = (props) => {
+  return (
+    <DataBlockInitializer
+      {...props}
+      icon={<FormOutlined />}
+      componentType={'FormItem'}
+      templateWrap={(templateSchema, { item }) => {
+        const s = createFormBlockSchema({
+          template: templateSchema,
+          collection: item.name,
+        });
+        if (item.template && item.mode === 'reference') {
+          s['x-template-key'] = item.template.key;
+        }
+        return s;
+      }}
+      createBlockSchema={createFormBlockSchema}
+    />
+  );
+};

packages/core/client/src/schema-initializer/items/G2PlotInitializer.tsx

+import React from 'react';
+
+import { SchemaInitializer } from "..";
+
+export const G2PlotInitializer = (props) => {
+  const { item, insert, ...others } = props;
+  return (
+    <SchemaInitializer.Item
+      {...others}
+      onClick={() => {
+        insert({
+          ...item.schema,
+        });
+      }}
+    />
+  );
+};

packages/core/client/src/schema-initializer/items/InitializerWithSwitch.tsx

+import React from 'react';
+import { merge } from '@formily/shared';
+
+import { SchemaInitializer } from "..";
+import { useCurrentSchema } from '../utils';
+
+export const InitializerWithSwitch = (props) => {
+  const { type, schema, item, insert } = props;
+  const { exists, remove } = useCurrentSchema(schema?.[type] || item?.schema?.[type], type, item.find, item.remove);
+  return (
+    <SchemaInitializer.SwitchItem
+      checked={exists}
+      title={item.title}
+      onClick={() => {
+        if (exists) {
+          return remove();
+        }
+        const s = merge(schema || {}, item.schema || {});
+        item?.schemaInitialize?.(s);
+        insert(s);
+      }}
+    />
+  );
+};

packages/core/client/src/schema-initializer/items/KanbanBlockInitializer.tsx

+import React, { useContext } from "react";
+import { FormDialog, FormLayout } from "@formily/antd";
+import { FormOutlined } from '@ant-design/icons';
+import { SchemaOptionsContext } from "@formily/react";
+import { useTranslation } from "react-i18next";
+
+import { useAPIClient } from "../../api-client";
+import { useCollectionManager } from "../../collection-manager";
+import { createKanbanBlockSchema } from "../utils";
+import { DataBlockInitializer } from "./DataBlockInitializer";
+import { SchemaComponent, SchemaComponentOptions } from "../../schema-component";
+
+export const KanbanBlockInitializer = (props) => {
+    const { insert } = props;
+    const { t } = useTranslation();
+    const { getCollection } = useCollectionManager();
+    const options = useContext(SchemaOptionsContext);
+    const api = useAPIClient();
+    return (
+      <DataBlockInitializer
+        {...props}
+        componentType={'Kanban'}
+        icon={<FormOutlined />}
+        onCreateBlockSchema={async ({ item }) => {
+          const collection = getCollection(item.name);
+          const fields = collection?.fields
+            ?.filter((field) => ['select', 'radioGroup'].includes(field.interface))
+            ?.map((field) => {
+              return {
+                label: field?.uiSchema?.title,
+                value: field.name,
+                uiSchema: {
+                  ...field.uiSchema,
+                  name: field.name,
+                },
+              };
+            });
+          const values = await FormDialog(t('Create kanban block'), () => {
+            return (
+              <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
+                <FormLayout layout={'vertical'}>
+                  <SchemaComponent
+                    schema={{
+                      properties: {
+                        groupField: {
+                          title: t('Grouping field'),
+                          enum: fields,
+                          required: true,
+                          description: '{{t("Single select and radio fields can be used as the grouping field")}}',
+                          'x-component': 'Select',
+                          'x-component-props': {
+                            objectValue: true,
+                            fieldNames: { label: 'label', value: 'value' },
+                          },
+                          'x-decorator': 'FormItem',
+                        },
+                      },
+                    }}
+                  />
+                </FormLayout>
+              </SchemaComponentOptions>
+            );
+          }).open({
+            initialValues: {},
+          });
+          const sortName = `${values.groupField.value}_sort`;
+          const exists = collection?.fields?.find((field) => field.name === sortName);
+          if (!exists) {
+            await api.resource('collections.fields', item.name).create({
+              values: {
+                type: 'sort',
+                name: sortName,
+                hidden: true,
+                scopeKey: values.groupField.value,
+              },
+            });
+          }
+          insert(
+            createKanbanBlockSchema({
+              groupField: values.groupField.value,
+              collection: item.name,
+              params: {
+                sort: [sortName],
+                paginate: false,
+              },
+            }),
+          );
+        }}
+      />
+    );
+  };

packages/core/client/src/schema-initializer/items/MarkdownBlockInitializer.tsx

+import React from "react";
+import { FormOutlined } from '@ant-design/icons';
+import { useTranslation } from "react-i18next";
+
+import { SchemaInitializer } from "../SchemaInitializer";
+
+export const MarkdownBlockInitializer = (props) => {
+    const { insert } = props;
+    const { t } = useTranslation();
+    return (
+      <SchemaInitializer.Item
+        {...props}
+        icon={<FormOutlined />}
+        onClick={() => {
+          insert({
+            type: 'void',
+            'x-designer': 'Markdown.Void.Designer',
+            'x-decorator': 'CardItem',
+            'x-component': 'Markdown.Void',
+            'x-editable': false,
+            'x-component-props': {
+              content: t('This is a demo text, **supports Markdown syntax**.'),
+            },
+          });
+        }}
+      />
+    );
+  };

packages/core/client/src/schema-initializer/items/PrintActionInitializer.tsx

+import React from "react";
+
+import { ActionInitializer } from "./ActionInitializer";
+
+export const PrintActionInitializer = (props) => {
+    const schema = {
+      title: '{{ t("Print") }}',
+      'x-action': 'print',
+      'x-component': 'Action',
+      'x-designer': 'Action.Designer',
+      'x-component-props': {
+        icon: 'PrinterOutlined',
+        useProps: '{{ useDetailPrintActionProps }}',
+      },
+    };
+    return <ActionInitializer {...props} schema={schema} />;
+  };

packages/core/client/src/schema-initializer/items/RecordAssociationBlockInitializer.tsx

+import React from "react";
+import { TableOutlined } from '@ant-design/icons';
+
+import { useCollectionManager } from "../../collection-manager";
+import { useSchemaTemplateManager } from "../../schema-templates";
+import { SchemaInitializer } from "../SchemaInitializer";
+import { createTableBlockSchema, useRecordCollectionDataSourceItems } from "../utils";
+
+export const RecordAssociationBlockInitializer = (props) => {
+  const { item, onCreateBlockSchema, componentType, createBlockSchema, insert, ...others } = props;
+  const { getTemplateSchemaByMode } = useSchemaTemplateManager();
+  const { getCollection } = useCollectionManager();
+  const field = item.field;
+  const collection = getCollection(field.target);
+  const resource = `${field.collectionName}.${field.name}`;
+  return (
+    <SchemaInitializer.Item
+      icon={<TableOutlined />}
+      {...others}
+      onClick={async ({ item }) => {
+        if (item.template) {
+          const s = await getTemplateSchemaByMode(item);
+          insert(s);
+        } else {
+          insert(
+            createTableBlockSchema({
+              rowKey: collection.filterTargetKey,
+              collection: field.target,
+              resource,
+              association: resource,
+            }),
+          );
+        }
+      }}
+      items={useRecordCollectionDataSourceItems('Table', item, field.target, resource)}
+    />
+  );
+};