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

package/src/antd-config-provider/demos/demo1.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Table } from 'antd';
-import { i18n, compose, APIClient, APIClientProvider, AntdConfigProvider } from '@nocobase/client';
-import MockAdapter from 'axios-mock-adapter';
-import { I18nextProvider } from 'react-i18next';
-
-const apiClient = new APIClient({
-  baseURL: `${location.protocol}//${location.host}/api/`,
-});
-
-const mock = new MockAdapter(apiClient.axios);
-
-mock.onGet('/app:getLang').reply(200, {
-  data: { lang: 'zh-CN' },
-});
-
-const providers = [
-  [APIClientProvider, { apiClient }],
-  [I18nextProvider, { i18n }],
-  [AntdConfigProvider, { remoteLocale: true }],
-];
-
-export default compose(...providers)(() => {
-  return <Table />;
-});

package/src/antd-config-provider/index.md

@@ -1,12 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /client
----
-
-# AntdConfigProvider
-
-为 antd 组件提供统一的全局化配置
-
-<code src="./demos/demo1.tsx" />

package/src/antd-config-provider/index.tsx

@@ -1,35 +0,0 @@
-import { ConfigProvider, Spin } from 'antd';
-import enUS from 'antd/lib/locale/en_US';
-import zhCN from 'antd/lib/locale/zh_CN';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAPIClient, useRequest } from '../api-client';
-
-export function AntdConfigProvider(props) {
-  const { remoteLocale, ...others } = props;
-  const api = useAPIClient();
-  const { i18n } = useTranslation();
-  const { loading } = useRequest(
-    {
-      url: 'app:getLang',
-    },
-    {
-      onSuccess(data) {
-        const locale = api.auth.locale;
-        if (data?.data?.lang && !locale) {
-          api.auth.setLocale(data?.data?.lang);
-          i18n.changeLanguage(data?.data?.lang);
-        }
-      },
-      manual: !remoteLocale,
-    },
-  );
-  if (loading) {
-    return <Spin />;
-  }
-  return (
-    <ConfigProvider {...others} locale={i18n.language === 'zh-CN' ? zhCN : enUS}>
-      {props.children}
-    </ConfigProvider>
-  );
-}

package/src/api-client/APIClient.ts

@@ -1,6 +0,0 @@
-import { APIClient as APIClientSDK } from '@nocobase/sdk';
-import { Result } from 'ahooks/lib/useRequest/src/types';
-
-export class APIClient extends APIClientSDK {
-  services: Record<string, Result<any, any>>;
-}

package/src/api-client/APIClientProvider.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { APIClient } from './APIClient';
-import { APIClientContext } from './context';
-
-export interface APIClientProviderProps {
-  apiClient: APIClient;
-}
-
-export const APIClientProvider: React.FC<APIClientProviderProps> = (props) => {
-  const { apiClient, children } = props;
-  return <APIClientContext.Provider value={apiClient}>{children}</APIClientContext.Provider>;
-};

package/src/api-client/__tests__/APIClient.test.tsx

@@ -1,26 +0,0 @@
-import axios from 'axios';
-import { APIClient } from '../APIClient';
-
-describe('APIClient', () => {
-  describe('axios', () => {
-    it('case 1', () => {
-      const apiClient = new APIClient();
-      expect(apiClient.axios).toBeDefined();
-      expect(typeof apiClient.axios).toBe('function');
-      expect(typeof apiClient.axios.request).toBe('function');
-    });
-
-    it('case 2', () => {
-      const apiClient = new APIClient({
-        baseURL: 'http://localhost/api/',
-      });
-      expect(apiClient.axios.defaults.baseURL).toBe('http://localhost/api/');
-    });
-
-    it('case 3', () => {
-      const instance = axios.create();
-      const apiClient = new APIClient(instance);
-      expect(apiClient.axios).toBe(instance);
-    });
-  })
-});

package/src/api-client/context.ts

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-import { APIClient } from './APIClient';
-
-export const APIClientContext = createContext<APIClient>(new APIClient());

package/src/api-client/demos/demo1.tsx

@@ -1,24 +0,0 @@
-import { APIClient, APIClientProvider, compose, useRequest } from '@nocobase/client';
-import MockAdapter from 'axios-mock-adapter';
-import React from 'react';
-
-const apiClient = new APIClient();
-
-const mock = new MockAdapter(apiClient.axios);
-
-mock.onGet('/users:get').reply(200, {
-  data: { id: 1, name: 'John Smith' },
-});
-
-const providers = [
-  [APIClientProvider, { apiClient }]
-];
-
-export default compose(...providers)(() => {
-  const { data } = useRequest({
-    resource: 'users',
-    action: 'get',
-    params: {},
-  });
-  return <div>{data?.data?.name}</div>;
-});

