refactor(datagrid-web): convert SelectionMethod enum to type

Author: Illia Obukhau

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

@@ -142,8 +142,8 @@ export function Table<T extends ObjectItem>(props: TableProps<T>): ReactElement
     const [columnsWidth, setColumnsWidth] = useState<ColumnWidth>(
         Object.fromEntries(columns.map((_c, index) => [index.toString(), undefined]))
     );
-    const checkboxSelectionOn = selectionMethod === SelectionMethod.checkbox;
-    const rowClickSelectionOn = selectionMethod === SelectionMethod.rowClick;
+    const checkboxSelectionOn = selectionMethod === "checkbox";
+    const rowClickSelectionOn = selectionMethod === "rowClick";
 
     const { updateSettings } = useSettings(
         settings,
@@ -303,7 +303,7 @@ export function Table<T extends ObjectItem>(props: TableProps<T>): ReactElement
                             >
                                 {selectionStatus && (
                                     <input
-                                        checked={selectionStatus !== SelectionMethod.none}
+                                        checked={selectionStatus !== "none"}
                                         type="checkbox"
                                         onChange={props.onSelectAll}
                                     />

packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx

@@ -2,7 +2,6 @@ import { render } from "enzyme";
 import * as testingLibrary from "@testing-library/react";
 import { GUID, ObjectItem } from "mendix";
 import { createElement } from "react";
-import { SelectionMethod } from "../../features/selection";
 import { Table, TableProps } from "../Table";
 import { objectItems } from "@mendix/pluggable-test-utils";
 import "@testing-library/jest-dom";
@@ -178,7 +177,7 @@ describe("Table", () => {
             const items = objectItems(3);
 
             const { container } = render(
-                <Table {...mockTableProps()} data={items} paging selectionMethod={SelectionMethod.checkbox} />
+                <Table {...mockTableProps()} data={items} paging selectionMethod={"checkbox"} />
             );
 
             expect(container.firstChild).toHaveClass("widget-datagrid-selection-method-checkbox");
@@ -189,21 +188,15 @@ describe("Table", () => {
             const items = objectItems(3);
 
             const { asFragment } = render(
-                <Table
-                    {...mockTableProps()}
-                    data={items}
-                    paging
-                    selectionMethod={SelectionMethod.checkbox}
-                    isSelected={() => true}
-                />
+                <Table {...mockTableProps()} data={items} paging selectionMethod={"checkbox"} isSelected={() => true} />
             );
 
             expect(asFragment()).toMatchSnapshot();
         });
 
         it("set negative tabindex on row checkbox", () => {
             const { getAllByRole } = testingLibrary.render(
-                <Table {...mockTableProps()} paging selectionMethod={SelectionMethod.checkbox} />
+                <Table {...mockTableProps()} paging selectionMethod={"checkbox"} />
             );
 
             getAllByRole("checkbox").forEach(elt => {
@@ -215,7 +208,7 @@ describe("Table", () => {
             const items = objectItems(6);
             const [a, b, c, d, e, f] = items;
             const { rerender } = testingLibrary.render(
-                <Table {...mockTableProps()} data={items} paging selectionMethod={SelectionMethod.checkbox} />
+                <Table {...mockTableProps()} data={items} paging selectionMethod={"checkbox"} />
             );
 
             // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -229,7 +222,7 @@ describe("Table", () => {
                     {...mockTableProps()}
                     data={items}
                     paging
-                    selectionMethod={SelectionMethod.checkbox}
+                    selectionMethod={"checkbox"}
                     isSelected={item => [a, b, c].includes(item)}
                 />
             );
@@ -241,7 +234,7 @@ describe("Table", () => {
                     {...mockTableProps()}
                     data={items}
                     paging
-                    selectionMethod={SelectionMethod.checkbox}
+                    selectionMethod={"checkbox"}
                     isSelected={item => [c].includes(item)}
                 />
             );
@@ -253,7 +246,7 @@ describe("Table", () => {
                     {...mockTableProps()}
                     data={items}
                     paging
-                    selectionMethod={SelectionMethod.checkbox}
+                    selectionMethod={"checkbox"}
                     isSelected={item => [d, e].includes(item)}
                 />
             );
@@ -265,7 +258,7 @@ describe("Table", () => {
                     {...mockTableProps()}
                     data={items}
                     paging
-                    selectionMethod={SelectionMethod.checkbox}
+                    selectionMethod={"checkbox"}
                     isSelected={item => [f, e, d, a].includes(item)}
                 />
             );
@@ -279,13 +272,7 @@ describe("Table", () => {
             const onSelect = jest.fn();
 
             render(
-                <Table
-                    {...mockTableProps()}
-                    data={items}
-                    paging
-                    selectionMethod={SelectionMethod.checkbox}
-                    onSelect={onSelect}
-                />
+                <Table {...mockTableProps()} data={items} paging selectionMethod={"checkbox"} onSelect={onSelect} />
             );
 
             const checkbox1 = screen.getAllByRole("checkbox")[0];
@@ -317,7 +304,7 @@ describe("Table", () => {
                     data={items}
                     paging
                     selectionStatus={undefined}
-                    selectionMethod={SelectionMethod.checkbox}
+                    selectionMethod={"checkbox"}
                 />
             );
 
@@ -335,7 +322,7 @@ describe("Table", () => {
                         data={items}
                         paging
                         selectionStatus={status}
-                        selectionMethod={SelectionMethod.checkbox}
+                        selectionMethod={"checkbox"}
                     />
                 );
 
@@ -360,7 +347,7 @@ describe("Table", () => {
                     data={items}
                     paging
                     selectionStatus={"some"}
-                    selectionMethod={SelectionMethod.rowClick}
+                    selectionMethod={"rowClick"}
                 />
             );
 
@@ -379,7 +366,7 @@ describe("Table", () => {
                     data={items}
                     paging
                     selectionStatus="none"
-                    selectionMethod={SelectionMethod.checkbox}
+                    selectionMethod={"checkbox"}
                     onSelectAll={onSelectAll}
                 />
             );
@@ -400,7 +387,7 @@ describe("Table", () => {
             const items = objectItems(3);
 
             const { container } = render(
-                <Table {...mockTableProps()} data={items} paging selectionMethod={SelectionMethod.rowClick} />
+                <Table {...mockTableProps()} data={items} paging selectionMethod={"rowClick"} />
             );
 
             expect(container.firstChild).toHaveClass("widget-datagrid-selection-method-click");
@@ -411,13 +398,7 @@ describe("Table", () => {
             const items = objectItems(3);
 
             const { asFragment } = render(
-                <Table
-                    {...mockTableProps()}
-                    data={items}
-                    paging
-                    selectionMethod={SelectionMethod.rowClick}
-                    isSelected={() => true}
-                />
+                <Table {...mockTableProps()} data={items} paging selectionMethod={"rowClick"} isSelected={() => true} />
             );
 
             expect(asFragment()).toMatchSnapshot();
@@ -442,7 +423,7 @@ describe("Table", () => {
                     data={items}
                     cellRenderer={(renderWrapper, _, columnIndex) => renderWrapper(columns[columnIndex].header)}
                     paging
-                    selectionMethod={SelectionMethod.rowClick}
+                    selectionMethod={"rowClick"}
                     onSelect={onSelect}
                 />
             );
@@ -514,7 +495,7 @@ function mockTableProps(): TableProps<ObjectItem> {
         onSelect: jest.fn(),
         onSelectAll: jest.fn(),
         isSelected: jest.fn(() => false),
-        selectionMethod: SelectionMethod.none,
+        selectionMethod: "none",
         selectionStatus: undefined
     };
 }

packages/pluggableWidgets/datagrid-web/src/features/__tests__/selection.spec.ts

@@ -1,4 +1,4 @@
-import { SelectionProps, SelectionMethod, selectionSettings } from "../../features/selection";
+import { SelectionProps, selectionSettings } from "../../features/selection";
 import {
     SelectionSingleValueBuilder as SingleBuilder,
     SelectionMultiValueBuilder as MultiBuilder
@@ -18,44 +18,36 @@ describe("features/selection", () => {
         it("is none, when selection is off", () => {
             const helper = undefined;
 
-            expect(selectionSettings(props(undefined, "checkbox"), helper).selectionMethod).toBe(SelectionMethod.none);
-            expect(selectionSettings(props("None", "checkbox"), helper).selectionMethod).toBe(SelectionMethod.none);
+            expect(selectionSettings(props(undefined, "checkbox"), helper).selectionMethod).toBe("none");
+            expect(selectionSettings(props("None", "checkbox"), helper).selectionMethod).toBe("none");
         });
 
         it("depends on the value of itemSelectionMethod prop", () => {
             const helper = undefined;
 
             expect(selectionSettings(props(new SingleBuilder().build(), "checkbox"), helper).selectionMethod).toBe(
-                SelectionMethod.checkbox
+                "checkbox"
             );
 
-            expect(selectionSettings(props("Single", "checkbox"), helper).selectionMethod).toBe(
-                SelectionMethod.checkbox
-            );
+            expect(selectionSettings(props("Single", "checkbox"), helper).selectionMethod).toBe("checkbox");
 
             expect(selectionSettings(props(new SingleBuilder().build(), "rowClick"), helper).selectionMethod).toBe(
-                SelectionMethod.rowClick
+                "rowClick"
             );
 
-            expect(selectionSettings(props("Single", "rowClick"), helper).selectionMethod).toBe(
-                SelectionMethod.rowClick
-            );
+            expect(selectionSettings(props("Single", "rowClick"), helper).selectionMethod).toBe("rowClick");
 
             expect(selectionSettings(props(new MultiBuilder().build(), "checkbox"), helper).selectionMethod).toBe(
-                SelectionMethod.checkbox
+                "checkbox"
             );
 
-            expect(selectionSettings(props("Multi", "checkbox"), helper).selectionMethod).toBe(
-                SelectionMethod.checkbox
-            );
+            expect(selectionSettings(props("Multi", "checkbox"), helper).selectionMethod).toBe("checkbox");
 
             expect(selectionSettings(props(new MultiBuilder().build(), "rowClick"), helper).selectionMethod).toBe(
-                SelectionMethod.rowClick
+                "rowClick"
             );
 
-            expect(selectionSettings(props("Multi", "rowClick"), helper).selectionMethod).toBe(
-                SelectionMethod.rowClick
-            );
+            expect(selectionSettings(props("Multi", "rowClick"), helper).selectionMethod).toBe("rowClick");
         });
     });
 

packages/pluggableWidgets/datagrid-web/src/features/selection.ts

@@ -3,11 +3,7 @@ import type { ObjectItem } from "mendix";
 import { MultiSelectionStatus, SelectionHelper } from "@mendix/pluggable-widgets-commons";
 import { DatagridContainerProps, DatagridPreviewProps, ItemSelectionMethodEnum } from "typings/DatagridProps";
 
-export enum SelectionMethod {
-    none = "none",
-    rowClick = "rowClick",
-    checkbox = "checkbox"
-}
+export type SelectionMethod = ItemSelectionMethodEnum | "none";
 
 export type SelectActionProps = {
     onSelect: (item: ObjectItem) => void;
@@ -74,10 +70,6 @@ export function selectionSettings(props: SelectionProps, helper: SelectionHelper
 
     return {
         selectionStatus: selectAllOn ? status : undefined,
-        selectionMethod: selectionOn
-            ? methodCheckbox
-                ? SelectionMethod.checkbox
-                : SelectionMethod.rowClick
-            : SelectionMethod.none
+        selectionMethod: selectionOn ? itemSelectionMethod : "none"
     };
 }