[WC-1637] Datagrid selection api (#433)

Author: r0b1n

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

@@ -15,6 +15,7 @@ $grid-border-color: #ced0d3 !default;
 
 $brand-primary: #264ae5 !default;
 $brand-light: #e6eaff !default;
+$grid-selected-row-background: $brand-light;
 
 .table {
     position: relative;
@@ -347,3 +348,11 @@ $brand-light: #e6eaff !default;
         }
     }
 }
+
+.widget-datagrid {
+    &.widget-datagrid-selection-method-click {
+        .tr.tr-selected .td {
+            background-color: $grid-selected-row-background;
+        }
+    }
+}

…election-helper-web/src/ui/CheckBox.scss …tawidgets/web/_three-state-checkbox.scsspackages/pluggableWidgets/selection-helper-web/src/ui/CheckBox.scss renamed to packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss packages/pluggableWidgets/selection-helper-web/src/ui/CheckBox.scss renamed to packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss

@@ -5,5 +5,6 @@
 @import "drop-down-sort";
 @import "gallery";
 @import "gallery-design-properties";
+@import "three-state-checkbox";
 @import "tree-node";
 @import "tree-node-design-properties";

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

@@ -47,6 +47,7 @@
   "devDependencies": {
     "@mendix-internal/automation-utils": "workspace:*",
     "@mendix/eslint-config-web-widgets": "workspace:*",
+    "@mendix/pluggable-test-utils": "workspace:*",
     "@mendix/pluggable-widgets-tools": "^9.23.2",
     "@mendix/prettier-config-web-widgets": "workspace:*",
     "@testing-library/dom": "^8.20.0",

packages/pluggableWidgets/datagrid-web/package.json

@@ -82,6 +82,8 @@ export function getProperties(
         hidePropertyIn(defaultProperties, values, "filterList");
     }
 
+    hideSelectionProperties(defaultProperties, values);
+
     changePropertyIn(
         defaultProperties,
         values,
@@ -140,6 +142,18 @@ export function getProperties(
     return defaultProperties;
 }
 
+function hideSelectionProperties(defaultProperties: Properties, values: DatagridPreviewProps): void {
+    const { itemSelection, itemSelectionMethod } = values;
+
+    if (itemSelection === "None") {
+        hidePropertiesIn(defaultProperties, values, ["itemSelectionMethod", "onSelectionChange"]);
+    }
+
+    if (itemSelection !== "Multi" || itemSelectionMethod !== "checkbox") {
+        hidePropertyIn(defaultProperties, values, "showSelectAllToggle");
+    }
+}
+
 export const getPreview = (
     values: DatagridPreviewProps,
     isDarkMode: boolean,
@@ -359,6 +373,19 @@ const checkSortingSettings = (
     }
 };
 
+const checkSelectionSettings = (values: DatagridPreviewProps): Problem[] => {
+    if (values.itemSelection !== "None" && values.onClick !== null) {
+        return [
+            {
+                property: "onClick",
+                message: '"On click action" must be set to "Do nothing" when "Selection" is enabled'
+            }
+        ];
+    }
+
+    return [];
+};
+
 export function check(values: DatagridPreviewProps): Problem[] {
     const errors: Problem[] = [];
 
@@ -381,5 +408,7 @@ export function check(values: DatagridPreviewProps): Problem[] {
         }
     });
 
+    errors.push(...checkSelectionSettings(values));
+
     return errors;
 }

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts

@@ -9,6 +9,7 @@ import { Selectable } from "mendix/preview/Selectable";
 import { ObjectItem, GUID } from "mendix";
 import classNames from "classnames";
 import { isSortable } from "./features/column";
