refactor: migrate event controllers from DI to React Context for simplified architecture

iobuhov · yordan-st · commit 54f32d045434 · 2025-11-28T11:24:38.000+01:00
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -1,22 +1,73 @@
+import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
+import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
+import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { ContainerProvider } from "brandi-react";
 import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
 import { DatagridContainerProps } from "../typings/DatagridProps";
 import { Widget } from "./components/Widget";
 import { useDataExport } from "./features/data-export/useDataExport";
+import { useCellEventsController } from "./features/row-interaction/CellEventsController";
+import { useCheckboxEventsController } from "./features/row-interaction/CheckboxEventsController";
+import { LegacyContext } from "./helpers/root-context";
 import { useDataGridJSActions } from "./helpers/useDataGridJSActions";
-import { useColumnsStore, useExportProgressService } from "./model/hooks/injection-hooks";
+import {
+    useColumnsStore,
+    useDatagridConfig,
+    useExportProgressService,
+    useMainGate,
+    useSelectActions,
+    useSelectionHelper
+} from "./model/hooks/injection-hooks";
 import { useDatagridContainer } from "./model/hooks/useDatagridContainer";
 
 const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
+    const config = useDatagridConfig();
+    const gate = useMainGate();
     const columnsStore = useColumnsStore();
     const exportProgress = useExportProgressService();
+    const items = gate.props.datasource.items ?? [];
 
     const [abortExport] = useDataExport(props, columnsStore, exportProgress);
 
-    useDataGridJSActions();
+    const selectionHelper = useSelectionHelper();
 
-    return <Widget onExportCancel={abortExport} />;
+    const selectActionHelper = useSelectActions();
+
+    const clickActionHelper = useClickActionHelper({
+        onClickTrigger: props.onClickTrigger,
+        onClick: props.onClick
+    });
+
+    useDataGridJSActions(selectActionHelper);
+
+    const visibleColumnsCount = config.checkboxColumnEnabled
+        ? columnsStore.visibleColumns.length + 1
+        : columnsStore.visibleColumns.length;
+
+    const focusController = useFocusTargetController({
+        rows: items.length,
+        columns: visibleColumnsCount,
+        pageSize: props.pageSize
+    });
+
+    const cellEventsController = useCellEventsController(selectActionHelper, clickActionHelper, focusController);
+
+    const checkboxEventsController = useCheckboxEventsController(selectActionHelper, focusController);
+
+    return (
+        <LegacyContext.Provider
+            value={useConst({
+                selectionHelper,
+                selectActionHelper,
+                cellEventsController,
+                checkboxEventsController,
+                focusController
+            })}
+        >
+            <Widget onExportCancel={abortExport} />
+        </LegacyContext.Provider>
+    );
 });
 
 DatagridRoot.displayName = "DatagridComponent";
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
@@ -1,34 +1,24 @@
 import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context";
 import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
