amis 1.3.5-beta.7 → 1.4.2-beta.11

package/src/renderers/Card.tsx

@@ -166,6 +166,11 @@ export interface CardSchema extends BaseSchema {
    * 底部按钮集合。
    */
   actions?: Array<ActionSchema>;
+
+  /**
+   * 工具栏按钮
+   */
+  toolbar?: Array<ActionSchema>;
 }
 
 export interface CardProps
@@ -273,30 +278,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,12 +473,14 @@ 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,
@@ -465,31 +489,31 @@ export class Card extends React.Component<CardProps> {
         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);
 
       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,7 +522,7 @@ export class Card extends React.Component<CardProps> {
             <span
               className={cx(
                 'Card-avtarText',
-                header.avatarTextClassName || avatarTextClassName
+                header?.avatarTextClassName || avatarTextClassName
               )}
             >
               {avatarText}
@@ -509,7 +533,7 @@ export class Card extends React.Component<CardProps> {
               <i
                 className={cx(
                   'Card-highlight',
-                  header.highlightClassName || highlightClassName
+                  header?.highlightClassName || highlightClassName
                 )}
               />
             ) : null}
@@ -518,7 +542,7 @@ export class Card extends React.Component<CardProps> {
               <div
                 className={cx(
                   'Card-title',
-                  header.titleClassName || titleClassName
+                  header?.titleClassName || titleClassName
                 )}
               >
                 {render('title', title)}
@@ -529,7 +553,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 +566,8 @@ export class Card extends React.Component<CardProps> {
               <div
                 className={cx(
                   'Card-desc',
-                  header.descriptionClassName ||
-                    header.descClassName ||
+                  header?.descriptionClassName ||
+                    header?.descClassName ||
                     descClassName
                 )}
               >
@@ -553,6 +577,7 @@ export class Card extends React.Component<CardProps> {
               </div>
             ) : null}
           </div>
+          {toolbar}
         </div>
       );
     }
@@ -570,7 +595,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>

package/src/renderers/Chart.tsx

@@ -12,7 +12,11 @@ import {
   isPureVariable,
   dataMapping
 } from '../utils/tpl-builtin';
-import {isApiOutdated, isEffectiveApi} from '../utils/api';
+import {
+  isApiOutdated,
+  isEffectiveApi,
+  normalizeApiResponseData
+} from '../utils/api';
 import {ScopedContext, IScopedContext} from '../Scoped';
 import {createObject, findObjectsWithKey} from '../utils/helper';
 import Spinner from '../components/Spinner';
@@ -342,7 +346,7 @@ export class Chart extends React.Component<ChartProps> {
         }
         delete this.reloadCancel;
 
