amis 1.4.1 → 1.4.2-beta.13

package/src/store/service.ts

@@ -3,6 +3,7 @@ import {iRendererStore} from './iRenderer';
 import {Api, ApiObject, Payload, fetchOptions} from '../types';
 import {extendObject, isEmpty, isObject} from '../utils/helper';
 import {ServerError} from '../utils/errors';
+import {normalizeApiResponseData} from '../utils/api';
 
 export const ServiceStore = iRendererStore
   .named('ServiceStore')
@@ -96,7 +97,7 @@ export const ServiceStore = iRendererStore
           let replace = !!(api as ApiObject).replaceData;
           let data = {
             ...(replace ? {} : self.data),
-            ...json.data
+            ...normalizeApiResponseData(json.data)
           };
           reInitData(data, replace);
           self.hasRemoteData = true;
@@ -176,7 +177,7 @@ export const ServiceStore = iRendererStore
 
           json.data &&
             self.updateData(
-              json.data,
+              normalizeApiResponseData(json.data),
               undefined,
               !!(api as ApiObject).replaceData
             );
@@ -264,7 +265,7 @@ export const ServiceStore = iRendererStore
 
           json.data &&
             self.updateData(
-              json.data,
+              normalizeApiResponseData(json.data),
               undefined,
               !!(api as ApiObject).replaceData
             );
@@ -406,7 +407,7 @@ export const ServiceStore = iRendererStore
               : {
                   type: 'wrapper',
                   wrap: false,
-                  ...json.data
+                  ...normalizeApiResponseData(json.data)
                 };
             self.schemaKey = '' + Date.now();
             isObject(json.data.data) &&

package/src/store/table.ts

@@ -45,6 +45,7 @@ export const Column = types
     checkdisable: false,
     isPrimary: false,
     searchable: types.maybe(types.frozen()),
+    enableSearch: true,
     sortable: false,
     filterable: types.optional(types.frozen(), undefined),
     fixed: '',
@@ -66,8 +67,13 @@ export const Column = types
 
       table.persistSaveToggledColumns();
     },
+
     setToggled(value: boolean) {
       self.toggled = value;
+    },
+
+    setEnableSearch(value: boolean) {
+      self.enableSearch = value;
     }
   }));
 
