feat: add selection to gallery

iobuhov · iobuhov · commit 2332103ef7cb · 2025-08-28T11:44:23.000+02:00
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
@@ -555,13 +555,13 @@ $root: ".widget-datagrid";
     align-items: center;
 }
 
-:where(#{$root}-pb-left, #{$root}-pb-right, #{$root}-pb-middle) {
+:where(#{$root}-pb-start, #{$root}-pb-end, #{$root}-pb-middle) {
     flex-grow: 1;
-    flex-basis: 33.3%;
+    flex-basis: 33.33%;
     min-height: 20px;
 }
 
-:where(#{$root}-pb-left) {
+:where(#{$root}-pb-start) {
     margin-block: var(--spacing-medium);
     padding-inline: var(--spacing-medium);
 }
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss
@@ -89,7 +89,28 @@ $gallery-screen-md: $screen-md;
     width: inherit;
 }
 
-.widget-gallery-load-more {
+:where(.widget-gallery-footer-controls) {
     display: flex;
-    justify-content: center;
+    flex-flow: row nowrap;
+}
+
+:where(.widget-gallery-fc-start) {
+    margin-block: var(--spacing-medium);
+    padding-inline: var(--spacing-medium);
+}
+
+:where(.widget-gallery-fc-start, .widget-gallery-fc-middle, .widget-gallery-fc-end) {
+    flex-grow: 1;
+    flex-basis: 33.33%;
+    min-height: 20px;
+}
+
+.widget-gallery-clear-selection {
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    text-decoration: underline;
+    color: var(--link-color);
+    padding: 0;
+    display: inline-block;
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx
@@ -18,7 +18,8 @@ import { ColumnPreview } from "./helpers/ColumnPreview";
 import { DatagridContext } from "./helpers/root-context";
 import { useSelectActionHelper } from "./helpers/SelectActionHelper";
 import { GridBasicData } from "./helpers/state/GridBasicData";
-import { SelectionCountStore } from "./helpers/state/SelectionCountStore";
+
+import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores/SelectionCountStore";
 import "./ui/DatagridPreview.scss";
 
 // Fix type definition for Selectable
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
@@ -18,7 +18,7 @@ export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
     return (
         <div {...rest} className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
-                <div className="widget-datagrid-pb-left">
+                <div className="widget-datagrid-pb-start">
                     <SelectionCounter />
                 </div>
                 {hasMoreItems && paginationType === "loadMore" && (
@@ -32,7 +32,7 @@ export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
                         </button>
                     </div>
                 )}
-                <div className="widget-datagrid-pb-right">
+                <div className="widget-datagrid-pb-end">
                     {(pagingPosition === "bottom" || pagingPosition === "both") && pagination}
                 </div>
             </div>
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts
@@ -1,10 +1,10 @@
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { SelectionHelper } from "@mendix/widget-plugin-grid/selection";
+import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores/SelectionCountStore";
 import { createContext, useContext } from "react";
 import { GridBasicData } from "../helpers/state/GridBasicData";
 import { EventsController } from "../typings/CellComponent";
 import { SelectActionHelper } from "./SelectActionHelper";
-import { SelectionCountStore } from "./state/SelectionCountStore";
 
 export interface DatagridRootScope {
     basicData: GridBasicData;
diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx
@@ -34,6 +34,7 @@ function Preview(props: GalleryPreviewProps): ReactElement {
         desktopItems: props.desktopItems ?? 1,
         totalItems: items.length
     });
+
     const getPositionCallback = useCallback(
         (index: number) => getColumnAndRowBasedOnIndex(numberOfColumns, items.length, index),
         [numberOfColumns, items.length]
diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.tsx
@@ -109,7 +109,8 @@ function useCreateGalleryScope(props: GalleryContainerProps): GalleryRootScope {
     return useConst<GalleryRootScope>({
         rootStore,
         selectionHelper,
-        itemSelectHelper
+        itemSelectHelper,
+        selectionCountStore: rootStore.selectionCountStore
     });
 }
 
diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.xml b/packages/pluggableWidgets/gallery-web/src/Gallery.xml
@@ -186,6 +186,14 @@
                     <caption>Item description</caption>
                     <description>Assistive technology will read this upon reaching each gallery item.</description>
                 </property>
+                <property key="sCountFmtSingular" type="textTemplate" required="false">
+                    <caption>Row count singular</caption>
+                    <description>Must include '%d' to denote number position ('%d row selected')</description>
+                </property>
+                <property key="sCountFmtPlural" type="textTemplate" required="false">
+                    <caption>Row count plural</caption>
+                    <description>Must include '%d' to denote number position ('%d rows selected')</description>
+                </property>
             </propertyGroup>
         </propertyGroup>
     </properties>
diff --git a/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx
@@ -17,6 +17,7 @@ import { ListItem } from "./ListItem";
 import { PaginationEnum, ShowPagingButtonsEnum } from "typings/GalleryProps";
 import { LoadMore, LoadMoreButton as LoadMorePreview } from "../components/LoadMore";
 import { ItemEventsController } from "../typings/ItemEventsController";
+import { SelectionCounter } from "./SelectionCounter";
 
 export interface GalleryProps<T extends ObjectItem> {
     className?: string;
@@ -128,12 +129,15 @@ export function Gallery<T extends ObjectItem>(props: GalleryProps<T>): ReactElem
                     </section>
                 ))}
             <GalleryFooter>
-                {showBottomPagination && pagination}
-                <div className="widget-gallery-load-more">
-                    {props.preview && props.paginationType === "loadMore" && (
-                        <LoadMorePreview>{loadMoreButtonCaption}</LoadMorePreview>
+                <div className="widget-gallery-footer-controls">
+                    <div className="widget-gallery-fc-start">{!props.preview && <SelectionCounter />}</div>
+                    {props.paginationType === "loadMore" && (
+                        <div className="widget-gallery-fc-middle">
+                            {props.preview && <LoadMorePreview>{loadMoreButtonCaption}</LoadMorePreview>}{" "}
+                            {!props.preview && <LoadMore>{loadMoreButtonCaption}</LoadMore>}
+                        </div>
                     )}
-                    {!props.preview && <LoadMore>{loadMoreButtonCaption}</LoadMore>}
+                    <div className="widget-gallery-fc-end">{showBottomPagination && pagination}</div>
                 </div>
             </GalleryFooter>
         </GalleryRoot>
diff --git a/packages/pluggableWidgets/gallery-web/src/components/SelectionCounter.tsx b/packages/pluggableWidgets/gallery-web/src/components/SelectionCounter.tsx
@@ -0,0 +1,17 @@
+import { If } from "@mendix/widget-plugin-component-kit/If";
+import { observer } from "mobx-react-lite";
+import { createElement } from "react";
+import { useGalleryRootScope } from "../helpers/root-context";
+
+export const SelectionCounter = observer(function SelectionCounter() {
+    const { selectionCountStore, itemSelectHelper } = useGalleryRootScope();
+
+    return (
+        <If condition={selectionCountStore.displayCount !== ""}>
+            <span className="widget-gallery-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
+            <button className="widget-gallery-clear-selection" onClick={itemSelectHelper.onClearSelection}>
+                Clear selection
+            </button>
+        </If>
+    );
+});
diff --git a/packages/pluggableWidgets/gallery-web/src/helpers/root-context.ts b/packages/pluggableWidgets/gallery-web/src/helpers/root-context.ts
@@ -1,9 +1,11 @@
 import { SelectActionHandler, SelectionHelper } from "@mendix/widget-plugin-grid/selection";
+import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores/SelectionCountStore";
 import { createContext, useContext } from "react";
 import { GalleryStore } from "../stores/GalleryStore";
 
 export interface GalleryRootScope {
     rootStore: GalleryStore;
+    selectionCountStore: SelectionCountStore;
     selectionHelper: SelectionHelper | undefined;
     itemSelectHelper: SelectActionHandler;
 }
diff --git a/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts b/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts
@@ -4,12 +4,13 @@ import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic
 import { DatasourceController } from "@mendix/widget-plugin-grid/query/DatasourceController";
 import { PaginationController } from "@mendix/widget-plugin-grid/query/PaginationController";
 import { RefreshController } from "@mendix/widget-plugin-grid/query/RefreshController";
+import { SelectionCountStore } from "@mendix/widget-plugin-grid/selection/stores/SelectionCountStore";
 import { BaseControllerHost } from "@mendix/widget-plugin-mobx-kit/BaseControllerHost";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { SortAPI } from "@mendix/widget-plugin-sorting/react/context";
 import { SortStoreHost } from "@mendix/widget-plugin-sorting/stores/SortStoreHost";
-import { EditableValue, ListValue } from "mendix";
+import { DynamicValue, EditableValue, ListValue, SelectionMultiValue, SelectionSingleValue } from "mendix";
 import { PaginationEnum, StateStorageTypeEnum } from "../../typings/GalleryProps";
 import { DerivedLoaderController } from "../controllers/DerivedLoaderController";
 import { QueryParamsController } from "../controllers/QueryParamsController";
@@ -21,6 +22,9 @@ import { GalleryPersistentStateController } from "./GalleryPersistentStateContro
 interface DynamicProps {
     datasource: ListValue;
     stateStorageAttr?: EditableValue<string>;
+    itemSelection?: SelectionSingleValue | SelectionMultiValue;
+    sCountFmtSingular?: DynamicValue<string>;
+    sCountFmtPlural?: DynamicValue<string>;
 }
 
 interface StaticProps {
@@ -53,6 +57,7 @@ export class GalleryStore extends BaseControllerHost {
     readonly filterAPI: FilterAPI;
     readonly sortAPI: SortAPI;
     loaderCtrl: DerivedLoaderController;
+    selectionCountStore: SelectionCountStore;
 
     constructor(spec: GalleryStoreSpec) {
         super();
@@ -69,6 +74,8 @@ export class GalleryStore extends BaseControllerHost {
             showTotalCount: spec.showTotalCount
         });
 
+        this.selectionCountStore = new SelectionCountStore(spec.gate);
+
         this._filtersHost = new CustomFilterHost();
 
         const combinedFilter = new CombinedFilter(this, { stableKey: spec.name, inputs: [this._filtersHost] });
diff --git a/packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx b/packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx
@@ -82,7 +82,8 @@ export function createMockGalleryContext(): GalleryRootScope {
     return {
         rootStore: mockStore,
         selectionHelper: undefined,
-        itemSelectHelper: mockSelectHelper
+        itemSelectHelper: mockSelectHelper,
+        selectionCountStore: mockStore.selectionCountStore
     };
 }
 
diff --git a/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts b/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts
@@ -54,6 +54,8 @@ export interface GalleryContainerProps {
     emptyMessageTitle?: DynamicValue<string>;
     ariaLabelListBox?: DynamicValue<string>;
     ariaLabelItem?: ListExpressionValue<string>;
+    sCountFmtSingular?: DynamicValue<string>;
+    sCountFmtPlural?: DynamicValue<string>;
 }
 
 export interface GalleryPreviewProps {
@@ -97,4 +99,6 @@ export interface GalleryPreviewProps {
     emptyMessageTitle: string;
     ariaLabelListBox: string;
     ariaLabelItem: string;
+    sCountFmtSingular: string;
+    sCountFmtPlural: string;
 }

Original file line number	Diff line number	Diff line change
`@@ -555,13 +555,13 @@ $root: ".widget-datagrid";`
`555`	`555`	`align-items: center;`
`556`	`556`	`}`
`557`	`557`
`558`		`-:where(#{$root}-pb-left, #{$root}-pb-right, #{$root}-pb-middle) {`
	`558`	`+:where(#{$root}-pb-start, #{$root}-pb-end, #{$root}-pb-middle) {`
`559`	`559`	`flex-grow: 1;`
`560`		`- flex-basis: 33.3%;`
	`560`	`+ flex-basis: 33.33%;`
`561`	`561`	`min-height: 20px;`
`562`	`562`	`}`
`563`	`563`
`564`		`-:where(#{$root}-pb-left) {`
	`564`	`+:where(#{$root}-pb-start) {`
`565`	`565`	`margin-block: var(--spacing-medium);`
`566`	`566`	`padding-inline: var(--spacing-medium);`
`567`	`567`	`}`
Original file line number	Diff line number	Diff line change
`@@ -109,7 +109,8 @@ function useCreateGalleryScope(props: GalleryContainerProps): GalleryRootScope {`
`109`	`109`	`return useConst<GalleryRootScope>({`
`110`	`110`	`rootStore,`
`111`	`111`	`selectionHelper,`
`112`		`- itemSelectHelper`
	`112`	`+ itemSelectHelper,`
	`113`	`+ selectionCountStore: rootStore.selectionCountStore`
`113`	`114`	`});`
`114`	`115`	`}`
`115`	`116`