Skip to content

Commit 7d5fb4c

Browse files
iobuhoviobuhov
committed
WIP
1 parent 6e03bf5 commit 7d5fb4c

32 files changed

+305
-161
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,19 @@ import { useDataExport } from "./features/data-export/useDataExport";
1010
import { useCellEventsController } from "./features/row-interaction/CellEventsController";
1111
import { useCheckboxEventsController } from "./features/row-interaction/CheckboxEventsController";
1212
import { LegacyContext } from "./helpers/root-context";
13-
import { useSelectActionHelper } from "./helpers/SelectActionHelper";
1413
import { useDataGridJSActions } from "./helpers/useDataGridJSActions";
1514
import {
1615
useColumnsStore,
16+
useDatagridConfig,
1717
useExportProgressService,
1818
useMainGate,
19+
useSelectActions,
1920
useSelectionHelper
2021
} from "./model/hooks/injection-hooks";
2122
import { useDatagridContainer } from "./model/hooks/useDatagridContainer";
2223

2324
const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
25+
const config = useDatagridConfig();
2426
const gate = useMainGate();
2527
const columnsStore = useColumnsStore();
2628
const exportProgress = useExportProgressService();
@@ -30,7 +32,7 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
3032

3133
const selectionHelper = useSelectionHelper();
3234

33-
const selectActionHelper = useSelectActionHelper(props, selectionHelper);
35+
const selectActionHelper = useSelectActions();
3436

