From 44d8caad808798039c82ade72e41aee2f0dabba4 Mon Sep 17 00:00:00 2001 From: John Coburn Date: Wed, 24 May 2023 16:32:44 -0500 Subject: [PATCH 1/2] suspense fixes --- lib/Layer/Layer.js | 60 +++++++++++++++++++++---------- lib/Paneset/Paneset.js | 82 +++++++++++++++++++++++++++++------------- 2 files changed, 99 insertions(+), 43 deletions(-) diff --git a/lib/Layer/Layer.js b/lib/Layer/Layer.js index c6311c001..376cde6a8 100644 --- a/lib/Layer/Layer.js +++ b/lib/Layer/Layer.js @@ -48,25 +48,25 @@ class Layer extends React.Component { constructor(props) { super(props); this.contentRef = React.createRef(); - + this.containerRef = React.createRef(); this.layerContainer = null; this.maybeEnforceFocus = this.maybeEnforceFocus.bind(this); this.handleOpen = this.handleOpen.bind(this); this.handleClose = this.handleClose.bind(this); } - componentDidMount() { - const { - isOpen, - } = this.props; + // componentDidMount() { + // const { + // isOpen, + // } = this.props; - if (isOpen) { - if (!this.layerContainer) { - this.forceUpdate(); - } - this.handleOpen(); - } - } + // if (isOpen) { + // if (!this.layerContainer) { + // this.forceUpdate(); + // } + // this.handleOpen(); + // } + // } componentDidUpdate(prevProps) { const { @@ -89,11 +89,11 @@ class Layer extends React.Component { handleOpen() { const { afterOpen, contentLabel, autoFocus, resizer } = this.props; - resizer.suspend(); + resizer?.suspend(); - if (autoFocus && this.contentRef.current) { - if (!this.contentRef.current.contains(document.activeElement)) { - this.contentRef.current.focus(); + if (autoFocus && this.containerRef.current) { + if (!this.containerRef.current.contains(document.activeElement)) { + this.containerRef.current.focus(); } } @@ -121,8 +121,29 @@ class Layer extends React.Component { getLayerContainer = () => { const { container, inRootSet, paneset } = this.props; - return container || inRootSet ? - paneset.getTopmostContainer() : paneset.getContainer(); + // return container || inRootSet ? + // paneset.getTopmostContainer() : paneset.getContainer(); + return document.getElementById('OverlayContainer'); + } + + mountedRef = () => { + const { + isOpen, + } = this.props; + + if (this.containerRef.current) { + if (isOpen) { + if (!this.layerContainer) { + this.forceUpdate(); + } + this.handleOpen(); + } + } + } + + handleRef = (ref) => { + this.containerRef.current = ref; + this.mountedRef(ref); } render() { @@ -144,8 +165,9 @@ class Layer extends React.Component { role="dialog" key="container" tabIndex="-1" - ref={this.contentRef} + ref={this.handleRef} aria-label={contentLabel} + style={{ pointerEvents: 'all' }} > {children} diff --git a/lib/Paneset/Paneset.js b/lib/Paneset/Paneset.js index c6c96e2cb..5739ee496 100644 --- a/lib/Paneset/Paneset.js +++ b/lib/Paneset/Paneset.js @@ -146,29 +146,29 @@ class Paneset extends React.Component { this._isMounted = false; } - componentDidMount() { - if (!this.props.isRoot) { - if (this.props.paneset) { // register with parent paneset if it exists - this.props.paneset.registerPane({ - id: this.id, - setStyle: this.setStyle, - getChildInfo: this.getChildInfo, - isThisMounted: this.isThisMounted, - isPaneset: true, - transition: 'none', - doTransition: false, - getRef: this.getRef, - getInstance: this.getInstance, - handlePaneResize: this.handlePaneResize, - getChildPanesTotalWidth: this.getChildPanesTotalWidth - }); - } - } - this._isMounted = true; - - this.resizeHandler = window.addEventListener('resize', debounce(this.handleWindowResize, 50)); - this.previousContainerWidth = this.container.current?.getBoundingClientRect().width; - } + // componentDidMount() { + // if (!this.props.isRoot) { + // if (this.props.paneset) { // register with parent paneset if it exists + // this.props.paneset.registerPane({ + // id: this.id, + // setStyle: this.setStyle, + // getChildInfo: this.getChildInfo, + // isThisMounted: this.isThisMounted, + // isPaneset: true, + // transition: 'none', + // doTransition: false, + // getRef: this.getRef, + // getInstance: this.getInstance, + // handlePaneResize: this.handlePaneResize, + // getChildPanesTotalWidth: this.getChildPanesTotalWidth + // }); + // } + // } + // this._isMounted = true; + + // this.resizeHandler = window.addEventListener('resize', debounce(this.handleWindowResize, 50)); + // this.previousContainerWidth = this.container.current?.getBoundingClientRect().width; + // } componentWillUnmount() { this._isMounted = false; @@ -198,6 +198,35 @@ class Paneset extends React.Component { } } + // this function is called during a ref callback since it depends on the DOM elements being full ready. + // With React's Suspense feature in use, the ComponentDidMount + // lifecycle may fire before the component has rendered/loaded. + mountedRef = (ref) => { + if (!this._isMounted && ref !== null) { + if (!this.props.isRoot) { + if (this.props.paneset) { // register with parent paneset if it exists + this.props.paneset.registerPane({ + id: this.id, + setStyle: this.setStyle, + getChildInfo: this.getChildInfo, + isThisMounted: this.isThisMounted, + isPaneset: true, + transition: 'none', + doTransition: false, + getRef: this.getRef, + getInstance: this.getInstance, + handlePaneResize: this.handlePaneResize, + getChildPanesTotalWidth: this.getChildPanesTotalWidth + }); + } + } + this._isMounted = true; + + this.resizeHandler = window.addEventListener('resize', debounce(this.handleWindowResize, 50)); + this.previousContainerWidth = ref?.getBoundingClientRect().width; + } + } + // resizeToContainer - called when the window is resized. // Resizes panes to fit the window width *or the width of the containing paneset(if nested.) // compares the current window / container width to the total width of the @@ -745,6 +774,11 @@ class Paneset extends React.Component { this.updateLayoutCache(newWidths, 'resize'); } + handleRef = (ref) => { + this.container.current = ref; + this.mountedRef(ref); + } + render() { const { id, @@ -764,7 +798,7 @@ class Paneset extends React.Component { onElementResize={this.handlePaneResize} resizeContainerRef={this.resizeContainer} > -
+
{children}
From fa86630ce4ad2804a7fea50aecd905368b884b0c Mon Sep 17 00:00:00 2001 From: John Coburn Date: Fri, 26 May 2023 08:50:23 -0500 Subject: [PATCH 2/2] remove isRequired on resizer prop in Layer --- lib/Layer/Layer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/Layer/Layer.js b/lib/Layer/Layer.js index 376cde6a8..b6ad420df 100644 --- a/lib/Layer/Layer.js +++ b/lib/Layer/Layer.js @@ -35,7 +35,7 @@ class Layer extends React.Component { resizer: PropTypes.shape({ resume: PropTypes.func.isRequired, suspend: PropTypes.func.isRequired, - }).isRequired, + }), } static defaultProps = {