refactor: update components to use new state management

Author: yordan-st

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

@@ -0,0 +1,128 @@
+import classNames from "classnames";
+import { HTMLAttributes, KeyboardEvent, ReactElement, ReactNode, useMemo } from "react";
+import { FaArrowsAltV } from "./icons/FaArrowsAltV";
+import { FaLongArrowAltDown } from "./icons/FaLongArrowAltDown";
+import { FaLongArrowAltUp } from "./icons/FaLongArrowAltUp";
+
+import ColumnHeader from "./ColumnHeader";
+
+import { useColumn, useColumnsStore, useDatagridConfig, useHeaderDragDrop } from "../model/hooks/injection-hooks";
+import { GridColumn } from "../typings/GridColumn";
+import { ColumnResizerProps } from "./ColumnResizer";
+import { ColumnHeaderViewModel } from "../features/column/ColumnHeader.viewModel";
+import { observer } from "mobx-react-lite";
+
+export interface ColumnContainerProps {
+    isLast?: boolean;
+    resizer: ReactElement<ColumnResizerProps>;
+}
+
+export const ColumnContainer = observer(function ColumnContainer(props: ColumnContainerProps): ReactElement {
+    const { columnsFilterable, id: gridId } = useDatagridConfig();
+    const columnsStore = useColumnsStore();
+    const column = useColumn();
+    const { canDrag, canSort } = column;
+
+    const headerDragDropStore = useHeaderDragDrop();
+    const columnHeaderVM = useMemo(
+        () =>
+            new ColumnHeaderViewModel({
+                dndStore: headerDragDropStore,
+                columnsStore,
+                columnsDraggable: canDrag
+            }),
+        [headerDragDropStore, columnsStore, canDrag]
+    );
+    const draggableProps = columnHeaderVM.draggableProps;
+    const dropTarget = columnHeaderVM.dropTarget;
+    const isDragging = columnHeaderVM.dragging;
+
+    const sortProps = canSort ? getSortProps(column) : null;
+    const caption = column.header.trim();
+
+    return (
+        <div
+            aria-sort={getAriaSort(canSort, column)}
+            className={classNames("th", {
+                [`drop-${dropTarget?.[1]}`]: column.columnId === dropTarget?.[0],
+                dragging: column.columnId === isDragging?.[1],
+                "dragging-over-self": column.columnId === isDragging?.[1] && !dropTarget
+            })}
+            role="columnheader"
+            style={!canSort ? { cursor: "unset" } : undefined}
+            title={caption}
+            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={`${gridId}-column${column.columnId}`}
+                draggable={draggableProps.draggable}
+                onDragStart={draggableProps.onDragStart}
+                onDragEnd={draggableProps.onDragEnd}
+            >
+                <ColumnHeader
+                    sortProps={sortProps}
+                    canSort={canSort}
+                    caption={caption}
+                    isDragging={isDragging}
+                    columnAlignment={column.alignment}
+                >
+                    {canSort ? <SortIcon /> : null}
+                </ColumnHeader>
+                {columnsFilterable && (
+                    <div className="filter" style={{ pointerEvents: isDragging ? "none" : undefined }}>
+                        {columnsStore.columnFilters[column.columnIndex]?.renderFilterWidgets()}
+                    </div>
+                )}
+            </div>
+            {column.canResize ? props.resizer : null}
+        </div>
+    );
+});
+
+function SortIcon(): ReactNode {
+    const column = useColumn();
+    switch (column.sortDir) {
+        case "asc":
+            return <FaLongArrowAltUp />;
+        case "desc":
+            return <FaLongArrowAltDown />;
+        default:
+            return <FaArrowsAltV />;
+    }
+}
+
+function getAriaSort(canSort: boolean, column: GridColumn): "ascending" | "descending" | "none" | undefined {
+    if (!canSort) {
+        return undefined;
+    }
+
+    switch (column.sortDir) {
+        case "asc":
+            return "ascending";
+        case "desc":
+            return "descending";
+        default:
+            return "none";
+    }
+}
+
+function getSortProps(column: GridColumn): HTMLAttributes<HTMLDivElement> {
+    return {
+        onClick: () => {
+            column.toggleSort();
+        },
+        onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                column.toggleSort();
+            }
+        },
+        role: "button",
+        tabIndex: 0
+    };
+}

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

@@ -0,0 +1,29 @@
+import classNames from "classnames";
+import { HTMLAttributes, ReactElement, ReactNode } from "react";
+
+export interface ColumnHeaderProps {
+    children?: ReactNode;
+    sortProps?: HTMLAttributes<HTMLDivElement> | null;
+    canSort: boolean;
+    caption: string;
+    isDragging?: [string | undefined, string, string | undefined] | undefined;
+    columnAlignment?: "left" | "center" | "right";
+}
+
+export default function ColumnHeader(props: ColumnHeaderProps): ReactElement {
+    return (
+        <div
+            className={classNames(
+                "column-header",
+                { clickable: props.canSort },
+                `align-column-${props.columnAlignment}`
+            )}
+            style={{ pointerEvents: props.isDragging ? "none" : undefined }}
+            {...props.sortProps}
+            aria-label={props.canSort ? "sort " + props.caption : props.caption}
+        >
+            <span>{props.caption.length > 0 ? props.caption : "\u00a0"}</span>
+            {props.children}
+        </div>
+    );
+}

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

@@ -1,19 +1,16 @@
-import { ReactElement, useState } from "react";
+import { ReactElement } 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 { ColumnContainer } from "./ColumnContainer";
 import { HeaderSkeletonLoader } from "./loader/HeaderSkeletonLoader";
 
 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>();
 
     if (!columnsStore.loaded) {
         return <HeaderSkeletonLoader size={columns.length} />;
@@ -25,18 +22,14 @@ export function GridHeader(): ReactElement {
                 <CheckboxColumnHeader key="headers_column_select_all" />
                 {columns.map(column => (
                     <ColumnProvider column={column} key={`${column.columnId}`}>
-                        <Header
-                            dropTarget={dragOver}
-                            isDragging={isDragging}
+                        <ColumnContainer
                             resizer={
                                 <ColumnResizer
                                     onResizeStart={() => columnsStore.setIsResizing(true)}
                                     onResizeEnds={() => columnsStore.setIsResizing(false)}
                                     setColumnWidth={(width: number) => column.setSize(width)}
                                 />
                             }
-                            setDropTarget={setDragOver}
-                            setIsDragging={setIsDragging}
                         />
                     </ColumnProvider>
                 ))}