refactor: rewrite dg pagination

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx

@@ -1,6 +1,5 @@
 import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
 import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
-import { useSelectionHelper } from "@mendix/widget-plugin-grid/selection";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { ContainerProvider } from "brandi-react";
@@ -9,7 +8,6 @@ import { ReactElement, useCallback, useMemo } from "react";
 import { DatagridContainerProps } from "../typings/DatagridProps";
 import { Cell } from "./components/Cell";
 import { Widget } from "./components/Widget";
-import { WidgetHeaderContext } from "./components/WidgetHeaderContext";
 import { useDataExport } from "./features/data-export/useDataExport";
 import { useCellEventsController } from "./features/row-interaction/CellEventsController";
 import { useCheckboxEventsController } from "./features/row-interaction/CheckboxEventsController";
@@ -21,26 +19,20 @@ import {
     useExportProgressService,
     useLoaderViewModel,
     useMainGate,
-    usePaginationService
+    useSelectionHelper
 } from "./model/hooks/injection-hooks";
 import { useDatagridContainer } from "./model/hooks/useDatagridContainer";
 
 const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
     const gate = useMainGate();
     const columnsStore = useColumnsStore();
-    const paginationService = usePaginationService();
     const exportProgress = useExportProgressService();
     const loaderVM = useLoaderViewModel();
     const items = gate.props.datasource.items ?? [];
 
     const [abortExport] = useDataExport(props, columnsStore, exportProgress);
 
-    const selectionHelper = useSelectionHelper(
-        gate.props.itemSelection,
-        gate.props.datasource,
-        props.onSelectionChange,
-        props.keepSelection ? "always keep" : "always clear"
-    );
+    const selectionHelper = useSelectionHelper();
 
     const selectActionHelper = useSelectActionHelper(props, selectionHelper);
 
@@ -92,27 +84,14 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
                     [columnsStore.columnFilters]
                 )}
                 headerTitle={props.filterSectionTitle?.value}
-                headerContent={
-                    props.filtersPlaceholder && (
-                        <WidgetHeaderContext selectionHelper={selectionHelper}>
-                            {props.filtersPlaceholder}
-                        </WidgetHeaderContext>
-                    )
-                }
-                hasMoreItems={props.datasource.hasMoreItems ?? false}
+                headerContent={props.filtersPlaceholder}
                 headerWrapperRenderer={useCallback((_columnIndex: number, header: ReactElement) => header, [])}
                 id={useMemo(() => `DataGrid${generateUUID()}`, [])}
                 numberOfItems={props.datasource.totalCount}
                 onExportCancel={abortExport}
-                page={paginationService.currentPage}
-                pageSize={props.pageSize}
                 paginationType={props.pagination}
                 loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
-                paging={paginationService.showPagination}
-                pagingPosition={props.pagingPosition}
-                showPagingButtons={props.showPagingButtons}
                 rowClass={useCallback((value: any) => props.rowClass?.get(value)?.value ?? "", [props.rowClass])}
-                setPage={paginationService.setPage}
                 styles={props.style}
                 exporting={exportProgress.inProgress}
                 processedRows={exportProgress.loaded}

packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx

@@ -1,9 +1,10 @@
+import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
 import classNames from "classnames";
-import { Fragment, ReactElement, ReactNode } from "react";
-import { LoadingTypeEnum, PaginationEnum } from "../../typings/DatagridProps";
-import { SpinnerLoader } from "./loader/SpinnerLoader";
+import { Fragment, ReactElement, ReactNode, useCallback } from "react";
+import { LoadingTypeEnum } from "../../typings/DatagridProps";
+import { usePaginationService } from "../model/hooks/injection-hooks";
 import { RowSkeletonLoader } from "./loader/RowSkeletonLoader";
