@nocobase/client 0.7.0-alpha.82 → 0.7.1-alpha.4

package/src/collection-manager/action-hooks.ts

@@ -1,325 +0,0 @@
-import { useForm } from '@formily/react';
-import { message } from 'antd';
-import { useEffect } from 'react';
-import { useCollection, useCollectionManager } from '.';
-import { useRequest } from '../api-client';
-import { useRecord } from '../record-provider';
-import { useActionContext } from '../schema-component';
-import { useResourceActionContext, useResourceContext } from './ResourceActionProvider';
-
-export const useCancelAction = () => {
-  const form = useForm();
-  const ctx = useActionContext();
-  return {
-    async run() {
-      ctx.setVisible(false);
-      form.reset();
-    },
-  };
-};
-
-export const useResetFilterAction = () => {
-  const { run } = useResourceActionContext();
-  const form = useForm();
-  const ctx = useActionContext();
-
-  return {
-    async run() {
-      form.reset();
-      run();
-      ctx.setVisible(false);
-    },
-  };
-};
-
-export const useKanbanEvents = () => {
-  const { resource } = useCollection();
-  return {
-    async onCardDragEnd({ columns, groupField }, { fromColumnId, fromPosition }, { toColumnId, toPosition }) {
-      const sourceColumn = columns.find((column) => column.id === fromColumnId);
-      const destinationColumn = columns.find((column) => column.id === toColumnId);
-      const sourceCard = sourceColumn?.cards?.[fromPosition];
-      const targetCard = destinationColumn?.cards?.[toPosition];
-      const values = {
-        sourceId: sourceCard.id,
-        sortField: `${groupField.name}_sort`,
-      };
-      if (targetCard) {
-        values['targetId'] = targetCard.id;
-      } else {
-        values['targetScope'] = {
-          [groupField.name]: toColumnId,
-        };
-      }
-      await resource.move(values);
-    },
-  };
-};
-
-export const useSortFields = (collectionName: string) => {
-  const { getCollectionFields, getInterface } = useCollectionManager();
-  const fields = getCollectionFields(collectionName);
-  return fields
-    .filter((field: any) => {
-      if (!field.interface) {
-        return false;
-      }
-      const fieldInterface = getInterface(field.interface);
-      if (fieldInterface.sortable) {
-        return true;
-      }
-      return false;
-    })
-    .map((field: any) => {
-      return {
-        value: field.name,
-        label: field?.uiSchema?.title || field.name,
-      };
-    });
-};
-
-export const useCollectionFilterOptions = (collectionName: string) => {
-  const { getCollectionFields, getInterface } = useCollectionManager();
-  const fields = getCollectionFields(collectionName);
-  const field2option = (field, depth) => {
-    if (!field.interface) {
-      return;
-    }
-    const fieldInterface = getInterface(field.interface);
-    if (!fieldInterface.filterable) {
-      return;
-    }
-    const { nested, children, operators } = fieldInterface.filterable;
-    const option = {
-      name: field.name,
-      title: field?.uiSchema?.title || field.name,
-      schema: field?.uiSchema,
-      operators:
-        operators?.filter?.((operator) => {
-          return !operator?.visible || operator.visible(field);
-        }) || [],
-    };
-    if (field.target && depth > 2) {
-      return;
-    }
-    if (depth > 2) {
-      return option;
-    }
-    if (children?.length) {
-      option['children'] = children;
-    }
-    if (nested) {
-      const targetFields = getCollectionFields(field.target);
-      const options = getOptions(targetFields, depth+1).filter(Boolean);
-      option['children'] = option['children'] || [];
-      option['children'].push(...options);
-    }
-    return option;
-  };
-  const getOptions = (fields, depth) => {
-    const options = [];
-    fields.forEach((field) => {
-      const option = field2option(field, depth);
-      if (option) {
-        options.push(option);
-      }
-    });
-    return options;
-  };
-  return getOptions(fields, 1);
-};
-
-export const useFilterDataSource = (options) => {
-  const { name } = useCollection();
-  const data = useCollectionFilterOptions(name);
-  return useRequest(
-    () =>
-      Promise.resolve({
-        data,
-      }),
-    options,
-  );
-};
-
-export const useFilterAction = () => {
-  const { run, params, defaultRequest } = useResourceActionContext();
-  const form = useForm();
-  const ctx = useActionContext();
-  const [first, ...others] = params;
-  return {
-    async run() {
-      const prevFilter = defaultRequest?.params?.filter;
-      const filter = prevFilter ? { $and: [prevFilter, form.values.filter] } : form.values.filter;
-      run({ ...first, filter }, ...others);
-      ctx.setVisible(false);
-    },
-  };
-};
-
-export const useCreateAction = () => {
-  const form = useForm();
-  const ctx = useActionContext();
-  const { refresh } = useResourceActionContext();
-  const { resource } = useResourceContext();
-  return {
-    async run() {
-      await form.submit();
-      await resource.create({ values: form.values });
-      ctx.setVisible(false);
-      await form.reset();
-      refresh();
-    },
-  };
-};
-
-export const useCreateActionWithoutRefresh = () => {
-  const form = useForm();
-  const { resource } = useResourceContext();
-  return {
-    async run() {
-      await form.submit();
-      await resource.create({ values: form.values });
-      await form.reset();
-    },
-  };
-};
-
-export const useUpdateViewAction = () => {
-  const form = useForm();
-  const ctx = useActionContext();
-  // const { refresh } = useResourceActionContext();
-  const { resource, targetKey } = useResourceContext();
-  const { [targetKey]: filterByTk } = useRecord();
-  return {
-    async run() {
-      await form.submit();
-      await resource.update({ filterByTk, values: form.values });
-      // refresh();
-      message.success('保存成功');
-    },
-  };
-};
-
-export const useMoveAction = () => {
-  const { resource } = useResourceContext();
-  const { refresh } = useResourceActionContext();
-  return {
-    async move(from, to) {
-      await resource.move({
-        sourceId: from.id,
-        targetId: to.id,
-      });
-      refresh();
-    },
-  };
-};
-
-export const useUpdateAction = () => {
-  const form = useForm();
-  const ctx = useActionContext();
-  const { refresh } = useResourceActionContext();
-  const { resource, targetKey } = useResourceContext();
-  const { [targetKey]: filterByTk } = useRecord();
-  return {
-    async run() {
-      await form.submit();
-      await resource.update({ filterByTk, values: form.values });
-      ctx.setVisible(false);
-      await form.reset();
-      refresh();
-    },
-  };
-};
-
-export const useDestroyAction = () => {
-  const { refresh } = useResourceActionContext();
-  const { resource, targetKey } = useResourceContext();
-  const { [targetKey]: filterByTk } = useRecord();
-  return {
-    async run() {
-      await resource.destroy({ filterByTk });
-      refresh();
-    },
-  };
-};
-
-export const useBulkDestroyAction = () => {
-  const { state, setState, refresh } = useResourceActionContext();
-  const { resource, targetKey } = useResourceContext();
-  return {
-    async run() {
-      await resource.destroy({
-        filterByTk: state?.selectedRowKeys || [],
-      });
-      setState?.({ selectedRowKeys: [] });
-      refresh();
-    },
-  };
-};
-
-export const useValuesFromRecord = (options) => {
-  const record = useRecord();
-  const result = useRequest(() => Promise.resolve({ data: record }), {
-    ...options,
-    manual: true,
-  });
-  const ctx = useActionContext();
-  useEffect(() => {
-    if (ctx.visible) {
-      result.run();
-    }
-  }, [ctx.visible]);
-  return result;
-};
-
-export const useValuesFromRA = (options) => {
-  const ctx = useResourceActionContext();
-  return useRequest(() => Promise.resolve(ctx.data), {
-    ...options,
-    refreshDeps: [ctx.data],
-  });
-};
-
-export const useCreateActionAndRefreshCM = () => {
-  const { run } = useCreateAction();
-  const { refreshCM } = useCollectionManager();
-  return {
-    async run() {
-      await run();
-      await refreshCM();
-    },
-  };
-};
-
-export const useUpdateActionAndRefreshCM = () => {
-  const { run } = useUpdateAction();
-  const { refreshCM } = useCollectionManager();
-  return {
-    async run() {
-      await run();
-      await refreshCM();
-    },
-  };
-};
-
-export const useDestroyActionAndRefreshCM = () => {
-  const { run } = useDestroyAction();
-  const { refreshCM } = useCollectionManager();
-  return {
-    async run() {
-      await run();
-      await refreshCM();
-    },
-  };
-};
-
-export const useBulkDestroyActionAndRefreshCM = () => {
-  const { run } = useBulkDestroyAction();
-  const { refreshCM } = useCollectionManager();
-  return {
-    async run() {
-      await run();
-      await refreshCM();
-    },
-  };
-};

