@nocobase/client 0.7.0-alpha.9 → 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,33 +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 { useRequest } from '../api-client';
-
-export function AntdConfigProvider(props) {
-  const { remoteLocale, ...others } = props;
-  const { i18n } = useTranslation();
-  const { loading } = useRequest(
-    {
-      url: 'app:getLang',
-    },
-    {
-      onSuccess(data) {
-        const locale = localStorage.getItem('NOCOBASE_LANG');
-        if (data?.data?.lang && !locale) {
-          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,123 +0,0 @@
-import { observable } from '@formily/reactive';
-import { Result } from 'ahooks/lib/useRequest/src/types';
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
-import Cookies from 'js-cookie';
-import qs from 'qs';
-
-export interface ActionParams {
-  filterByTk?: any;
-  [key: string]: any;
-}
-
-type ResourceActionOptions<P = any> = {
-  resource?: string;
-  resourceOf?: any;
-  action?: string;
-  params?: P;
-};
-
-export interface IResource {
-  list?: (params?: ActionParams) => Promise<any>;
-  get?: (params?: ActionParams) => Promise<any>;
-  create?: (params?: ActionParams) => Promise<any>;
-  update?: (params?: ActionParams) => Promise<any>;
-  destroy?: (params?: ActionParams) => Promise<any>;
-  [key: string]: (params?: ActionParams) => Promise<any>;
-}
-
-export class APIClient {
-  axios: AxiosInstance;
-
-  services: Record<string, Result<any, any>>;
-
-  tokenKey = 'NOCOBASE_TOKEN';
-
-  constructor(instance?: AxiosInstance | AxiosRequestConfig) {
-    this.services = observable({});
-    if (typeof instance === 'function') {
-      this.axios = instance;
-    } else {
-      this.axios = axios.create(instance);
-    }
-    this.qsMiddleware();
-    this.authMiddleware();
-  }
-
-  qsMiddleware() {
-    this.axios.interceptors.request.use((config) => {
-      config.paramsSerializer = (params) => {
-        return qs.stringify(params, {
-          strictNullHandling: true,
-          arrayFormat: 'brackets',
-        });
-      };
-      return config;
-    });
-  }
-
-  // TODO
-  authMiddleware() {
-    this.axios.interceptors.request.use((config) => {
-      const token = localStorage.getItem(this.tokenKey);
-      config.headers['X-Hostname'] = window.location.hostname;
-      if (token) {
-        config.headers['Authorization'] = `Bearer ${token}`;
-      }
-      const currentRoleName = Cookies.get('currentRoleName');
-      if (currentRoleName) {
-        config.headers['X-Role'] = currentRoleName;
-      }
-      return config;
-    });
-  }
-
-  // TODO
-  setBearerToken(token: any) {
-    localStorage.setItem(this.tokenKey, token || '');
-    Cookies.remove('currentRoleName');
-  }
-
-  service(uid: string): Result<any, any> {
-    return this.services[uid];
-  }
-
-  request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D> | ResourceActionOptions): Promise<R> {
-    const { resource, resourceOf, action, params } = config as any;
-    if (resource) {
-      return this.resource(resource, resourceOf)[action](params);
-    }
-    return this.axios.request<T, R, D>(config);
-  }
-
-  resource(name: string, of?: any): IResource {
-    const target = {};
-    const handler = {
-      get: (_: any, actionName: string) => {
-        let url = name.split('.').join(`/${of || '_'}/`);
-        url += `:${actionName}`;
-        const config: AxiosRequestConfig = { url };
-        if (['get', 'list'].includes(actionName)) {
-          config['method'] = 'get';
-        } else {
-          config['method'] = 'post';
-        }
-        return async (params?: ActionParams) => {
-          const { values, filter, ...others } = params || {};
-          config['params'] = others;
-          if (filter) {
-            if (typeof filter === 'string') {
-              config['params']['filter'] = filter;
-            } else {
-              config['params']['filter'] = JSON.stringify(filter);
-            }
-          }
-          if (config.method !== 'get') {
-            config['data'] = values || {};
-          }
-          return await this.request(config);
-        };
-      },
-    };
-    return new Proxy(target, handler);
-  }
-}

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);
-}