From a573d2e41e7a9b9a7ff626694620e032477e7f45 Mon Sep 17 00:00:00 2001 From: liaoxuezhi Date: Tue, 14 Dec 2021 18:59:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=A8=20wizard=20=E4=B8=AD?= =?UTF-8?q?=20feedback=20=E7=94=A8=E6=B3=95=20(#3209)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 补全 wizard 中 feedback 用法 * 修复变量不存在报错 * 避免可能没值导致报错 Co-authored-by: wuduoyi --- src/RootRenderer.tsx | 6 ++-- src/renderers/CRUD.tsx | 6 ++-- src/renderers/Dialog.tsx | 16 ++++----- src/renderers/Drawer.tsx | 8 +++-- src/renderers/Form/Item.tsx | 4 +-- src/renderers/Form/index.tsx | 4 +-- src/renderers/Page.tsx | 21 ++++++------ src/renderers/Wizard.tsx | 64 +++++++++++++++++++++++++++++------- 8 files changed, 87 insertions(+), 42 deletions(-) diff --git a/src/RootRenderer.tsx b/src/RootRenderer.tsx index 463798a64..6665ce22c 100644 --- a/src/RootRenderer.tsx +++ b/src/RootRenderer.tsx @@ -184,12 +184,12 @@ export class RootRenderer extends React.Component { return; } - store.closeDialog(); + store.closeDialog(true); } - handleDialogClose() { + handleDialogClose(confirmed = false) { const store = this.store; - store.closeDialog(); + store.closeDialog(confirmed); } handleDrawerConfirm(values: object[], action: Action, ...args: Array) { diff --git a/src/renderers/CRUD.tsx b/src/renderers/CRUD.tsx index 26bf5ff54..2ab8e4d76 100644 --- a/src/renderers/CRUD.tsx +++ b/src/renderers/CRUD.tsx @@ -885,7 +885,7 @@ export default class CRUD extends React.Component { env } = this.props; - store.closeDialog(); + store.closeDialog(true); const dialogAction = store.action as Action; if (stopAutoRefreshWhenModalIsOpen && interval) { @@ -968,10 +968,10 @@ export default class CRUD extends React.Component { redirect && env.jumpTo(redirect, dialogAction); } - handleDialogClose() { + handleDialogClose(confirmed = false) { const {store, stopAutoRefreshWhenModalIsOpen, silentPolling, interval} = this.props; - store.closeDialog(); + store.closeDialog(confirmed); if (stopAutoRefreshWhenModalIsOpen && interval) { this.timer = setTimeout( diff --git a/src/renderers/Dialog.tsx b/src/renderers/Dialog.tsx index 3c7eee052..4658f3ac0 100644 --- a/src/renderers/Dialog.tsx +++ b/src/renderers/Dialog.tsx @@ -97,7 +97,7 @@ export type DialogSchemaBase = Omit; export interface DialogProps extends RendererProps, Omit { - onClose: () => void; + onClose: (confirmed?: boolean) => void; onConfirm: ( values: Array, action: Action, @@ -214,12 +214,12 @@ export default class Dialog extends React.Component { return ret; } - handleSelfClose() { + handleSelfClose(e?: any, confirmed?: boolean) { const {onClose, store} = this.props; // clear error store.updateMessage(); - onClose(); + onClose(confirmed); } handleAction(e: React.UIEvent, action: Action, data: object) { @@ -251,7 +251,7 @@ export default class Dialog extends React.Component { return; } - store.closeDialog(); + store.closeDialog(true); } handleDialogClose(...args: Array) { @@ -264,7 +264,7 @@ export default class Dialog extends React.Component { return; } - store.closeDialog(); + store.closeDialog(args[1]); } handleDrawerConfirm(values: object[], action: Action, ...args: Array) { @@ -743,7 +743,7 @@ export class DialogRenderer extends Dialog { }, data, action - ) || this.handleSelfClose(); + ) || this.handleSelfClose(undefined, true); } else if (action.actionType === 'next' || action.actionType === 'prev') { store.setCurrentAction(action); if (action.type === 'submit') { @@ -755,7 +755,7 @@ export class DialogRenderer extends Dialog { }, data, action - ) || this.handleSelfClose(); + ) || this.handleSelfClose(undefined, true); } else { onConfirm([data], action, data, []); } @@ -769,7 +769,7 @@ export class DialogRenderer extends Dialog { store.setCurrentAction(action); action.target && scoped.reload(action.target, data); if (action.close || action.type === 'submit') { - this.handleSelfClose(); + this.handleSelfClose(undefined, action.type === 'submit'); this.closeTarget(action.close); } } else if (this.tryChildrenToHandle(action, data)) { diff --git a/src/renderers/Drawer.tsx b/src/renderers/Drawer.tsx index 0981ec64f..ec05fb81b 100644 --- a/src/renderers/Drawer.tsx +++ b/src/renderers/Drawer.tsx @@ -304,7 +304,7 @@ export default class Drawer extends React.Component { return; } - store.closeDialog(); + store.closeDialog(true); } handleDialogClose(...args: Array) { @@ -317,7 +317,11 @@ export default class Drawer extends React.Component { return; } - store.closeDialog(); + if (args.length) { + store.closeDialog(args[1]); + } else { + store.closeDialog(); + } } handleChildFinished(value: any, action: Action) { diff --git a/src/renderers/Form/Item.tsx b/src/renderers/Form/Item.tsx index 945a391c0..f79410e25 100644 --- a/src/renderers/Form/Item.tsx +++ b/src/renderers/Form/Item.tsx @@ -436,12 +436,12 @@ export class FormItemWrap extends React.Component { } @autobind - handleDialogClose() { + handleDialogClose(confirmed = false) { const {formItem: model} = this.props; if (!model) { return; } - model.closeDialog(); + model.closeDialog(confirmed); } renderControl(): JSX.Element | null { diff --git a/src/renderers/Form/index.tsx b/src/renderers/Form/index.tsx index 1dae45f76..263c52a99 100644 --- a/src/renderers/Form/index.tsx +++ b/src/renderers/Form/index.tsx @@ -1167,9 +1167,9 @@ export default class Form extends React.Component { store.closeDialog(true); } - handleDialogClose() { + handleDialogClose(confirmed = false) { const {store} = this.props; - store.closeDialog(false); + store.closeDialog(confirmed); } handleDrawerConfirm( diff --git a/src/renderers/Page.tsx b/src/renderers/Page.tsx index c04792a47..97083556a 100644 --- a/src/renderers/Page.tsx +++ b/src/renderers/Page.tsx @@ -95,7 +95,7 @@ export interface PageSchema extends BaseSchema { */ asideMinWidth?: number; - /** + /** * 边栏最小宽度 */ asideMaxWidth?: number; @@ -471,12 +471,12 @@ export default class Page extends React.Component { return; } - store.closeDialog(); + store.closeDialog(true); } - handleDialogClose() { + handleDialogClose(confirmed = false) { const {store} = this.props; - store.closeDialog(); + store.closeDialog(confirmed); } handleDrawerConfirm(values: object[], action: Action, ...args: Array) { @@ -734,11 +734,13 @@ export default class Page extends React.Component { style={styleVar} > {hasAside ? ( -
+
{render('aside', aside || '', { ...subProps, ...(typeof aside === 'string' @@ -754,7 +756,6 @@ export default class Page extends React.Component { className={cx(`Page-asideResizor`)} >
) : null} -
) : null} diff --git a/src/renderers/Wizard.tsx b/src/renderers/Wizard.tsx index d54c473a6..bd7a6938f 100644 --- a/src/renderers/Wizard.tsx +++ b/src/renderers/Wizard.tsx @@ -9,7 +9,8 @@ import { until, isVisible, getScrollParent, - autobind + autobind, + SkipOperation } from '../utils/helper'; import {isApiOutdated, isEffectiveApi} from '../utils/api'; import {IFormStore} from '../store/form'; @@ -546,8 +547,16 @@ export default class Wizard extends React.Component { .then(async () => { this.form && this.form.isValidated() && this.form.validate(true); - if (action.feedback && isVisible(action.feedback, store.data)) { - await this.openFeedback(action.feedback, store.data); + const feedback = action.feedback; + if (feedback && isVisible(feedback, store.data)) { + const confirmed = await this.openFeedback(feedback, store.data); + + // 如果 feedback 配置了，取消就跳过原有逻辑。 + if (feedback.skipRestOnCancel && !confirmed) { + throw new SkipOperation(); + } else if (feedback.skipRestOnConfirm && confirmed) { + throw new SkipOperation(); + } } const reidrect = @@ -556,7 +565,11 @@ export default class Wizard extends React.Component { action.reload && this.reloadTarget(action.reload, store.data); }) - .catch(() => {}); + .catch(reason => { + if (reason instanceof SkipOperation) { + return; + } + }); } else if (action.actionType === 'reload') { action.target && this.reloadTarget(action.target, data); } else if (onAction) { @@ -667,14 +680,29 @@ export default class Wizard extends React.Component { } } }) - .then((value: any) => + .then(async (value: any) => { + const feedback = action.feedback; + if (feedback && isVisible(feedback, value)) { + const confirmed = await this.openFeedback(feedback, value); + + // 如果 feedback 配置了，取消就跳过原有逻辑。 + if (feedback.skipRestOnCancel && !confirmed) { + throw new SkipOperation(); + } else if (feedback.skipRestOnConfirm && confirmed) { + throw new SkipOperation(); + } + } + this.gotoStep( value && typeof value.step === 'number' ? value.step : this.state.currentStep + 1 - ) - ) - .catch(() => { + ); + }) + .catch(reason => { + if (reason instanceof SkipOperation) { + return; + } // do nothing }); } else { @@ -715,7 +743,19 @@ export default class Wizard extends React.Component { ); } }) - .then(value => { + .then(async value => { + const feedback = action.feedback; + if (feedback && isVisible(feedback, value)) { + const confirmed = await this.openFeedback(feedback, value); + + // 如果 feedback 配置了，取消就跳过原有逻辑。 + if (feedback.skipRestOnCancel && !confirmed) { + throw new SkipOperation(); + } else if (feedback.skipRestOnConfirm && confirmed) { + throw new SkipOperation(); + } + } + this.setState({completeStep: steps.length}); store.updateData({ ...store.data, @@ -771,13 +811,13 @@ export default class Wizard extends React.Component { store.updateData(values[0]); } - store.closeDialog(); + store.closeDialog(true); } @autobind - handleDialogClose() { + handleDialogClose(confirmed = false) { const {store} = this.props; - store.closeDialog(); + store.closeDialog(confirmed); } renderSteps() {