-        const data = result.data || {};
+        const data = normalizeApiResponseData(result.data);
         // 说明返回的是数据接口。
         if (!data.series && this.props.config) {
           const ctx = createObject(this.props.data, data);

package/src/renderers/Collapse.tsx

@@ -7,6 +7,7 @@ import {
   SchemaCollection,
   SchemaTpl
 } from '../Schema';
+import {isClickOnInput} from '../utils/helper';
 
 /**
  * Collapse 折叠渲染器，格式说明。
@@ -134,7 +135,10 @@ export default class Collapse extends React.Component<
     }
   }
 
-  toggleCollapsed() {
+  toggleCollapsed(e: React.MouseEvent<HTMLElement>) {
+    if (isClickOnInput(e)) {
+      return;
+    }
     this.props.collapsable !== false &&
       this.setState({
         collapsed: !this.state.collapsed
@@ -172,8 +176,10 @@ export default class Collapse extends React.Component<
           onClick={this.toggleCollapsed}
           className={cx(`Collapse-header`, headingClassName)}
         >
-          {render('heading', finalTitle)}
-          {collapsable && <span className={cx('Collapse-arrow')} />}
+          <div className={cx('Collapse-header-wrapper')}>
+            {render('heading', finalTitle, {className: 'Collapse-header-tpl'})}
+            {collapsable && <span className={cx('Collapse-arrow')} />}
+          </div>
         </HeadingComponent>
       ) : null,
 

package/src/renderers/Dialog.tsx

@@ -318,7 +318,7 @@ export default class Dialog extends React.Component<DialogProps> {
   handleExited() {
     const {lazySchema, store} = this.props;
     if (isAlive(store)) {
-      store.setFormData({});
+      store.reset();
       store.setEntered(false);
       if (typeof lazySchema === 'function') {
         store.setSchema('');
@@ -629,10 +629,6 @@ export class DialogRenderer extends Dialog {
   tryChildrenToHandle(action: Action, ctx: object, rawAction?: Action) {
     const scoped = this.context as IScopedContext;
 
-    if (action.fromDialog) {
-      return false;
-    }
-
     const targets: Array<any> = [];
     const {onConfirm, store} = this.props;
 

package/src/renderers/Drawer.tsx

@@ -687,10 +687,6 @@ export class DrawerRenderer extends Drawer {
   tryChildrenToHandle(action: Action, ctx: object, rawAction?: Action) {
     const scoped = this.context as IScopedContext;
 
-    if (action.fromDialog) {
-      return false;
-    }
-
     const targets: Array<any> = [];
     const {onConfirm, store} = this.props;
 

package/src/renderers/DropDownButton.tsx

@@ -7,10 +7,11 @@ import type {TooltipObject, Trigger} from '../components/TooltipWrapper';
 import {isDisabled, isVisible, noop} from '../utils/helper';
 import {filter} from '../utils/tpl';
 import {Icon} from '../components/icons';
-import {BaseSchema, SchemaClassName} from '../Schema';
+import {BaseSchema, SchemaClassName, SchemaIcon} from '../Schema';
 import {ActionSchema} from './Action';
 import {DividerSchema} from './Divider';
 import {RootClose} from '../utils/RootClose';
+import {generateIcon} from '../utils/icon';
 
 /**
  * 下拉按钮渲染器。
@@ -76,6 +77,21 @@ export interface DropdownButtonSchema extends BaseSchema {
    * 是否只显示图标。
    */
   iconOnly?: boolean;
+
+  /**
+   * 右侧图标
+   */
+  rightIcon?: SchemaIcon;
+
+  /**
+   * 触发条件，默认是 click
+   */
+  trigger?: 'click' | 'hover';
+
+  /**
+   * 是否显示下拉按钮
+   */
+  hideCaret?: boolean;
 }
 
 export interface DropDownButtonProps
@@ -265,10 +281,17 @@ export default class DropDownButton extends React.Component<
       align,
       iconOnly,
       icon,
+      rightIcon,
       isActived,
-      data
+      trigger,
+      data,
+      hideCaret
     } = this.props;
 
+    const iconElement = generateIcon(cx, icon, 'm-r-xs');
+
+    const rightIconElement = generateIcon(cx, rightIcon, 'm-l-xs');
+
     return (
       <div
         className={cx(
@@ -281,6 +304,8 @@ export default class DropDownButton extends React.Component<
           },
           className
         )}
+        onMouseEnter={trigger === 'hover' ? this.open : () => {}}
+        onMouseLeave={trigger === 'hover' ? this.close : () => {}}
         ref={this.domRef}
       >
         <TooltipWrapper
@@ -309,17 +334,14 @@ export default class DropDownButton extends React.Component<
               size ? `Button--${size}` : ''
             )}
           >
-            {icon ? (
-              typeof icon === 'string' ? (
-                <i className={cx(icon, 'm-r-xs')} />
-              ) : (
-                icon
-              )
-            ) : null}
+            {iconElement}
             {typeof label === 'string' ? filter(label, data) : label}
-            <span className={cx('DropDown-caret')}>
-              <Icon icon="caret" className="icon" />
-            </span>
+            {rightIconElement}
+            {!hideCaret ? (
+              <span className={cx('DropDown-caret')}>
+                <Icon icon="caret" className="icon" />
+              </span>
+            ) : null}
           </button>
         </TooltipWrapper>
         {this.state.isOpened ? this.renderOuter() : null}

package/src/renderers/Form/Checkbox.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
 import Checkbox from '../../components/Checkbox';
+import {withBadge, BadgeSchema} from '../../components/Badge';
 
 /**
  * Checkbox 勾选框。
@@ -27,6 +28,11 @@ export interface CheckboxControlSchema extends FormBaseControl {
    * 选项说明
    */
   option?: string;
+
+  /**
+   * 角标
+   */
+  badge?: BadgeSchema;
 }
 
 export interface CheckboxProps
@@ -78,4 +84,6 @@ export default class CheckboxControl extends React.Component<
   type: 'checkbox',
   sizeMutable: false
 })
