@digital-ai/dot-components 4.6.0 → 4.7.0

package/index.esm.js

@@ -8561,14 +8561,26 @@ const defaultColumns = {
   xl: 12,
   xxl: 12
 };
+// Ensures that the children returned is a list of children
+const ensureChildrenList = children => {
+  if (children instanceof Array) {
+    return children;
+  }
+  return [children];
+};
 const Grid = ({
   className,
-  children
+  children,
+  isLoading
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$I, className);
-  return jsx("div", {
+  return jsxs("div", {
     className: rootClasses,
-    children: children
+    children: [children, isLoading && jsx(DotProgress, {
+      className: "loading-more-data",
+      color: "inherit",
+      size: 20
+    })]
   });
 };
 const StyledGrid = styled(Grid)`
@@ -8592,10 +8604,75 @@ const StyledGrid = styled(Grid)`
       ${gap && `grid-gap: ${gap};`}
       ${width && `width: ${width};`}
       ${height && `height: ${height};`}
+      .loading-more-data {
+        margin: auto;
+      }
   `}
 `;
-const CssGrid = props => {
-  return jsx(StyledGrid, Object.assign({}, props));
+const CssGrid = _a => {
+  var {
+      children,
+      loadMoreData,
+      onError
+    } = _a,
+    gridArgs = __rest(_a, ["children", "loadMoreData", "onError"]);
+  const [page, setPage] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDone, setIsDone] = useState(false);
+  const [gridItems, setGridItems] = useState(ensureChildrenList(children));
+  const [lastElement, setLastElement] = useState(null);
+  useEffect(() => {
+    setGridItems(ensureChildrenList(children));
+  }, [children]);
+  const fetchData = useCallback(nextPage => __awaiter(void 0, void 0, void 0, function* () {
+    setIsLoading(true);
+    try {
+      const newItems = yield loadMoreData(nextPage);
+      if (newItems && newItems.length > 0) {
+        setGridItems(prevItems => [...prevItems, ...newItems]);
+      } else {
+        setIsDone(true);
+      }
+    } catch (error) {
+      if (onError) {
+        onError(error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }), [loadMoreData, onError]);
+  const observer = useRef(new IntersectionObserver(entries => {
+    const first = entries[0];
+    if (first.isIntersecting) {
+      setPage(prevNum => prevNum + 1);
+    }
+  }));
+  useEffect(() => {
+    if (loadMoreData && !isDone && page) {
+      fetchData(page);
+    }
+  }, [page, loadMoreData, isDone]);
+  useEffect(() => {
+    const currentElement = lastElement;
+    const currentObserver = observer.current;
+    if (currentElement) {
+      currentObserver.observe(currentElement);
+    }
+    return () => {
+      if (currentElement) {
+        currentObserver.unobserve(currentElement);
+      }
+    };
+  }, [lastElement]);
+  // Adds the lastElement ref to the last Element of the grid
+  const gridItemsWithLastElement = useMemo(() => [...gridItems.slice(0, -1), jsx("div", {
+    ref: setLastElement,
+    children: gridItems[gridItems.length - 1]
+  }, "last-grid-item")], [gridItems]);
+  return jsx(StyledGrid, Object.assign({}, gridArgs, {
+    isLoading: isLoading,
+    children: gridItemsWithLastElement
+  }));
 };
 
 const breakpointsGetter = (value, theme, breakpoint) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/css-grid/CssGrid.d.ts

@@ -23,6 +23,10 @@ export interface CssGridProps extends CommonProps {
     gridTemplateAreas?: string;
     /** Height of the grid */
     height?: string;
+    /** Function called to load more items when the end of the grid is reached.  Should return an array of ReactNodes. */
+    loadMoreData?: (page: number) => Promise<ReactNode[]>;
+    /** Error handler function for handling any errors that might come from the loadMoreData function */
+    onError?: (error: Error) => void;
     /** Row, overrides columnsBreakpoints */
     rowGap?: GridOptions;
     /** Row, configuration */
@@ -30,9 +34,13 @@ export interface CssGridProps extends CommonProps {
     /** Width of the grid */
     width?: string;
 }
+interface InternalGridProps extends CssGridProps {
+    isLoading: boolean;
+}
 export declare const rootClassName = "dot-grid";
 export declare const defaultGutter: GridOptions;
 export declare const defaultColumns: GridOptions;
-export declare const Grid: ({ className, children }: CssGridProps) => import("react/jsx-runtime").JSX.Element;
-export declare const StyledGrid: import("styled-components").StyledComponent<({ className, children }: CssGridProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
-export declare const CssGrid: (props: CssGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Grid: ({ className, children, isLoading }: InternalGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledGrid: import("styled-components").StyledComponent<({ className, children, isLoading }: InternalGridProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const CssGrid: ({ children, loadMoreData, onError, ...gridArgs }: CssGridProps) => import("react/jsx-runtime").JSX.Element;
+export {};