3537
const clickActionHelper = useClickActionHelper({
3638
onClickTrigger: props.onClickTrigger,
@@ -39,7 +41,7 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
3941

4042
useDataGridJSActions(selectActionHelper);
4143

42-
const visibleColumnsCount = selectActionHelper.showCheckboxColumn
44+
const visibleColumnsCount = config.checkboxColumnEnabled
4345
? columnsStore.visibleColumns.length + 1
4446
: columnsStore.visibleColumns.length;
4547

‎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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const RowsRenderer = observer(function RowsRenderer(): ReactElement {
1818
<Row
1919
totalRows={rows.length}
2020
clickable={config.isInteractive}
21-
selectActionHelper={selectActionHelper}
21+
selectActions={selectActionHelper}
2222
eventsController={cellEventsController}
2323
className={rowClass.class.get(item)}
2424
columns={visibleColumns}

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

Lines changed: 3 additions & 3 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,7 +12,7 @@ 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,
1717
private selectAllTask: TaskProgressService
1818
) {
@@ -35,7 +35,7 @@ export class WidgetRootViewModel {
3535
return this.config.selectionEnabled;
3636
}
3737

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

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1+
import { ClickEntry, ClickEventSwitch } from "@mendix/widget-plugin-grid/event-switch/ClickEventSwitch";
12
import { ElementEntry, ElementProps } from "@mendix/widget-plugin-grid/event-switch/base";
23
import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switch";
4+
import { ClickActionHelper, ExecuteActionFx } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
5+
import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
6+
import { FocusTargetFx } from "@mendix/widget-plugin-grid/keyboard-navigation/base";
7+
import { SelectAdjacentFx, SelectAllFx, SelectFx } from "@mendix/widget-plugin-grid/selection";
38
import { ObjectItem } from "mendix";
49
import { useMemo } from "react";
10+
11+
import { SelectActionsService } from "@mendix/widget-plugin-grid/main";
512
import { createActionHandlers } from "./action-handlers";
613
import { CellContext } from "./base";
7-
import { createSelectHandlers } from "./select-handlers";
8-
import { SelectActionHelper } from "../../helpers/SelectActionHelper";
9-
import { SelectAdjacentFx, SelectAllFx, SelectFx } from "@mendix/widget-plugin-grid/selection";
10-
import { ClickActionHelper, ExecuteActionFx } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
11-
import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
12-
import { FocusTargetFx } from "@mendix/widget-plugin-grid/keyboard-navigation/base";
1314
import { createFocusTargetHandlers } from "./focus-target-handlers";
14-
import { ClickEntry, ClickEventSwitch } from "@mendix/widget-plugin-grid/event-switch/ClickEventSwitch";
15+
import { createSelectHandlers } from "./select-handlers";
1516

1617
export class CellEventsController {
1718
constructor(
@@ -45,10 +46,11 @@ export class CellEventsController {
4546
}
4647

4748
export function useCellEventsController(
48-
selectHelper: SelectActionHelper,
49+
selectHelper: SelectActionsService,
4950
clickHelper: ClickActionHelper,
5051
focusController: FocusTargetController
5152
): CellEventsController {
53+
const pageSize = 10;
5254
return useMemo(() => {
5355
const cellContextFactory = (item: ObjectItem): CellContext => ({
5456
item,

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

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import { ElementProps } from "@mendix/widget-plugin-grid/event-switch/base";
22
import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switch";
3-
import { SelectAdjacentFx, SelectAllFx, SelectFx } from "@mendix/widget-plugin-grid/selection";
3+
import { FocusTargetFx } from "@mendix/widget-plugin-grid/keyboard-navigation/base";
4+
import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
5+
import { SelectActionsService } from "@mendix/widget-plugin-grid/main";
6+
import {
7+
SelectAdjacentFx,
8+
SelectAllFx,
9+
SelectFx,
10+
SelectionMode,
11+
SelectionType
12+
} from "@mendix/widget-plugin-grid/selection";
13+
import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
414
import { ObjectItem } from "mendix";
5-
import { useMemo } from "react";
6-
import { SelectActionHelper } from "../../helpers/SelectActionHelper";
7-
import { CheckboxContext } from "./base";
15+
import { CheckboxContext, SelectionMethod } from "./base";
816
import { checkboxHandlers } from "./checkbox-handlers";
9-
import { FocusTargetFx } from "@mendix/widget-plugin-grid/keyboard-navigation/base";
1017
import { createFocusTargetHandlers } from "./focus-target-handlers";
11-
import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
1218

1319
export class CheckboxEventsController {
1420
constructor(
@@ -29,24 +35,29 @@ export class CheckboxEventsController {
2935
);
3036
}
3137

32-
export function useCheckboxEventsController(
33-
selectHelper: SelectActionHelper,
34-
focusController: FocusTargetController
38+
export function creteCheckboxEventsController(
39+
config: {
40+
selectionType: SelectionType;
41+
selectionMethod: SelectionMethod;
42+
selectionMode: SelectionMode;
43+
},
44+
selectActions: SelectActionsService,
45+
focusController: FocusTargetController,
46+
pageSize: ComputedAtom<number>
3547
): CheckboxEventsController {
36-
return useMemo(() => {
37-
const contextFactory = (item: ObjectItem): CheckboxContext => ({
38-
item,
39-
pageSize: selectHelper.pageSize,
40-
selectionType: selectHelper.selectionType,
41-
selectionMethod: selectHelper.selectionMethod,
42-
selectionMode: selectHelper.selectionMode
43-
});
44-
return new CheckboxEventsController(
45-
contextFactory,
46-
selectHelper.onSelect,
47-
selectHelper.onSelectAll,
48-
selectHelper.onSelectAdjacent,
49-
focusController.dispatch
50-
);
51-
}, [selectHelper, focusController]);
48+
const contextFactory = (item: ObjectItem): CheckboxContext => ({
49+
type: "checkbox",
50+
item,
51+
pageSize: pageSize.get(),
52+
selectionType: config.selectionType,
53+
selectionMethod: config.selectionMethod,
54+
selectionMode: config.selectionMode
55+
});
56+
return new CheckboxEventsController(
57+
contextFactory,
58+
selectActions.select,
59+
selectActions.selectPage,
60+
selectActions.selectAdjacent,
61+
focusController.dispatch
62+
);
5263
}

‎packages/pluggableWidgets/datagrid-web/src/features/row-interaction/__tests__/cell-keyboard.spec.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
/* eslint-disable jest/no-conditional-expect */
12
import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switch";
23
import { ClickTrigger } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
34
import { SelectionType } from "@mendix/widget-plugin-grid/selection";
45
import { objectItems } from "@mendix/widget-plugin-test-utils";
56
import { render, RenderResult } from "@testing-library/react";
67
import userEvent, { UserEvent } from "@testing-library/user-event";
78
import { ReactElement } from "react";
8-
import { SelectionMethod } from "../../../helpers/SelectActionHelper";
9+
910
import { createActionHandlers } from "../action-handlers";
10-
import { CellContext } from "../base";
11+
import { CellContext, SelectionMethod } from "../base";
1112
import { createSelectHandlers } from "../select-handlers";
1213

1314
function setup(jsx: ReactElement): { user: UserEvent } & RenderResult {
@@ -41,6 +42,7 @@ describe("grid cell", () => {
4142

4243
const props = eventSwitch<CellContext, HTMLDivElement>(
4344
(): CellContext => ({
45+
type: "cell",
4446
item,
4547
pageSize: 10,
4648
selectionMethod: sm as SelectionMethod,
@@ -88,6 +90,7 @@ describe("grid cell", () => {
8890

8991
const props = eventSwitch<CellContext, HTMLDivElement>(
9092
(): CellContext => ({
93+
type: "cell",
9194
item,
9295
pageSize: 10,
9396
selectionMethod: "rowClick",
@@ -171,6 +174,7 @@ describe("grid cell", () => {
171174

172175
const props = eventSwitch<CellContext, HTMLDivElement>(
173176
(): CellContext => ({
177+
type: "cell",
174178
item,
175179
pageSize: 10,
176180
selectionMethod: "rowClick",
@@ -212,6 +216,7 @@ describe("grid cell", () => {
212216

213217
const props = eventSwitch<CellContext, HTMLDivElement>(
214218
(): CellContext => ({
219+
type: "cell",
215220
item,
216221
pageSize: 10,
217222
selectionMethod: "none",
@@ -235,6 +240,7 @@ describe("grid cell", () => {
235240

236241
const props = eventSwitch<CellContext, HTMLDivElement>(
237242
(): CellContext => ({
243+
type: "cell",
238244
item,
239245
pageSize: 10,
240246
selectionMethod: "none",
@@ -261,6 +267,7 @@ describe("grid cell", () => {
261267

262268
const props = eventSwitch<CellContext, HTMLDivElement>(
263269
(): CellContext => ({
270+
type: "cell",
264271
item,
265272
pageSize: 10,
266273
selectionMethod: "none",
@@ -302,6 +309,7 @@ describe("grid cell", () => {
302309

303310
const props = eventSwitch<CellContext, HTMLDivElement>(
304311
(): CellContext => ({
312+
type: "cell",
305313
item,
306314
pageSize: 10,
307315
selectionMethod,
@@ -330,6 +338,7 @@ describe("grid cell", () => {
330338

331339
const props = eventSwitch<CellContext, HTMLDivElement>(
332340
(): CellContext => ({
341+
type: "cell",
333342
item,
334343
pageSize: 10,
335344
selectionMethod: "checkbox",

‎packages/pluggableWidgets/datagrid-web/src/features/row-interaction/__tests__/cell-pointer.spec.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
/* eslint-disable jest/no-conditional-expect */
12
import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switch";
23
import { ClickTrigger } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
34
import { objectItems } from "@mendix/widget-plugin-test-utils";
45
import { render, RenderResult } from "@testing-library/react";
56
import userEvent, { UserEvent } from "@testing-library/user-event";
67
import { ReactElement } from "react";
7-
import { SelectionMethod } from "../../../helpers/SelectActionHelper";
88
import { createActionHandlers } from "../action-handlers";
9-
import { CellContext } from "../base";
9+
import { CellContext, SelectionMethod } from "../base";
1010
import { createSelectHandlers } from "../select-handlers";
1111

1212
function setup(jsx: ReactElement): { user: UserEvent } & RenderResult {
@@ -40,6 +40,7 @@ describe("grid cell", () => {
4040

4141
const props = eventSwitch<CellContext, HTMLDivElement>(
4242
(): CellContext => ({
43+
type: "cell",
4344
item,
4445
pageSize: 10,
4546
selectionMethod: sm as SelectionMethod,
@@ -90,6 +91,7 @@ describe("grid cell", () => {
9091

9192
const props = eventSwitch<CellContext, HTMLDivElement>(
9293
(): CellContext => ({
94+
type: "cell",
9395
item,
9496
pageSize: 10,
9597
selectionMethod: sm as SelectionMethod,
@@ -142,6 +144,7 @@ describe("grid cell", () => {
142144

143145
const props = eventSwitch<CellContext, HTMLDivElement>(
144146
(): CellContext => ({
147+
type: "cell",
145148
item,
146149
pageSize: 10,
147150
selectionMethod: sm as SelectionMethod,
@@ -192,6 +195,7 @@ describe("grid cell", () => {
192195

193196
const props = eventSwitch<CellContext, HTMLDivElement>(
194197
(): CellContext => ({
198+
type: "cell",
195199
item,
196200
pageSize: 10,
197201
selectionMethod: sm as SelectionMethod,

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1+
import { ClickTrigger } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
12
import { SelectionMode, SelectionType } from "@mendix/widget-plugin-grid/selection";
23
import { ObjectItem } from "mendix";
3-
import { ClickTrigger } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
4-
import { SelectionMethod } from "../../helpers/SelectActionHelper";
54

6-
interface BaseContext {
5+
export type SelectionMethod = "rowClick" | "checkbox" | "none";
6+
7+
interface BaseEventContext {
78
item: ObjectItem;
89
pageSize: number;
910
selectionMethod: SelectionMethod;
1011
selectionType: SelectionType;
1112
selectionMode: SelectionMode;
1213
}
1314

14-
export interface CellContext extends BaseContext {
15+
export interface CellContext extends BaseEventContext {
16+
type: "cell";
1517
clickTrigger: ClickTrigger;
1618
}
1719

18-
export interface CheckboxContext extends BaseContext {}
20+
export interface CheckboxContext extends BaseEventContext {
21+
type: "checkbox";
22+
}

0 commit comments

Comments
 (0)