From 0c2bc06f715c01b7bd0456b8a30cf3086c080fbe Mon Sep 17 00:00:00 2001 From: mertsincan Date: Fri, 16 Apr 2021 15:48:42 +0300 Subject: [PATCH] Fixed #1961 - Reimplement EventBus --- src/components/confirmpopup/ConfirmPopup.js | 14 ++++-- src/components/datatable/BodyCell.js | 16 +++++-- src/components/overlaypanel/OverlayPanel.js | 14 ++++-- src/components/treetable/TreeTableBodyCell.js | 16 +++++-- src/components/utils/EventBus.js | 46 ++++++------------- 5 files changed, 59 insertions(+), 47 deletions(-) diff --git a/src/components/confirmpopup/ConfirmPopup.js b/src/components/confirmpopup/ConfirmPopup.js index 32078c897b..1c3ffd1795 100644 --- a/src/components/confirmpopup/ConfirmPopup.js +++ b/src/components/confirmpopup/ConfirmPopup.js @@ -216,17 +216,20 @@ export class ConfirmPopup extends Component { show() { this.setState({ visible: true }, () => { - OverlayEventBus.on('overlay-click', (e) => { + this.overlayEventListener = (e) => { if (!this.isOutsideClicked(e.target)) { this.isPanelClicked = true; } - }); + }; + + OverlayEventBus.on('overlay-click', this.overlayEventListener); }); } hide(result) { this.setState({ visible: false }, () => { - OverlayEventBus.off('overlay-click'); + OverlayEventBus.off('overlay-click', this.overlayEventListener); + this.overlayEventListener = null; if (this.props.onHide) { this.props.onHide(result); @@ -296,6 +299,11 @@ export class ConfirmPopup extends Component { this.scrollHandler = null; } + if (this.overlayEventListener) { + OverlayEventBus.off('overlay-click', this.overlayEventListener); + this.overlayEventListener = null; + } + ZIndexUtils.clear(this.overlayRef.current); } diff --git a/src/components/datatable/BodyCell.js b/src/components/datatable/BodyCell.js index 71262d1ab0..47601d24c0 100644 --- a/src/components/datatable/BodyCell.js +++ b/src/components/datatable/BodyCell.js @@ -22,8 +22,6 @@ export class BodyCell extends Component { this.onMouseDown = this.onMouseDown.bind(this); this.onMouseUp = this.onMouseUp.bind(this); this.onEditorFocus = this.onEditorFocus.bind(this); - - this.eventBusKey = `${this.props.field}_${this.props.rowIndex}`; } onExpanderClick(event) { @@ -136,11 +134,13 @@ export class BodyCell extends Component { if (this.props.editorValidatorEvent === 'click') { this.bindDocumentEditListener(); - OverlayEventBus.on('overlay-click', (e) => { + this.overlayEventListener = (e) => { if (!this.isOutsideClicked(e.target)) { this.selfClick = true; } - }, this.eventBusKey); + }; + + OverlayEventBus.on('overlay-click', this.overlayEventListener); } }); } @@ -230,7 +230,8 @@ export class BodyCell extends Component { editing: false }, () => { this.unbindDocumentEditListener(); - OverlayEventBus.off('overlay-click', this.eventBusKey); + OverlayEventBus.off('overlay-click', this.overlayEventListener); + this.overlayEventListener = null; }); }, 1); } @@ -364,6 +365,11 @@ export class BodyCell extends Component { componentWillUnmount() { this.unbindDocumentEditListener(); + + if (this.overlayEventListener) { + OverlayEventBus.off('overlay-click', this.overlayEventListener); + this.overlayEventListener = null; + } } render() { diff --git a/src/components/overlaypanel/OverlayPanel.js b/src/components/overlaypanel/OverlayPanel.js index 93f0ddd126..f007b2970f 100644 --- a/src/components/overlaypanel/OverlayPanel.js +++ b/src/components/overlaypanel/OverlayPanel.js @@ -163,18 +163,21 @@ export class OverlayPanel extends Component { } else { this.setState({ visible: true }, () => { - OverlayEventBus.on('overlay-click', (e) => { + this.overlayEventListener = (e) => { if (!this.isOutsideClicked(e.target)) { this.isPanelClicked = true; } - }); + }; + + OverlayEventBus.on('overlay-click', this.overlayEventListener); }); } } hide() { this.setState({ visible: false }, () => { - OverlayEventBus.off('overlay-click'); + OverlayEventBus.off('overlay-click', this.overlayEventListener); + this.overlayEventListener = null; }); } @@ -262,6 +265,11 @@ export class OverlayPanel extends Component { this.styleElement = null; } + if (this.overlayEventListener) { + OverlayEventBus.off('overlay-click', this.overlayEventListener); + this.overlayEventListener = null; + } + ZIndexUtils.clear(this.overlayRef.current); } diff --git a/src/components/treetable/TreeTableBodyCell.js b/src/components/treetable/TreeTableBodyCell.js index d83801ffb1..70840d1e12 100644 --- a/src/components/treetable/TreeTableBodyCell.js +++ b/src/components/treetable/TreeTableBodyCell.js @@ -16,8 +16,6 @@ export class TreeTableBodyCell extends Component { this.onClick = this.onClick.bind(this); this.onKeyDown = this.onKeyDown.bind(this); this.onEditorFocus = this.onEditorFocus.bind(this); - - this.eventBusKey = `${this.props.field}_${this.props.rowIndex}`; } onClick() { @@ -29,11 +27,13 @@ export class TreeTableBodyCell extends Component { }, () => { this.bindDocumentEditListener(); - OverlayEventBus.on('overlay-click', (e) => { + this.overlayEventListener = (e) => { if (!this.isOutsideClicked(e.target)) { this.selfClick = true; } - }, this.eventBusKey); + }; + + OverlayEventBus.on('overlay-click', this.overlayEventListener); }); } } @@ -77,7 +77,8 @@ export class TreeTableBodyCell extends Component { editing: false }, () => { this.unbindDocumentEditListener(); - OverlayEventBus.off('overlay-click', this.eventBusKey); + OverlayEventBus.off('overlay-click', this.overlayEventListener); + this.overlayEventListener = null; }); }, 1); } @@ -126,6 +127,11 @@ export class TreeTableBodyCell extends Component { componentWillUnmount() { this.unbindDocumentEditListener(); + + if (this.overlayEventListener) { + OverlayEventBus.off('overlay-click', this.overlayEventListener); + this.overlayEventListener = null; + } } render() { diff --git a/src/components/utils/EventBus.js b/src/components/utils/EventBus.js index 73b3a06973..7ac8052d2b 100644 --- a/src/components/utils/EventBus.js +++ b/src/components/utils/EventBus.js @@ -1,39 +1,23 @@ export default function() { - let eventTarget, eventListener, eventKey; + const allHandlers = new Map(); return { - on(type, listener, key) { - eventTarget = eventTarget || document.body.appendChild(document.createComment('')); - eventKey = key; - eventListener = function(e) { listener(e.detail); }; - eventTarget.addEventListener(type, eventListener); - return this; - }, - once(type, listener, key) { - eventTarget = eventTarget || document.body.appendChild(document.createComment('')); - eventKey = key; - eventListener = function(e) { listener(e.detail); }; - eventTarget.addEventListener(type, eventListener, { once: true }); - return this; - }, - off(type, key) { - if (eventTarget && eventListener && eventKey === key) { - eventTarget.removeEventListener(type, eventListener); - } - return this; + on(type, handler) { + let handlers = allHandlers.get(type); + if (!handlers) + handlers = [handler]; + else + handlers.push(handler); + + allHandlers.set(type, handlers); }, - emit(type, detail) { - if (eventTarget) { - eventTarget.dispatchEvent(new CustomEvent(type, { detail })); - } - return this; + off(type, handler) { + let handlers = allHandlers.get(type); + handlers && handlers.splice(handlers.indexOf(handler) >>> 0, 1); }, - reset() { - if (eventTarget) { - document.body.removeChild(eventTarget); - eventTarget = eventListener = eventKey = undefined; - } - return this; + emit(type, evt) { + let handlers = allHandlers.get(type); + handlers && handlers.slice().forEach(handler => handler(evt)); } } }