amis 1.4.2-beta.11 → 1.4.2-beta.16

package/src/renderers/Form/index.tsx

@@ -202,6 +202,11 @@ export interface FormSchema extends BaseSchema {
    */
   mode?: 'normal' | 'inline' | 'horizontal';
 
+  /**
+   * 表单项显示为几列
+   */
+  columnCount?: number;
+
   /**
    * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
    */
@@ -347,6 +352,7 @@ export default class Form extends React.Component<FormProps, object> {
       right: 10,
       offset: 2
     },
+    columnCount: 0,
     panelClassName: 'Panel--default',
     messages: {
       fetchFailed: 'fetchFailed',
@@ -367,6 +373,7 @@ export default class Form extends React.Component<FormProps, object> {
     'initFetch',
     'wrapWithPanel',
     'mode',
+    'columnCount',
     'collapsable',
     'horizontal',
     'panelClassName',
@@ -1418,6 +1425,7 @@ export default class Form extends React.Component<FormProps, object> {
       debug,
       $path,
       store,
+      columnCount,
       render
     } = this.props;
 
@@ -1429,7 +1437,12 @@ export default class Form extends React.Component<FormProps, object> {
 
     return (
       <WrapperComponent
-        className={cx(`Form`, `Form--${mode || 'normal'}`, className)}
+        className={cx(
+          `Form`,
+          `Form--${mode || 'normal'}`,
+          columnCount ? `Form--column Form--column-${columnCount}` : null,
+          className
+        )}
         onSubmit={this.handleFormSubmit}
         noValidate
       >

package/src/renderers/GridNav.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {autobind, getPropValue} from '../utils/helper';
+import {isPureVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
+import {
+  BaseSchema,
+  SchemaTokenizeableString,
+  SchemaTpl,
+  SchemaUrlPath
+} from '../Schema';
+import {ActionSchema} from './Action';
+import GridNav, {GridNavDirection, GridNavItem} from '../components/GridNav';
+import {BadgeSchema} from '../components/Badge';
+import handleAction from '../utils/handleAction';
+import {validations} from '../utils/validations';
+
+export interface ListItemSchema extends Omit<BaseSchema, 'type'> {
+  /**
+   * 单项点击事件
+   */
+  clickAction?: ActionSchema;
+
+  /**
+   * 跳转地址
+   */
+  link?: string;
+
+  /**
+   * 打开方式
+   */
+  blank?: string;
+
+  /**
+   * 图片地址
+   */
+  icon?: SchemaUrlPath;
+
+  /**
+   * 描述
+   */
+  text?: SchemaTpl;
+
+  /**
+   * 图标最大宽度比例 0-100
+   */
+  iconRatio?: number;
+
+  /**
+   * 角标
+   */
+  badge?: BadgeSchema;
+}
+
+/**
+ * List 列表展示控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/card
+ */
+export interface ListSchema extends BaseSchema {
+  /**
+   * 指定为 List 列表展示控件。
+   */
+  type: 'grid-nav';
+
+  /**
+   * 列表项类名
+   */
+  itemClassName?: string;
+
+  /**
+   * 静态图片列表配置
+   */
+  options?: Array<ListItemSchema>;
+
+  /**
+   * 是否将列表项固定为正方形
+   */
+  square?: boolean;
+
+  /**
+   * 是否将列表项内容居中显示
+   */
+  center?: boolean;
+
+  /**
+   * 是否显示列表项边框
+   */
+  border?: boolean;
+
+  /**
+   * 列表项之间的间距，默认单位为px
+   */
+  gutter?: number;
+
+  /**
+   * 图标宽度占比, 1-100
+   */
+  iconRatio?: number;
+
+  /**
+   * 列表项内容排列的方向，可选值为 horizontal 、vertical
+   */
+  direction?: GridNavDirection;
+
+  /**
+   * 列数
+   */
+  columnNum?: number;
+
+  /**
+   * 数据源: 绑定当前环境变量
+   *
+   * @default ${items}
+   */
+  source?: SchemaTokenizeableString;
+}
+
+export interface Column {
+  type: string;
+  [propName: string]: any;
+}
+
+export interface ListProps
+  extends RendererProps,
+    Omit<ListSchema, 'type' | 'className'> {
+  handleClick: (item?: ListItemSchema) => void;
+}
+
+@Renderer({
+  type: 'grid-nav'
+})
+export default class List extends React.Component<ListProps, object> {
+  @autobind
+  handleClick(item: ListItemSchema) {
+    return (e: React.MouseEvent) => {
+      let action;
+      if (item.link) {
+        action = validations.isUrl({}, item.link)
+          ? {
+              type: 'button',
+              actionType: 'url',
+              url: item.link,
+              blank: item.blank
+            }
+          : {
+              type: 'button',
+              actionType: 'link',
+              link: item.link
+            };
+      } else {
+        action = item.clickAction!;
+      }
+      handleAction(e, action as ActionSchema, this.props);
+    };
+  }
+
+  render() {
+    const {itemClassName, source, data, options, classnames} = this.props;
+
+    let value = getPropValue(this.props);
+    let list: any = [];
+
+    if (typeof source === 'string' && isPureVariable(source)) {
+      list = resolveVariableAndFilter(source, data, '| raw') || undefined;
+    } else if (Array.isArray(value)) {
+      list = value;
+    } else if (Array.isArray(options)) {
+      list = options;
+    }
+
+    if (list && !Array.isArray(list)) {
+      list = [list];
+    }
+
+    if (!list?.length) {
+      return null;
+    }
+
+    return (
+      <GridNav {...this.props}>
+        {list.map((item: ListItemSchema, index: number) => (
+          <GridNavItem
+            key={index}
+            onClick={
+              item.clickAction || item.link ? this.handleClick(item) : undefined
+            }
+            className={itemClassName}
+            text={item.text}
+            icon={item.icon}
+            classnames={classnames}
+            badge={
+              item.badge
+                ? {
+                    badge: item.badge,
+                    data: data,
+                    classnames
+                  }
+                : undefined
+            }
+          />
+        ))}
+      </GridNav>
+    );
+  }
+}

package/src/renderers/Table/index.tsx

@@ -1441,7 +1441,7 @@ export default class Table extends React.Component<TableProps, object> {
   handleColumnToggle(columns: Array<IColumn>) {
     const {store} = this.props;
 
-    store.update({columns});
+    store.updateColumns(columns);
   }
 
   renderAutoFilterForm(): React.ReactNode {
@@ -2155,7 +2155,6 @@ export default class Table extends React.Component<TableProps, object> {
     } = this.props;
     const __ = rest.translate;
     const env = rest.env;
-
     const render = this.props.render;
 
     if (!store.columnsTogglable) {

package/src/store/formItem.ts

@@ -617,12 +617,104 @@ export const FormItemStore = StoreNode.named('FormItemStore')
       return json;
     });
 
+    const tryDeferLoadLeftOptions: (
+      option: any,
+      api: Api,
+      data?: object,
+      config?: fetchOptions
+    ) => Promise<Payload | null> = flow(function* (
+      option: any,
+      api: string,
+      data: object,
+      config?: fetchOptions
+    ) {
+      if (
+        self.options.length != 1 ||
+        !Array.isArray(self.options[0].leftOptions)
+      ) {
+        return;
+      }
+
+      let leftOptions = self.options[0].leftOptions as any;
+
+      const indexes = findTreeIndex(leftOptions, item => item === option);
+      if (!indexes) {
+        return;
+      }
+
+      setOptions(
+        [
+          {
+            ...self.options[0],
+            leftOptions: spliceTree(leftOptions, indexes, 1, {
+              ...option,
+              loading: true
+            })
+          }
+        ],
+        undefined,
+        data
+      );
+
+      let json = yield fetchOptions(
+        api,
+        data,
+        {
+          ...config,
+          silent: true
+        },
+        false
+      );
+      if (!json) {
+        setOptions(
+          [
+            {
+              ...self.options[0],
+              leftOptions: spliceTree(leftOptions, indexes, 1, {
+                ...option,
+                loading: false,
+                error: true
+              })
+            }
+          ],
+          undefined,
+          data
+        );
+        return;
+      }
+
+      let options: Array<IOption> =
+        json.data?.options ||
+        json.data.items ||
+        json.data.rows ||
+        json.data ||
+        [];
+
+      setOptions(
+        [
+          {
+            ...self.options[0],
+            leftOptions: spliceTree(leftOptions, indexes, 1, {
+              ...option,
+              loading: false,
+              loaded: true,
+              children: options
+            })
+          }
+        ],
+        undefined,
+        data
+      );
+
+      return json;
+    });
+
     const deferLoadOptions: (
       option: any,
       api: Api,
       data?: object,
       config?: fetchOptions
-    ) => Promise<Payload | null> = flow(function* getInitData(
+    ) => Promise<Payload | null> = flow(function* (
       option: any,
       api: string,
       data: object,
@@ -630,7 +722,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
     ) {
       const indexes = findTreeIndex(self.options, item => item === option);
       if (!indexes) {
-        return;
+        return yield tryDeferLoadLeftOptions(option, api, data, config);
       }
 
       setOptions(

package/src/store/table.ts

@@ -429,7 +429,7 @@ export const TableStore = iRendererStore
     }
 
     function getUnSelectedRows() {
-      return self.rows.filter(item => !item.checked);
+      return flattenTree<IRow>(self.rows).filter((item: IRow) => !item.checked);
     }
 
     function getData(superData: any): any {
@@ -523,15 +523,6 @@ export const TableStore = iRendererStore
       );
     }
 
-    function getActivedSearchableColumns() {
-      return self.columns.filter(
-        column =>
-          column.searchable &&
-          isObject(column.searchable) &&
-          column.enableSearch
-      );
-    }
-
     return {
       get columnsData() {
         return getColumnsExceptBuiltinTypes();
@@ -613,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() {
@@ -765,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;
@@ -987,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,
@@ -998,9 +1037,10 @@ export const TableStore = iRendererStore
               a[valueField || 'value'] == item.pristine[valueField || 'value']
           )
         ) {
-          self.selectedRows.push(item);
+          self.selectedRows.push(item.id);
         }
       });
+
       updateCheckDisable();
     }
 
@@ -1228,6 +1268,7 @@ export const TableStore = iRendererStore
 
     return {
       update,
+      updateColumns,
       initRows,
       updateSelected,
       toggleAll,

package/src/types.ts

@@ -31,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;

package/src/utils/api.ts

@@ -1,7 +1,7 @@
 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,
@@ -11,11 +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>;
@@ -125,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 (
@@ -195,13 +196,28 @@ 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');
   }
 
+  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}`);
+    }
+  }
+
   // 兼容几种常见写法
   if (data.hasOwnProperty('errorCode')) {
     // 阿里 Java 规范
@@ -247,7 +263,7 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
   }
 
   if (payload.ok && api.responseData) {
-    payload.data = dataMapping(
+    const responseData = dataMapping(
       api.responseData,
 
       createObject(
@@ -261,6 +277,8 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
       undefined,
       api.convertKeyToPath
     );
+    console.debug('responseData', responseData);
+    payload.data = responseData;
   }
 
   return payload;
@@ -303,6 +321,10 @@ export function wrapFetcher(
       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(
@@ -345,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,

package/src/utils/helper.ts

@@ -1706,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/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",