feat: update ActionButton component

1. refactor ActionButton
2. support ok/cancel button props for confirm/modal action

Change-Id: I07ba1e7b3ef7c7ef998aacf54bd5329d01737d0e

src/components/Tables/Base/ActionButton/index.jsx

@@ -15,7 +15,7 @@
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import { Modal, Button, Tooltip } from 'antd';
-import { isArray, isFunction, isBoolean } from 'lodash';
+import { isArray, isFunction, isBoolean, isEmpty } from 'lodash';
 import Confirm from 'components/Confirm';
 import PropTypes from 'prop-types';
 import Notify from 'components/Notify';
@@ -23,7 +23,7 @@ import classnames from 'classnames';
 import { firstUpperCase, allSettled } from 'utils';
 import styles from './index.less';
 
-function getDefaultMsg(action, data) {
+export const getDefaultMsg = (action, data) => {
   const { actionName = '', title = '' } = action;
   const name = isArray(data) ? data.map((it) => it.name).join(', ') : data.name;
   const submitErrorMsg = t('Unable to {action} {name}.', {
@@ -50,7 +50,7 @@ function getDefaultMsg(action, data) {
     confirmContext,
     performErrorMsg,
   };
-}
+};
 
 export class ActionButton extends Component {
   static propTypes() {
@@ -253,21 +253,40 @@ export class ActionButton extends Component {
     this.onCallback(false, true);
   };
 
-  onShowConfirm = async () => {
+  getConfirmOkButtonProps = (data, action) => {
-    const {
+    const { disableSubmit = false, okButtonProps } = action;
-      perform,
+    if (okButtonProps) {
-      title,
+      return okButtonProps;
-      confirmContext,
+    }
-      okText,
+    return {
-      cancelText,
+      disabled: disableSubmit,
-      onSubmit,
+    };
-      afterSubmit,
+  };
-    } = this.props.action;
+
-    const { item, items, isBatch, containerProps, onCancelAction } = this.props;
+  getConfirmCancelButtonProps = (data, action) => {
-    const data = isBatch ? items : item;
+    const { cancelButtonProps } = action;
-    const content = confirmContext
+    if (cancelButtonProps) {
+      return cancelButtonProps;
+    }
+    return {};
+  };
+
+  getConfirmContent = (data, action) => {
+    const { confirmContext } = action;
+    return confirmContext
       ? confirmContext(data)
-      : getDefaultMsg(this.props.action, data).confirmContext;
+      : getDefaultMsg(action, data).confirmContext;
+  };
+
+  onShowConfirm = async () => {
+    const { item, items, isBatch, containerProps, onCancelAction, action } =
+      this.props;
+    const { perform, title, okText, cancelText, onSubmit, afterSubmit } =
+      action;
+    const data = isBatch ? items : item;
+    const content = this.getConfirmContent(data, action);
+    const okButtonProps = this.getConfirmOkButtonProps(data, action);
+    const cancelButtonProps = this.getConfirmCancelButtonProps(data, action);
     try {
       perform(data).then(
         () => {
@@ -276,6 +295,8 @@ export class ActionButton extends Component {
             content,
             okText,
             cancelText,
+            okButtonProps,
+            cancelButtonProps,
             onOk: () => {
               return this.onConfirmOK(
                 data,
@@ -292,8 +313,7 @@ export class ActionButton extends Component {
           });
         },
         (error) => {
-          const message =
+          const message = error || getDefaultMsg(action, data).performErrorMsg;
-            error || getDefaultMsg(this.props.action, data).performErrorMsg;
           Confirm.error({
             content: message,
           });
@@ -302,8 +322,7 @@ export class ActionButton extends Component {
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
-      const message =
+      const message = error || getDefaultMsg(action, data).performErrorMsg;
-        error || getDefaultMsg(this.props.action, data).performErrorMsg;
       Confirm.error({
         content: message,
       });
@@ -444,6 +463,29 @@ export class ActionButton extends Component {
     }
   };
 
+  getModalOkButtonProps = (item, action) => {
+    const { disableSubmit = false, okButtonProps } = action;
+    if (okButtonProps) {
+      return okButtonProps;
+    }
+    return {
+      disabled: disableSubmit,
+    };
+  };
+
+  getModalCancelButtonProps = (item, action) => {
+    const { readOnly, cancelButtonProps } = action;
+    if (cancelButtonProps) {
+      return cancelButtonProps;
+    }
+    if (readOnly) {
+      return {
+        style: { display: 'none' },
+      };
+    }
+    return {};
+  };
+
   showModalAction() {
     this.setState({
       visible: true,
@@ -465,15 +507,10 @@ export class ActionButton extends Component {
       onCancelAction,
     } = this.props;
     const ActionComponent = action;
-    const {
+    const { okText, cancelText, id, className } = action;
-      okText,
-      cancelText,
-      id,
-      className,
-      readOnly,
-      disableSubmit = false,
-    } = action;
     const width = this.getModalWidth(action);
+    const okButtonProps = this.getModalOkButtonProps(item, action);
+    const cancelButtonProps = this.getModalCancelButtonProps(item, action);
     const modalProps = {
       title,
       visible,
@@ -481,18 +518,14 @@ export class ActionButton extends Component {
       width,
       onOk: () => this.onClickModalActionOk(),
       onCancel: this.onClickModalActionCancel,
-      okButtonProps: {
+      okButtonProps,
-        disabled: disableSubmit,
-      },
       confirmLoading: submitLoading,
       okText,
       cancelText,
       maskClosable: false,
     };
-    if (readOnly) {
+    if (!isEmpty(cancelButtonProps)) {
-      modalProps.cancelButtonProps = {
+      modalProps.cancelButtonProps = cancelButtonProps;
-        style: { display: 'none' },
-      };
     }
     return (
       <Modal {...modalProps}>