@os-design/drag-sort 1.0.13 → 1.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/dist/cjs/DragAndDrop.js +50 -72
  2. package/dist/cjs/DragAndDrop.js.map +1 -1
  3. package/dist/cjs/Draggable.js +19 -36
  4. package/dist/cjs/Draggable.js.map +1 -1
  5. package/dist/cjs/Droppable.js +24 -33
  6. package/dist/cjs/Droppable.js.map +1 -1
  7. package/dist/cjs/index.js +0 -9
  8. package/dist/cjs/index.js.map +1 -1
  9. package/dist/cjs/utils/ListStore.js +4 -13
  10. package/dist/cjs/utils/ListStore.js.map +1 -1
  11. package/dist/cjs/utils/NodeList.js +25 -56
  12. package/dist/cjs/utils/NodeList.js.map +1 -1
  13. package/dist/cjs/utils/getElementOffset.js +0 -4
  14. package/dist/cjs/utils/getElementOffset.js.map +1 -1
  15. package/dist/cjs/utils/getElementScroll.js +0 -4
  16. package/dist/cjs/utils/getElementScroll.js.map +1 -1
  17. package/dist/cjs/utils/getNodeRect.js +9 -18
  18. package/dist/cjs/utils/getNodeRect.js.map +1 -1
  19. package/dist/cjs/utils/useAppendClassName.js +0 -3
  20. package/dist/cjs/utils/useAppendClassName.js.map +1 -1
  21. package/dist/cjs/utils/useBlankNode.js +17 -26
  22. package/dist/cjs/utils/useBlankNode.js.map +1 -1
  23. package/dist/cjs/utils/useDragAndDrop.js +0 -8
  24. package/dist/cjs/utils/useDragAndDrop.js.map +1 -1
  25. package/dist/cjs/utils/useDragEffect.js +104 -163
  26. package/dist/cjs/utils/useDragEffect.js.map +1 -1
  27. package/dist/cjs/utils/useDroppable.js +0 -8
  28. package/dist/cjs/utils/useDroppable.js.map +1 -1
  29. package/dist/cjs/utils/useGeneratedId.js +0 -3
  30. package/dist/cjs/utils/useGeneratedId.js.map +1 -1
  31. package/dist/cjs/utils/useGetNodeStyle.js +0 -3
  32. package/dist/cjs/utils/useGetNodeStyle.js.map +1 -1
  33. package/dist/cjs/utils/useInitRect.js +0 -3
  34. package/dist/cjs/utils/useInitRect.js.map +1 -1
  35. package/dist/cjs/utils/useInitScrollOffset.js +0 -5
  36. package/dist/cjs/utils/useInitScrollOffset.js.map +1 -1
  37. package/dist/cjs/utils/useMoveNode.js +23 -48
  38. package/dist/cjs/utils/useMoveNode.js.map +1 -1
  39. package/dist/cjs/utils/useScrollEventByPoint.js +2 -10
  40. package/dist/cjs/utils/useScrollEventByPoint.js.map +1 -1
  41. package/dist/cjs/utils/useTargetList.js +8 -21
  42. package/dist/cjs/utils/useTargetList.js.map +1 -1
  43. package/dist/cjs/utils/useTransitionStyle.js +2 -5
  44. package/dist/cjs/utils/useTransitionStyle.js.map +1 -1
  45. package/dist/esm/DragAndDrop.js +19 -12
  46. package/dist/esm/DragAndDrop.js.map +1 -1
  47. package/dist/esm/Draggable.js +10 -9
  48. package/dist/esm/Draggable.js.map +1 -1
  49. package/dist/esm/Droppable.js +17 -14
  50. package/dist/esm/Droppable.js.map +1 -1
  51. package/dist/esm/index.js.map +1 -1
  52. package/dist/esm/utils/ListStore.js +3 -8
  53. package/dist/esm/utils/ListStore.js.map +1 -1
  54. package/dist/esm/utils/NodeList.js +17 -36
  55. package/dist/esm/utils/NodeList.js.map +1 -1
  56. package/dist/esm/utils/getElementOffset.js +0 -3
  57. package/dist/esm/utils/getElementOffset.js.map +1 -1
  58. package/dist/esm/utils/getElementScroll.js +0 -3
  59. package/dist/esm/utils/getElementScroll.js.map +1 -1
  60. package/dist/esm/utils/getNodeRect.js +1 -2
  61. package/dist/esm/utils/getNodeRect.js.map +1 -1
  62. package/dist/esm/utils/useAppendClassName.js +1 -2
  63. package/dist/esm/utils/useAppendClassName.js.map +1 -1
  64. package/dist/esm/utils/useBlankNode.js +10 -9
  65. package/dist/esm/utils/useBlankNode.js.map +1 -1
  66. package/dist/esm/utils/useDragAndDrop.js +0 -2
  67. package/dist/esm/utils/useDragAndDrop.js.map +1 -1
  68. package/dist/esm/utils/useDragEffect.js +57 -60
  69. package/dist/esm/utils/useDragEffect.js.map +1 -1
  70. package/dist/esm/utils/useDroppable.js +0 -2
  71. package/dist/esm/utils/useDroppable.js.map +1 -1
  72. package/dist/esm/utils/useGeneratedId.js +0 -2
  73. package/dist/esm/utils/useGeneratedId.js.map +1 -1
  74. package/dist/esm/utils/useGetNodeStyle.js +0 -2
  75. package/dist/esm/utils/useGetNodeStyle.js.map +1 -1
  76. package/dist/esm/utils/useInitRect.js +0 -2
  77. package/dist/esm/utils/useInitRect.js.map +1 -1
  78. package/dist/esm/utils/useInitScrollOffset.js +0 -2
  79. package/dist/esm/utils/useInitScrollOffset.js.map +1 -1
  80. package/dist/esm/utils/useMoveNode.js +1 -11
  81. package/dist/esm/utils/useMoveNode.js.map +1 -1
  82. package/dist/esm/utils/useScrollEventByPoint.js +0 -5
  83. package/dist/esm/utils/useScrollEventByPoint.js.map +1 -1
  84. package/dist/esm/utils/useTargetList.js +2 -3
  85. package/dist/esm/utils/useTargetList.js.map +1 -1
  86. package/dist/esm/utils/useTransitionStyle.js +0 -2
  87. package/dist/esm/utils/useTransitionStyle.js.map +1 -1
  88. package/package.json +11 -11
