@os-design/drag-sort 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/drag-sort",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,14 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx"
   ],
   "sideEffects": false,
   "scripts": {
@@ -29,22 +36,22 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/portal": "^1.0.10",
-    "@os-design/use-auto-scroll": "^1.0.11",
-    "@os-design/use-drag": "^1.0.9",
-    "@os-design/use-event": "^1.0.13",
-    "@os-design/use-memo-object": "^1.0.8",
-    "@os-design/use-prevent-default-event": "^1.0.9",
-    "@os-design/use-throttle": "^1.0.14"
+    "@os-design/portal": "^1.0.12",
+    "@os-design/use-auto-scroll": "^1.0.13",
+    "@os-design/use-drag": "^1.0.11",
+    "@os-design/use-event": "^1.0.15",
+    "@os-design/use-memo-object": "^1.0.10",
+    "@os-design/use-prevent-default-event": "^1.0.11",
+    "@os-design/use-throttle": "^1.0.16"
   },
   "devDependencies": {
-    "@os-design/omit-emotion-props": "^1.0.11",
-    "@os-design/use-size": "^1.0.14",
+    "@os-design/omit-emotion-props": "^1.0.13",
+    "@os-design/use-size": "^1.0.16",
     "react-window": "^1.8.9"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "0e88d3afc41e36cee61222a039ef1aa4d08115b5"
+  "gitHead": "e5d8409760608145d2c738aa5789d0465ae5416f"
 }

package/src/DragAndDrop.tsx