-import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
+import { SpinnerLoader } from "./loader/SpinnerLoader";
 
 interface Props {
     className?: string;
@@ -14,30 +15,30 @@ interface Props {
     columnsHidable: boolean;
     columnsSize: number;
     rowsSize: number;
-    pageSize: number;
-    pagination: PaginationEnum;
-    hasMoreItems: boolean;
-    setPage?: (update: (page: number) => number) => void;
 }
 
 export function GridBody(props: Props): ReactElement {
-    const { children, pagination, hasMoreItems, setPage } = props;
+    const { children } = props;
+
+    const paging = usePaginationService();
+    const pageSize = paging.pageSize;
+    const setPage = useCallback((cb: (n: number) => number) => paging.setPage(cb), [paging]);
 
-    const isInfinite = pagination === "virtualScrolling";
+    const isInfinite = paging.pagination === "virtualScrolling";
     const [trackScrolling, bodySize, containerRef] = useInfiniteControl({
-        hasMoreItems,
+        hasMoreItems: paging.hasMoreItems,
         isInfinite,
         setPage
     });
 
     const content = (): ReactElement => {
         if (props.isFirstLoad) {
-            return <Loader {...props} rowsSize={props.rowsSize > 0 ? props.rowsSize : props.pageSize} />;
+            return <Loader {...props} rowsSize={props.rowsSize > 0 ? props.rowsSize : pageSize} />;
         }
         return (
             <Fragment>
                 {children}
-                {props.isFetchingNextBatch && <Loader {...props} rowsSize={props.pageSize} useBorderTop={false} />}
+                {props.isFetchingNextBatch && <Loader {...props} rowsSize={pageSize} useBorderTop={false} />}
             </Fragment>
         );
     };

packages/pluggableWidgets/datagrid-web/src/components/Pagination.tsx

@@ -0,0 +1,25 @@
+import { Pagination as PaginationComponent } from "@mendix/widget-plugin-grid/components/Pagination";
+import { observer } from "mobx-react-lite";
+import { ReactNode } from "react";
+import { usePaginationService } from "../model/hooks/injection-hooks";
+
+export const Pagination = observer(function Pagination(): ReactNode {
+    const paging = usePaginationService();
+
+    if (!paging.paginationVisible) return null;
+
+    return (
+        <PaginationComponent
+            canNextPage={paging.hasMoreItems}
+            canPreviousPage={paging.currentPage !== 0}
+            gotoPage={page => paging.setPage(page)}
+            nextPage={() => paging.setPage(n => n + 1)}
+            numberOfItems={paging.totalCount}
+            page={paging.currentPage}
+            pageSize={paging.pageSize}
+            showPagingButtons={paging.showPagingButtons}
+            previousPage={() => paging.setPage(n => n - 1)}
+            pagination={paging.pagination}
+        />
+    );
+});

packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx

@@ -14,7 +14,6 @@ interface RowsRendererProps {
     eventsController: EventsController;
     focusController: FocusTargetController;
     interactive: boolean;
-    pageSize: number;
     preview: boolean;
     rowClass?: (item: ObjectItem) => string;
     rows: ObjectItem[];

packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx

@@ -1,15 +1,9 @@
 import { RefreshIndicator } from "@mendix/widget-plugin-component-kit/RefreshIndicator";
-import { Pagination } from "@mendix/widget-plugin-grid/components/Pagination";
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { ListActionValue, ObjectItem } from "mendix";
 import { observer } from "mobx-react-lite";
 import { CSSProperties, Fragment, ReactElement, ReactNode } from "react";
-import {
-    LoadingTypeEnum,
-    PaginationEnum,
-    PagingPositionEnum,
-    ShowPagingButtonsEnum
-} from "../../typings/DatagridProps";
+import { LoadingTypeEnum, PaginationEnum } from "../../typings/DatagridProps";
 
 import { EmptyPlaceholder } from "../features/empty-message/EmptyPlaceholder";
 import { SelectAllBar } from "../features/select-all/SelectAllBar";
@@ -40,28 +34,19 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     data: T[];
     exporting: boolean;
     filterRenderer: (renderWrapper: (children: ReactNode) => ReactElement, columnIndex: number) => ReactElement;
-    hasMoreItems: boolean;
     headerContent?: ReactNode;
     headerTitle?: string;
     headerWrapperRenderer: (columnIndex: number, header: ReactElement) => ReactElement;
     id: string;
     numberOfItems?: number;
     onExportCancel?: () => void;
-    page: number;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
 
-    pageSize: number;
-    paging: boolean;
-    pagingPosition: PagingPositionEnum;
-    showPagingButtons: ShowPagingButtonsEnum;
-    preview?: boolean;
     processedRows: number;
     rowClass?: (item: T) => string;
-    setPage?: (computePage: (prevPage: number) => number) => void;
     styles?: CSSProperties;
     rowAction?: ListActionValue;
-    showSelectAllToggle?: boolean;
     isFirstLoad: boolean;
     isFetchingNextBatch: boolean;
     loadingType: LoadingTypeEnum;
@@ -116,43 +101,16 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         CellComponent,
         columnsHidable,
         data: rows,
-        hasMoreItems,
         headerContent,
         headerTitle,
         loadMoreButtonCaption,
-        numberOfItems,
-        page,
-        pageSize,
-        paginationType,
-        paging,
-        pagingPosition,
         showRefreshIndicator,
         selectActionHelper,
-        setPage,
         visibleColumns
     } = props;
 
     const basicData = useBasicData();
 
-    const showHeader = !!headerContent;
-    const showTopBarPagination = paging && (pagingPosition === "top" || pagingPosition === "both");
-    const showFooterPagination = paging && (pagingPosition === "bottom" || pagingPosition === "both");
-
-    const pagination = paging ? (
-        <Pagination
-            canNextPage={hasMoreItems}
-            canPreviousPage={page !== 0}
-            gotoPage={(page: number) => setPage && setPage(() => page)}
-            nextPage={() => setPage && setPage(prev => prev + 1)}
-            numberOfItems={numberOfItems}
-            page={page}
-            pageSize={pageSize}
-            showPagingButtons={props.showPagingButtons}
-            previousPage={() => setPage && setPage(prev => prev - 1)}
-            pagination={paginationType}
-        />
-    ) : null;
-
     const cssGridStyles = gridStyle(visibleColumns, {
         selectItemColumn: selectActionHelper.showCheckboxColumn,
         visibilitySelectorColumn: columnsHidable
@@ -162,8 +120,8 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
 
     return (
         <Fragment>
-            <WidgetTopBar pagination={showTopBarPagination ? pagination : undefined} />
-            {showHeader && <WidgetHeader headerTitle={headerTitle}>{headerContent}</WidgetHeader>}
+            <WidgetTopBar />
+            <WidgetHeader headerTitle={headerTitle} headerContent={headerContent} />
             <WidgetContent>
                 <Grid
                     aria-multiselectable={selectionEnabled ? selectActionHelper.selectionType === "Multi" : undefined}
@@ -183,7 +141,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                         headerWrapperRenderer={props.headerWrapperRenderer}
                         id={props.id}
                         isLoading={props.columnsLoading}
-                        preview={props.preview}
+                        preview={false}
                     />
                     <SelectAllBar />
                     {showRefreshIndicator ? <RefreshIndicator /> : null}
@@ -194,13 +152,9 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                         columnsHidable={columnsHidable}
                         columnsSize={visibleColumns.length}
                         rowsSize={rows.length}
-                        pageSize={pageSize}
-                        pagination={props.paginationType}
-                        hasMoreItems={hasMoreItems}
-                        setPage={setPage}
                     >
                         <RowsRenderer
-                            preview={props.preview ?? false}
+                            preview={false}
                             interactive={basicData.gridInteractive}
                             Cell={CellComponent}
                             columns={visibleColumns}
@@ -211,19 +165,12 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                             selectActionHelper={selectActionHelper}
                             focusController={props.focusController}
                             eventsController={props.cellEventsController}
-                            pageSize={props.pageSize}
                         />
                         <EmptyPlaceholder />
                     </GridBody>
                 </Grid>
             </WidgetContent>
-            <WidgetFooter
-                pagination={showFooterPagination ? pagination : undefined}
-                paginationType={paginationType}
-                loadMoreButtonCaption={loadMoreButtonCaption}
-                hasMoreItems={hasMoreItems}
-                setPage={setPage}
-            />
+            <WidgetFooter loadMoreButtonCaption={loadMoreButtonCaption} />
         </Fragment>
     );
 });

packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx

@@ -1,42 +1,45 @@
 import { If } from "@mendix/widget-plugin-component-kit/If";
 import { observer } from "mobx-react-lite";
-import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
-import { PaginationEnum } from "../../typings/DatagridProps";
+import { ReactElement } from "react";
 import { SelectionCounter } from "../features/selection-counter/SelectionCounter";
 import { useSelectionCounterViewModel } from "../features/selection-counter/injection-hooks";
+import { useDatagridConfig, usePaginationService } from "../model/hooks/injection-hooks";
+import { Pagination } from "./Pagination";
 
 type WidgetFooterProps = {
-    pagination: ReactNode;
-    paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
-    hasMoreItems: boolean;
-    setPage?: (computePage: (prevPage: number) => number) => void;
-} & ComponentPropsWithoutRef<"div">;
+};
 
 export const WidgetFooter = observer(function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
-    const { pagination, paginationType, loadMoreButtonCaption, hasMoreItems, setPage, ...rest } = props;
+    const config = useDatagridConfig();
+    const paging = usePaginationService();
+    const { loadMoreButtonCaption } = props;
     const selectionCounterVM = useSelectionCounterViewModel();
 
     return (
-        <div {...rest} className="widget-datagrid-footer table-footer">
+        <div className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
                 <div className="widget-datagrid-pb-start">
                     <If condition={selectionCounterVM.isBottomCounterVisible}>
                         <SelectionCounter />
                     </If>
                 </div>
-                {hasMoreItems && paginationType === "loadMore" && (
+                <If condition={paging.hasMoreItems && paging.pagination === "loadMore"}>
                     <div className="widget-datagrid-pb-middle">
                         <button
                             className="btn btn-primary widget-datagrid-load-more"
-                            onClick={() => setPage && setPage(prev => prev + 1)}
+                            onClick={() => paging.setPage(n => n + 1)}
                             tabIndex={0}
                         >
                             {loadMoreButtonCaption}
                         </button>
                     </div>
-                )}
-                <div className="widget-datagrid-pb-end">{pagination}</div>
+                </If>
+                <div className="widget-datagrid-pb-end">
+                    <If condition={config.pagingPosition !== "top"}>
+                        <Pagination />
+                    </If>
+                </div>
             </div>
         </div>
     );