chore(resizeObserver): refactored use of useRequestAnimationFrame

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();
   }
 

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();
   }
 

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();
     }
   }

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.

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 = () => {

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,18 +59,18 @@ 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
  * @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 = (
   containerRefElement: Element,
   handleResize: () => void,
-  useRequestAnimationFrame: boolean = true
+  useRequestAnimationFrame?: boolean
 ) => {
   let unobserve: any;