refactor: migrate to brandi

Author: iobuhov

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

@@ -1,71 +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 { useSelectActionHelper } from "./helpers/SelectActionHelper";
 import { useDataGridJSActions } from "./helpers/useDataGridJSActions";
-import {
-    useColumnsStore,
-    useExportProgressService,
-    useMainGate,
-    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 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 = useSelectActionHelper(props, selectionHelper);
-
-    const clickActionHelper = useClickActionHelper({
-        onClickTrigger: props.onClickTrigger,
-        onClick: props.onClick
-    });
-
-    useDataGridJSActions(selectActionHelper);
-
-    const visibleColumnsCount = selectActionHelper.showCheckboxColumn
-        ? 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/CheckboxCell.tsx

@@ -1,8 +1,12 @@
 import { useFocusTargetProps } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetProps";
 import { ObjectItem } from "mendix";
-import { FocusEvent, ReactElement } from "react";
-import { useLegacyContext } from "../helpers/root-context";
-import { useBasicData } from "../model/hooks/injection-hooks";
+import { FocusEvent, ReactElement, useMemo } from "react";
+import {
+    useCheckboxEventsHandler,
+    useDatagridConfig,
+    useSelectActions,
+    useTexts
+} from "../model/hooks/injection-hooks";
 import { CellElement, CellElementProps } from "./CellElement";
 
 export type CheckboxCellProps = CellElementProps & {
@@ -12,25 +16,27 @@ export type CheckboxCellProps = CellElementProps & {
 };
 
 export function CheckboxCell({ item, rowIndex, lastRow, ...rest }: CheckboxCellProps): ReactElement {
+    const config = useDatagridConfig();
+    const selectActions = useSelectActions();
+    const checkboxEventsHandler = useCheckboxEventsHandler();
+    const { selectRowLabel } = useTexts();
     const keyNavProps = useFocusTargetProps<HTMLInputElement>({
         columnIndex: 0,
         rowIndex
     });
 
-    const { selectActionHelper, checkboxEventsController } = useLegacyContext();
-    const { selectRowLabel, gridInteractive } = useBasicData();
     return (
-        <CellElement {...rest} clickable={gridInteractive} className="widget-datagrid-col-select" tabIndex={-1}>
+        <CellElement {...rest} clickable={config.isInteractive} className="widget-datagrid-col-select" tabIndex={-1}>
             <input
-                checked={selectActionHelper.isSelected(item)}
+                checked={selectActions.isSelected(item)}
                 type="checkbox"
                 tabIndex={keyNavProps.tabIndex}
                 data-position={keyNavProps["data-position"]}
                 onChange={stub}
                 onFocus={lastRow ? scrollParentOnFocus : undefined}
                 ref={keyNavProps.ref}
                 aria-label={`${selectRowLabel ?? "Select row"} ${rowIndex + 1}`}
-                {...checkboxEventsController.getProps(item)}
+                {...useMemo(() => checkboxEventsHandler.getProps(item), [item, checkboxEventsHandler])}
             />
         </CellElement>
     );

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

@@ -1,41 +1,38 @@
+import { If } from "@mendix/widget-plugin-component-kit/If";
 import { ThreeStateCheckBox } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
-import { SelectionStatus } from "@mendix/widget-plugin-grid/selection";
+import { observer } from "mobx-react-lite";
 import { Fragment, ReactElement, ReactNode } from "react";
-import { useLegacyContext } from "../helpers/root-context";
-import { useBasicData } from "../model/hooks/injection-hooks";
+import { useDatagridConfig, useSelectActions, useSelectionHelper, useTexts } from "../model/hooks/injection-hooks";
 
 export function CheckboxColumnHeader(): ReactElement {
-    const { selectActionHelper, selectionHelper } = useLegacyContext();
-    const { showCheckboxColumn, showSelectAllToggle, onSelectAll } = selectActionHelper;
-    const { selectAllRowsLabel } = useBasicData();
+    const { selectAllCheckboxEnabled, checkboxColumnEnabled } = useDatagridConfig();
 
-    if (showCheckboxColumn === false) {
+    if (checkboxColumnEnabled === false) {
         return <Fragment />;
     }
 
     return (
         <div className="th widget-datagrid-col-select" role="columnheader">
-            {showSelectAllToggle && (
-                <Checkbox
-                    status={selectionHelper?.type === "Multi" ? selectionHelper.selectionStatus : "none"}
-                    onChange={onSelectAll}
-                    aria-label={selectAllRowsLabel}
-                />
-            )}
+            <If condition={selectAllCheckboxEnabled}>
+                <Checkbox />
+            </If>
         </div>
     );
 }
 
-function Checkbox(props: { status: SelectionStatus; onChange: () => void; "aria-label"?: string }): ReactNode {
-    if (props.status === "unknown") {
-        console.error("Data grid 2: don't know how to render column checkbox with selectionStatus=unknown");
+const Checkbox = observer(function Checkbox(): ReactNode {
+    const { selectAllRowsLabel } = useTexts();
+    const selectionHelper = useSelectionHelper();
+    const selectActions = useSelectActions();
+
+    if (!selectionHelper || selectionHelper.type !== "Multi") {
         return null;
     }
     return (
         <ThreeStateCheckBox
-            value={props.status}
-            onChange={props.onChange}
-            aria-label={props["aria-label"] ?? "Select all rows"}
+            value={selectionHelper.selectionStatus}
+            onChange={() => selectActions.selectPage()}
+            aria-label={selectAllRowsLabel || "Select all rows"}
         />
     );
-}
+});

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

@@ -1,7 +1,7 @@
+import { SelectActionsService } from "@mendix/widget-plugin-grid/main";
 import classNames from "classnames";
 import { ObjectItem } from "mendix";
 import { ReactElement } from "react";
-import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
 import { CheckboxCell } from "./CheckboxCell";
@@ -14,17 +14,17 @@ export interface RowProps {
     item: ObjectItem;
     index: number;
     showSelectorCell?: boolean;
-    selectActionHelper: SelectActionHelper;
+    selectActions: SelectActionsService;
     totalRows: number;
     clickable: boolean;
     eventsController: EventsController;
     checkboxColumnEnabled: boolean;
 }
 
 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 { selectActions, totalRows, eventsController } = props;
+    const selected = selectActions.isSelected(props.item);
+    const ariaSelected = selectActions.selectionType === "None" ? undefined : selected;
     const borderTop = props.index === 0;
 
     return (

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}
-                        selectActionHelper={selectActionHelper}
+                        selectActions={selectActions}
                         eventsController={cellEventsController}
                         className={rowClass.class.get(item)}
                         columns={visibleColumns}

packages/pluggableWidgets/datagrid-web/src/components/loader/RowSkeletonLoader.tsx

@@ -1,5 +1,5 @@
 import { Fragment, ReactElement } from "react";
-import { useLegacyContext } from "../../helpers/root-context";
+import { useDatagridConfig } from "../../model/hooks/injection-hooks";
 import { CellElement } from "../CellElement";
 import { SelectorCell } from "../SelectorCell";
 import { SkeletonLoader } from "./SkeletonLoader";
@@ -17,14 +17,14 @@ export function RowSkeletonLoader({
     pageSize,
     useBorderTop = true
 }: RowSkeletonLoaderProps): ReactElement {
-    const { selectActionHelper } = useLegacyContext();
+    const { checkboxColumnEnabled } = useDatagridConfig();
     return (
         <Fragment>
             {Array.from({ length: pageSize }).map((_, i) => {
                 const borderTop = useBorderTop && i === 0;
                 return (
                     <div className="tr" role="row" key={i}>
-                        {selectActionHelper.showCheckboxColumn && (
+                        {checkboxColumnEnabled && (
                             <CellElement borderTop={borderTop} className="widget-datagrid-col-select" tabIndex={-1}>
                                 <input type="checkbox" />
                             </CellElement>

packages/pluggableWidgets/datagrid-web/src/features/base/WidgetRoot.viewModel.ts

@@ -2,7 +2,7 @@ import { TaskProgressService } from "@mendix/widget-plugin-grid/main";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { makeAutoObservable } from "mobx";
 import { createRef, CSSProperties } from "react";
-import { ItemSelectionMethodEnum } from "../../../typings/DatagridProps";
+import { type SelectionMethod } from "../row-interaction/base";
 
 export class WidgetRootViewModel {
     ref = createRef<HTMLDivElement>();
@@ -12,9 +12,9 @@ export class WidgetRootViewModel {
             style?: CSSProperties;
             class?: string;
         }>,
-        private config: { selectionEnabled: boolean; selectionMethod: ItemSelectionMethodEnum },
+        private config: { selectionEnabled: boolean; selectionMethod: SelectionMethod },
         private exportTask: TaskProgressService,
-        private selectAllTask: TaskProgressService
+        private selectAllVM: { isOpen: boolean }
     ) {
         makeAutoObservable(this);
     }
@@ -28,14 +28,14 @@ export class WidgetRootViewModel {
     }
 
     get selecting(): boolean {
-        return this.selectAllTask.inProgress;
+        return this.selectAllVM.isOpen;
     }
 
     get selectable(): boolean {
         return this.config.selectionEnabled;
     }
 
-    get selectionMethod(): ItemSelectionMethodEnum {
+    get selectionMethod(): SelectionMethod {
         return this.config.selectionMethod;
     }