@@ -4,65 +4,45 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports["default"] = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _useThrottle3 = _interopRequireDefault(require("@os-design/use-throttle"));
11
-
12
9
  var _useEvent = _interopRequireDefault(require("@os-design/use-event"));
13
-
14
10
  var _getElementScroll2 = _interopRequireDefault(require("./getElementScroll"));
15
-
16
11
  var _useTargetList = _interopRequireDefault(require("./useTargetList"));
17
-
18
12
  var _useInitRect = _interopRequireDefault(require("./useInitRect"));
19
-
20
13
  var _useInitScrollOffset = _interopRequireDefault(require("./useInitScrollOffset"));
21
-
22
14
  var _useGetNodeStyle = _interopRequireDefault(require("./useGetNodeStyle"));
23
-
24
15
  var _useMoveNode = _interopRequireDefault(require("./useMoveNode"));
25
-
26
16
  var _getNodeRect = _interopRequireDefault(require("./getNodeRect"));
27
-
28
17
  var _useBlankNode = _interopRequireDefault(require("./useBlankNode"));
29
-
30
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
31
-
32
19
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
33
-
34
20
  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."); }
35
-
36
21
  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); }
37
-
38
22
  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; }
39
-
40
23
  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; }
41
-
42
24
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
43
-
44
25
  var HIDDEN_NODE_STYLE = {
45
26
  opacity: 0,
46
27
  pointerEvents: 'none'
47
28
  };
48
-
49
29
  var createEmptyNode = function createEmptyNode(_ref) {
50
30
  var _ref$prev = _ref.prev,
51
- prev = _ref$prev === void 0 ? null : _ref$prev,
52
- _ref$next = _ref.next,
53
- next = _ref$next === void 0 ? null : _ref$next;
31
+ prev = _ref$prev === void 0 ? null : _ref$prev,
32
+ _ref$next = _ref.next,
33
+ next = _ref$next === void 0 ? null : _ref$next;
54
34
  return [prev, next, {
55
35
  current: null
56
36
  }, function () {}, -1, 'id'];
57
37
  };
58
- /* eslint-disable no-constant-condition */
59
38
 
39
+ /* eslint-disable no-constant-condition */
60
40
 