@@ -0,0 +1,235 @@
+import Portal, { PortalProps } from '@os-design/portal';
+import useAutoScroll from '@os-design/use-auto-scroll';
+import useDrag, {
+  OnDragEnd,
+  OnDragMove,
+  OnDragStart,
+  Position,
+} from '@os-design/use-drag';
+import useMemoObject from '@os-design/use-memo-object';
+import usePreventDefaultEvent from '@os-design/use-prevent-default-event';
+
+import React, {
+  MouseEvent,
+  TouchEvent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import ListStore from './utils/ListStore';
+import NodeList, { ExistingNode } from './utils/NodeList';
+import { DragAndDropContext } from './utils/useDragAndDrop';
+
+import useDragEffect, {
+  DragEndHandler,
+  DraggedNode,
+} from './utils/useDragEffect';
+import useGeneratedId from './utils/useGeneratedId';
+import useInitRect from './utils/useInitRect';
+
+import useTransitionStyle from './utils/useTransitionStyle';
+
+export interface DragAndDropProps {
+  /**
+   * The container in which the dragged node will be rendered.
+   * @default document.body
+   */
+  draggedNodeContainer?: PortalProps['container'];
+  /**
+   * The min distance required to start dragging a node (in px).
+   * @default 10
+   */
+  minMouseDistPx?: number;
+  /**
+   * The delay of the long press event required to start dragging a node on the touch device (in ms).
+   * @default 500
+   */
+  longPressMs?: number;
+  /**
+   * The distance to the bound at which the list starts to scroll automatically (in percent).
+   * @default 20
+   */
+  autoScrollDistPercent?: number;
+  /**
+   * The max auto scroll speed (in px).
+   * @default 100
+   */
+  autoScrollMaxSpeedPx?: number;
+  /**
+   * The animation duration (in ms).
+   * @default 250
+   */
+  transitionDelayMs?: number;
+  /**
+   * The callback that is called when the drag is completed.
+   * @default undefined
+   */
+  onDragEnd?: DragEndHandler;
+  /**
+   * The children.
+   * @default undefined
+   */
+  children?: React.ReactNode;
+}
+
+interface StartNode {
+  list: NodeList;
+  node: ExistingNode;
+}
+
+/**
+ * The container containing one or more lists with draggable nodes.
+ */
+const DragAndDrop: React.FC<DragAndDropProps> = ({
+  draggedNodeContainer,
+  minMouseDistPx = 10,
+  longPressMs = 500,
+  autoScrollDistPercent = 20,
+  autoScrollMaxSpeedPx = 100,
+  transitionDelayMs = 250,
+  onDragEnd = () => {},
+  children,
+}) => {
+  // The user can drag a node between the lists (the Droppable components).
+  // To determine which list a node should be dropped in, we need to store refs to all the lists.
+  const listStoreRef = useRef<ListStore>(new ListStore());
+
+  // The class name for a node used to set the transition style
+  const generatedId = useGeneratedId();
+  const nodeClassName = useMemo(() => `n${generatedId}`, [generatedId]);
+
+  // The node that is currently being dragged
+  const [draggedNode, setDraggedNode] = useState<DraggedNode | null>(null);
+  const startNodeRef = useRef<StartNode | null>(null);
+  const [cursorPosition, setCursorPosition] = useState<Position>({
+    x: 0,
+    y: 0,
+  });
+
+  // Add a new list to the store
+  const registerList = useCallback((list: NodeList) => {
+    listStoreRef.current.add(list);
+  }, []);
+
+  // Remove the existing list from the store
+  const deregisterList = useCallback((id: string) => {
+    listStoreRef.current.remove(id);
+  }, []);
+
+  // Set the style to delay transitions when the node is dragging
+  useTransitionStyle({
+    className: nodeClassName,
+    ms: transitionDelayMs,
+    enabled: !!draggedNode,
+  });
+
+  const onDragStart = useCallback<OnDragStart>(
+    (pos: Position, startPos: Position) => {
+      const startNode = startNodeRef.current;
+      if (!startNode) return;
+      const [, , nodeRef] = startNode.node;
+      if (!nodeRef.current) return;
+      const rect = nodeRef.current.getBoundingClientRect();
+      setCursorPosition(pos);
+      setDraggedNode({
+        list: startNode.list,
+        node: startNode.node,
+        position: {
+          x: startPos.x - rect.x,
+          y: startPos.y - rect.y,
+        },
+      });
+      startNodeRef.current = null;
+    },
+    []
+  );
+
+  const onDragMove = useCallback<OnDragMove>((pos: Position) => {
+    setCursorPosition(pos);
+  }, []);
+
+  const dragEndHandler = useCallback<OnDragEnd>(() => {
+    setDraggedNode(null);
+  }, []);
+
+  const { onMouseDown, onTouchStart } = useDrag({
+    onDragStart,
+    onDragMove,
+    onDragEnd: dragEndHandler,
+    minMouseDistPx,
+    longPressMs,
+  });
+
+  // Handlers that determine whether a user clicks on the node
+  const mouseDownHandler = useCallback(
+    (e: MouseEvent, list: NodeList, node: ExistingNode) => {
+      startNodeRef.current = { list, node };
+      onMouseDown(e);
+    },
+    [onMouseDown]
+  );
+  const touchStartHandler = useCallback(
+    (e: TouchEvent, list: NodeList, node: ExistingNode) => {
+      startNodeRef.current = { list, node };
+      onTouchStart(e);
+    },
+    [onTouchStart]
+  );
+
+  // Prevent body scrolling when the node is dragging.
+  // It's important to attach the event to the body (not to the document). Otherwise, it won't work in mobile chrome.
+  usePreventDefaultEvent(document.body, 'touchmove', !!draggedNode);
+
+  // Implement the drag animation
+  useDragEffect({
+    draggedNode,
+    cursorPosition,
+    listStoreRef,
+    onDragEnd,
+  });
+
+  // Auto scroll if the cursor position is located near the border
+  useAutoScroll({
+    enabled: !!draggedNode,
+    distPercent: autoScrollDistPercent,
+    maxSpeedPx: autoScrollMaxSpeedPx,
+  });
+
+  const initRect = useInitRect(draggedNode ? draggedNode.node[2] : undefined);
+
+  const dragAndDropContext = useMemoObject({
+    registerList,
+    deregisterList,
+    onMouseDown: mouseDownHandler,
+    onTouchStart: touchStartHandler,
+    nodeClassName,
+  });
+
+  return (
+    <DragAndDropContext.Provider value={dragAndDropContext}>
+      {children}
+
+      {draggedNode && (
+        <Portal container={draggedNodeContainer}>
+          {draggedNode.list.renderDraggedNode({
+            index: draggedNode.node[4],
+            id: draggedNode.node[5],
+            style: {
+              position: 'fixed',
+              left: cursorPosition.x - draggedNode.position.x,
+              top: cursorPosition.y - draggedNode.position.y,
+              width: initRect ? initRect.initWidth : undefined,
+              height: initRect ? initRect.initHeight : undefined,
+              zIndex: 1001,
+            },
+          })}
+        </Portal>
+      )}
+    </DragAndDropContext.Provider>
+  );
+};
+
+export type { DragEndHandler } from './utils/useDragEffect';
+
+export default DragAndDrop;

package/src/Draggable.tsx

@@ -0,0 +1,109 @@
+import useMemoObject from '@os-design/use-memo-object';
+
+import React, {
+  CSSProperties,
+  MouseEvent,
+  RefObject,
+  TouchEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Node } from './utils/NodeList';
+
+import useAppendClassName from './utils/useAppendClassName';
+import useDragAndDrop from './utils/useDragAndDrop';
+import useDroppable from './utils/useDroppable';
+
+export interface DraggableHandlers {
+  /**
+   * The handler that should be called when the mouse down event occurs.
+   */
+  onMouseDown: (e: MouseEvent) => void;
+  /**
+   * The handler that should be called when the touch start event occurs.
+   */
+  onTouchStart: (e: TouchEvent) => void;
+}
+
+export interface DraggableChildrenProps {
+  /**
+   * The reference to the draggable list item.
+   */
+  ref: RefObject<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  /**
+   * Additional styles for moving the list item.
+   */
+  style: CSSProperties;
+  /**
+   * The handlers to catch events when the user starts dragging the list item.
+   */
+  handlers: DraggableHandlers;
+}
+
+export interface DraggableProps {
+  /**
+   * The index of the draggable node.
+   */
+  index: number;
+  /**
+   * The ID of the draggable node.
+   */
+  id: string;
+  /**
+   * The function that renders the draggable node.
+   */
+  children: (props: DraggableChildrenProps) => React.ReactNode;
+}
+
+const Draggable: React.FC<DraggableProps> = ({ index, id, children }) => {
+  // The reference to the list item
+  const ref = useRef<HTMLDivElement | null>(null);
+  // The reference to the node containing the refs to the prev and next nodes
+  const nodeRef = useRef<Node>(null);
+  // Additional styles for moving the list item
+  const [style, setStyle] = useState<CSSProperties>({});
+
+  const { nodeClassName } = useDragAndDrop();
+  const { registerNode, deregisterNode, onMouseDown, onTouchStart } =
+    useDroppable();
+
+  // Register the node in the list
+  useEffect(() => {
+    nodeRef.current = registerNode({ ref, setStyle, index, id });
+    return () => {
+      if (!nodeRef.current) return;
+      deregisterNode(nodeRef.current);
+      nodeRef.current = null;
+    };
+  }, [deregisterNode, id, index, registerNode]);
+
+  // Set the class name for the node to apply the transition style (see the DragAndDrop container)
+  useAppendClassName(ref, nodeClassName);
+
+  // Handlers that determine whether a user clicks on the node
+  const mouseDownHandler = useCallback(
+    (e: MouseEvent) => {
+      if (!nodeRef.current) return;
+      onMouseDown(e, nodeRef.current);
+    },
+    [onMouseDown]
+  );
+  const touchStartHandler = useCallback(
+    (e: TouchEvent) => {
+      if (!nodeRef.current) return;
+      onTouchStart(e, nodeRef.current);
+    },
+    [onTouchStart]
+  );
+
+  const handlers = useMemoObject({
+    onMouseDown: mouseDownHandler,
+    onTouchStart: touchStartHandler,
+  });
+
+  return <>{children({ ref, style, handlers })}</>;
+};
+
+export default Draggable;

package/src/Droppable.tsx

@@ -0,0 +1,142 @@
+import useMemoObject from '@os-design/use-memo-object';
+
+import React, {
+  MouseEvent,
+  RefObject,
+  TouchEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import NodeList, {
+  ExistingNode,
+  NodeProps,
+  RenderDraggedNode,
+} from './utils/NodeList';
+import useDragAndDrop from './utils/useDragAndDrop';
+import { DroppableContext } from './utils/useDroppable';
+import useGeneratedId from './utils/useGeneratedId';
+
+export interface DroppableChildrenProps {
+  /**
+   * The reference to the list.
+   * If a virtual list is used, pass it to the outerRef prop.
+   */
+  ref: RefObject<HTMLDivElement>;
+  /**
+   * The reference to the container inside the virtual list.
+   * Pass it to the innerRef prop.
+   */
+  innerRef: RefObject<HTMLDivElement>;
+}
+
+export interface DroppableProps {
+  /**
+   * The function that renders the dragged node.
+   */
+  renderDraggedNode: RenderDraggedNode;
+  /**
+   * The ID of the list with draggable nodes.
+   * Used to determine in which list the dragged node was dropped.
+   * @default undefined
+   */
+  id?: string;
+  /**
+   * Whether the list is horizontal.
+   * @default false
+   */
+  horizontal?: boolean;
+  /**
+   * The function that renders the list with draggable nodes.
+   */
+  children: (props: DroppableChildrenProps) => React.ReactNode;
+}
+
+const Droppable: React.FC<DroppableProps> = ({
+  renderDraggedNode,
+  id,
+  horizontal = false,
+  children,
+}) => {
+  // The reference to the list
+  const ref = useRef<HTMLDivElement>(null);
+  // The reference to the container inside the virtual list
+  const innerRef = useRef<HTMLDivElement>(null);
+  // The unique ID of the list. If no ID was specified, the generated one is used.
+  const generatedId = useGeneratedId();
+  const droppableId = useMemo(() => id || generatedId, [generatedId, id]);
+  // The reference to the list of nodes
+  const listRef = useRef(
+    new NodeList({
+      id: droppableId,
+      ref,
+      innerRef,
+      horizontal,
+      renderDraggedNode,
+    })
+  );
+
+  // Update the ID of the list if it changes
+  useEffect(() => {
+    listRef.current.id = droppableId;
+  }, [droppableId]);
+
+  // Update the list orientation if it changes.
+  // There is no need to check the order of the nodes in the list because it will be the same.
+  useEffect(() => {
+    listRef.current.horizontal = horizontal;
+  }, [horizontal]);
+
+  // Update the callback that renders the dragged node if it changes
+  useEffect(() => {
+    listRef.current.renderDraggedNode = renderDraggedNode;
+  }, [renderDraggedNode]);
+
+  const { registerList, deregisterList, onMouseDown, onTouchStart } =
+    useDragAndDrop();
+
+  // Register the list in the store
+  useEffect(() => {
+    registerList(listRef.current);
+    const listId = listRef.current.id;
+    return () => deregisterList(listId);
+  }, [deregisterList, registerList]);
+
+  const registerNode = useCallback(
+    (props: NodeProps) => listRef.current.add(props),
+    []
+  );
+  const deregisterNode = useCallback((node: ExistingNode) => {
+    listRef.current.remove(node);
+  }, []);
+
+  // Handlers that determine whether a user clicks on the node
+  const mouseDownHandler = useCallback(
+    (e: MouseEvent, node: ExistingNode) => {
+      onMouseDown(e, listRef.current, node);
+    },
+    [onMouseDown]
+  );
+  const touchStartHandler = useCallback(
+    (e: TouchEvent, node: ExistingNode) => {
+      onTouchStart(e, listRef.current, node);
+    },
+    [onTouchStart]
+  );
+
+  const droppableContext = useMemoObject({
+    registerNode,
+    deregisterNode,
+    onMouseDown: mouseDownHandler,
+    onTouchStart: touchStartHandler,
+  });
+
+  return (
+    <DroppableContext.Provider value={droppableContext}>
+      {(children as Function)({ ref, innerRef })}
+    </DroppableContext.Provider>
+  );
+};
+
+export default Droppable;

package/src/index.ts

@@ -0,0 +1,7 @@
+export { default as DragAndDrop } from './DragAndDrop';
+export { default as Droppable } from './Droppable';
+export { default as Draggable } from './Draggable';
+
+export * from './DragAndDrop';
+export * from './Droppable';
+export * from './Draggable';

package/src/utils/ListStore.ts

@@ -0,0 +1,47 @@
+import NodeList from './NodeList';
+
+/**
+ * Stores all the lists where the draggable items is located.
+ */
+class ListStore {
+  private lists: NodeList[];
+
+  public constructor() {
+    this.lists = [];
+  }
+
+  /**
+   * Adds a new list to the store.
+   */
+  public add(list: NodeList) {
+    this.lists.push(list);
+  }
+
+  /**
+   * Removes the list from the store.
+   */
+  public remove(id: string) {
+    const index = this.lists.findIndex((item) => item.id === id);
+    if (index === -1) return;
+    this.lists.splice(index, 1);
+  }
+
+  /**
+   * Returns the list in which the position is located.
+   */
+  public findByPosition(x: number, y: number) {
+    return this.lists.find((list) => {
+      const { current } = list.ref;
+      if (!current) return false;
+      const rect = current.getBoundingClientRect();
+      return (
+        x >= rect.x &&
+        x <= rect.x + rect.width &&
+        y >= rect.y &&
+        y <= rect.y + rect.height
+      );
+    });
+  }
+}
+
+export default ListStore;