Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

**Suspense** Move DidMount lifecycle handler to a ref function. #2085

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

**Suspense** Move DidMount lifecycle handler to a ref function. #2085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
44d8caa
suspense fixes
JohnC-80 May 24, 2023
fa86630
remove isRequired on resizer prop in Layer
JohnC-80 May 26, 2023
efde19b
Merge branch 'master' into STRIPES-861
JohnC-80 Jun 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
62 changes: 42 additions & 20 deletions lib/Layer/Layer.js
View file
Open in desktop
Expand Up @@ -35,7 +35,7 @@ class Layer extends React.Component {
resizer: PropTypes.shape({
resume: PropTypes.func.isRequired,
suspend: PropTypes.func.isRequired,
}).isRequired,
}),
}

static defaultProps = {
Expand All @@ -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 {
Expand All @@ -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();
}
}

Expand Down Expand Up @@ -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() {
Expand All @@ -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}
</div>
Expand Down
82 changes: 58 additions & 24 deletions lib/Paneset/Paneset.js
View file
Open in desktop
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand All @@ -764,7 +798,7 @@ class Paneset extends React.Component {
onElementResize={this.handlePaneResize}
resizeContainerRef={this.resizeContainer}
>
<div className={this.getClassName()} id={id} style={this.state.style} ref={this.container} {...dataProps}>
<div className={this.getClassName()} id={id} style={this.state.style} ref={this.handleRef} {...dataProps}>
{children}
</div>
</PaneResizeContainer>
Expand Down