amis 1.4.1 → 1.4.2-beta.1

package/src/components/icons.tsx

@@ -6,6 +6,7 @@
 import React from 'react';
 
 import CloseIcon from '../icons/close.svg';
+import StatusCloseIcon from '../icons/status-close.svg';
 import UnDoIcon from '../icons/undo.svg';
 import ReDoIcon from '../icons/redo.svg';
 import EnterIcon from '../icons/enter.svg';
@@ -24,6 +25,10 @@ import RemoveIcon from '../icons/remove.svg';
 import RetryIcon from '../icons/retry.svg';
 import UploadIcon from '../icons/upload.svg';
 import FileIcon from '../icons/file.svg';
+import StatusSuccessIcon from '../icons/status-success.svg';
+import StatusFailIcon from '../icons/status-fail.svg';
+import StatusInfoIcon from '../icons/status-info.svg';
+import StatusWarningIcon from '../icons/status-warning.svg';
 import SuccessIcon from '../icons/success.svg';
 import FailIcon from '../icons/fail.svg';
 import SearchIcon from '../icons/search.svg';
@@ -36,6 +41,8 @@ import ReloadIcon from '../icons/reload.svg';
 import ExchangeIcon from '../icons/exchange.svg';
 import ColmunsIcon from '../icons/columns.svg';
 import CalendarIcon from '../icons/calendar.svg';
+import ClockIcon from '../icons/clock.svg';
+
 import CopyIcon from '../icons/copy.svg';
 import FilterIcon from '../icons/filter.svg';
 import CaretIcon from '../icons/caret.svg';
@@ -92,6 +99,7 @@ export function registerIcon(key: string, component: React.ReactType<{}>) {
 }
 
 registerIcon('close', CloseIcon);
+registerIcon('status-close', StatusCloseIcon);
 registerIcon('undo', UnDoIcon);
 registerIcon('redo', ReDoIcon);
 registerIcon('enter', EnterIcon);
@@ -113,6 +121,10 @@ registerIcon('remove', RemoveIcon);
 registerIcon('retry', RetryIcon);
 registerIcon('upload', UploadIcon);
 registerIcon('file', FileIcon);
+registerIcon('status-success', StatusSuccessIcon);
+registerIcon('status-fail', StatusFailIcon);
+registerIcon('status-info', StatusInfoIcon);
+registerIcon('status-warning', StatusWarningIcon);
 registerIcon('success', SuccessIcon);
 registerIcon('fail', FailIcon);
 registerIcon('warning', WarningIcon);
@@ -128,6 +140,7 @@ registerIcon('reload', ReloadIcon);
 registerIcon('exchange', ExchangeIcon);
 registerIcon('columns', ColmunsIcon);
 registerIcon('calendar', CalendarIcon);
+registerIcon('clock', ClockIcon);
 registerIcon('copy', CopyIcon);
 registerIcon('filter', FilterIcon);
 registerIcon('column-filter', ColumnFilterIcon);

package/src/icons/clock.svg

@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>ic_时间</title><g id="ic_时间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="1-FL" stroke="#000" cx="8" cy="8" r="6.5" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/><polyline id="2-FLW" stroke="#000" points="7.87443646 5.5 7.87443646 8.53778873 5.5 9.28133409" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/></g></svg>

package/src/icons/status-close.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>关闭</title>
+    <g id="关闭" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标-关闭">
+            <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
+            <path d="M12.549,2.65 L13.256,3.357 L8.659,7.952 L13.2563,12.549 L12.5493,13.257 L7.953,8.659 L3.357,13.257 L2.65,12.549 L7.246,7.952 L2.6503,3.357 L3.3573,2.65 L7.953,7.245 L12.549,2.65 Z" id="图标-填色" fill="#080E1A" opacity="0.5"></path>
+        </g>
+    </g>
+</svg>

package/src/icons/status-fail.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>状态-失败</title>
+    <g id="状态-失败" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图示-图标">
+            <rect id="矩形" stroke="#979797" stroke-width="1.33333333" fill="#D8D8D8" opacity="0" x="0.666666667" y="0.666666667" width="14.6666667" height="14.6666667"></rect>
+            <path d="M10.4361,11.0054 L7.9531,8.5394 L5.4861,11.0224 L4.7771,10.3184 L7.2431,7.8344 L4.7601,5.3674 L5.4651,4.6584 L7.9481,7.1244 L10.4151,4.6424 L11.1241,5.3464 L8.6571,7.8294 L11.1411,10.2964 L10.4361,11.0054 Z M1.00001937,8.0244 C1.0131,11.8894 4.1581,15.0134 8.0231,14.9994934 C11.8901,14.9864 15.0131,11.8424 15.0001806,7.9764 C14.9871,4.1104 11.8421,0.9864 7.9771,1.00030657 C4.1101,1.0134 0.9871,4.1574 1.00001937,8.0244 Z" id="图标-填色" fill="#E8684A"></path>
+        </g>
+    </g>
+</svg>

