Skip to content

Commit 6b44437

Browse files
iobuhoviobuhov
committed
refactor: migrate event handlers to container
1 parent 7d5fb4c commit 6b44437

File tree

14 files changed

+120
-150
lines changed

14 files changed

+120
-150
lines changed

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

Lines changed: 3 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,22 @@
1-
import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
2-
import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
3-
import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
41
import { ContainerProvider } from "brandi-react";
52
import { observer } from "mobx-react-lite";
63
import { ReactElement } from "react";
74
import { DatagridContainerProps } from "../typings/DatagridProps";
85
import { Widget } from "./components/Widget";
96
import { useDataExport } from "./features/data-export/useDataExport";
10-
import { useCellEventsController } from "./features/row-interaction/CellEventsController";
11-
import { useCheckboxEventsController } from "./features/row-interaction/CheckboxEventsController";
12-
import { LegacyContext } from "./helpers/root-context";
137
import { useDataGridJSActions } from "./helpers/useDataGridJSActions";
14-
import {
15-
useColumnsStore,
16-
useDatagridConfig,
17-
useExportProgressService,
18-
useMainGate,
19-
useSelectActions,
20-
useSelectionHelper
21-
} from "./model/hooks/injection-hooks";
8+
import { useColumnsStore, useExportProgressService } from "./model/hooks/injection-hooks";
229
import { useDatagridContainer } from "./model/hooks/useDatagridContainer";
2310

2411
const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
25-
const config = useDatagridConfig();
26-
const gate = useMainGate();
2712
const columnsStore = useColumnsStore();
2813
const exportProgress = useExportProgressService();
29-
const items = gate.props.datasource.items ?? [];
3014

3115
const [abortExport] = useDataExport(props, columnsStore, exportProgress);
3216

33-
const selectionHelper = useSelectionHelper();
17+
useDataGridJSActions();
3418

35-
const selectActionHelper = useSelectActions();
36-
37-
const clickActionHelper = useClickActionHelper({
38-
onClickTrigger: props.onClickTrigger,
39-
onClick: props.onClick
40-
});
41-
42-
useDataGridJSActions(selectActionHelper);
43-
44-
const visibleColumnsCount = config.checkboxColumnEnabled
45-
? columnsStore.visibleColumns.length + 1
46-
: columnsStore.visibleColumns.length;
47-
48-
const focusController = useFocusTargetController({
49-
rows: items.length,
50-
columns: visibleColumnsCount,
51-
pageSize: props.pageSize
52-
});
53-
54-
const cellEventsController = useCellEventsController(selectActionHelper, clickActionHelper, focusController);
55-
56-
const checkboxEventsController = useCheckboxEventsController(selectActionHelper, focusController);
57-
58-
return (
59-
<LegacyContext.Provider
60-
value={useConst({
61-
selectionHelper,
62-
selectActionHelper,
63-
cellEventsController,
64-
checkboxEventsController,
65-
focusController
66-
})}
67-
>
68-
<Widget onExportCancel={abortExport} />
69-
</LegacyContext.Provider>
70-
);
19+
return <Widget onExportCancel={abortExport} />;
7120
});
7221

7322
DatagridRoot.displayName = "DatagridComponent";

‎packages/pluggableWidgets/datagrid-web/src/components/CheckboxCell.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import { useFocusTargetProps } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetProps";
22
import { ObjectItem } from "mendix";
3-
import { FocusEvent, ReactElement } from "react";
4-
import { useLegacyContext } from "../helpers/root-context";
5-
import { useBasicData } from "../model/hooks/injection-hooks";
3+
import { FocusEvent, ReactElement, useMemo } from "react";
4+
import {
5+
useCheckboxEventsHandler,
6+
useDatagridConfig,
7+
useSelectActions,
8+
useTexts
9+
} from "../model/hooks/injection-hooks";
610
import { CellElement, CellElementProps } from "./CellElement";
711