61
41
  var useDragEffect = function useDragEffect(props) {
62
42
  var draggedNode = props.draggedNode,
63
- cursorPosition = props.cursorPosition,
64
- listStoreRef = props.listStoreRef,
65
- onDragEnd = props.onDragEnd;
43
+ cursorPosition = props.cursorPosition,
44
+ listStoreRef = props.listStoreRef,
45
+ onDragEnd = props.onDragEnd;
66
46
  var targetRef = (0, _react.useRef)(null);
67
47
  var targetNodeRef = (0, _react.useRef)(draggedNode);
68
48
  (0, _react.useEffect)(function () {
@@ -71,30 +51,36 @@ var useDragEffect = function useDragEffect(props) {
71
51
  var onDragEndRef = (0, _react.useRef)(onDragEnd);
72
52
  (0, _react.useEffect)(function () {
73
53
  onDragEndRef.current = onDragEnd;
74
- }, [onDragEnd]); // The initial bounds of the dragged node.
54
+ }, [onDragEnd]);
55
+
56
+ // The initial bounds of the dragged node.
75
57
  // We can't read the bounds of the dragged node on the fly because the node can be unmounted in the virtual list.
58
+ var initDraggedNodeRect = (0, _useInitRect["default"])(draggedNode ? draggedNode.node[2] : undefined);
76
59
 
77
- var initDraggedNodeRect = (0, _useInitRect["default"])(draggedNode ? draggedNode.node[2] : undefined); // The initial scroll position of the list where the dragged node is located.
60
+ // The initial scroll position of the list where the dragged node is located.
78
61
  // Used to detect the actual position of the dragged node. The purpose is the same as with initDraggedNodeRect.
62
+ var initDraggedNodeListScrollOffset = (0, _useInitScrollOffset["default"])(draggedNode ? draggedNode.list.ref : undefined);
79
63
 
80
- var initDraggedNodeListScrollOffset = (0, _useInitScrollOffset["default"])(draggedNode ? draggedNode.list.ref : undefined); // The central position of the dragged node
81
-
64
+ // The central position of the dragged node
82
65
  var position = (0, _react.useMemo)(function () {
83
66
  if (!draggedNode || !initDraggedNodeRect) return null;
84
67
  var x = cursorPosition.x,
85
- y = cursorPosition.y;
68
+ y = cursorPosition.y;
86
69
  var initWidth = initDraggedNodeRect.initWidth,
87
- initHeight = initDraggedNodeRect.initHeight;
70
+ initHeight = initDraggedNodeRect.initHeight;
88
71
  return {
89
72
  x: x - draggedNode.position.x + initWidth / 2,
90
73
  y: y - draggedNode.position.y + initHeight / 2
91
74
  };
92
- }, [cursorPosition, draggedNode, initDraggedNodeRect]); // The list in which the cursor is located
75
+ }, [cursorPosition, draggedNode, initDraggedNodeRect]);
93
76
 
94
- var targetList = (0, _useTargetList["default"])(position, listStoreRef); // Returns the style for moving the node in the specified direction
77
+ // The list in which the cursor is located
78
+ var targetList = (0, _useTargetList["default"])(position, listStoreRef);
95
79
 
96
- var getNodeStyle = (0, _useGetNodeStyle["default"])(initDraggedNodeRect); // Moves the node up or down
80
+ // Returns the style for moving the node in the specified direction
81
+ var getNodeStyle = (0, _useGetNodeStyle["default"])(initDraggedNodeRect);
97
82
 