@@ -292,6 +298,10 @@ export const TableStore = iRendererStore
     keepItemSelectionOnPageChange: false
   })
   .views(self => {
+    function getColumnsExceptBuiltinTypes() {
+      return self.columns.filter(item => !/^__/.test(item.type));
+    }
+
     function getForms() {
       return self.formsRef.map(item => ({
         store: getStoreById(item.id) as IFormStore,
@@ -414,12 +424,12 @@ export const TableStore = iRendererStore
       return getMovedRows().length;
     }
 
-    function getHoverIndex(): number {
-      return self.rows.findIndex(item => item.isHover);
+    function getHovedRow(): IRow | undefined {
+      return flattenTree<IRow>(self.rows).find((item: IRow) => item.isHover);
     }
 
     function getUnSelectedRows() {
-      return self.rows.filter(item => !item.checked);
+      return flattenTree<IRow>(self.rows).filter((item: IRow) => !item.checked);
     }
 
     function getData(superData: any): any {
@@ -499,11 +509,37 @@ export const TableStore = iRendererStore
       });
     }
 
+    function getFirstToggledColumnIndex() {
+      const column = self.columns.find(
+        column => !/^__/.test(column.type) && column.toggled
+      );
+
+      return column == null ? null : column.index;
+    }
+
+    function getSearchableColumns() {
+      return self.columns.filter(
+        column => column.searchable && isObject(column.searchable)
+      );
+    }
+
     return {
+      get columnsData() {
+        return getColumnsExceptBuiltinTypes();
+      },
+
       get forms() {
         return getForms();
       },
 
+      get searchableColumns() {
+        return getSearchableColumns();
+      },
+
+      get activedSearchableColumns() {
+        return getSearchableColumns().filter(column => column.enableSearch);
+      },
+
       get filteredColumns() {
         return getFilteredColumns();
       },
@@ -568,7 +604,9 @@ export const TableStore = iRendererStore
       },
 
       get checkableRows() {
-        return self.rows.filter(item => item.checkable);
+        return flattenTree<IRow>(self.rows).filter(
+          (item: IRow) => item.checkable
+        );
       },
 
       get expandableRows() {
@@ -583,8 +621,8 @@ export const TableStore = iRendererStore
         return getMovedRows();
       },
 
-      get hoverIndex() {
-        return getHoverIndex();
+      get hoverRow() {
+        return getHovedRow();
       },
 
       get disabledHeadCheckbox() {
@@ -598,6 +636,10 @@ export const TableStore = iRendererStore
         return maxLength === selectedLength;
       },
 
+      get firstToggledColumnIndex() {
+        return getFirstToggledColumnIndex();
+      },
+
       getData,
 
       get columnGroup() {
@@ -716,6 +758,51 @@ export const TableStore = iRendererStore
       }
     }
 
+    function updateColumns(columns: Array<SColumn>) {
+      if (columns && Array.isArray(columns)) {
+        columns = columns.filter(column => column).concat();
+
+        if (!columns.length) {
+          columns.push({
+            type: 'text',
+            label: '空'
+          });
+        }
+
+        columns.unshift({
+          type: '__expandme',
+          toggable: false,
+          className: 'Table-expandCell'
+        });
+
+        columns.unshift({
+          type: '__checkme',
+          fixed: 'left',
+          toggable: false,
+          className: 'Table-checkCell'
+        });
+
+        columns.unshift({
+          type: '__dragme',
+          toggable: false,
+          className: 'Table-dragCell'
+        });
+
+        columns = columns.map((item, index) => ({
+          ...item,
+          index,
+          rawIndex: index - 3,
+          type: item.type || 'plain',
+          pristine: item.pristine || item,
+          toggled: item.toggled !== false,
+          breakpoint: item.breakpoint,
+          isPrimary: index === 3
+        }));
+
+        self.columns.replace(columns as any);
+      }
+    }
+
     function combineCell(arr: Array<SRow>, keys: Array<string>): Array<SRow> {
       if (!keys.length || !arr.length) {
         return arr;
@@ -938,9 +1025,10 @@ export const TableStore = iRendererStore
 
     function updateSelected(selected: Array<any>, valueField?: string) {
       self.selectedRows.clear();
-      self.rows.forEach(item => {
+
+      eachTree(self.rows, item => {
         if (~selected.indexOf(item.pristine)) {
-          self.selectedRows.push(item);
+          self.selectedRows.push(item.id);
         } else if (
           find(
             selected,
@@ -949,9 +1037,10 @@ export const TableStore = iRendererStore
               a[valueField || 'value'] == item.pristine[valueField || 'value']
           )
         ) {
-          self.selectedRows.push(item);
+          self.selectedRows.push(item.id);
         }
       });
+
       updateCheckDisable();
     }
 
@@ -1031,8 +1120,10 @@ export const TableStore = iRendererStore
         if (idx === -1) {
           // 如果上一个是选中状态，则将之间的所有 check 都变成可选
           if (lastCheckedRow.checked) {
-            if (maxLength && self.selectedRows.length < maxLength) {
-              self.selectedRows.push(rowItem);
+            if (maxLength) {
+              if (self.selectedRows.length < maxLength) {
+                self.selectedRows.push(rowItem);
+              }
             } else {
               self.selectedRows.push(rowItem);
             }
@@ -1177,6 +1268,7 @@ export const TableStore = iRendererStore
 
     return {
       update,
+      updateColumns,
       initRows,
       updateSelected,
       toggleAll,

package/src/types.ts

@@ -1,3 +1,4 @@
+import type {ActionSchema} from './renderers/Action';
 import {SchemaApiObject} from './Schema';
 
 export interface ApiObject extends SchemaApiObject {
@@ -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,4 +1,5 @@
-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 {evalExpression} from './tpl';
@@ -12,6 +13,7 @@ import {
   createObject,
   qsparse
 } from './helper';
+import isPlainObject from 'lodash/isPlainObject';
 
 const rSchema = /(?:^|raw\:)(get|post|put|delete|patch|options|head):/i;
 
@@ -61,6 +63,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 (
@@ -82,7 +101,9 @@ export function buildApi(
     );
     api.url =
       tokenize(api.url.substring(0, idx + 1), data, '| url_encode') +
-      qsstringify((api.query = dataMapping(params, data))) +
+      qsstringify(
+        (api.query = dataMapping(params, data, undefined, api.convertKeyToPath))
+      ) +
       (~hashIdx ? api.url.substring(hashIdx) : '');
   } else {
     api.url = tokenize(api.url, data, '| url_encode');
@@ -93,7 +114,12 @@ export function buildApi(
   }
 
   if (api.data) {
-    api.body = api.data = dataMapping(api.data, data);
+    api.body = api.data = dataMapping(
+      api.data,
+      data,
+      undefined,
+      api.convertKeyToPath
+    );
   } else if (api.method === 'post' || api.method === 'put') {
     api.body = api.data = cloneObject(data);
   }
@@ -137,23 +163,6 @@ export function buildApi(
     }
   }
 
-  if (api.headers) {
-    api.headers = dataMapping(api.headers, data);
-  }
-
-  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;
 }
 
@@ -190,7 +199,7 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
   let hasStatusField = true;
 
   if (!data) {
-    throw new Error('Response is empty!');
+    throw new Error('Response is empty');
   }
 
   // 兼容几种常见写法
@@ -248,7 +257,9 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
               items: payload.data
             }
           : payload.data) || {}
-      )
+      ),
+      undefined,
+      api.convertKeyToPath
     );
   }
 
@@ -256,7 +267,8 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
 }
 
 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;
@@ -286,6 +298,11 @@ export function wrapFetcher(
       api.headers['Content-Type'] = 'application/json';
     }
 
+    tracker?.(
+      {eventType: 'api', eventData: omit(api, ['config', 'data', 'body'])},
+      api.data
+    );
+
     if (typeof api.cache === 'number' && api.cache > 0) {
       const apiCache = getApiCache(api);
       return wrapAdaptor(
@@ -460,4 +477,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/handleAction.ts

@@ -0,0 +1,41 @@
+/**
+ * 后续好多地方可能都要支持 action，所以提取公共功能
+ */
+
+import {RendererProps} from '../factory';
+import {ActionSchema, AjaxActionSchema} from '../renderers/Action';
+import {normalizeApi, str2function} from './api';
+
+export default function handleAction(
+  e: React.MouseEvent<any>,
+  action: ActionSchema,
+  props: RendererProps,
+  data?: any
+) {
+  // https://reactjs.org/docs/legacy-event-pooling.html
+  e.persist();
+
+  const onAction = props.onAction;
+  let onClick: any = action.onClick;
+
+  if (typeof onClick === 'string') {
+    onClick = str2function(onClick, 'event', 'props');
+  }
+  const result: any = onClick && onClick(e, props);
+
+  if (e.isDefaultPrevented() || result === false || !onAction) {
+    return;
+  }
+
+  e.preventDefault();
+
+  // download 是一种 ajax 的简写
+  if (action.actionType === 'download') {
+    action.actionType = 'ajax';
+    const api = normalizeApi((action as AjaxActionSchema).api);
+    api.responseType = 'blob';
+    (action as AjaxActionSchema).api = api;
+  }
+
+  onAction(e, action, data || props.data);
+}

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},
@@ -181,7 +189,8 @@ export function getVariable(
 export function setVariable(
   data: {[propName: string]: any},
   key: string,
-  value: any
+  value: any,
+  convertKeyToPath?: boolean
 ) {
   data = data || {};
 
@@ -190,7 +199,7 @@ export function setVariable(
     return;
   }
 
-  const parts = keyToPath(key);
+  const parts = convertKeyToPath !== false ? keyToPath(key) : [key];
   const last = parts.pop() as string;
 
   while (parts.length) {
@@ -507,7 +516,6 @@ export function isDisabled(
   );
 }
 
-
 export function hasAbility(
   schema: any,
   ability: string,
@@ -1618,7 +1626,7 @@ export function detectPropValueChanged<
 
 // 去掉字符串中的 html 标签，不完全准确但效率比较高
 export function removeHTMLTag(str: string) {
-  return str.replace(/<\/?[^>]+(>|$)/g, '');
+  return typeof str === 'string' ? str.replace(/<\/?[^>]+(>|$)/g, '') : str;
 }
 
 /**

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 ? (