+import { selectionSettings, useOnSelectProps } from "./features/selection";
 
 const dummyColumns: ColumnsPreviewType[] = [
     {
@@ -57,7 +58,8 @@ export function preview(props: DatagridPreviewProps): ReactElement {
     );
 
     const EmptyPlaceholder = props.emptyPlaceholder.renderer;
-
+    const selectActionProps = useOnSelectProps(undefined);
+    const { selectionStatus, selectionMethod } = selectionSettings(props, undefined);
     return (
         <Table
             cellRenderer={useCallback(
@@ -135,6 +137,11 @@ export function preview(props: DatagridPreviewProps): ReactElement {
             preview
             styles={parseStyle(props.style)}
             valueForSort={useCallback(() => undefined, [])}
+            onSelect={selectActionProps.onSelect}
+            onSelectAll={selectActionProps.onSelectAll}
+            isSelected={selectActionProps.isSelected}
+            selectionStatus={selectionStatus}
+            selectionMethod={selectionMethod}
         />
     );
 }

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

@@ -2,7 +2,6 @@ import { createElement, ReactElement, useCallback, useEffect, useMemo, useRef, u
 import { ColumnsType, DatagridContainerProps } from "../typings/DatagridProps";
 import { FilterCondition } from "mendix/filters";
 import { and } from "mendix/filters/builders";
-
 import { Table, TableColumn } from "./components/Table";
 import {
     FilterFunction,
@@ -11,10 +10,12 @@ import {
     useFilterContext,
     useMultipleFiltering
 } from "@mendix/pluggable-widgets-commons/components/web";
-import { isAvailable } from "@mendix/pluggable-widgets-commons";
+import { isAvailable, useSelectionHelper } from "@mendix/pluggable-widgets-commons";
 import { extractFilters } from "./features/filters";
 import { useCellRenderer } from "./features/cell";
 import { getColumnAssociationProps, isSortable } from "./features/column";
+import { selectionSettings, useOnSelectProps } from "./features/selection";
+import "./ui/Datagrid.scss";
 
 export default function Datagrid(props: DatagridContainerProps): ReactElement {
     const id = useRef(`DataGrid${generateUUID()}`);
@@ -115,8 +116,14 @@ export default function Datagrid(props: DatagridContainerProps): ReactElement {
         [props.filterList]
     );
 
+    const selection = useSelectionHelper(props.itemSelection, props.datasource, props.onSelectionChange);
+    const selectActionProps = useOnSelectProps(selection);
+    const { selectionStatus, selectionMethod } = selectionSettings(props, selection);
+
     return (
         <Table
+            selectionStatus={selectionStatus}
+            selectionMethod={selectionMethod}
             cellRenderer={cellRenderer}
             className={props.class}
             columns={columns}
@@ -212,6 +219,9 @@ export default function Datagrid(props: DatagridContainerProps): ReactElement {
                 },
                 [props.columns]
             )}
+            onSelect={selectActionProps.onSelect}
+            onSelectAll={selectActionProps.onSelectAll}
+            isSelected={selectActionProps.isSelected}
         />
     );
 }

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

@@ -20,6 +20,27 @@
                     <caption>Refresh time (in seconds)</caption>
                     <description />
                 </property>
+                <property key="itemSelection" type="selection" dataSource="datasource">
+                    <caption>Selection</caption>
+                    <description />
+                    <selectionTypes>
+                        <selectionType name="None" />
+                        <selectionType name="Single" />
+                        <selectionType name="Multi" />
+                    </selectionTypes>
+                </property>
+                <property key="itemSelectionMethod" type="enumeration" defaultValue="checkbox">
+                    <caption>Selection method</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="checkbox">Checkbox</enumerationValue>
+                        <enumerationValue key="rowClick">Row click</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="showSelectAllToggle" type="boolean" defaultValue="true">
+                    <caption>Show (un)check all toggle</caption>
+                    <description>Show a checkbox in the grid header to check or uncheck multiple items.</description>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Columns">
                 <property key="columns" type="object" isList="true">
@@ -196,6 +217,10 @@
                     <caption>On click action</caption>
                     <description />
                 </property>
+                <property key="onSelectionChange" type="action" required="false">
+                    <caption>On selection change</caption>
+                    <description />
+                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Personalization">

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

@@ -97,6 +97,7 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
                             style={{ pointerEvents: "none" }}
                             type="checkbox"
                             tabIndex={-1}
+                            onChange={onChangeStub}
                         />
                         <label htmlFor={`${props.id}_checkbox_toggle_${index}`} style={{ pointerEvents: "none" }}>
                             {column.header}
@@ -141,3 +142,7 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
         </div>
     );
 }
+
+function onChangeStub(): void {
+    // Stub to prevent react warnings in unit tests
+}