@os-design/drag-sort 1.0.0

package/dist/cjs/utils/NodeList.js

@@ -0,0 +1,266 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+/* eslint-disable @typescript-eslint/no-explicit-any,no-param-reassign,prefer-destructuring,no-constant-condition */
+// [prev, next, ref, setStyle, index]
+
+/**
+ * Stores all the draggable items in the list.
+ * The structure of the doubly linked list is used.
+ */
+var NodeList = /*#__PURE__*/function () {
+  /**
+   * The ID of the list.
+   */
+
+  /**
+   * The ref to the list.
+   */
+
+  /**
+   * The inner ref to the list.
+   * Used by the virtual list.
+   */
+
+  /**
+   * Whether the list is horizontal.
+   */
+
+  /**
+   * The callback that renders the dragged node.
+   */
+
+  /**
+   * The head of draggable nodes.
+   */
+
+  /**
+   * The tail of draggable nodes.
+   */
+
+  /**
+   * Listeners of node addition events.
+   */
+  function NodeList(props) {
+    _classCallCheck(this, NodeList);
+
+    this.id = void 0;
+    this.ref = void 0;
+    this.innerRef = void 0;
+    this.horizontal = void 0;
+    this.renderDraggedNode = void 0;
+    this.head = void 0;
+    this.tail = void 0;
+    this.listeners = void 0;
+    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 = [];
+  }
+
+  _createClass(NodeList, [{
+    key: "getHead",
+    value: function getHead() {
+      return this.head;
+    }
+  }, {
+    key: "getTail",
+    value: function getTail() {
+      return this.tail;
+    }
+    /**
+     * Adds the node to the beginning.
+     * TL: O(1).
+     */
+
+  }, {
+    key: "addToTheBeginning",
+    value: function addToTheBeginning(props) {
+      this.head = [null, this.head, props.ref, props.setStyle, props.index];
+
+      var _this$head = _slicedToArray(this.head, 2),
+          next = _this$head[1];
+
+      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).
+     */
+
+  }, {
+    key: "addToTheEnd",
+    value: function addToTheEnd(props) {
+      this.tail = [this.tail, null, props.ref, props.setStyle, props.index];
+
+      var _this$tail = _slicedToArray(this.tail, 1),
+          prev = _this$tail[0];
+
+      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).
+     */
+
+  }, {
+    key: "add",
+    value:
+    /**
+     * 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.
+     */
+    function add(props) {
+      var index = props.index; // Run listeners
+
+      this.listeners.forEach(function (listener) {
+        return 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
+
+
+      var _this$head2 = _slicedToArray(this.head, 5),
+          headIndex = _this$head2[4];
+
+      if (index < headIndex) {
+        return this.addToTheBeginning(props);
+      } // Add the node to the end if it is located below the last one
+
+
+      var _this$tail2 = _slicedToArray(this.tail, 5),
+          tailIndex = _this$tail2[4];
+
+      if (index === tailIndex) {
+        // The tail is the blank node
+        var _this$tail3 = _slicedToArray(this.tail, 1),
+            prev = _this$tail3[0];
+
+        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
+
+
+      var node = this.head;
+
+      while (true) {
+        var _node = node,
+            _node2 = _slicedToArray(_node, 2),
+            next = _node2[1];
+
+        if (!next) break;
+
+        var _next = _slicedToArray(next, 5),
+            nextIndex = _next[4];
+
+        if (index < nextIndex) break;
+        node = next;
+      }
+
+      return NodeList.addAfter(node, props);
+    }
+    /**
+     * Removes the existing node.
+     * Called when the node is unmounted.
+     * TL: O(1).
+     */
+
+  }, {
+    key: "remove",
+    value: function remove(node) {
+      var _node3 = _slicedToArray(node, 2),
+          prev = _node3[0],
+          next = _node3[1];
+
+      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;
+      }
+    }
+  }, {
+    key: "addListener",
+    value: function addListener(callback) {
+      this.listeners.push(callback);
+    }
+  }, {
+    key: "removeListener",
+    value: function removeListener(callback) {
+      var index = this.listeners.findIndex(function (listener) {
+        return listener === callback;
+      });
+      this.listeners.splice(index, 1);
+    }
+  }], [{
+    key: "addAfter",
+    value: function addAfter(node, props) {
+      node[1] = [node, node[1], props.ref, props.setStyle, props.index];
+      if (node[1][1]) node[1][1][0] = node[1];
+      return node[1];
+    }
+  }]);
+
+  return NodeList;
+}();
+
+var _default = NodeList;
+exports["default"] = _default;
+//# sourceMappingURL=NodeList.js.map

package/dist/cjs/utils/NodeList.js.map

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

package/dist/cjs/utils/getElementOffset.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var getElementOffset = function getElementOffset(element) {
+  var offsetLeft = 0;
+  var offsetTop = 0;
+  var el = element;
+
+  while (el) {
+    offsetLeft += el.offsetLeft;
+    offsetTop += el.offsetTop;
+    el = el.offsetParent;
+  }
+
+  return {
+    offsetLeft: offsetLeft,
+    offsetTop: offsetTop
+  };
+};
+
+var _default = getElementOffset;
+exports["default"] = _default;
+//# sourceMappingURL=getElementOffset.js.map

package/dist/cjs/utils/getElementOffset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/getElementOffset.ts"],"names":["getElementOffset","element","offsetLeft","offsetTop","el","offsetParent"],"mappings":";;;;;;;AAAA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAA0B;AACjD,MAAIC,UAAU,GAAG,CAAjB;AACA,MAAIC,SAAS,GAAG,CAAhB;AACA,MAAIC,EAAsB,GAAGH,OAA7B;;AACA,SAAOG,EAAP,EAAW;AACTF,IAAAA,UAAU,IAAIE,EAAE,CAACF,UAAjB;AACAC,IAAAA,SAAS,IAAIC,EAAE,CAACD,SAAhB;AACAC,IAAAA,EAAE,GAAGA,EAAE,CAACC,YAAR;AACD;;AACD,SAAO;AAAEH,IAAAA,UAAU,EAAVA,UAAF;AAAcC,IAAAA,SAAS,EAATA;AAAd,GAAP;AACD,CAVD;;eAYeH,gB","sourcesContent":["const getElementOffset = (element: HTMLElement) => {\n  let offsetLeft = 0;\n  let offsetTop = 0;\n  let el: HTMLElement | null = element;\n  while (el) {\n    offsetLeft += el.offsetLeft;\n    offsetTop += el.offsetTop;\n    el = el.offsetParent as HTMLElement;\n  }\n  return { offsetLeft, offsetTop };\n};\n\nexport default getElementOffset;\n"],"file":"getElementOffset.js"}

package/dist/cjs/utils/getElementScroll.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var getElementScroll = function getElementScroll(element) {
+  var scrollLeft = 0;
+  var scrollTop = 0;
+  var el = element;
+
+  while (el) {
+    scrollLeft += el.scrollLeft;
+    scrollTop += el.scrollTop;
+    el = el.parentElement;
+  }
+
+  return {
+    scrollLeft: scrollLeft,
+    scrollTop: scrollTop
+  };
+};
+
+var _default = getElementScroll;
+exports["default"] = _default;
+//# sourceMappingURL=getElementScroll.js.map

package/dist/cjs/utils/getElementScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/getElementScroll.ts"],"names":["getElementScroll","element","scrollLeft","scrollTop","el","parentElement"],"mappings":";;;;;;;AAAA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAA0B;AACjD,MAAIC,UAAU,GAAG,CAAjB;AACA,MAAIC,SAAS,GAAG,CAAhB;AACA,MAAIC,EAAsB,GAAGH,OAA7B;;AACA,SAAOG,EAAP,EAAW;AACTF,IAAAA,UAAU,IAAIE,EAAE,CAACF,UAAjB;AACAC,IAAAA,SAAS,IAAIC,EAAE,CAACD,SAAhB;AACAC,IAAAA,EAAE,GAAGA,EAAE,CAACC,aAAR;AACD;;AACD,SAAO;AAAEH,IAAAA,UAAU,EAAVA,UAAF;AAAcC,IAAAA,SAAS,EAATA;AAAd,GAAP;AACD,CAVD;;eAYeH,gB","sourcesContent":["const getElementScroll = (element: HTMLElement) => {\n  let scrollLeft = 0;\n  let scrollTop = 0;\n  let el: HTMLElement | null = element;\n  while (el) {\n    scrollLeft += el.scrollLeft;\n    scrollTop += el.scrollTop;\n    el = el.parentElement;\n  }\n  return { scrollLeft, scrollTop };\n};\n\nexport default getElementScroll;\n"],"file":"getElementScroll.js"}

package/dist/cjs/utils/getNodeRect.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _getElementScroll = _interopRequireDefault(require("./getElementScroll"));
+
+var _getElementOffset2 = _interopRequireDefault(require("./getElementOffset"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * Computes the bounds of the existing node without considering transforms.
+ */
+var getNodeRect = function getNodeRect(ref) {
+  if (!ref.current) return null;
+  var parent = ref.current.parentElement;
+
+  var _ref$current$getBound = ref.current.getBoundingClientRect(),
+      width = _ref$current$getBound.width,
+      height = _ref$current$getBound.height;
+
+  var _getElementOffset = (0, _getElementOffset2["default"])(ref.current),
+      offsetLeft = _getElementOffset.offsetLeft,
+      offsetTop = _getElementOffset.offsetTop;
+
+  var _ref = parent ? (0, _getElementScroll["default"])(parent) : {
+    scrollLeft: 0,
+    scrollTop: 0
+  },
+      scrollLeft = _ref.scrollLeft,
+      scrollTop = _ref.scrollTop;
+
+  var left = offsetLeft - scrollLeft;
+  var top = offsetTop - scrollTop;
+  return {
+    left: left,
+    top: top,
+    right: left + width,
+    bottom: top + height
+  };
+};
+
+var _default = getNodeRect;
+exports["default"] = _default;
+//# sourceMappingURL=getNodeRect.js.map

package/dist/cjs/utils/getNodeRect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/getNodeRect.ts"],"names":["getNodeRect","ref","current","parent","parentElement","getBoundingClientRect","width","height","offsetLeft","offsetTop","scrollLeft","scrollTop","left","top","right","bottom"],"mappings":";;;;;;;AACA;;AACA;;;;AAEA;AACA;AACA;AACA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,GAAD,EAAiC;AACnD,MAAI,CAACA,GAAG,CAACC,OAAT,EAAkB,OAAO,IAAP;AAElB,MAAMC,MAAM,GAAGF,GAAG,CAACC,OAAJ,CAAYE,aAA3B;;AACA,8BAA0BH,GAAG,CAACC,OAAJ,CAAYG,qBAAZ,EAA1B;AAAA,MAAQC,KAAR,yBAAQA,KAAR;AAAA,MAAeC,MAAf,yBAAeA,MAAf;;AACA,0BAAkC,mCAAiBN,GAAG,CAACC,OAArB,CAAlC;AAAA,MAAQM,UAAR,qBAAQA,UAAR;AAAA,MAAoBC,SAApB,qBAAoBA,SAApB;;AACA,aAAkCN,MAAM,GACpC,kCAAiBA,MAAjB,CADoC,GAEpC;AAAEO,IAAAA,UAAU,EAAE,CAAd;AAAiBC,IAAAA,SAAS,EAAE;AAA5B,GAFJ;AAAA,MAAQD,UAAR,QAAQA,UAAR;AAAA,MAAoBC,SAApB,QAAoBA,SAApB;;AAIA,MAAMC,IAAI,GAAGJ,UAAU,GAAGE,UAA1B;AACA,MAAMG,GAAG,GAAGJ,SAAS,GAAGE,SAAxB;AAEA,SAAO;AACLC,IAAAA,IAAI,EAAJA,IADK;AAELC,IAAAA,GAAG,EAAHA,GAFK;AAGLC,IAAAA,KAAK,EAAEF,IAAI,GAAGN,KAHT;AAILS,IAAAA,MAAM,EAAEF,GAAG,GAAGN;AAJT,GAAP;AAMD,CAnBD;;eAqBeP,W","sourcesContent":["import { RefObject } from 'react';\nimport getElementScroll from './getElementScroll';\nimport getElementOffset from './getElementOffset';\n\n/**\n * Computes the bounds of the existing node without considering transforms.\n */\nconst getNodeRect = (ref: RefObject<HTMLElement>) => {\n  if (!ref.current) return null;\n\n  const parent = ref.current.parentElement;\n  const { width, height } = ref.current.getBoundingClientRect();\n  const { offsetLeft, offsetTop } = getElementOffset(ref.current);\n  const { scrollLeft, scrollTop } = parent\n    ? getElementScroll(parent)\n    : { scrollLeft: 0, scrollTop: 0 };\n\n  const left = offsetLeft - scrollLeft;\n  const top = offsetTop - scrollTop;\n\n  return {\n    left,\n    top,\n    right: left + width,\n    bottom: top + height,\n  };\n};\n\nexport default getNodeRect;\n"],"file":"getNodeRect.js"}

package/dist/cjs/utils/useAppendClassName.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+/**
+ * Adds a new class name to the element.
+ */
+var useAppendClassName = function useAppendClassName(ref, className) {
+  (0, _react.useEffect)(function () {
+    var element = ref.current;
+    if (!element) return function () {};
+    var initClassName = element.className;
+    element.className = "".concat(initClassName, " ").concat(className).trim();
+    return function () {
+      element.className = initClassName;
+    };
+  }, [className, ref]);
+};
+
+var _default = useAppendClassName;
+exports["default"] = _default;
+//# sourceMappingURL=useAppendClassName.js.map

package/dist/cjs/utils/useAppendClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useAppendClassName.ts"],"names":["useAppendClassName","ref","className","element","current","initClassName","trim"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,GAAD,EAA8BC,SAA9B,EAAoD;AAC7E,wBAAU,YAAM;AACd,QAAMC,OAAO,GAAGF,GAAG,CAACG,OAApB;AACA,QAAI,CAACD,OAAL,EAAc,OAAO,YAAM,CAAE,CAAf;AAEd,QAAME,aAAa,GAAGF,OAAO,CAACD,SAA9B;AACAC,IAAAA,OAAO,CAACD,SAAR,GAAoB,UAAGG,aAAH,cAAoBH,SAApB,EAAgCI,IAAhC,EAApB;AAEA,WAAO,YAAM;AACXH,MAAAA,OAAO,CAACD,SAAR,GAAoBG,aAApB;AACD,KAFD;AAGD,GAVD,EAUG,CAACH,SAAD,EAAYD,GAAZ,CAVH;AAWD,CAZD;;eAceD,kB","sourcesContent":["import { RefObject, useEffect } from 'react';\n\n/**\n * Adds a new class name to the element.\n */\nconst useAppendClassName = (ref: RefObject<HTMLElement>, className: string) => {\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return () => {};\n\n    const initClassName = element.className;\n    element.className = `${initClassName} ${className}`.trim();\n\n    return () => {\n      element.className = initClassName;\n    };\n  }, [className, ref]);\n};\n\nexport default useAppendClassName;\n"],"file":"useAppendClassName.js"}

package/dist/cjs/utils/useBlankNode.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * Appends the blank node to the list to increase the height of it.
+ * Used when the dragged node is located inside another list.
+ */
+var useBlankNode = function useBlankNode(props) {
+  var draggedNode = props.draggedNode,
+      targetList = props.targetList,
+      initDraggedNodeRect = props.initDraggedNodeRect;
+  var initDraggedNodeRectRef = (0, _react.useRef)(initDraggedNodeRect);
+  var blankNode = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    initDraggedNodeRectRef.current = initDraggedNodeRect;
+  }, [initDraggedNodeRect]);
+  (0, _react.useEffect)(function () {
+    if (!draggedNode || !targetList || !targetList.ref.current || draggedNode.list === targetList || !initDraggedNodeRectRef.current) {
+      return;
+    } // Create a new blank div
+
+
+    var _initDraggedNodeRectR = initDraggedNodeRectRef.current,
+        initWidth = _initDraggedNodeRectR.initWidth,
+        initHeight = _initDraggedNodeRectR.initHeight;
+    var div = document.createElement('div');
+    div.style.width = "".concat(initWidth, "px");
+    div.style.height = "".concat(initHeight, "px");
+    div.style.minWidth = "".concat(initWidth, "px");
+    div.style.minHeight = "".concat(initHeight, "px");
+    var parent = targetList.ref.current;
+    var innerList = targetList.innerRef.current; // The inner ref used only in the virtual list
+
+    if (innerList) {
+      var _innerList$getBoundin = innerList.getBoundingClientRect(),
+          width = _innerList$getBoundin.width,
+          height = _innerList$getBoundin.height;
+
+      div.style.position = 'absolute';
+      div.style.left = targetList.horizontal ? "".concat(width, "px") : '0px';
+      div.style.top = targetList.horizontal ? '0px' : "".concat(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
+
+    var tail = targetList.getTail();
+    blankNode.current = {
+      list: targetList,
+      node: targetList.add({
+        ref: {
+          current: div
+        },
+        setStyle: function setStyle() {},
+        index: tail ? tail[4] + 1 : 0
+      })
+    };
+  }, [draggedNode, targetList]);
+  var removeBlankNode = (0, _react.useCallback)(function () {
+    var blank = blankNode.current;
+    if (!blank) return;
+    blankNode.current = null;
+    blank.list.remove(blank.node);
+
+    var _blank$node = _slicedToArray(blank.node, 3),
+        blankNodeRef = _blank$node[2];
+
+    if (!blank.list.ref.current || !blankNodeRef.current) return;
+    var parent = blankNodeRef.current.parentElement;
+    if (parent) parent.removeChild(blankNodeRef.current);
+  }, []); // Remove the blank node if the dragged node has been dropped
+
+  (0, _react.useEffect)(function () {
+    if (!draggedNode) return function () {};
+    return function () {
+      return removeBlankNode();
+    };
+  }, [draggedNode, removeBlankNode]);
+  return removeBlankNode;
+};
+
+var _default = useBlankNode;
+exports["default"] = _default;
+//# sourceMappingURL=useBlankNode.js.map

package/dist/cjs/utils/useBlankNode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useBlankNode.ts"],"names":["useBlankNode","props","draggedNode","targetList","initDraggedNodeRect","initDraggedNodeRectRef","blankNode","current","ref","list","initWidth","initHeight","div","document","createElement","style","width","height","minWidth","minHeight","parent","innerList","innerRef","getBoundingClientRect","position","left","horizontal","top","appendChild","tail","getTail","node","add","setStyle","index","removeBlankNode","blank","remove","blankNodeRef","parentElement","removeChild"],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport NodeList, { ExistingNode } from './NodeList';\n// eslint-disable-next-line import/no-cycle\nimport { DraggedNode } from './useDragEffect';\n\ninterface InitSize {\n  initWidth: number;\n  initHeight: number;\n}\n\ninterface UseBlankNodeProps {\n  draggedNode: DraggedNode | null;\n  targetList: NodeList | null;\n  initDraggedNodeRect: InitSize | null;\n}\n\ninterface BlankNode {\n  list: NodeList;\n  node: ExistingNode;\n}\n\n/**\n * Appends the blank node to the list to increase the height of it.\n * Used when the dragged node is located inside another list.\n */\nconst useBlankNode = (props: UseBlankNodeProps) => {\n  const { draggedNode, targetList, initDraggedNodeRect } = props;\n  const initDraggedNodeRectRef = useRef(initDraggedNodeRect);\n  const blankNode = useRef<BlankNode | null>(null);\n\n  useEffect(() => {\n    initDraggedNodeRectRef.current = initDraggedNodeRect;\n  }, [initDraggedNodeRect]);\n\n  useEffect(() => {\n    if (\n      !draggedNode ||\n      !targetList ||\n      !targetList.ref.current ||\n      draggedNode.list === targetList ||\n      !initDraggedNodeRectRef.current\n    ) {\n      return;\n    }\n\n    // Create a new blank div\n    const { initWidth, initHeight } = initDraggedNodeRectRef.current;\n    const div = document.createElement('div');\n    div.style.width = `${initWidth}px`;\n    div.style.height = `${initHeight}px`;\n    div.style.minWidth = `${initWidth}px`;\n    div.style.minHeight = `${initHeight}px`;\n\n    let parent = targetList.ref.current;\n    const innerList = targetList.innerRef.current;\n\n    // The inner ref used only in the virtual list\n    if (innerList) {\n      const { width, height } = innerList.getBoundingClientRect();\n      div.style.position = 'absolute';\n      div.style.left = targetList.horizontal ? `${width}px` : '0px';\n      div.style.top = targetList.horizontal ? '0px' : `${height}px`;\n      parent = innerList;\n    }\n\n    // Append the blank div to increase the height of the list\n    parent.appendChild(div);\n\n    // Add the blank node to the node list\n    const tail = targetList.getTail();\n    blankNode.current = {\n      list: targetList,\n      node: targetList.add({\n        ref: { current: div },\n        setStyle: () => {},\n        index: tail ? tail[4] + 1 : 0,\n      }),\n    };\n  }, [draggedNode, targetList]);\n\n  const removeBlankNode = useCallback(() => {\n    const blank = blankNode.current;\n    if (!blank) return;\n    blankNode.current = null;\n    blank.list.remove(blank.node);\n    const [, , blankNodeRef] = blank.node;\n    if (!blank.list.ref.current || !blankNodeRef.current) return;\n    const parent = blankNodeRef.current.parentElement;\n    if (parent) parent.removeChild(blankNodeRef.current);\n  }, []);\n\n  // Remove the blank node if the dragged node has been dropped\n  useEffect(() => {\n    if (!draggedNode) return () => {};\n    return () => removeBlankNode();\n  }, [draggedNode, removeBlankNode]);\n\n  return removeBlankNode;\n};\n\nexport default useBlankNode;\n"],"file":"useBlankNode.js"}

package/dist/cjs/utils/useDragAndDrop.js

@@ -0,0 +1,32 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DragAndDropContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var DragAndDropContext = /*#__PURE__*/_react["default"].createContext({
+  registerList: function registerList() {},
+  deregisterList: function deregisterList() {},
+  onMouseDown: function onMouseDown() {},
+  onTouchStart: function onTouchStart() {},
+  nodeClassName: ''
+});
+
+exports.DragAndDropContext = DragAndDropContext;
+
+var useDragAndDrop = function useDragAndDrop() {
+  return (0, _react.useContext)(DragAndDropContext);
+};
+
+var _default = useDragAndDrop;
+exports["default"] = _default;
+//# sourceMappingURL=useDragAndDrop.js.map

package/dist/cjs/utils/useDragAndDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useDragAndDrop.ts"],"names":["DragAndDropContext","React","createContext","registerList","deregisterList","onMouseDown","onTouchStart","nodeClassName","useDragAndDrop"],"mappings":";;;;;;;;;AAAA;;;;;;AAoBO,IAAMA,kBAAkB,gBAAGC,kBAAMC,aAAN,CAA6C;AAC7EC,EAAAA,YAAY,EAAE,wBAAM,CAAE,CADuD;AAE7EC,EAAAA,cAAc,EAAE,0BAAM,CAAE,CAFqD;AAG7EC,EAAAA,WAAW,EAAE,uBAAM,CAAE,CAHwD;AAI7EC,EAAAA,YAAY,EAAE,wBAAM,CAAE,CAJuD;AAK7EC,EAAAA,aAAa,EAAE;AAL8D,CAA7C,CAA3B;;;;AAQP,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;AAAA,SACrB,uBAAWR,kBAAX,CADqB;AAAA,CAAvB;;eAGeQ,c","sourcesContent":["import React, { useContext, MouseEvent, TouchEvent } from 'react';\nimport { Position } from '@os-design/use-drag';\nimport NodeList, { ExistingNode } from './NodeList';\n\nexport interface SetDraggedNodeProps {\n  list: NodeList;\n  node: ExistingNode;\n  position: Position;\n}\n\ntype NodeEventHandler<T> = (e: T, list: NodeList, node: ExistingNode) => void;\n\ninterface DragAndDropContextProps {\n  registerList: (list: NodeList) => void;\n  deregisterList: (id: string) => void;\n  onMouseDown: NodeEventHandler<MouseEvent>;\n  onTouchStart: NodeEventHandler<TouchEvent>;\n  nodeClassName: string;\n}\n\nexport const DragAndDropContext = React.createContext<DragAndDropContextProps>({\n  registerList: () => {},\n  deregisterList: () => {},\n  onMouseDown: () => {},\n  onTouchStart: () => {},\n  nodeClassName: '',\n});\n\nconst useDragAndDrop = (): DragAndDropContextProps =>\n  useContext(DragAndDropContext);\n\nexport default useDragAndDrop;\n"],"file":"useDragAndDrop.js"}