amis 1.8.0-beta.1 → 1.8.0-beta.5

package/lib/renderers/Wizard.js

@@ -45,7 +45,7 @@ var Wizard = /** @class */ (function (_super) {
                 }
             })
                 .then(function (value) {
-                onInit && onInit(store.data);
+                _this.handleInitEvent(store.data);
                 var state = {
                     currentStep: typeof _this.props.startStep === 'string'
                         ? parseInt((0, tpl_builtin_1.tokenize)(_this.props.startStep, _this.props.data))
@@ -74,7 +74,7 @@ var Wizard = /** @class */ (function (_super) {
                 currentStep: typeof this.props.startStep === 'string'
                     ? parseInt((0, tpl_builtin_1.tokenize)(this.props.startStep, this.props.data))
                     : 1
-            }, function () { return onInit && onInit(store.data); });
+            }, function () { return _this.handleInitEvent(store.data); });
         }
         var dom = (0, react_dom_1.findDOMNode)(this);
         if (!(dom instanceof Element)) {
@@ -105,6 +105,37 @@ var Wizard = /** @class */ (function (_super) {
         parent && parent.removeEventListener('scroll', this.affixDetect);
         this.unSensor && this.unSensor();
     };
+    Wizard.prototype.dispatchEvent = function (action, value) {
+        var _a;
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var _b, dispatchEvent, data, rendererEvent;
+            return (0, tslib_1.__generator)(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _b = this.props, dispatchEvent = _b.dispatchEvent, data = _b.data;
+                        return [4 /*yield*/, dispatchEvent(action, (0, helper_1.createObject)(data, value ? { value: value } : {}))];
+                    case 1:
+                        rendererEvent = _c.sent();
+                        return [2 /*return*/, (_a = rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) !== null && _a !== void 0 ? _a : false];
+                }
+            });
+        });
+    };
+    Wizard.prototype.handleInitEvent = function (data) {
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var onInit;
+            return (0, tslib_1.__generator)(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onInit = this.props.onInit;
+                        return [4 /*yield*/, this.dispatchEvent('inited', data)];
+                    case 1:
+                        (_a.sent()) && onInit && onInit(data);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     Wizard.prototype.affixDetect = function () {
         if (!this.props.affixFooter ||
             !this.affixDom.current ||
@@ -128,14 +159,28 @@ var Wizard = /** @class */ (function (_super) {
         affixed ? affixDom.classList.add('in') : affixDom.classList.remove('in');
     };
     Wizard.prototype.gotoStep = function (index) {
-        var steps = this.props.steps || [];
-        index = Math.max(Math.min(steps.length, index), 1);
-        if (index != this.state.currentStep) {
-            this.setState({
-                currentStep: index,
-                completeStep: Math.max(this.state.completeStep, index - 1)
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var steps;
+            return (0, tslib_1.__generator)(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        steps = this.props.steps || [];
+                        index = Math.max(Math.min(steps.length, index), 1);
+                        if (!(index != this.state.currentStep)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.dispatchEvent('stepChange')];
+                    case 1:
+                        if (_a.sent()) {
+                            return [2 /*return*/];
+                        }
+                        this.setState({
+                            currentStep: index,
+                            completeStep: Math.max(this.state.completeStep, index - 1)
+                        });
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
             });
-        }
+        });
     };
     Wizard.prototype.formRef = function (ref) {
         if (ref) {
@@ -235,8 +280,8 @@ var Wizard = /** @class */ (function (_super) {
     Wizard.prototype.handleAction = function (e, action, data, throwErrors, delegate) {
         var _this = this;
         if (throwErrors === void 0) { throwErrors = false; }
-        var _a = this.props, onAction = _a.onAction, store = _a.store, env = _a.env;
-        if (action.actionType === 'next' || action.type === 'submit') {
+        var _a = this.props, onAction = _a.onAction, store = _a.store, env = _a.env, steps = _a.steps;
+        if (action.actionType === 'next' || action.type === 'submit' || action.actionType === 'step-submit') {
             this.form.doAction((0, tslib_1.__assign)((0, tslib_1.__assign)({}, action), { actionType: 'submit' }), data);
         }
         else if (action.actionType === 'prev') {
@@ -294,6 +339,15 @@ var Wizard = /** @class */ (function (_super) {
         else if (action.actionType === 'reload') {
             action.target && this.reloadTarget(action.target, data);
         }
+        else if (action.actionType === 'goto-step') {
+            var targetStep = data.step;
+            if (targetStep !== undefined && targetStep <= steps.length && targetStep >= 0) {
+                this.gotoStep(data.step);
+            }
+        }
+        else if (action.actionType === 'submit') {
+            this.finalSubmit();
+        }
         else if (onAction) {
             onAction(e, action, data, throwErrors, delegate || this.context);
         }
@@ -322,8 +376,24 @@ var Wizard = /** @class */ (function (_super) {
         });
     };
     Wizard.prototype.handleChange = function (values) {
-        var store = this.props.store;
-        store.updateData(values);
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var store, previous, final;
+            return (0, tslib_1.__generator)(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        store = this.props.store;
+                        previous = store.data;
+                        final = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, previous), values);
+                        return [4 /*yield*/, this.dispatchEvent('change', final)];
+                    case 1:
+                        if (_a.sent()) {
+                            return [2 /*return*/];
+                        }
+                        store.updateData(values);
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     Wizard.prototype.handleInit = function (values) {
         var step = this.state.currentStep;
@@ -342,150 +412,185 @@ var Wizard = /** @class */ (function (_super) {
         });
         store.updateData(reseted);
     };
-    // 接管里面 form 的提交，不能直接让 form 提交，因为 wizard 自己需要知道进度。
-    Wizard.prototype.handleSubmit = function (values, action) {
-        var _a, _b;
-        var _this = this;
-        var _c = this.props, store = _c.store, steps = _c.steps, api = _c.api, asyncApi = _c.asyncApi, finishedField = _c.finishedField, target = _c.target, redirect = _c.redirect, reload = _c.reload, env = _c.env, onFinished = _c.onFinished;
-        var step = steps[this.state.currentStep - 1];
-        store.updateData(values);
-        if (this.state.currentStep < steps.length) {
-            var finnalAsyncApi_1 = action.asyncApi || step.asyncApi;
-            (0, api_1.isEffectiveApi)(finnalAsyncApi_1, store.data) &&
-                store.updateData((_a = {},
-                    _a[finishedField || 'finished'] = false,
-                    _a));
-            if ((0, api_1.isEffectiveApi)(action.api || step.api, store.data)) {
-                store
-                    .saveRemote(action.api || step.api, store.data, {
-                    onSuccess: function () {
-                        if (!(0, api_1.isEffectiveApi)(finnalAsyncApi_1, store.data) ||
-                            store.data[finishedField || 'finished']) {
-                            return;
+    Wizard.prototype.finalSubmit = function (values, action) {
+        if (values === void 0) { values = {}; }
+        if (action === void 0) { action = { type: 'submit' }; }
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var _a, store, steps, api, asyncApi, finishedField, target, redirect, reload, env, onFinished, step, finnalAsyncApi_1, formStore;
+            var _b;
+            var _this = this;
+            return (0, tslib_1.__generator)(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _a = this.props, store = _a.store, steps = _a.steps, api = _a.api, asyncApi = _a.asyncApi, finishedField = _a.finishedField, target = _a.target, redirect = _a.redirect, reload = _a.reload, env = _a.env, onFinished = _a.onFinished;
+                        return [4 /*yield*/, this.dispatchEvent('finished', store.data)];
+                    case 1:
+                        if (_c.sent()) {
+                            return [2 /*return*/];
                         }
-                        return (0, helper_1.until)(function () { return store.checkRemote(finnalAsyncApi_1, store.data); }, function (ret) { return ret && ret[finishedField || 'finished']; }, function (cancel) { return (_this.asyncCancel = cancel); });
-                    },
-                    onFailed: function (json) {
-                        if (json.status === 422 && json.errors && _this.form) {
-                            _this.form.props.store.setFormItemErrors(json.errors);
+                        step = steps[this.state.currentStep - 1];
+                        store.updateData(values);
+                        // 最后一步
+                        if (target) {
+                            this.submitToTarget(target, store.data);
+                            this.setState({ completeStep: steps.length });
                         }
-                    }
-                })
-                    .then(function (value) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
-                    var feedback, confirmed;
-                    return (0, tslib_1.__generator)(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                feedback = action.feedback;
-                                if (!(feedback && (0, helper_1.isVisible)(feedback, value))) return [3 /*break*/, 2];
-                                return [4 /*yield*/, this.openFeedback(feedback, value)];
-                            case 1:
-                                confirmed = _a.sent();
-                                // 如果 feedback 配置了，取消就跳过原有逻辑。
-                                if (feedback.skipRestOnCancel && !confirmed) {
-                                    throw new helper_1.SkipOperation();
-                                }
-                                else if (feedback.skipRestOnConfirm && confirmed) {
-                                    throw new helper_1.SkipOperation();
-                                }
-                                _a.label = 2;
-                            case 2:
-                                this.gotoStep(value && typeof value.step === 'number'
-                                    ? value.step
-                                    : this.state.currentStep + 1);
-                                return [2 /*return*/];
+                        else if (action.api || step.api || api) {
+                            finnalAsyncApi_1 = action.asyncApi || step.asyncApi || asyncApi;
+                            (0, api_1.isEffectiveApi)(finnalAsyncApi_1, store.data) &&
+                                store.updateData((_b = {},
+                                    _b[finishedField || 'finished'] = false,
+                                    _b));
+                            formStore = this.form
+                                ? this.form.props.store
+                                : store;
+                            store.markSaving(true);
+                            formStore
+                                .saveRemote(action.api || step.api || api, store.data, {
+                                onSuccess: function () {
+                                    _this.dispatchEvent('submitSucc', store.data);
+                                    if (!(0, api_1.isEffectiveApi)(finnalAsyncApi_1, store.data) ||
+                                        store.data[finishedField || 'finished']) {
+                                        return;
+                                    }
+                                    return (0, helper_1.until)(function () { return store.checkRemote(finnalAsyncApi_1, store.data); }, function (ret) { return ret && ret[finishedField || 'finished']; }, function (cancel) { return (_this.asyncCancel = cancel); });
+                                },
+                                onFailed: function (json) { return _this.dispatchEvent('submitFail', json); }
+                            })
+                                .then(function (value) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+                                var feedback, confirmed, finalRedirect;
+                                return (0, tslib_1.__generator)(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            feedback = action.feedback;
+                                            if (!(feedback && (0, helper_1.isVisible)(feedback, value))) return [3 /*break*/, 2];
+                                            return [4 /*yield*/, this.openFeedback(feedback, value)];
+                                        case 1:
+                                            confirmed = _a.sent();
+                                            // 如果 feedback 配置了，取消就跳过原有逻辑。
+                                            if (feedback.skipRestOnCancel && !confirmed) {
+                                                throw new helper_1.SkipOperation();
+                                            }
+                                            else if (feedback.skipRestOnConfirm && confirmed) {
+                                                throw new helper_1.SkipOperation();
+                                            }
+                                            _a.label = 2;
+                                        case 2:
+                                            this.setState({ completeStep: steps.length });
+                                            store.updateData((0, tslib_1.__assign)((0, tslib_1.__assign)({}, store.data), value));
+                                            store.markSaving(false);
+                                            if (value && typeof value.step === 'number') {
+                                                this.gotoStep(value.step);
+                                            }
+                                            else if (onFinished && onFinished(value, action) === false) {
+                                                // 如果是 false 后面的操作就不执行
+                                                return [2 /*return*/, value];
+                                            }
+                                            finalRedirect = (action.redirect || step.redirect || redirect) &&
+                                                (0, tpl_1.filter)(action.redirect || step.redirect || redirect, store.data);
+                                            if (finalRedirect) {
+                                                env.jumpTo(finalRedirect, action);
+                                            }
+                                            else if (action.reload || step.reload || reload) {
+                                                this.reloadTarget(action.reload || step.reload || reload, store.data);
+                                            }
+                                            return [2 /*return*/, value];
+                                    }
+                                });
+                            }); })
+                                .catch(function (error) {
+                                _this.dispatchEvent('submitFail', error);
+                                store.markSaving(false);
+                                console.error(error);
+                            });
                         }
-                    });
-                }); })
-                    .catch(function (reason) {
-                    if (reason instanceof helper_1.SkipOperation) {
-                        return;
-                    }
-                    // do nothing
-                });
-            }
-            else {
-                this.gotoStep(this.state.currentStep + 1);
-            }
-        }
-        else {
-            // 最后一步
-            if (target) {
-                this.submitToTarget(target, store.data);
-                this.setState({ completeStep: steps.length });
-            }
-            else if (action.api || step.api || api) {
-                var finnalAsyncApi_2 = action.asyncApi || step.asyncApi || asyncApi;
-                (0, api_1.isEffectiveApi)(finnalAsyncApi_2, store.data) &&
-                    store.updateData((_b = {},
-                        _b[finishedField || 'finished'] = false,
-                        _b));
-                var formStore = this.form
-                    ? this.form.props.store
-                    : store;
-                store.markSaving(true);
-                formStore
-                    .saveRemote(action.api || step.api || api, store.data, {
-                    onSuccess: function () {
-                        if (!(0, api_1.isEffectiveApi)(finnalAsyncApi_2, store.data) ||
-                            store.data[finishedField || 'finished']) {
-                            return;
+                        else {
+                            onFinished && onFinished(store.data, action);
+                            this.setState({ completeStep: steps.length });
                         }
-                        return (0, helper_1.until)(function () { return store.checkRemote(finnalAsyncApi_2, store.data); }, function (ret) { return ret && ret[finishedField || 'finished']; }, function (cancel) { return (_this.asyncCancel = cancel); });
-                    }
-                })
-                    .then(function (value) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
-                    var feedback, confirmed, finalRedirect;
-                    return (0, tslib_1.__generator)(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                feedback = action.feedback;
-                                if (!(feedback && (0, helper_1.isVisible)(feedback, value))) return [3 /*break*/, 2];
-                                return [4 /*yield*/, this.openFeedback(feedback, value)];
-                            case 1:
-                                confirmed = _a.sent();
-                                // 如果 feedback 配置了，取消就跳过原有逻辑。
-                                if (feedback.skipRestOnCancel && !confirmed) {
-                                    throw new helper_1.SkipOperation();
-                                }
-                                else if (feedback.skipRestOnConfirm && confirmed) {
-                                    throw new helper_1.SkipOperation();
-                                }
-                                _a.label = 2;
-                            case 2:
-                                this.setState({ completeStep: steps.length });
-                                store.updateData((0, tslib_1.__assign)((0, tslib_1.__assign)({}, store.data), value));
-                                store.markSaving(false);
-                                if (value && typeof value.step === 'number') {
-                                    this.gotoStep(value.step);
-                                }
-                                else if (onFinished && onFinished(value, action) === false) {
-                                    // 如果是 false 后面的操作就不执行
-                                    return [2 /*return*/, value];
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    // 接管里面 form 的提交，不能直接让 form 提交，因为 wizard 自己需要知道进度。
+    Wizard.prototype.handleSubmit = function (values, action) {
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var _a, store, steps, finishedField, step, finnalAsyncApi_2;
+            var _b;
+            var _this = this;
+            return (0, tslib_1.__generator)(this, function (_c) {
+                _a = this.props, store = _a.store, steps = _a.steps, finishedField = _a.finishedField;
+                if (this.state.currentStep < steps.length) {
+                    step = steps[this.state.currentStep - 1];
+                    store.updateData(values);
+                    finnalAsyncApi_2 = action.asyncApi || step.asyncApi;
+                    (0, api_1.isEffectiveApi)(finnalAsyncApi_2, store.data) &&
+                        store.updateData((_b = {},
+                            _b[finishedField || 'finished'] = false,
+                            _b));
+                    if ((0, api_1.isEffectiveApi)(action.api || step.api, store.data)) {
+                        store
+                            .saveRemote(action.api || step.api, store.data, {
+                            onSuccess: function () {
+                                _this.dispatchEvent('stepSubmitSucc', store.data);
+                                if (!(0, api_1.isEffectiveApi)(finnalAsyncApi_2, store.data) ||
+                                    store.data[finishedField || 'finished']) {
+                                    return;
                                 }
-                                finalRedirect = (action.redirect || step.redirect || redirect) &&
-                                    (0, tpl_1.filter)(action.redirect || step.redirect || redirect, store.data);
-                                if (finalRedirect) {
-                                    env.jumpTo(finalRedirect, action);
+                                return (0, helper_1.until)(function () { return store.checkRemote(finnalAsyncApi_2, store.data); }, function (ret) { return ret && ret[finishedField || 'finished']; }, function (cancel) { return (_this.asyncCancel = cancel); });
+                            },
+                            onFailed: function (json) {
+                                _this.dispatchEvent('stepSubmitFail', json);
+                                if (json.status === 422 && json.errors && _this.form) {
+                                    _this.form.props.store.setFormItemErrors(json.errors);
                                 }
-                                else if (action.reload || step.reload || reload) {
-                                    this.reloadTarget(action.reload || step.reload || reload, store.data);
+                            }
+                        })
+                            .then(function (value) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+                            var feedback, confirmed;
+                            return (0, tslib_1.__generator)(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        feedback = action.feedback;
+                                        if (!(feedback && (0, helper_1.isVisible)(feedback, value))) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, this.openFeedback(feedback, value)];
+                                    case 1:
+                                        confirmed = _a.sent();
+                                        // 如果 feedback 配置了，取消就跳过原有逻辑。
+                                        if (feedback.skipRestOnCancel && !confirmed) {
+                                            throw new helper_1.SkipOperation();
+                                        }
+                                        else if (feedback.skipRestOnConfirm && confirmed) {
+                                            throw new helper_1.SkipOperation();
+                                        }
+                                        _a.label = 2;
+                                    case 2:
+                                        this.gotoStep(value && typeof value.step === 'number'
+                                            ? value.step
+                                            : this.state.currentStep + 1);
+                                        return [2 /*return*/];
                                 }
-                                return [2 /*return*/, value];
-                        }
-                    });
-                }); })
-                    .catch(function (e) {
-                    store.markSaving(false);
-                    console.error(e);
-                });
-            }
-            else {
-                onFinished && onFinished(store.data, action);
-                this.setState({ completeStep: steps.length });
-            }
-        }
-        return false;
+                            });
+                        }); })
+                            .catch(function (reason) {
+                            _this.dispatchEvent('stepSubmitFail', reason);
+                            if (reason instanceof helper_1.SkipOperation) {
+                                return;
+                            }
+                            // do nothing
+                        });
+                    }
+                    else {
+                        this.gotoStep(this.state.currentStep + 1);
+                    }
+                }
+                else {
+                    this.finalSubmit(values, action);
+                }
+                return [2 /*return*/, false];
+            });
+        });
     };
     Wizard.prototype.handleDialogConfirm = function (values, action, targets) {
         var store = this.props.store;
@@ -691,7 +796,7 @@ var Wizard = /** @class */ (function (_super) {
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
         (0, tslib_1.__metadata)("design:paramtypes", [Object]),
-        (0, tslib_1.__metadata)("design:returntype", void 0)
+        (0, tslib_1.__metadata)("design:returntype", Promise)
     ], Wizard.prototype, "handleChange", null);
     (0, tslib_1.__decorate)([
         helper_1.autobind,
@@ -709,7 +814,7 @@ var Wizard = /** @class */ (function (_super) {
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
         (0, tslib_1.__metadata)("design:paramtypes", [Object, typeof (_d = typeof types_1.Action !== "undefined" && types_1.Action) === "function" ? _d : Object]),
-        (0, tslib_1.__metadata)("design:returntype", void 0)
+        (0, tslib_1.__metadata)("design:returntype", Promise)
     ], Wizard.prototype, "handleSubmit", null);
     (0, tslib_1.__decorate)([
         helper_1.autobind,