package/src/icons/status-info.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>6.图标/6.提示/通知/面</title>
+    <g id="6.图标/6.提示/通知/面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Clip-2" points="1.0001 1 15 1 15 14.9999 1.0001 14.9999"></polygon>
+        <path d="M8.0001,0.9999 C11.8661,0.9999 15.0001,4.1349 15.0001,7.9999 C15.0001,11.8659 11.8661,14.9999 8.0001,14.9999 C4.1341,14.9999 1.0001,11.8659 1.0001,7.9999 C1.0001,4.1349 4.1341,0.9999 8.0001,0.9999 Z M8.5001,6.5459 L7.5001,6.5459 L7.5001,11.9999 L8.5001,11.9999 L8.5001,6.5459 Z M8.0001,3.9999 C7.6681,3.9999 7.4001,4.2679 7.4001,4.5999 C7.4001,4.9309 7.6681,5.1999 8.0001,5.1999 C8.3321,5.1999 8.6001,4.9309 8.6001,4.5999 C8.6001,4.2679 8.3321,3.9999 8.0001,3.9999 Z" id="图标-填色" fill="#2468F2"></path>
+    </g>
+</svg>

package/src/icons/status-success.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>状态-成功</title>
+    <g id="状态-成功" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标-提示">
+            <rect id="矩形" stroke="#979797" stroke-width="1.33333333" fill="#D8D8D8" opacity="0" x="0.666666667" y="0.666666667" width="14.6666667" height="14.6666667"></rect>
+            <path d="M7.0286,11.0408 L6.3196,10.3358 L6.3206,10.3348 L4.1896,8.2188 L4.8946,7.5088 L7.0256,9.6258 L11.2526,5.3698 L11.9616,6.0738 L7.0286,11.0408 Z M7.9766,0.999759561 C4.1106,1.0138 0.9866,4.1578 0.999559574,8.0228 C1.0126,11.8898 4.1576,15.0138 8.0236,14.9998469 C11.8896,14.9868 15.0126,11.8428 14.9996404,7.9768 C14.9866,4.1098 11.8426,0.9868 7.9766,0.999759561 L7.9766,0.999759561 Z" id="图标-填色" fill="#0BC280"></path>
+        </g>
+    </g>
+</svg>

package/src/icons/status-warning.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>6.图标/6.提示/异常/面</title>
+    <g id="6.图标/6.提示/异常/面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Clip-2" points="1.0001 1 15 1 15 14.9997 1.0001 14.9997"></polygon>
+        <path d="M8.0001,0.9997 C11.8661,0.9997 15.0001,4.1347 15.0001,7.9997 C15.0001,11.8657 11.8661,14.9997 8.0001,14.9997 C4.1341,14.9997 1.0001,11.8657 1.0001,7.9997 C1.0001,4.1347 4.1341,0.9997 8.0001,0.9997 Z M8.0001,10.7997 C7.6681,10.7997 7.4001,11.0687 7.4001,11.3997 C7.4001,11.7307 7.6681,11.9997 8.0001,11.9997 C8.3321,11.9997 8.6001,11.7307 8.6001,11.3997 C8.6001,11.0687 8.3321,10.7997 8.0001,10.7997 Z M8.5001,3.9997 L7.5001,3.9997 L7.5001,9.4547 L8.5001,9.4547 L8.5001,3.9997 Z" id="形状结合" fill="#FFB200"></path>
+    </g>
+</svg>

package/src/locale/de-DE.ts

