+ {columnsDraggable && (
+ {}} onDragEnd={() => {}} />
+ )}
{caption.length > 0 ? caption : "\u00a0"}
{canSort && }
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/ColumnContainer.tsx b/packages/pluggableWidgets/datagrid-web/src/components/ColumnContainer.tsx
new file mode 100644
index 0000000000..cd08a6aa89
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/components/ColumnContainer.tsx
@@ -0,0 +1,64 @@
+import classNames from "classnames";
+import { ReactElement } from "react";
+import { ColumnHeader } from "./ColumnHeader";
+import { useColumn, useColumnsStore, useDatagridConfig, useHeaderDragnDropVM } from "../model/hooks/injection-hooks";
+import { ColumnResizerProps } from "./ColumnResizer";
+import { observer } from "mobx-react-lite";
+
+export interface ColumnContainerProps {
+ isLast?: boolean;
+ resizer: ReactElement
;
+}
+
+export const ColumnContainer = observer(function ColumnContainer(props: ColumnContainerProps): ReactElement {
+ const { columnsFilterable, id: gridId } = useDatagridConfig();
+ const { columnFilters } = useColumnsStore();
+ const column = useColumn();
+ const { canSort, columnId, columnIndex, canResize, sortDir, header } = column;
+ const vm = useHeaderDragnDropVM();
+ const caption = header.trim();
+
+ return (
+ column.setHeaderElementRef(ref)}
+ data-column-id={columnId}
+ onDrop={vm.handleOnDrop}
+ onDragEnter={vm.handleDragEnter}
+ onDragOver={vm.handleDragOver}
+ >
+
+
+ {columnsFilterable && (
+
+ {columnFilters[columnIndex]?.renderFilterWidgets()}
+
+ )}
+
+ {canResize ? props.resizer : null}
+
+ {vm.isDraggable && (
+
+ )}
+ {caption.length > 0 ? caption : "\u00a0"}
+ {canSort ? : null}
+
+ );
+});
+
+function SortIcon({ direction }: SortIconProps): ReactNode {
+ switch (direction) {
+ case "asc":
+ return ;
+ case "desc":
+ return ;
+ default:
+ return ;
+ }
+}
+
+function getSortProps(toggleSort: () => void): HTMLAttributes {
+ return {
+ onClick: () => {
+ toggleSort();
+ },
+ onKeyDown: (e: KeyboardEvent) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ toggleSort();
+ }
+ },
+ role: "button",
+ tabIndex: 0
+ };
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/ColumnResizer.tsx b/packages/pluggableWidgets/datagrid-web/src/components/ColumnResizer.tsx
index 90dc7f7449..bcbc4bcfe9 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/ColumnResizer.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/ColumnResizer.tsx
@@ -1,24 +1,18 @@
import { useEventCallback } from "@mendix/widget-plugin-hooks/useEventCallback";
import { MouseEvent, ReactElement, TouchEvent, useCallback, useEffect, useRef, useState } from "react";
+import { useColumn, useColumnsStore } from "../model/hooks/injection-hooks";
export interface ColumnResizerProps {
minWidth?: number;
- setColumnWidth: (width: number) => void;
- onResizeEnds?: () => void;
- onResizeStart?: () => void;
}
-export function ColumnResizer({
- minWidth = 50,
- setColumnWidth,
- onResizeEnds,
- onResizeStart
-}: ColumnResizerProps): ReactElement {
+export function ColumnResizer({ minWidth = 50 }: ColumnResizerProps): ReactElement {
+ const column = useColumn();
+ const columnsStore = useColumnsStore();
const [isResizing, setIsResizing] = useState(false);
const [startPosition, setStartPosition] = useState(0);
const [currentWidth, setCurrentWidth] = useState(0);
const resizerReference = useRef(null);
- const onStart = useEventCallback(onResizeStart);
const onStartDrag = useCallback(
(e: TouchEvent & MouseEvent): void => {
@@ -26,12 +20,12 @@ export function ColumnResizer({
setStartPosition(mouseX);
setIsResizing(true);
if (resizerReference.current) {
- const column = resizerReference.current.parentElement!;
- setCurrentWidth(column.offsetWidth);
+ const columnElement = resizerReference.current.parentElement!;
+ setCurrentWidth(columnElement.offsetWidth);
}
- onStart();
+ columnsStore.setIsResizing(true);
},
- [onStart]
+ [columnsStore]
);
const onEndDrag = useCallback((): void => {
if (!isResizing) {
@@ -39,9 +33,9 @@ export function ColumnResizer({
}
setIsResizing(false);
setCurrentWidth(0);
- onResizeEnds?.();
- }, [onResizeEnds, isResizing]);
- const setColumnWidthStable = useEventCallback(setColumnWidth);
+ columnsStore.setIsResizing(false);
+ }, [columnsStore, isResizing]);
+ const setColumnWidthStable = useEventCallback((width: number) => column.setSize(width));
const onMouseMove = useCallback(
(e: TouchEvent & MouseEvent & Event): void => {
if (!isResizing) {
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/DragHandle.tsx b/packages/pluggableWidgets/datagrid-web/src/components/DragHandle.tsx
new file mode 100644
index 0000000000..d988dc4b23
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/components/DragHandle.tsx
@@ -0,0 +1,46 @@
+import { DragEvent, DragEventHandler, MouseEvent, ReactElement } from "react";
+import { FaGripVertical } from "./icons/FaGripVertical";
+
+interface DragHandleProps {
+ draggable: boolean;
+ onDragStart?: DragEventHandler;
+ onDragEnd?: DragEventHandler;
+}
+export function DragHandle({ draggable, onDragStart, onDragEnd }: DragHandleProps): ReactElement {
+ const handleMouseDown = (e: MouseEvent): void => {
+ // Only stop propagation, don't prevent default - we need default for drag to work
+ e.stopPropagation();
+ };
+
+ const handleClick = (e: MouseEvent): void => {
+ // Stop click events from bubbling to prevent sorting
+ e.stopPropagation();
+ e.preventDefault();
+ };
+
+ const handleDragStart = (e: DragEvent): void => {
+ // Don't stop propagation here - let the drag start properly
+ if (onDragStart) {
+ onDragStart(e);
+ }
+ };
+
+ const handleDragEnd = (e: DragEvent): void => {
+ if (onDragEnd) {
+ onDragEnd(e);
+ }
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx
index 39b86c6d3a..029dfc3bae 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx
+++ b/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 ;
@@ -25,19 +22,7 @@ export function GridHeader(): ReactElement {
{columns.map(column => (
- columnsStore.setIsResizing(true)}
- onResizeEnds={() => columnsStore.setIsResizing(false)}
- setColumnWidth={(width: number) => column.setSize(width)}
- />
- }
- setDropTarget={setDragOver}
- setIsDragging={setIsDragging}
- />
+ } />
))}
{columnsHidable && (
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Header.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Header.tsx
deleted file mode 100644
index ed334d2ad9..0000000000
--- a/packages/pluggableWidgets/datagrid-web/src/components/Header.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import classNames from "classnames";
-import {
- Dispatch,
- DragEvent,
- DragEventHandler,
- HTMLAttributes,
- KeyboardEvent,
- ReactElement,
- ReactNode,
- SetStateAction,
- useCallback
-} from "react";
-import { FaArrowsAltV } from "./icons/FaArrowsAltV";
-import { FaLongArrowAltDown } from "./icons/FaLongArrowAltDown";
-import { FaLongArrowAltUp } from "./icons/FaLongArrowAltUp";
-
-import { useColumn, useColumnsStore, useDatagridConfig } from "../model/hooks/injection-hooks";
-import { ColumnId, GridColumn } from "../typings/GridColumn";
-import { ColumnResizerProps } from "./ColumnResizer";
-
-export interface HeaderProps {
- isLast?: boolean;
- resizer: ReactElement;
-
- dropTarget?: [ColumnId, "before" | "after"];
- isDragging?: [ColumnId | undefined, ColumnId, ColumnId | undefined];
- setDropTarget: Dispatch>;
- setIsDragging: Dispatch>;
-}
-
-export function Header(props: HeaderProps): ReactElement {
- const { columnsFilterable, id: gridId, columnsDraggable, columnsResizable, columnsSortable } = useDatagridConfig();
- const columnsStore = useColumnsStore();
- const column = useColumn();
- const canDrag = columnsDraggable && column.canDrag;
- const canSort = columnsSortable && column.canSort;
- const canResize = columnsResizable && column.canResize;
-
- const draggableProps = useDraggable(
- canDrag,
- columnsStore.swapColumns.bind(columnsStore),
- props.dropTarget,
- props.setDropTarget,
- props.isDragging,
- props.setIsDragging
- );
-
- const sortIcon = canSort ? getSortIcon(column) : null;
- const sortProps = canSort ? getSortProps(column) : null;
- const caption = column.header.trim();
-
- return (
- column.setHeaderElementRef(ref)}
- data-column-id={column.columnId}
- onDrop={draggableProps.onDrop}
- onDragEnter={draggableProps.onDragEnter}
- onDragOver={draggableProps.onDragOver}
- >
-
-
- {caption.length > 0 ? caption : "\u00a0"}
- {sortIcon}
-
- {columnsFilterable && (
-
- {columnsStore.columnFilters[column.columnIndex]?.renderFilterWidgets()}
-
- )}
-
- {canResize ? props.resizer : null}
-
} />
+