Made util helper back to inline code

Author: thatblindgeye

packages/react-core/src/components/Pagination/examples/PaginationDynamicStickyBottom.tsx

@@ -1,17 +1,43 @@
-import { useState, useRef } from 'react';
-import {
-  Pagination,
-  PaginationVariant,
-  Gallery,
-  GalleryItem,
-  Card,
-  CardBody,
-  useIsStuckFromScrollParent
-} from '@patternfly/react-core';
+import { useLayoutEffect, useState, useRef } from 'react';
+import { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  /** Indicates whether to track the scroll top position of the scroll parent element */
+  shouldTrack: boolean;
+  /** Reference to the scroll parent element */
+  scrollParentRef: React.RefObject<any>;
+}): boolean => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!shouldTrack) {
+      setIsStuck(false);
+      return;
+    }
+
+    const scrollElement = scrollParentRef.current;
+    if (!scrollElement) {
+      setIsStuck(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop + scrollElement.clientHeight < scrollElement.scrollHeight);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
 
 export const PaginationDynamicStickyBottom: React.FunctionComponent = () => {
   const scrollParentRef = useRef<HTMLDivElement>(null);
-  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef, position: 'bottom' });
+  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(50);
   const itemCount = 523;

packages/react-core/src/components/Pagination/examples/PaginationDynamicStickyTop.tsx

@@ -1,5 +1,39 @@
-import { useState, useRef } from 'react';
-import { Pagination, Gallery, GalleryItem, Card, CardBody, useIsStuckFromScrollParent } from '@patternfly/react-core';
+import { useLayoutEffect, useState, useRef } from 'react';
+import { Pagination, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  /** Indicates whether to track the scroll top position of the scroll parent element */
+  shouldTrack: boolean;
+  /** Reference to the scroll parent element */
+  scrollParentRef: React.RefObject<any>;
+}): boolean => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!shouldTrack) {
+      setIsStuck(false);
+      return;
+    }
+
+    const scrollElement = scrollParentRef.current;
+    if (!scrollElement) {
+      setIsStuck(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop > 0);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
 
 export const PaginationDynamicStickyTop: React.FunctionComponent = () => {
   const scrollParentRef = useRef<HTMLDivElement>(null);

packages/react-core/src/components/Pagination/examples/PaginationPlainBottom.tsx

@@ -1,12 +1,39 @@
-import { useState, useRef } from 'react';
-import {
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent,
-  SearchInput,
-  Checkbox,
-  useIsStuckFromScrollParent
-} from '@patternfly/react-core';
+import { useLayoutEffect, useState, useRef } from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  /** Indicates whether to track the scroll top position of the scroll parent element */
+  shouldTrack: boolean;
+  /** Reference to the scroll parent element */
+  scrollParentRef: React.RefObject<any>;
+}): boolean => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!shouldTrack) {
+      setIsStuck(false);
+      return;
+    }
+
+    const scrollElement = scrollParentRef.current;
+    if (!scrollElement) {
+      setIsStuck(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop > 0);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
 
 export const ToolbarDynamicSticky = () => {
   const scrollParentRef = useRef<HTMLDivElement>(null);

packages/react-core/src/components/Pagination/examples/PaginationPlainTop.tsx

@@ -13,5 +13,4 @@ export * from './SSRSafeIds/SSRSafeIds';
 export * from './KeyboardHandler';
 export * from './resizeObserver';
 export * from './useInterval';
-export * from './useIsStuckFromScrollParent';
 export * from './datetimeUtils';

packages/react-core/src/components/Toolbar/examples/ToolbarDynamicSticky.tsx

@@ -1,7 +1,6 @@
-import { useRef } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
 import RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';
-import { useIsStuckFromScrollParent } from '@patternfly/react-core';
 
 interface Fact {
   name: string;
@@ -15,6 +14,40 @@ interface Fact {
   detail7: string;
 }
 
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  /** Indicates whether to track the scroll top position of the scroll parent element */
+  shouldTrack: boolean;
+  /** Reference to the scroll parent element */
+  scrollParentRef: React.RefObject<any>;
+}): boolean => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!shouldTrack) {
+      setIsStuck(false);
+      return;
+    }
+
+    const scrollElement = scrollParentRef.current;
+    if (!scrollElement) {
+      setIsStuck(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop > 0);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
+
 export const TableStickyHeaderDynamic: React.FunctionComponent = () => {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const isStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef: scrollContainerRef });