@teselagen/ui 0.10.4 → 0.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/src/DataTable/Columns.js

@@ -9,7 +9,8 @@ import {
   noop,
   cloneDeep,
   get,
-  padStart
+  padStart,
+  flatMap
 } from "lodash-es";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -38,6 +39,7 @@ import { change as _change } from "redux-form";
 import { RenderCell } from "./RenderCell";
 import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 import { showContextMenu } from "../utils/menuUtils";
+import { dragNoticeEl } from "./dragNoticeEl";
 
 dayjs.extend(localizedFormat);
 
@@ -171,12 +173,13 @@ const RenderColumnHeader = ({
       })}
       onContextMenu={e => {
         if (!withDisplayOptions) {
-          return
+          return;
         }
         e.preventDefault();
         e.persist();
         showContextMenu(
           [
+            dragNoticeEl,
             {
               text: "Hide Column",
               disabled: onlyOneVisibleColumn,
@@ -917,7 +920,10 @@ export const useColumns = ({
     });
   }
 
-  const tableColumns = columns.map(column => {
+  const tableColumns = flatMap(columns, column => {
+    if (column.isHidden) {
+      return [];
+    }
     const tableColumn = {
       ...column,
       Header: RenderColumnHeader({
@@ -950,8 +956,10 @@ export const useColumns = ({
       getHeaderProps: () => ({
         // needs to be a string because it is getting passed
         // to the dom
-        immovable: column.immovable ? "true" : "false",
-        columnindex: column.columnIndex
+        immovable:
+          column.type === "action" || column.immovable ? "true" : "false",
+        columnindex: column.columnIndex,
+        path: column.path
       })
     };
     const noEllipsis = column.noEllipsis;

package/src/DataTable/DisplayOptions.js

@@ -1,17 +1,9 @@
 import React, { useState } from "react";
-import { map, isEmpty, noop, startCase } from "lodash-es";
-import {
-  Button,
-  Checkbox,
-  Menu,
-  MenuItem,
-  Classes,
-  InputGroup,
-  Popover,
-  Switch
-} from "@blueprintjs/core";
-import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
+import { noop } from "lodash-es";
+import { Button, Menu, Classes, Popover, Switch } from "@blueprintjs/core";
 import InfoHelper from "../InfoHelper";
+import DraggableColumnOptions from "./DraggableColumnOptions";
+import { dragNoticeEl } from "./dragNoticeEl";
 
 const DisplayOptions = ({
   compact,
@@ -22,13 +14,13 @@ const DisplayOptions = ({
   resetDefaultVisibility = noop,
   updateColumnVisibility = noop,
   updateTableDisplayDensity,
+  moveColumnPersist = noop,
   showForcedHiddenColumns,
   setShowForcedHidden,
   hasOptionForForcedHidden,
   schema
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [searchTerms, setSearchTerms] = useState({});
 
   const changeTableDensity = e => {
     updateTableDisplayDensity(e.target.value);
@@ -41,99 +33,13 @@ const DisplayOptions = ({
     return null; //don't show antyhing!
   }
   const { fields } = schema;
-  const fieldGroups = {};
-  const mainFields = [];
-
-  fields.forEach(field => {
-    if (field.hideInMenu) return;
-    if (!field.fieldGroup) return mainFields.push(field);
-    if (!fieldGroups[field.fieldGroup]) fieldGroups[field.fieldGroup] = [];
-    fieldGroups[field.fieldGroup].push(field);
-  });
 
   let numVisible = 0;
 
-  const getFieldCheckbox = (field, i) => {
-    const { displayName, isHidden, isForcedHidden, path, subFrag } = field;
-    if (isForcedHidden) return;
-    if (!isHidden) numVisible++;
-    return (
-      <Checkbox
-        name={`${path}-${i}`}
-        key={path || i}
-        onChange={() => {
-          if (numVisible <= 1 && !isHidden) {
-            return window.toastr.warning(
-              "We have to display at least one column :)"
-            );
-          }
-          updateColumnVisibility({ shouldShow: isHidden, path });
-        }}
-        checked={!isHidden}
-        label={
-          <span style={{ display: "flex", marginTop: -17 }}>
-            {displayName}
-            {subFrag && (
-              <InfoHelper
-                icon="warning-sign"
-                intent="warning"
-                style={{ marginLeft: 5 }}
-              >
-                Viewing this column may cause the table to load slower
-              </InfoHelper>
-            )}
-          </span>
-        }
-      />
-    );
-  };
-
-  let fieldGroupMenu;
-  if (!isEmpty(fieldGroups)) {
-    fieldGroupMenu = map(fieldGroups, (groupFields, groupName) => {
-      const searchTerm = searchTerms[groupName] || "";
-      const anyVisible = groupFields.some(
-        field => !field.isHidden && !field.isForcedHidden
-      );
-      const anyNotForcedHidden = groupFields.some(
-        field => !field.isForcedHidden
-      );
-      if (!anyNotForcedHidden) return;
-      return (
-        <MenuItem key={groupName} text={groupName}>
-          <InputGroup
-            leftIcon="search"
-            value={searchTerm}
-            onChange={e => {
-              setSearchTerms(prev => ({
-                ...prev,
-                [groupName]: e.target.value
-              }));
-            }}
-          />
-          <Button
-            className={Classes.MINIMAL}
-            text={(anyVisible ? "Hide" : "Show") + " All"}
-            style={{ margin: "10px 0" }}
-            onClick={() => {
-              updateColumnVisibility({
-                shouldShow: !anyVisible,
-                paths: groupFields.map(field => field.path)
-              });
-            }}
-          />
-          {groupFields
-            .filter(
-              field =>
-                startCase(getCCDisplayName(field)) // We have to use startCase with the camelCase here because the displayName is not always a string
-                  .toLowerCase()
-                  .indexOf(searchTerm.toLowerCase()) > -1
-            )
-            .map(getFieldCheckbox)}
-        </MenuItem>
-      );
-    });
-  }
+  // Count number of visible fields
+  fields.forEach(field => {
+    if (!field.isHidden && field.type !== "action") numVisible++;
+  });
 
   return (
     <Popover
@@ -170,21 +76,29 @@ const DisplayOptions = ({
             <h5
               style={{
                 fontWeight: "bold",
-                marginBottom: 10,
+                marginBottom: 0,
                 marginTop: 10,
                 display: "flex"
               }}
             >
               Displayed Columns: &nbsp;
-              {doNotSearchHiddenColumns && <InfoHelper>
-                Note: Hidden columns will NOT be used when searching the
-                datatable
-              </InfoHelper>}
+              {doNotSearchHiddenColumns && (
+                <InfoHelper>
+                  Note: Hidden columns will NOT be used when searching the
+                  datatable
+                </InfoHelper>
+              )}
             </h5>
-            <div style={{ maxHeight: 260, overflowY: "auto", padding: 2 }}>
-              {mainFields.map(getFieldCheckbox)}
+            {dragNoticeEl}
+
+            <div style={{ maxHeight: 360, overflowY: "auto", padding: 2 }}>
+              <DraggableColumnOptions
+                fields={fields}
+                onVisibilityChange={updateColumnVisibility}
+                moveColumnPersist={moveColumnPersist}
+                numVisible={numVisible}
+              />
             </div>
-            <div>{fieldGroupMenu}</div>
             {hasOptionForForcedHidden && (
               <div style={{ marginTop: 15 }}>
                 <Switch
@@ -194,22 +108,15 @@ const DisplayOptions = ({
                 />
               </div>
             )}
-            <div
-              style={{
-                width: "100%",
-                display: "flex",
-                justifyContent: "flex-end"
-              }}
+            <Button
+              style={{ marginTop: 5 }}
+              onClick={resetDefaultVisibility}
+              title="Display Options"
+              icon="reset"
+              minimal
             >
-              <Button
-                onClick={resetDefaultVisibility}
-                title="Display Options"
-                icon="reset"
-                minimal
-              >
-                Reset Column Visibilites
-              </Button>
-            </div>
+              Reset Column Visibilites
+            </Button>
           </div>
         </Menu>
       }

package/src/DataTable/DraggableColumnOptions.js

@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from "react";
+import { DndContext, MouseSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+  arrayMove
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Checkbox, Classes } from "@blueprintjs/core";
+import InfoHelper from "../InfoHelper";
+
+const DraggableColumnOption = ({
+  field,
+  index,
+  onVisibilityChange,
+  numVisible
+}) => {
+  const { displayName, isHidden, path, subFrag, immovable, type } = field;
+
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id: path,
+      disabled: immovable === "true"
+    });
+
+  if (type === "action") {
+    return null; // Skip action columns
+  }
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    cursor: "grab",
+    marginBottom: 5
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="SortableItem"
+      data-path={path}
+      {...attributes}
+      {...listeners}
+    >
+      <Checkbox
+        name={`${path}-${index}`}
+        key={index}
+        onChange={() => {
+          if (numVisible <= 1 && !isHidden) {
+            return window.toastr.warning(
+              "We have to display at least one column :)"
+            );
+          }
+          onVisibilityChange({ shouldShow: isHidden, path });
+        }}
+        checked={!isHidden}
+        label={
+          <span style={{ display: "flex", marginTop: -17 }}>
+            {displayName}{" "}
+            {field.fieldGroup && (
+              <span
+                style={{ fontSize: 10, marginLeft: 5, marginTop: 2 }}
+                className={Classes.TEXT_MUTED}
+              >
+                ({field.fieldGroup})
+              </span>
+            )}
+            {subFrag && (
+              <InfoHelper
+                icon="warning-sign"
+                intent="warning"
+                style={{ marginLeft: 5 }}
+              >
+                Viewing this column may cause the table to load slower
+              </InfoHelper>
+            )}
+          </span>
+        }
+      />
+    </div>
+  );
+};
+
+const DraggableColumnOptions = ({
+  fields,
+  onVisibilityChange,
+  moveColumnPersist,
+  numVisible
+}) => {
+  const [sortedFields, setSortedFields] = useState(fields);
+
+  // Update sorted fields when external fields change
+  useEffect(() => {
+    setSortedFields(fields);
+  }, [fields]);
+
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  });
+
+  const sensors = useSensors(mouseSensor);
+
+  const handleDragStart = event => {
+    // Add a class to the body to indicate dragging state
+    document.body.classList.add("column-dragging");
+
+    // Add a class to the active drag item
+    const { active } = event;
+    if (active) {
+      const activeNode = document.querySelector(`[data-path="${active.id}"]`);
+      if (activeNode) {
+        activeNode.classList.add("dragging");
+      }
+    }
+  };
+
+  const handleDragEnd = event => {
+    // Remove the dragging class
+    document.body.classList.remove("column-dragging");
+
+    // Remove the class from the active drag item
+    const draggingItem = document.querySelector(".SortableItem.dragging");
+    if (draggingItem) {
+      draggingItem.classList.remove("dragging");
+    }
+
+    const { active, over } = event;
+
+    if (!over || !active || active.id === over.id) {
+      return;
+    }
+
+    const oldIndex = sortedFields.findIndex(f => f.path === active.id);
+    const newIndex = sortedFields.findIndex(f => f.path === over.id);
+
+    // Update the local state immediately for a smooth UI
+    const newSortedFields = arrayMove(sortedFields, oldIndex, newIndex);
+    setSortedFields(newSortedFields);
+
+    // Notify parent component to persist the change
+    moveColumnPersist({ oldIndex, newIndex });
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      modifiers={[restrictToVerticalAxis]}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext
+        items={sortedFields.map(field => field.path)}
+        strategy={verticalListSortingStrategy}
+      >
+        <div>
+          {sortedFields.map((field, index) => (
+            <DraggableColumnOption
+              key={field.path || index}
+              field={field}
+              index={index}
+              onVisibilityChange={onVisibilityChange}
+              numVisible={numVisible}
+            />
+          ))}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+export default DraggableColumnOptions;

package/src/DataTable/SortableColumns.js

@@ -1,21 +1,34 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { MouseSensor, useSensor, useSensors, DndContext } from "@dnd-kit/core";
 import {
   SortableContext,
-  horizontalListSortingStrategy
+  horizontalListSortingStrategy,
+  arrayMove as dndArrayMove
 } from "@dnd-kit/sortable";
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 
 const CustomTheadComponent = ({
   children: _children,
   className,
-  onSortEnd,
-  onSortStart,
+  moveColumn,
+  sortedItemsFull,
   style
 }) => {
   // We need to do this because react table gives the children wrapped
   // in another component
   const children = _children.props.children;
+  const [sortedItems, setSortedItems] = useState(() =>
+    children.map(c => {
+      // Use the path as the ID for sorting instead of the index
+      return c.props.path || c.key.split("-")[1];
+    })
+  );
+
+  // Update local state when children change
+  useEffect(() => {
+    setSortedItems(children.map(c => c.props.path || c.key.split("-")[1]));
+  }, [children]);
+
   const mouseSensor = useSensor(MouseSensor, {
     activationConstraint: {
       distance: 10
@@ -34,15 +47,21 @@ const CustomTheadComponent = ({
       return;
     }
 
-    onSortEnd({
-      oldIndex: parseInt(active.id),
-      newIndex: parseInt(over.id)
-    });
+    // Update local state immediately for smooth UI
+    // Use path ID directly instead of parsing as integer
+    const oldPath = active.id;
+    const newPath = over.id;
+    const oldIndex = sortedItemsFull.indexOf(oldPath);
+    const newIndex = sortedItemsFull.indexOf(newPath);
+    const newSortedItems = dndArrayMove(sortedItemsFull, oldIndex, newIndex);
+    setSortedItems(newSortedItems);
+
+    // Pass to parent for persistence
+    moveColumn({ oldIndex, newIndex });
   };
 
   return (
     <DndContext
-      onDragStart={onSortStart}
       onDragEnd={handleDragEnd}
       modifiers={[restrictToHorizontalAxis]}
       sensors={sensors}
@@ -50,7 +69,7 @@ const CustomTheadComponent = ({
       <div className={"rt-thead " + className} style={style}>
         <div className="rt-tr">
           <SortableContext
-            items={children.map((_, index) => `${index}`)}
+            items={sortedItems}
             strategy={horizontalListSortingStrategy}
           >
             {children}
@@ -61,7 +80,13 @@ const CustomTheadComponent = ({
   );
 };
 
-const SortableColumns = ({ className, style, children, moveColumn }) => {
+const SortableColumns = ({
+  className,
+  style,
+  children,
+  moveColumn,
+  sortedItemsFull
+}) => {
   const shouldCancelStart = e => {
     const className = e.target.className;
     // if its an svg then it's a blueprint icon
@@ -70,25 +95,12 @@ const SortableColumns = ({ className, style, children, moveColumn }) => {
     );
   };
 
-  const onSortEnd = (...args) => {
-    const { oldIndex, newIndex } = args[0];
-    document.body.classList.remove("drag-active");
-    moveColumn({
-      oldIndex,
-      newIndex
-    });
-  };
-
-  const onSortStart = () => {
-    document.body.classList.add("drag-active");
-  };
-
   return (
     <CustomTheadComponent
       className={className}
       style={style}
-      onSortStart={onSortStart}
-      onSortEnd={onSortEnd}
+      sortedItemsFull={sortedItemsFull}
+      moveColumn={moveColumn}
       helperClass="above-dialog"
       shouldCancelStart={shouldCancelStart}
     >

package/src/DataTable/ThComponent.js

@@ -9,19 +9,31 @@ export const ThComponent = ({
   className,
   children,
   style,
+  path,
   columnindex,
   ...rest
 }) => {
-  const index = columnindex ?? -1;
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({
-      id: `${index}`,
-      disabled: immovable === "true"
-    });
-
+  const index = columnindex ? path : -1;
+  const disabled = !path || immovable === "true" || immovable === true;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging: _isDragging
+  } = useSortable({
+    id: path,
+    disabled
+  });
+  const isDragging = _isDragging && !disabled;
+  if (transform) {
+    transform.scaleX = 1; // Prevent column header from shrinking/expanding during drag (looks bad)
+  }
   const sortStyles = {
     transform: CSS.Transform.toString(transform),
-    transition
+    transition,
+    zIndex: isDragging ? 999 : undefined
   };
 
   return (
@@ -30,11 +42,12 @@ export const ThComponent = ({
       ref={setNodeRef}
       {...attributes}
       {...listeners}
-      className={classNames("rt-th", className)}
+      className={classNames("rt-th", className, { "th-dragging": isDragging })}
       onClick={e => toggleSort && toggleSort(e)}
       role="columnheader"
       tabIndex="-1" // Resolves eslint issues without implementing keyboard navigation incorrectly
       columnindex={columnindex}
+      path={path}
       index={index}
       {...rest}
     >

package/src/DataTable/dragNoticeEl.js

@@ -0,0 +1,13 @@
+import { Classes, Icon } from "@blueprintjs/core";
+
+export const dragNoticeEl = (
+  <div
+    className={Classes.TEXT_MUTED}
+    style={{
+      padding: 10,
+      fontSize: "12px"
+    }}
+  >
+    <Icon icon="info-sign" size={12} /> Drag columns to reorder them
+  </div>
+);