package/src/collection-manager/context.ts

@@ -1,11 +0,0 @@
-import { createContext } from 'react';
-import { CollectionFieldOptions, CollectionManagerOptions, CollectionOptions } from './types';
-
-export const CollectionManagerContext = createContext<CollectionManagerOptions>({
-  collections: [],
-  interfaces: {},
-});
-
-export const CollectionContext = createContext<CollectionOptions>({});
-
-export const CollectionFieldContext = createContext<CollectionFieldOptions>({});

package/src/collection-manager/demos/demo2.tsx

@@ -1,124 +0,0 @@
-import React from 'react';
-import { observer, ISchema, useForm } from '@formily/react';
-import {
-  SchemaComponent,
-  SchemaComponentProvider,
-  Form,
-  Action,
-  CollectionProvider,
-  CollectionField,
-} from '@nocobase/client';
-import 'antd/dist/antd.css';
-import { FormItem, Input } from '@formily/antd';
-
-export default observer(() => {
-  const collection = {
-    name: 'tests',
-    fields: [
-      {
-        type: 'string',
-        name: 'title1',
-        interface: 'input',
-        uiSchema: {
-          title: 'Title1',
-          type: 'string',
-          'x-component': 'Input',
-          required: true,
-          description: 'description1',
-        } as ISchema,
-      },
-      {
-        type: 'string',
-        name: 'title2',
-        interface: 'input',
-        uiSchema: {
-          title: 'Title2',
-          type: 'string',
-          'x-component': 'Input',
-          description: 'description',
-          default: 'ttt',
-        },
-      },
-      {
-        type: 'string',
-        name: 'title3',
-      },
-    ],
-  };
-
-  const schema: ISchema = {
-    type: 'object',
-    properties: {
-      form1: {
-        type: 'void',
-        'x-component': 'Form',
-        properties: {
-          // 字段 title1 直接使用全局提供的 uiSchema
-          title1: {
-            'x-component': 'CollectionField',
-            'x-decorator': 'FormItem',
-            default: '111',
-          },
-          // 等同于
-          // title1: {
-          //   type: 'string',
-          //   title: 'Title',
-          //   required: true,
-          //   'x-component': 'Input',
-          //   'x-decorator': 'FormItem',
-          // },
-          title2: {
-            'x-component': 'CollectionField',
-            'x-decorator': 'FormItem',
-            title: 'Title4', // 覆盖全局已定义的 Title2
-            required: true, // 扩展的配置参数
-            description: 'description4',
-          },
-          // 等同于
-          // title2: {
-          //   type: 'string',
-          //   title: 'Title22',
-          //   required: true,
-          //   'x-component': 'Input',
-          //   'x-decorator': 'FormItem',
-          // },
-          // 字段 title3 没有提供 uiSchema，自行处理
-          title3: {
-            'x-component': 'Input',
-            'x-decorator': 'FormItem',
-            title: 'Title3',
-            required: true,
-          },
-          action1: {
-            // type: 'void',
-            'x-component': 'Action',
-            title: 'Submit',
-            'x-component-props': {
-              type: 'primary',
-              useAction: '{{ useSubmit }}',
-            },
-          },
-        },
-      },
-    },
-  };
-
-  const useSubmit = () => {
-    const form = useForm();
-    return {
-      async run() {
-        form.submit(() => {
-          console.log(form.values);
-        });
-      },
-    };
-  };
-
-  return (
-    <SchemaComponentProvider scope={{ useSubmit }} components={{ Action, Form, CollectionField, Input, FormItem }}>
-      <CollectionProvider collection={collection}>
-        <SchemaComponent schema={schema} />
-      </CollectionProvider>
-    </SchemaComponentProvider>
-  );
-});

