amis 1.4.2-beta.6 → 1.5.0

package/src/locale/en-US.ts

@@ -85,6 +85,7 @@ register('en-US', {
   'Excel.placeholder': `Drag 'n' drop excel here, or click to select`,
   'fetchFailed': 'Fetch api failed',
   'File.continueAdd': 'Continue add',
+  'File.downloadTpl': 'Download template',
   'File.dragDrop': `Drag 'n' drop some files here`,
   'File.errorRetry': 'File upload failed, please try again',
   'File.failed': 'Failed files.',
@@ -182,6 +183,7 @@ register('en-US', {
   'Transfer.configError': 'Config error',
   'Transfer.refreshIcon': 'Click to refresh',
   'Transfer.searchKeyword': 'Enter keywords',
+  'Transfer.available': 'Available',
   'Transfer.selectd': 'Selected',
   'Transfer.selectFromLeft': 'Select from the left',
   'Tree.addChild': 'Add child',
@@ -223,6 +225,7 @@ register('en-US', {
   'Wizard.saveAndNext': 'Save & Next',
   'year-to-year': '{{from}} - {{to}}',
   'Year.placeholder': 'Select a Year',
+  'reload': 'Reload',
   'rotate': 'Rotate',
   'Editor.fullscreen': 'full screen',
   'Editor.exitFullscreen': 'exit fullscreen mode',

package/src/locale/zh-CN.ts

@@ -87,6 +87,7 @@ register('zh-CN', {
   'Excel.placeholder': '拖拽 Excel 到这，或点击上传',
   'fetchFailed': '初始化失败',
   'File.continueAdd': '继续添加',
+  'File.downloadTpl': '下载模板',
   'File.dragDrop': '将文件拖拽到此处',
   'File.errorRetry': '文件上传失败请重试',
   'File.failed': '失败文件',
@@ -186,8 +187,9 @@ register('zh-CN', {
   'Transfer.configError': '配置错误，选项无法与左侧选项对应',
   'Transfer.refreshIcon': '点击刷新重新加载',
   'Transfer.searchKeyword': '请输入关键字',
-  'Transfer.selectd': '当前选择',
-  'Transfer.selectFromLeft': '请从左侧选择数据',
+  'Transfer.available': '可选项',
+  'Transfer.selectd': '已选项',
+  'Transfer.selectFromLeft': '请选择左侧数据',
   'Tree.addChild': '添加子节点',
   'Tree.addRoot': '添加一级节点',
   'Tree.editNode': '编辑该节点',
@@ -227,6 +229,7 @@ register('zh-CN', {
   'Wizard.saveAndNext': '保存并下一步',
   'year-to-year': '{{from}} 年 - {{to}} 年',
   'Year.placeholder': '请选择年',
+  'reload': '刷新',
   'rotate': '旋转',
   'Editor.fullscreen': '全屏',
   'Editor.exitFullscreen': '退出全屏',

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;
+
   /**
    * 是否为块状展示，默认为内联。
    */
@@ -144,6 +150,11 @@ export interface ButtonSchema extends BaseSchema {
    * 自定义事件处理函数
    */
   onClick?: string | any;
+
+  /**
+   * 子内容
+   */
+  body?: SchemaCollection;
 }
 
 export interface AjaxActionSchema extends ButtonSchema {
@@ -332,6 +343,7 @@ export type ActionSchema =
   | VanillaAction;
 
 const ActionProps = [
+  'id',
   'dialog',
   'drawer',
   'url',
@@ -380,6 +392,7 @@ import {
   FeedbackDialog,
   SchemaApi,
   SchemaClassName,
+  SchemaCollection,
   SchemaExpression,
   SchemaIcon,
   SchemaReload,
@@ -391,6 +404,7 @@ import {DrawerSchema, DrawerSchemaBase} from './Drawer';
 import {generateIcon} from '../utils/icon';
 import {BadgeSchema, withBadge} from '../components/Badge';
 import {normalizeApi, str2AsyncFunction} from '../utils/api';
+import {TooltipWrapper} from '../components/TooltipWrapper';
 
 // 构造一个假的 React 事件避免可能的报错，主要用于快捷键功能
 // 来自 https://stackoverflow.com/questions/27062455/reactjs-can-i-create-my-own-syntheticevent
@@ -495,6 +509,7 @@ export interface ActionProps
       | 'iconClassName'
       | 'rightIconClassName'
       | 'loadingClassName'
+      | 'body'
     >,
     Omit<
       OtherActionSchema,
@@ -570,7 +585,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;
@@ -592,9 +608,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';
@@ -692,9 +725,30 @@ export class Action extends React.Component<ActionProps, ActionState> {
       tooltipContainer,
       tooltipRootClose,
       loading,
-      classnames: cx
+      body,
+      render,
+      classnames: cx,
+      classPrefix: ns
     } = this.props;
 
+    if (actionType !== 'email' && body) {
+      return (
+        <TooltipWrapper
+          classPrefix={ns}
+          classnames={cx}
+          placement={tooltipPlacement}
+          tooltip={tooltip}
+          container={tooltipContainer}
+          trigger={tooltipTrigger}
+          rootClose={tooltipRootClose}
+        >
+          <div className={cx('Action', className)} onClick={this.handleAction}>
+            {render('body', body) as JSX.Element}
+          </div>
+        </TooltipWrapper>
+      );
+    }
+
     let label = this.props.label;
     let disabled = this.props.disabled;
     let isActive = !!active;
@@ -798,6 +852,7 @@ export class ActionRenderer extends React.Component<
     return (
       <Action
         {...(rest as any)}
+        env={env}
         disabled={disabled || btnDisabled}
         onAction={this.handleAction}
         loading={loading}

package/src/renderers/Alert.tsx

@@ -1,7 +1,12 @@
 import {Renderer, RendererProps} from '../factory';
 import React from 'react';
 import Alert, {AlertProps} from '../components/Alert2';
-import {BaseSchema, SchemaCollection} from '../Schema';
+import {
+  BaseSchema,
+  SchemaObject,
+  SchemaCollection,
+  SchemaIcon
+} from '../Schema';
 
 /**
  * Alert 提示渲染器。
@@ -13,6 +18,11 @@ export interface AlertSchema extends BaseSchema {
    */
   type: 'alert';
 
+  /**
+   * 提示框标题
+   */
+  title?: string;
+
   /**
    * 内容区域
    */
@@ -27,6 +37,26 @@ export interface AlertSchema extends BaseSchema {
    * 是否显示关闭按钮
    */
   showCloseButton?: boolean;
+
+  /**
+   * 关闭按钮CSS类名
+   */
+  closeButtonClassName?: string;
+
+  /**
+   * 是否显示ICON
+   */
+  showIcon?: boolean;
+
+  /**
+   * 左侧图标
+   */
+  icon?: SchemaIcon;
+
+  /**
+   * 图标CSS类名
+   */
+  iconClassName?: string;
 }
 
 @Renderer({

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

@@ -287,6 +287,11 @@ export interface CRUDCommonSchema extends BaseSchema {
    * 开启查询区域，会根据列元素的searchable属性值，自动生成查询条件表单
    */
   autoGenerateFilter?: boolean;
+
+  /**
+   * 内容区域占满屏幕剩余空间
+   */
+  autoFillHeight?: boolean;
 }
 
 export type CRUDCardsSchema = CRUDCommonSchema & {
@@ -366,7 +371,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     'onInit',
     'onSaved',
     'onQuery',
-    'formStore'
+    'formStore',
+    'autoFillHeight'
   ];
   static defaultProps = {
     toolbarInline: true,
@@ -382,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;
@@ -1795,7 +1802,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       return null;
     }
 
-    const {render, store} = this.props;
+    const {render, store, translate: __} = this.props;
     const type = (toolbar as Schema).type || toolbar;
 
     if (type === 'bulkActions' || type === 'bulk-actions') {
@@ -1812,6 +1819,22 @@ 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))
@@ -2000,6 +2023,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       onQuery,
       autoGenerateFilter,
       onSelect,
+      autoFillHeight,
       ...rest
     } = this.props;
 
@@ -2026,6 +2050,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
                   'Crud-filter',
                   filter.panelClassName || 'Panel--default'
                 ),
+                api: undefined,
                 data: store.filterData,
                 onReset: this.handleFilterReset,
                 onSubmit: this.handleFilterSubmit,
@@ -2051,6 +2076,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             className: cx('Crud-body', bodyClassName),
             ref: this.controlRef,
             autoGenerateFilter: !filter && autoGenerateFilter,
+            autoFillHeight: autoFillHeight,
             selectable: !!(
               (this.hasBulkActionsToolbar() && this.hasBulkActions()) ||
               pickerMode

package/src/renderers/Card.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
 import {Renderer, RendererProps} from '../factory';
-import {SchemaNode, Schema, Action} from '../types';
+import {SchemaNode, Schema, Action, PlainObject} from '../types';
 import {filter, evalExpression} from '../utils/tpl';
 import cx from 'classnames';
 import Checkbox from '../components/Checkbox';
@@ -11,7 +11,8 @@ import {
   isVisible,
   isDisabled,
   noop,
-  isClickOnInput
+  isClickOnInput,
+  hashCode
 } from '../utils/helper';
 import {resolveVariable} from '../utils/tpl-builtin';
 import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
@@ -128,6 +129,7 @@ export interface CardSchema extends BaseSchema {
     avatar?: SchemaUrlPath;
 
     avatarText?: SchemaTpl;
+    avatarTextBackground?: String[];
     avatarTextClassName?: SchemaClassName;
 
     /**
@@ -166,6 +168,11 @@ export interface CardSchema extends BaseSchema {
    * 底部按钮集合。
    */
   actions?: Array<ActionSchema>;
+
+  /**
+   * 工具栏按钮
+   */
+  toolbar?: Array<ActionSchema>;
 }
 
 export interface CardProps
@@ -273,30 +280,47 @@ export class Card extends React.Component<CardProps> {
       multiple,
       hideCheckToggler,
       classnames: cx,
-      classPrefix: ns
+      classPrefix: ns,
+      toolbar,
+      render
     } = this.props;
-
-    if (dragging) {
-      return (
-        <div className={cx('Card-dragBtn')}>
-          <Icon icon="drag-bar" className="icon" />
-        </div>
+    const toolbars: Array<JSX.Element> = [];
+
+    if (selectable && !hideCheckToggler) {
+      toolbars.push(
+        <Checkbox
+          key="check"
+          className={cx('Card-checkbox')}
+          type={multiple ? 'checkbox' : 'radio'}
+          disabled={!checkable}
+          checked={selected}
+          onChange={checkOnItemClick ? noop : this.handleCheck}
+        />
       );
-    } else if (selectable && !hideCheckToggler) {
-      return (
-        <div className={cx('Card-checkBtn')}>
-          <Checkbox
-            classPrefix={ns}
-            type={multiple ? 'checkbox' : 'radio'}
-            disabled={!checkable}
-            checked={selected}
-            onChange={checkOnItemClick ? noop : this.handleCheck}
-          />
-        </div>
+    }
+
+    if (Array.isArray(toolbar)) {
+      toolbar.forEach((action, index) =>
+        toolbars.push(
+          render(
+            `toolbar/${index}`,
+            {
+              type: 'button',
+              level: 'link',
+              size: 'sm',
+              ...(action as any)
+            },
+            {
+              key: index
+            }
+          )
+        )
       );
     }
 
-    return null;
+    return toolbars.length ? (
+      <div className={cx('Card-toolbar')}>{toolbars}</div>
+    ) : null;
   }
 
   renderActions() {
@@ -451,45 +475,55 @@ export class Card extends React.Component<CardProps> {
       imageClassName,
       avatarTextClassName,
       href,
-      itemAction
+      itemAction,
+      dragging
     } = this.props;
 
+    const toolbar = this.renderToolbar();
     let heading = null;
 
-    if (header) {
+    if (header || toolbar) {
       const {
         highlight: highlightTpl,
         avatar: avatarTpl,
         avatarText: avatarTextTpl,
+        avatarTextBackground,
         title: titleTpl,
         subTitle: subTitleTpl,
         subTitlePlaceholder,
         desc: descTpl
-      } = header;
+      } = header || {};
 
       const descPlaceholder =
-        header.descriptionPlaceholder || header.descPlaceholder;
+        header?.descriptionPlaceholder || header?.descPlaceholder;
 
       const highlight = !!evalExpression(highlightTpl!, data as object);
       const avatar = filter(avatarTpl, data, '| raw');
       const avatarText = filter(avatarTextTpl, data);
       const title = filter(titleTpl, data);
       const subTitle = filter(subTitleTpl, data);
-      const desc = filter(header.description || descTpl, data);
+      const desc = filter(header?.description || descTpl, data);
+      const avatarTextStyle: PlainObject = {};
+      if (avatarText && avatarTextBackground && avatarTextBackground.length) {
+        avatarTextStyle['background'] =
+          avatarTextBackground[
+            Math.abs(hashCode(avatarText)) % avatarTextBackground.length
+          ];
+      }
 
       heading = (
-        <div className={cx('Card-heading', header.className)}>
+        <div className={cx('Card-heading', header?.className)}>
           {avatar ? (
             <span
               className={cx(
                 'Card-avtar',
-                header.avatarClassName || avatarClassName
+                header?.avatarClassName || avatarClassName
               )}
             >
               <img
                 className={cx(
                   'Card-img',
-                  header.imageClassName || imageClassName
+                  header?.imageClassName || imageClassName
                 )}
                 src={avatar}
               />
@@ -498,8 +532,9 @@ export class Card extends React.Component<CardProps> {
             <span
               className={cx(
                 'Card-avtarText',
-                header.avatarTextClassName || avatarTextClassName
+                header?.avatarTextClassName || avatarTextClassName
               )}
+              style={avatarTextStyle}
             >
               {avatarText}
             </span>
@@ -509,7 +544,7 @@ export class Card extends React.Component<CardProps> {
               <i
                 className={cx(
                   'Card-highlight',
-                  header.highlightClassName || highlightClassName
+                  header?.highlightClassName || highlightClassName
                 )}
               />
             ) : null}
@@ -518,7 +553,7 @@ export class Card extends React.Component<CardProps> {
               <div
                 className={cx(
                   'Card-title',
-                  header.titleClassName || titleClassName
+                  header?.titleClassName || titleClassName
                 )}
               >
                 {render('title', title)}
@@ -529,7 +564,7 @@ export class Card extends React.Component<CardProps> {
               <div
                 className={cx(
                   'Card-subTitle',
-                  header.subTitleClassName || subTitleClassName
+                  header?.subTitleClassName || subTitleClassName
                 )}
               >
                 {render('sub-title', subTitle || subTitlePlaceholder!, {
@@ -542,8 +577,8 @@ export class Card extends React.Component<CardProps> {
               <div
                 className={cx(
                   'Card-desc',
-                  header.descriptionClassName ||
-                    header.descClassName ||
+                  header?.descriptionClassName ||
+                    header?.descClassName ||
                     descClassName
                 )}
               >
@@ -553,6 +588,7 @@ export class Card extends React.Component<CardProps> {
               </div>
             ) : null}
           </div>
+          {toolbar}
         </div>
       );
     }
@@ -570,7 +606,11 @@ export class Card extends React.Component<CardProps> {
           'Card--link': href || itemAction
         })}
       >
-        {this.renderToolbar()}
+        {dragging ? (
+          <div className={cx('Card-dragBtn')}>
+            <Icon icon="drag-bar" className="icon" />
+          </div>
+        ) : null}
         {heading}
         {body ? (
           <div className={cx('Card-body', bodyClassName)}>{body}</div>