Skip to content

Commit fc9dceb

Browse files
iobuhoviobuhov
committed
refactor: migrate to brandi
1 parent 7dc218c commit fc9dceb

36 files changed

Lines changed: 409 additions & 295 deletions

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

Lines changed: 3 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +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";
13-
import { useSelectActionHelper } from "./helpers/SelectActionHelper";
147
import { useDataGridJSActions } from "./helpers/useDataGridJSActions";
15-
import {
16-
useColumnsStore,
17-
useExportProgressService,
18-
useMainGate,
19-
useSelectionHelper
20-
} from "./model/hooks/injection-hooks";
8+
import { useColumnsStore, useExportProgressService } from "./model/hooks/injection-hooks";
219
import { useDatagridContainer } from "./model/hooks/useDatagridContainer";
2210

2311
const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
24-
const gate = useMainGate();
2512
const columnsStore = useColumnsStore();
2613
const exportProgress = useExportProgressService();
27-
const items = gate.props.datasource.items ?? [];
2814

2915
const [abortExport] = useDataExport(props, columnsStore, exportProgress);
3016

31-
const selectionHelper = useSelectionHelper();
17+
useDataGridJSActions();
3218

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

7122
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/Row.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import { SelectActionsService } from "@mendix/widget-plugin-grid/main";
12
import classNames from "classnames";
23
import { ObjectItem } from "mendix";
34
import { ReactElement } from "react";
4-
import { SelectActionHelper } from "../helpers/SelectActionHelper";
55
import { EventsController } from "../typings/CellComponent";
66
import { GridColumn } from "../typings/GridColumn";
77
import { CheckboxCell } from "./CheckboxCell";
@@ -14,17 +14,17 @@ export interface RowProps {
1414
item: ObjectItem;
1515
index: number;
1616
showSelectorCell?: boolean;
17-
selectActionHelper: SelectActionHelper;
17+
selectActions: SelectActionsService;
1818
totalRows: number;
1919
clickable: boolean;
2020
eventsController: EventsController;
2121
checkboxColumnEnabled: boolean;
2222
}
2323

2424
export function Row(props: RowProps): ReactElement {
25-
const { selectActionHelper, totalRows, eventsController } = props;
26-
const selected = selectActionHelper.isSelected(props.item);
27-
const ariaSelected = selectActionHelper.selectionType === "None" ? undefined : selected;
25+
const { selectActions, totalRows, eventsController } = props;
26+
const selected = selectActions.isSelected(props.item);
27+
const ariaSelected = selectActions.selectionType === "None" ? undefined : selected;
2828
const borderTop = props.index === 0;
2929

3030
return (

‎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-
selectActionHelper={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: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { TaskProgressService } from "@mendix/widget-plugin-grid/main";
22
import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
33
import { makeAutoObservable } from "mobx";
44
import { createRef, CSSProperties } from "react";
5-
import { ItemSelectionMethodEnum } from "../../../typings/DatagridProps";
5+
import { type SelectionMethod } from "../row-interaction/base";
66

77
export class WidgetRootViewModel {
88
ref = createRef<HTMLDivElement>();
@@ -12,9 +12,9 @@ export class WidgetRootViewModel {
1212
style?: CSSProperties;
1313
class?: string;
1414
}>,
15-
private config: { selectionEnabled: boolean; selectionMethod: ItemSelectionMethodEnum },
15+
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,14 +28,14 @@ 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 {
3535
return this.config.selectionEnabled;
3636
}
3737

38-
get selectionMethod(): ItemSelectionMethodEnum {
38+
get selectionMethod(): SelectionMethod {
3939
return this.config.selectionMethod;
4040
}
4141

0 commit comments

Comments
 (0)