@@ -172,6 +172,8 @@ register('de-DE', {
   'Table.startSort': 'Klicken, um Sortierung zu starten',
   'Table.valueField': 'valueField muss vorhanden sein',
   'Table.index': 'Index',
+  'Table.toggleColumn': 'Spalten anzeigen',
+  'Table.searchFields': 'Abfragefelder setzen',
   'Tag.placeholder': 'Noch kein Tag',
   'Tag.tip': 'Kürzlich verwendetes Tag',
   'Text.add': 'Neu {{label}}',

package/src/locale/en-US.ts

@@ -173,6 +173,8 @@ register('en-US', {
   'Table.startSort': 'Click to start sorting',
   'Table.valueField': 'Must have valueField',
   'Table.index': 'Index',
+  'Table.toggleColumn': 'Display columns',
+  'Table.searchFields': 'Set query fields',
   'Tag.placeholder': 'No tag yet',
   'Tag.tip': 'Recently used tag',
   'Text.add': 'New {{label}}',

package/src/locale/zh-CN.ts

@@ -99,7 +99,7 @@ register('zh-CN', {
   'File.start': '开始上传',
   'File.upload': '上传文件',
   'File.uploadFailed': '接口返回错误，请仔细检查',
-  'File.uploading': '文件上传中',
+  'File.uploading': '上传中...',
   'Form.loadOptionsFailed': '加载选项失败，原因：{{reason}}',
   'Form.submit': '提交',
   'Form.title': '表单',
@@ -177,6 +177,8 @@ register('zh-CN', {
   'Table.startSort': '点击开始排序',
   'Table.valueField': '请配置 valueField',
   'Table.index': '序号',
+  'Table.toggleColumn': '显示列',
+  'Table.searchFields': '设置查询字段',
   'Tag.placeholder': '暂无标签',
   'Tag.tip': '最近使用的标签',
   'Text.add': '新增：{{label}}',

package/src/renderers/Action.tsx

@@ -139,6 +139,11 @@ export interface ButtonSchema extends BaseSchema {
    * 是否显示loading效果
    */
   loadingOn?: string;
+
+  /**
+   * 自定义事件处理函数
+   */
+  onClick?: string | any;
 }
 
 export interface AjaxActionSchema extends ButtonSchema {

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,
@@ -362,6 +346,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     'footerToolbar',
     'filterTogglable',
     'filterDefaultVisible',
+    'autoGenerateFilter',
     'syncResponse2Query',
     'keepItemSelectionOnPageChange',
     'labelTpl',
@@ -478,8 +463,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 +485,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 +645,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 +1790,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       return null;
     }
 
+    const {render, store} = this.props;
     const type = (toolbar as Schema).type || toolbar;
 
     if (type === 'bulkActions' || type === 'bulk-actions') {
@@ -1810,6 +1809,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       return this.renderExportCSV(toolbar as Schema);
     } 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 +1851,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 +1993,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       popOverContainer,
       translate: __,
       onQuery,
+      autoGenerateFilter,
+      onSelect,
       ...rest
     } = this.props;
 
@@ -2044,6 +2045,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             key: 'body',
             className: cx('Crud-body', bodyClassName),
             ref: this.controlRef,
+            autoGenerateFilter: !filter && autoGenerateFilter,
             selectable: !!(
               (this.hasBulkActionsToolbar() && this.hasBulkActions()) ||
               pickerMode
@@ -2076,6 +2078,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

package/src/renderers/Collapse.tsx

@@ -176,8 +176,8 @@ export default class Collapse extends React.Component<
           onClick={this.toggleCollapsed}
           className={cx(`Collapse-header`, headingClassName)}
         >
-          {render('heading', finalTitle)}
           {collapsable && <span className={cx('Collapse-arrow')} />}
+          {render('heading', finalTitle)}
         </HeadingComponent>
       ) : null,
 

package/src/renderers/Dialog.tsx

@@ -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';
 
 /**
  * 下拉按钮渲染器。
@@ -77,10 +78,16 @@ export interface DropdownButtonSchema extends BaseSchema {
    */
   iconOnly?: boolean;
 
+  /**
+   * 右侧图标
+   */
+  rightIcon?: SchemaIcon;
+
   /**
    * 触发条件，默认是 click
    */
   trigger?: 'click' | 'hover';
+
   /**
    * 是否显示下拉按钮
    */
@@ -274,12 +281,17 @@ export default class DropDownButton extends React.Component<
       align,
       iconOnly,
       icon,
+      rightIcon,
       isActived,
       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(
@@ -322,21 +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}
-            {
-              !hideCaret
-              ? <span className={cx('DropDown-caret')} >
-                <Icon icon="caret" className="icon" />
+            {rightIconElement}
+            {!hideCaret ? (
+              <span className={cx('DropDown-caret')}>
+                <Icon icon="ellipsis-v" className="icon" />
               </span>
-              : null
-            }
+            ) : 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/InputFile.tsx

@@ -1223,13 +1223,14 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                       onClick={this.handleSelect}
                     >
                       <Icon icon="upload" className="icon" />
-                      {!multiple && files.length
+                      <span>{!multiple && files.length
                         ? __('File.repick')
                         : multiple && files.length
                         ? __('File.continueAdd')
                         : btnLabel
                         ? btnLabel
                         : __('File.upload')}
+                      </span>
                     </Button>
                   ) : null}
 

package/src/renderers/Form/InputImage.tsx

@@ -1377,7 +1377,6 @@ export default class ImageControl extends React.Component<
                                     fixedSize ? fixedSizeClassName : ''
                                   )}
                                 >
-                                  <p>{__('File.uploading')}</p>
                                   <div className={cx('ImageControl-progress')}>
                                     <span
                                       style={{
@@ -1390,6 +1389,7 @@ export default class ImageControl extends React.Component<
                                       )}
                                     />
                                   </div>
+                                  <p>{__('File.uploading')}</p>
                                 </div>
                               </>
                             ) : (
@@ -1524,7 +1524,10 @@ export default class ImageControl extends React.Component<
                             thumbRatio={thumbRatio}
                           />
                         ) : (
-                          <Icon icon="plus" className="icon" />
+                          <>
+                            <Icon icon="plus" className="icon" />
+                            <span>{__('File.upload')}</span>
+                          </>
                         )}
 
                         {isFocused ? (

package/src/renderers/Form/Options.tsx

@@ -270,7 +270,8 @@ export function registerOptionsControl(config: OptionsConfig) {
       : [];
     static ComposedComponent = Control;
 
-    reaction?: () => void;
+    toDispose: Array<() => void> = [];
+
     input: any;
     mounted = false;
 
@@ -302,9 +303,18 @@ export function registerOptionsControl(config: OptionsConfig) {
           data
         );
 
-        this.reaction = reaction(
-          () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
-          () => this.mounted && this.forceUpdate()
+        this.toDispose.push(
+          reaction(
+            () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
+            () => this.mounted && this.forceUpdate()
+          )
+        );
+
+        this.toDispose.push(
+          reaction(
+            () => JSON.stringify(formItem.options),
+            () => this.mounted && this.syncAutoFill(formItem.tmpValue)
+          )
         );
         // 默认全选。这里会和默认值\回填值逻辑冲突，所以如果有配置source则不执行默认全选
         if (
@@ -432,7 +442,8 @@ export function registerOptionsControl(config: OptionsConfig) {
 
     componentWillUnmount() {
       this.props.removeHook?.(this.reload, 'init');
-      this.reaction?.();
+      this.toDispose.forEach(fn => fn());
+      this.toDispose = [];
     }
 
     syncAutoFill(value: any) {

package/src/renderers/Form/Picker.tsx

@@ -397,14 +397,15 @@ export default class PickerControl extends React.PureComponent<
       options,
       multiple,
       valueField,
-      embed
+      embed,
+      source
     } = this.props;
 
     return render('modal-body', this.state.schema, {
       value: selectedOptions,
       valueField,
       primaryField: valueField,
-      options: options,
+      options: source ? [] : options,
       multiple,
       onSelect: embed ? this.handleChange : undefined,
       ref: this.crudRef,

package/src/renderers/Form/wrapControl.tsx

@@ -506,8 +506,8 @@ export function wrapControl<
 
             if (
               // 如果配置了 minLength 或者 maxLength 就切成及时验证
-              (typeof maxLength && maxLength) ||
-              (typeof minLength && minLength) ||
+              this.model.rules.minLength ||
+              this.model.rules.maxLength ||
               validateOnChange === true ||
               (validateOnChange !== false && (formSubmited || validated))
             ) {

package/src/renderers/IFrame.tsx

@@ -149,7 +149,7 @@ export default class IFrame extends React.Component<IFrameProps, object> {
 
   render() {
     const {width, height} = this.state;
-    let {className, src, frameBorder, data, style} = this.props;
+    let {className, src, name, frameBorder, data, style} = this.props;
 
     let tempStyle: any = {};
 
@@ -177,6 +177,7 @@ export default class IFrame extends React.Component<IFrameProps, object> {
 
     return (
       <iframe
+        name={name}
         className={className}
         frameBorder={frameBorder}
         style={style}

package/src/renderers/Image.tsx

@@ -7,6 +7,7 @@ import {Icon} from '../components/icons';
 import {LocaleProps, localeable} from '../locale';
 import {BaseSchema, SchemaClassName, SchemaTpl, SchemaUrlPath} from '../Schema';
 import {resolveVariable} from '../utils/tpl-builtin';
+import handleAction from '../utils/handleAction';
 
 /**
  * 图片展示控件。
@@ -322,6 +323,14 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
       );
   }
 
+  @autobind
+  handleClick(e: React.MouseEvent<HTMLElement>) {
+    const clickAction = this.props.clickAction;
+    if (clickAction) {
+      handleAction(e, clickAction, this.props);
+    }
+  }
+
   render() {
     const {
       className,
@@ -359,6 +368,7 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
             : 'ImageField--thumb',
           className
         )}
+        onClick={this.handleClick}
       >
         {value ? (
           <ThemedImageThumb