refactor: rename Cell to DataCell

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/components/Cell.tsx renamed to packages/pluggableWidgets/datagrid-web/src/components/DataCell.tsx

@@ -1,12 +1,26 @@
 import { useFocusTargetProps } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetProps";
+import { ObjectItem } from "mendix";
 import { computed } from "mobx";
 import { observer } from "mobx-react-lite";
-import { ReactElement, useMemo } from "react";
-import { CellComponentProps } from "../typings/CellComponent";
+import { ReactElement, ReactNode, useMemo } from "react";
+import { EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
 import { CellElement } from "./CellElement";
 
-const component = observer(function Cell(props: CellComponentProps<GridColumn>): ReactElement {
+interface DataCellProps {
+    children?: ReactNode;
+    className?: string;
+    column: GridColumn;
+    item: ObjectItem;
+    key?: string | number;
+    rowIndex: number;
+    columnIndex?: number;
+    clickable?: boolean;
+    preview?: boolean;
+    eventsController: EventsController;
+}
+
+export const DataCell = observer(function DataCell(props: DataCellProps): ReactElement {
     const keyNavProps = useFocusTargetProps<HTMLDivElement>({
         columnIndex: props.columnIndex ?? -1,
         rowIndex: props.rowIndex
@@ -36,6 +50,3 @@ const component = observer(function Cell(props: CellComponentProps<GridColumn>):
         </CellElement>
     );
 });
-
-// Override NamedExoticComponent type
-export const Cell = component as (props: CellComponentProps<GridColumn>) => ReactElement;

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

@@ -4,8 +4,8 @@ import { ReactElement } from "react";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
-import { Cell } from "./Cell";
 import { CheckboxCell } from "./CheckboxCell";
+import { DataCell } from "./DataCell";
 import { SelectorCell } from "./SelectorCell";
 
 export interface RowProps {
@@ -18,6 +18,7 @@ export interface RowProps {
     totalRows: number;
     clickable: boolean;
     eventsController: EventsController;
+    checkboxColumnEnabled: boolean;
 }
 
 export function Row(props: RowProps): ReactElement {
@@ -32,7 +33,7 @@ export function Row(props: RowProps): ReactElement {
             role="row"
             aria-selected={ariaSelected}
         >
-            {selectActionHelper.showCheckboxColumn && (
+            {props.checkboxColumnEnabled && (
                 <CheckboxCell
                     item={props.item}
                     key="checkbox_cell"
@@ -42,20 +43,18 @@ export function Row(props: RowProps): ReactElement {
                 />
             )}
             {props.columns.map((column, baseIndex) => {
-                const cell = (
-                    <Cell
+                return (
+                    <DataCell
                         key={`row_${props.item.id}_col_${column.columnId}`}
                         column={column}
                         rowIndex={props.index}
-                        columnIndex={selectActionHelper.showCheckboxColumn ? baseIndex + 1 : baseIndex}
+                        columnIndex={props.checkboxColumnEnabled ? baseIndex + 1 : baseIndex}
                         item={props.item}
                         clickable={props.clickable}
                         preview={false}
                         eventsController={eventsController}
                     />
                 );
-
-                return cell;
             })}
             {props.showSelectorCell && (
                 <SelectorCell

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

@@ -26,6 +26,7 @@ export const RowsRenderer = observer(function RowsRenderer(): ReactElement {
                         item={item}
                         key={`row_${item.id}`}
                         showSelectorCell={config.columnsHidable}
+                        checkboxColumnEnabled={config.checkboxColumnEnabled}
                     />
                 );
             })}

packages/pluggableWidgets/datagrid-web/src/typings/CellComponent.ts

@@ -1,23 +1,6 @@
-import { ObjectItem } from "mendix";
-import { ReactElement, ReactNode } from "react";
-import { GridColumn } from "./GridColumn";
 import { ElementProps } from "@mendix/widget-plugin-grid/event-switch/base";
+import { ObjectItem } from "mendix";
 
 export interface EventsController {
     getProps(item: ObjectItem): ElementProps<HTMLDivElement>;
 }
-
-export interface CellComponentProps<C extends GridColumn> {
-    children?: ReactNode;
-    className?: string;
-    column: C;
-    item: ObjectItem;
-    key?: string | number;
-    rowIndex: number;
-    columnIndex?: number;
-    clickable?: boolean;
-    preview?: boolean;
-    eventsController: EventsController;
-}
-
-export type CellComponent<C extends GridColumn> = (props: CellComponentProps<C>) => ReactElement;

packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx

@@ -1,11 +1,5 @@
-import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
-import { PositionController } from "@mendix/widget-plugin-grid/keyboard-navigation/PositionController";
-import { VirtualGridLayout } from "@mendix/widget-plugin-grid/keyboard-navigation/VirtualGridLayout";
 import { dynamic, list, listAttr, listExp } from "@mendix/widget-plugin-test-utils";
-import { GUID, ObjectItem } from "mendix";
 import { ColumnsType, DatagridContainerProps } from "../../typings/DatagridProps";
-import { Cell } from "../components/Cell";
-import { WidgetProps } from "../components/Widget";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { ColumnStore } from "../helpers/state/column/ColumnStore";
 import { IColumnParentStore } from "../helpers/state/ColumnGroupStore";
@@ -68,46 +62,6 @@ export function mockGridColumn(c: ColumnsType, index: number): GridColumn {
     return new ColumnStore(index, c, parentStore);
 }
 
-export function mockWidgetProps(): WidgetProps<GridColumn, ObjectItem> {
-    const id = "dg1";
-    const columnsProp = [column("Test")];
-    const columns = columnsProp.map((col, index) => mockGridColumn(col, index));
-
-    return {
-        CellComponent: Cell,
-        className: "test",
-        columnsDraggable: false,
-        columnsFilterable: false,
-        columnsHidable: false,
-        columnsResizable: false,
-        columnsSortable: false,
-        data: [{ id: "123456" as GUID }],
-        exporting: false,
-        filterRenderer: () => <input type="text" defaultValue="dummy" />,
-        headerWrapperRenderer: (_index, header) => header,
-        id,
-        onExportCancel: jest.fn(),
-        paginationType: "buttons",
-        visibleColumns: columns,
-        availableColumns: columns,
-        columnsSwap: jest.fn(),
-        setIsResizing: jest.fn(),
-        processedRows: 0,
-        selectActionHelper: mockSelectionProps(),
-        cellEventsController: { getProps: () => Object.create({}) },
-        checkboxEventsController: { getProps: () => Object.create({}) },
-        isFirstLoad: false,
-        isFetchingNextBatch: false,
-        loadingType: "spinner",
-        columnsLoading: false,
-        showRefreshIndicator: false,
-        focusController: new FocusTargetController(
-            new PositionController(),
-            new VirtualGridLayout(1, columns.length, 10)
-        )
-    };
-}
-
 export function mockContainerProps(overrides?: Partial<DatagridContainerProps>): DatagridContainerProps {
     return {
         class: "dg-one",