amis 2.3.1 → 2.3.2-beta.1

package/esm/renderers/Form/TabsTransferPicker.js

@@ -1,10 +1,10 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 
 import { __extends, __assign, __decorate, __metadata } from 'tslib';
-import { createObject, autobind, OptionsControl } from 'amis-core';
+import { resolveEventData, createObject, autobind, OptionsControl } from 'amis-core';
 import React from 'react';
 import { Selection, TabsTransferPicker, Spinner } from 'amis-ui';
 import { BaseTabsTransferRenderer } from './TabsTransfer.js';
@@ -19,8 +19,8 @@ import { BaseTabsTransferRenderer } from './TabsTransfer.js';
         return _this;
     }
     TabsTransferPickerRenderer.prototype.dispatchEvent = function (name) {
-        var _a = this.props, dispatchEvent = _a.dispatchEvent, data = _a.data;
-        dispatchEvent(name, data);
+        var _a = this.props, dispatchEvent = _a.dispatchEvent, value = _a.value;
+        dispatchEvent(name, resolveEventData(this.props, { value: value }, 'value'));
     };
     TabsTransferPickerRenderer.prototype.optionItemRender = function (option, states) {
         var _a = this.props, menuTpl = _a.menuTpl, render = _a.render, data = _a.data;

package/esm/renderers/Form/Textarea.js

@@ -1,11 +1,11 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 
-import { __extends, __rest, __assign, __decorate, __metadata } from 'tslib';
+import { __extends, __awaiter, __generator, __rest, __assign, __decorate, __metadata } from 'tslib';
 import React from 'react';
-import { autobind, bindRendererEvent, FormItem } from 'amis-core';
+import { resolveEventData, autobind, FormItem } from 'amis-core';
 import { Textarea } from 'amis-ui';
 
 var TextAreaControl = /** @class */ (function (_super) {
@@ -31,27 +31,55 @@ var TextAreaControl = /** @class */ (function (_super) {
         (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     TextAreaControl.prototype.handleChange = function (e) {
-        var onChange = this.props.onChange;
+        var _a = this.props, onChange = _a.onChange, dispatchEvent = _a.dispatchEvent;
+        dispatchEvent('change', resolveEventData(this.props, { value: e }, 'value'));
         onChange && onChange(e);
     };
     TextAreaControl.prototype.handleFocus = function (e) {
-        var onFocus = this.props.onFocus;
+        var _this = this;
+        var _a = this.props, onFocus = _a.onFocus, dispatchEvent = _a.dispatchEvent, value = _a.value;
         this.setState({
             focused: true
-        }, function () {
-            onFocus && onFocus(e);
-        });
+        }, function () { return __awaiter(_this, void 0, void 0, function () {
+            var rendererEvent;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, dispatchEvent('focus', resolveEventData(this.props, { value: value }, 'value'))];
+                    case 1:
+                        rendererEvent = _a.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        onFocus && onFocus(e);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     };
     TextAreaControl.prototype.handleBlur = function (e) {
-        var _a = this.props, onBlur = _a.onBlur, trimContents = _a.trimContents, value = _a.value, onChange = _a.onChange;
+        var _this = this;
+        var _a = this.props, onBlur = _a.onBlur, trimContents = _a.trimContents, value = _a.value, onChange = _a.onChange, dispatchEvent = _a.dispatchEvent;
         this.setState({
             focused: false
-        }, function () {
-            if (trimContents && value && typeof value === 'string') {
-                onChange(value.trim());
-            }
-            onBlur && onBlur(e);
-        });
+        }, function () { return __awaiter(_this, void 0, void 0, function () {
+            var rendererEvent;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (trimContents && value && typeof value === 'string') {
+                            onChange(value.trim());
+                        }
+                        return [4 /*yield*/, dispatchEvent('blur', resolveEventData(this.props, { value: value }, 'value'))];
+                    case 1:
+                        rendererEvent = _a.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        onBlur && onBlur(e);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     };
     TextAreaControl.prototype.render = function () {
         var rest = __rest(this.props, []);
@@ -66,21 +94,18 @@ var TextAreaControl = /** @class */ (function (_super) {
     };
     __decorate([
         autobind,
-        bindRendererEvent('change', undefined, false),
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], TextAreaControl.prototype, "handleChange", null);
     __decorate([
         autobind,
-        bindRendererEvent('focus'),
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], TextAreaControl.prototype, "handleFocus", null);
     __decorate([
         autobind,
-        bindRendererEvent('blur'),
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)

package/esm/renderers/Form/Transfer.js

@@ -1,12 +1,12 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 
 import { __extends, __awaiter, __generator, __assign, __decorate, __metadata } from 'tslib';
 import React from 'react';
 import find from 'lodash/find';
-import { findTreeIndex, optionValueCompare, getTree, spliceTree, string2regExp, filterTree, createObject, resolveVariable, autobind, OptionsControl } from 'amis-core';
+import { findTreeIndex, optionValueCompare, getTree, spliceTree, resolveEventData, string2regExp, filterTree, createObject, resolveVariable, autobind, OptionsControl } from 'amis-core';
 import { Selection, ResultList, Transfer, Spinner } from 'amis-ui';
 
 var BaseTransferRenderer = /** @class */ (function (_super) {
@@ -61,10 +61,11 @@ var BaseTransferRenderer = /** @class */ (function (_super) {
                         }
                         (newOptions.length > options.length || optionModified) &&
                             setOptions(newOptions, true);
-                        return [4 /*yield*/, dispatchEvent('change', {
+                        return [4 /*yield*/, dispatchEvent('change', resolveEventData(this.props, {
                                 value: newValue,
-                                options: options
-                            })];
+                                options: options,
+                                items: options // 为了保持名字统一
+                            }, 'value'))];
                     case 1:
                         rendererEvent = _b.sent();
                         if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
@@ -175,7 +176,7 @@ var BaseTransferRenderer = /** @class */ (function (_super) {
     };
     BaseTransferRenderer.prototype.onSelectAll = function (options) {
         var _a = this.props, dispatchEvent = _a.dispatchEvent, data = _a.data;
-        dispatchEvent('selectAll', createObject(data, { options: options }));
+        dispatchEvent('selectAll', createObject(data, { items: options }));
     };
     // 动作
     BaseTransferRenderer.prototype.doAction = function (action, data, throwErrors) {

package/esm/renderers/Form/TransferPicker.js

@@ -1,10 +1,10 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 
 import { __extends, __decorate, __metadata } from 'tslib';
-import { createObject, autobind, OptionsControl } from 'amis-core';
+import { resolveEventData, autobind, OptionsControl } from 'amis-core';
 import React from 'react';
 import { TransferPicker, Spinner } from 'amis-ui';
 import { BaseTransferRenderer } from './Transfer.js';
@@ -15,8 +15,8 @@ import { BaseTransferRenderer } from './Transfer.js';
         return _super !== null && _super.apply(this, arguments) || this;
     }
     TransferPickerRenderer.prototype.dispatchEvent = function (name) {
-        var _a = this.props, dispatchEvent = _a.dispatchEvent, data = _a.data, value = _a.value;
-        dispatchEvent(name, createObject(data, { value: value }));
+        var _a = this.props, dispatchEvent = _a.dispatchEvent, value = _a.value;
+        dispatchEvent(name, resolveEventData(this.props, { value: value }, 'value'));
     };
     // 动作
     TransferPickerRenderer.prototype.doAction = function (action) {

package/esm/renderers/Form/TreeSelect.d.ts

@@ -76,6 +76,7 @@ export interface TreeSelectState {
 }
 export default class TreeSelectControl extends React.Component<TreeSelectProps, TreeSelectState> {
     static defaultProps: {
+        hideRoot: boolean;
         placeholder: string;
         optionsPlaceholder: string;
         multiple: boolean;

package/esm/renderers/Form/TreeSelect.js

@@ -1,11 +1,11 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 
 import { __extends, __assign, __awaiter, __generator, __decorate, __metadata } from 'tslib';
 import React from 'react';
-import { createObject, isEffectiveApi, normalizeOptions, getTreeAncestors, isMobile, Overlay, PopOver, autobind, OptionsControl } from 'amis-core';
+import { resolveEventData, isEffectiveApi, normalizeOptions, getTreeAncestors, isMobile, Overlay, PopOver, autobind, OptionsControl } from 'amis-core';
 import { Tree, ResultBox, Spinner, PopUp } from 'amis-ui';
 import { matchSorter } from 'match-sorter';
 import debouce from 'lodash/debounce';
@@ -63,16 +63,12 @@ var TreeSelectControl = /** @class */ (function (_super) {
         }, function () { return _this.loadRemote(_this.state.inputValue); });
     };
     TreeSelectControl.prototype.handleFocus = function (e) {
-        var _a = this.props, dispatchEvent = _a.dispatchEvent, value = _a.value, data = _a.data;
-        dispatchEvent('focus', createObject(data, {
-            value: value
-        }));
+        var _a = this.props, dispatchEvent = _a.dispatchEvent, value = _a.value;
+        dispatchEvent('focus', resolveEventData(this.props, { value: value }, 'value'));
     };
     TreeSelectControl.prototype.handleBlur = function (e) {
-        var _a = this.props, dispatchEvent = _a.dispatchEvent, value = _a.value, data = _a.data;
-        dispatchEvent('blur', createObject(data, {
-            value: value
-        }));
+        var _a = this.props, dispatchEvent = _a.dispatchEvent, value = _a.value; _a.data;
+        dispatchEvent('blur', resolveEventData(this.props, { value: value }, 'value'));
     };
     TreeSelectControl.prototype.handleKeyPress = function (e) {
         if (e.key === ' ') {
@@ -248,14 +244,12 @@ var TreeSelectControl = /** @class */ (function (_super) {
     };
     TreeSelectControl.prototype.resultChangeEvent = function (value) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, onChange, dispatchEvent, data, rendererEvent;
+            var _a, onChange, dispatchEvent, rendererEvent;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        _a = this.props, onChange = _a.onChange, dispatchEvent = _a.dispatchEvent, data = _a.data;
-                        return [4 /*yield*/, dispatchEvent('change', createObject(data, {
-                                value: value
-                            }))];
+                        _a = this.props, onChange = _a.onChange, dispatchEvent = _a.dispatchEvent, _a.data;
+                        return [4 /*yield*/, dispatchEvent('change', resolveEventData(this.props, { value: value }, 'value'))];
                     case 1:
                         rendererEvent = _b.sent();
                         if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
@@ -282,11 +276,11 @@ var TreeSelectControl = /** @class */ (function (_super) {
         this.treeRef = ref;
     };
     TreeSelectControl.prototype.renderOuter = function () {
-        var _a = this.props, value = _a.value, enableNodePath = _a.enableNodePath, _b = _a.pathSeparator, pathSeparator = _b === void 0 ? '/' : _b, disabled = _a.disabled, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter; _a.placeholder; var options = _a.options, multiple = _a.multiple, valueField = _a.valueField, initiallyOpen = _a.initiallyOpen, unfoldedLevel = _a.unfoldedLevel, withChildren = _a.withChildren, rootLabel = _a.rootLabel, cascade = _a.cascade, rootValue = _a.rootValue, showIcon = _a.showIcon, showRadio = _a.showRadio; _a.popOverContainer; var onlyChildren = _a.onlyChildren, onlyLeaf = _a.onlyLeaf, ns = _a.classPrefix, optionsPlaceholder = _a.optionsPlaceholder, searchable = _a.searchable, autoComplete = _a.autoComplete, maxLength = _a.maxLength, minLength = _a.minLength, labelField = _a.labelField, nodePath = _a.nodePath, onAdd = _a.onAdd, creatable = _a.creatable, createTip = _a.createTip, addControls = _a.addControls, onEdit = _a.onEdit, editable = _a.editable, editTip = _a.editTip, editControls = _a.editControls, removable = _a.removable, removeTip = _a.removeTip, onDelete = _a.onDelete, rootCreatable = _a.rootCreatable, rootCreateTip = _a.rootCreateTip, __ = _a.translate, deferLoad = _a.deferLoad, expandTreeOptions = _a.expandTreeOptions, selfDisabledAffectChildren = _a.selfDisabledAffectChildren, showOutline = _a.showOutline, autoCheckChildren = _a.autoCheckChildren;
+        var _a = this.props, value = _a.value, enableNodePath = _a.enableNodePath, _b = _a.pathSeparator, pathSeparator = _b === void 0 ? '/' : _b, disabled = _a.disabled, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter; _a.placeholder; var options = _a.options, multiple = _a.multiple, valueField = _a.valueField, initiallyOpen = _a.initiallyOpen, unfoldedLevel = _a.unfoldedLevel, withChildren = _a.withChildren, rootLabel = _a.rootLabel, cascade = _a.cascade, rootValue = _a.rootValue, showIcon = _a.showIcon, showRadio = _a.showRadio; _a.popOverContainer; var onlyChildren = _a.onlyChildren, onlyLeaf = _a.onlyLeaf, ns = _a.classPrefix, optionsPlaceholder = _a.optionsPlaceholder, searchable = _a.searchable, autoComplete = _a.autoComplete, maxLength = _a.maxLength, minLength = _a.minLength, labelField = _a.labelField, nodePath = _a.nodePath, onAdd = _a.onAdd, creatable = _a.creatable, createTip = _a.createTip, addControls = _a.addControls, onEdit = _a.onEdit, editable = _a.editable, editTip = _a.editTip, editControls = _a.editControls, removable = _a.removable, removeTip = _a.removeTip, onDelete = _a.onDelete, rootCreatable = _a.rootCreatable, rootCreateTip = _a.rootCreateTip, __ = _a.translate, deferLoad = _a.deferLoad, expandTreeOptions = _a.expandTreeOptions, selfDisabledAffectChildren = _a.selfDisabledAffectChildren, showOutline = _a.showOutline, autoCheckChildren = _a.autoCheckChildren, hideRoot = _a.hideRoot;
         var filtedOptions = !isEffectiveApi(autoComplete) && searchable && this.state.inputValue
             ? this.filterOptions(options, this.state.inputValue)
             : options;
-        return (React.createElement(Tree, { classPrefix: ns, onRef: this.domRef, onlyChildren: onlyChildren, onlyLeaf: onlyLeaf, labelField: labelField, valueField: valueField, disabled: disabled, onChange: this.handleChange, joinValues: joinValues, extractValue: extractValue, delimiter: delimiter, placeholder: __(optionsPlaceholder), options: filtedOptions, highlightTxt: this.state.inputValue, multiple: multiple, initiallyOpen: initiallyOpen, unfoldedLevel: unfoldedLevel, withChildren: withChildren, autoCheckChildren: autoCheckChildren, rootLabel: __(rootLabel), rootValue: rootValue, showIcon: showIcon, showRadio: showRadio, showOutline: showOutline, cascade: cascade, foldedField: "collapsed", hideRoot: true, value: value || '', nodePath: nodePath, enableNodePath: enableNodePath, pathSeparator: pathSeparator, maxLength: maxLength, minLength: minLength, onAdd: onAdd, creatable: creatable, createTip: createTip, rootCreatable: rootCreatable, rootCreateTip: rootCreateTip, onEdit: onEdit, editable: editable, editTip: editTip, removable: removable, removeTip: removeTip, onDelete: onDelete, bultinCUD: !addControls && !editControls, onDeferLoad: deferLoad, onExpandTree: expandTreeOptions, selfDisabledAffectChildren: selfDisabledAffectChildren }));
+        return (React.createElement(Tree, { classPrefix: ns, onRef: this.domRef, onlyChildren: onlyChildren, onlyLeaf: onlyLeaf, labelField: labelField, valueField: valueField, disabled: disabled, onChange: this.handleChange, joinValues: joinValues, extractValue: extractValue, delimiter: delimiter, placeholder: __(optionsPlaceholder), options: filtedOptions, highlightTxt: this.state.inputValue, multiple: multiple, initiallyOpen: initiallyOpen, unfoldedLevel: unfoldedLevel, withChildren: withChildren, autoCheckChildren: autoCheckChildren, rootLabel: __(rootLabel), rootValue: rootValue, showIcon: showIcon, showRadio: showRadio, showOutline: showOutline, cascade: cascade, foldedField: "collapsed", hideRoot: hideRoot, value: value || '', nodePath: nodePath, enableNodePath: enableNodePath, pathSeparator: pathSeparator, maxLength: maxLength, minLength: minLength, onAdd: onAdd, creatable: creatable, createTip: createTip, rootCreatable: rootCreatable, rootCreateTip: rootCreateTip, onEdit: onEdit, editable: editable, editTip: editTip, removable: removable, removeTip: removeTip, onDelete: onDelete, bultinCUD: !addControls && !editControls, onDeferLoad: deferLoad, onExpandTree: expandTreeOptions, selfDisabledAffectChildren: selfDisabledAffectChildren }));
     };
     TreeSelectControl.prototype.render = function () {
         var _this = this;
@@ -313,6 +307,7 @@ var TreeSelectControl = /** @class */ (function (_super) {
             mobileUI ? (React.createElement(PopUp, { container: env && env.getModalContainer ? env.getModalContainer : undefined, className: cx("".concat(ns, "TreeSelect-popup")), isShow: isOpened, onHide: this.close }, this.renderOuter())) : null));
     };
     TreeSelectControl.defaultProps = {
+        hideRoot: true,
         placeholder: 'Select.placeholder',
         optionsPlaceholder: 'placeholder.noData',
         multiple: false,

package/esm/renderers/Form/UUID.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Form/UserSelect.js

@@ -1,12 +1,12 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 
 import { __extends, __awaiter, __generator, __assign, __decorate, __metadata } from 'tslib';
 import React from 'react';
 import cx from 'classnames';
-import { isEffectiveApi, createObject, autobind, OptionsControl } from 'amis-core';
+import { isEffectiveApi, createObject, resolveEventData, autobind, OptionsControl } from 'amis-core';
 import { UserTabSelect, UserSelect } from 'amis-ui';
 import find from 'lodash/find';
 
@@ -91,11 +91,11 @@ var UserSelectControl = /** @class */ (function (_super) {
     };
     UserSelectControl.prototype.changeValue = function (value) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, joinValues, extractValue, delimiter, multiple, valueField, onChange, options, data, dispatchEvent, newValue, additonalOptions, rendererEvent;
+            var _a, joinValues, extractValue, delimiter, multiple, valueField, onChange, options, dispatchEvent, newValue, additonalOptions, rendererEvent;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter, multiple = _a.multiple, valueField = _a.valueField, onChange = _a.onChange, options = _a.options, _a.setOptions, data = _a.data, dispatchEvent = _a.dispatchEvent;
+                        _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter, multiple = _a.multiple, valueField = _a.valueField, onChange = _a.onChange, options = _a.options, _a.setOptions, _a.data, dispatchEvent = _a.dispatchEvent;
                         newValue = value;
                         additonalOptions = [];
                         (Array.isArray(value) ? value : value ? [value] : []).forEach(function (option) {
@@ -130,10 +130,11 @@ var UserSelectControl = /** @class */ (function (_super) {
                                 newValue = newValue ? newValue[valueField || 'value'] : '';
                             }
                         }
-                        return [4 /*yield*/, dispatchEvent('change', createObject(data, {
+                        return [4 /*yield*/, dispatchEvent('change', resolveEventData(this.props, {
                                 value: newValue,
-                                options: options
-                            }))];
+                                options: options,
+                                items: options // 为了保持名字统一
+                            }, 'value'))];
                     case 1:
                         rendererEvent = _b.sent();
                         if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {

package/esm/renderers/Grid.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Grid2D.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/GridNav.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/HBox.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/IFrame.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Icon.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Image.d.ts

@@ -119,7 +119,14 @@ export interface ImageThumbProps extends LocaleProps, ThemeProps, Omit<ImageSche
     onLoad?: React.EventHandler<any>;
     overlays?: JSX.Element;
 }
-export declare class ImageThumb extends React.Component<ImageThumbProps> {
+interface ImageThumbState {
+    imageLoading: boolean;
+}
+export declare class ImageThumb extends React.Component<ImageThumbProps, ImageThumbState> {
+    constructor(props: ImageThumbProps);
+    componentDidUpdate(preProps: ImageThumbProps): void;
+    handleImgLoaded(e: React.SyntheticEvent<HTMLImageElement, Event>): void;
+    handleImgError(e: React.SyntheticEvent<HTMLImageElement, Event>): void;
     handleEnlarge(): void;
     render(): JSX.Element;
 }

package/esm/renderers/Image.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 
@@ -10,27 +10,55 @@ import { Icon } from 'amis-ui';
 
 var ImageThumb = /** @class */ (function (_super) {
     __extends(ImageThumb, _super);
-    function ImageThumb() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function ImageThumb(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            imageLoading: false
+        };
+        return _this;
     }
+    ImageThumb.prototype.componentDidUpdate = function (preProps) {
+        if (preProps.src !== this.props.src) {
+            this.setState({
+                imageLoading: true
+            });
+        }
+    };
+    ImageThumb.prototype.handleImgLoaded = function (e) {
+        var _a, _b;
+        this.setState({
+            imageLoading: false
+        });
+        (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onLoad) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+    };
+    ImageThumb.prototype.handleImgError = function (e) {
+        this.setState({
+            imageLoading: false
+        });
+    };
     ImageThumb.prototype.handleEnlarge = function () {
         var _a = this.props, onEnlarge = _a.onEnlarge, rest = __rest(_a, ["onEnlarge"]);
         onEnlarge && onEnlarge(rest);
     };
     ImageThumb.prototype.render = function () {
-        var _a = this.props, cx = _a.classnames, className = _a.className, imageClassName = _a.imageClassName, thumbClassName = _a.thumbClassName, thumbMode = _a.thumbMode, thumbRatio = _a.thumbRatio, height = _a.height, width = _a.width, src = _a.src, alt = _a.alt, title = _a.title, caption = _a.caption, href = _a.href, _b = _a.blank, blank = _b === void 0 ? true : _b, htmlTarget = _a.htmlTarget, onLoad = _a.onLoad, enlargeAble = _a.enlargeAble, __ = _a.translate, overlays = _a.overlays, imageMode = _a.imageMode;
+        var _a = this.props, cx = _a.classnames, className = _a.className, imageClassName = _a.imageClassName, thumbClassName = _a.thumbClassName, thumbMode = _a.thumbMode, thumbRatio = _a.thumbRatio, height = _a.height, width = _a.width, src = _a.src, alt = _a.alt, title = _a.title, caption = _a.caption, href = _a.href, _b = _a.blank, blank = _b === void 0 ? true : _b, htmlTarget = _a.htmlTarget; _a.onLoad; var enlargeAble = _a.enlargeAble, __ = _a.translate, overlays = _a.overlays, imageMode = _a.imageMode;
+        var imageLoading = this.state.imageLoading;
+        var imageContent = (React.createElement(React.Fragment, null,
+            imageLoading ? (React.createElement("img", { className: cx('Image-image', imageClassName), src: imagePlaceholder, alt: alt })) : null,
+            React.createElement("img", { onLoad: this.handleImgLoaded, onError: this.handleImgError, className: cx('Image-image', imageClassName, {
+                    'Image-image--loading': imageLoading
+                }), src: src, alt: alt })));
         var enlarge = enlargeAble || overlays ? (React.createElement("div", { key: "overlay", className: cx('Image-overlay') },
             enlargeAble ? (React.createElement("a", { "data-tooltip": __('Image.zoomIn'), "data-position": "bottom", target: "_blank", onClick: this.handleEnlarge },
                 React.createElement(Icon, { icon: "view", className: "icon" }))) : null,
             overlays)) : null;
         var image = (React.createElement("div", { className: cx('Image', imageMode === 'original' ? 'Image--original' : 'Image--thumb', className) },
             imageMode === 'original' ? (React.createElement("div", { className: cx('Image-origin', thumbMode ? "Image-origin--".concat(thumbMode) : ''), style: { height: height, width: width } },
-                React.createElement("img", { onLoad: onLoad, className: cx('Image-image', imageClassName), src: src, alt: alt }),
+                imageContent,
                 enlarge)) : (React.createElement("div", { className: cx('Image-thumbWrap') },
                 React.createElement("div", { className: cx('Image-thumb', thumbClassName, thumbMode ? "Image-thumb--".concat(thumbMode) : '', thumbRatio
                         ? "Image-thumb--".concat(thumbRatio.replace(/:/g, '-'))
-                        : ''), style: { height: height, width: width } },
-                    React.createElement("img", { onLoad: onLoad, className: cx('Image-image', imageClassName), src: src, alt: alt })),
+                        : ''), style: { height: height, width: width } }, imageContent),
                 enlarge)),
             title || caption ? (React.createElement("div", { key: "caption", className: cx('Image-info') },
                 title ? (React.createElement("div", { className: cx('Image-title'), title: title }, title)) : null,
@@ -40,6 +68,18 @@ var ImageThumb = /** @class */ (function (_super) {
         }
         return image;
     };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ImageThumb.prototype, "handleImgLoaded", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ImageThumb.prototype, "handleImgError", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),

package/esm/renderers/Images.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Json.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Link.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/List.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Log.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Mapping.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Markdown.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Nav.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Operation.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Page.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Pagination.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/PaginationWrapper.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Panel.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Plain.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/PopOver.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Portlet.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Progress.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */
 

package/esm/renderers/Property.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.1
+ * amis v2.3.2-beta.1
  * Copyright 2018-2022 baidu
  */