+// @ts-ignore
+@withBadge
 export class CheckboxControlRenderer extends CheckboxControl {}

package/src/renderers/Form/Combo.tsx

@@ -251,7 +251,6 @@ export interface ComboControlSchema extends FormBaseControl {
     /**
      * 最大值验证错误提示
      */
-
     maxLengthValidateFailed?: string;
   };
 }
@@ -1010,7 +1009,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                 {deleteIcon ? (
                   <i className={deleteIcon} />
                 ) : (
-                  <Icon icon="close" className="icon" />
+                  <Icon icon="status-close" className="icon" />
                 )}
               </div>
             );
@@ -1189,7 +1188,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                     {deleteIcon ? (
                       <i className={deleteIcon} />
                     ) : (
-                      <Icon icon="close" className="icon" />
+                      <Icon icon="status-close" className="icon" />
                     )}
                   </a>
                 );

package/src/renderers/Form/Editor.tsx

@@ -118,7 +118,7 @@ export default class EditorControl extends React.Component<EditorProps, any> {
   static defaultProps: Partial<EditorProps> = {
     language: 'javascript',
     editorTheme: 'vs',
-    allowFullscreen: false,
+    allowFullscreen: true,
     options: {
       automaticLayout: true,
       selectOnLineNumbers: true,
@@ -294,26 +294,25 @@ export const availableLanguages = [
   'yaml'
 ];
 
-export const EditorControls: Array<
-  typeof EditorControl
-> = availableLanguages.map((lang: string) => {
-  @FormItem({
-    type: `${lang}-editor`,
-    sizeMutable: false
-  })
-  class EditorControlRenderer extends EditorControl {
-    static lang = lang;
-    static displayName = `${lang[0].toUpperCase()}${lang.substring(
-      1
-    )}EditorControlRenderer`;
-    static defaultProps = {
-      ...EditorControl.defaultProps,
-      language: lang
-    };
-  }
+export const EditorControls: Array<typeof EditorControl> =
+  availableLanguages.map((lang: string) => {
+    @FormItem({
+      type: `${lang}-editor`,
+      sizeMutable: false
+    })
+    class EditorControlRenderer extends EditorControl {
+      static lang = lang;
+      static displayName = `${lang[0].toUpperCase()}${lang.substring(
+        1
+      )}EditorControlRenderer`;
+      static defaultProps = {
+        ...EditorControl.defaultProps,
+        language: lang
+      };
+    }
 
-  return EditorControlRenderer;
-});
+    return EditorControlRenderer;
+  });
 
 @FormItem({
   type: 'js-editor',

package/src/renderers/Form/InputCity.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import {ClassNamesFn, themeable, ThemeProps} from '../../theme';
-import {Select, Spinner} from '../../components';
+import Spinner from '../../components/Spinner';
+import Select from '../../components/Select';
 import {autobind} from '../../utils/helper';
 import {Option} from './Options';
 import {localeable, LocaleProps} from '../../locale';
@@ -293,13 +294,8 @@ export class CityPicker extends React.Component<
 
   @autobind
   syncOut() {
-    const {
-      onChange,
-      allowStreet,
-      joinValues,
-      extractValue,
-      delimiter
-    } = this.props;
+    const {onChange, allowStreet, joinValues, extractValue, delimiter} =
+      this.props;
 
     const {code, province, city, district, street} = this.state;
 

package/src/renderers/Form/InputExcel.tsx

@@ -28,6 +28,11 @@ export interface InputExcelControlSchema extends FormBaseControl {
    * 是否包含空内容，主要用于二维数组模式
    */
   includeEmpty: boolean;
+
+  /**
+   * 纯文本模式
+   */
+  plainText: boolean;
 }
 
 export interface ExcelProps
@@ -48,12 +53,15 @@ export default class ExcelControl extends React.PureComponent<
   static defaultProps: Partial<ExcelProps> = {
     allSheets: false,
     parseMode: 'object',
-    includeEmpty: true
+    includeEmpty: true,
+    plainText: true
   };
   state: ExcelControlState = {
     open: false
   };
 
+  ExcelJS: any;
+
   @autobind
   handleDrop(files: File[]) {
     const {allSheets, onChange} = this.props;
@@ -63,6 +71,7 @@ export default class ExcelControl extends React.PureComponent<
     reader.onload = async () => {
       if (reader.result) {
         import('exceljs').then(async (ExcelJS: any) => {
+          this.ExcelJS = ExcelJS;
           const workbook = new ExcelJS.Workbook();
           await workbook.xlsx.load(reader.result);
           if (allSheets) {
@@ -88,7 +97,7 @@ export default class ExcelControl extends React.PureComponent<
    */
   readWorksheet(worksheet: any) {
     const result: any[] = [];
-    const {parseMode} = this.props;
+    const {parseMode, plainText} = this.props;
 
     if (parseMode === 'array') {
       worksheet.eachRow((row: any, rowNumber: number) => {
@@ -107,7 +116,23 @@ export default class ExcelControl extends React.PureComponent<
           const data: any = {};
           row.eachCell((cell: any, colNumber: any) => {
             if (firstRowValues[colNumber]) {
-              data[firstRowValues[colNumber]] = cell.value;
+              let value = cell.value;
+              if (plainText) {
+                const ExcelValueType = this.ExcelJS.ValueType;
+                if (cell.type === ExcelValueType.Hyperlink) {
+                  value = cell.value.hyperlink;
+                } else if (cell.type === ExcelValueType.Formula) {
+                  value = cell.value.result;
+                } else if (cell.type === ExcelValueType.RichText) {
+                  value = cell.value.richText
+                    .map((item: any) => item.text)
+                    .join('');
+                } else if (cell.type === ExcelValueType.Error) {
+                  value = '';
+                }
+              }
+
+              data[firstRowValues[colNumber]] = value;
             }
           });
           result.push(data);

package/src/renderers/Form/InputFile.tsx

@@ -20,6 +20,7 @@ import {
   SchemaClassName,
   SchemaTokenizeableString
 } from '../../Schema';
+import merge from 'lodash/merge';
 
 /**
  * File 文件上传控件
@@ -356,11 +357,12 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     if (value && value instanceof Blob) {
       files = [value as any];
     } else if (value) {
-      files = (Array.isArray(value)
-        ? value
-        : joinValues
-        ? `${(value as any)[valueField] || value}`.split(delimiter)
-        : [value as any]
+      files = (
+        Array.isArray(value)
+          ? value
+          : joinValues
+          ? `${(value as any)[valueField] || value}`.split(delimiter)
+          : [value as any]
       )
         .map(item => FileControl.valueToFile(item, props) as FileValue)
         .filter(item => item);
@@ -402,11 +404,12 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       let files: Array<FileValue> = [];
 
       if (value) {
-        files = (Array.isArray(value)
-          ? value
-          : joinValues && typeof value === 'string'
-          ? value.split(delimiter)
-          : [value as any]
+        files = (
+          Array.isArray(value)
+            ? value
+            : joinValues && typeof value === 'string'
+            ? value.split(delimiter)
+            : [value as any]
         )
           .map(item => {
             let obj = FileControl.valueToFile(
@@ -851,8 +854,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
   }
 
   syncAutoFill() {
-    const {autoFill, multiple, onBulkChange} = this.props;
-    if (!isEmpty(autoFill)) {
+    const {autoFill, multiple, onBulkChange, data} = this.props;
+    if (!isEmpty(autoFill) && onBulkChange) {
       const files = this.state.files.filter(
         file => ~['uploaded', 'init', 'ready'].indexOf(file.state as string)
       );
@@ -864,7 +867,12 @@ export default class FileControl extends React.Component<FileProps, FileState> {
             }
           : files[0]
       );
-      onBulkChange && onBulkChange(toSync);
+      Object.keys(toSync).forEach(key => {
+        if (isPlainObject(toSync[key]) && isPlainObject(data[key])) {
+          toSync[key] = merge({}, data[key], toSync[key]);
+        }
+      });
+      onBulkChange(toSync);
     }
   }
 
@@ -1223,13 +1231,15 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                       onClick={this.handleSelect}
                     >
                       <Icon icon="upload" className="icon" />
-                      {!multiple && files.length
-                        ? __('File.repick')
-                        : multiple && files.length
-                        ? __('File.continueAdd')
-                        : btnLabel
-                        ? btnLabel
-                        : __('File.upload')}
+                      <span>
+                        {!multiple && files.length
+                          ? __('File.repick')
+                          : multiple && files.length
+                          ? __('File.continueAdd')
+                          : btnLabel
+                          ? btnLabel
+                          : __('File.upload')}
+                      </span>
                     </Button>
                   ) : null}