@os-design/drag-sort 1.0.19 → 1.0.21

package/src/utils/useDragEffect.ts

@@ -0,0 +1,490 @@
+import { Position } from '@os-design/use-drag';
+import useEvent from '@os-design/use-event';
+import useThrottle from '@os-design/use-throttle';
+import {
+  CSSProperties,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import ListStore from './ListStore';
+import NodeList, { ExistingNode, Node, NodeProps } from './NodeList';
+import getElementScroll from './getElementScroll';
+import getNodeRect from './getNodeRect';
+import useBlankNode from './useBlankNode';
+import useGetNodeStyle from './useGetNodeStyle';
+import useInitRect from './useInitRect';
+import useInitScrollOffset from './useInitScrollOffset';
+import useMoveNode from './useMoveNode';
+import useTargetList from './useTargetList';
+
+export interface DraggedNode {
+  list: NodeList;
+  node: ExistingNode;
+  position: Position;
+}
+
+interface TargetNode {
+  list: NodeList;
+  node: ExistingNode;
+}
+
+export interface ItemLocation {
+  listId: string;
+  index: number;
+  id: string;
+}
+
+export type DragEndHandler = (
+  dragged: ItemLocation,
+  target: ItemLocation
+) => void;
+
+interface UseDragEffectProps {
+  draggedNode: DraggedNode | null;
+  cursorPosition: Position;
+  listStoreRef: RefObject<ListStore>;
+  onDragEnd: DragEndHandler;
+}
+
+const HIDDEN_NODE_STYLE: CSSProperties = {
+  opacity: 0,
+  pointerEvents: 'none',
+};
+
+const createEmptyNode = ({
+  prev = null,
+  next = null,
+}: {
+  prev?: Node;
+  next?: Node;
+}): ExistingNode => [prev, next, { current: null }, () => {}, -1, 'id'];
+
+/* eslint-disable no-constant-condition */
+
+const useDragEffect = (props: UseDragEffectProps) => {
+  const { draggedNode, cursorPosition, listStoreRef, onDragEnd } = props;
+
+  const targetRef = useRef<ItemLocation | null>(null);
+  const targetNodeRef = useRef<TargetNode | null>(draggedNode);
+
+  useEffect(() => {
+    targetNodeRef.current = draggedNode;
+  }, [draggedNode]);
+
+  const onDragEndRef = useRef(onDragEnd);
+  useEffect(() => {
+    onDragEndRef.current = onDragEnd;
+  }, [onDragEnd]);
+
+  // The initial bounds of the dragged node.
+  // We can't read the bounds of the dragged node on the fly because the node can be unmounted in the virtual list.
+  const initDraggedNodeRect = useInitRect(
+    draggedNode ? draggedNode.node[2] : undefined
+  );
+
+  // The initial scroll position of the list where the dragged node is located.
+  // Used to detect the actual position of the dragged node. The purpose is the same as with initDraggedNodeRect.
+  const initDraggedNodeListScrollOffset = useInitScrollOffset(
+    draggedNode ? draggedNode.list.ref : undefined
+  );
+
+  // The central position of the dragged node
+  const position = useMemo(() => {
+    if (!draggedNode || !initDraggedNodeRect) return null;
+    const { x, y } = cursorPosition;
+    const { initWidth, initHeight } = initDraggedNodeRect;
+    return {
+      x: x - draggedNode.position.x + initWidth / 2,
+      y: y - draggedNode.position.y + initHeight / 2,
+    };
+  }, [cursorPosition, draggedNode, initDraggedNodeRect]);
+
+  // The list in which the cursor is located
+  const targetList = useTargetList(position, listStoreRef);
+
+  // Returns the style for moving the node in the specified direction
+  const getNodeStyle = useGetNodeStyle(initDraggedNodeRect);
+
+  // Moves the node up or down
+  const moveNode = useMoveNode({ position, draggedNode, getNodeStyle });
+
+  const setTargetNode = useCallback((list: NodeList, node: ExistingNode) => {
+    const [, , , , nodeIndex, nodeId] = node;
+    targetNodeRef.current = { list, node };
+    targetRef.current = {
+      listId: list.id,
+      index: nodeIndex,
+      id: nodeId,
+    };
+  }, []);
+
+  const clearTargetNode = useCallback(() => {
+    targetNodeRef.current = null;
+    targetRef.current = null;
+  }, []);
+
+  // Returns the central position of the dragged node in the list
+  const getDraggedNodePos = useCallback(() => {
+    if (
+      !targetList ||
+      !targetList.ref.current ||
+      !initDraggedNodeRect ||
+      !initDraggedNodeListScrollOffset
+    ) {
+      return null;
+    }
+    const { initX, initY, initWidth, initHeight } = initDraggedNodeRect;
+    const { initScrollLeft, initScrollTop } = initDraggedNodeListScrollOffset;
+    const { scrollLeft, scrollTop } = getElementScroll(targetList.ref.current);
+    return {
+      x: initX + initWidth / 2 + initScrollLeft - scrollLeft,
+      y: initY + initHeight / 2 + initScrollTop - scrollTop,
+    };
+  }, [initDraggedNodeListScrollOffset, initDraggedNodeRect, targetList]);
+
+  const getDraggedNodePosRef = useRef(getDraggedNodePos);
+  useEffect(() => {
+    getDraggedNodePosRef.current = getDraggedNodePos;
+  }, [getDraggedNodePos]);
+
+  // Hide the dragged node
+  useEffect(() => {
+    if (!draggedNode) return () => {};
+    const [, , , draggedNodeSetStyle] = draggedNode.node;
+    draggedNodeSetStyle(HIDDEN_NODE_STYLE);
+    return () => draggedNodeSetStyle({});
+  }, [draggedNode]);
+
+  // Append the blank node to the list to increase the height of it.
+  // Used when the dragged node is located inside another list.
+  const removeBlankNode = useBlankNode({
+    draggedNode,
+    targetList,
+    initDraggedNodeRect,
+  });
+
+  const updateTargetNode = useCallback(() => {
+    if (!draggedNode) return;
+    const prevTargetNode = targetNodeRef.current; // The last updated node
+
+    // Dragging outside the origin list
+    if (
+      prevTargetNode &&
+      prevTargetNode.list === draggedNode.list &&
+      targetList !== draggedNode.list
+    ) {
+      moveNode({
+        list: prevTargetNode.list,
+        startNode: prevTargetNode.node,
+        direction: 'down',
+        destination: 'end',
+      });
+      clearTargetNode();
+    }
+
+    // Dragging outside another list
+    if (
+      prevTargetNode &&
+      prevTargetNode.list !== draggedNode.list &&
+      targetList !== prevTargetNode.list
+    ) {
+      moveNode({
+        list: prevTargetNode.list,
+        startNode: prevTargetNode.node,
+        direction: 'down',
+        destination: 'end',
+        isAnotherList: true,
+      });
+      removeBlankNode();
+      clearTargetNode();
+    }
+
+    // Dragging inside the origin list
+    if (!prevTargetNode && targetList === draggedNode.list) {
+      const tail = targetList.getTail();
+      if (!tail) return;
+      const node = moveNode({
+        list: targetList,
+        startNode: tail,
+        direction: 'up',
+        destination: 'cursor',
+      });
+      setTargetNode(targetList, node);
+      return;
+    }
+
+    // Dragging inside another list
+    if (
+      targetList &&
+      targetList !== draggedNode.list &&
+      (!prevTargetNode || prevTargetNode.list !== targetList)
+    ) {
+      const tail = targetList.getTail();
+      if (!tail) return;
+      const node = moveNode({
+        list: targetList,
+        startNode: tail,
+        direction: 'up',
+        destination: 'cursor',
+        isAnotherList: true,
+      });
+      setTargetNode(targetList, node);
+      return;
+    }
+
+    // Dragging in the origin list
+    if (
+      prevTargetNode &&
+      prevTargetNode.list === draggedNode.list &&
+      targetList === draggedNode.list
+    ) {
+      const axis = targetList.horizontal ? 'x' : 'y';
+      const [, , prevTargetNodeRef, ,] = prevTargetNode.node;
+      if (!prevTargetNodeRef.current) {
+        // The target node was unmounted. It happens when the virtual list is used.
+        // If the cursor is above the dragged node, we need to move the nodes down from the tail to the node where
+        // the cursor is located. Otherwise, we need to move the nodes up from the head to the node where the cursor
+        // is located.
+        const draggedNodePos = getDraggedNodePosRef.current();
+        if (!position || !draggedNodePos) return;
+        const isDraggingUp = position[axis] < draggedNodePos[axis];
+        if (isDraggingUp) {
+          const tail = targetList.getTail();
+          if (!tail || !tail[2].current) return;
+          const node = moveNode({
+            list: targetList,
+            startNode: createEmptyNode({ prev: tail }),
+            direction: 'up',
+            destination: 'cursor',
+          });
+          setTargetNode(targetList, node);
+        } else {
+          const head = targetList.getHead();
+          if (!head || !head[2].current) return;
+          const node = moveNode({
+            list: targetList,
+            startNode: createEmptyNode({ next: head }),
+            direction: 'down',
+            destination: 'cursor',
+          });
+          setTargetNode(targetList, node);
+        }
+        return;
+      }
+      const prevTargetNodeRect = getNodeRect(prevTargetNode.node[2]);
+      const startRectProp = targetList.horizontal ? 'left' : 'top';
+      if (!position || !prevTargetNodeRect) return;
+      const isMoveUp = position[axis] < prevTargetNodeRect[startRectProp];
+      const node = isMoveUp
+        ? moveNode({
+            list: targetList,
+            startNode: prevTargetNode.node,
+            direction: 'up',
+            destination: 'cursor',
+          })
+        : moveNode({
+            list: targetList,
+            startNode: prevTargetNode.node,
+            direction: 'down',
+            destination: 'cursor',
+          });
+      setTargetNode(targetList, node);
+      return;
+    }
+
+    // Dragging in another list
+    if (
+      targetList &&
+      targetList !== draggedNode.list &&
+      prevTargetNode &&
+      prevTargetNode.list === targetList
+    ) {
+      const axis = targetList.horizontal ? 'x' : 'y';
+      const prevTargetNodeRect = getNodeRect(prevTargetNode.node[2]);
+      const startRectProp = targetList.horizontal ? 'left' : 'top';
+      if (!position || !prevTargetNodeRect) return;
+      const isMoveUp = position[axis] < prevTargetNodeRect[startRectProp];
+      const node = isMoveUp
+        ? moveNode({
+            list: targetList,
+            startNode: prevTargetNode.node,
+            direction: 'up',
+            destination: 'cursor',
+            isAnotherList: true,
+          })
+        : moveNode({
+            list: targetList,
+            startNode: prevTargetNode.node,
+            direction: 'down',
+            destination: 'cursor',
+            isAnotherList: true,
+          });
+      setTargetNode(targetList, node);
+    }
+  }, [
+    draggedNode,
+    targetList,
+    moveNode,
+    clearTargetNode,
+    removeBlankNode,
+    setTargetNode,
+    position,
+  ]);
+
+  // Update the target node if either the position or the target list has been changed
+  useEffect(() => {
+    updateTargetNode();
+  }, [updateTargetNode]);
+
+  // Update the target node if the target list has been scrolled
+  const [throttledUpdateTargetNode] = useThrottle(updateTargetNode, 100);
+  useEvent(
+    (targetList ? targetList.ref : undefined) as unknown as EventTarget,
+    'scroll',
+    throttledUpdateTargetNode
+  );
+  useEvent(window, 'scroll', throttledUpdateTargetNode);
+
+  // Reset styles of the affected nodes when the dragged node was dropped
+  useEffect(() => {
+    if (!draggedNode) return () => {};
+    const [, , , , draggedNodeIndex] = draggedNode.node;
+    return () => {
+      const targetNode = targetNodeRef.current;
+
+      // If the dragged node was outside the origin list, reset the styles for the nodes,
+      // starting at the tail and ending with the dragged node in the origin list.
+      if (!targetNode || targetNode.list !== draggedNode.list) {
+        const tail = draggedNode.list.getTail();
+        if (tail) {
+          let node = tail;
+          while (true) {
+            const [prev, , , nodeSetStyle, nodeIndex] = node;
+            nodeSetStyle({});
+            if (!prev || nodeIndex <= draggedNodeIndex) break;
+            node = prev;
+          }
+        }
+      }
+
+      // If the dragged node was inside another list, reset the styles for the nodes,
+      // starting at the tail and ending with the dragged node in the target list.
+      if (targetNode && targetNode.list !== draggedNode.list) {
+        const tail = targetNode.list.getTail();
+        const [, , , , targetNodeIndex] = targetNode.node;
+        if (tail) {
+          let node = tail;
+          while (true) {
+            const [prev, , , nodeSetStyle, nodeIndex] = node;
+            nodeSetStyle({});
+            if (!prev || nodeIndex <= targetNodeIndex) break;
+            node = prev;
+          }
+        }
+      }
+
+      // If the dragged node was moved inside the origin list, reset the styles for the nodes,
+      // starting with target node and ending with the dragged node.
+      if (targetNode && targetNode.list === draggedNode.list) {
+        const [, , , targetNodeSetStyle, targetNodeIndex] = targetNode.node;
+        if (targetNodeIndex > draggedNodeIndex) {
+          let { node } = targetNode;
+          while (true) {
+            const [prev, , , nodeSetStyle, nodeIndex] = node;
+            nodeSetStyle({});
+            if (!prev || nodeIndex <= draggedNodeIndex) break;
+            node = prev;
+          }
+        } else if (targetNodeIndex < draggedNodeIndex) {
+          let { node } = targetNode;
+          while (true) {
+            const [, next, , nodeSetStyle, nodeIndex] = node;
+            nodeSetStyle({});
+            if (!next || nodeIndex >= draggedNodeIndex) break;
+            node = next;
+          }
+        } else if (targetNodeIndex === draggedNodeIndex) {
+          targetNodeSetStyle({});
+        }
+      }
+    };
+  }, [draggedNode]);
+
+  // Update the position of the newly mounted nodes in the origin list (used in the virtual list)
+  useEffect(() => {
+    if (!draggedNode) return () => {};
+    const [, , , , draggedNodeIndex] = draggedNode.node;
+
+    const update = (nodeProps: NodeProps) => {
+      const { setStyle, index } = nodeProps;
+      const targetNode = targetNodeRef.current;
+
+      // Set the hidden style, if the mounted node is the dragged node
+      if (index === draggedNodeIndex) {
+        setStyle(HIDDEN_NODE_STYLE);
+        return;
+      }
+
+      // If the dragged node is inside the origin list
+      if (targetNode && targetNode.list === draggedNode.list) {
+        // Move the mounted node up/down, if it is located between the dragged and target node
+        const [, , , , targetNodeIndex] = targetNode.node;
+        if (index > draggedNodeIndex && index < targetNodeIndex) {
+          setStyle(getNodeStyle('up', targetNode.list.horizontal));
+        } else if (index < draggedNodeIndex && index > targetNodeIndex) {
+          setStyle(getNodeStyle('down', targetNode.list.horizontal));
+        }
+      } else if (index > draggedNodeIndex) {
+        // Otherwise, move the mounted node up, if it is located below the dragged node
+        setStyle(getNodeStyle('up', draggedNode.list.horizontal));
+      }
+    };
+
+    draggedNode.list.addListener(update);
+    return () => draggedNode.list.removeListener(update);
+  }, [draggedNode, getNodeStyle]);
+
+  // Update the position of the newly mounted nodes in the target list (used in the virtual list)
+  useEffect(() => {
+    if (!draggedNode || !targetList || targetList === draggedNode.list) {
+      return () => {};
+    }
+
+    const update = (nodeProps: NodeProps) => {
+      const { setStyle, index } = nodeProps;
+      const targetNode = targetNodeRef.current;
+      if (!targetNode) return;
+      const [, , , , targetNodeIndex] = targetNode.node;
+      if (index >= targetNodeIndex) {
+        // Move the mounted node down, if it is located below the target node or if it is the target node
+        setStyle(getNodeStyle('down', targetList.horizontal));
+      }
+    };
+
+    targetList.addListener(update);
+    return () => targetList.removeListener(update);
+  }, [draggedNode, getNodeStyle, targetList]);
+
+  // Call the onDragEnd callback if the draggedNode was changed to null
+  useEffect(() => {
+    if (!draggedNode) return () => {};
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const target = targetRef.current;
+      if (!target) return;
+      const [, , , , draggedNodeIndex, draggedNodeId] = draggedNode.node;
+      const dragged = {
+        listId: draggedNode.list.id,
+        index: draggedNodeIndex,
+        id: draggedNodeId,
+      };
+      if (dragged.id === target.id && dragged.index === target.index) return;
+      onDragEndRef.current(dragged, target);
+    };
+  }, [draggedNode]);
+};
+
+export default useDragEffect;

