refactor: rewire grid header props

Author: iobuhov

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

@@ -85,7 +85,6 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
                 )}
                 headerTitle={props.filterSectionTitle?.value}
                 headerContent={props.filtersPlaceholder}
-                headerWrapperRenderer={useCallback((_columnIndex: number, header: ReactElement) => header, [])}
                 id={useMemo(() => `DataGrid${generateUUID()}`, [])}
                 numberOfItems={props.datasource.totalCount}
                 onExportCancel={abortExport}
@@ -95,10 +94,6 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
                 styles={props.style}
                 exporting={exportProgress.inProgress}
                 processedRows={exportProgress.loaded}
-                visibleColumns={columnsStore.visibleColumns}
-                availableColumns={columnsStore.availableColumns}
-                setIsResizing={(status: boolean) => columnsStore.setIsResizing(status)}
-                columnsSwap={(moved, [target, placement]) => columnsStore.swapColumns(moved, [target, placement])}
                 selectActionHelper={selectActionHelper}
                 cellEventsController={cellEventsController}
                 checkboxEventsController={checkboxEventsController}

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

@@ -0,0 +1,17 @@
+import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
+import { Container } from "brandi";
+import { ContainerProvider } from "brandi-react";
+import { PropsWithChildren, ReactNode } from "react";
+import { CORE_TOKENS as CORE } from "../model/tokens";
+import { GridColumn } from "../typings/GridColumn";
+
+/** Provider to bind & provider column store for children at runtime. */
+export function ColumnProvider(props: PropsWithChildren<{ column: GridColumn }>): ReactNode {
+    const ct = useConst(() => {
+        const container = new Container();
+        container.bind(CORE.column).toConstant(props.column);
+        return container;
+    });
+
+    return <ContainerProvider container={ct}>{props.children} </ContainerProvider>;
+}

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

@@ -1,99 +1,50 @@
-import { ReactElement, ReactNode, useCallback, useState } from "react";
-import { ColumnId, GridColumn } from "../typings/GridColumn";
+import { ReactElement, useState } from "react";
+import { useColumnsStore, useDatagridConfig } from "../model/hooks/injection-hooks";
+import { ColumnId } from "../typings/GridColumn";
 import { CheckboxColumnHeader } from "./CheckboxColumnHeader";
+import { ColumnProvider } from "./ColumnProvider";
 import { ColumnResizer } from "./ColumnResizer";
 import { ColumnSelector } from "./ColumnSelector";
 import { Header } from "./Header";
 import { HeaderSkeletonLoader } from "./loader/HeaderSkeletonLoader";
 
