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

package/src/async-data-provider/demos/demo3.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { Table } from 'antd';
-import MockAdapter from 'axios-mock-adapter';
-import {
-  APIClientProvider,
-  SchemaComponentProvider,
-  SchemaComponent,
-  useRequest,
-  APIClient,
-  AsyncDataProvider,
-  useAsyncData,
-} from '@nocobase/client';
-
-const apiClient = new APIClient();
-
-const mock = new MockAdapter(apiClient.axios);
-
-mock.onGet('/users').reply(200, {
-  data: [
-    { id: 1, name: 'John Smith' },
-    { id: 2, name: 'Mike' },
-  ],
-});
-
-const TableView = (props) => {
-  const { data, loading } = useAsyncData();
-  return <Table {...props} dataSource={data?.data} loading={loading} />;
-};
-
-const AsyncDataTableView = (props) => {
-  const { request, ...others } = props;
-  return (
-    <AsyncDataProvider request={request}>
-      <TableView {...others} />
-    </AsyncDataProvider>
-  );
-};
-
-export default () => {
-  return (
-    <APIClientProvider apiClient={apiClient}>
-      <SchemaComponentProvider components={{ TableView, AsyncDataTableView, AsyncDataProvider }}>
-        <SchemaComponent
-          schema={{
-            properties: {
-              table1: {
-                type: 'void',
-                'x-decorator': 'AsyncDataProvider',
-                'x-decorator-props': {
-                  request: { url: '/users' },
-                },
-                'x-component': 'TableView',
-                'x-component-props': {
-                  rowKey: 'id',
-                  columns: [
-                    {
-                      title: 'Name',
-                      dataIndex: 'name',
-                      key: 'name',
-                    },
-                  ],
-                },
-              },
-              table2: {
-                type: 'void',
-                'x-component': 'AsyncDataTableView',
-                'x-component-props': {
-                  request: { url: '/users' },
-                  rowKey: 'id',
-                  columns: [
-                    {
-                      title: 'Name',
-                      dataIndex: 'name',
-                      key: 'name',
-                    },
-                  ],
-                },
-              },
-            },
-          }}
-        />
-      </SchemaComponentProvider>
-    </APIClientProvider>
-  );
-};

package/src/async-data-provider/index.md