package/src/api-client/demos/demo2.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import MockAdapter from 'axios-mock-adapter';
-import { APIClient, APIClientProvider, useRequest, compose } from '@nocobase/client';
-
-const apiClient = new APIClient();
-
-const mock = new MockAdapter(apiClient.axios);
-
-mock.onGet('/users:get').reply(200, {
-  data: { id: 1, name: 'John Smith' },
-});
-
-const providers = [
-  [APIClientProvider, { apiClient }]
-];
-
-export default compose(...providers)(() => {
-  const { data } = useRequest({
-    url: 'users:get',
-    method: 'get',
-  });
-  return <div>{data?.data?.name}</div>;
-});

package/src/api-client/demos/demo3.tsx

@@ -1,67 +0,0 @@
-import { uid } from '@formily/shared';
-import { APIClient, APIClientProvider, useAPIClient, useRequest } from '@nocobase/client';
-import { Button, Input, Space, Table } from 'antd';
-import MockAdapter from 'axios-mock-adapter';
-import React from 'react';
-
-const apiClient = new APIClient();
-
-const mock = new MockAdapter(apiClient.axios);
-const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));
-
-mock.onGet('/users:list').reply(async () => {
-  await sleep(1000);
-  return [
-    200,
-    {
-      data: [
-        { id: 1, name: uid() },
-        { id: 2, name: uid() },
-      ],
-    },
-  ];
-});
-
-const ComponentA = () => {
-  console.log('ComponentA');
-  const { data, loading } = useRequest(
-    {
-      url: 'users:list',
-      method: 'get',
-    },
-    {
-      uid: 'test', // 当指定了 uid 的 useRequest 的结果，可以通过 api.service(uid) 获取
-    },
-  );
-  return (
-    <Table
-      pagination={false}
-      rowKey={'id'}
-      loading={loading}
-      dataSource={data?.data}
-      columns={[{ title: 'Name', dataIndex: 'name' }]}
-    />
-  );
-};
-
-const ComponentB = () => {
-  console.log('ComponentB');
-  const apiClient = useAPIClient();
-  return (
-    <Space>
-      <Input />
-      <Button onClick={() => apiClient.service('test')?.run()}>提交</Button>
-    </Space>
-  );
-};
-
-export default () => {
-  return (
-    <APIClientProvider apiClient={apiClient}>
-      <ComponentB />
-      <br />
-      <br />
-      <ComponentA />
-    </APIClientProvider>
-  );
-};

package/src/api-client/hooks/assign.ts