-import {
-    useCellEventsHandler,
-    useColumnsStore,
-    useDatagridConfig,
-    useFocusService,
-    useRowClass,
-    useRows,
-    useSelectActions
-} from "../model/hooks/injection-hooks";
+import { useLegacyContext } from "../helpers/root-context";
+import { useColumnsStore, useDatagridConfig, useRowClass, useRows } from "../model/hooks/injection-hooks";
 import { Row } from "./Row";
 
 export const RowsRenderer = observer(function RowsRenderer(): ReactElement {
     const rows = useRows().get();
     const config = useDatagridConfig();
     const { visibleColumns } = useColumnsStore();
     const rowClass = useRowClass();
-    const cellEventsController = useCellEventsHandler();
-    const focusService = useFocusService();
-    const selectActions = useSelectActions();
-
+    const { cellEventsController, focusController, selectActionHelper } = useLegacyContext();
     return (
-        <KeyNavProvider focusController={focusService}>
+        <KeyNavProvider focusController={focusController}>
             {rows.map((item, rowIndex) => {
                 return (
                     <Row
                         totalRows={rows.length}
                         clickable={config.isInteractive}
-                        selectActions={selectActions}
+                        selectActions={selectActionHelper}
                         eventsController={cellEventsController}
                         className={rowClass.class.get(item)}
                         columns={visibleColumns}
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/CellEventsController.ts b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/CellEventsController.ts
@@ -4,19 +4,13 @@ import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switc
 import { ClickActionHelper, ExecuteActionFx } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { FocusTargetFx } from "@mendix/widget-plugin-grid/keyboard-navigation/base";
-import {
-    SelectAdjacentFx,
-    SelectAllFx,
-    SelectFx,
-    SelectionMode,
-    SelectionType
-} from "@mendix/widget-plugin-grid/selection";
+import { SelectAdjacentFx, SelectAllFx, SelectFx } from "@mendix/widget-plugin-grid/selection";
 import { ObjectItem } from "mendix";
+import { useMemo } from "react";
 
 import { SelectActionsService } from "@mendix/widget-plugin-grid/main";
-import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
 import { createActionHandlers } from "./action-handlers";
-import { CellContext, SelectionMethod } from "./base";
+import { CellContext } from "./base";
 import { createFocusTargetHandlers } from "./focus-target-handlers";
 import { createSelectHandlers } from "./select-handlers";
 
@@ -51,34 +45,29 @@ export class CellEventsController {
     }
 }
 
-export function createCellEventsController(
-    config: {
-        selectionType: SelectionType;
-        selectionMethod: SelectionMethod;
-        selectionMode: SelectionMode;
-    },
-    selectActions: SelectActionsService,
-    focusController: FocusTargetController,
+export function useCellEventsController(
+    selectHelper: SelectActionsService,
     clickHelper: ClickActionHelper,
-    pageSize: ComputedAtom<number>
+    focusController: FocusTargetController
 ): CellEventsController {
-    // Placeholder function, actual implementation will depend on the specific context and services available.
-    const cellContextFactory = (item: ObjectItem): CellContext => ({
-        type: "cell",
-        item,
-        pageSize: pageSize.get(),
-        selectionType: config.selectionType,
-        selectionMethod: config.selectionMethod,
-        selectionMode: config.selectionMode,
-        clickTrigger: clickHelper.clickTrigger
-    });
+    const pageSize = 10;
+    return useMemo(() => {
+        const cellContextFactory = (item: ObjectItem): CellContext => ({
+            item,
+            pageSize: selectHelper.pageSize,
+            selectionType: selectHelper.selectionType,
+            selectionMethod: selectHelper.selectionMethod,
+            selectionMode: selectHelper.selectionMode,
+            clickTrigger: clickHelper.clickTrigger
+        });
 
-    return new CellEventsController(
-        cellContextFactory,
-        selectActions.select,
-        selectActions.selectPage,
-        selectActions.selectAdjacent,
-        clickHelper.onExecuteAction,
-        focusController.dispatch
-    );
+        return new CellEventsController(
+            cellContextFactory,
+            selectHelper.onSelect,
+            selectHelper.onSelectAll,
+            selectHelper.onSelectAdjacent,
+            clickHelper.onExecuteAction,
+            focusController.dispatch
+        );
+    }, [selectHelper, clickHelper, focusController]);
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts
@@ -0,0 +1,23 @@
+import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
+import { SelectionHelperService } from "@mendix/widget-plugin-grid/main";
+import { createContext, useContext } from "react";
+import { SelectActionHelper } from "../model/services/GridSelectActionsProvider.service";
+import { EventsController } from "../typings/CellComponent";
+
+export interface LegacyRootScope {
+    selectionHelper: SelectionHelperService | undefined;
+    selectActionHelper: SelectActionHelper;
+    cellEventsController: EventsController;
+    checkboxEventsController: EventsController;
+    focusController: FocusTargetController;
+}
+
+export const LegacyContext = createContext<LegacyRootScope | null>(null);
+
+export const useLegacyContext = (): LegacyRootScope => {
+    const contextValue = useContext(LegacyContext);
+    if (!contextValue) {
+        throw new Error("useDatagridRootScope must be used within a root context provider");
+    }
+    return contextValue;
+};
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/useDataGridJSActions.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/useDataGridJSActions.ts
@@ -1,9 +1,9 @@
 import { useOnClearSelectionEvent, useOnResetFiltersEvent } from "@mendix/widget-plugin-external-events/hooks";
-import { useDatagridConfig, useSelectActions } from "../model/hooks/injection-hooks";
+import { SelectActionsService } from "@mendix/widget-plugin-grid/main";
+import { useDatagridConfig } from "../model/hooks/injection-hooks";
 
-export function useDataGridJSActions(): void {
+export function useDataGridJSActions(selectActions: SelectActionsService): void {
     const info = useDatagridConfig();
-    const selectActions = useSelectActions();
     useOnResetFiltersEvent(info.name, info.filtersChannelName);
     useOnClearSelectionEvent({
         widgetName: info.name,
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
@@ -18,7 +18,6 @@ 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 { createCellEventsController } from "../../features/row-interaction/CellEventsController";
 import { creteCheckboxEventsController } from "../../features/row-interaction/CheckboxEventsController";
 import { SelectAllModule } from "../../features/select-all/SelectAllModule.container";
 import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
@@ -39,7 +38,7 @@ injected(DatasourceParamsController, CORE.setupService, DG.query, DG.combinedFil
 injected(DatasourceService, CORE.setupService, DG.queryGate, DG.refreshInterval.optional);
 injected(PaginationController, CORE.setupService, DG.paginationConfig, DG.query);
 injected(GridBasicData, CORE.mainGate);
-injected(WidgetRootViewModel, CORE.mainGate, CORE.config, DG.exportProgressService, SA_TOKENS.selectionDialogVM);
+injected(WidgetRootViewModel, CORE.mainGate, CORE.config, DG.exportProgressService, SA_TOKENS.progressService);
 
 // loader
 injected(DerivedLoaderController, DG.query, DG.exportProgressService, CORE.columnsStore, DG.loaderConfig);
@@ -67,14 +66,6 @@ injected(createFocusController, CORE.setupService, DG.virtualLayout);
 injected(creteCheckboxEventsController, CORE.config, DG.selectActions, DG.focusService, CORE.atoms.pageSize);
 injected(layoutAtom, CORE.atoms.itemCount, CORE.atoms.columnCount, CORE.atoms.pageSize);
 injected(createClickActionHelper, CORE.setupService, CORE.mainGate);
-injected(
-    createCellEventsController,
-    CORE.config,
-    DG.selectActions,
-    DG.focusService,
-    DG.clickActionHelper,
-    CORE.atoms.pageSize
-);
 
 // selection counter
 injected(
@@ -134,8 +125,6 @@ export class DatagridContainer extends Container {
         this.bind(DG.focusService).toInstance(createFocusController).inSingletonScope();
         // Checkbox events service
         this.bind(DG.checkboxEventsHandler).toInstance(creteCheckboxEventsController).inSingletonScope();
-        // Cell events service
-        this.bind(DG.cellEventsHandler).toInstance(createCellEventsController).inSingletonScope();
         // Click action helper
         this.bind(DG.clickActionHelper).toInstance(createClickActionHelper).inSingletonScope();
     }
@@ -201,9 +190,6 @@ export class DatagridContainer extends Container {
         // Bind selection counter position
         this.bind(DG.selectionCounterCfg).toConstant({ position: props.selectionCounterPosition });
 
-        // Bind selection type
-        this.bind(DG.selectionType).toConstant(config.selectionType);
-
         this.postInit(props, config);
 
         return this;
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
@@ -32,7 +32,7 @@ injected(visibleColumnsCountAtom, CORE.columnsStore);
 injected(isAllItemsPresentAtom, CORE.atoms.offset, CORE.atoms.hasMoreItems);
 injected(rowsAtom, CORE.mainGate);
 injected(pageSizeAtom, CORE.pageSizeStore);
-injected(columnCount, CORE.atoms.visibleColumnsCount, CORE.config);
+injected(columnCount, CORE.atoms.columnCount, CORE.config);
 
 // selection
 injected(
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
@@ -20,7 +20,3 @@ export const [useRowClass] = createInjectionHooks(DG.rowClass);
 export const [useDatagridRootVM] = createInjectionHooks(DG.datagridRootVM);
 export const [useRows] = createInjectionHooks(CORE.rows);
 export const [useSelectActions] = createInjectionHooks(DG.selectActions);
-export const [useClickActionHelper] = createInjectionHooks(DG.clickActionHelper);
-export const [useFocusService] = createInjectionHooks(DG.focusService);
-export const [useCheckboxEventsHandler] = createInjectionHooks(DG.checkboxEventsHandler);
-export const [useCellEventsHandler] = createInjectionHooks(DG.cellEventsHandler);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
@@ -26,7 +26,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 { CellEventsController } from "../features/row-interaction/CellEventsController";
 import { CheckboxEventsController } from "../features/row-interaction/CheckboxEventsController";
 import { SelectAllBarViewModel } from "../features/select-all/SelectAllBar.viewModel";
 import { SelectionProgressDialogViewModel } from "../features/select-all/SelectionProgressDialog.viewModel";
@@ -130,8 +129,7 @@ export const DG_TOKENS = {
     virtualLayout: token<ComputedAtom<VirtualGridLayout>>("@computed:virtualLayout"),
     clickActionHelper: token<ClickActionHelper>("@service:ClickActionHelper"),
     focusService: token<FocusTargetController>("@service:FocusTargetController"),
-    checkboxEventsHandler: token<CheckboxEventsController>("@service:CheckboxEventsController"),
-    cellEventsHandler: token<CellEventsController>("@service:CellEventsController")
+    checkboxEventsHandler: token<CheckboxEventsController>("@service:CheckboxEventsController")
 };
 
 /** "Select all" module tokens. */
diff --git a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
@@ -2,6 +2,7 @@ import { dynamic, list, listAttribute, listExpression } from "@mendix/widget-plu
 import { ColumnsType, DatagridContainerProps } from "../../typings/DatagridProps";
 import { ColumnStore } from "../helpers/state/column/ColumnStore";
 import { IColumnParentStore } from "../helpers/state/ColumnGroupStore";
+import { SelectActionHelper } from "../model/services/GridSelectActionsProvider.service";
 import { ColumnId, GridColumn } from "../typings/GridColumn";
 
 export const column = (header = "Test", patch?: (col: ColumnsType) => void): ColumnsType => {
diff --git a/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts b/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts
@@ -6,7 +6,7 @@ import { SelectAdjacentFx, SelectAllFx, SelectFx, SelectionType, WidgetSelection
 export class SelectActionHandler {
     constructor(
         private selection: WidgetSelectionProperty,
-        protected selectionHelper: SelectionHelperService | undefined
+        protected selectionHelper: SelectionHelperService
     ) {}
 
     get selectionType(): SelectionType {