@@ -1,155 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /client
----
-
-# AsyncDataProvider
-
-利用 Formily 提供的 [Effect Hooks](https://core.formilyjs.org/zh-CN/api/entry/form-effect-hooks) 或 [x-reactions](https://react.formilyjs.org/zh-CN/api/shared/schema#schemareactions) 协议能一定程度的解决某些场景的异步数据源问题，但是如果只用来处理异步请求，并不会很好用，而且局限于 Formily 体系内。为了更灵活的处理异步请求的各种需求，NocoBase 提供了非常好用的可配置化的 [useRequest()](api-client#userequest)，用于配置各种异步请求。与此同时，又提供了 `<AsyncDataProvider/>` 组件，可以将请求结果共享给子组件，方便处理其他更复杂的需求。以平时最常见，但却可能非常复杂的表格为例。表格的使用场景有：
-
-- TableView 只作为表格视图
-- RowSelection 动态数据的勾选项
-- TableField 表格字段
-
-各自的 schema 可以这么表示：
-
-```js
-// 表格视图，type 为 void，无 default 默认值，无 field.value，
-// dataSource 直接写在组件的 props 里
-{
-  type: 'void',
-  'x-component': 'TableView',
-  'x-component-props': {
-    columns: [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-        key: 'name',
-      },
-    ],
-    dataSource: [
-      { id: 1, name: 'Name1' },
-      { id: 2, name: 'Name2' },
-    ],
-  },
-}
-
-// 单选（表格视图），类似于 Radio.Group 字段，可选项由表格视图提供
-{
-  type: 'number',
-  'x-component': 'RowSelection',
-  'x-component-props': {
-    rowSelection: {
-      type: 'radio',
-    },
-    columns: [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-        key: 'name',
-      },
-    ],
-    dataSource: [
-      { id: 1, name: 'Name1' },
-      { id: 2, name: 'Name2' },
-    ],
-  },
-  default: 1,
-}
-
-// 多选（表格视图），类似于 Checkbox.Group 字段，可选项由表格视图提供
-{
-  type: 'array',
-  'x-component': 'RowSelection',
-  'x-component-props': {
-    rowSelection: {
-      type: 'checkbox',
-    },
-    columns: [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-        key: 'name',
-      },
-    ],
-    dataSource: [
-      { id: 1, name: 'Name1' },
-      { id: 2, name: 'Name2' },
-    ],
-  },
-  default: [1],
-}
-
-// 表格字段，数据由表单提供，schema 层面可以配置默认值
-// 与表格视图的方式不同，dataSource 和 columns 不适合直接配置在 x-component-props 里，怎么处理先忽略。
-{
-  type: 'array',
-  'x-component': 'TableField',
-  'x-component-props': {},
-  default: [
-    { id: 1, name: 'Name1' },
-    { id: 2, name: 'Name2' },
-  ],
-}
-```
-
-大多数实际应用中，表格视图的 dataSource 是异步获取的，可能也需要过滤和分页，这样一来直接在 x-component-props 里写 dataSource 并不合适。为了解决这个问题，可以给组件扩展一个 request 属性，用于请求远程数据，例子如下：
-
-<code src="./demos/demo2.tsx"/>
-
-上述例子的 `<TableView/>` 组件就是一个 React Component，可以正常使用，而不局限于 SchemaComponent 场景。更进一步，为了处理过滤表单、分页等问题，建议将 request 通过 `<AsyncDataProvider/>` 共享给 `<TableView/>` 组件。
-
-```tsx | pure
-const result = useRequest(props.request);
-<AsyncDataProvider value={result}>
-  <TableView/>
-</AsyncDataProvider>
-```
-
-或者直接将 request 交给 AsyncDataProvider
-
-```tsx | pure
-<AsyncDataProvider request={props.request}>
-  <TableView/>
-</AsyncDataProvider>
-```
-
-在 `<AsyncDataProvider/>` 的子组件里就可以通过 `useAsyncData()` 来获取 result，可用于处理过滤、分页等。
-
-```ts
-const { data, loading, params, run, refresh, parent } = useAsyncData();
-```
-
-转化为 Schema 时，可以将 AsyncDataProvider 放在 `x-decorator` 里，也可以将重新组合的 AsyncDataProvider + TableView，放在 `x-component` 里。
-
-<code src="./demos/demo3.tsx"/>
-
-将 AsyncDataProvider 独立出来，放到 x-decorator 里的另一个好处，例子如下：
-
-```tsx | pure
-<CollectionProvider>
-  {/* 从 CollectionProvider 里获取资源请求参数，并将请求结果同时共享给 DesignableBar 和 TableView */}
-  <AsyncDataProvider> 
-    <DesignableBar/>
-    <TableView>
-      <RecordProvider>
-        <CollectionFieldProvider>
-          {/* 从 CollectionFieldProvider 里获取关系资源请求参数，并将请求结果同时共享给子组件 */}
-          <AsyncDataProvider>
-            {/* 组件 */}
-          </AsyncDataProvider>
-        </CollectionFieldProvider>
-      </RecordProvider>
-    </TableView>
-  </AsyncDataProvider>
-</CollectionProvider>
-```
-
-上面例子嵌套了两层 AsyncDataProvider，在子 AsyncDataProvider 里，也可以获取到更上一级的请求结果，如：
-
-```ts
-const { parent } = useAsyncData();
-parent.refresh();
-```

package/src/async-data-provider/index.tsx

@@ -1,25 +0,0 @@
-import { Result } from 'ahooks/lib/useRequest/src/types';
-import React, { createContext, useContext } from 'react';
-import { useRequest } from '../api-client';
-
-export const AsyncDataContext = createContext<Result<any, any> & { state?: any; setState?: any }>(null);
-
-export interface AsyncDataProviderProps {
-  value?: any;
-  request?: any;
-  uid?: string;
-  onSuccess?: (data, params) => void;
-}
-
-export const AsyncDataProvider: React.FC<AsyncDataProviderProps> = (props) => {
-  const { value, request, children, ...others } = props;
-  if (value) {
-    return <AsyncDataContext.Provider value={value}>{children}</AsyncDataContext.Provider>;
-  }
-  const result = useRequest(request, { ...others });
-  return <AsyncDataContext.Provider value={result}>{children}</AsyncDataContext.Provider>;
-};
-
-export const useAsyncData = () => {
-  return useContext(AsyncDataContext);
-};

package/src/block-provider/BlockProvider.tsx

@@ -1,193 +0,0 @@
-import { Field } from '@formily/core';
-import { useField } from '@formily/react';
-import { useRequest } from 'ahooks';
-import template from 'lodash/template';
-import React, { createContext, useContext } from 'react';
-import { Link } from 'react-router-dom';
-import { ACLCollectionProvider, TableFieldResource, useAPIClient, useRecord } from '../';
-import { CollectionProvider, useCollection, useCollectionManager } from '../collection-manager';
-import { useRecordIndex } from '../record-provider';
-
-export const BlockResourceContext = createContext(null);
-export const BlockAssociationContext = createContext(null);
-const BlockRequestContext = createContext(null);
-
-export const useBlockResource = () => {
-  return useContext(BlockResourceContext);
-};
-
-interface UseReousrceProps {
-  resource: any;
-  association?: any;
-  useSourceId?: any;
-  block?: any;
-}
-
-const useAssociation = (props) => {
-  const { association } = props;
-  const { getCollectionField } = useCollectionManager();
-  if (typeof association === 'string') {
-    return getCollectionField(association);
-  } else if (association?.collectionName && association?.name) {
-    return getCollectionField(`${association?.collectionName}.${association?.name}`);
-  }
-};
-
-const useReousrce = (props: UseReousrceProps) => {
-  const { block, resource, useSourceId } = props;
-  const record = useRecord();
-  const api = useAPIClient();
-  const association = useAssociation(props);
-  const sourceId = useSourceId?.();
-  const field = useField<Field>();
-  if (block === 'TableField') {
-    const options = {
-      field,
-      api,
-      resource,
-      sourceId: sourceId || record[association?.sourceKey || 'id'],
-    };
-    return new TableFieldResource(options);
-  }
-  const __parent = useContext(BlockRequestContext);
-  if (__parent?.block === 'TableField' && __parent?.resource instanceof TableFieldResource) {
-    return __parent.resource;
-  }
-  if (!association) {
-    return api.resource(resource);
-  }
-  if (sourceId) {
-    return api.resource(resource, sourceId);
-  }
-  return api.resource(resource, record[association?.sourceKey || 'id']);
-};
-
-const useActionParams = (props) => {
-  const { useParams } = props;
-  const params = useParams?.() || {};
-  return { ...props.params, ...params };
-};
-
-export const useResourceAction = (props, opts = {}) => {
-  const { resource, action } = props;
-  const { fields } = useCollection();
-  const appends = fields?.filter((field) => field.target).map((field) => field.name);
-  const params = useActionParams(props);
-  if (appends?.length) {
-    params['appends'] = appends;
-  }
-  const result = useRequest(
-    (params) => (action ? resource[action](params).then((res) => res.data) : Promise.resolve({})),
-    {
-      ...opts,
-      defaultParams: [params],
-    },
-  );
-  return result;
-};
-
-const MaybeCollectionProvider = (props) => {
-  const { collection } = props;
-  return collection ? (
-    <CollectionProvider collection={collection}>
-      <ACLCollectionProvider>{props.children}</ACLCollectionProvider>
-    </CollectionProvider>
-  ) : (
-    <>{props.children}</>
-  );
-};
-
-const BlockRequestProvider = (props) => {
-  const field = useField();
-  const resource = useBlockResource();
-  const service = useResourceAction(
-    { ...props, resource },
-    {
-      ...props.requestOptions,
-    },
-  );
-  const __parent = useContext(BlockRequestContext);
-  return (
-    <BlockRequestContext.Provider value={{ block: props.block, props, field, service, resource, __parent }}>
-      {props.children}
-    </BlockRequestContext.Provider>
-  );
-};
-
-export const useBlockRequestContext = () => {
-  return useContext(BlockRequestContext);
-};
-
-export const BlockProvider = (props) => {
-  const { collection, association } = props;
-  const resource = useReousrce(props);
-  return (
-    <MaybeCollectionProvider collection={collection}>
-      <BlockAssociationContext.Provider value={association}>
-        <BlockResourceContext.Provider value={resource}>
-          <BlockRequestProvider {...props}>{props.children}</BlockRequestProvider>
-        </BlockResourceContext.Provider>
-      </BlockAssociationContext.Provider>
-    </MaybeCollectionProvider>
-  );
-};
-
-export const useBlockAssociationContext = () => {
-  return useContext(BlockAssociationContext);
-};
-
-export const useFilterByTk = () => {
-  const { resource, __parent } = useContext(BlockRequestContext);
-  const recordIndex = useRecordIndex();
-  const record = useRecord();
-  const collection = useCollection();
-  const { getCollectionField } = useCollectionManager();
-  const assoc = useContext(BlockAssociationContext);
-  if (resource instanceof TableFieldResource || __parent?.block === 'TableField') {
-    return recordIndex;
-  }
-  if (assoc) {
-    const association = getCollectionField(assoc);
-    return record?.[association.targetKey || 'id'];
-  }
-  return record?.[collection.filterTargetKey || 'id'];
-};
-
-export const useSourceIdFromRecord = () => {
-  const record = useRecord();
-  const { getCollectionField } = useCollectionManager();
-  const assoc = useContext(BlockAssociationContext);
-  if (assoc) {
-    const association = getCollectionField(assoc);
-    return record?.[association.sourceKey || 'id'];
-  }
-};
-
-export const useSourceIdFromParentRecord = () => {
-  const record = useRecord();
-  const { getCollectionField } = useCollectionManager();
-  const assoc = useContext(BlockAssociationContext);
-  if (assoc) {
-    const association = getCollectionField(assoc);
-    return record?.__parent?.[association.sourceKey || 'id'];
-  }
-};
-
-export const useParamsFromRecord = () => {
-  const filterByTk = useFilterByTk();
-  return {
-    filterByTk: filterByTk,
-  };
-};
-
-export const RecordLink = (props) => {
-  const field = useField();
-  const record = useRecord();
-  const { title, to, ...others } = props;
-  const compiled = template(to || '');
-  return (
-    <Link {...others} to={compiled({ record: record || {} })}>
-      {field.title}
-    </Link>
-  );
-};

package/src/block-provider/BlockSchemaComponentProvider.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { SchemaComponentOptions } from '../schema-component/core/SchemaComponentOptions';
-import { RecordLink, useParamsFromRecord, useSourceIdFromParentRecord, useSourceIdFromRecord } from './BlockProvider';
-import { CalendarBlockProvider, useCalendarBlockProps } from './CalendarBlockProvider';
-import { DetailsBlockProvider, useDetailsBlockProps } from './DetailsBlockProvider';
-import { FormBlockProvider, useFormBlockProps } from './FormBlockProvider';
-import * as bp from './hooks';
-import { KanbanBlockProvider, useKanbanBlockProps } from './KanbanBlockProvider';
-import { TableBlockProvider, useTableBlockProps } from './TableBlockProvider';
-import { TableFieldProvider, useTableFieldProps } from './TableFieldProvider';
-import { TableSelectorProvider, useTableSelectorProps } from './TableSelectorProvider';
-
-export const BlockSchemaComponentProvider: React.FC = (props) => {
-  return (
-    <SchemaComponentOptions
-      components={{
-        CalendarBlockProvider,
-        TableFieldProvider,
-        TableBlockProvider,
-        TableSelectorProvider,
-        FormBlockProvider,
-        DetailsBlockProvider,
-        KanbanBlockProvider,
-        RecordLink,
-      }}
-      scope={{
-        ...bp,
-        useSourceIdFromRecord,
-        useSourceIdFromParentRecord,
-        useParamsFromRecord,
-        useCalendarBlockProps,
-        useFormBlockProps,
-        useDetailsBlockProps,
-        useTableFieldProps,
-        useTableBlockProps,
-        useTableSelectorProps,
-        useKanbanBlockProps,
-      }}
-    >
-      {props.children}
-    </SchemaComponentOptions>
-  );
-};

package/src/block-provider/CalendarBlockProvider.tsx

@@ -1,53 +0,0 @@
-import { ArrayField } from '@formily/core';
-import { useField } from '@formily/react';
-import { Spin } from 'antd';
-import React, { createContext, useContext, useEffect } from 'react';
-import { BlockProvider, useBlockRequestContext } from './BlockProvider';
-
-export const CalendarBlockContext = createContext<any>({});
-
-const InternalCalendarBlockProvider = (props) => {
-  const { fieldNames } = props;
-  const field = useField();
-  const { resource, service } = useBlockRequestContext();
-  if (service.loading) {
-    return <Spin />;
-  }
-  return (
-    <CalendarBlockContext.Provider
-      value={{
-        field,
-        service,
-        resource,
-        fieldNames,
-      }}
-    >
-      {props.children}
-    </CalendarBlockContext.Provider>
-  );
-};
-
-export const CalendarBlockProvider = (props) => {
-  return (
-    <BlockProvider {...props} params={{ ...props.params, paginate: false }}>
-      <InternalCalendarBlockProvider {...props} />
-    </BlockProvider>
-  );
-};
-
-export const useCalendarBlockContext = () => {
-  return useContext(CalendarBlockContext);
-};
-
-export const useCalendarBlockProps = () => {
-  const ctx = useCalendarBlockContext();
-  const field = useField<ArrayField>();
-  useEffect(() => {
-    if (!ctx?.service?.loading) {
-      field.componentProps.dataSource = ctx?.service?.data?.data;
-    }
-  }, [ctx?.service?.loading]);
-  return {
-    fieldNames: ctx.fieldNames,
-  };
-};

package/src/block-provider/DetailsBlockProvider.tsx

@@ -1,62 +0,0 @@
-import { createForm } from '@formily/core';
-import { useField } from '@formily/react';
-import { Spin } from 'antd';
-import React, { createContext, useContext, useEffect, useMemo } from 'react';
-import { RecordProvider } from '../record-provider';
-import { BlockProvider, useBlockRequestContext } from './BlockProvider';
-
-export const DetailsBlockContext = createContext<any>({});
-
-const InternalDetailsBlockProvider = (props) => {
-  const { action, readPretty } = props;
-  const field = useField<any>();
-  const form = useMemo(
-    () =>
-      createForm({
-        readPretty,
-      }),
-    [],
-  );
-  const { resource, service } = useBlockRequestContext();
-  if (service.loading && !field.loaded) {
-    return <Spin />;
-  }
-  field.loaded = true;
-  return (
-    <DetailsBlockContext.Provider
-      value={{
-        action,
-        form,
-        field,
-        service,
-        resource,
-      }}
-    >
-      <RecordProvider record={service?.data?.data?.[0] || {}}>{props.children}</RecordProvider>
-    </DetailsBlockContext.Provider>
-  );
-};
-
-export const DetailsBlockProvider = (props) => {
-  return (
-    <BlockProvider {...props}>
-      <InternalDetailsBlockProvider {...props} />
-    </BlockProvider>
-  );
-};
-
-export const useDetailsBlockContext = () => {
-  return useContext(DetailsBlockContext);
-};
-
-export const useDetailsBlockProps = () => {
-  const ctx = useDetailsBlockContext();
-  useEffect(() => {
-    if (!ctx.service.loading) {
-      ctx.form.setValues(ctx.service?.data?.data?.[0] || {});
-    }
-  }, [ctx.service.loading]);
-  return {
-    form: ctx.form,
-  };
-};

package/src/block-provider/FormBlockProvider.tsx

@@ -1,58 +0,0 @@
-import { createForm } from '@formily/core';
-import { useField } from '@formily/react';
-import { Spin } from 'antd';
-import React, { createContext, useContext, useEffect, useMemo } from 'react';
-import { BlockProvider, useBlockRequestContext } from './BlockProvider';
-
-export const FormBlockContext = createContext<any>({});
-
-const InternalFormBlockProvider = (props) => {
-  const { action, readPretty } = props;
-  const field = useField();
-  const form = useMemo(
-    () =>
-      createForm({
-        readPretty,
-      }),
-    [],
-  );
-  const { resource, service } = useBlockRequestContext();
-  if (service.loading) {
-    return <Spin />;
-  }
-  return (
-    <FormBlockContext.Provider
-      value={{
-        action,
-        form,
-        field,
-        service,
-        resource,
-      }}
-    >
-      {props.children}
-    </FormBlockContext.Provider>
-  );
-};
-
-export const FormBlockProvider = (props) => {
-  return (
-    <BlockProvider {...props}>
-      <InternalFormBlockProvider {...props} />
-    </BlockProvider>
-  );
-};
-
-export const useFormBlockContext = () => {
-  return useContext(FormBlockContext);
-};
-
-export const useFormBlockProps = () => {
-  const ctx = useFormBlockContext();
-  useEffect(() => {
-    ctx.form.setInitialValues(ctx.service?.data?.data);
-  }, []);
-  return {
-    form: ctx.form,
-  };
-};