amis-editor 4.2.0-beta.0 → 5.2.0-beta.0

package/lib/plugin/Wizard.js

@@ -0,0 +1,799 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+var React = require('react');
+var util = require('../util.js');
+var schema = require('../event-action/schema.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var WizardPlugin = /** @class */ (function (_super) {
+    tslib.__extends(WizardPlugin, _super);
+    function WizardPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'wizard';
+        _this.$schema = '/schemas/WizardSchema.json';
+        _this.name = '向导';
+        _this.isBaseComponent = true;
+        _this.description = '表单向导，可以将复杂的多个表单项拆分成多个步骤，一步一步指引用户完成填写。';
+        _this.docLink = '/amis/zh-CN/components/wizard';
+        _this.tags = ['功能'];
+        _this.icon = 'fa fa-list-ol';
+        _this.scaffold = {
+            type: 'wizard',
+            steps: [
+                {
+                    title: '第一步',
+                    body: [
+                        {
+                            type: 'input-text',
+                            label: '文本',
+                            name: 'var1'
+                        }
+                    ]
+                },
+                {
+                    title: '第二步',
+                    body: [
+                        {
+                            type: 'input-text',
+                            label: '文本2',
+                            name: 'var2'
+                        }
+                    ]
+                }
+            ]
+        };
+        _this.previewSchema = {
+            type: 'wizard',
+            className: 'text-left m-b-none',
+            steps: [
+                {
+                    title: '第一步',
+                    body: [
+                        {
+                            type: 'input-text',
+                            label: '文本',
+                            name: 'var1'
+                        }
+                    ]
+                },
+                {
+                    title: '第二步',
+                    body: []
+                }
+            ]
+        };
+        // 事件定义
+        _this.events = [
+            {
+                eventName: 'inited',
+                eventLabel: '初始化完成',
+                description: '远程初始化接口请求成功时触发',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data': {
+                                type: 'object',
+                                title: 'initApi 远程请求返回的初始化数据'
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                eventName: 'finished',
+                eventLabel: '点击完成',
+                description: '最终提交时触发',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data': {
+                                type: 'object',
+                                title: '提交的表单数据'
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                eventName: 'stepChange',
+                eventLabel: '步骤切换',
+                description: '切换步骤时触发',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data.step': {
+                                type: 'string',
+                                title: '步骤索引'
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                eventName: 'change',
+                eventLabel: '数值变化',
+                description: '表单值变化时触发',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data': {
+                                type: 'object',
+                                title: '当前表单数据'
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                eventName: 'submitSucc',
+                eventLabel: '提交成功',
+                description: '最终提交成功时触发',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data': {
+                                type: 'object',
+                                title: '提交成功后返回的数据'
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                eventName: 'submitFail',
+                eventLabel: '提交失败',
+                description: '最终提交失败时触发',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data.error': {
+                                type: 'object',
+                                title: '提交失败后返回的错误信息'
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                eventName: 'stepSubmitSucc',
+                eventLabel: '步骤提交成功',
+                description: '单个步骤提交成功'
+            },
+            {
+                eventName: 'stepSubmitFail',
+                eventLabel: '步骤提交失败',
+                description: '单个步骤提交失败',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data.error': {
+                                type: 'object',
+                                title: '单个步骤提交失败后返回的错误信息'
+                            }
+                        }
+                    }
+                ]
+            }
+        ];
+        // 动作定义
+        _this.actions = [
+            {
+                actionType: 'submit',
+                actionLabel: '全部提交',
+                description: '提交全部数据'
+            },
+            {
+                actionType: 'stepSubmit',
+                actionLabel: '分步提交',
+                description: '提交当前步骤数据',
+                desc: function (info) {
+                    return (React__default["default"].createElement("div", null,
+                        React__default["default"].createElement("span", { className: "variable-right" }, info === null || info === void 0 ? void 0 : info.__rendererLabel),
+                        "\u63D0\u4EA4\u5F53\u524D\u6B65\u9AA4\u6570\u636E"));
+                }
+            },
+            {
+                actionType: 'prev',
+                actionLabel: '上一步',
+                description: '返回上一步'
+            },
+            {
+                actionType: 'next',
+                actionLabel: '下一步',
+                description: '提交当前步骤数据'
+            },
+            {
+                actionType: 'goto-step',
+                actionLabel: '定位步骤',
+                description: '切换到指定步骤',
+                config: ['step'],
+                desc: function (info) {
+                    var _a;
+                    return (React__default["default"].createElement("div", null,
+                        React__default["default"].createElement("span", { className: "variable-right" }, info === null || info === void 0 ? void 0 : info.__rendererLabel),
+                        "\u5207\u6362\u5230\u7B2C",
+                        React__default["default"].createElement("span", { className: "variable-left variable-right" }, (_a = info === null || info === void 0 ? void 0 : info.args) === null || _a === void 0 ? void 0 : _a.step),
+                        "\u6B65"));
+                },
+                schema: schema.getComboWrapper([
+                    {
+                        type: 'input-formula',
+                        variables: '${variables}',
+                        evalMode: false,
+                        required: true,
+                        variableMode: 'tabs',
+                        label: '目标步骤',
+                        size: 'lg',
+                        name: 'step',
+                        mode: 'horizontal'
+                    }
+                ])
+            },
+            {
+                actionType: 'reload',
+                actionLabel: '重新加载',
+                description: '触发组件数据刷新并重新渲染'
+            },
+            {
+                actionType: 'setValue',
+                actionLabel: '更新数据',
+                description: '触发组件数据更新'
+            }
+        ];
+        _this.panelTitle = '向导';
+        _this.panelBodyCreator = function (context) {
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: [
+                            {
+                                name: 'steps',
+                                label: '步骤设置',
+                                type: 'combo',
+                                multiple: true,
+                                multiLine: true,
+                                addButtonText: '新增一步',
+                                scaffold: {
+                                    title: '标题',
+                                    items: [
+                                        {
+                                            type: 'input-text',
+                                            name: 'var1',
+                                            label: '文本'
+                                        }
+                                    ]
+                                },
+                                items: [
+                                    {
+                                        name: 'title',
+                                        type: 'input-text',
+                                        label: '标题',
+                                        pipeIn: function (value, data) { return value || data.label; }
+                                    },
+                                    {
+                                        type: 'fieldSet',
+                                        title: '其他设置',
+                                        collapsed: true,
+                                        collapsable: true,
+                                        className: 'fieldset m-b-none',
+                                        body: [
+                                            {
+                                                name: 'mode',
+                                                label: '展示模式',
+                                                type: 'button-group-select',
+                                                size: 'xs',
+                                                mode: 'inline',
+                                                className: 'w-full',
+                                                value: 'normal',
+                                                options: [
+                                                    {
+                                                        label: '默认',
+                                                        value: 'normal'
+                                                    },
+                                                    {
+                                                        label: '左右摆放',
+                                                        value: 'horizontal'
+                                                    },
+                                                    {
+                                                        label: '内联',
+                                                        value: 'inline'
+                                                    }
+                                                ]
+                                            },
+                                            AMisCodeEditor.getSchemaTpl('horizontal', {
+                                                visibleOn: 'data.mode == "horizontal"'
+                                            }),
+                                            AMisCodeEditor.getSchemaTpl('api', {
+                                                label: '保存接口',
+                                                description: '如果接口返回了 <code>step</code> 变量，且数值是数字类型，比如 <code>3</code>，提交完后回跳到第 3 步'
+                                            }),
+                                            AMisCodeEditor.getSchemaTpl('switch', {
+                                                label: '采用异步方式?',
+                                                name: 'asyncApi',
+                                                visibleOn: 'data.api',
+                                                labelRemark: {
+                                                    trigger: 'click',
+                                                    rootClose: true,
+                                                    title: '什么是异步方式？',
+                                                    content: '异步方式主要用来解决请求超时问题，启用异步方式后，程序会在请求完后，定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回，而不需要等待流程真正完成。',
+                                                    placement: 'left'
+                                                },
+                                                pipeIn: function (value) { return value != null; },
+                                                pipeOut: function (value) { return (value ? '' : undefined); }
+                                            }),
+                                            AMisCodeEditor.getSchemaTpl('api', {
+                                                name: 'asyncApi',
+                                                label: '异步检测接口',
+                                                visibleOn: 'data.asyncApi != null',
+                                                description: '设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束'
+                                            }),
+                                            {
+                                                type: 'divider'
+                                            },
+                                            AMisCodeEditor.getSchemaTpl('api', {
+                                                name: 'initApi',
+                                                label: '初始化接口',
+                                                description: '用来初始化表单数据'
+                                            }),
+                                            AMisCodeEditor.getSchemaTpl('switch', {
+                                                label: '采用异步方式？',
+                                                name: 'initAsyncApi',
+                                                visibleOn: 'data.initApi',
+                                                labelRemark: {
+                                                    trigger: 'click',
+                                                    rootClose: true,
+                                                    title: '什么是异步方式？',
+                                                    content: '异步方式主要用来解决请求超时问题，启用异步方式后，程序会在请求完后，定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回，而不需要等待流程真正完成。',
+                                                    placement: 'left'
+                                                },
+                                                pipeIn: function (value) { return value != null; },
+                                                pipeOut: function (value) { return (value ? '' : undefined); }
+                                            }),
+                                            AMisCodeEditor.getSchemaTpl('api', {
+                                                name: 'initAsyncApi',
+                                                label: '异步检测接口',
+                                                visibleOn: 'data.initAsyncApi != null',
+                                                description: '设置此属性后，表单请求 initApi 后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束'
+                                            }),
+                                            AMisCodeEditor.getSchemaTpl('initFetch'),
+                                            {
+                                                label: '是否可被点开',
+                                                type: 'input-text',
+                                                name: 'jumpableOn',
+                                                description: '用表达式来决定，当前步骤是否可被点开。额外可用变量：currentStep 表示当前步骤。'
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                type: 'input-text',
+                                name: 'startStep',
+                                label: '起始默认值',
+                                description: '从第几步开始。可支持模版，但是只有在组件创建时渲染模版并设置当前步数，在之后组件被刷新时，当前step不会根据startStep改变'
+                            }
+                        ]
+                    },
+                    {
+                        title: '接口',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('api', {
+                                name: 'initApi',
+                                label: '初始化接口',
+                                description: '用来初始化向导数据，当接口中返回 <code>step</code> 字段时，可以控制默认跳转到第几步，注意数值一定得是数字类型。当返回 <code>submiting</code> 并且当前步骤中存在异步保存接口时，可以让 wizard 初始进入异步提交状态。'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                label: '采用异步方式？',
+                                name: 'initAsyncApi',
+                                visibleOn: 'data.initApi',
+                                labelRemark: {
+                                    trigger: 'click',
+                                    rootClose: true,
+                                    title: '什么是异步方式？',
+                                    content: '异步方式主要用来解决请求超时问题，启用异步方式后，程序会在请求完后，定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回，而不需要等待流程真正完成。',
+                                    placement: 'left'
+                                },
+                                pipeIn: function (value) { return value != null; },
+                                pipeOut: function (value) { return (value ? '' : undefined); }
+                            }),
+                            AMisCodeEditor.getSchemaTpl('api', {
+                                name: 'initAsyncApi',
+                                label: '异步检测接口',
+                                visibleOn: 'data.initAsyncApi != null',
+                                description: '设置此属性后，表单请求 initApi 后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束'
+                            }),
+                            {
+                                name: 'initFetch',
+                                type: 'radios',
+                                label: '是否初始拉取',
+                                inline: true,
+                                onChange: function () { },
+                                options: [
+                                    {
+                                        label: '是',
+                                        value: true
+                                    },
+                                    {
+                                        label: '否',
+                                        value: false
+                                    },
+                                    {
+                                        label: '表达式',
+                                        value: ''
+                                    }
+                                ]
+                            },
+                            {
+                                name: 'initFetch',
+                                autoComplete: false,
+                                visibleOn: 'typeof this.initFetch !== "boolean"',
+                                type: 'input-text',
+                                placeholder: '',
+                                className: 'm-t-n-sm'
+                            },
+                            {
+                                type: 'divider'
+                            },
+                            AMisCodeEditor.getSchemaTpl('api', {
+                                label: '保存接口',
+                                description: '用来保存表单数据, 最后一步点击完成触发，<code>如果最后一步中已经设置保存接口，则此处设置无效。</code>'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                label: '采用异步方式?',
+                                name: 'asyncApi',
+                                visibleOn: 'data.api',
+                                labelRemark: {
+                                    trigger: 'click',
+                                    rootClose: true,
+                                    title: '什么是异步方式？',
+                                    content: '异步方式主要用来解决请求超时问题，启用异步方式后，程序会在请求完后，定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回，而不需要等待流程真正完成。',
+                                    placement: 'left'
+                                },
+                                pipeIn: function (value) { return value != null; },
+                                pipeOut: function (value) { return (value ? '' : undefined); }
+                            }),
+                            AMisCodeEditor.getSchemaTpl('api', {
+                                name: 'asyncApi',
+                                label: '异步检测接口',
+                                visibleOn: 'data.asyncApi != null',
+                                description: '设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束'
+                            })
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        body: [
+                            {
+                                name: 'mode',
+                                label: '展示模式',
+                                type: 'button-group-select',
+                                size: 'sm',
+                                mode: 'inline',
+                                className: 'w-full',
+                                value: 'horizontal',
+                                options: [
+                                    {
+                                        label: '水平',
+                                        value: 'horizontal'
+                                    },
+                                    {
+                                        label: '垂直',
+                                        value: 'vertical'
+                                    }
+                                ]
+                            },
+                            {
+                                name: 'actionPrevLabel',
+                                label: '上一步按钮名称',
+                                type: 'input-text',
+                                pipeIn: AMisCodeEditor.defaultValue('上一步')
+                            },
+                            {
+                                name: 'actionNextLabel',
+                                label: '下一步按钮名称',
+                                type: 'input-text',
+                                pipeIn: AMisCodeEditor.defaultValue('下一步')
+                            },
+                            {
+                                name: 'actionNextSaveLabel',
+                                label: '保存并下一步按钮名称',
+                                type: 'input-text',
+                                pipeIn: AMisCodeEditor.defaultValue('保存并下一步')
+                            },
+                            {
+                                name: 'actionFinishLabel',
+                                label: '完成按钮名称',
+                                type: 'input-text',
+                                pipeIn: AMisCodeEditor.defaultValue('完成')
+                            },
+                            // {
+                            //   type: 'alert',
+                            //   level: 'info',
+                            //   body: `温馨提示：操作按钮每个步骤可以单独配置，请在右侧切换到需要单独配置的步骤后，点击下方的【自定义按钮】定制。`
+                            // },
+                            AMisCodeEditor.getSchemaTpl('className'),
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                name: 'actionClassName',
+                                label: '按钮 CSS 类名'
+                            })
+                        ]
+                    },
+                    {
+                        title: '其他',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('ref'),
+                            AMisCodeEditor.getSchemaTpl('name'),
+                            AMisCodeEditor.getSchemaTpl('reload'),
+                            {
+                                label: '跳转',
+                                name: 'redirect',
+                                type: 'input-text',
+                                description: '当设置此值后，表单提交完后跳转到目标地址。'
+                            },
+                            AMisCodeEditor.getSchemaTpl('visible')
+                        ]
+                    },
+                    {
+                        title: '事件',
+                        className: 'p-none',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('eventControl', tslib.__assign({ name: 'onEvent' }, util.getEventControlConfig(_this.manager, context)))
+                        ]
+                    }
+                ])
+            ];
+        };
+        _this.patchContainers = ['steps.body'];
+        _this.vRendererConfig = {
+            regions: {
+                body: {
+                    key: 'body',
+                    label: '表单集合',
+                    wrapperResolve: function (dom) { return dom; }
+                },
+                actions: {
+                    label: '按钮组',
+                    key: 'actions',
+                    preferTag: '按钮',
+                    wrapperResolve: function (dom) { return dom; }
+                }
+            },
+            panelTitle: '步骤',
+            panelBodyCreator: function (context) {
+                return AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: [
+                            {
+                                name: 'title',
+                                type: 'input-text',
+                                label: '标题',
+                                pipeIn: function (value, data) { return value || data.label; }
+                            },
+                            AMisCodeEditor.getSchemaTpl('api', {
+                                label: '保存接口',
+                                description: '如果接口返回了 <code>step</code> 变量，且数值是数字类型，比如 <code>3</code>，提交完后回跳到第 3 步'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                label: '采用异步方式?',
+                                name: 'asyncApi',
+                                visibleOn: 'data.api',
+                                labelRemark: {
+                                    trigger: 'click',
+                                    rootClose: true,
+                                    title: '什么是异步方式？',
+                                    content: '异步方式主要用来解决请求超时问题，启用异步方式后，程序会在请求完后，定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回，而不需要等待流程真正完成。',
+                                    placement: 'left'
+                                },
+                                pipeIn: function (value) { return value != null; },
+                                pipeOut: function (value) { return (value ? '' : undefined); }
+                            }),
+                            AMisCodeEditor.getSchemaTpl('api', {
+                                name: 'asyncApi',
+                                label: '异步检测接口',
+                                visibleOn: 'data.asyncApi != null',
+                                description: '设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束'
+                            }),
+                            {
+                                type: 'divider'
+                            },
+                            AMisCodeEditor.getSchemaTpl('api', {
+                                name: 'initApi',
+                                label: '初始化接口',
+                                description: '用来初始化表单数据'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                label: '采用异步方式？',
+                                name: 'initAsyncApi',
+                                visibleOn: 'data.initApi',
+                                labelRemark: {
+                                    trigger: 'click',
+                                    rootClose: true,
+                                    title: '什么是异步方式？',
+                                    content: '异步方式主要用来解决请求超时问题，启用异步方式后，程序会在请求完后，定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回，而不需要等待流程真正完成。',
+                                    placement: 'left'
+                                },
+                                pipeIn: function (value) { return value != null; },
+                                pipeOut: function (value) { return (value ? '' : undefined); }
+                            }),
+                            AMisCodeEditor.getSchemaTpl('api', {
+                                name: 'initAsyncApi',
+                                label: '异步检测接口',
+                                visibleOn: 'data.initAsyncApi != null',
+                                description: '设置此属性后，表单请求 initApi 后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('initFetch')
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        body: [
+                            {
+                                name: 'mode',
+                                label: '展示模式',
+                                type: 'button-group-select',
+                                size: 'xs',
+                                mode: 'inline',
+                                className: 'w-full',
+                                value: 'normal',
+                                options: [
+                                    {
+                                        label: '默认',
+                                        value: 'normal'
+                                    },
+                                    {
+                                        label: '左右摆放',
+                                        value: 'horizontal'
+                                    },
+                                    {
+                                        label: '内联',
+                                        value: 'inline'
+                                    }
+                                ]
+                            },
+                            AMisCodeEditor.getSchemaTpl('horizontal', {
+                                visibleOn: 'data.mode == "horizontal"'
+                            })
+                            // getSchemaTpl('className', {
+                            //   name: 'tabClassName',
+                            //   label: '选项卡成员 CSS 类名'
+                            // })
+                        ]
+                    },
+                    {
+                        title: '其他',
+                        body: [
+                            {
+                                label: '是否可被点开',
+                                type: 'input-text',
+                                name: 'jumpableOn',
+                                description: '用表达式来决定，当前步骤是否可被点开。额外可用变量：currentStep 表示当前步骤。'
+                            }
+                        ]
+                    }
+                ]);
+            }
+        };
+        _this.wizardWrapperResolve = function (dom) {
+            return [].slice.call(dom.querySelectorAll('[role="wizard-body"],[role="wizard-footer"]'));
+        };
+        _this.overrides = {
+            renderWizard: function () {
+                var _this = this;
+                var info = this.props.$$editor;
+                var steps = this.props.steps;
+                var currentStep = this.state.currentStep;
+                var dom = this.super();
+                if (!info || !(steps === null || steps === void 0 ? void 0 : steps[currentStep - 1])) {
+                    return dom;
+                }
+                var index = currentStep - 1;
+                var step = steps[index];
+                var id = step.$$id;
+                var plugin = info.plugin;
+                return AMisCodeEditor.mapReactElement(dom, function (child) {
+                    if (/Wizard-step\b/.test(child.props.className)) {
+                        return (React__default["default"].createElement(AMisCodeEditor.VRenderer, { key: id, type: info.type, plugin: info.plugin, renderer: info.renderer, "$schema": "/schemas/WizardStepSchema.json", hostId: info.id, memberIndex: index, name: step.title || "\u6B65\u9AA4".concat(index + 1), id: id, draggable: false, wrapperResolve: plugin.wizardWrapperResolve, schemaPath: "".concat(info.schemaPath, "/steps/").concat(index), path: "".concat(_this.props.$path, "/").concat(index), data: _this.props.data }, AMisCodeEditor.mapReactElement(child, function (child2, index) {
+                            var _a, _b, _c;
+                            if (((_a = child2.props.schema) === null || _a === void 0 ? void 0 : _a.body) && child2.props.schema.$$id) {
+                                var region = (_c = (_b = plugin.vRendererConfig) === null || _b === void 0 ? void 0 : _b.regions) === null || _c === void 0 ? void 0 : _c.body;
+                                if (!region) {
+                                    return child2;
+                                }
+                                var schema = tslib.__assign({}, child2.props.schema);
+                                delete schema.$$id;
+                                return (React__default["default"].createElement(AMisCodeEditor.RegionWrapper, { key: region.key, preferTag: region.preferTag, name: region.key, label: region.label, regionConfig: region, placeholder: region.placeholder, editorStore: plugin.manager.store, manager: plugin.manager, children: React__default["default"].cloneElement(child2, {
+                                        schema: schema
+                                    }), wrapperResolve: region.wrapperResolve, rendererName: info.renderer.name }));
+                            }
+                            return child2;
+                        })));
+                    }
+                    return child;
+                });
+            },
+            renderFooter: function () {
+                var _a, _b;
+                var info = this.props.$$editor;
+                var steps = this.props.steps;
+                var currentStep = this.state.currentStep;
+                var dom = this.super();
+                if (!info || !(steps === null || steps === void 0 ? void 0 : steps[currentStep - 1])) {
+                    return dom;
+                }
+                var plugin = info.plugin;
+                var region = (_b = (_a = plugin.vRendererConfig) === null || _a === void 0 ? void 0 : _a.regions) === null || _b === void 0 ? void 0 : _b.actions;
+                if (!region) {
+                    return dom;
+                }
+                return (React__default["default"].createElement(AMisCodeEditor.RegionWrapper, { key: region.key, preferTag: region.preferTag, name: region.key, label: region.label, regionConfig: region, placeholder: region.placeholder, editorStore: plugin.manager.store, manager: plugin.manager, children: dom, wrapperResolve: region.wrapperResolve, rendererName: info.renderer.name }));
+            }
+        };
+        return _this;
+    }
+    /**
+     * 补充切换的 toolbar
+     * @param context
+     * @param toolbars
+     */
+    WizardPlugin.prototype.buildEditorToolbar = function (context, toolbars) {
+        if (context.info.plugin === this &&
+            context.info.renderer.name === this.rendererName &&
+            !context.info.hostId) {
+            var node_1 = context.node;
+            toolbars.push({
+                level: 'secondary',
+                icon: 'fa fa-chevron-left',
+                tooltip: '上个步骤',
+                onClick: function () {
+                    var control = node_1.getComponent();
+                    if (control === null || control === void 0 ? void 0 : control.gotoStep) {
+                        var currentIndex = control.state.currentStep;
+                        control.gotoStep(currentIndex - 1);
+                    }
+                }
+            });
+            toolbars.push({
+                level: 'secondary',
+                icon: 'fa fa-chevron-right',
+                tooltip: '下个步骤',
+                onClick: function () {
+                    var control = node_1.getComponent();
+                    if (control === null || control === void 0 ? void 0 : control.gotoStep) {
+                        var currentIndex = control.state.currentStep;
+                        control.gotoStep(currentIndex + 1);
+                    }
+                }
+            });
+        }
+    };
+    WizardPlugin.prototype.filterProps = function (props) {
+        props.affixFooter = false;
+        return props;
+    };
+    return WizardPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(WizardPlugin);
+
+exports.WizardPlugin = WizardPlugin;