From ffa5e98061509e74fed2ed8d3dcc80370056f3c4 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 3 Nov 2022 13:48:25 -0400 Subject: [PATCH 1/2] chore(resizeObserver): refactored use of useRequestAnimationFrame --- .../src/components/CodeEditor/CodeEditor.tsx | 2 +- .../react-core/src/components/Nav/NavList.tsx | 2 +- .../src/components/TextInput/TextInput.tsx | 2 +- packages/react-core/src/demos/JumpLinks.md | 23 +++++++++++-------- .../examples/JumpLinks/JumpLinksWithDrawer.js | 10 +++++--- .../react-core/src/helpers/resizeObserver.tsx | 8 +++---- 6 files changed, 27 insertions(+), 20 deletions(-) diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index 945fe899122..a23847dbefb 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx @@ -363,7 +363,7 @@ export class CodeEditor extends React.Component { }; componentDidMount() { - this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons); + this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true); this.handleScrollButtons(); } diff --git a/packages/react-core/src/components/TextInput/TextInput.tsx b/packages/react-core/src/components/TextInput/TextInput.tsx index ec9ab8b9230..1d81781ba4e 100644 --- a/packages/react-core/src/components/TextInput/TextInput.tsx +++ b/packages/react-core/src/components/TextInput/TextInput.tsx @@ -125,7 +125,7 @@ export class TextInputBase extends React.Component { const masthead = document.getElementsByClassName('pf-c-masthead')[0]; const offsetForPadding = 10; - getResizeObserver(masthead, () => { - if (isVertical) { - setOffsetHeight(masthead.offsetHeight + offsetForPadding); - } else { - // Append jump links nav height to the masthead height when value exists. - const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight; - jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding); - } - }); + getResizeObserver( + masthead, + () => { + if (isVertical) { + setOffsetHeight(masthead.offsetHeight + offsetForPadding); + } else { + // Append jump links nav height to the masthead height when value exists. + const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight; + jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding); + } + }, + true + ); }, [isVertical]); return ( @@ -132,7 +136,6 @@ ScrollspyH2 = () => { }; ``` - ### With drawer This demo shows how jump links can be used in combination with a drawer. diff --git a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js index ecced5160a2..2513f0e23e2 100644 --- a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js +++ b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js @@ -32,9 +32,13 @@ export const JumpLinksWithDrawer = () => { const masthead = document.getElementsByClassName('pf-c-masthead')[0]; const drawerToggleSection = document.getElementById('drawer-toggle'); - getResizeObserver(masthead, () => { - setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight); - }); + getResizeObserver( + masthead, + () => { + setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight); + }, + true + ); }, []); const onCloseClick = () => { diff --git a/packages/react-core/src/helpers/resizeObserver.tsx b/packages/react-core/src/helpers/resizeObserver.tsx index 7a093ab4c71..36ef3fec3cd 100644 --- a/packages/react-core/src/helpers/resizeObserver.tsx +++ b/packages/react-core/src/helpers/resizeObserver.tsx @@ -10,7 +10,7 @@ import { canUseDOM } from './util'; * private observer: any = () => {}; * * public componentDidMount() { - * this.observer = getResizeObserver(this.containerRef.current, this.handleResize); + * this.observer = getResizeObserver(this.containerRef.current, this.handleResize, true); * } * * public componentWillUnmount() { @@ -37,7 +37,7 @@ import { canUseDOM } from './util'; * private observer: any = () => {}; * * public componentDidMount() { - * this.observer = getResizeObserver(this.inputRef.current, this.handleResize); + * this.observer = getResizeObserver(this.inputRef.current, this.handleResize, true); * } * * public componentWillUnmount() { @@ -59,7 +59,7 @@ import { canUseDOM } from './util'; * Example 3 - With debounced method passed in: * * public componentDidMount() { - * this.observer = getResizeObserver(this.inputRef.current, debounce(this.handleResize, 250), false); + * this.observer = getResizeObserver(this.inputRef.current, debounce(this.handleResize, 250)); * } * * @param {Element} containerRefElement The container reference to observe @@ -70,7 +70,7 @@ import { canUseDOM } from './util'; export const getResizeObserver = ( containerRefElement: Element, handleResize: () => void, - useRequestAnimationFrame: boolean = true + useRequestAnimationFrame?: boolean ) => { let unobserve: any; From e284de5eb0f0a03d4d4f291feee571364eb0781e Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 4 Nov 2022 16:06:55 -0400 Subject: [PATCH 2/2] Updated param description --- packages/react-core/src/helpers/resizeObserver.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/helpers/resizeObserver.tsx b/packages/react-core/src/helpers/resizeObserver.tsx index 36ef3fec3cd..2d186e65203 100644 --- a/packages/react-core/src/helpers/resizeObserver.tsx +++ b/packages/react-core/src/helpers/resizeObserver.tsx @@ -64,7 +64,7 @@ import { canUseDOM } from './util'; * * @param {Element} containerRefElement The container reference to observe * @param {Function} handleResize The function to call for resize events - * @param {boolean} useRequestAnimationFrame Whether to pass the handleResize function as a callback to requestAnimationFrame. Pass in false when the function passed in is debounced. Defaults to true. + * @param {boolean} useRequestAnimationFrame Whether to pass the handleResize function as a callback to requestAnimationFrame. Pass in true when the function passed in is not debounced. * @return {Function} The function used to unobserve resize events */ export const getResizeObserver = (