refactor: simplify boolean expressions

Author: yordan-st

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -22,51 +22,14 @@ $root: ".widget-datagrid";
             background-color: var(--bg-color-secondary, $bg-color-secondary);
             border-width: 0;
             border-color: var(--grid-border-color, $grid-border-color);
-            padding: 0 var(--spacing-medium, $spacing-medium);
+            padding: var(--spacing-medium, $spacing-medium);
             top: 0;
             min-width: 0;
             position: relative;
         }
     }
 
     .th {
-        &.dragging {
-            opacity: 0.5;
-            &.dragging-over-self {
-                opacity: 0.8;
-            }
-        }
-
-        &.drop-after:after,
-        &.drop-before:after {
-            content: "";
-            position: absolute;
-            top: 0;
-            height: 100%;
-            width: var(--spacing-smaller, $spacing-smaller);
-            background-color: var(--brand-primary, $dragging-color-effect);
-
-            z-index: 1;
-        }
-
-        &.drop-before {
-            &:after {
-                left: 0;
-            }
-            &:not(:first-child):after {
-                transform: translateX(-50%);
-            }
-        }
-
-        &.drop-after {
-            &:after {
-                right: 0;
-            }
-            &:not(:last-child):after {
-                transform: translateX(50%);
-            }
-        }
-
         /* Clickable column header (Sortable) */
         .clickable {
             cursor: pointer;
@@ -78,6 +41,8 @@ $root: ".widget-datagrid";
             align-self: stretch;
             cursor: col-resize;
             margin-right: -12px;
+            margin-top: calc(0px - var(--spacing-medium, 16px));
+            margin-bottom: calc(0px - var(--spacing-medium, 16px));
 
             &:hover .column-resizer-bar {
                 background-color: var(--brand-primary, $brand-primary);
@@ -92,24 +57,31 @@ $root: ".widget-datagrid";
             }
         }
 
+        &.locked-drag-active {
+            z-index: 2;
+        }
+
+        &.dragging-over-self {
+            opacity: 0.25;
+        }
+
         /* Drag handle */
         .drag-handle {
             cursor: grab;
             pointer-events: auto;
             position: relative;
-            padding: 4px;
-            // margin-inline-end: 4px;
+            width: var(--spacing-medium, $spacing-medium);
+            padding: 0;
             flex-grow: 0;
             flex-shrink: 0;
             display: flex;
             justify-content: center;
-            align-self: normal;
+            align-self: center;
             z-index: 1;
             opacity: 0;
             transition: opacity 0.15s ease;
 
             &:hover {
-                // background-color: var(--brand-primary-50, $brand-light);
                 svg {
                     color: var(--brand-primary, $brand-primary);
                 }
@@ -120,14 +92,12 @@ $root: ".widget-datagrid";
             &:focus-visible {
                 opacity: 1;
             }
-            svg {
+            > svg {
                 margin: 0;
-                width: 8px;
             }
         }
 
-        &:hover .drag-handle,
-        &:focus-within .drag-handle {
+        &:hover .drag-handle {
             opacity: 1;
         }
 
@@ -136,9 +106,19 @@ $root: ".widget-datagrid";
             background-color: var(--brand-primary-50, $brand-light);
         }
 
-        /* Remove left padding when drag handle is present */
-        &:has(.drag-handle) {
-            padding-left: 0;
+        /* Drag preview (dnd-kit) should look like hovered header */
+        &.drag-preview {
+            background-color: var(--brand-primary-50, $brand-light);
+            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+            border: 1px solid var(--gray-light, $gray-light);
+
+            .drag-handle {
+                opacity: 1;
+
+                svg {
+                    color: var(--brand-primary, $brand-primary);
+                }
+            }
         }
 
         /* Content of the column header */
@@ -148,7 +128,6 @@ $root: ".widget-datagrid";
             flex-grow: 1;
             align-self: stretch;
             min-width: 0;
-            padding: var(--spacing-small, $spacing-small) 0;
 
             &:not(:has(.filter)) {
                 .column-header {
@@ -164,7 +143,12 @@ $root: ".widget-datagrid";
             align-items: baseline;
             font-weight: 600;
 
-            span {
+            .column-caption {
+                user-select: text;
+                cursor: text;
+            }
+
+            span:not(.drag-handle) {
                 min-width: 0;
                 flex-grow: 1;
                 text-overflow: ellipsis;
@@ -174,26 +158,56 @@ $root: ".widget-datagrid";
             }
 
             svg {
-                margin-left: 8px;
+                margin-inline-start: 8px;
                 flex: 0 0 var(--btn-font-size, $btn-font-size);
                 color: var(--gray-dark, $gray-dark);
                 height: var(--btn-font-size, $btn-font-size);
                 align-self: center;
             }
 
+            .sort-button {
+                background: none;
+                border: none;
+                padding: 0;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                font-size: inherit;
+                color: inherit;
+                height: 100%;
+
+                &:focus:not(:focus-visible) {
+                    outline: none;
+                }
+
+                &:focus-visible {
+                    outline: 1px solid var(--brand-primary, $brand-primary);
+                }
+            }
+
             &:focus:not(:focus-visible) {
                 outline: none;
             }
 
             &:focus-visible {
                 outline: 1px solid var(--brand-primary, $brand-primary);
             }
+
+            &:has(.drag-handle) {
+                margin-inline-start: calc(var(--spacing-medium, 16px) * -1 + 1px);
+                .drag-handle svg {
+                    flex: none;
+                    margin: 0;
+                }
+            }
         }
 
         /* Header filter */
         .filter {
             display: flex;
-            margin-top: 4px;
+            > * {
+                margin-top: 4px;
+            }
             > .form-group {
                 margin-bottom: 0;
             }
@@ -351,6 +365,12 @@ $root: ".widget-datagrid";
     }
 }
 
+.table-compact .table .th:hover .column-header:has(.drag-handle),
+.table-compact .table .th.drag-preview .column-header:has(.drag-handle) {
+    margin-inline-start: 0;
+    transition: margin-inline-start 0.2s ease;
+}
+
 :where(.table .th .filter input:not([type="checkbox"])) {
     font-weight: normal;
     flex-grow: 1;

packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss

@@ -13,6 +13,7 @@ $brand-light: #e6eaff !default;
 $grid-selected-row-background: $brand-light !default;
 
 // Text and icon colors
+$gray-light: #6c7180 !default;
 $gray-dark: #606671 !default;
 $gray-darker: #3b4251 !default;
 $pagination-caption-color: #0a1325 !default;

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Breaking changes
+
+- The DOM structure is rewritten, which may break existing CSS styling. We recommend checking the custom styling if there is any in your project.
+
 ### Fixed
 
 - We added missing Dutch translations for Datagrid 2.

packages/pluggableWidgets/datagrid-web/package.json

@@ -41,6 +41,9 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@floating-ui/react": "^0.26.27",
         "@mendix/widget-plugin-component-kit": "workspace:*",
         "@mendix/widget-plugin-external-events": "workspace:*",

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

@@ -4,7 +4,6 @@ import { GUID, ObjectItem } from "mendix";
 import { Selectable } from "mendix/preview/Selectable";
 import { createContext, CSSProperties, PropsWithChildren, ReactElement, ReactNode, useContext } from "react";
 import { ColumnsPreviewType, DatagridPreviewProps } from "typings/DatagridProps";
-import { DragHandle } from "./components/DragHandle";
 import { FaArrowsAltV } from "./components/icons/FaArrowsAltV";
 import { FaEye } from "./components/icons/FaEye";
 import { ColumnPreview } from "./helpers/ColumnPreview";
@@ -159,7 +158,7 @@ function GridHeader(): ReactNode {
 }
 
 function ColumnHeader({ column }: { column: ColumnsPreviewType }): ReactNode {
-    const { columnsFilterable, columnsSortable, columnsHidable, columnsDraggable } = useProps();
+    const { columnsFilterable, columnsSortable, columnsHidable } = useProps();
     const columnPreview = new ColumnPreview(column, 0);
     const caption = columnPreview.header;
     const canSort = columnsSortable && columnPreview.canSort;
@@ -174,9 +173,6 @@ function ColumnHeader({ column }: { column: ColumnsPreviewType }): ReactNode {
             >
                 <div className="column-container">
                     <div className="column-header">
-                        {columnsDraggable && columnPreview.canDrag && (
-                            <DragHandle draggable={false} onDragStart={() => {}} onDragEnd={() => {}} />
-                        )}
                         <span>{caption.length > 0 ? caption : "\u00a0"}</span>
                         {canSort && <FaArrowsAltV />}
                     </div>

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

@@ -1,52 +1,54 @@
 import classNames from "classnames";
 import { ReactElement } from "react";
 import { ColumnHeader } from "./ColumnHeader";
-import { useColumn, useColumnsStore, useDatagridConfig, useHeaderDragnDropVM } from "../model/hooks/injection-hooks";
+import { useColumn, useColumnsStore, useDatagridConfig, useHeaderDndVM } from "../model/hooks/injection-hooks";
 import { ColumnResizerProps } from "./ColumnResizer";
 import { observer } from "mobx-react-lite";
-import { DragHandle } from "./DragHandle";
+import { useSortable } from "@dnd-kit/sortable";
 
 export interface ColumnContainerProps {
     isLast?: boolean;
     resizer: ReactElement<ColumnResizerProps>;
 }
 
 export const ColumnContainer = observer(function ColumnContainer(props: ColumnContainerProps): ReactElement {
-    const { columnsFilterable, id: gridId } = useDatagridConfig();
-    const { columnFilters } = useColumnsStore();
+    const { columnsFilterable, columnsResizable, columnsSortable, id: gridId } = useDatagridConfig();
+    const columnsStore = useColumnsStore();
+    const { columnFilters } = columnsStore;
     const column = useColumn();
     const { canSort, columnId, columnIndex, canResize, sortDir, header } = column;
-    const vm = useHeaderDragnDropVM();
+    const isSortable = columnsSortable && canSort;
+    const isResizable = columnsResizable && canResize;
     const caption = header.trim();
+    const vm = useHeaderDndVM();
+    const { setNodeRef, transform, transition, isDragging } = useSortable({
+        id: columnId
+    });
+    const style = vm.getHeaderCellStyle(columnId, { transform, transition });
+    const isLocked = !column.canDrag;
 
     return (
         <div
-            aria-sort={getAriaSort(canSort, sortDir)}
+            aria-sort={getAriaSort(isSortable, sortDir)}
             className={classNames("th", {
-                [`drop-${vm.dropTarget?.[1]}`]: columnId === vm.dropTarget?.[0],
-                dragging: columnId === vm.dragging?.[1],
-                "dragging-over-self": columnId === vm.dragging?.[1] && !vm.dropTarget
+                "dragging-over-self": isDragging,
+                "locked-drag-active": isLocked && vm.isDragging
             })}
             role="columnheader"
-            style={!canSort ? { cursor: "unset" } : undefined}
+            style={style}
             title={caption}
+            ref={setNodeRef}
             data-column-id={columnId}
-            onDrop={vm.isDraggable ? vm.handleOnDrop : undefined}
-            onDragEnter={vm.isDraggable ? vm.handleDragEnter : undefined}
-            onDragOver={vm.isDraggable ? vm.handleDragOver : undefined}
         >
-            {vm.isDraggable && (
-                <DragHandle draggable={vm.isDraggable} onDragStart={vm.handleDragStart} onDragEnd={vm.handleDragEnd} />
-            )}
             <div className={classNames("column-container")} id={`${gridId}-column${columnId}`}>
                 <ColumnHeader />
                 {columnsFilterable && (
-                    <div className="filter" style={{ pointerEvents: vm.dragging ? "none" : undefined }}>
+                    <div className="filter" style={{ pointerEvents: vm.isDragging ? "none" : undefined }}>
                         {columnFilters[columnIndex]?.renderFilterWidgets()}
                     </div>
                 )}
             </div>
-            {canResize ? props.resizer : null}
+            {isResizable ? props.resizer : null}
         </div>
     );
 });