package/src/utils/useDroppable.ts

@@ -0,0 +1,21 @@
+import React, { MouseEvent, TouchEvent, useContext } from 'react';
+import { ExistingNode, NodeProps } from './NodeList';
+
+interface DroppableContextProps {
+  registerNode: (props: NodeProps) => ExistingNode;
+  deregisterNode: (node: ExistingNode) => void;
+  onMouseDown: (e: MouseEvent, node: ExistingNode) => void;
+  onTouchStart: (e: TouchEvent, node: ExistingNode) => void;
+}
+
+export const DroppableContext = React.createContext<DroppableContextProps>({
+  registerNode: () =>
+    [null, null, { current: null }, () => {}, -1, 'id'] as ExistingNode,
+  deregisterNode: () => {},
+  onMouseDown: () => {},
+  onTouchStart: () => {},
+});
+
+const useDroppable = (): DroppableContextProps => useContext(DroppableContext);
+
+export default useDroppable;

package/src/utils/useGeneratedId.ts

@@ -0,0 +1,6 @@
+import { useMemo } from 'react';
+
+const useGeneratedId = () =>
+  useMemo(() => Math.random().toString(16).slice(2), []);
+
+export default useGeneratedId;

package/src/utils/useGetNodeStyle.ts

@@ -0,0 +1,34 @@
+import { CSSProperties, useCallback, useEffect, useRef } from 'react';
+
+interface InitSize {
+  initWidth: number;
+  initHeight: number;
+}
+
+export type NodeStyleGetter = (
+  type: 'up' | 'down' | 'init',
+  horizontal: boolean
+) => CSSProperties;
+
+const useGetNodeStyle = (size: InitSize | null): NodeStyleGetter => {
+  const sizeRef = useRef(size);
+
+  useEffect(() => {
+    sizeRef.current = size;
+  }, [size]);
+
+  return useCallback<NodeStyleGetter>((type, horizontal) => {
+    if (type === 'init' || !sizeRef.current) return {};
+
+    const translateFn = horizontal ? 'translateX' : 'translateY';
+    const sizeProp = horizontal ? 'initWidth' : 'initHeight';
+    const sign = type === 'down' ? 1 : -1;
+
+    const style: CSSProperties = {};
+    style.transform = `${translateFn}(${sign * sizeRef.current[sizeProp]}px)`;
+
+    return style;
+  }, []);
+};
+
+export default useGetNodeStyle;

