feat: optimize the clicking event in the select-table

Optimize the clicking event in the select-table component, when click the row of the table in the component, the row will be selected, but when click the button in the row, the selection does not change.

Change-Id: I88f3a842bcf3a91d1cd8a0f20e847f1e5e57ed7d

src/components/ModalButton/index.jsx

@@ -65,6 +65,34 @@ export default class ModalButton extends Component {
     };
   }
 
+  componentWillUnmount() {
+    this.removeListener();
+  }
+
+  addListener = () => {
+    const modalTarget =
+      document.getElementsByClassName('modal-button-modal')[0];
+    this.modalTarget = modalTarget;
+    if (modalTarget) {
+      this.listenerResult = modalTarget.addEventListener(
+        'click',
+        this.onClickModal
+      );
+    }
+  };
+
+  removeListener = () => {
+    const modalTarget =
+      document.getElementsByClassName('modal-button-modal')[0];
+    if (modalTarget) {
+      this.listenerResult = modalTarget.removeEventListener(
+        'click',
+        this.onClickModal
+      );
+    }
+    this.modalTarget = null;
+  };
+
   getModalWidth = (size) => {
     switch (size) {
       case 'small':
@@ -79,7 +107,7 @@ export default class ModalButton extends Component {
   };
 
   onClick = (e) => {
-    e && e.stopPropagation();
+    this.stopEvent(e);
     const { onClickButton } = this.props;
     onClickButton && onClickButton();
     this.showModal();
@@ -90,7 +118,8 @@ export default class ModalButton extends Component {
     onFinishAction && onFinishAction();
   };
 
-  handleOk = () => {
+  handleOk = (e) => {
+    this.stopEvent(e);
     const { handleOk } = this.props;
     if (handleOk) {
       this.setState({
@@ -118,22 +147,66 @@ export default class ModalButton extends Component {
     }
   };
 
-  handleCancel = () => {
+  handleCancel = (e) => {
+    this.stopEvent(e);
     const { onCancelAction } = this.props;
     onCancelAction && onCancelAction();
     this.hideModal();
   };
 
   hideModal = () => {
+    this.removeListener();
     this.setState({
       visible: false,
     });
   };
 
   showModal = () => {
-    this.setState({
-      visible: true,
-    });
+    this.setState(
+      {
+        visible: true,
+      },
+      () => {
+        setTimeout(() => {
+          this.addListener();
+        }, 0);
+      }
+    );
+  };
+
+  stopEvent = (e) => {
+    if (e && e.preventDefault) {
+      e.preventDefault();
+    }
+    if (e && e.stopPropagation) {
+      e.stopPropagation();
+    }
+  };
+
+  onClickModal = (e) => {
+    if (!this.modalTarget) {
+      this.stopEvent(e);
+      return;
+    }
+    const buttons = this.modalTarget.getElementsByTagName('button');
+    const { innerHTML = '' } = e.target || {};
+    let isButton = false;
+    for (let i = 0; i < buttons.length; i++) {
+      if (isButton) {
+        return;
+      }
+      const specialInner = ['-', ''];
+      if (
+        !specialInner.includes(innerHTML) &&
+        buttons[i].innerHTML.includes(innerHTML)
+      ) {
+        isButton = true;
+      }
+    }
+    if (isButton) {
+      return;
+    }
+    this.stopEvent(e);
   };
 
   renderModal() {
@@ -171,7 +244,11 @@ export default class ModalButton extends Component {
         style: { display: 'none' },
       };
     }
-    return <Modal {...configs}>{content}</Modal>;
+    return (
+      <Modal {...configs} className="modal-button-modal">
+        {content}
+      </Modal>
+    );
   }
 
   render() {

src/components/TableButton/RuleButton.jsx

@@ -34,6 +34,7 @@ export default class RuleButton extends Component {
       modalSize: 'middle',
       columns: getSelfColumns(this),
       data,
+      hasPagination: false,
     };
     return <TableButton {...configs} style={{ paddingLeft: 0 }} />;
   }

src/components/TableButton/index.jsx

@@ -29,6 +29,7 @@ export default class TableButton extends Component {
       className: PropTypes.func,
       buttonText: PropTypes.string,
       style: PropTypes.string,
+      hasPagination: PropTypes.bool,
     };
   }
 
@@ -41,11 +42,19 @@ export default class TableButton extends Component {
     className: '',
     buttonText: t('View Detail'),
     title: t('Detail'),
+    hasPagination: true,
   };
 
   renderTable = () => {
-    const { data, columns } = this.props;
-    return <Table columns={columns} dataSource={data} />;
+    const { data, columns, hasPagination } = this.props;
+    const configs = {
+      columns,
+      dataSource: data,
+    };
+    if (!hasPagination) {
+      configs.pagination = false;
+    }
+    return <Table {...configs} />;
   };
 
   render() {

src/pages/compute/containers/Instance/Detail/SecurityGroup/action/ManageSecurityGroup.jsx

@@ -76,7 +76,6 @@ export class ManageSecurityGroup extends ModalAction {
         isMulti: true,
         filterParams: securityGroupFilter,
         columns: securityGroupColumns,
-        onRow: () => {},
       },
     ];
   }

src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx

@@ -254,7 +254,6 @@ export class NetworkStep extends Base {
         ),
         filterParams: securityGroupFilter,
         columns: securityGroupColumns,
-        onRow: () => {},
       },
     ];
   }

src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx

@@ -187,7 +187,6 @@ export class ManageSecurityGroup extends ModalAction {
         isMulti: true,
         filterParams: securityGroupFilter,
         columns: securityGroupColumns,
-        onRow: () => {},
       },
     ];
   }

src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx

@@ -293,7 +293,6 @@ export class NetworkStep extends Base {
         ),
         filterParams: securityGroupFilter,
         columns: securityGroupColumns,
-        onRow: () => {},
       },
     ];
   }

src/pages/network/containers/Port/actions/ManageSecurityGroup.jsx

@@ -139,7 +139,6 @@ export class ManageSecurityGroup extends ModalAction {
         isMulti: true,
         filterParams: securityGroupFilter,
         columns: securityGroupColumns,
-        onRow: () => {},
         hidden: !port_security_enabled,
       },
     ];