@os-design/drag-sort 1.0.19 → 1.0.20

package/src/utils/NodeList.ts

@@ -0,0 +1,245 @@
+import React, { CSSProperties, RefObject } from 'react';
+
+/* eslint-disable @typescript-eslint/no-explicit-any,no-param-reassign,prefer-destructuring,no-constant-condition */
+
+// [prev, next, ref, setStyle, index, id]
+export type Node =
+  | [Node, Node, RefObject<any>, (style: CSSProperties) => void, number, string]
+  | null;
+
+export type ExistingNode = Exclude<Node, null>;
+
+export interface NodeProps {
+  ref: React.MutableRefObject<any>;
+  setStyle: (style: CSSProperties) => void;
+  index: number;
+  id: string;
+}
+
+interface RenderDraggedNodeProps {
+  /**
+   * The index of the dragged node.
+   */
+  index: number;
+  /**
+   * The ID of the dragged node.
+   */
+  id: string;
+  /**
+   * The style of the dragged node with position.
+   */
+  style: CSSProperties;
+}
+
+export type RenderDraggedNode = (
+  props: RenderDraggedNodeProps
+) => React.ReactNode;
+
+interface InitProps {
+  id: string;
+  ref: RefObject<HTMLDivElement>;
+  innerRef: RefObject<HTMLDivElement>;
+  horizontal: boolean;
+  renderDraggedNode: RenderDraggedNode;
+}
+
+/**
+ * Stores all the draggable items in the list.
+ * The structure of the doubly linked list is used.
+ */
+class NodeList {
+  /**
+   * The ID of the list.
+   */
+  public id: string;
+
+  /**
+   * The ref to the list.
+   */
+  public ref: RefObject<HTMLDivElement>;
+
+  /**
+   * The inner ref to the list.
+   * Used by the virtual list.
+   */
+  public innerRef: RefObject<HTMLDivElement>;
+
+  /**
+   * Whether the list is horizontal.
+   */
+  public horizontal: boolean;
+
+  /**
+   * The callback that renders the dragged node.
+   */
+  public renderDraggedNode: RenderDraggedNode;
+
+  /**
+   * The head of draggable nodes.
+   */
+  private head: Node;
+
+  /**
+   * The tail of draggable nodes.
+   */
+  private tail: Node;
+
+  /**
+   * Listeners of node addition events.
+   */
+  private listeners: Array<(props: NodeProps) => void>;
+
+  public constructor(props: InitProps) {
+    this.id = props.id;
+    this.ref = props.ref;
+    this.innerRef = props.innerRef;
+    this.horizontal = props.horizontal;
+    this.renderDraggedNode = props.renderDraggedNode;
+    this.head = null;
+    this.tail = null;
+    this.listeners = [];
+  }
+
+  public getHead() {
+    return this.head;
+  }
+
+  public getTail() {
+    return this.tail;
+  }
+
+  /**
+   * Adds the node to the beginning.
+   * TL: O(1).
+   */
+  private addToTheBeginning(props: NodeProps): ExistingNode {
+    this.head = [
+      null,
+      this.head,
+      props.ref,
+      props.setStyle,
+      props.index,
+      props.id,
+    ];
+    const [, next] = this.head;
+    if (next) next[0] = this.head; // Set the prev cursor of the next element
+    if (!this.tail) this.tail = this.head;
+    return this.head;
+  }
+
+  /**
+   * Adds the node to the end.
+   * TL: O(1).
+   */
+  private addToTheEnd(props: NodeProps): ExistingNode {
+    this.tail = [
+      this.tail,
+      null,
+      props.ref,
+      props.setStyle,
+      props.index,
+      props.id,
+    ];
+    const [prev] = this.tail;
+    if (prev) prev[1] = this.tail; // Set the next cursor of the prev element
+    if (!this.head) this.head = this.tail;
+    return this.tail;
+  }
+
+  /**
+   * Adds the node after the specified one.
+   * TL: O(1).
+   */
+  private static addAfter(node: ExistingNode, props: NodeProps): ExistingNode {
+    node[1] = [node, node[1], props.ref, props.setStyle, props.index, props.id];
+    if (node[1][1]) node[1][1][0] = node[1];
+    return node[1];
+  }
+
+  /**
+   * Adds a new node depends on its position.
+   * Called when a new node is mounted.
+   * TL: O(1) – add to the beginning or to the end, O(n) – add to the middle.
+   */
+  public add(props: NodeProps): ExistingNode {
+    const { index } = props;
+
+    // Run listeners
+    this.listeners.forEach((listener) => listener(props));
+
+    // Add the first node to the beginning
+    if (!this.head || !this.tail) {
+      return this.addToTheBeginning(props);
+    }
+
+    // Add the node to the beginning if it is located above the first one
+    const [, , , , headIndex] = this.head;
+    if (index < headIndex) {
+      return this.addToTheBeginning(props);
+    }
+
+    // Add the node to the end if it is located below the last one
+    const [, , , , tailIndex] = this.tail;
+    if (index === tailIndex) {
+      // The tail is the blank node
+      const [prev] = this.tail;
+      if (prev) {
+        this.tail[4] += 1;
+        return NodeList.addAfter(prev, props);
+      }
+    }
+    if (index > tailIndex) {
+      return this.addToTheEnd(props);
+    }
+
+    // Add the node after the one that is located above the current one
+    let node = this.head;
+    while (true) {
+      const [, next] = node;
+      if (!next) break;
+      const [, , , , nextIndex] = next;
+      if (index < nextIndex) break;
+      node = next;
+    }
+    return NodeList.addAfter(node, props);
+  }
+
+  /**
+   * Removes the existing node.
+   * Called when the node is unmounted.
+   * TL: O(1).
+   */
+  public remove(node: ExistingNode) {
+    const [prev, next] = node;
+    if (!prev && !next) {
+      this.head = null;
+      this.tail = null;
+      return;
+    }
+    if (!prev && next) {
+      next[0] = null;
+      this.head = next;
+      return;
+    }
+    if (prev && !next) {
+      prev[1] = null;
+      this.tail = prev;
+      return;
+    }
+    if (prev && next) {
+      prev[1] = next;
+      next[0] = prev;
+    }
+  }
+
+  public addListener(callback: (props: NodeProps) => void) {
+    this.listeners.push(callback);
+  }
+
+  public removeListener(callback: (props: NodeProps) => void) {
+    const index = this.listeners.findIndex((listener) => listener === callback);
+    this.listeners.splice(index, 1);
+  }
+}
+
+export default NodeList;

