Made util out of scroll helper in examples

Author: thatblindgeye

packages/react-core/src/components/Pagination/examples/Pagination.md

@@ -24,12 +24,16 @@ import { Fragment, useState, useRef, useLayoutEffect } from 'react';
 
 ### Plain top
 
+To apply plain styling to a pagination, use `isPlain`. Plain styling removes the background and border, which is useful when the pagination is placed inside another component with its own background.
+
 ```ts file="./PaginationPlainTop.tsx"
 
 ```
 
 ### Plain bottom
 
+To apply plain styling to a bottom pagination, use `isPlain` along with `variant={PaginationVariant.bottom}`.
+
 ```ts file="./PaginationPlainBottom.tsx"
 
 ```
@@ -80,12 +84,16 @@ By not passing `itemCount` and passing `toggleTemplate` you can customize the to
 
 ### Dynamic sticky top
 
+A pagination may alternatively be made sticky with two properties: `isStickyBase` and `isStickyStuck`, which allows separate control of the sticky position and sticky styling respectively. In this example, `isStickyStuck` is only applied when the pagination is not at the top of the scroll parent container.
+
 ```ts isFullscreen file="./PaginationDynamicStickyTop.tsx"
 
 ```
 
 ### Dynamic sticky bottom
 
+A bottom pagination may alternatively be made sticky with two properties: `isStickyBase` and `isStickyStuck`, which allows separate control of the sticky position and sticky styling respectively. In this example, `isStickyStuck` is only applied when the pagination is not at the bottom of the scroll parent container.
+
 ```ts isFullscreen file="./PaginationDynamicStickyBottom.tsx"
 
 ```

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

@@ -1,39 +1,13 @@
-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 > 0);
-    };
-    syncFromScroll();
-    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
-    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
-  }, [shouldTrack, scrollParentRef]);
-
-  return isStuck;
-};
+import { useState, useRef } from 'react';
+import {
+  Pagination,
+  PaginationVariant,
+  Gallery,
+  GalleryItem,
+  Card,
+  CardBody,
+  useIsStuckFromScrollParent
+} from '@patternfly/react-core';
 
 export const PaginationDynamicStickyBottom: React.FunctionComponent = () => {
   const scrollParentRef = useRef<HTMLDivElement>(null);

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

@@ -1,39 +1,5 @@
-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;
-};
+import { useState, useRef } from 'react';
+import { Pagination, Gallery, GalleryItem, Card, CardBody, useIsStuckFromScrollParent } from '@patternfly/react-core';
 
 export const PaginationDynamicStickyTop: React.FunctionComponent = () => {
   const scrollParentRef = useRef<HTMLDivElement>(null);

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

@@ -1,39 +1,12 @@
-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;
-};
+import { useState, useRef } from 'react';
+import {
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  SearchInput,
+  Checkbox,
+  useIsStuckFromScrollParent
+} from '@patternfly/react-core';
 
 export const ToolbarDynamicSticky = () => {
   const scrollParentRef = useRef<HTMLDivElement>(null);

packages/react-core/src/helpers/index.ts

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

packages/react-core/src/helpers/useIsStuckFromScrollParent.ts

@@ -0,0 +1,38 @@
+/** Custom React hook to track whether a scroll parent has been scrolled (scrollTop > 0).
+ * Useful for applying dynamic sticky styling when an element becomes "stuck" in a scroll container.
+ */
+import { useLayoutEffect, useState } from 'react';
+
+export function 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;
+}

packages/react-table/src/components/Table/examples/TableStickyHeaderDynamic.tsx

@@ -1,6 +1,7 @@
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useRef } 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;
@@ -14,40 +15,6 @@ 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 });