package/src/collection-manager/demos/demo3.tsx

@@ -1,67 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  APIClient,
-  APIClientProvider,
-  CollectionFieldProvider,
-  CollectionProvider,
-  compose,
-  RecordProvider,
-  useCollectionField,
-} from '@nocobase/client';
-import MockAdapter from 'axios-mock-adapter';
-
-const apiClient = new APIClient();
-
-const mock = new MockAdapter(apiClient.axios);
-
-mock.onGet('/posts/1/tags:list').reply(200, {
-  data: [
-    { id: 1, name: 'Tag 1' },
-    { id: 2, name: 'Tag 2' },
-  ],
-});
-
-const collection = {
-  name: 'posts',
-  fields: [
-    {
-      type: 'belongsToMany',
-      name: 'tags',
-      targetKey: 'id',
-      sourceKey: 'id',
-      foreignKey: 'postId',
-      otherKey: 'tagId',
-    },
-  ],
-};
-
-const record = { id: 1 };
-
-const providers = [
-  // API 客户端
-  [APIClientProvider, { apiClient }],
-  // 提供当前数据表行记录的上下文
-  [RecordProvider, { record }],
-  // 提供数据表配置的上下文
-  [CollectionProvider, { collection }],
-  // 提供字段配置上的下文
-  [CollectionFieldProvider, { name: 'tags' }],
-];
-
-export default compose(...providers)(() => {
-  const { resource } = useCollectionField();
-  const [items, setItems] = useState([]);
-  useEffect(() => {
-    // 请求地址为 /posts/1/tags:list
-    resource.list().then((response) => {
-      setItems(response?.data?.data);
-    });
-  }, []);
-  return (
-    <div>
-      {items?.map((item, key) => (
-        <div key={key}>{item.name}</div>
-      ))}
-    </div>
-  );
-});

