feat: 补全 wizard 中 feedback 用法 (#3209)

* feat: 补全 wizard 中 feedback 用法

* 修复变量不存在报错

* 避免可能没值导致报错

Co-authored-by: wuduoyi <wuduoyi@baidu.com>

src/RootRenderer.tsx

@@ -184,12 +184,12 @@ export class RootRenderer extends React.Component<RootRendererProps> {
       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<any>) {

src/renderers/CRUD.tsx

@@ -885,7 +885,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       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<CRUDProps, any> {
     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(

src/renderers/Dialog.tsx

@@ -97,7 +97,7 @@ export type DialogSchemaBase = Omit<DialogSchema, 'type'>;
 export interface DialogProps
   extends RendererProps,
     Omit<DialogSchema, 'className'> {
-  onClose: () => void;
+  onClose: (confirmed?: boolean) => void;
   onConfirm: (
     values: Array<object>,
     action: Action,
@@ -214,12 +214,12 @@ export default class Dialog extends React.Component<DialogProps> {
     return ret;
   }
 
-  handleSelfClose() {
+  handleSelfClose(e?: any, confirmed?: boolean) {
     const {onClose, store} = this.props;
 
     // clear error
     store.updateMessage();
-    onClose();
+    onClose(confirmed);
   }
 
   handleAction(e: React.UIEvent<any>, action: Action, data: object) {
@@ -251,7 +251,7 @@ export default class Dialog extends React.Component<DialogProps> {
       return;
     }
 
-    store.closeDialog();
+    store.closeDialog(true);
   }
 
   handleDialogClose(...args: Array<any>) {
@@ -264,7 +264,7 @@ export default class Dialog extends React.Component<DialogProps> {
       return;
     }
 
-    store.closeDialog();
+    store.closeDialog(args[1]);
   }
 
   handleDrawerConfirm(values: object[], action: Action, ...args: Array<any>) {
@@ -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)) {

src/renderers/Drawer.tsx

@@ -304,7 +304,7 @@ export default class Drawer extends React.Component<DrawerProps> {
       return;
     }
 
-    store.closeDialog();
+    store.closeDialog(true);
   }
 
   handleDialogClose(...args: Array<any>) {
@@ -317,7 +317,11 @@ export default class Drawer extends React.Component<DrawerProps> {
       return;
     }
 
-    store.closeDialog();
+    if (args.length) {
+      store.closeDialog(args[1]);
+    } else {
+      store.closeDialog();
+    }
   }
 
   handleChildFinished(value: any, action: Action) {

src/renderers/Form/Item.tsx

@@ -436,12 +436,12 @@ export class FormItemWrap extends React.Component<FormItemProps> {
   }
 
   @autobind
-  handleDialogClose() {
+  handleDialogClose(confirmed = false) {
     const {formItem: model} = this.props;
     if (!model) {
       return;
     }
-    model.closeDialog();
+    model.closeDialog(confirmed);
   }
 
   renderControl(): JSX.Element | null {

src/renderers/Form/index.tsx

@@ -1167,9 +1167,9 @@ export default class Form extends React.Component<FormProps, object> {
     store.closeDialog(true);
   }
 
-  handleDialogClose() {
+  handleDialogClose(confirmed = false) {
     const {store} = this.props;
-    store.closeDialog(false);
+    store.closeDialog(confirmed);
   }
 
   handleDrawerConfirm(

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<PageProps> {
       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<any>) {
@@ -734,11 +734,13 @@ export default class Page extends React.Component<PageProps> {
         style={styleVar}
       >
         {hasAside ? (
-          <div className={cx(
-            `Page-aside`,
-            asideResizor ? 'relative' : 'Page-aside--withWidth',
-            asideClassName
-          )}>
+          <div
+            className={cx(
+              `Page-aside`,
+              asideResizor ? 'relative' : 'Page-aside--withWidth',
+              asideClassName
+            )}
+          >
             {render('aside', aside || '', {
               ...subProps,
               ...(typeof aside === 'string'
@@ -754,7 +756,6 @@ export default class Page extends React.Component<PageProps> {
                 className={cx(`Page-asideResizor`)}
               ></div>
             ) : null}
-            
           </div>
         ) : null}
 

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<WizardProps, WizardState> {
         .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<WizardProps, WizardState> {
 
           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<WizardProps, WizardState> {
               }
             }
           })
-          .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<WizardProps, WizardState> {
               );
             }
           })
-          .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<WizardProps, WizardState> {
       store.updateData(values[0]);
     }
 
-    store.closeDialog();
+    store.closeDialog(true);
   }
 
   @autobind
-  handleDialogClose() {
+  handleDialogClose(confirmed = false) {
     const {store} = this.props;
-    store.closeDialog();
+    store.closeDialog(confirmed);
   }
 
   renderSteps() {