amis 1.7.0 → 1.8.0-beta.2

package/lib/renderers/Form/Combo.js

@@ -4,9 +4,11 @@ exports.KVControlRenderer = exports.ComboControlRenderer = void 0;
 var tslib_1 = require("tslib");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
 var react_dom_1 = require("react-dom");
+var cloneDeep_1 = (0, tslib_1.__importDefault)(require("lodash/cloneDeep"));
 var Item_1 = require("./Item");
 var combo_1 = require("../../store/combo");
 var Tabs_1 = tslib_1.__importStar(require("../../components/Tabs"));
+var Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button"));
 var helper_1 = require("../../utils/helper");
 var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
 var tpl_1 = require("../../utils/tpl");
@@ -131,49 +133,75 @@ var ComboControl = /** @class */ (function (_super) {
         this.props.onChange(value, submitOnChange, true);
     };
     ComboControl.prototype.addItem = function () {
-        var _a = this.props, flat = _a.flat, joinValues = _a.joinValues, delimiter = _a.delimiter, scaffold = _a.scaffold, disabled = _a.disabled, submitOnChange = _a.submitOnChange;
-        if (disabled) {
-            return;
-        }
-        var value = this.getValueAsArray();
-        value.push(flat
-            ? scaffold || ''
-            : (0, tslib_1.__assign)({}, scaffold));
-        this.keys.push((0, helper_1.guid)());
-        if (flat && joinValues) {
-            value = value.join(delimiter || ',');
-        }
-        this.props.onChange(value, submitOnChange, true);
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var _a, flat, joinValues, delimiter, scaffold, disabled, submitOnChange, data, dispatchEvent, value, rendererEvent;
+            return (0, tslib_1.__generator)(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, flat = _a.flat, joinValues = _a.joinValues, delimiter = _a.delimiter, scaffold = _a.scaffold, disabled = _a.disabled, submitOnChange = _a.submitOnChange, data = _a.data, dispatchEvent = _a.dispatchEvent;
+                        if (disabled) {
+                            return [2 /*return*/];
+                        }
+                        value = this.getValueAsArray();
+                        return [4 /*yield*/, dispatchEvent('add', (0, helper_1.createObject)(data, {
+                                value: flat && joinValues ? value.join(delimiter || ',') : (0, cloneDeep_1.default)(value)
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        value.push(flat
+                            ? scaffold || ''
+                            : (0, tslib_1.__assign)({}, scaffold));
+                        this.keys.push((0, helper_1.guid)());
+                        if (flat && joinValues) {
+                            value = value.join(delimiter || ',');
+                        }
+                        this.props.onChange(value, submitOnChange, true);
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     ComboControl.prototype.removeItem = function (key) {
         return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
-            var _a, flat, joinValues, delimiter, disabled, deleteApi, deleteConfirmText, data, env, __, value, ctx, confirmed, result;
+            var _a, flat, joinValues, delimiter, disabled, deleteApi, deleteConfirmText, data, env, __, dispatchEvent, value, ctx, rendererEvent, confirmed, result;
             return (0, tslib_1.__generator)(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        _a = this.props, flat = _a.flat, joinValues = _a.joinValues, delimiter = _a.delimiter, disabled = _a.disabled, deleteApi = _a.deleteApi, deleteConfirmText = _a.deleteConfirmText, data = _a.data, env = _a.env, __ = _a.translate;
+                        _a = this.props, flat = _a.flat, joinValues = _a.joinValues, delimiter = _a.delimiter, disabled = _a.disabled, deleteApi = _a.deleteApi, deleteConfirmText = _a.deleteConfirmText, data = _a.data, env = _a.env, __ = _a.translate, dispatchEvent = _a.dispatchEvent;
                         if (disabled) {
                             return [2 /*return*/];
                         }
                         value = this.getValueAsArray();
                         ctx = (0, helper_1.createObject)(data, value[key]);
-                        if (!(0, api_1.isEffectiveApi)(deleteApi, ctx)) return [3 /*break*/, 3];
-                        return [4 /*yield*/, env.confirm(deleteConfirmText ? (0, tpl_1.filter)(deleteConfirmText, ctx) : __('deleteConfirm'))];
+                        return [4 /*yield*/, dispatchEvent('delete', (0, helper_1.createObject)(data, {
+                                key: key,
+                                value: flat && joinValues ? value.join(delimiter || ',') : (0, cloneDeep_1.default)(value)
+                            }))];
                     case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        if (!(0, api_1.isEffectiveApi)(deleteApi, ctx)) return [3 /*break*/, 4];
+                        return [4 /*yield*/, env.confirm(deleteConfirmText ? (0, tpl_1.filter)(deleteConfirmText, ctx) : __('deleteConfirm'))];
+                    case 2:
                         confirmed = _b.sent();
                         if (!confirmed) {
                             // 如果不确认，则跳过！
                             return [2 /*return*/];
                         }
                         return [4 /*yield*/, env.fetcher(deleteApi, ctx)];
-                    case 2:
+                    case 3:
                         result = _b.sent();
                         if (!result.ok) {
                             env.notify('error', __('deleteFailed'));
                             return [2 /*return*/];
                         }
-                        _b.label = 3;
-                    case 3:
+                        _b.label = 4;
+                    case 4:
                         value.splice(key, 1);
                         this.keys.splice(key, 1);
                         if (flat && joinValues) {
@@ -214,7 +242,8 @@ var ComboControl = /** @class */ (function (_super) {
             setted: false
         });
         if (syncDefaultValue === false ||
-            this.subFormDefaultValues.length !== this.subForms.length) {
+            this.subFormDefaultValues.length !==
+                this.subForms.filter(function (item) { return item !== undefined; }).length) {
             return;
         }
         var value = this.getValueAsArray();
@@ -293,11 +322,11 @@ var ComboControl = /** @class */ (function (_super) {
         var ns = this.props.classPrefix;
         var submitOnChange = this.props.submitOnChange;
         var dom = (0, react_dom_1.findDOMNode)(this);
-        this.sortable = new sortablejs_1.default(dom.querySelector(".".concat(ns, "Combo-items")), {
-            group: "combo-".concat(this.id),
+        this.sortable = new sortablejs_1.default(dom.querySelector("." + ns + "Combo-items"), {
+            group: "combo-" + this.id,
             animation: 150,
-            handle: ".".concat(ns, "Combo-itemDrager"),
-            ghostClass: "".concat(ns, "Combo-item--dragging"),
+            handle: "." + ns + "Combo-itemDrager",
+            ghostClass: ns + "Combo-item--dragging",
             onEnd: function (e) {
                 // 没有移动
                 if (e.newIndex === e.oldIndex) {
@@ -378,8 +407,25 @@ var ComboControl = /** @class */ (function (_super) {
         }
     };
     ComboControl.prototype.handleTabSelect = function (key) {
-        var store = this.props.store;
-        store.setActiveKey(key);
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var _a, store, data, dispatchEvent, rendererEvent;
+            return (0, tslib_1.__generator)(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, store = _a.store, data = _a.data, dispatchEvent = _a.dispatchEvent;
+                        return [4 /*yield*/, dispatchEvent('tabsChange', (0, helper_1.createObject)(data, {
+                                key: key
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        store.setActiveKey(key);
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     ComboControl.prototype.setNull = function (e) {
         e.preventDefault();
@@ -433,7 +479,7 @@ var ComboControl = /** @class */ (function (_super) {
             if (finnalRemovable && // 表达式判断单条是否可删除
                 (!itemRemovableOn ||
                     (0, tpl_1.evalExpression)(itemRemovableOn, value) !== false)) {
-                toolbar = (react_1.default.createElement("div", { onClick: _this.removeItem.bind(_this, index), key: "remove", className: cx("Combo-tab-delBtn ".concat(!store.removable ? 'is-disabled' : '')), "data-tooltip": __('delete'), "data-position": "bottom" }, deleteIcon ? (react_1.default.createElement("i", { className: deleteIcon })) : (react_1.default.createElement(icons_1.Icon, { icon: "status-close", className: "icon" }))));
+                toolbar = (react_1.default.createElement("div", { onClick: _this.removeItem.bind(_this, index), key: "remove", className: cx("Combo-tab-delBtn " + (!store.removable ? 'is-disabled' : '')), "data-tooltip": __('delete'), "data-position": "bottom" }, deleteIcon ? (react_1.default.createElement("i", { className: deleteIcon })) : (react_1.default.createElement(icons_1.Icon, { icon: "status-close", className: "icon" }))));
             }
             if (Array.isArray(conditions) && conditions.length) {
                 condition = _this.pickCondition(data);
@@ -456,7 +502,7 @@ var ComboControl = /** @class */ (function (_super) {
                             label: item.label,
                             value: item.label
                         }); }), value: condition.label, clearable: false }))) : null,
-                react_1.default.createElement("div", { className: cx("Combo-itemInner") }, finnalControls ? (render("multiple/".concat(index), {
+                react_1.default.createElement("div", { className: cx("Combo-itemInner") }, finnalControls ? (render("multiple/" + index, {
                     type: 'form',
                     body: finnalControls,
                     wrapperComponent: 'div',
@@ -485,7 +531,7 @@ var ComboControl = /** @class */ (function (_super) {
         if (this.props.tabsMode) {
             return this.renderTabsMode();
         }
-        var _a = this.props, ns = _a.classPrefix, cx = _a.classnames, formClassName = _a.formClassName, render = _a.render, multiLine = _a.multiLine, addButtonClassName = _a.addButtonClassName, disabled = _a.disabled, store = _a.store, flat = _a.flat, subFormMode = _a.subFormMode, draggable = _a.draggable, draggableTip = _a.draggableTip, addButtonText = _a.addButtonText, addable = _a.addable, removable = _a.removable, typeSwitchable = _a.typeSwitchable, itemRemovableOn = _a.itemRemovableOn, delimiter = _a.delimiter, canAccessSuperData = _a.canAccessSuperData, addIcon = _a.addIcon, dragIcon = _a.dragIcon, deleteIcon = _a.deleteIcon, noBorder = _a.noBorder, conditions = _a.conditions, lazyLoad = _a.lazyLoad, changeImmediately = _a.changeImmediately, placeholder = _a.placeholder, __ = _a.translate;
+        var _a = this.props, ns = _a.classPrefix, cx = _a.classnames, formClassName = _a.formClassName, render = _a.render, multiLine = _a.multiLine, addButtonClassName = _a.addButtonClassName, disabled = _a.disabled, store = _a.store, flat = _a.flat, subFormMode = _a.subFormMode, draggable = _a.draggable, draggableTip = _a.draggableTip, addButtonText = _a.addButtonText, addable = _a.addable, removable = _a.removable, typeSwitchable = _a.typeSwitchable, itemRemovableOn = _a.itemRemovableOn, delimiter = _a.delimiter, canAccessSuperData = _a.canAccessSuperData, addIcon = _a.addIcon, dragIcon = _a.dragIcon, deleteIcon = _a.deleteIcon, noBorder = _a.noBorder, conditions = _a.conditions, lazyLoad = _a.lazyLoad, changeImmediately = _a.changeImmediately, placeholder = _a.placeholder, __ = _a.translate, itemClassName = _a.itemClassName, itemsWrapperClassName = _a.itemsWrapperClassName;
         var items = this.props.items;
         var value = this.props.value;
         if (flat && typeof value === 'string') {
@@ -497,12 +543,12 @@ var ComboControl = /** @class */ (function (_super) {
         return (react_1.default.createElement("div", { className: cx("Combo Combo--multi", multiLine ? "Combo--ver" : "Combo--hor", noBorder ? "Combo--noBorder" : '', disabled ? 'is-disabled' : '', !disabled && draggable && Array.isArray(value) && value.length > 1
                 ? 'is-draggable'
                 : '') },
-            react_1.default.createElement("div", { className: cx("Combo-items") }, Array.isArray(value) && value.length ? (value.map(function (value, index, thelist) {
+            react_1.default.createElement("div", { className: cx("Combo-items", itemsWrapperClassName) }, Array.isArray(value) && value.length ? (value.map(function (value, index, thelist) {
                 var delBtn = null;
                 if (finnalRemovable && // 表达式判断单条是否可删除
                     (!itemRemovableOn ||
                         (0, tpl_1.evalExpression)(itemRemovableOn, value) !== false)) {
-                    delBtn = (react_1.default.createElement("a", { onClick: _this.removeItem.bind(_this, index), key: "remove", className: cx("Combo-delBtn ".concat(!store.removable ? 'is-disabled' : '')), "data-tooltip": __('delete'), "data-position": "bottom" }, deleteIcon ? (react_1.default.createElement("i", { className: deleteIcon })) : (react_1.default.createElement(icons_1.Icon, { icon: "status-close", className: "icon" }))));
+                    delBtn = (react_1.default.createElement(Button_1.default, { key: "remove", className: cx('Combo-delBtn'), disabled: !store.removable, tooltip: __('delete'), tooltipPlacement: "bottom", onClick: _this.removeItem.bind(_this, index) }, deleteIcon ? (react_1.default.createElement("i", { className: deleteIcon })) : (react_1.default.createElement(icons_1.Icon, { icon: "status-close", className: "icon" }))));
                 }
                 var data = _this.formatValue(value, index);
                 var condition = null;
@@ -515,7 +561,7 @@ var ComboControl = /** @class */ (function (_super) {
                         (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (items && items[0])), { name: 'flat' })
                     ]
                     : items;
-                return (react_1.default.createElement("div", { className: cx("Combo-item"), key: _this.keys[index] || (_this.keys[index] = (0, helper_1.guid)()) },
+                return (react_1.default.createElement("div", { className: cx("Combo-item", itemClassName), key: _this.keys[index] || (_this.keys[index] = (0, helper_1.guid)()) },
                     !disabled && draggable && thelist.length > 1 ? (react_1.default.createElement("div", { className: cx('Combo-itemDrager') },
                         react_1.default.createElement("a", { key: "drag", "data-tooltip": __('Combo.dragDropSort'), "data-position": "bottom" }, dragIcon ? (react_1.default.createElement("i", { className: dragIcon })) : (react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: "icon" }))))) : null,
                     condition && typeSwitchable !== false ? (react_1.default.createElement("div", { className: cx('Combo-itemTag') },
@@ -524,7 +570,7 @@ var ComboControl = /** @class */ (function (_super) {
                                 label: item.label,
                                 value: item.label
                             }); }), value: condition.label, clearable: false }))) : null,
-                    react_1.default.createElement("div", { className: cx("Combo-itemInner") }, finnalControls ? (render("multiple/".concat(index), {
+                    react_1.default.createElement("div", { className: cx("Combo-itemInner") }, finnalControls ? (render("multiple/" + index, {
                         type: 'form',
                         body: finnalControls,
                         wrapperComponent: 'div',
@@ -564,7 +610,7 @@ var ComboControl = /** @class */ (function (_super) {
                             return false;
                         }
                     }); })
-                })) : (react_1.default.createElement("button", { type: "button", onClick: this.addItem, className: cx("Button Combo-addBtn", addButtonClassName), "data-tooltip": __('Combo.add') },
+                })) : (react_1.default.createElement(Button_1.default, { className: cx("Combo-addBtn", addButtonClassName), tooltip: __('Combo.add'), onClick: this.addItem },
                     addIcon ? react_1.default.createElement(icons_1.Icon, { icon: "plus", className: "icon" }) : null,
                     react_1.default.createElement("span", null, __(addButtonText || 'Combo.add'))))) : null,
                 draggable ? (react_1.default.createElement("span", { className: cx("Combo-dragableTip"), ref: this.dragTipRef }, Array.isArray(value) && value.length > 1
@@ -572,7 +618,7 @@ var ComboControl = /** @class */ (function (_super) {
                     : '')) : null)) : null));
     };
     ComboControl.prototype.renderSingle = function () {
-        var _a = this.props, conditions = _a.conditions, cx = _a.classnames, render = _a.render, value = _a.value, multiLine = _a.multiLine, formClassName = _a.formClassName, canAccessSuperData = _a.canAccessSuperData, noBorder = _a.noBorder, disabled = _a.disabled, typeSwitchable = _a.typeSwitchable, nullable = _a.nullable, __ = _a.translate;
+        var _a = this.props, conditions = _a.conditions, cx = _a.classnames, render = _a.render, value = _a.value, multiLine = _a.multiLine, formClassName = _a.formClassName, canAccessSuperData = _a.canAccessSuperData, noBorder = _a.noBorder, disabled = _a.disabled, typeSwitchable = _a.typeSwitchable, nullable = _a.nullable, __ = _a.translate, itemClassName = _a.itemClassName;
         var items = this.props.items;
         var data = (0, helper_1.isObject)(value) ? this.formatValue(value) : this.defaultValue;
         var condition = null;
@@ -581,7 +627,7 @@ var ComboControl = /** @class */ (function (_super) {
             items = condition ? condition.items : undefined;
         }
         return (react_1.default.createElement("div", { className: cx("Combo Combo--single", multiLine ? "Combo--ver" : "Combo--hor", noBorder ? "Combo--noBorder" : '', disabled ? 'is-disabled' : '') },
-            react_1.default.createElement("div", { className: cx("Combo-item") },
+            react_1.default.createElement("div", { className: cx("Combo-item", itemClassName) },
                 condition && typeSwitchable !== false ? (react_1.default.createElement("div", { className: cx('Combo-itemTag') },
                     react_1.default.createElement("label", null, __('Combo.type')),
                     react_1.default.createElement(Select_1.default, { onChange: this.handleComboTypeChange.bind(this, 0), options: conditions.map(function (item) { return ({
@@ -627,7 +673,9 @@ var ComboControl = /** @class */ (function (_super) {
         deleteIcon: '',
         tabsMode: false,
         tabsStyle: '',
-        placeholder: 'placeholder.empty'
+        placeholder: 'placeholder.empty',
+        itemClassName: '',
+        itemsWrapperClassName: ''
     };
     ComboControl.propsList = [
         'minLength',
@@ -654,13 +702,15 @@ var ComboControl = /** @class */ (function (_super) {
         'items',
         'conditions',
         'messages',
-        'formStore'
+        'formStore',
+        'itemClassName',
+        'itemsWrapperClassName'
     ];
     (0, tslib_1.__decorate)([
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
         (0, tslib_1.__metadata)("design:paramtypes", [Number]),
-        (0, tslib_1.__metadata)("design:returntype", void 0)
+        (0, tslib_1.__metadata)("design:returntype", Promise)
     ], ComboControl.prototype, "handleTabSelect", null);
     (0, tslib_1.__decorate)([
         helper_1.autobind,