package/src/collection-manager/demos/demo4.tsx

@@ -1,164 +0,0 @@
-import { ISchema } from '@formily/react';
-import {
-  AntdSchemaComponentProvider,
-  CollectionManagerProvider,
-  SchemaComponent,
-  SchemaComponentProvider
-} from '@nocobase/client';
-import React from 'react';
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    block1: {
-      type: 'void',
-      'x-decorator': 'CollectionProvider',
-      'x-decorator-props': {
-        name: 'posts',
-      },
-      properties: {
-        createdBy: {
-          'x-component': 'CollectionField',
-          'x-read-pretty': true,
-          properties: {
-            rowSelection: {
-              'x-component': 'RowSelection',
-              'x-component-props': {
-                rowKey: 'id',
-                objectValue: true,
-                rowSelection: {
-                  type: 'checkbox',
-                },
-                dataSource: [
-                  { id: 1, name: 'Name1' },
-                  { id: 2, name: 'Name2' },
-                  { id: 3, name: 'Name3' },
-                ],
-              },
-              properties: {
-                column1: {
-                  type: 'void',
-                  title: 'Name',
-                  'x-component': 'RowSelection.Column',
-                  properties: {
-                    name: {
-                      type: 'string',
-                      'x-component': 'Input',
-                      'x-read-pretty': true,
-                    },
-                  },
-                },
-              },
-            },
-            item: {
-              'x-component': 'RecordPicker.SelectedItem',
-              properties: {
-                drawer1: {
-                  'x-component': 'Action.Drawer',
-                  type: 'void',
-                  title: 'Drawer Title',
-                  properties: {
-                    hello1: {
-                      'x-content': 'Hello',
-                      title: 'T1',
-                    },
-                    footer1: {
-                      'x-component': 'Action.Drawer.Footer',
-                      type: 'void',
-                      properties: {
-                        close1: {
-                          type: 'void',
-                          title: 'Close',
-                          'x-component': 'Action',
-                          'x-component-props': {
-                            // useAction: '{{ useCloseAction }}',
-                          },
-                        },
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-const collections = [
-  {
-    name: 'posts',
-    fields: [
-      {
-        type: 'integer',
-        name: 'id',
-        interface: 'input',
-        uiSchema: {
-          title: 'ID1',
-          type: 'number',
-          'x-component': 'InputNumber',
-          required: true,
-          description: 'description1',
-        } as ISchema,
-      },
-      {
-        type: 'string',
-        name: 'name',
-        interface: 'input',
-        uiSchema: {
-          title: 'Name1',
-          type: 'string',
-          'x-component': 'Input',
-          required: true,
-          description: 'description1',
-        } as ISchema,
-      },
-      {
-        type: 'string',
-        name: 'date',
-        interface: 'datetime',
-        uiSchema: {
-          type: 'boolean',
-          title: `Date1`,
-          'x-read-pretty': true,
-          'x-decorator': 'FormItem',
-          'x-component': 'DatePicker',
-          'x-component-props': {
-            dateFormat: 'YYYY/MM/DD',
-            // showTime: true,
-          },
-        },
-      },
-      {
-        type: 'belongsToMany',
-        name: 'createdBy',
-        target: 'users',
-        foreignKey: 'createdById',
-        uiSchema: {
-          type: 'array',
-          title: `创建人`,
-          default: [
-            { id: 1, name: 'name1' },
-            { id: 2, name: 'name2' },
-          ],
-          'x-decorator': 'FormItem',
-          'x-component': 'RecordPicker',
-        },
-      },
-    ],
-  },
-];
-
-export default () => {
-  return (
-    <SchemaComponentProvider>
-      <AntdSchemaComponentProvider>
-        <CollectionManagerProvider collections={collections}>
-          <SchemaComponent schema={schema} />
-        </CollectionManagerProvider>
-      </AntdSchemaComponentProvider>
-    </SchemaComponentProvider>
-  );
-};

package/src/collection-manager/hooks/index.ts

@@ -1,4 +0,0 @@
-export * from './useCollection';
-export * from './useCollectionField';
-export * from './useCollectionManager';
-export * from './useCollectionDataSource';