feat: add "load more" button to gallery

Author: iobuhov

packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss

@@ -88,3 +88,8 @@ $gallery-screen-md: 768px;
 .widget-gallery-item-button {
     width: inherit;
 }
+
+.widget-gallery-load-more {
+    display: flex;
+    justify-content: center;
+}

packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx

@@ -13,6 +13,7 @@ import { GalleryTopBar } from "./GalleryTopBar";
 import { ListBox } from "./ListBox";
 import { ListItem } from "./ListItem";
 
+import { LoadMore, LoadMoreButton as LoadMorePreview } from "src/components/LoadMore";
 import { PaginationEnum, ShowPagingButtonsEnum } from "typings/GalleryProps";
 import { ItemEventsController } from "../typings/ItemEventsController";
 
@@ -69,8 +70,10 @@ export function Gallery<T extends ObjectItem>(props: GalleryProps<T>): ReactElem
         </div>
     ) : null;
 
-    const showTopBar = props.paging && (props.paginationPosition === "top" || props.paginationPosition === "both");
-    const showFooter = props.paging && (props.paginationPosition === "bottom" || props.paginationPosition === "both");
+    const showTopPagination =
+        props.paging && (props.paginationPosition === "top" || props.paginationPosition === "both");
+    const showBottomPagination =
+        props.paging && (props.paginationPosition === "bottom" || props.paginationPosition === "both");
 
     return (
         <GalleryRoot
@@ -79,7 +82,7 @@ export function Gallery<T extends ObjectItem>(props: GalleryProps<T>): ReactElem
             selectable={false}
             data-focusindex={props.tabIndex || 0}
         >
-            {showTopBar && <GalleryTopBar>{pagination}</GalleryTopBar>}
+            <GalleryTopBar>{showTopPagination && pagination}</GalleryTopBar>
             {props.showHeader && <GalleryHeader aria-label={props.headerTitle}>{props.header}</GalleryHeader>}
             <GalleryContent hasMoreItems={props.hasMoreItems} setPage={props.setPage} isInfinite={!props.paging}>
                 {props.items.length > 0 && (
@@ -115,7 +118,15 @@ export function Gallery<T extends ObjectItem>(props: GalleryProps<T>): ReactElem
                         <div className="empty-placeholder">{children}</div>
                     </section>
                 ))}
-            {showFooter && <GalleryFooter>{pagination}</GalleryFooter>}
+            <GalleryFooter>
+                {showBottomPagination && pagination}
+                <div className="widget-gallery-load-more">
+                    {props.preview && props.paginationType === "loadMore" && (
+                        <LoadMorePreview>Load more</LoadMorePreview>
+                    )}
+                    {!props.preview && <LoadMore>Load more</LoadMore>}
+                </div>
+            </GalleryFooter>
         </GalleryRoot>
     );
 }

packages/pluggableWidgets/gallery-web/src/components/LoadMore.tsx

@@ -0,0 +1,24 @@
+import cn from "classnames";
+import { observer } from "mobx-react-lite";
+import { createElement } from "react";
+import { useGalleryRootScope } from "src/helpers/root-context";
+
+export function LoadMoreButton(props: JSX.IntrinsicElements["button"]): React.ReactNode {
+    return <button {...props} className={cn("btn btn-primary widget-gallery-load-more-btn", props.className)}></button>;
+}
+
+export const LoadMore = observer(function LoadMore(props: { children: React.ReactNode }): React.ReactNode {
+    const {
+        rootStore: { paging }
+    } = useGalleryRootScope();
+
+    if (paging.pagination !== "loadMore") {
+        return null;
+    }
+
+    if (!paging.hasMoreItems) {
+        return null;
+    }
+
+    return <LoadMoreButton onClick={() => paging.setPage(n => n + 1)}>{props.children}</LoadMoreButton>;
+});

packages/shared/widget-plugin-grid/src/query/DatasourceController.ts

@@ -90,6 +90,10 @@ export class DatasourceController implements ReactiveController, QueryController
         return this.datasource.totalCount;
     }
 
+    get hasMoreItems(): boolean {
+        return this.datasource.hasMoreItems ?? false;
+    }
+
     /**
      * Returns computed value that holds controller copy.
      * Recomputes the copy every time the datasource changes.

packages/shared/widget-plugin-grid/src/query/PaginationController.ts

@@ -67,6 +67,10 @@ export class PaginationController implements ReactiveController {
         }
     }
 
+    get hasMoreItems(): boolean {
+        return this._query.hasMoreItems;
+    }
+
     private _setInitParams(): void {
         if (this.pagination === "buttons" || this.showTotalCount) {
             this._query.requestTotalCount(true);

packages/shared/widget-plugin-grid/src/query/query-controller.ts

@@ -8,11 +8,13 @@ type Members =
     | "requestTotalCount"
     | "totalCount"
     | "limit"
-    | "offset";
+    | "offset"
+    | "hasMoreItems";
 
 export interface QueryController extends Pick<ListValue, Members> {
     refresh(): void;
     setPageSize(size: number): void;
+    hasMoreItems: boolean;
     isLoading: boolean;
     isRefreshing: boolean;
     isFetchingNextBatch: boolean;