package/src/utils/getElementOffset.ts

@@ -0,0 +1,13 @@
+const getElementOffset = (element: HTMLElement) => {
+  let offsetLeft = 0;
+  let offsetTop = 0;
+  let el: HTMLElement | null = element;
+  while (el) {
+    offsetLeft += el.offsetLeft;
+    offsetTop += el.offsetTop;
+    el = el.offsetParent as HTMLElement;
+  }
+  return { offsetLeft, offsetTop };
+};
+
+export default getElementOffset;

package/src/utils/getElementScroll.ts

@@ -0,0 +1,13 @@
+const getElementScroll = (element: HTMLElement) => {
+  let scrollLeft = 0;
+  let scrollTop = 0;
+  let el: HTMLElement | null = element;
+  while (el) {
+    scrollLeft += el.scrollLeft;
+    scrollTop += el.scrollTop;
+    el = el.parentElement;
+  }
+  return { scrollLeft, scrollTop };
+};
+
+export default getElementScroll;

package/src/utils/getNodeRect.ts

@@ -0,0 +1,29 @@
+import { RefObject } from 'react';
+import getElementOffset from './getElementOffset';
+import getElementScroll from './getElementScroll';
+
+/**
+ * Computes the bounds of the existing node without considering transforms.
+ */
+const getNodeRect = (ref: RefObject<HTMLElement>) => {
+  if (!ref.current) return null;
+
+  const parent = ref.current.parentElement;
+  const { width, height } = ref.current.getBoundingClientRect();
+  const { offsetLeft, offsetTop } = getElementOffset(ref.current);
+  const { scrollLeft, scrollTop } = parent
+    ? getElementScroll(parent)
+    : { scrollLeft: 0, scrollTop: 0 };
+
+  const left = offsetLeft - scrollLeft;
+  const top = offsetTop - scrollTop;
+
+  return {
+    left,
+    top,
+    right: left + width,
+    bottom: top + height,
+  };
+};
+
+export default getNodeRect;

package/src/utils/useAppendClassName.ts

@@ -0,0 +1,20 @@
+import { RefObject, useEffect } from 'react';
+
+/**
+ * Adds a new class name to the element.
+ */
+const useAppendClassName = (ref: RefObject<HTMLElement>, className: string) => {
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return () => {};
+
+    const initClassName = element.className;
+    element.className = `${initClassName} ${className}`.trim();
+
+    return () => {
+      element.className = initClassName;
+    };
+  }, [className, ref]);
+};
+
+export default useAppendClassName;