83
+ // Moves the node up or down
98
84
  var moveNode = (0, _useMoveNode["default"])({
99
85
  position: position,
100
86
  draggedNode: draggedNode,
@@ -102,9 +88,8 @@ var useDragEffect = function useDragEffect(props) {
102
88
  });
103
89
  var setTargetNode = (0, _react.useCallback)(function (list, node) {
104
90
  var _node = _slicedToArray(node, 6),
105
- nodeIndex = _node[4],
106
- nodeId = _node[5];
107
-
91
+ nodeIndex = _node[4],
92
+ nodeId = _node[5];
108
93
  targetNodeRef.current = {
109
94
  list: list,
110
95
  node: node
@@ -118,24 +103,22 @@ var useDragEffect = function useDragEffect(props) {
118
103
  var clearTargetNode = (0, _react.useCallback)(function () {
119
104
  targetNodeRef.current = null;
120
105
  targetRef.current = null;
121
- }, []); // Returns the central position of the dragged node in the list
106
+ }, []);
122
107
 
108
+ // Returns the central position of the dragged node in the list
123
109
  var getDraggedNodePos = (0, _react.useCallback)(function () {
124
110
  if (!targetList || !targetList.ref.current || !initDraggedNodeRect || !initDraggedNodeListScrollOffset) {
125
111
  return null;
126
112
  }
127
-
128
113
  var initX = initDraggedNodeRect.initX,
129
- initY = initDraggedNodeRect.initY,
130
- initWidth = initDraggedNodeRect.initWidth,
131
- initHeight = initDraggedNodeRect.initHeight;
114
+ initY = initDraggedNodeRect.initY,
115
+ initWidth = initDraggedNodeRect.initWidth,
116
+ initHeight = initDraggedNodeRect.initHeight;
132
117
  var initScrollLeft = initDraggedNodeListScrollOffset.initScrollLeft,
133
- initScrollTop = initDraggedNodeListScrollOffset.initScrollTop;
134
-
118
+ initScrollTop = initDraggedNodeListScrollOffset.initScrollTop;
135
119
  var _getElementScroll = (0, _getElementScroll2["default"])(targetList.ref.current),
136
- scrollLeft = _getElementScroll.scrollLeft,
137
- scrollTop = _getElementScroll.scrollTop;
138
-
120
+ scrollLeft = _getElementScroll.scrollLeft,
121
+ scrollTop = _getElementScroll.scrollTop;
139
122
  return {
140
123
  x: initX + initWidth / 2 + initScrollLeft - scrollLeft,
141
124
  y: initY + initHeight / 2 + initScrollTop - scrollTop
@@ -144,21 +127,21 @@ var useDragEffect = function useDragEffect(props) {
144
127
  var getDraggedNodePosRef = (0, _react.useRef)(getDraggedNodePos);
145
128
  (0, _react.useEffect)(function () {
146
129
  getDraggedNodePosRef.current = getDraggedNodePos;
147
- }, [getDraggedNodePos]); // Hide the dragged node
130
+ }, [getDraggedNodePos]);
148
131
 
132
+ // Hide the dragged node
149
133
  (0, _react.useEffect)(function () {
150
134
  if (!draggedNode) return function () {};
151
-
152
135
  var _draggedNode$node = _slicedToArray(draggedNode.node, 4),
153
- draggedNodeSetStyle = _draggedNode$node[3];
154
-
136
+ draggedNodeSetStyle = _draggedNode$node[3];
155
137
  draggedNodeSetStyle(HIDDEN_NODE_STYLE);
156
138
  return function () {
157
139
  return draggedNodeSetStyle({});
158
140
  };
159
- }, [draggedNode]); // Append the blank node to the list to increase the height of it.
160
- // Used when the dragged node is located inside another list.
141
+ }, [draggedNode]);
161
142
 
143
+ // Append the blank node to the list to increase the height of it.
144
+ // Used when the dragged node is located inside another list.
162
145
  var removeBlankNode = (0, _useBlankNode["default"])({
163
146
  draggedNode: draggedNode,
164
147
  targetList: targetList,
@@ -167,8 +150,8 @@ var useDragEffect = function useDragEffect(props) {
167
150
  var updateTargetNode = (0, _react.useCallback)(function () {
168
151
  if (!draggedNode) return;
169
152
  var prevTargetNode = targetNodeRef.current; // The last updated node
170
- // Dragging outside the origin list
171
153
 
154
+ // Dragging outside the origin list
172
155
  if (prevTargetNode && prevTargetNode.list === draggedNode.list && targetList !== draggedNode.list) {
173
156
  moveNode({
174
157
  list: prevTargetNode.list,
@@ -177,9 +160,9 @@ var useDragEffect = function useDragEffect(props) {
177
160
  destination: 'end'
178
161
  });
179
162
  clearTargetNode();
180
- } // Dragging outside another list
181
-
163
+ }
182
164
 
165
+ // Dragging outside another list
183
166
  if (prevTargetNode && prevTargetNode.list !== draggedNode.list && targetList !== prevTargetNode.list) {
184
167
  moveNode({
185
168
  list: prevTargetNode.list,
@@ -190,9 +173,9 @@ var useDragEffect = function useDragEffect(props) {
190
173
  });
191
174
  removeBlankNode();
192
175
  clearTargetNode();
193
- } // Dragging inside the origin list
194
-
176
+ }
195
177
 
178
+ // Dragging inside the origin list
196
179
  if (!prevTargetNode && targetList === draggedNode.list) {
197
180
  var tail = targetList.getTail();
198
181
  if (!tail) return;
@@ -204,14 +187,12 @@ var useDragEffect = function useDragEffect(props) {
204
187
  });
205
188
  setTargetNode(targetList, node);
206
189
  return;
207
- } // Dragging inside another list
208
-
190
+ }
209
191
 
192
+ // Dragging inside another list
210
193
  if (targetList && targetList !== draggedNode.list && (!prevTargetNode || prevTargetNode.list !== targetList)) {
211
194
  var _tail = targetList.getTail();
212
-
213
195
  if (!_tail) return;
214
-
215
196
  var _node2 = moveNode({
216
197
  list: targetList,
217
198
  startNode: _tail,
@@ -219,18 +200,15 @@ var useDragEffect = function useDragEffect(props) {
219
200
  destination: 'cursor',
220
201
  isAnotherList: true
221
202
  });
222
-
223
203
  setTargetNode(targetList, _node2);
224
204
  return;
225
- } // Dragging in the origin list
226
-
205
+ }
227
206
 
207
+ // Dragging in the origin list
228
208
  if (prevTargetNode && prevTargetNode.list === draggedNode.list && targetList === draggedNode.list) {
229
209
  var axis = targetList.horizontal ? 'x' : 'y';
230
-
231
210
  var _prevTargetNode$node = _slicedToArray(prevTargetNode.node, 4),
232
- prevTargetNodeRef = _prevTargetNode$node[2];
233
-
211
+ prevTargetNodeRef = _prevTargetNode$node[2];
234
212
  if (!prevTargetNodeRef.current) {
235
213
  // The target node was unmounted. It happens when the virtual list is used.
236
214
  // If the cursor is above the dragged node, we need to move the nodes down from the tail to the node where
@@ -239,12 +217,9 @@ var useDragEffect = function useDragEffect(props) {
239
217
  var draggedNodePos = getDraggedNodePosRef.current();
240
218
  if (!position || !draggedNodePos) return;
241
219
  var isDraggingUp = position[axis] < draggedNodePos[axis];
242
-
243
220
  if (isDraggingUp) {
244
221
  var _tail2 = targetList.getTail();
245
-
246
222
  if (!_tail2 || !_tail2[2].current) return;
247
-
248
223
  var _node4 = moveNode({
249
224
  list: targetList,
250
225
  startNode: createEmptyNode({
@@ -253,12 +228,10 @@ var useDragEffect = function useDragEffect(props) {
253
228
  direction: 'up',
254
229
  destination: 'cursor'
255
230
  });
256
-
257
231
  setTargetNode(targetList, _node4);
258
232
  } else {
259
233
  var head = targetList.getHead();
260
234
  if (!head || !head[2].current) return;
261
-
262
235
  var _node5 = moveNode({
263
236
  list: targetList,
264
237
  startNode: createEmptyNode({
@@ -267,18 +240,14 @@ var useDragEffect = function useDragEffect(props) {
267
240
  direction: 'down',
268
241
  destination: 'cursor'
269
242
  });
270
-
271
243
  setTargetNode(targetList, _node5);
272
244
  }
273
-
274
245
  return;
275
246
  }
276
-
277
247
  var prevTargetNodeRect = (0, _getNodeRect["default"])(prevTargetNode.node[2]);
278
248
  var startRectProp = targetList.horizontal ? 'left' : 'top';
279
249
  if (!position || !prevTargetNodeRect) return;
280
250
  var isMoveUp = position[axis] < prevTargetNodeRect[startRectProp];
281
-
282
251
  var _node3 = isMoveUp ? moveNode({
283
252
  list: targetList,
284
253
  startNode: prevTargetNode.node,
@@ -290,23 +259,17 @@ var useDragEffect = function useDragEffect(props) {
290
259
  direction: 'down',
291
260
  destination: 'cursor'
292
261
  });
293
-
294
262
  setTargetNode(targetList, _node3);
295
263
  return;
296
- } // Dragging in another list
297
-
264
+ }
298
265
 
266
+ // Dragging in another list
299
267
  if (targetList && targetList !== draggedNode.list && prevTargetNode && prevTargetNode.list === targetList) {
300
268
  var _axis = targetList.horizontal ? 'x' : 'y';
301
-
302
269
  var _prevTargetNodeRect = (0, _getNodeRect["default"])(prevTargetNode.node[2]);
303
-
304
270
  var _startRectProp = targetList.horizontal ? 'left' : 'top';
305
-
306
271
  if (!position || !_prevTargetNodeRect) return;
307
-
308
272
  var _isMoveUp = position[_axis] < _prevTargetNodeRect[_startRectProp];
309
-
310
273
  var _node6 = _isMoveUp ? moveNode({
311
274
  list: targetList,
312
275
  startNode: prevTargetNode.node,
@@ -320,112 +283,97 @@ var useDragEffect = function useDragEffect(props) {
320
283
  destination: 'cursor',
321
284
  isAnotherList: true
322
285
  });
323
-
324
286
  setTargetNode(targetList, _node6);
325
287
  }
326
- }, [draggedNode, targetList, moveNode, clearTargetNode, removeBlankNode, setTargetNode, position]); // Update the target node if either the position or the target list has been changed
288
+ }, [draggedNode, targetList, moveNode, clearTargetNode, removeBlankNode, setTargetNode, position]);
327
289
 
290
+ // Update the target node if either the position or the target list has been changed
328
291
  (0, _react.useEffect)(function () {
329
292
  updateTargetNode();
330
- }, [updateTargetNode]); // Update the target node if the target list has been scrolled
293
+ }, [updateTargetNode]);
331
294
 
295
+ // Update the target node if the target list has been scrolled
332
296
  var _useThrottle = (0, _useThrottle3["default"])(updateTargetNode, 100),
333
- _useThrottle2 = _slicedToArray(_useThrottle, 1),
334
- throttledUpdateTargetNode = _useThrottle2[0];
335
-
297
+ _useThrottle2 = _slicedToArray(_useThrottle, 1),
298
+ throttledUpdateTargetNode = _useThrottle2[0];
336
299
  (0, _useEvent["default"])(targetList ? targetList.ref : undefined, 'scroll', throttledUpdateTargetNode);
337
- (0, _useEvent["default"])(window, 'scroll', throttledUpdateTargetNode); // Reset styles of the affected nodes when the dragged node was dropped
300
+ (0, _useEvent["default"])(window, 'scroll', throttledUpdateTargetNode);
338
301
 
302
+ // Reset styles of the affected nodes when the dragged node was dropped
339
303
  (0, _react.useEffect)(function () {
340
304
  if (!draggedNode) return function () {};
341
-
342
305
  var _draggedNode$node2 = _slicedToArray(draggedNode.node, 5),
343
- draggedNodeIndex = _draggedNode$node2[4];
344
-
306
+ draggedNodeIndex = _draggedNode$node2[4];
345
307
  return function () {
346
- var targetNode = targetNodeRef.current; // If the dragged node was outside the origin list, reset the styles for the nodes,
347
- // starting at the tail and ending with the dragged node in the origin list.
308
+ var targetNode = targetNodeRef.current;
348
309
 
310
+ // If the dragged node was outside the origin list, reset the styles for the nodes,
311
+ // starting at the tail and ending with the dragged node in the origin list.
349
312
  if (!targetNode || targetNode.list !== draggedNode.list) {
350
313
  var tail = draggedNode.list.getTail();
351
-
352
314
  if (tail) {
353
315
  var node = tail;
354
-
355
316
  while (true) {
356
317
  var _node7 = node,
357
- _node8 = _slicedToArray(_node7, 5),
358
- prev = _node8[0],
359
- nodeSetStyle = _node8[3],
360
- nodeIndex = _node8[4];
361
-
318
+ _node8 = _slicedToArray(_node7, 5),
319
+ prev = _node8[0],
320
+ nodeSetStyle = _node8[3],
321
+ nodeIndex = _node8[4];
362
322
  nodeSetStyle({});
363
323
  if (!prev || nodeIndex <= draggedNodeIndex) break;
364
324
  node = prev;
365
325
  }
366
326
  }
367
- } // If the dragged node was inside another list, reset the styles for the nodes,
368
- // starting at the tail and ending with the dragged node in the target list.
369
-
327
+ }
370
328
 
329
+ // If the dragged node was inside another list, reset the styles for the nodes,
330
+ // starting at the tail and ending with the dragged node in the target list.
371
331
  if (targetNode && targetNode.list !== draggedNode.list) {
372
332
  var _tail3 = targetNode.list.getTail();
373
-
374
333
  var _targetNode$node = _slicedToArray(targetNode.node, 5),
375
- targetNodeIndex = _targetNode$node[4];
376
-
334
+ targetNodeIndex = _targetNode$node[4];
377
335
  if (_tail3) {
378
336
  var _node9 = _tail3;
379
-
380
337
  while (true) {
381
338
  var _node10 = _node9,
382
- _node11 = _slicedToArray(_node10, 5),
383
- _prev = _node11[0],
384
- _nodeSetStyle = _node11[3],
385
- _nodeIndex = _node11[4];
386
-
339
+ _node11 = _slicedToArray(_node10, 5),
340
+ _prev = _node11[0],
341
+ _nodeSetStyle = _node11[3],
342
+ _nodeIndex = _node11[4];
387
343
  _nodeSetStyle({});
388
-
389
344
  if (!_prev || _nodeIndex <= targetNodeIndex) break;
390
345
  _node9 = _prev;
391
346
  }
392
347
  }
393
- } // If the dragged node was moved inside the origin list, reset the styles for the nodes,
394
- // starting with target node and ending with the dragged node.
395
-
348
+ }
396
349
 
350
+ // If the dragged node was moved inside the origin list, reset the styles for the nodes,
351
+ // starting with target node and ending with the dragged node.
397
352
  if (targetNode && targetNode.list === draggedNode.list) {
398
353
  var _targetNode$node2 = _slicedToArray(targetNode.node, 5),
399
- targetNodeSetStyle = _targetNode$node2[3],
400
- _targetNodeIndex = _targetNode$node2[4];
401
-
354
+ targetNodeSetStyle = _targetNode$node2[3],
355
+ _targetNodeIndex = _targetNode$node2[4];
402
356
  if (_targetNodeIndex > draggedNodeIndex) {
403
357
  var _node12 = targetNode.node;
404
-
405
358
  while (true) {
406
359
  var _node13 = _node12,
407
- _node14 = _slicedToArray(_node13, 5),
408
- _prev2 = _node14[0],
409
- _nodeSetStyle2 = _node14[3],
410
- _nodeIndex2 = _node14[4];
411
-
360
+ _node14 = _slicedToArray(_node13, 5),
361
+ _prev2 = _node14[0],
362
+ _nodeSetStyle2 = _node14[3],
363
+ _nodeIndex2 = _node14[4];
412
364
  _nodeSetStyle2({});
413
-
414
365
  if (!_prev2 || _nodeIndex2 <= draggedNodeIndex) break;
415
366
  _node12 = _prev2;
416
367
  }
417
368
  } else if (_targetNodeIndex < draggedNodeIndex) {
418
369
  var _node15 = targetNode.node;
419
-
420
370
  while (true) {
421
371
  var _node16 = _node15,
422
- _node17 = _slicedToArray(_node16, 5),
423
- next = _node17[1],
424
- _nodeSetStyle3 = _node17[3],
425
- _nodeIndex3 = _node17[4];
426
-
372
+ _node17 = _slicedToArray(_node16, 5),
373
+ next = _node17[1],
374
+ _nodeSetStyle3 = _node17[3],
375
+ _nodeIndex3 = _node17[4];
427
376
  _nodeSetStyle3({});
428
-
429
377
  if (!next || _nodeIndex3 >= draggedNodeIndex) break;
430
378
  _node15 = next;
431
379
  }
@@ -434,30 +382,29 @@ var useDragEffect = function useDragEffect(props) {
434
382
  }
435
383
  }
436
384
  };
437
- }, [draggedNode]); // Update the position of the newly mounted nodes in the origin list (used in the virtual list)
385
+ }, [draggedNode]);
438
386
 
387
+ // Update the position of the newly mounted nodes in the origin list (used in the virtual list)
439
388
  (0, _react.useEffect)(function () {
440
389
  if (!draggedNode) return function () {};
441
-
442
390
  var _draggedNode$node3 = _slicedToArray(draggedNode.node, 5),
443
- draggedNodeIndex = _draggedNode$node3[4];
444
-
391
+ draggedNodeIndex = _draggedNode$node3[4];
445
392
  var update = function update(nodeProps) {
446
393
  var setStyle = nodeProps.setStyle,
447
- index = nodeProps.index;
448
- var targetNode = targetNodeRef.current; // Set the hidden style, if the mounted node is the dragged node
394
+ index = nodeProps.index;
395
+ var targetNode = targetNodeRef.current;
449
396
 
397
+ // Set the hidden style, if the mounted node is the dragged node
450
398
  if (index === draggedNodeIndex) {
451
399
  setStyle(HIDDEN_NODE_STYLE);
452
400
  return;
453
- } // If the dragged node is inside the origin list
454
-
401
+ }
455
402
 
403
+ // If the dragged node is inside the origin list
456
404
  if (targetNode && targetNode.list === draggedNode.list) {
457
405
  // Move the mounted node up/down, if it is located between the dragged and target node
458
406
  var _targetNode$node3 = _slicedToArray(targetNode.node, 5),
459
- targetNodeIndex = _targetNode$node3[4];
460
-
407
+ targetNodeIndex = _targetNode$node3[4];
461
408
  if (index > draggedNodeIndex && index < targetNodeIndex) {
462
409
  setStyle(getNodeStyle('up', targetNode.list.horizontal));
463
410
  } else if (index < draggedNodeIndex && index > targetNodeIndex) {
@@ -468,50 +415,45 @@ var useDragEffect = function useDragEffect(props) {
468
415
  setStyle(getNodeStyle('up', draggedNode.list.horizontal));
469
416
  }
470
417
  };
471
-
472
418
  draggedNode.list.addListener(update);
473
419
  return function () {
474
420
  return draggedNode.list.removeListener(update);
475
421
  };
476
- }, [draggedNode, getNodeStyle]); // Update the position of the newly mounted nodes in the target list (used in the virtual list)
422
+ }, [draggedNode, getNodeStyle]);
477
423
 
424
+ // Update the position of the newly mounted nodes in the target list (used in the virtual list)
478
425
  (0, _react.useEffect)(function () {
479
426
  if (!draggedNode || !targetList || targetList === draggedNode.list) {
480
427
  return function () {};
481
428
  }
482
-
483
429
  var update = function update(nodeProps) {
484
430
  var setStyle = nodeProps.setStyle,
485
- index = nodeProps.index;
431
+ index = nodeProps.index;
486
432
  var targetNode = targetNodeRef.current;
487
433
  if (!targetNode) return;
488
-
489
434
  var _targetNode$node4 = _slicedToArray(targetNode.node, 5),
490
- targetNodeIndex = _targetNode$node4[4];
491
-
435
+ targetNodeIndex = _targetNode$node4[4];
492
436
  if (index >= targetNodeIndex) {
493
437
  // Move the mounted node down, if it is located below the target node or if it is the target node
494
438
  setStyle(getNodeStyle('down', targetList.horizontal));
495
439
  }
496
440
  };
497
-
498
441
  targetList.addListener(update);
499
442
  return function () {
500
443
  return targetList.removeListener(update);
501
444
  };
502
- }, [draggedNode, getNodeStyle, targetList]); // Call the onDragEnd callback if the draggedNode was changed to null
445
+ }, [draggedNode, getNodeStyle, targetList]);
503
446
 
447
+ // Call the onDragEnd callback if the draggedNode was changed to null
504
448
  (0, _react.useEffect)(function () {
505
449
  if (!draggedNode) return function () {};
506
450
  return function () {
507
451
  // eslint-disable-next-line react-hooks/exhaustive-deps
508
452
  var target = targetRef.current;
509
453
  if (!target) return;
510
-
511
454
  var _draggedNode$node4 = _slicedToArray(draggedNode.node, 6),
512
- draggedNodeIndex = _draggedNode$node4[4],
513
- draggedNodeId = _draggedNode$node4[5];
514
-
455
+ draggedNodeIndex = _draggedNode$node4[4],
456
+ draggedNodeId = _draggedNode$node4[5];
515
457
  var dragged = {
516
458
  listId: draggedNode.list.id,
517
459
  index: draggedNodeIndex,
@@ -522,7 +464,6 @@ var useDragEffect = function useDragEffect(props) {
522
464
  };
523
465
  }, [draggedNode]);
524
466
  };
525
-
526
467
  var _default = useDragEffect;
527
468
  exports["default"] = _default;
528
469
  //# sourceMappingURL=useDragEffect.js.map