[WC-3216] Gallery paging and autoselect

package.json

@@ -50,6 +50,7 @@
             "@codemirror/state": "^6.5.2",
             "@codemirror/view": "^6.38.1",
             "@mendix/pluggable-widgets-tools": "10.21.2",
+            "@prettier/plugin-xml": ">=3.4.1",
             "@testing-library/react": ">=15.0.6",
             "@types/big.js": "^6.2.2",
             "@types/node": "~22.14.0",
@@ -75,7 +76,6 @@
             "mime-types": "patches/mime-types.patch",
             "mobx-react-lite@4.0.7": "patches/mobx-react-lite@4.0.7.patch",
             "mobx@6.12.3": "patches/mobx@6.12.3.patch",
-            "rc-trigger": "patches/rc-trigger.patch",
             "react-big-calendar@0.19.2": "patches/react-big-calendar@0.19.2.patch",
             "react-dropzone": "patches/react-dropzone.patch"
         },

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

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { PropsWithChildren, ReactElement } from "react";
 import { useDatagridRootVM } from "../model/hooks/injection-hooks";
 
+/** @remark vm source `WidgetRoot.viewModel.ts` */
 export const WidgetRoot = observer(function WidgetRoot({ children }: PropsWithChildren): ReactElement {
     const vm = useDatagridRootVM();
 

packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts

@@ -6,27 +6,31 @@ import {
     createClickActionHelper,
     createFocusController,
     createSelectionHelper,
-    createSetPageAction,
-    createSetPageSizeAction,
-    currentPageAtom,
     DatasourceService,
     layoutAtom,
-    pageSizeAtom,
     SelectActionsProvider,
     TaskProgressService
 } from "@mendix/widget-plugin-grid/main";
+import {
+    createSetPageAction,
+    createSetPageSizeAction,
+    currentPageAtom,
+    customPaginationAtom,
+    dynamicPageAtom,
+    dynamicPageSizeAtom,
+    DynamicPaginationFeature,
+    PageControlService,
+    pageSizeAtom,
+    PaginationViewModel
+} from "@mendix/widget-plugin-grid/pagination/main";
 import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-counter/SelectionCounter.viewModel-atoms";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { Container, injected } from "brandi";
 import { MainGateProps } from "../../../typings/MainGateProps";
 import { WidgetRootViewModel } from "../../features/base/WidgetRoot.viewModel";
 import { EmptyPlaceholderViewModel } from "../../features/empty-message/EmptyPlaceholder.viewModel";
-import { DynamicPaginationFeature } from "../../features/pagination/DynamicPagination.feature";
-import { PageControlService } from "../../features/pagination/PageControl.service";
 import { paginationConfig } from "../../features/pagination/pagination.config";
-import { customPaginationAtom, dynamicPageAtom, dynamicPageSizeAtom } from "../../features/pagination/pagination.model";
-import { PaginationViewModel } from "../../features/pagination/Pagination.viewModel";
 import { createCellEventsController } from "../../features/row-interaction/CellEventsController";
 import { creteCheckboxEventsController } from "../../features/row-interaction/CheckboxEventsController";
 import { SelectAllModule } from "../../features/select-all/SelectAllModule.container";
@@ -39,16 +43,16 @@ import { rowClassProvider } from "../models/rows.model";
 import { DatasourceParamsController } from "../services/DatasourceParamsController";
 import { DerivedLoaderController } from "../services/DerivedLoaderController";
 import { SelectionGate } from "../services/SelectionGate.service";
-import { CORE_TOKENS as CORE, DG_TOKENS as DG, SA_TOKENS } from "../tokens";
 import { GridSizeStore } from "../stores/GridSize.store";
+import { CORE_TOKENS as CORE, DG_TOKENS as DG, SA_TOKENS } from "../tokens";
 
 // base
 injected(ColumnGroupStore, CORE.setupService, CORE.mainGate, CORE.config, DG.filterHost);
 injected(DatasourceParamsController, CORE.setupService, DG.query, DG.combinedFilter, CORE.columnsStore);
 injected(DatasourceService, CORE.setupService, DG.queryGate, DG.refreshInterval.optional);
 injected(GridBasicData, CORE.mainGate);
 injected(WidgetRootViewModel, CORE.mainGate, CORE.config, DG.exportProgressService, SA_TOKENS.selectionDialogVM);
-injected(GridSizeStore, CORE.atoms.hasMoreItems, DG.paginationConfig, DG.setPageAction);
+injected(GridSizeStore, CORE.atoms.hasMoreItems, DG.paginationConfig, DG.setPageAction.optional);
 
 /** Pagination **/
 injected(createSetPageAction, DG.query, DG.paginationConfig, DG.currentPage, DG.pageSize);

packages/pluggableWidgets/datagrid-web/src/model/tokens.ts

@@ -10,9 +10,15 @@ import {
     SelectAllService,
     SelectionDynamicProps,
     SelectionHelperService,
-    SetPageAction,
     TaskProgressService
 } from "@mendix/widget-plugin-grid/main";
+import {
+    DynamicPaginationFeature,
+    GridPageControl,
+    PageSizeStore,
+    PaginationViewModel,
+    SetPageAction
+} from "@mendix/widget-plugin-grid/pagination/main";
 import { SelectAllFeature } from "@mendix/widget-plugin-grid/select-all/select-all.feature";
 import {
     BarStore,
@@ -27,9 +33,6 @@ import { CSSProperties, ReactNode } from "react";
 import { MainGateProps } from "../../typings/MainGateProps";
 import { WidgetRootViewModel } from "../features/base/WidgetRoot.viewModel";
 import { EmptyPlaceholderViewModel } from "../features/empty-message/EmptyPlaceholder.viewModel";
-import { DynamicPaginationFeature } from "../features/pagination/DynamicPagination.feature";
-import { GridPageControl } from "../features/pagination/GridPageControl";
-import { PaginationViewModel } from "../features/pagination/Pagination.viewModel";
 import { PaginationConfig } from "../features/pagination/pagination.config";
 import { CellEventsController } from "../features/row-interaction/CellEventsController";
 import { CheckboxEventsController } from "../features/row-interaction/CheckboxEventsController";
@@ -45,7 +48,6 @@ import { RowClassProvider } from "./models/rows.model";
 import { DatagridSetupService } from "./services/DatagridSetup.service";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./services/DerivedLoaderController";
 import { TextsService } from "./services/Texts.service";
-import { PageSizeStore } from "./stores/PageSize.store";
 import { GridSizeStore } from "./stores/GridSize.store";
 
 /** Tokens to resolve dependencies from the container. */

packages/pluggableWidgets/gallery-web/package.json

@@ -46,6 +46,8 @@
         "@mendix/widget-plugin-filtering": "workspace:*",
         "@mendix/widget-plugin-mobx-kit": "workspace:^",
         "@mendix/widget-plugin-sorting": "workspace:*",
+        "brandi": "^5.0.0",
+        "brandi-react": "^5.0.0",
         "classnames": "^2.5.1",
         "mobx": "6.12.3",
         "mobx-react-lite": "4.0.7"

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

@@ -1,112 +1,19 @@
 import { enableStaticRendering } from "mobx-react-lite";
 enableStaticRendering(true);
 
-import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
-import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
-import { getColumnAndRowBasedOnIndex } from "@mendix/widget-plugin-grid/selection";
-import { getGlobalSortContext } from "@mendix/widget-plugin-sorting/react/context";
-import { SortStoreHost } from "@mendix/widget-plugin-sorting/stores/SortStoreHost";
-import { GUID, ObjectItem } from "mendix";
-import { createElement, ReactElement, ReactNode, RefObject, useCallback, useMemo } from "react";
+import { createElement, ReactElement } from "react";
 import { GalleryPreviewProps } from "../typings/GalleryProps";
-import { Gallery as GalleryComponent } from "./components/Gallery";
-import { useItemEventsController } from "./features/item-interaction/ItemEventsController";
-import { useGridPositionsPreview } from "./features/useGridPositionsPreview";
-import { useItemPreviewHelper } from "./helpers/ItemPreviewHelper";
-import { useItemSelectHelper } from "./helpers/useItemSelectHelper";
 import "./ui/GalleryPreview.scss";
 
-const SortAPI = getGlobalSortContext();
-
 function Preview(props: GalleryPreviewProps): ReactElement {
-    const { emptyPlaceholder } = props;
-    const { numberOfColumns, numberOfRows, containerRef, numberOfItems } = useGridPositionsPreview({
-        phoneItems: props.phoneItems ?? 1,
-        tabletItems: props.tabletItems ?? 1,
-        desktopItems: props.desktopItems ?? 1,
-        totalItems: props.pageSize ?? 3
-    });
-
-    const items: ObjectItem[] = Array.from({ length: numberOfItems }).map((_, index) => ({
-        id: String(index) as GUID
-    }));
-
-    const selectHelper = useItemSelectHelper(props.itemSelection, undefined);
-
-    const getPositionCallback = useCallback(
-        (index: number) => getColumnAndRowBasedOnIndex(numberOfColumns, items.length, index),
-        [numberOfColumns, items.length]
-    );
-
-    const focusController = useFocusTargetController({
-        rows: numberOfRows,
-        columns: numberOfColumns,
-        pageSize: props.pageSize ?? 0
-    });
-
-    const clickActionHelper = useClickActionHelper({ onClick: props.onClick, onClickTrigger: "none" });
-
-    const itemEventsController = useItemEventsController(
-        selectHelper,
-        clickActionHelper,
-        focusController,
-        numberOfColumns,
-        props.itemSelectionMode
-    );
-
-    const sortAPI = useMemo(
-        () =>
-            ({
-                version: 1,
-                host: new SortStoreHost()
-            }) as const,
-        []
-    );
-
     return (
-        <div ref={containerRef as RefObject<HTMLDivElement>}>
-            <GalleryComponent
-                className={props.class}
-                desktopItems={props.desktopItems!}
-                emptyPlaceholderRenderer={useCallback(
-                    (renderWrapper: (children: ReactNode) => ReactElement) => (
-                        <emptyPlaceholder.renderer caption="Empty list message: Place widgets here">
-                            {renderWrapper(null)}
-                        </emptyPlaceholder.renderer>
-                    ),
-                    [emptyPlaceholder]
-                )}
-                header={
-                    <SortAPI.Provider value={sortAPI}>
-                        <props.filtersPlaceholder.renderer caption="Place widgets like filter widget(s) and action button(s) here">
-                            <div />
-                        </props.filtersPlaceholder.renderer>
-                    </SortAPI.Provider>
-                }
-                showHeader
-                hasMoreItems={false}
-                items={items}
-                itemHelper={useItemPreviewHelper({
-                    contentValue: props.content,
-                    hasOnClick: props.onClick !== null
-                })}
-                numberOfItems={props.pageSize!}
-                page={0}
-                pageSize={props.pageSize!}
-                paging={props.pagination === "buttons"}
-                paginationPosition={props.pagingPosition}
-                paginationType={props.pagination}
-                showPagingButtons={props.showPagingButtons}
-                showEmptyStatePreview={props.showEmptyPlaceholder === "custom"}
-                phoneItems={props.phoneItems!}
-                tabletItems={props.tabletItems!}
-                selectHelper={selectHelper}
-                itemEventsController={itemEventsController}
-                focusController={focusController}
-                getPosition={getPositionCallback}
-                showRefreshIndicator={false}
-                preview
-            />
+        <div>
+            FIX ME: Preview for gallery
+            <div>
+                <props.content.renderer>
+                    <div />
+                </props.content.renderer>
+            </div>
         </div>
     );
 }