-type GridHeaderProps = {
-    availableColumns: GridColumn[];
-    columns: GridColumn[];
-    setIsResizing: (status: boolean) => void;
-    columnsDraggable: boolean;
-    columnsFilterable: boolean;
-    columnsHidable: boolean;
-    columnsResizable: boolean;
-    columnsSortable: boolean;
-    columnsSwap: (source: ColumnId, target: [ColumnId, "after" | "before"]) => void;
-    filterRenderer: (renderWrapper: (children: ReactNode) => ReactElement, columnIndex: number) => ReactElement;
-    headerWrapperRenderer: (columnIndex: number, header: ReactElement) => ReactElement;
-    id: string;
-    isLoading: boolean;
-    preview?: boolean;
-};
-
-export function GridHeader({
-    availableColumns,
-    columns,
-    setIsResizing,
-    columnsDraggable,
-    columnsFilterable,
-    columnsHidable,
-    columnsResizable,
-    columnsSortable,
-    columnsSwap,
-    filterRenderer,
-    headerWrapperRenderer,
-    id,
-    isLoading,
-    preview
-}: GridHeaderProps): ReactElement {
+export function GridHeader(): ReactElement {
+    const { columnsHidable, id: gridId } = useDatagridConfig();
+    const columnsStore = useColumnsStore();
+    const columns = columnsStore.visibleColumns;
     const [dragOver, setDragOver] = useState<[ColumnId, "before" | "after"] | undefined>(undefined);
     const [isDragging, setIsDragging] = useState<[ColumnId | undefined, ColumnId, ColumnId | undefined] | undefined>();
 
-    const renderFilterWrapper = useCallback(
-        (children: ReactNode) => (
-            <div className="filter" style={{ pointerEvents: isDragging ? "none" : undefined }}>
-                {children}
-            </div>
-        ),
-        [isDragging]
-    );
-
-    if (isLoading) {
+    if (!columnsStore.loaded) {
         return <HeaderSkeletonLoader size={columns.length} />;
     }
 
     return (
         <div className="widget-datagrid-grid-head" role="rowgroup">
             <div key="headers_row" className="tr" role="row">
                 <CheckboxColumnHeader key="headers_column_select_all" />
-                {columns.map((column, index) =>
-                    headerWrapperRenderer(
-                        index,
+                {columns.map(column => (
+                    <ColumnProvider column={column} key={`${column.columnId}`}>
                         <Header
-                            key={`${column.columnId}`}
-                            className={`align-column-${column.alignment}`}
-                            gridId={id}
-                            column={column}
-                            draggable={columnsDraggable}
                             dropTarget={dragOver}
-                            filterable={columnsFilterable}
-                            filterWidget={filterRenderer(renderFilterWrapper, column.columnIndex)}
-                            hidable={columnsHidable}
                             isDragging={isDragging}
-                            preview={preview}
-                            resizable={columnsResizable && columns.at(-1) !== column}
                             resizer={
                                 <ColumnResizer
-                                    onResizeStart={() => setIsResizing(true)}
-                                    onResizeEnds={() => setIsResizing(false)}
+                                    onResizeStart={() => columnsStore.setIsResizing(true)}
+                                    onResizeEnds={() => columnsStore.setIsResizing(false)}
                                     setColumnWidth={(width: number) => column.setSize(width)}
                                 />
                             }
-                            swapColumns={columnsSwap}
                             setDropTarget={setDragOver}
                             setIsDragging={setIsDragging}
-                            sortable={columnsSortable}
                         />
-                    )
-                )}
+                    </ColumnProvider>
+                ))}
                 {columnsHidable && (
                     <ColumnSelector
                         key="headers_column_selector"
-                        columns={availableColumns}
-                        id={id}
+                        columns={columnsStore.availableColumns}
+                        id={gridId}
                         visibleLength={columns.length}
                     />
                 )}

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

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import {
     Dispatch,
     DragEvent,
@@ -9,92 +10,83 @@ import {
     SetStateAction,
     useCallback
 } from "react";
-import classNames from "classnames";
+import { FaArrowsAltV } from "./icons/FaArrowsAltV";
 import { FaLongArrowAltDown } from "./icons/FaLongArrowAltDown";
 import { FaLongArrowAltUp } from "./icons/FaLongArrowAltUp";
-import { FaArrowsAltV } from "./icons/FaArrowsAltV";
 
-import { ColumnResizerProps } from "./ColumnResizer";
+import { useColumn, useColumnsStore, useDatagridConfig } from "../model/hooks/injection-hooks";
 import { ColumnId, GridColumn } from "../typings/GridColumn";
+import { ColumnResizerProps } from "./ColumnResizer";
 
 export interface HeaderProps {
-    className?: string;
-    gridId: string;
-    column: GridColumn;
-    sortable: boolean;
-    resizable: boolean;
-    filterable: boolean;
-    hidable: boolean;
-    draggable: boolean;
-    filterWidget?: ReactNode;
-    preview?: boolean;
+    isLast?: boolean;
     resizer: ReactElement<ColumnResizerProps>;
+
     dropTarget?: [ColumnId, "before" | "after"];
     isDragging?: [ColumnId | undefined, ColumnId, ColumnId | undefined];
     setDropTarget: Dispatch<SetStateAction<[ColumnId, "before" | "after"] | undefined>>;
     setIsDragging: Dispatch<SetStateAction<[ColumnId | undefined, ColumnId, ColumnId | undefined] | undefined>>;
-    swapColumns: (source: ColumnId, target: [ColumnId, "before" | "after"]) => void;
 }
 
 export function Header(props: HeaderProps): ReactElement {
-    const canSort = props.sortable && props.column.canSort;
-    const canDrag = props.draggable && (props.column.canDrag ?? false);
+    const { columnsFilterable, id: gridId } = useDatagridConfig();
+    const columnsStore = useColumnsStore();
+    const column = useColumn();
+    const { canDrag, canSort } = column;
+
     const draggableProps = useDraggable(
         canDrag,
-        props.swapColumns,
+        columnsStore.swapColumns.bind(columnsStore),
         props.dropTarget,
         props.setDropTarget,
         props.isDragging,
         props.setIsDragging
     );
 
-    const sortIcon = canSort ? getSortIcon(props.column) : null;
-    const sortProps = canSort ? getSortProps(props.column) : null;
-    const caption = props.column.header.trim();
+    const sortIcon = canSort ? getSortIcon(column) : null;
+    const sortProps = canSort ? getSortProps(column) : null;
+    const caption = column.header.trim();
 
     return (
         <div
-            aria-sort={getAriaSort(canSort, props.column)}
-            className={classNames(
-                "th",
-                {
-                    "hidden-column-preview":
-                        props.preview && (!props.column.isAvailable || (props.hidable && props.column.isHidden))
-                },
-                {
-                    [`drop-${props.dropTarget?.[1]}`]: props.column.columnId === props.dropTarget?.[0],
-                    dragging: props.column.columnId === props.isDragging?.[1],
-                    "dragging-over-self": props.column.columnId === props.isDragging?.[1] && !props.dropTarget
-                }
-            )}
+            aria-sort={getAriaSort(canSort, column)}
+            className={classNames("th", {
+                [`drop-${props.dropTarget?.[1]}`]: column.columnId === props.dropTarget?.[0],
+                dragging: column.columnId === props.isDragging?.[1],
+                "dragging-over-self": column.columnId === props.isDragging?.[1] && !props.dropTarget
+            })}
             role="columnheader"
             style={!canSort ? { cursor: "unset" } : undefined}
             title={caption}
-            ref={ref => props.column.setHeaderElementRef(ref)}
-            data-column-id={props.column.columnId}
+            ref={ref => column.setHeaderElementRef(ref)}
+            data-column-id={column.columnId}
             onDrop={draggableProps.onDrop}
             onDragEnter={draggableProps.onDragEnter}
             onDragOver={draggableProps.onDragOver}
         >
             <div
                 className={classNames("column-container")}
-                id={`${props.gridId}-column${props.column.columnId}`}
+                id={`${gridId}-column${column.columnId}`}
                 draggable={draggableProps.draggable}
                 onDragStart={draggableProps.onDragStart}
                 onDragEnd={draggableProps.onDragEnd}
             >
                 <div
-                    className={classNames("column-header", { clickable: canSort }, props.className)}
+                    className={classNames("column-header", { clickable: canSort }, `align-column-${column.alignment}`)}
                     style={{ pointerEvents: props.isDragging ? "none" : undefined }}
                     {...sortProps}
                     aria-label={canSort ? "sort " + caption : caption}
                 >
                     <span>{caption.length > 0 ? caption : "\u00a0"}</span>
                     {sortIcon}
                 </div>
-                {props.filterable && props.filterWidget}
+                {columnsFilterable && (
+                    <div className="filter" style={{ pointerEvents: props.isDragging ? "none" : undefined }}>
+                        {columnsStore.columnFilters[column.columnIndex]?.renderFilterWidgets()}
+                    </div>
+                )}
             </div>
-            {props.resizable && props.column.canResize && props.resizer}
+            {column.canResize ? props.resizer : null}
         </div>
     );
 }

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

@@ -1,11 +1,11 @@
 import classNames from "classnames";
 import { ObjectItem } from "mendix";
 import { ReactElement } from "react";
+import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { CellComponent, EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
-import { SelectorCell } from "./SelectorCell";
 import { CheckboxCell } from "./CheckboxCell";
-import { SelectActionHelper } from "../helpers/SelectActionHelper";
+import { SelectorCell } from "./SelectorCell";
 
 export interface RowProps<C extends GridColumn> {
     className?: string;
@@ -14,23 +14,21 @@ export interface RowProps<C extends GridColumn> {
     item: ObjectItem;
     index: number;
     showSelectorCell?: boolean;
-    selectableWrapper?: (column: number, children: ReactElement) => ReactElement;
     selectActionHelper: SelectActionHelper;
-    preview: boolean;
     totalRows: number;
     clickable: boolean;
     eventsController: EventsController;
 }
 
 export function Row<C extends GridColumn>(props: RowProps<C>): ReactElement {
-    const { CellComponent: Cell, selectActionHelper, preview, totalRows, eventsController } = props;
+    const { CellComponent: Cell, selectActionHelper, totalRows, eventsController } = props;
     const selected = selectActionHelper.isSelected(props.item);
     const ariaSelected = selectActionHelper.selectionType === "None" ? undefined : selected;
     const borderTop = props.index === 0;
 
     return (
         <div
-            className={classNames("tr", { "tr-selected": selected, "tr-preview": preview }, props.className)}
+            className={classNames("tr", { "tr-selected": selected }, props.className)}
             role="row"
             aria-selected={ariaSelected}
         >
@@ -52,12 +50,12 @@ export function Row<C extends GridColumn>(props: RowProps<C>): ReactElement {
                         columnIndex={selectActionHelper.showCheckboxColumn ? baseIndex + 1 : baseIndex}
                         item={props.item}
                         clickable={props.clickable}
-                        preview={preview}
+                        preview={false}
                         eventsController={eventsController}
                     />
                 );
 
-                return preview ? props.selectableWrapper?.(baseIndex, cell) : cell;
+                return cell;
             })}
             {props.showSelectorCell && (
                 <SelectorCell

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

@@ -1,27 +1,28 @@
 import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context";
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { ObjectItem } from "mendix";
+import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
+import { useColumnsStore } from "../model/hooks/injection-hooks";
 import { CellComponent, EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
 import { Row } from "./Row";
 
 interface RowsRendererProps {
     Cell: CellComponent<GridColumn>;
-    columns: GridColumn[];
     columnsHidable: boolean;
     eventsController: EventsController;
     focusController: FocusTargetController;
     interactive: boolean;
     preview: boolean;
     rowClass?: (item: ObjectItem) => string;
     rows: ObjectItem[];
-    selectableWrapper?: (column: number, children: ReactElement) => ReactElement;
     selectActionHelper: SelectActionHelper;
 }
 
-export function RowsRenderer(props: RowsRendererProps): ReactElement {
+export const RowsRenderer = observer(function RowsRenderer(props: RowsRendererProps): ReactElement {
+    const { visibleColumns } = useColumnsStore();
     return (
         <KeyNavProvider focusController={props.focusController}>
             {props.rows.map((item, rowIndex) => {
@@ -30,19 +31,17 @@ export function RowsRenderer(props: RowsRendererProps): ReactElement {
                         totalRows={props.rows.length}
                         clickable={props.interactive}
                         selectActionHelper={props.selectActionHelper}
-                        preview={props.preview}
                         eventsController={props.eventsController}
                         CellComponent={props.Cell}
                         className={props.rowClass?.(item)}
-                        columns={props.columns}
+                        columns={visibleColumns}
                         index={rowIndex}
                         item={item}
                         key={`row_${item.id}`}
                         showSelectorCell={props.columnsHidable}
-                        selectableWrapper={props.selectableWrapper}
                     />
                 );
             })}
         </KeyNavProvider>
     );
-}
+});