refactor: migrate event handlers to container

Author: iobuhov

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

@@ -1,73 +1,22 @@
-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,
-    useDatagridConfig,
-    useExportProgressService,
-    useMainGate,
-    useSelectActions,
-    useSelectionHelper
-} from "./model/hooks/injection-hooks";
+import { useColumnsStore, useExportProgressService } 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);
 
-    const selectionHelper = useSelectionHelper();
+    useDataGridJSActions();
 
-    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>
-    );
+    return <Widget onExportCancel={abortExport} />;
 });
 
 DatagridRoot.displayName = "DatagridComponent";

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

@@ -1,24 +1,34 @@
 import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context";
 import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
-import { useLegacyContext } from "../helpers/root-context";
-import { useColumnsStore, useDatagridConfig, useRowClass, useRows } from "../model/hooks/injection-hooks";
+import {
+    useCellEventsHandler,
+    useColumnsStore,
+    useDatagridConfig,
+    useFocusService,
+    useRowClass,
+    useRows,
+    useSelectActions
+} 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, focusController, selectActionHelper } = useLegacyContext();
+    const cellEventsController = useCellEventsHandler();
+    const focusService = useFocusService();
+    const selectActions = useSelectActions();
+
     return (
-        <KeyNavProvider focusController={focusController}>
+        <KeyNavProvider focusController={focusService}>
             {rows.map((item, rowIndex) => {
                 return (
                     <Row
                         totalRows={rows.length}
                         clickable={config.isInteractive}
-                        selectActions={selectActionHelper}
+                        selectActions={selectActions}
                         eventsController={cellEventsController}
                         className={rowClass.class.get(item)}
                         columns={visibleColumns}

packages/pluggableWidgets/datagrid-web/src/features/row-interaction/CellEventsController.ts

@@ -4,13 +4,19 @@ 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 } from "@mendix/widget-plugin-grid/selection";
+import {
+    SelectAdjacentFx,
+    SelectAllFx,
+    SelectFx,
+    SelectionMode,
+    SelectionType
+} 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 } from "./base";
+import { CellContext, SelectionMethod } from "./base";
 import { createFocusTargetHandlers } from "./focus-target-handlers";
 import { createSelectHandlers } from "./select-handlers";
 
@@ -45,29 +51,34 @@ export class CellEventsController {
     }
 }
 
-export function useCellEventsController(
-    selectHelper: SelectActionsService,
+export function createCellEventsController(
+    config: {
+        selectionType: SelectionType;
+        selectionMethod: SelectionMethod;
+        selectionMode: SelectionMode;
+    },
+    selectActions: SelectActionsService,
+    focusController: FocusTargetController,
     clickHelper: ClickActionHelper,
-    focusController: FocusTargetController
+    pageSize: ComputedAtom<number>
 ): CellEventsController {
-    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
-        });
+    // 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
+    });
 
-        return new CellEventsController(
-            cellContextFactory,
-            selectHelper.onSelect,
-            selectHelper.onSelectAll,
-            selectHelper.onSelectAdjacent,
-            clickHelper.onExecuteAction,
-            focusController.dispatch
-        );
-    }, [selectHelper, clickHelper, focusController]);
+    return new CellEventsController(
+        cellContextFactory,
+        selectActions.select,
+        selectActions.selectPage,
+        selectActions.selectAdjacent,
+        clickHelper.onExecuteAction,
+        focusController.dispatch
+    );
 }

packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts

@@ -1,9 +1,9 @@
 import { useOnClearSelectionEvent, useOnResetFiltersEvent } from "@mendix/widget-plugin-external-events/hooks";
-import { SelectActionsService } from "@mendix/widget-plugin-grid/main";
-import { useDatagridConfig } from "../model/hooks/injection-hooks";
+import { useDatagridConfig, useSelectActions } from "../model/hooks/injection-hooks";
 
-export function useDataGridJSActions(selectActions: SelectActionsService): void {
+export function useDataGridJSActions(): void {
     const info = useDatagridConfig();
+    const selectActions = useSelectActions();
     useOnResetFiltersEvent(info.name, info.filtersChannelName);
     useOnClearSelectionEvent({
         widgetName: info.name,

packages/pluggableWidgets/datagrid-web/src/helpers/useDataGridJSActions.ts

@@ -18,6 +18,7 @@ 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";
@@ -38,7 +39,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.progressService);
+injected(WidgetRootViewModel, CORE.mainGate, CORE.config, DG.exportProgressService, SA_TOKENS.selectionDialogVM);
 
 // loader
 injected(DerivedLoaderController, DG.query, DG.exportProgressService, CORE.columnsStore, DG.loaderConfig);
@@ -66,6 +67,14 @@ 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(
@@ -125,6 +134,8 @@ 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();
     }
@@ -190,6 +201,9 @@ 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;

packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.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.columnCount, CORE.config);
+injected(columnCount, CORE.atoms.visibleColumnsCount, CORE.config);
 
 // selection
 injected(

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

@@ -20,3 +20,7 @@ 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);

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

@@ -26,6 +26,7 @@ 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";
@@ -129,7 +130,8 @@ 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")
+    checkboxEventsHandler: token<CheckboxEventsController>("@service:CheckboxEventsController"),
+    cellEventsHandler: token<CellEventsController>("@service:CellEventsController")
 };
 
 /** "Select all" module tokens. */