package/src/utils/useBlankNode.ts

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useRef } from 'react';
+import NodeList, { ExistingNode } from './NodeList';
+
+interface InitSize {
+  initWidth: number;
+  initHeight: number;
+}
+
+interface DraggedNode {
+  list: NodeList;
+}
+
+interface UseBlankNodeProps {
+  draggedNode: DraggedNode | null;
+  targetList: NodeList | null;
+  initDraggedNodeRect: InitSize | null;
+}
+
+interface BlankNode {
+  list: NodeList;
+  node: ExistingNode;
+}
+
+/**
+ * Appends the blank node to the list to increase the height of it.
+ * Used when the dragged node is located inside another list.
+ */
+const useBlankNode = (props: UseBlankNodeProps) => {
+  const { draggedNode, targetList, initDraggedNodeRect } = props;
+  const initDraggedNodeRectRef = useRef(initDraggedNodeRect);
+  const blankNode = useRef<BlankNode | null>(null);
+
+  useEffect(() => {
+    initDraggedNodeRectRef.current = initDraggedNodeRect;
+  }, [initDraggedNodeRect]);
+
+  useEffect(() => {
+    if (
+      !draggedNode ||
+      !targetList ||
+      !targetList.ref.current ||
+      draggedNode.list === targetList ||
+      !initDraggedNodeRectRef.current
+    ) {
+      return;
+    }
+
+    // Create a new blank div
+    const { initWidth, initHeight } = initDraggedNodeRectRef.current;
+    const div = document.createElement('div');
+    div.style.width = `${initWidth}px`;
+    div.style.height = `${initHeight}px`;
+    div.style.minWidth = `${initWidth}px`;
+    div.style.minHeight = `${initHeight}px`;
+
+    let parent = targetList.ref.current;
+    const innerList = targetList.innerRef.current;
+
+    // The inner ref used only in the virtual list
+    if (innerList) {
+      const { width, height } = innerList.getBoundingClientRect();
+      div.style.position = 'absolute';
+      div.style.left = targetList.horizontal ? `${width}px` : '0px';
+      div.style.top = targetList.horizontal ? '0px' : `${height}px`;
+      parent = innerList;
+    }
+
+    // Append the blank div to increase the height of the list
+    parent.appendChild(div);
+
+    // Add the blank node to the node list
+    const tail = targetList.getTail();
+    blankNode.current = {
+      list: targetList,
+      node: targetList.add({
+        ref: { current: div },
+        setStyle: () => {},
+        index: tail ? tail[4] + 1 : 0,
+        id: 'blank',
+      }),
+    };
+  }, [draggedNode, targetList]);
+
+  const removeBlankNode = useCallback(() => {
+    const blank = blankNode.current;
+    if (!blank) return;
+    blankNode.current = null;
+    blank.list.remove(blank.node);
+    const [, , blankNodeRef] = blank.node;
+    if (!blank.list.ref.current || !blankNodeRef.current) return;
+    const parent = blankNodeRef.current.parentElement;
+    if (parent) parent.removeChild(blankNodeRef.current);
+  }, []);
+
+  // Remove the blank node if the dragged node has been dropped
+  useEffect(() => {
+    if (!draggedNode) return () => {};
+    return () => removeBlankNode();
+  }, [draggedNode, removeBlankNode]);
+
+  return removeBlankNode;
+};
+
+export default useBlankNode;

package/src/utils/useDragAndDrop.ts

@@ -0,0 +1,32 @@
+import { Position } from '@os-design/use-drag';
+import React, { MouseEvent, TouchEvent, useContext } from 'react';
+import NodeList, { ExistingNode } from './NodeList';
+
+export interface SetDraggedNodeProps {
+  list: NodeList;
+  node: ExistingNode;
+  position: Position;
+}
+
+type NodeEventHandler<T> = (e: T, list: NodeList, node: ExistingNode) => void;
+
+interface DragAndDropContextProps {
+  registerList: (list: NodeList) => void;
+  deregisterList: (id: string) => void;
+  onMouseDown: NodeEventHandler<MouseEvent>;
+  onTouchStart: NodeEventHandler<TouchEvent>;
+  nodeClassName: string;
+}
+
+export const DragAndDropContext = React.createContext<DragAndDropContextProps>({
+  registerList: () => {},
+  deregisterList: () => {},
+  onMouseDown: () => {},
+  onTouchStart: () => {},
+  nodeClassName: '',
+});
+
+const useDragAndDrop = (): DragAndDropContextProps =>
+  useContext(DragAndDropContext);
+
+export default useDragAndDrop;