chore(resizeObserver): refactored use of useRequestAnimationFrame

patternfly · Nov 3, 2022 · 1198da5 · 1198da5
1 parent 2a4831a
commit 1198da5
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 20 deletions.
diff --git 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<CodeEditorProps, CodeEditorState
 
   componentDidMount() {
     document.addEventListener('keydown', this.handleGlobalKeys);
-    this.observer = getResizeObserver(this.ref.current, this.handleResize);
+    this.observer = getResizeObserver(this.ref.current, this.handleResize, true);
     this.handleResize();
   }
 

diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx
@@ -92,7 +92,7 @@ export class NavList extends React.Component<NavListProps> {
   };
 
   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
@@ -125,7 +125,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
   componentDidMount() {
     if (this.props.isLeftTruncated) {
       const inputRef = this.props.innerRef || this.inputRef;
-      this.observer = getResizeObserver(inputRef.current, this.handleResize);
+      this.observer = getResizeObserver(inputRef.current, this.handleResize, true);
       this.handleResize();
     }
   }

diff --git a/packages/react-core/src/demos/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md
@@ -46,15 +46,19 @@ ScrollspyH2 = () => {
     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
@@ -31,9 +31,13 @@ export const JumpLinksWithDrawer = () => {
     const masthead = document.getElementsByClassName('pf-c-masthead')[0];
     const drawerToggleSection = document.getElementsByClassName('pf-c-page__main-section')[0];
 
-    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
@@ -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;