amis 1.4.2-beta.1 → 1.4.2-beta.15

package/src/types.ts

@@ -1,3 +1,4 @@
+import type {ActionSchema} from './renderers/Action';
 import {SchemaApiObject} from './Schema';
 
 export interface ApiObject extends SchemaApiObject {
@@ -30,7 +31,7 @@ export interface fetcherResult {
 }
 
 export interface fetchOptions {
-  method?: 'get' | 'post' | 'put' | 'patch' | 'delete';
+  method?: 'get' | 'post' | 'put' | 'patch' | 'delete' | 'jsonp';
   successMessage?: string;
   errorMessage?: string;
   autoAppend?: boolean;
@@ -157,3 +158,59 @@ export interface JSONSchema {
 // export type ExtractProps<
 //   TComponentOrTProps
 // > = TComponentOrTProps extends React.ComponentType<infer P> ? P : never;
+
+/**
+ * 事件跟踪的定义
+ */
+export interface EventTrack {
+  /**
+   * 事件类型，目前有以下几种
+   *
+   * api: 所有 fetcher 前调用
+   * url: 打开外部链接，组件有可能是 action 也有可能是 link
+   * link: 打开内部链接
+   * dialog: action 的弹框
+   * drawer: action 的抽出式弹框
+   * copy: action 里的复制
+   * reload: action 里的 reload
+   * email: action 里的 email
+   * prev: action 里的 prev
+   * next: action 里的 next
+   * cancel: action 里的 cancel
+   * close: action 里的 close
+   * submit: 有可能是 action 里的 submit，也有可能是表单提交
+   * confirm: action 里的 confirm
+   * add: action 里的 add
+   * reset: action 里的 reset
+   * reset-and-submit: action 里的 reset-and-submit
+   * formItemChange: 表单项内容变化
+   * formError: 表单验证失败
+   * formSubmit: 表单成功提交，在表单验证成功之后才会触发，这个可能会和 api 重合
+   * tabChange: tab 切换
+   * netError: api 报错
+   */
+  eventType:
+    | 'api'
+    | 'url'
+    | 'link'
+    | 'dialog'
+    | 'drawer'
+    | 'copy'
+    | 'reload'
+    | 'email'
+    | 'prev'
+    | 'next'
+    | 'cancel'
+    | 'close'
+    | 'submit'
+    | 'confirm'
+    | 'reset'
+    | 'reset-and-submit'
+    | 'formItemChange'
+    | 'tabChange';
+
+  /**
+   * 事件数据
+   */
+  eventData: ActionSchema | Api;
+}

package/src/utils/api.ts

@@ -1,6 +1,7 @@
-import {Api, ApiObject, fetcherResult, Payload} from '../types';
+import omit from 'lodash/omit';
+import {Api, ApiObject, EventTrack, fetcherResult, Payload} from '../types';
 import {fetcherConfig} from '../factory';
-import {tokenize, dataMapping} from './tpl-builtin';
+import {tokenize, dataMapping, escapeHtml} from './tpl-builtin';
 import {evalExpression} from './tpl';
 import {
   isObject,
@@ -10,10 +11,12 @@ import {
   qsstringify,
   cloneObject,
   createObject,
-  qsparse
+  qsparse,
+  uuid
 } from './helper';
+import isPlainObject from 'lodash/isPlainObject';
 
-const rSchema = /(?:^|raw\:)(get|post|put|delete|patch|options|head):/i;
+const rSchema = /(?:^|raw\:)(get|post|put|delete|patch|options|head|jsonp):/i;
 
 interface ApiCacheConfig extends ApiObject {
   cachedPromise: Promise<any>;
@@ -61,6 +64,23 @@ export function buildApi(
   };
   api.method = (api.method || (options as any).method || 'get').toLowerCase();
 
+  if (api.headers) {
+    api.headers = dataMapping(api.headers, data, undefined, false);
+  }
+
+  if (api.requestAdaptor && typeof api.requestAdaptor === 'string') {
+    api.requestAdaptor = str2function(api.requestAdaptor, 'api') as any;
+  }
+
+  if (api.adaptor && typeof api.adaptor === 'string') {
+    api.adaptor = str2function(
+      api.adaptor,
+      'payload',
+      'response',
+      'api'
+    ) as any;
+  }
+
   if (!data) {
     return api;
   } else if (
@@ -106,7 +126,7 @@ export function buildApi(
   }
 
   // get 类请求，把 data 附带到 url 上。
-  if (api.method === 'get') {
+  if (api.method === 'get' || api.method === 'jsonp') {
     if (!~raw.indexOf('$') && !api.data && autoAppend) {
       api.query = api.data = data;
     } else if (
@@ -144,23 +164,6 @@ export function buildApi(
     }
   }
 
-  if (api.headers) {
-    api.headers = dataMapping(api.headers, data, undefined, false);
-  }
-
-  if (api.requestAdaptor && typeof api.requestAdaptor === 'string') {
-    api.requestAdaptor = str2function(api.requestAdaptor, 'api') as any;
-  }
-
-  if (api.adaptor && typeof api.adaptor === 'string') {
-    api.adaptor = str2function(
-      api.adaptor,
-      'payload',
-      'response',
-      'api'
-    ) as any;
-  }
-
   return api;
 }
 
@@ -193,11 +196,26 @@ export function str2AsyncFunction(
 }
 
 export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
-  const data = ret.data;
+  let data = ret.data;
   let hasStatusField = true;
 
   if (!data) {
-    throw new Error('Response is empty!');
+    throw new Error('Response is empty');
+  }
+
+  if (typeof data === 'string') {
+    try {
+      data = JSON.parse(data);
+      if (typeof data === 'undefined') {
+        throw new Error('Response should be JSON');
+      }
+    } catch (e) {
+      const responseBrief =
+        typeof data === 'string'
+          ? escapeHtml((data as string).substring(0, 100))
+          : '';
+      throw new Error(`Response should be JSON\n ${responseBrief}`);
+    }
   }
 
   // 兼容几种常见写法
@@ -245,7 +263,7 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
   }
 
   if (payload.ok && api.responseData) {
-    payload.data = dataMapping(
+    const responseData = dataMapping(
       api.responseData,
 
       createObject(
@@ -259,13 +277,16 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
       undefined,
       api.convertKeyToPath
     );
+    console.debug('responseData', responseData);
+    payload.data = responseData;
   }
 
   return payload;
 }
 
 export function wrapFetcher(
-  fn: (config: fetcherConfig) => Promise<fetcherResult>
+  fn: (config: fetcherConfig) => Promise<fetcherResult>,
+  tracker?: (eventTrack: EventTrack, data: any) => void
 ): (api: Api, data: object, options?: object) => Promise<Payload | void> {
   return function (api, data, options) {
     api = buildApi(api, data, options) as ApiObject;
@@ -295,6 +316,15 @@ export function wrapFetcher(
       api.headers['Content-Type'] = 'application/json';
     }
 
+    tracker?.(
+      {eventType: 'api', eventData: omit(api, ['config', 'data', 'body'])},
+      api.data
+    );
+
+    if (api.method?.toLocaleLowerCase() === 'jsonp') {
+      return wrapAdaptor(jsonpFetcher(api), api);
+    }
+
     if (typeof api.cache === 'number' && api.cache > 0) {
       const apiCache = getApiCache(api);
       return wrapAdaptor(
@@ -337,6 +367,71 @@ export function wrapAdaptor(promise: Promise<fetcherResult>, api: ApiObject) {
     : promise.then(ret => responseAdaptor(ret, api));
 }
 
+export function jsonpFetcher(api: ApiObject): Promise<fetcherResult> {
+  return new Promise((resolve, reject) => {
+    let script: HTMLScriptElement | null = document.createElement('script');
+    let src = api.url;
+
+    script.async = true;
+
+    function remove() {
+      if (script) {
+        // @ts-ignore
+        script.onload = script.onreadystatechange = script.onerror = null;
+
+        if (script.parentNode) {
+          script.parentNode.removeChild(script);
+        }
+
+        script = null;
+      }
+    }
+
+    const jsonp = api.query?.callback || 'axiosJsonpCallback' + uuid();
+    const old = (window as any)[jsonp];
+
+    (window as any)[jsonp] = function (responseData: any) {
+      (window as any)[jsonp] = old;
+
+      const response = {
+        data: responseData,
+        status: 200,
+        headers: {}
+      };
+
+      resolve(response);
+    };
+
+    const additionalParams: any = {
+      _: new Date().getTime(),
+      _callback: jsonp
+    };
+
+    src += (src.indexOf('?') >= 0 ? '&' : '?') + qsstringify(additionalParams);
+
+    // @ts-ignore IE 为script.onreadystatechange
+    script.onload = script.onreadystatechange = function () {
+      // @ts-ignore
+      if (!script.readyState || /loaded|complete/.test(script.readyState)) {
+        remove();
+      }
+    };
+
+    script.onerror = function () {
+      remove();
+      const errResponse = {
+        status: 0,
+        headers: {}
+      };
+
+      reject(errResponse);
+    };
+
+    script.src = src;
+    document.head.appendChild(script);
+  });
+}
+
 export function isApiOutdated(
   prevApi: Api | undefined,
   nextApi: Api | undefined,
@@ -469,4 +564,16 @@ export function clearApiCache() {
   apiCaches.splice(0, apiCaches.length);
 }
 
+export function normalizeApiResponseData(data: any) {
+  if (typeof data === 'undefined') {
+    data = {};
+  } else if (!isPlainObject(data)) {
+    data = {
+      [Array.isArray(data) ? 'items' : 'result']: data
+    };
+  }
+
+  return data;
+}
+
 // window.apiCaches = apiCaches;

package/src/utils/dom.tsx

@@ -267,3 +267,15 @@ export function calculatePosition(
     activePlacement
   };
 }
+
+/**
+ * 专门用来获取样式的像素值，默认返回 0
+ */
+export function getStyleNumber(element: HTMLElement, styleName: string) {
+  if (!element) {
+    return 0;
+  }
+  return (
+    parseInt(getComputedStyle(element).getPropertyValue(styleName), 10) || 0
+  );
+}

package/src/utils/helper.ts

@@ -16,6 +16,14 @@ import {
 } from './tpl-builtin';
 import {isObservable} from 'mobx';
 
+export function isMobile() {
+  return (window as any).matchMedia?.('(max-width: 768px)').matches;
+}
+
+export function range(num: number, min: number, max: number): number {
+  return Math.min(Math.max(num, min), max);
+}
+
 // 方便取值的时候能够把上层的取到，但是获取的时候不会全部把所有的数据获取到。
 export function createObject(
   superProps?: {[propName: string]: any},
@@ -1698,3 +1706,22 @@ export function isClickOnInput(e: React.MouseEvent<HTMLElement>) {
   }
   return false;
 }
+
+/**
+ * 遍历 schema
+ * @param json
+ * @param mapper
+ */
+export function JSONTraverse(
+  json: any,
+  mapper: (value: any, key: string | number, host: Object) => any
+) {
+  Object.keys(json).forEach(key => {
+    const value: any = json[key];
+    if (isPlainObject(value) || Array.isArray(value)) {
+      JSONTraverse(value, mapper);
+    } else {
+      mapper(value, key, json);
+    }
+  });
+}

package/src/utils/icon.tsx

@@ -17,6 +17,10 @@ export const generateIcon = (
   className?: string,
   classNameProp?: string
 ) => {
+  if (React.isValidElement(icon)) {
+    return icon;
+  }
+
   const isURLIcon = icon?.indexOf('.') !== -1;
 
   return icon ? (

package/tsconfig-for-declaration.json

@@ -3,7 +3,7 @@
     "outDir": "output/",
     "module": "commonjs",
     "target": "es5",
-    "lib": ["es6", "dom", "ES2015"],
+    "lib": ["ES6", "DOM", "ES2015", "ES2021"],
     "sourceMap": true,
     "jsx": "react",
     "moduleResolution": "node",