From 56230e524e48b77ccd7672f0c18a0c71499d2be5 Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Wed, 19 Apr 2023 14:37:21 +0800 Subject: [PATCH] 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 | 91 +++++++++++++++++-- src/components/TableButton/RuleButton.jsx | 1 + src/components/TableButton/index.jsx | 13 ++- .../action/ManageSecurityGroup.jsx | 1 - .../CreateIronic/NetworkStep/index.jsx | 1 - .../Instance/actions/ManageSecurityGroup.jsx | 1 - .../actions/StepCreate/NetworkStep/index.jsx | 1 - .../Port/actions/ManageSecurityGroup.jsx | 1 - 8 files changed, 96 insertions(+), 14 deletions(-) diff --git a/src/components/ModalButton/index.jsx b/src/components/ModalButton/index.jsx index d85f0bd7..66b8da92 100644 --- a/src/components/ModalButton/index.jsx +++ b/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 {content}; + return ( + + {content} + + ); } render() { diff --git a/src/components/TableButton/RuleButton.jsx b/src/components/TableButton/RuleButton.jsx index 19d15634..bec56a86 100644 --- a/src/components/TableButton/RuleButton.jsx +++ b/src/components/TableButton/RuleButton.jsx @@ -34,6 +34,7 @@ export default class RuleButton extends Component { modalSize: 'middle', columns: getSelfColumns(this), data, + hasPagination: false, }; return ; } diff --git a/src/components/TableButton/index.jsx b/src/components/TableButton/index.jsx index 5d7cabaa..3dfc8f6c 100644 --- a/src/components/TableButton/index.jsx +++ b/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 ; + const { data, columns, hasPagination } = this.props; + const configs = { + columns, + dataSource: data, + }; + if (!hasPagination) { + configs.pagination = false; + } + return
; }; render() { diff --git a/src/pages/compute/containers/Instance/Detail/SecurityGroup/action/ManageSecurityGroup.jsx b/src/pages/compute/containers/Instance/Detail/SecurityGroup/action/ManageSecurityGroup.jsx index d24a80ca..f5187702 100644 --- a/src/pages/compute/containers/Instance/Detail/SecurityGroup/action/ManageSecurityGroup.jsx +++ b/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: () => {}, }, ]; } diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx b/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx index 50bdef91..6e18c33e 100644 --- a/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx +++ b/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx @@ -254,7 +254,6 @@ export class NetworkStep extends Base { ), filterParams: securityGroupFilter, columns: securityGroupColumns, - onRow: () => {}, }, ]; } diff --git a/src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx b/src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx index 2802bdf3..1214550a 100644 --- a/src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx +++ b/src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx @@ -187,7 +187,6 @@ export class ManageSecurityGroup extends ModalAction { isMulti: true, filterParams: securityGroupFilter, columns: securityGroupColumns, - onRow: () => {}, }, ]; } diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx index 4b36c7d4..0c12a5c8 100644 --- a/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx +++ b/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx @@ -293,7 +293,6 @@ export class NetworkStep extends Base { ), filterParams: securityGroupFilter, columns: securityGroupColumns, - onRow: () => {}, }, ]; } diff --git a/src/pages/network/containers/Port/actions/ManageSecurityGroup.jsx b/src/pages/network/containers/Port/actions/ManageSecurityGroup.jsx index 9d16cfa5..795c56d1 100644 --- a/src/pages/network/containers/Port/actions/ManageSecurityGroup.jsx +++ b/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, }, ];