@@ -1,118 +0,0 @@
-import deepmerge from 'deepmerge';
-import uniq from 'lodash/uniq';
-
-type MergeStrategyType = 'merge' | 'deepMerge' | 'overwrite' | 'andMerge' | 'orMerge' | 'intersect' | 'union';
-type MergeStrategyFunc = (x: any, y: any) => any;
-
-export type MergeStrategy = MergeStrategyType | MergeStrategyFunc;
-
-export interface MergeStrategies {
-  [key: string]: MergeStrategy;
-}
-
-export default function isPlainObject(value) {
-  if (Object.prototype.toString.call(value) !== '[object Object]') {
-    return false;
-  }
-
-  const prototype = Object.getPrototypeOf(value);
-  return prototype === null || prototype === Object.prototype;
-}
-
-function getEnumerableOwnPropertySymbols(target: any): any[] {
-  return Object.getOwnPropertySymbols
-    ? Object.getOwnPropertySymbols(target).filter((symbol) => target.propertyIsEnumerable(symbol))
-    : [];
-}
-
-function getKeys(target: any) {
-  return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
-}
-
-export const mergeStrategies = new Map<MergeStrategyType, MergeStrategyFunc>();
-
-mergeStrategies.set('overwrite', (_, y) => {
-  return y;
-});
-
-mergeStrategies.set('andMerge', (x, y) => {
-  if (!x && !y) {
-    return;
-  }
-  if (!x) {
-    return y;
-  }
-  if (!y) {
-    return x;
-  }
-  return {
-    $and: [x, y],
-  };
-});
-
-mergeStrategies.set('orMerge', (x, y) => {
-  if (!x && !y) {
-    return;
-  }
-  if (!x) {
-    return y;
-  }
-  if (!y) {
-    return x;
-  }
-  return {
-    $or: [x, y],
-  };
-});
-
-mergeStrategies.set('deepMerge', (x, y) => {
-  return isPlainObject(x) && isPlainObject(y)
-    ? deepmerge(x, y, {
-        arrayMerge: (x, y) => y,
-      })
-    : y;
-});
-
-mergeStrategies.set('merge', (x, y) => {
-  return isPlainObject(x) && isPlainObject(y) ? Object.assign(x, y) : y;
-});
-
-mergeStrategies.set('union', (x, y) => {
-  if (typeof x === 'string') {
-    x = x.split(',');
-  }
-  if (typeof y === 'string') {
-    y = y.split(',');
-  }
-  return uniq((x || []).concat(y || []));
-});
-
-mergeStrategies.set('intersect', (x, y) => {
-  if (typeof x === 'string') {
-    x = x.split(',');
-  }
-  if (typeof y === 'string') {
-    y = y.split(',');
-  }
-  if (!Array.isArray(x) || x.length === 0) {
-    return y || [];
-  }
-  if (!Array.isArray(y) || y.length === 0) {
-    return x || [];
-  }
-  return x.filter((v) => y.includes(v));
-});
-
-export function assign(target: any, source: any, strategies: MergeStrategies = {}) {
-  getKeys(source).forEach((sourceKey) => {
-    const strategy = strategies[sourceKey];
-    let func = mergeStrategies.get('deepMerge');
-    if (typeof strategy === 'function') {
-      func = strategy;
-    } else if (typeof strategy === 'string' && mergeStrategies.has(strategy as any)) {
-      func = mergeStrategies.get(strategy as any);
-    }
-    target[sourceKey] = func(target[sourceKey], source[sourceKey]);
-  });
-  return target;
-}

package/src/api-client/hooks/index.ts

@@ -1,4 +0,0 @@
-export * from './useAPIClient';
-export * from './useRequest';
-export * from './useResource';
-

package/src/api-client/hooks/useAPIClient.ts

@@ -1,6 +0,0 @@
-import { useContext } from 'react';
-import { APIClientContext } from '../context';
-
-export function useAPIClient() {
-  return useContext(APIClientContext);
-}

package/src/api-client/hooks/useRequest.ts

@@ -1,63 +0,0 @@
-import { merge } from '@formily/shared';
-import { useSetState } from 'ahooks';
-import { default as useReq } from 'ahooks/lib/useRequest';
-import { Options } from 'ahooks/lib/useRequest/src/types';
-import { AxiosRequestConfig } from 'axios';
-import cloneDeep from 'lodash/cloneDeep';
-import { useContext } from 'react';
-import { APIClientContext } from '../context';
-import { assign } from './assign';
-
-type FunctionService = (...args: any[]) => Promise<any>;
-
-type ResourceActionOptions<P = any> = {
-  resource?: string;
-  resourceOf?: any;
-  action?: string;
-  params?: P;
-};
-
-export function useRequest<P>(
-  service: AxiosRequestConfig<P> | ResourceActionOptions<P> | FunctionService,
-  options: Options<any, any> & { uid?: string } = {},
-) {
-  // 缓存用途
-  const [state, setState] = useSetState({});
-  const api = useContext(APIClientContext);
-  if (typeof service === 'function') {
-    const result = useReq(service, {
-      ...options,
-      onSuccess(...args) {
-        options.onSuccess?.(...args);
-        if (options.uid) {
-          api.services[options.uid] = result;
-        }
-      },
-    });
-    return { ...result, state, setState };
-  }
-  const result = useReq(
-    async (params = {}) => {
-      const { resource } = service as ResourceActionOptions;
-      let args = cloneDeep(service);
-      if (resource) {
-        args.params = args.params || {};
-        assign(args.params, params);
-      } else {
-        args = merge(args, params);
-      }
-      const response = await api.request(args);
-      return response?.data;
-    },
-    {
-      ...options,
-      onSuccess(...args) {
-        options.onSuccess?.(...args);
-        if (options.uid) {
-          api.services[options.uid] = result;
-        }
-      },
-    },
-  );
-  return { ...result, state, setState };
-}

package/src/api-client/hooks/useResource.ts

@@ -1,7 +0,0 @@
-import { useContext } from 'react';
-import { APIClientContext } from '../context';
-
-export function useResource(name: string, of?: string | number) {
-  const apiClient = useContext(APIClientContext);
-  return apiClient.resource(name, of);
-}

