refactor: rewrite dg rows renderer

Author: iobuhov

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

@@ -2,15 +2,15 @@ import classNames from "classnames";
 import { ObjectItem } from "mendix";
 import { ReactElement } from "react";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
-import { CellComponent, EventsController } from "../typings/CellComponent";
+import { EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
+import { Cell } from "./Cell";
 import { CheckboxCell } from "./CheckboxCell";
 import { SelectorCell } from "./SelectorCell";
 
-export interface RowProps<C extends GridColumn> {
+export interface RowProps {
     className?: string;
-    CellComponent: CellComponent<C>;
-    columns: C[];
+    columns: GridColumn[];
     item: ObjectItem;
     index: number;
     showSelectorCell?: boolean;
@@ -20,8 +20,8 @@ export interface RowProps<C extends GridColumn> {
     eventsController: EventsController;
 }
 
-export function Row<C extends GridColumn>(props: RowProps<C>): ReactElement {
-    const { CellComponent: Cell, selectActionHelper, totalRows, eventsController } = props;
+export function Row(props: RowProps): ReactElement {
+    const { selectActionHelper, totalRows, eventsController } = props;
     const selected = selectActionHelper.isSelected(props.item);
     const ariaSelected = selectActionHelper.selectionType === "None" ? undefined : selected;
     const borderTop = props.index === 0;

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

@@ -1,44 +1,35 @@
 import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context";
-import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { ObjectItem } from "mendix";
 import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
-import { SelectActionHelper } from "../helpers/SelectActionHelper";
-import { useColumnsStore } from "../model/hooks/injection-hooks";
-import { CellComponent, EventsController } from "../typings/CellComponent";
-import { GridColumn } from "../typings/GridColumn";
+import { useLegacyContext } from "../helpers/root-context";
+import { useColumnsStore, useDatagridConfig, useRowClass } from "../model/hooks/injection-hooks";
 import { Row } from "./Row";
 
 interface RowsRendererProps {
-    Cell: CellComponent<GridColumn>;
-    columnsHidable: boolean;
-    eventsController: EventsController;
-    focusController: FocusTargetController;
-    interactive: boolean;
-    preview: boolean;
-    rowClass?: (item: ObjectItem) => string;
     rows: ObjectItem[];
-    selectActionHelper: SelectActionHelper;
 }
 
-export const RowsRenderer = observer(function RowsRenderer(props: RowsRendererProps): ReactElement {
+export const RowsRenderer = observer(function RowsRenderer({ rows }: RowsRendererProps): ReactElement {
+    const config = useDatagridConfig();
     const { visibleColumns } = useColumnsStore();
+    const rowClass = useRowClass();
+    const { cellEventsController, focusController, selectActionHelper } = useLegacyContext();
     return (
-        <KeyNavProvider focusController={props.focusController}>
-            {props.rows.map((item, rowIndex) => {
+        <KeyNavProvider focusController={focusController}>
+            {rows.map((item, rowIndex) => {
                 return (
                     <Row
-                        totalRows={props.rows.length}
-                        clickable={props.interactive}
-                        selectActionHelper={props.selectActionHelper}
-                        eventsController={props.eventsController}
-                        CellComponent={props.Cell}
-                        className={props.rowClass?.(item)}
+                        totalRows={rows.length}
+                        clickable={config.isInteractive}
+                        selectActionHelper={selectActionHelper}
+                        eventsController={cellEventsController}
+                        className={rowClass.class.get(item)}
                         columns={visibleColumns}
                         index={rowIndex}
                         item={item}
                         key={`row_${item.id}`}
-                        showSelectorCell={props.columnsHidable}
+                        showSelectorCell={config.columnsHidable}
                     />
                 );
             })}

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

@@ -10,8 +10,7 @@ import { SelectAllBar } from "../features/select-all/SelectAllBar";
 import { SelectionProgressDialog } from "../features/select-all/SelectionProgressDialog";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { useBasicData } from "../model/hooks/injection-hooks";
-import { CellComponent, EventsController } from "../typings/CellComponent";
-import { GridColumn } from "../typings/GridColumn";
+import { EventsController } from "../typings/CellComponent";
 import { ExportWidget } from "./ExportWidget";
 import { Grid } from "./Grid";
 import { GridBody } from "./GridBody";
@@ -23,17 +22,15 @@ import { WidgetHeader } from "./WidgetHeader";
 import { WidgetRoot } from "./WidgetRoot";
 import { WidgetTopBar } from "./WidgetTopBar";
 
-export interface WidgetProps<C extends GridColumn, T extends ObjectItem = ObjectItem> {
-    CellComponent: CellComponent<C>;
+export interface WidgetProps {
     className: string;
     columnsDraggable: boolean;
     columnsFilterable: boolean;
     columnsHidable: boolean;
     columnsResizable: boolean;
     columnsSortable: boolean;
-    data: T[];
+    data: ObjectItem[];
     exporting: boolean;
-    filterRenderer: (renderWrapper: (children: ReactNode) => ReactElement, columnIndex: number) => ReactElement;
     headerContent?: ReactNode;
     headerTitle?: string;
     id: string;
@@ -43,7 +40,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     loadMoreButtonCaption?: string;
 
     processedRows: number;
-    rowClass?: (item: T) => string;
+
     styles?: CSSProperties;
     rowAction?: ListActionValue;
     isFirstLoad: boolean;
@@ -59,7 +56,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     focusController: FocusTargetController;
 }
 
-export const Widget = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElement => {
+export const Widget = observer(function Widget(props: WidgetProps) {
     const { className, exporting, numberOfItems, onExportCancel, selectActionHelper } = props;
     const basicData = useBasicData();
     const selectionEnabled = selectActionHelper.selectionType !== "None";
@@ -89,19 +86,8 @@ export const Widget = observer(<C extends GridColumn>(props: WidgetProps<C>): Re
     );
 });
 
-const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElement => {
-    const {
-        CellComponent,
-        columnsHidable,
-        data: rows,
-        headerContent,
-        headerTitle,
-        loadMoreButtonCaption,
-        showRefreshIndicator,
-        selectActionHelper
-    } = props;
-
-    const basicData = useBasicData();
+const Main = observer((props: WidgetProps): ReactElement => {
+    const { data: rows, headerContent, headerTitle, loadMoreButtonCaption, showRefreshIndicator } = props;
 
     return (
         <Fragment>
@@ -113,17 +99,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                     <SelectAllBar />
                     {showRefreshIndicator ? <RefreshIndicator /> : null}
                     <GridBody>
-                        <RowsRenderer
-                            preview={false}
-                            interactive={basicData.gridInteractive}
-                            Cell={CellComponent}
-                            columnsHidable={columnsHidable}
-                            rows={rows}
-                            rowClass={props.rowClass}
-                            selectActionHelper={selectActionHelper}
-                            focusController={props.focusController}
-                            eventsController={props.cellEventsController}
-                        />
+                        <RowsRenderer rows={rows} />
                         <EmptyPlaceholder />
                     </GridBody>
                 </Grid>

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

@@ -14,7 +14,7 @@ import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { GridBasicData } from "../../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../../helpers/state/GridPersonalizationStore";
 import { DatagridConfig } from "../configs/Datagrid.config";
-import { gridStyleAtom } from "../models/grid.model";
+import { gridStyleAtom, rowClassProvider } from "../models/grid.model";
 import { DatasourceParamsController } from "../services/DatasourceParamsController";
 import { DerivedLoaderController } from "../services/DerivedLoaderController";
 import { PaginationController } from "../services/PaginationController";
@@ -35,6 +35,7 @@ injected(emptyStateWidgetsAtom, CORE.mainGate, CORE.atoms.itemCount);
 injected(SelectionGate, CORE.mainGate);
 injected(createSelectionHelper, CORE.setupService, DG.selectionGate, CORE.config.optional);
 injected(gridStyleAtom, CORE.columnsStore, CORE.config);
+injected(rowClassProvider, CORE.mainGate);
 
 injected(
     SelectionCounterViewModel,
@@ -81,6 +82,8 @@ export class DatagridContainer extends Container {
         this.bind(DG.selectionGate).toInstance(SelectionGate).inTransientScope();
         // Selection helper
         this.bind(DG.selectionHelper).toInstance(createSelectionHelper).inSingletonScope();
+        // Row class provider
+        this.bind(DG.rowClass).toInstance(rowClassProvider).inTransientScope();
     }
 
     /**

packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts

@@ -16,3 +16,4 @@ export const [useVisibleColumnsCount] = createInjectionHooks(CORE.atoms.visibleC
 export const [useItemCount] = createInjectionHooks(CORE.atoms.itemCount);
 export const [useColumn] = createInjectionHooks(CORE.column);
 export const [useTexts] = createInjectionHooks(CORE.texts);
+export const [useRowClass] = createInjectionHooks(DG.rowClass);

packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/grid.model.spec.ts

@@ -0,0 +1,54 @@
+import { listExpression, obj } from "@mendix/widget-plugin-test-utils";
+import { configure, isObservable, observable } from "mobx";
+import { MainGateProps } from "../../../../typings/MainGateProps";
+import { rowClassProvider } from "../grid.model";
+
+describe("rowClassProvider", () => {
+    configure({
+        enforceActions: "never"
+    });
+
+    it("returns empty string when rowClass is not defined", () => {
+        const gate = observable({ props: {} as MainGateProps });
+        const atom = rowClassProvider(gate);
+
+        expect(atom.class.get(obj())).toBe("");
+    });
+
+    it("returns the class from rowClass expression", () => {
+        const gate = observable({
+            props: {
+                rowClass: listExpression(() => "custom-row-class")
+            } as MainGateProps
+        });
+        const atom = rowClassProvider(gate);
+
+        expect(atom.class.get(obj())).toBe("custom-row-class");
+    });
+
+    it("updates reactively when rowClass expression changes", () => {
+        const rowClassExpression = listExpression(() => "initial-class");
+        const gate = observable({
+            props: {
+                rowClass: rowClassExpression
+            } as MainGateProps
+        });
+        const atom = rowClassProvider(gate);
+
+        expect(atom.class.get(obj())).toBe("initial-class");
+
+        gate.props.rowClass = listExpression(() => "updated-class");
+        expect(atom.class.get(obj())).toBe("updated-class");
+    });
+
+    it("class property is not observable itself", () => {
+        const gate = observable({
+            props: {
+                rowClass: listExpression(() => "some-class")
+            } as MainGateProps
+        });
+
+        const atom = rowClassProvider(gate);
+        expect(isObservable(atom.class)).toBe(false);
+    });
+});

packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts

@@ -1,6 +1,8 @@
-import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
-import { computed } from "mobx";
+import { ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
+import { ObjectItem } from "mendix";
+import { computed, observable } from "mobx";
 import { CSSProperties } from "react";
+import { MainGateProps } from "../../../typings/MainGateProps";
 import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { DatagridConfig } from "../configs/Datagrid.config";
 
@@ -38,3 +40,25 @@ function gridStyle(
         gridTemplateColumns: sizes.join(" ")
     };
 }
+
+export interface RowClassProvider {
+    class: {
+        get(item: ObjectItem): string;
+    };
+}
+
+/** @injectable */
+export function rowClassProvider(gate: DerivedPropsGate<MainGateProps>): RowClassProvider {
+    const atom = {
+        get class() {
+            return {
+                get(item: ObjectItem): string {
+                    if (!gate.props.rowClass) return "";
+                    return gate.props.rowClass.get(item).value ?? "";
+                }
+            };
+        }
+    };
+
+    return observable(atom, { class: computed });
+}

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

@@ -29,6 +29,7 @@ import { GridPersonalizationStore } from "../helpers/state/GridPersonalizationSt
 import { DatasourceParamsController } from "../model/services/DatasourceParamsController";
 import { GridColumn } from "../typings/GridColumn";
 import { DatagridConfig } from "./configs/Datagrid.config";
+import { RowClassProvider } from "./models/grid.model";
 import { DatagridSetupService } from "./services/DatagridSetup.service";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./services/DerivedLoaderController";
 import { PaginationConfig, PaginationController } from "./services/PaginationController";
@@ -105,7 +106,9 @@ export const DG_TOKENS = {
     selectionGate: token<DerivedPropsGate<SelectionDynamicProps>>("@gate:GateForSelectionHelper"),
     selectionHelper: token<SelectionHelperService | undefined>("SelectionHelperService"),
 
-    gridColumnsStyle: token<ComputedAtom<CSSProperties>>("@computed:GridColumnsStyle")
+    gridColumnsStyle: token<ComputedAtom<CSSProperties>>("@computed:GridColumnsStyle"),
+
+    rowClass: token<RowClassProvider>("@store:RowClassProvider")
 };
 
 /** "Select all" module tokens. */

packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts

@@ -29,4 +29,5 @@ export type MainGateProps = Pick<
     | "showNumberOfRows"
     | "showPagingButtons"
     | "storeFiltersInPersonalization"
+    | "rowClass"
 >;