package/src/utils/useInitRect.ts

@@ -0,0 +1,17 @@
+import { RefObject, useMemo } from 'react';
+
+const useInitRect = (ref?: RefObject<HTMLElement>) =>
+  useMemo(() => {
+    if (!ref || !ref.current) return null;
+
+    const rect = ref.current.getBoundingClientRect();
+
+    return {
+      initX: rect.x,
+      initY: rect.y,
+      initWidth: rect.width,
+      initHeight: rect.height,
+    };
+  }, [ref]);
+
+export default useInitRect;

package/src/utils/useInitScrollOffset.ts

@@ -0,0 +1,16 @@
+import { RefObject, useMemo } from 'react';
+import getElementScroll from './getElementScroll';
+
+const useInitScrollOffset = (ref?: RefObject<HTMLElement>) =>
+  useMemo(() => {
+    if (!ref || !ref.current) return null;
+
+    const scrollOffset = getElementScroll(ref.current);
+
+    return {
+      initScrollLeft: scrollOffset.scrollLeft,
+      initScrollTop: scrollOffset.scrollTop,
+    };
+  }, [ref]);
+
+export default useInitScrollOffset;

package/src/utils/useMoveNode.ts

@@ -0,0 +1,97 @@
+import { Position } from '@os-design/use-drag';
+import { useCallback } from 'react';
+import NodeList, { ExistingNode } from './NodeList';
+import getNodeRect from './getNodeRect';
+import { NodeStyleGetter } from './useGetNodeStyle';
+
+interface DraggedNode {
+  node: ExistingNode;
+}
+
+interface UseMoveNodeProps {
+  position: Position | null;
+  draggedNode: DraggedNode | null;
+  getNodeStyle: NodeStyleGetter;
+}
+
+interface MoveProps {
+  list: NodeList;
+  startNode: ExistingNode;
+  direction: 'up' | 'down';
+  destination: 'cursor' | 'end';
+  isAnotherList?: boolean;
+}
+
+/* eslint-disable no-constant-condition */
+
+const useMoveNode = (props: UseMoveNodeProps) => {
+  const { position, draggedNode, getNodeStyle } = props;
+
+  return useCallback(
+    (options: MoveProps) => {
+      const {
+        list,
+        startNode,
+        direction,
+        destination,
+        isAnotherList = false,
+      } = options;
+
+      if (!draggedNode || !position) return startNode;
+      const [, , , , draggedNodeIndex] = draggedNode.node;
+      const axis = list.horizontal ? 'x' : 'y';
+      const startRectProp = list.horizontal ? 'left' : 'top';
+      const endRectProp = list.horizontal ? 'right' : 'bottom';
+      let node = startNode;
+
+      if (direction === 'up') {
+        while (true) {
+          const [prev, , , nodeSetStyle, nodeIndex] = node;
+          if (!prev) return node;
+
+          const [, , prevNodeRef, prevNodeSetStyle, prevNodeIndex] = prev;
+
+          if (destination === 'cursor') {
+            const prevNodeRect = getNodeRect(prevNodeRef);
+            if (prevNodeRect && position[axis] > prevNodeRect[endRectProp]) {
+              return node;
+            }
+          }
+
+          if (isAnotherList || prevNodeIndex < draggedNodeIndex) {
+            prevNodeSetStyle(getNodeStyle('down', list.horizontal));
+          } else if (nodeIndex > draggedNodeIndex) {
+            nodeSetStyle(getNodeStyle('init', list.horizontal));
+          }
+
+          node = prev;
+        }
+      } else {
+        while (true) {
+          const [, next, , nodeSetStyle, nodeIndex] = node;
+          if (!next) return node;
+
+          const [, , nextNodeRef, nextNodeSetStyle, nextNodeIndex] = next;
+
+          if (destination === 'cursor') {
+            const nextNodeRect = getNodeRect(nextNodeRef);
+            if (nextNodeRect && position[axis] < nextNodeRect[startRectProp]) {
+              return node;
+            }
+          }
+
+          if (isAnotherList || nodeIndex < draggedNodeIndex) {
+            nodeSetStyle(getNodeStyle('init', list.horizontal));
+          } else if (nextNodeIndex > draggedNodeIndex) {
+            nextNodeSetStyle(getNodeStyle('up', list.horizontal));
+          }
+
+          node = next;
+        }
+      }
+    },
+    [draggedNode, getNodeStyle, position]
+  );
+};
+
+export default useMoveNode;