package/src/api-client/index.md

@@ -1,174 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /client
----
-
-# APIClient
-
-## APIClient
-
-```ts
-class APIClient {
-  // axios 实例
-  axios: AxiosInstance;
-  // 缓存带 uid 的 useRequest({}, {uid}) 的结果，可供其他组件调用
-  services: Record<string, Result<any, any>>;
-  // 构造器
-  constructor(instance?: AxiosInstance | AxiosRequestConfig);
-  // 客户端请求，支持 AxiosRequestConfig 和 ResourceActionOptions
-  request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D> | ResourceActionOptions): Promise<R>;
-  // 获取资源
-  resource<R = IResource>(name: string, of?: any): R;
-}
-```
-
-示例
-
-```ts
-import axios from 'axios';
-
-// 不传参时，内部直接创建 axios 实例
-const apiClient = new APIClient();
-
-// 提供 AxiosRequestConfig 配置参数
-const apiClient = new APIClient({
-  baseURL: '',
-});
-
-// 提供 AxiosInstance
-const instance = axios.create({
-  baseURL: '',
-});
-const apiClient = new APIClient(instance);
-
-// 常规请求
-const response = await apiClient.request({ url });
-
-// NocoBase 特有的资源操作
-const response = await apiClient.resource('posts').list();
-
-// 请求共享
-const { data, loading, run } = apiClient.service('uid');
-```
-
-`api.service(uid)` 的例子，ComponentB 里刷新 ComponentA 的请求数据
-
-<code src="./demos/demo3.tsx" />
-
-## APIClientProvider
-
-提供 APIClient 实例的上下文。
-
-```tsx | pure
-const apiClient = new APIClient();
-
-<APIClientProvider apiClient={apiClient}></APIClientProvider>
-```
-
-## useAPIClient
-
-获取当前上下文的 APIClient 实例。
-
-```ts
-const apiClient = useAPIClient();
-```
-
-## useRequest
-
-```ts
-function useRequest<P>(
-  service: AxiosRequestConfig<P> | ResourceActionOptions<P> | FunctionService,
-  options?: Options<any, any>,
-);
-```
-
-支持 `axios.request(config)`，config 详情查看 [axios](https://github.com/axios/axios#request-config)
-
-```ts
-const { data, loading, refresh, run, params } = useRequest({ url: '/users' });
-
-// useRequest 里传的是 AxiosRequestConfig，所以 run 里传的也是 AxiosRequestConfig
-run({
-  params: {
-    pageSize: 20,
-  }
-});
-```
-
-例子如下：
-
-<code src="./demos/demo2.tsx" />
-
-或者是 NocoBase 的 resource & action 请求：
-
-```ts
-const { data, run } = useRequest({
-  resource: 'users',
-  action: 'list',
-  params: {
-    pageSize: 20,
-  },
-});
-
-// useRequest 传的是 ResourceActionOptions，所以 run 直接传 action params 就可以了。
-run({
-  pageSize: 50,
-});
-```
-
-例子如下：
-
-<code src="./demos/demo1.tsx" />
-
-也可以是自定义的异步函数：
-
-```ts
-const { data, loading, run, refresh, params } = useRequest((...params) => Promise.resolve({}));
-
-run(...params);
-```
-
-更多用法查看 ahooks 的 [useRequest()](https://ahooks.js.org/hooks/use-request/index)
-
-## useResource
-
-```ts
-function useResource(name: string, of?: string | number): IResource;
-```
-
-资源是 NocoBase 的核心概念，包括：
-
-- 独立资源，如 `posts`
-- 关系资源，如 `posts.tags` `posts.user` `posts.comments`
-
-资源 URI
-
-```bash
-# 独立资源，文章
-/api/posts
-# 关系资源，文章 ID=1 的评论
-/api/posts/1/comments
-```
-
-通过 APIClient 获取资源
-
-```ts
-const api = new APIClient();
-
-api.resource('posts');
-api.resource('posts.comments', 1);
-```
-
-useResource 用法：
-
-```ts
-const resource = useResource('posts');
-const resource = useResource('posts.comments', 1);
-```
-
-resource 的实际场景用例参见：
-
-- [useCollection()](collection-manager#usecollection)
-- [useCollectionField()](collection-manager#usecollectionfield)

package/src/api-client/index.tsx

@@ -1,3 +0,0 @@
-export * from './hooks';
-export * from './APIClient';
-export * from './APIClientProvider';