amis 1.4.0 → 1.4.2-beta.12

package/src/renderers/Action.tsx

@@ -4,8 +4,14 @@ import {Renderer, RendererProps} from '../factory';
 import {filter} from '../utils/tpl';
 import Button from '../components/Button';
 import pick from 'lodash/pick';
+import omit from 'lodash/omit';
 
 export interface ButtonSchema extends BaseSchema {
+  /**
+   * 主要用于用户行为跟踪里区分是哪个按钮
+   */
+  id?: string;
+
   /**
    * 是否为块状展示，默认为内联。
    */
@@ -35,6 +41,10 @@ export interface ButtonSchema extends BaseSchema {
    * 右侧 icon 上的 css 类名
    */
   rightIconClassName?: SchemaClassName;
+  /**
+   * loading 上的css 类名
+   */
+  loadingClassName?: SchemaClassName;
 
   /**
    * 按钮文字
@@ -131,6 +141,15 @@ export interface ButtonSchema extends BaseSchema {
    * 键盘快捷键
    */
   hotKey?: string;
+  /**
+   * 是否显示loading效果
+   */
+  loadingOn?: string;
+
+  /**
+   * 自定义事件处理函数
+   */
+  onClick?: string | any;
 }
 
 export interface AjaxActionSchema extends ButtonSchema {
@@ -319,6 +338,7 @@ export type ActionSchema =
   | VanillaAction;
 
 const ActionProps = [
+  'id',
   'dialog',
   'drawer',
   'url',
@@ -416,44 +436,80 @@ export const createSyntheticEvent = <T extends Element, E extends Event>(
 export interface ActionProps
   extends Omit<
       ButtonSchema,
-      'className' | 'iconClassName' | 'rightIconClassName'
+      'className' | 'iconClassName' | 'rightIconClassName' | 'loadingClassName'
     >,
     ThemeProps,
     Omit<
       AjaxActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       UrlActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       LinkActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       DialogActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       DrawerActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       CopyActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       ReloadActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       EmailActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       OtherActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     > {
   actionType: any;
   onAction?: (
@@ -521,7 +577,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
 
   @autobind
   async handleAction(e: React.MouseEvent<any>) {
-    const {onAction, disabled, countDown} = this.props;
+    const {onAction, disabled, countDown, env} = this.props;
+
     // https://reactjs.org/docs/legacy-event-pooling.html
     e.persist();
     let onClick = this.props.onClick;
@@ -543,9 +600,26 @@ export class Action extends React.Component<ActionProps, ActionState> {
 
     e.preventDefault();
     const action = pick(this.props, ActionProps) as ActionSchema;
+    const actionType = action.actionType;
+
+    // ajax 会在 wrapFetcher 里记录，这里再处理就重复了，因此去掉
+    // add 一般是 input-table 之类的，会触发 formItemChange，为了避免重复也去掉
+    if (
+      actionType !== 'ajax' &&
+      actionType !== 'download' &&
+      actionType !== 'add'
+    ) {
+      env?.tracker(
+        {
+          eventType: actionType || this.props.type || 'click',
+          eventData: omit(action, ['type', 'actionType', 'tooltipPlacement'])
+        },
+        this.props
+      );
+    }
 
     // download 是一种 ajax 的简写
-    if (action.actionType === 'download') {
+    if (actionType === 'download') {
       action.actionType = 'ajax';
       const api = normalizeApi((action as AjaxActionSchema).api);
       api.responseType = 'blob';
@@ -619,6 +693,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
       iconClassName,
       rightIcon,
       rightIconClassName,
+      loadingClassName,
       primary,
       size,
       level,
@@ -638,7 +713,10 @@ export class Action extends React.Component<ActionProps, ActionState> {
       isMenuItem,
       active,
       activeLevel,
+      tooltipTrigger,
       tooltipContainer,
+      tooltipRootClose,
+      loading,
       classnames: cx
     } = this.props;
 
@@ -678,6 +756,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
             ? activeLevel
             : level || (primary ? 'primary' : undefined)
         }
+        loadingClassName={loadingClassName}
+        loading={loading}
         onClick={this.handleAction}
         type={type && ~allowedType.indexOf(type) ? type : 'button'}
         disabled={disabled}
@@ -685,12 +765,14 @@ export class Action extends React.Component<ActionProps, ActionState> {
         overrideClassName={isMenuItem}
         tooltip={filterContents(tooltip, data)}
         disabledTip={filterContents(disabledTip, data)}
-        placement={tooltipPlacement}
+        tooltipPlacement={tooltipPlacement}
         tooltipContainer={tooltipContainer}
+        tooltipTrigger={tooltipTrigger}
+        tooltipRootClose={tooltipRootClose}
         block={block}
         iconOnly={!!(icon && !label && level !== 'link')}
       >
-        {iconElement}
+        {!loading ? iconElement : ''}
         {label ? <span>{filter(String(label), data)}</span> : null}
         {rightIconElement}
       </Button>
@@ -736,13 +818,15 @@ export class ActionRenderer extends React.Component<
   }
 
   render() {
-    const {env, disabled, btnDisabled, ...rest} = this.props;
+    const {env, disabled, btnDisabled, loading, ...rest} = this.props;
 
     return (
       <Action
         {...(rest as any)}
+        env={env}
         disabled={disabled || btnDisabled}
         onAction={this.handleAction}
+        loading={loading}
         isCurrentUrl={this.isCurrentAction}
         tooltipContainer={
           env.getModalContainer ? env.getModalContainer : undefined

package/src/renderers/AnchorNav.tsx

@@ -65,6 +65,8 @@ export interface AnchorNavSchema extends BaseSchema {
    * 楼层样式名
    */
   sectionClassName?: SchemaClassName;
+
+  direction?: 'vertical' | 'horizontal';
 }
 
 export interface AnchorNavProps
@@ -148,6 +150,7 @@ export default class AnchorNav extends React.Component<
       className,
       linkClassName,
       sectionClassName,
+      direction,
       sectionRender,
       render,
       data
@@ -187,6 +190,7 @@ export default class AnchorNav extends React.Component<
         sectionClassName={sectionClassName}
         onSelect={this.handleSelect}
         active={this.state.active}
+        direction={direction}
       >
         {children}
       </CAnchorNav>

package/src/renderers/Avatar.tsx

@@ -10,7 +10,11 @@ import {
   SchemaUrlPath
 } from '../Schema';
 import {BadgeSchema, withBadge} from '../components/Badge';
-import {isPureVariable, resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
+import {
+  isPureVariable,
+  resolveVariable,
+  resolveVariableAndFilter
+} from '../utils/tpl-builtin';
 
 /**
  * Avatar 用户头像显示
@@ -102,15 +106,15 @@ export class AvatarField extends React.Component<AvatarProps, object> {
     };
 
     if (isPureVariable(text)) {
-      text = resolveVariable(text, data);
+      text = resolveVariableAndFilter(text, data);
     }
 
     if (isPureVariable(src)) {
-      src = resolveVariable(src, data);
+      src = resolveVariableAndFilter(src, data, '| raw');
     }
 
     if (isPureVariable(icon)) {
-      icon = resolveVariable(icon, data);
+      icon = resolveVariableAndFilter(icon, data);
     }
 
     let avatar = <i className={icon} />;

package/src/renderers/Breadcrumb.tsx

@@ -77,7 +77,11 @@ export class BreadcrumbField extends React.Component<BreadcrumbProps, object> {
 
     const crumbItems = items
       ? items
-      : (resolveVariable(source, data) as Array<BreadcrumbItemSchema>);
+      : (resolveVariableAndFilter(
+          source,
+          data,
+          '| raw'
+        ) as Array<BreadcrumbItemSchema>);
 
     const crumbs = crumbItems
       .map<React.ReactNode>((item, index) => (

package/src/renderers/CRUD.tsx

@@ -1,43 +1,28 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import {Renderer, RendererProps} from '../factory';
-import {
-  SchemaNode,
-  Schema,
-  Action,
-  Api,
-  ApiObject,
-  PlainObject
-} from '../types';
+import {SchemaNode, Schema, Action, PlainObject} from '../types';
 import {CRUDStore, ICRUDStore} from '../store/crud';
 import {
   createObject,
   extendObject,
   anyChanged,
   isObjectShallowModified,
-  noop,
   isVisible,
   getPropValue,
   getVariable,
   qsstringify,
-  qsparse
+  qsparse,
+  isArrayChildrenModified
 } from '../utils/helper';
-import {observer} from 'mobx-react';
-import partition from 'lodash/partition';
-import Scoped, {ScopedContext, IScopedContext} from '../Scoped';
+import {ScopedContext, IScopedContext} from '../Scoped';
 import Button from '../components/Button';
 import Select from '../components/Select';
 import getExprProperties from '../utils/filter-schema';
 import pick from 'lodash/pick';
 import {findDOMNode} from 'react-dom';
 import {evalExpression, filter} from '../utils/tpl';
-import {
-  isValidApi,
-  buildApi,
-  isEffectiveApi,
-  isApiOutdated
-} from '../utils/api';
+import {isEffectiveApi, isApiOutdated, str2function} from '../utils/api';
 import omit from 'lodash/omit';
 import find from 'lodash/find';
 import findIndex from 'lodash/findIndex';
@@ -48,7 +33,6 @@ import {
   BaseSchema,
   SchemaApi,
   SchemaClassName,
-  SchemaCollection,
   SchemaExpression,
   SchemaMessage,
   SchemaName,
@@ -298,6 +282,16 @@ export interface CRUDCommonSchema extends BaseSchema {
    * 默认只有当分页数大于 1 是才显示，如果总是想显示请配置。
    */
   alwaysShowPagination?: boolean;
+
+  /**
+   * 开启查询区域，会根据列元素的searchable属性值，自动生成查询条件表单
+   */
+  autoGenerateFilter?: boolean;
+
+  /**
+   * 内容区域占满屏幕剩余空间
+   */
+  autoFillHeight?: boolean;
 }
 
 export type CRUDCardsSchema = CRUDCommonSchema & {
@@ -362,6 +356,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     'footerToolbar',
     'filterTogglable',
     'filterDefaultVisible',
+    'autoGenerateFilter',
     'syncResponse2Query',
     'keepItemSelectionOnPageChange',
     'labelTpl',
@@ -376,7 +371,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     'onInit',
     'onSaved',
     'onQuery',
-    'formStore'
+    'formStore',
+    'autoFillHeight'
   ];
   static defaultProps = {
     toolbarInline: true,
@@ -392,7 +388,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     filterTogglable: false,
     filterDefaultVisible: true,
     loadDataOnce: false,
-    loadDataOnceFetchOnFilter: true
+    loadDataOnceFetchOnFilter: true,
+    autoFillHeight: false
   };
 
   control: any;
@@ -478,8 +475,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       this.handleFilterInit({});
     }
 
-    const val = getPropValue(this.props);
-    if (this.props.pickerMode && val) {
+    let val: any;
+    if (this.props.pickerMode && (val = getPropValue(this.props))) {
       store.setSelectedItems(val);
     }
   }
@@ -500,8 +497,14 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       this.renderFooterToolbar = this.renderFooterToolbar.bind(this);
     }
 
-    const val = getPropValue(this.props);
-    if (this.props.pickerMode && val !== getPropValue(prevProps)) {
+    let val: any;
+    if (
+      this.props.pickerMode &&
+      isArrayChildrenModified(
+        (val = getPropValue(this.props)),
+        getPropValue(prevProps)
+      )
+    ) {
       store.setSelectedItems(val);
     }
 
@@ -654,6 +657,13 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       return Promise.resolve({
         items: store.selectedItems.concat()
       });
+    } else if (action.onClick) {
+      store.setCurrentAction(action);
+      let onClick = action.onClick;
+      if (typeof onClick === 'string') {
+        onClick = str2function(onClick, 'event', 'props', 'data');
+      }
+      onClick && onClick(e, this.props, ctx);
     } else {
       onAction(e, action, ctx, throwErrors, delegate || this.context);
     }
@@ -1792,6 +1802,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       return null;
     }
 
+    const {render, store, translate: __} = this.props;
     const type = (toolbar as Schema).type || toolbar;
 
     if (type === 'bulkActions' || type === 'bulk-actions') {
@@ -1808,8 +1819,25 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       return this.renderFilterToggler();
     } else if (type === 'export-csv') {
       return this.renderExportCSV(toolbar as Schema);
+    } else if (type === 'reload') {
+      let reloadButton = {
+        label: '',
+        icon: 'fa fa-sync',
+        tooltip: __('reload'),
+        tooltipPlacement: 'top',
+        type: 'button'
+      };
+      if (typeof toolbar === 'object') {
+        reloadButton = {...reloadButton, ...omit(toolbar, ['type', 'align'])};
+      }
+      return render(`toolbar/${index}`, reloadButton, {
+        onAction: () => {
+          this.reload();
+        }
+      });
     } else if (Array.isArray(toolbar)) {
       const children: Array<any> = toolbar
+        .filter((toolbar: any) => isVisible(toolbar, store.filterData))
         .map((toolbar, index) => ({
           dom: this.renderToolbar(toolbar, index, childProps, toolbarRenderer),
           toolbar
@@ -1851,7 +1879,6 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       return result;
     }
 
-    const {render, store} = this.props;
     const $$editable = childProps.$$editable;
 
     return render(`toolbar/${index}`, toolbar, {
@@ -1994,6 +2021,9 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       popOverContainer,
       translate: __,
       onQuery,
+      autoGenerateFilter,
+      onSelect,
+      autoFillHeight,
       ...rest
     } = this.props;
 
@@ -2044,6 +2074,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             key: 'body',
             className: cx('Crud-body', bodyClassName),
             ref: this.controlRef,
+            autoGenerateFilter: !filter && autoGenerateFilter,
+            autoFillHeight: autoFillHeight,
             selectable: !!(
               (this.hasBulkActionsToolbar() && this.hasBulkActions()) ||
               pickerMode
@@ -2076,6 +2108,9 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             onSelect: this.handleSelect,
             onPopOverOpened: this.handleChildPopOverOpen,
             onPopOverClosed: this.handleChildPopOverClose,
+            onSearchableFromReset: this.handleFilterReset,
+            onSearchableFromSubmit: this.handleFilterSubmit,
+            onSearchableFromInit: this.handleFilterInit,
             headerToolbarRender: this.renderHeaderToolbar,
             footerToolbarRender: this.renderFooterToolbar,
             data: store.mergedData