812
export type CheckboxCellProps = CellElementProps & {
@@ -12,25 +16,27 @@ export type CheckboxCellProps = CellElementProps & {
1216
};
1317

1418
export function CheckboxCell({ item, rowIndex, lastRow, ...rest }: CheckboxCellProps): ReactElement {
19+
const config = useDatagridConfig();
20+
const selectActions = useSelectActions();
21+
const checkboxEventsHandler = useCheckboxEventsHandler();
22+
const { selectRowLabel } = useTexts();
1523
const keyNavProps = useFocusTargetProps<HTMLInputElement>({
1624
columnIndex: 0,
1725
rowIndex
1826
});
1927

20-
const { selectActionHelper, checkboxEventsController } = useLegacyContext();
21-
const { selectRowLabel, gridInteractive } = useBasicData();
2228
return (
23-
<CellElement {...rest} clickable={gridInteractive} className="widget-datagrid-col-select" tabIndex={-1}>
29+
<CellElement {...rest} clickable={config.isInteractive} className="widget-datagrid-col-select" tabIndex={-1}>
2430
<input
25-
checked={selectActionHelper.isSelected(item)}
31+
checked={selectActions.isSelected(item)}
2632
type="checkbox"
2733
tabIndex={keyNavProps.tabIndex}
2834
data-position={keyNavProps["data-position"]}
2935
onChange={stub}
3036
onFocus={lastRow ? scrollParentOnFocus : undefined}
3137
ref={keyNavProps.ref}
3238
aria-label={`${selectRowLabel ?? "Select row"} ${rowIndex + 1}`}
33-
{...checkboxEventsController.getProps(item)}
39+
{...useMemo(() => checkboxEventsHandler.getProps(item), [item, checkboxEventsHandler])}
3440
/>
3541
</CellElement>
3642
);

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

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,38 @@
1+
import { If } from "@mendix/widget-plugin-component-kit/If";
12
import { ThreeStateCheckBox } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
2-
import { SelectionStatus } from "@mendix/widget-plugin-grid/selection";
3+
import { observer } from "mobx-react-lite";
34
import { Fragment, ReactElement, ReactNode } from "react";
4-
import { useLegacyContext } from "../helpers/root-context";
5-
import { useBasicData } from "../model/hooks/injection-hooks";
5+
import { useDatagridConfig, useSelectActions, useSelectionHelper, useTexts } from "../model/hooks/injection-hooks";
66

77
export function CheckboxColumnHeader(): ReactElement {
8-
const { selectActionHelper, selectionHelper } = useLegacyContext();
9-
const { showCheckboxColumn, showSelectAllToggle, onSelectAll } = selectActionHelper;
10-
const { selectAllRowsLabel } = useBasicData();
8+
const { selectAllCheckboxEnabled, checkboxColumnEnabled } = useDatagridConfig();
119

12-
if (showCheckboxColumn === false) {
10+
if (checkboxColumnEnabled === false) {
1311
return <Fragment />;
1412
}
1513

1614
return (
1715
<div className="th widget-datagrid-col-select" role="columnheader">
18-
{showSelectAllToggle && (
19-
<Checkbox
20-
status={selectionHelper?.type === "Multi" ? selectionHelper.selectionStatus : "none"}
21-
onChange={onSelectAll}
22-
aria-label={selectAllRowsLabel}
23-
/>
24-
)}
16+
<If condition={selectAllCheckboxEnabled}>
17+
<Checkbox />
18+
</If>
2519
</div>
2620
);
2721
}
2822

29-
function Checkbox(props: { status: SelectionStatus; onChange: () => void; "aria-label"?: string }): ReactNode {
30-
if (props.status === "unknown") {
31-
console.error("Data grid 2: don't know how to render column checkbox with selectionStatus=unknown");
23+
const Checkbox = observer(function Checkbox(): ReactNode {
24+
const { selectAllRowsLabel } = useTexts();
25+
const selectionHelper = useSelectionHelper();
26+
const selectActions = useSelectActions();
27+
28+
if (!selectionHelper || selectionHelper.type !== "Multi") {
3229
return null;
3330
}
3431
return (
3532
<ThreeStateCheckBox
36-
value={props.status}
37-
onChange={props.onChange}
38-
aria-label={props["aria-label"] ?? "Select all rows"}
33+
value={selectionHelper.selectionStatus}
34+
onChange={() => selectActions.selectPage()}
35+
aria-label={selectAllRowsLabel || "Select all rows"}
3936
/>
4037
);
41-
}
38+
});

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

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
11
import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context";
22
import { observer } from "mobx-react-lite";
33
import { ReactElement } from "react";
4-
import { useLegacyContext } from "../helpers/root-context";
5-
import { useColumnsStore, useDatagridConfig, useRowClass, useRows } from "../model/hooks/injection-hooks";
4+
import {
5+
useCellEventsHandler,
6+
useColumnsStore,
7+
useDatagridConfig,
8+
useFocusService,
9+
useRowClass,
10+
useRows,
11+
useSelectActions
12+
} from "../model/hooks/injection-hooks";
613
import { Row } from "./Row";
714

815
export const RowsRenderer = observer(function RowsRenderer(): ReactElement {
916
const rows = useRows().get();
1017
const config = useDatagridConfig();
1118
const { visibleColumns } = useColumnsStore();
1219
const rowClass = useRowClass();
13-
const { cellEventsController, focusController, selectActionHelper } = useLegacyContext();
20+
const cellEventsController = useCellEventsHandler();
21+
const focusService = useFocusService();
22+
const selectActions = useSelectActions();
23+
1424
return (
15-
<KeyNavProvider focusController={focusController}>
25+
<KeyNavProvider focusController={focusService}>
1626
{rows.map((item, rowIndex) => {
1727
return (
1828
<Row
1929
totalRows={rows.length}
2030
clickable={config.isInteractive}
21-
selectActions={selectActionHelper}
31+
selectActions={selectActions}
2232
eventsController={cellEventsController}
2333
className={rowClass.class.get(item)}
2434
columns={visibleColumns}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Fragment, ReactElement } from "react";
2-
import { useLegacyContext } from "../../helpers/root-context";
2+
import { useDatagridConfig } from "../../model/hooks/injection-hooks";
33
import { CellElement } from "../CellElement";
44
import { SelectorCell } from "../SelectorCell";
55
import { SkeletonLoader } from "./SkeletonLoader";
@@ -17,14 +17,14 @@ export function RowSkeletonLoader({
1717
pageSize,
1818
useBorderTop = true
1919
}: RowSkeletonLoaderProps): ReactElement {
20-
const { selectActionHelper } = useLegacyContext();
20+
const { checkboxColumnEnabled } = useDatagridConfig();
2121
return (
2222
<Fragment>
2323
{Array.from({ length: pageSize }).map((_, i) => {
2424
const borderTop = useBorderTop && i === 0;
2525
return (
2626
<div className="tr" role="row" key={i}>
27-
{selectActionHelper.showCheckboxColumn && (
27+
{checkboxColumnEnabled && (
2828
<CellElement borderTop={borderTop} className="widget-datagrid-col-select" tabIndex={-1}>
2929
<input type="checkbox" />
3030
</CellElement>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class WidgetRootViewModel {
1414
}>,
1515
private config: { selectionEnabled: boolean; selectionMethod: SelectionMethod },
1616
private exportTask: TaskProgressService,
17-
private selectAllTask: TaskProgressService
17+
private selectAllVM: { isOpen: boolean }
1818
) {
1919
makeAutoObservable(this);
2020
}
@@ -28,7 +28,7 @@ export class WidgetRootViewModel {
2828
}
2929

3030
get selecting(): boolean {
31-
return this.selectAllTask.inProgress;
31+
return this.selectAllVM.isOpen;
3232
}
3333

3434
get selectable(): boolean {

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

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,19 @@ import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switc
44
import { ClickActionHelper, ExecuteActionFx } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
55
import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
66
import { FocusTargetFx } from "@mendix/widget-plugin-grid/keyboard-navigation/base";
7-
import { SelectAdjacentFx, SelectAllFx, SelectFx } from "@mendix/widget-plugin-grid/selection";
7+
import {
8+
SelectAdjacentFx,
9+
SelectAllFx,
10+
SelectFx,
11+
SelectionMode,
12+
SelectionType
13+
} from "@mendix/widget-plugin-grid/selection";
814
import { ObjectItem } from "mendix";
9-
import { useMemo } from "react";
1015

1116
import { SelectActionsService } from "@mendix/widget-plugin-grid/main";
17+
import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
1218
import { createActionHandlers } from "./action-handlers";
13-
import { CellContext } from "./base";
19+
import { CellContext, SelectionMethod } from "./base";
1420
import { createFocusTargetHandlers } from "./focus-target-handlers";
1521
import { createSelectHandlers } from "./select-handlers";
1622

@@ -45,29 +51,34 @@ export class CellEventsController {
4551
}
4652
}
4753

48-
export function useCellEventsController(
49-
selectHelper: SelectActionsService,
54+
export function createCellEventsController(
55+
config: {
56+
selectionType: SelectionType;
57+
selectionMethod: SelectionMethod;
58+
selectionMode: SelectionMode;
59+
},
60+
selectActions: SelectActionsService,
61+
focusController: FocusTargetController,
5062
clickHelper: ClickActionHelper,
51-
focusController: FocusTargetController
63+
pageSize: ComputedAtom<number>
5264
): CellEventsController {
53-
const pageSize = 10;
54-
return useMemo(() => {
55-
const cellContextFactory = (item: ObjectItem): CellContext => ({
56-
item,
57-
pageSize: selectHelper.pageSize,
58-
selectionType: selectHelper.selectionType,
59-
selectionMethod: selectHelper.selectionMethod,
60-
selectionMode: selectHelper.selectionMode,
61-
clickTrigger: clickHelper.clickTrigger
62-
});
65+
// Placeholder function, actual implementation will depend on the specific context and services available.
66+
const cellContextFactory = (item: ObjectItem): CellContext => ({
67+
type: "cell",
68+
item,
69+
pageSize: pageSize.get(),
70+
selectionType: config.selectionType,
71+
selectionMethod: config.selectionMethod,
72+
selectionMode: config.selectionMode,
73+
clickTrigger: clickHelper.clickTrigger
74+
});
6375

64-
return new CellEventsController(
65-
cellContextFactory,
66-
selectHelper.onSelect,
67-
selectHelper.onSelectAll,
68-
selectHelper.onSelectAdjacent,
69-
clickHelper.onExecuteAction,
70-
focusController.dispatch
71-
);
72-
}, [selectHelper, clickHelper, focusController]);
76+
return new CellEventsController(
77+
cellContextFactory,
78+
selectActions.select,
79+
selectActions.selectPage,
80+
selectActions.selectAdjacent,
81+
clickHelper.onExecuteAction,
82+
focusController.dispatch
83+
);
7384
}

‎packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import { observer } from "mobx-react-lite";
2-
import { useLegacyContext } from "../../helpers/root-context";
2+
import { useSelectActions } from "../../model/hooks/injection-hooks";
33
import { useSelectionCounterViewModel } from "./injection-hooks";
44

55
export const SelectionCounter = observer(function SelectionCounter() {
66
const selectionCountStore = useSelectionCounterViewModel();
7-
const { selectActionHelper } = useLegacyContext();
7+
const selectActions = useSelectActions();
88

99
return (
1010
<div className="widget-datagrid-selection-counter">
1111
<span className="widget-datagrid-selection-text" aria-live="polite" aria-atomic="true">
1212
{selectionCountStore.selectedCountText}
1313
</span>
1414
&nbsp;|&nbsp;
15-
<button className="widget-datagrid-btn-link" onClick={selectActionHelper.onClearSelection}>
15+
<button className="widget-datagrid-btn-link" onClick={() => selectActions.clearSelection()}>
1616
{selectionCountStore.clearButtonLabel}
1717
</button>
1818
</div>

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

Lines changed: 0 additions & 23 deletions
This file was deleted.

0 commit comments

Comments
 (0)