@os-design/drag-sort 1.0.0

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 (135) hide show
  1. package/LICENCE.md +1 -0
  2. package/README.md +15 -0
  3. package/dist/cjs/DragAndDrop.js +197 -0
  4. package/dist/cjs/DragAndDrop.js.map +1 -0
  5. package/dist/cjs/Draggable.js +97 -0
  6. package/dist/cjs/Draggable.js.map +1 -0
  7. package/dist/cjs/Droppable.js +112 -0
  8. package/dist/cjs/Droppable.js.map +1 -0
  9. package/dist/cjs/index.js +77 -0
  10. package/dist/cjs/index.js.map +1 -0
  11. package/dist/cjs/utils/ListStore.js +68 -0
  12. package/dist/cjs/utils/ListStore.js.map +1 -0
  13. package/dist/cjs/utils/NodeList.js +266 -0
  14. package/dist/cjs/utils/NodeList.js.map +1 -0
  15. package/dist/cjs/utils/getElementOffset.js +27 -0
  16. package/dist/cjs/utils/getElementOffset.js.map +1 -0
  17. package/dist/cjs/utils/getElementScroll.js +27 -0
  18. package/dist/cjs/utils/getElementScroll.js.map +1 -0
  19. package/dist/cjs/utils/getNodeRect.js +48 -0
  20. package/dist/cjs/utils/getNodeRect.js.map +1 -0
  21. package/dist/cjs/utils/useAppendClassName.js +27 -0
  22. package/dist/cjs/utils/useAppendClassName.js.map +1 -0
  23. package/dist/cjs/utils/useBlankNode.js +103 -0
  24. package/dist/cjs/utils/useBlankNode.js.map +1 -0
  25. package/dist/cjs/utils/useDragAndDrop.js +32 -0
  26. package/dist/cjs/utils/useDragAndDrop.js.map +1 -0
  27. package/dist/cjs/utils/useDragEffect.js +509 -0
  28. package/dist/cjs/utils/useDragEffect.js.map +1 -0
  29. package/dist/cjs/utils/useDroppable.js +35 -0
  30. package/dist/cjs/utils/useDroppable.js.map +1 -0
  31. package/dist/cjs/utils/useGeneratedId.js +22 -0
  32. package/dist/cjs/utils/useGeneratedId.js.map +1 -0
  33. package/dist/cjs/utils/useGetNodeStyle.js +28 -0
  34. package/dist/cjs/utils/useGetNodeStyle.js.map +1 -0
  35. package/dist/cjs/utils/useInitRect.js +25 -0
  36. package/dist/cjs/utils/useInitRect.js.map +1 -0
  37. package/dist/cjs/utils/useInitScrollOffset.js +27 -0
  38. package/dist/cjs/utils/useInitScrollOffset.js.map +1 -0
  39. package/dist/cjs/utils/useMoveNode.js +110 -0
  40. package/dist/cjs/utils/useMoveNode.js.map +1 -0
  41. package/dist/cjs/utils/useScrollEventByPoint.js +66 -0
  42. package/dist/cjs/utils/useScrollEventByPoint.js.map +1 -0
  43. package/dist/cjs/utils/useTargetList.js +58 -0
  44. package/dist/cjs/utils/useTargetList.js.map +1 -0
  45. package/dist/cjs/utils/useTransitionStyle.js +30 -0
  46. package/dist/cjs/utils/useTransitionStyle.js.map +1 -0
  47. package/dist/esm/DragAndDrop.js +139 -0
  48. package/dist/esm/DragAndDrop.js.map +1 -0
  49. package/dist/esm/Draggable.js +62 -0
  50. package/dist/esm/Draggable.js.map +1 -0
  51. package/dist/esm/Droppable.js +84 -0
  52. package/dist/esm/Droppable.js.map +1 -0
  53. package/dist/esm/index.js +7 -0
  54. package/dist/esm/index.js.map +1 -0
  55. package/dist/esm/utils/ListStore.js +46 -0
  56. package/dist/esm/utils/ListStore.js.map +1 -0
  57. package/dist/esm/utils/NodeList.js +207 -0
  58. package/dist/esm/utils/NodeList.js.map +1 -0
  59. package/dist/esm/utils/getElementOffset.js +19 -0
  60. package/dist/esm/utils/getElementOffset.js.map +1 -0
  61. package/dist/esm/utils/getElementScroll.js +19 -0
  62. package/dist/esm/utils/getElementScroll.js.map +1 -0
  63. package/dist/esm/utils/getNodeRect.js +36 -0
  64. package/dist/esm/utils/getNodeRect.js.map +1 -0
  65. package/dist/esm/utils/useAppendClassName.js +19 -0
  66. package/dist/esm/utils/useAppendClassName.js.map +1 -0
  67. package/dist/esm/utils/useBlankNode.js +81 -0
  68. package/dist/esm/utils/useBlankNode.js.map +1 -0
  69. package/dist/esm/utils/useDragAndDrop.js +13 -0
  70. package/dist/esm/utils/useDragAndDrop.js.map +1 -0
  71. package/dist/esm/utils/useDragEffect.js +417 -0
  72. package/dist/esm/utils/useDragEffect.js.map +1 -0
  73. package/dist/esm/utils/useDroppable.js +14 -0
  74. package/dist/esm/utils/useDroppable.js.map +1 -0
  75. package/dist/esm/utils/useGeneratedId.js +7 -0
  76. package/dist/esm/utils/useGeneratedId.js.map +1 -0
  77. package/dist/esm/utils/useGetNodeStyle.js +20 -0
  78. package/dist/esm/utils/useGetNodeStyle.js.map +1 -0
  79. package/dist/esm/utils/useInitRect.js +15 -0
  80. package/dist/esm/utils/useInitRect.js.map +1 -0
  81. package/dist/esm/utils/useInitScrollOffset.js +14 -0
  82. package/dist/esm/utils/useInitScrollOffset.js.map +1 -0
  83. package/dist/esm/utils/useMoveNode.js +62 -0
  84. package/dist/esm/utils/useMoveNode.js.map +1 -0
  85. package/dist/esm/utils/useScrollEventByPoint.js +53 -0
  86. package/dist/esm/utils/useScrollEventByPoint.js.map +1 -0
  87. package/dist/esm/utils/useTargetList.js +27 -0
  88. package/dist/esm/utils/useTargetList.js.map +1 -0
  89. package/dist/esm/utils/useTransitionStyle.js +24 -0
  90. package/dist/esm/utils/useTransitionStyle.js.map +1 -0
  91. package/dist/types/DragAndDrop.d.ts +16 -0
  92. package/dist/types/DragAndDrop.d.ts.map +1 -0
  93. package/dist/types/Draggable.d.ts +17 -0
  94. package/dist/types/Draggable.d.ts.map +1 -0
  95. package/dist/types/Droppable.d.ts +15 -0
  96. package/dist/types/Droppable.d.ts.map +1 -0
  97. package/dist/types/index.d.ts +7 -0
  98. package/dist/types/index.d.ts.map +1 -0
  99. package/dist/types/utils/ListStore.d.ts +10 -0
  100. package/dist/types/utils/ListStore.d.ts.map +1 -0
  101. package/dist/types/utils/NodeList.d.ts +42 -0
  102. package/dist/types/utils/NodeList.d.ts.map +1 -0
  103. package/dist/types/utils/getElementOffset.d.ts +6 -0
  104. package/dist/types/utils/getElementOffset.d.ts.map +1 -0
  105. package/dist/types/utils/getElementScroll.d.ts +6 -0
  106. package/dist/types/utils/getElementScroll.d.ts.map +1 -0
  107. package/dist/types/utils/getNodeRect.d.ts +9 -0
  108. package/dist/types/utils/getNodeRect.d.ts.map +1 -0
  109. package/dist/types/utils/useAppendClassName.d.ts +4 -0
  110. package/dist/types/utils/useAppendClassName.d.ts.map +1 -0
  111. package/dist/types/utils/useBlankNode.d.ts +14 -0
  112. package/dist/types/utils/useBlankNode.d.ts.map +1 -0
  113. package/dist/types/utils/useDragAndDrop.d.ts +20 -0
  114. package/dist/types/utils/useDragAndDrop.d.ts.map +1 -0
  115. package/dist/types/utils/useDragEffect.d.ts +23 -0
  116. package/dist/types/utils/useDragEffect.d.ts.map +1 -0
  117. package/dist/types/utils/useDroppable.d.ts +12 -0
  118. package/dist/types/utils/useDroppable.d.ts.map +1 -0
  119. package/dist/types/utils/useGeneratedId.d.ts +3 -0
  120. package/dist/types/utils/useGeneratedId.d.ts.map +1 -0
  121. package/dist/types/utils/useGetNodeStyle.d.ts +9 -0
  122. package/dist/types/utils/useGetNodeStyle.d.ts.map +1 -0
  123. package/dist/types/utils/useInitRect.d.ts +9 -0
  124. package/dist/types/utils/useInitRect.d.ts.map +1 -0
  125. package/dist/types/utils/useInitScrollOffset.d.ts +7 -0
  126. package/dist/types/utils/useInitScrollOffset.d.ts.map +1 -0
  127. package/dist/types/utils/useMoveNode.d.ts +15 -0
  128. package/dist/types/utils/useMoveNode.d.ts.map +1 -0
  129. package/dist/types/utils/useScrollEventByPoint.d.ts +7 -0
  130. package/dist/types/utils/useScrollEventByPoint.d.ts.map +1 -0
  131. package/dist/types/utils/useTargetList.d.ts +6 -0
  132. package/dist/types/utils/useTargetList.d.ts.map +1 -0
  133. package/dist/types/utils/useTransitionStyle.d.ts +8 -0
  134. package/dist/types/utils/useTransitionStyle.d.ts.map +1 -0
  135. package/package.json +49 -0
@@ -0,0 +1,509 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ var _useThrottle3 = _interopRequireDefault(require("@os-design/use-throttle"));
11
+
12
+ var _useEvent = _interopRequireDefault(require("@os-design/use-event"));
13
+
14
+ var _getElementScroll2 = _interopRequireDefault(require("./getElementScroll"));
15
+
16
+ var _useTargetList = _interopRequireDefault(require("./useTargetList"));
17
+
18
+ var _useInitRect = _interopRequireDefault(require("./useInitRect"));
19
+
20
+ var _useInitScrollOffset = _interopRequireDefault(require("./useInitScrollOffset"));
21
+
22
+ var _useGetNodeStyle = _interopRequireDefault(require("./useGetNodeStyle"));
23
+
24
+ var _useMoveNode = _interopRequireDefault(require("./useMoveNode"));
25
+
26
+ var _getNodeRect = _interopRequireDefault(require("./getNodeRect"));
27
+
28
+ var _useBlankNode = _interopRequireDefault(require("./useBlankNode"));
29
+
30
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
31
+
32
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
33
+
34
+ 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
+ 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
+ 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
+ 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
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
43
+
44
+ var HIDDEN_NODE_STYLE = {
45
+ opacity: 0,
46
+ pointerEvents: 'none'
47
+ };
48
+
49
+ var createEmptyNode = function createEmptyNode(_ref) {
50
+ 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;
54
+ return [prev, next, {
55
+ current: null
56
+ }, function () {}, -1];
57
+ };
58
+ /* eslint-disable @typescript-eslint/no-explicit-any,no-constant-condition */
59
+
60
+
61
+ var useDragEffect = function useDragEffect(props) {
62
+ var draggedNode = props.draggedNode,
63
+ cursorPosition = props.cursorPosition,
64
+ listStoreRef = props.listStoreRef,
65
+ onDragEnd = props.onDragEnd;
66
+ var targetRef = (0, _react.useRef)(null);
67
+ var targetNodeRef = (0, _react.useRef)(draggedNode);
68
+ (0, _react.useEffect)(function () {
69
+ targetNodeRef.current = draggedNode;
70
+ }, [draggedNode]);
71
+ var onDragEndRef = (0, _react.useRef)(onDragEnd);
72
+ (0, _react.useEffect)(function () {
73
+ onDragEndRef.current = onDragEnd;
74
+ }, [onDragEnd]); // The initial bounds of the dragged node.
75
+ // We can't read the bounds of the dragged node on the fly because the node can be unmounted in the virtual list.
76
+
77
+ var initDraggedNodeRect = (0, _useInitRect["default"])(draggedNode === null || draggedNode === void 0 ? void 0 : draggedNode.node[2]); // The initial scroll position of the list where the dragged node is located.
78
+ // Used to detect the actual position of the dragged node.
79
+ // The purpose is the same as with initDraggedNodeRect.
80
+
81
+ var initDraggedNodeListScrollOffset = (0, _useInitScrollOffset["default"])(draggedNode === null || draggedNode === void 0 ? void 0 : draggedNode.list.ref); // The central position of the dragged node
82
+
83
+ var position = (0, _react.useMemo)(function () {
84
+ if (!draggedNode || !initDraggedNodeRect) return null;
85
+ var x = cursorPosition.x,
86
+ y = cursorPosition.y;
87
+ var initWidth = initDraggedNodeRect.initWidth,
88
+ initHeight = initDraggedNodeRect.initHeight;
89
+ return {
90
+ x: x - draggedNode.position.x + initWidth / 2,
91
+ y: y - draggedNode.position.y + initHeight / 2
92
+ };
93
+ }, [cursorPosition, draggedNode, initDraggedNodeRect]); // Returns the style for moving the node in the specified direction
94
+
95
+ var getNodeStyle = (0, _useGetNodeStyle["default"])(initDraggedNodeRect); // The list in which the cursor is located
96
+
97
+ var targetList = (0, _useTargetList["default"])(position, listStoreRef);
98
+ var moveNode = (0, _useMoveNode["default"])(position, draggedNode, getNodeStyle);
99
+ var setTargetNode = (0, _react.useCallback)(function (list, node) {
100
+ var _node = _slicedToArray(node, 5),
101
+ nodeIndex = _node[4];
102
+
103
+ targetNodeRef.current = {
104
+ list: list,
105
+ node: node
106
+ };
107
+ targetRef.current = {
108
+ id: list.id,
109
+ index: nodeIndex
110
+ };
111
+ }, []);
112
+ var clearTargetNode = (0, _react.useCallback)(function () {
113
+ targetNodeRef.current = null;
114
+ targetRef.current = null;
115
+ }, []); // Returns the central position of the dragged node in the list
116
+
117
+ var getDraggedNodePos = (0, _react.useCallback)(function () {
118
+ if (!targetList || !targetList.ref.current || !initDraggedNodeRect || !initDraggedNodeListScrollOffset) {
119
+ return null;
120
+ }
121
+
122
+ var initX = initDraggedNodeRect.initX,
123
+ initY = initDraggedNodeRect.initY,
124
+ initWidth = initDraggedNodeRect.initWidth,
125
+ initHeight = initDraggedNodeRect.initHeight;
126
+ var initScrollLeft = initDraggedNodeListScrollOffset.initScrollLeft,
127
+ initScrollTop = initDraggedNodeListScrollOffset.initScrollTop;
128
+
129
+ var _getElementScroll = (0, _getElementScroll2["default"])(targetList.ref.current),
130
+ scrollLeft = _getElementScroll.scrollLeft,
131
+ scrollTop = _getElementScroll.scrollTop;
132
+
133
+ return {
134
+ x: initX + initWidth / 2 + initScrollLeft - scrollLeft,
135
+ y: initY + initHeight / 2 + initScrollTop - scrollTop
136
+ };
137
+ }, [initDraggedNodeListScrollOffset, initDraggedNodeRect, targetList]);
138
+ var getDraggedNodePosRef = (0, _react.useRef)(getDraggedNodePos);
139
+ (0, _react.useEffect)(function () {
140
+ getDraggedNodePosRef.current = getDraggedNodePos;
141
+ }, [getDraggedNodePos]); // Hide the dragged node
142
+
143
+ (0, _react.useEffect)(function () {
144
+ if (!draggedNode) return function () {};
145
+
146
+ var _draggedNode$node = _slicedToArray(draggedNode.node, 4),
147
+ draggedNodeSetStyle = _draggedNode$node[3];
148
+
149
+ draggedNodeSetStyle(HIDDEN_NODE_STYLE);
150
+ return function () {
151
+ return draggedNodeSetStyle({});
152
+ };
153
+ }, [draggedNode]); // Append the blank node to the list to increase the height of it.
154
+ // Used when the dragged node is located inside another list.
155
+
156
+ var removeBlankNode = (0, _useBlankNode["default"])({
157
+ draggedNode: draggedNode,
158
+ targetList: targetList,
159
+ initDraggedNodeRect: initDraggedNodeRect
160
+ });
161
+ var updateTargetNode = (0, _react.useCallback)(function () {
162
+ if (!draggedNode) return;
163
+ var prevTargetNode = targetNodeRef.current; // The last updated node
164
+ // Dragging outside the list
165
+
166
+ if (prevTargetNode && prevTargetNode.list === draggedNode.list && targetList !== draggedNode.list) {
167
+ moveNode({
168
+ list: prevTargetNode.list,
169
+ startNode: prevTargetNode.node,
170
+ type: 'down',
171
+ untilTheEnd: true
172
+ });
173
+ clearTargetNode();
174
+ } // Dragging outside another list
175
+
176
+
177
+ if (prevTargetNode && prevTargetNode.list !== draggedNode.list && targetList !== prevTargetNode.list) {
178
+ moveNode({
179
+ list: prevTargetNode.list,
180
+ startNode: prevTargetNode.node,
181
+ type: 'down',
182
+ untilTheEnd: true,
183
+ insideAnotherList: true
184
+ });
185
+ removeBlankNode();
186
+ clearTargetNode();
187
+ } // Dragging inside the list
188
+
189
+
190
+ if (!prevTargetNode && targetList === draggedNode.list) {
191
+ var tail = targetList.getTail();
192
+ if (!tail) return;
193
+ var node = moveNode({
194
+ list: targetList,
195
+ startNode: tail,
196
+ type: 'up'
197
+ });
198
+ setTargetNode(targetList, node);
199
+ return;
200
+ } // Dragging inside another list
201
+
202
+
203
+ if (targetList && targetList !== draggedNode.list && (prevTargetNode === null || prevTargetNode === void 0 ? void 0 : prevTargetNode.list) !== targetList) {
204
+ var _tail = targetList.getTail();
205
+
206
+ if (!_tail) return;
207
+
208
+ var _node2 = moveNode({
209
+ list: targetList,
210
+ startNode: _tail,
211
+ type: 'up',
212
+ insideAnotherList: true
213
+ });
214
+
215
+ setTargetNode(targetList, _node2);
216
+ return;
217
+ } // Dragging in the same list
218
+
219
+
220
+ if (prevTargetNode && prevTargetNode.list === draggedNode.list && targetList === draggedNode.list) {
221
+ var axis = targetList.horizontal ? 'x' : 'y';
222
+
223
+ var _prevTargetNode$node = _slicedToArray(prevTargetNode.node, 4),
224
+ prevTargetNodeRef = _prevTargetNode$node[2];
225
+
226
+ if (!prevTargetNodeRef.current) {
227
+ // The target node was unmounted. It happens when the virtual list is used.
228
+ // If the cursor is above the dragged node, we need to move the nodes down from the tail to the node where
229
+ // the cursor is located. Otherwise, we need to move the nodes up from the head to the node where the cursor
230
+ // is located.
231
+ var draggedNodePos = getDraggedNodePosRef.current();
232
+ if (!position || !draggedNodePos) return;
233
+ var isDraggingUp = position[axis] < draggedNodePos[axis];
234
+
235
+ if (isDraggingUp) {
236
+ var _tail2 = targetList.getTail();
237
+
238
+ if (!_tail2 || !_tail2[2].current) return;
239
+
240
+ var _node4 = moveNode({
241
+ list: targetList,
242
+ startNode: createEmptyNode({
243
+ prev: _tail2
244
+ }),
245
+ type: 'up'
246
+ });
247
+
248
+ setTargetNode(targetList, _node4);
249
+ } else {
250
+ var head = targetList.getHead();
251
+ if (!head || !head[2].current) return;
252
+
253
+ var _node5 = moveNode({
254
+ list: targetList,
255
+ startNode: createEmptyNode({
256
+ next: head
257
+ }),
258
+ type: 'down'
259
+ });
260
+
261
+ setTargetNode(targetList, _node5);
262
+ }
263
+
264
+ return;
265
+ }
266
+
267
+ var prevTargetNodeRect = (0, _getNodeRect["default"])(prevTargetNode.node[2]);
268
+ var rectProp = targetList.horizontal ? 'left' : 'top';
269
+ if (!position || !prevTargetNodeRect) return;
270
+ var isMoveUp = position[axis] < prevTargetNodeRect[rectProp];
271
+
272
+ var _node3 = isMoveUp ? moveNode({
273
+ list: targetList,
274
+ startNode: prevTargetNode.node,
275
+ type: 'up'
276
+ }) : moveNode({
277
+ list: targetList,
278
+ startNode: prevTargetNode.node,
279
+ type: 'down'
280
+ });
281
+
282
+ setTargetNode(targetList, _node3);
283
+ return;
284
+ } // Dragging in another list
285
+
286
+
287
+ if (targetList && targetList !== draggedNode.list && (prevTargetNode === null || prevTargetNode === void 0 ? void 0 : prevTargetNode.list) === targetList) {
288
+ var _axis = targetList.horizontal ? 'x' : 'y';
289
+
290
+ var _prevTargetNodeRect = (0, _getNodeRect["default"])(prevTargetNode.node[2]);
291
+
292
+ var _rectProp = targetList.horizontal ? 'left' : 'top';
293
+
294
+ if (!position || !_prevTargetNodeRect) return;
295
+
296
+ var _isMoveUp = position[_axis] < _prevTargetNodeRect[_rectProp];
297
+
298
+ var _node6 = _isMoveUp ? moveNode({
299
+ list: targetList,
300
+ startNode: prevTargetNode.node,
301
+ type: 'up',
302
+ insideAnotherList: true
303
+ }) : moveNode({
304
+ list: targetList,
305
+ startNode: prevTargetNode.node,
306
+ type: 'down',
307
+ insideAnotherList: true
308
+ });
309
+
310
+ setTargetNode(targetList, _node6);
311
+ }
312
+ }, [draggedNode, targetList, moveNode, clearTargetNode, removeBlankNode, setTargetNode, position]); // Update the target node if either the position or the target list has been changed
313
+
314
+ (0, _react.useEffect)(function () {
315
+ updateTargetNode();
316
+ }, [updateTargetNode]); // Update the target node if the target list has been scrolled
317
+
318
+ var _useThrottle = (0, _useThrottle3["default"])(updateTargetNode, 100),
319
+ _useThrottle2 = _slicedToArray(_useThrottle, 1),
320
+ throttledUpdateTargetNode = _useThrottle2[0];
321
+
322
+ (0, _useEvent["default"])(targetList === null || targetList === void 0 ? void 0 : targetList.ref, 'scroll', throttledUpdateTargetNode);
323
+ (0, _useEvent["default"])(window, 'scroll', throttledUpdateTargetNode); // Reset styles of the nodes when the dragged node was dropped
324
+
325
+ (0, _react.useEffect)(function () {
326
+ if (!draggedNode) return function () {};
327
+
328
+ var _draggedNode$node2 = _slicedToArray(draggedNode.node, 5),
329
+ draggedNodeIndex = _draggedNode$node2[4];
330
+
331
+ return function () {
332
+ var targetNode = targetNodeRef.current; // If the dragged node was inside another list, reset the styles for the nodes,
333
+ // starting at the tail and ending with the dragged node.
334
+
335
+ if (targetNode && targetNode.list !== draggedNode.list) {
336
+ var _tail3 = targetNode.list.getTail();
337
+
338
+ if (!_tail3) return;
339
+ var node = _tail3;
340
+
341
+ while (true) {
342
+ var _node7 = node,
343
+ _node8 = _slicedToArray(_node7, 5),
344
+ prev = _node8[0],
345
+ nodeSetStyle = _node8[3],
346
+ nodeIndex = _node8[4];
347
+
348
+ nodeSetStyle({});
349
+ if (!prev || nodeIndex <= draggedNodeIndex) break;
350
+ node = prev;
351
+ }
352
+ } // If the dragged node was outside the origin list, reset the styles for the nodes,
353
+ // starting at the tail and ending with the dragged node.
354
+
355
+
356
+ var tail = draggedNode.list.getTail();
357
+
358
+ if ((targetNode === null || targetNode === void 0 ? void 0 : targetNode.list) !== draggedNode.list && tail) {
359
+ var _node9 = tail;
360
+
361
+ while (true) {
362
+ var _node10 = _node9,
363
+ _node11 = _slicedToArray(_node10, 5),
364
+ _prev = _node11[0],
365
+ _nodeSetStyle = _node11[3],
366
+ _nodeIndex = _node11[4];
367
+
368
+ _nodeSetStyle({});
369
+
370
+ if (!_prev || _nodeIndex <= draggedNodeIndex) break;
371
+ _node9 = _prev;
372
+ }
373
+ }
374
+
375
+ if (!targetNode) return;
376
+
377
+ var _targetNode$node = _slicedToArray(targetNode.node, 5),
378
+ targetNodeSetStyle = _targetNode$node[3],
379
+ targetNodeIndex = _targetNode$node[4];
380
+
381
+ if (targetNodeIndex > draggedNodeIndex) {
382
+ var _node12 = targetNode.node;
383
+
384
+ while (true) {
385
+ var _node13 = _node12,
386
+ _node14 = _slicedToArray(_node13, 5),
387
+ _prev2 = _node14[0],
388
+ _nodeSetStyle2 = _node14[3],
389
+ _nodeIndex2 = _node14[4];
390
+
391
+ _nodeSetStyle2({});
392
+
393
+ if (!_prev2 || _nodeIndex2 < draggedNodeIndex) return;
394
+ _node12 = _prev2;
395
+ }
396
+ }
397
+
398
+ if (targetNodeIndex < draggedNodeIndex) {
399
+ var _node15 = targetNode.node;
400
+
401
+ while (true) {
402
+ var _node16 = _node15,
403
+ _node17 = _slicedToArray(_node16, 5),
404
+ next = _node17[1],
405
+ _nodeSetStyle3 = _node17[3],
406
+ _nodeIndex3 = _node17[4];
407
+
408
+ _nodeSetStyle3({});
409
+
410
+ if (!next || _nodeIndex3 > draggedNodeIndex) return;
411
+ _node15 = next;
412
+ }
413
+ }
414
+
415
+ if (targetNodeIndex === draggedNodeIndex) {
416
+ targetNodeSetStyle({});
417
+ }
418
+ };
419
+ }, [draggedNode]); // Update the position of the mounted nodes between the dragged and target nodes (used in virtual list)
420
+
421
+ (0, _react.useEffect)(function () {
422
+ if (!draggedNode) return function () {};
423
+
424
+ var _draggedNode$node3 = _slicedToArray(draggedNode.node, 5),
425
+ draggedNodeIndex = _draggedNode$node3[4];
426
+
427
+ var update = function update(nodeProps) {
428
+ var _targetNodeRef$curren;
429
+
430
+ var setStyle = nodeProps.setStyle,
431
+ index = nodeProps.index;
432
+ var targetNode = targetNodeRef.current; // If the dragged node outside the origin list
433
+
434
+ if (((_targetNodeRef$curren = targetNodeRef.current) === null || _targetNodeRef$curren === void 0 ? void 0 : _targetNodeRef$curren.list) !== draggedNode.list && index > draggedNodeIndex) {
435
+ setStyle(getNodeStyle('up', draggedNode.list.horizontal));
436
+ return;
437
+ }
438
+
439
+ if (!targetNode || !targetNode.node) return;
440
+
441
+ var _targetNode$node2 = _slicedToArray(targetNode.node, 5),
442
+ targetNodeIndex = _targetNode$node2[4]; // If the dragged node was mounted
443
+
444
+
445
+ if (index === draggedNodeIndex) {
446
+ setStyle(HIDDEN_NODE_STYLE);
447
+ return;
448
+ } // If the node between the dragged and target nodes was mounted
449
+
450
+
451
+ if (index > draggedNodeIndex && index < targetNodeIndex) {
452
+ setStyle(getNodeStyle('up', targetNode.list.horizontal));
453
+ } else if (index < draggedNodeIndex && index > targetNodeIndex) {
454
+ setStyle(getNodeStyle('down', targetNode.list.horizontal));
455
+ }
456
+ };
457
+
458
+ draggedNode.list.addListener(update);
459
+ return function () {
460
+ return draggedNode.list.removeListener(update);
461
+ };
462
+ }, [draggedNode, getNodeStyle]);
463
+ (0, _react.useEffect)(function () {
464
+ if (!draggedNode || !targetList || targetList === draggedNode.list) {
465
+ return function () {};
466
+ }
467
+
468
+ var update = function update(nodeProps) {
469
+ var setStyle = nodeProps.setStyle,
470
+ index = nodeProps.index;
471
+ var targetNode = targetNodeRef.current;
472
+ if (!targetNode) return;
473
+
474
+ var _targetNode$node3 = _slicedToArray(targetNode.node, 5),
475
+ targetNodeIndex = _targetNode$node3[4];
476
+
477
+ if (index < targetNodeIndex) return;
478
+ setStyle(getNodeStyle('down', targetList.horizontal));
479
+ };
480
+
481
+ targetList.addListener(update);
482
+ return function () {
483
+ return targetList.removeListener(update);
484
+ };
485
+ }, [draggedNode, getNodeStyle, targetList]); // Call the onDragEnd callback if the draggedNode was changed to null
486
+
487
+ (0, _react.useEffect)(function () {
488
+ if (!draggedNode) return function () {};
489
+ return function () {
490
+ // eslint-disable-next-line react-hooks/exhaustive-deps
491
+ var target = targetRef.current;
492
+ if (!target) return;
493
+
494
+ var _draggedNode$node4 = _slicedToArray(draggedNode.node, 5),
495
+ draggedNodeIndex = _draggedNode$node4[4];
496
+
497
+ var dragged = {
498
+ id: draggedNode.list.id,
499
+ index: draggedNodeIndex
500
+ };
501
+ if (dragged.id === target.id && dragged.index === target.index) return;
502
+ onDragEndRef.current(dragged, target);
503
+ };
504
+ }, [draggedNode]);
505
+ };
506
+
507
+ var _default = useDragEffect;
508
+ exports["default"] = _default;
509
+ //# sourceMappingURL=useDragEffect.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/utils/useDragEffect.ts"],"names":["HIDDEN_NODE_STYLE","opacity","pointerEvents","createEmptyNode","prev","next","current","useDragEffect","props","draggedNode","cursorPosition","listStoreRef","onDragEnd","targetRef","targetNodeRef","onDragEndRef","initDraggedNodeRect","node","initDraggedNodeListScrollOffset","list","ref","position","x","y","initWidth","initHeight","getNodeStyle","targetList","moveNode","setTargetNode","nodeIndex","id","index","clearTargetNode","getDraggedNodePos","initX","initY","initScrollLeft","initScrollTop","scrollLeft","scrollTop","getDraggedNodePosRef","draggedNodeSetStyle","removeBlankNode","updateTargetNode","prevTargetNode","startNode","type","untilTheEnd","insideAnotherList","tail","getTail","axis","horizontal","prevTargetNodeRef","draggedNodePos","isDraggingUp","head","getHead","prevTargetNodeRect","rectProp","isMoveUp","throttledUpdateTargetNode","window","draggedNodeIndex","targetNode","nodeSetStyle","targetNodeSetStyle","targetNodeIndex","update","nodeProps","setStyle","addListener","removeListener","target","dragged"],"mappings":"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","sourcesContent":["import { Position } from '@os-design/use-drag';\nimport {\n CSSProperties,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport useThrottle from '@os-design/use-throttle';\nimport useEvent from '@os-design/use-event';\nimport NodeList, { ExistingNode, Node, NodeProps } from './NodeList';\nimport ListStore from './ListStore';\nimport getElementScroll from './getElementScroll';\nimport useTargetList from './useTargetList';\nimport useInitRect from './useInitRect';\nimport useInitScrollOffset from './useInitScrollOffset';\nimport useGetNodeStyle from './useGetNodeStyle';\n// eslint-disable-next-line import/no-cycle\nimport useMoveNode from './useMoveNode';\nimport getNodeRect from './getNodeRect';\n// eslint-disable-next-line import/no-cycle\nimport useBlankNode from './useBlankNode';\n\nexport interface DraggedNode {\n list: NodeList;\n node: ExistingNode;\n position: Position;\n}\n\ninterface TargetNode {\n list: NodeList;\n node: ExistingNode;\n}\n\nexport interface ItemLocation {\n id: string;\n index: number;\n}\n\nexport type DragEndHandler = (\n dragged: ItemLocation,\n target: ItemLocation\n) => void;\n\ninterface UseDragEffectProps {\n draggedNode: DraggedNode | null;\n cursorPosition: Position;\n listStoreRef: RefObject<ListStore>;\n onDragEnd: DragEndHandler;\n}\n\nconst HIDDEN_NODE_STYLE: CSSProperties = {\n opacity: 0,\n pointerEvents: 'none',\n};\n\nconst createEmptyNode = ({\n prev = null,\n next = null,\n}: {\n prev?: Node;\n next?: Node;\n}): ExistingNode => [prev, next, { current: null }, () => {}, -1];\n\n/* eslint-disable @typescript-eslint/no-explicit-any,no-constant-condition */\n\nconst useDragEffect = (props: UseDragEffectProps) => {\n const { draggedNode, cursorPosition, listStoreRef, onDragEnd } = props;\n\n const targetRef = useRef<ItemLocation | null>(null);\n const targetNodeRef = useRef<TargetNode | null>(draggedNode);\n\n useEffect(() => {\n targetNodeRef.current = draggedNode;\n }, [draggedNode]);\n\n const onDragEndRef = useRef(onDragEnd);\n useEffect(() => {\n onDragEndRef.current = onDragEnd;\n }, [onDragEnd]);\n\n // The initial bounds of the dragged node.\n // We can't read the bounds of the dragged node on the fly because the node can be unmounted in the virtual list.\n const initDraggedNodeRect = useInitRect(draggedNode?.node[2]);\n\n // The initial scroll position of the list where the dragged node is located.\n // Used to detect the actual position of the dragged node.\n // The purpose is the same as with initDraggedNodeRect.\n const initDraggedNodeListScrollOffset = useInitScrollOffset(\n draggedNode?.list.ref\n );\n\n // The central position of the dragged node\n const position = useMemo(() => {\n if (!draggedNode || !initDraggedNodeRect) return null;\n const { x, y } = cursorPosition;\n const { initWidth, initHeight } = initDraggedNodeRect;\n return {\n x: x - draggedNode.position.x + initWidth / 2,\n y: y - draggedNode.position.y + initHeight / 2,\n };\n }, [cursorPosition, draggedNode, initDraggedNodeRect]);\n\n // Returns the style for moving the node in the specified direction\n const getNodeStyle = useGetNodeStyle(initDraggedNodeRect);\n\n // The list in which the cursor is located\n const targetList = useTargetList(position, listStoreRef);\n\n const moveNode = useMoveNode(position, draggedNode, getNodeStyle);\n\n const setTargetNode = useCallback((list: NodeList, node: ExistingNode) => {\n const [, , , , nodeIndex] = node;\n targetNodeRef.current = { list, node };\n targetRef.current = { id: list.id, index: nodeIndex };\n }, []);\n\n const clearTargetNode = useCallback(() => {\n targetNodeRef.current = null;\n targetRef.current = null;\n }, []);\n\n // Returns the central position of the dragged node in the list\n const getDraggedNodePos = useCallback(() => {\n if (\n !targetList ||\n !targetList.ref.current ||\n !initDraggedNodeRect ||\n !initDraggedNodeListScrollOffset\n ) {\n return null;\n }\n const { initX, initY, initWidth, initHeight } = initDraggedNodeRect;\n const { initScrollLeft, initScrollTop } = initDraggedNodeListScrollOffset;\n const { scrollLeft, scrollTop } = getElementScroll(targetList.ref.current);\n return {\n x: initX + initWidth / 2 + initScrollLeft - scrollLeft,\n y: initY + initHeight / 2 + initScrollTop - scrollTop,\n };\n }, [initDraggedNodeListScrollOffset, initDraggedNodeRect, targetList]);\n\n const getDraggedNodePosRef = useRef(getDraggedNodePos);\n useEffect(() => {\n getDraggedNodePosRef.current = getDraggedNodePos;\n }, [getDraggedNodePos]);\n\n // Hide the dragged node\n useEffect(() => {\n if (!draggedNode) return () => {};\n const [, , , draggedNodeSetStyle] = draggedNode.node;\n draggedNodeSetStyle(HIDDEN_NODE_STYLE);\n return () => draggedNodeSetStyle({});\n }, [draggedNode]);\n\n // Append the blank node to the list to increase the height of it.\n // Used when the dragged node is located inside another list.\n const removeBlankNode = useBlankNode({\n draggedNode,\n targetList,\n initDraggedNodeRect,\n });\n\n const updateTargetNode = useCallback(() => {\n if (!draggedNode) return;\n const prevTargetNode = targetNodeRef.current; // The last updated node\n\n // Dragging outside the list\n if (\n prevTargetNode &&\n prevTargetNode.list === draggedNode.list &&\n targetList !== draggedNode.list\n ) {\n moveNode({\n list: prevTargetNode.list,\n startNode: prevTargetNode.node,\n type: 'down',\n untilTheEnd: true,\n });\n clearTargetNode();\n }\n\n // Dragging outside another list\n if (\n prevTargetNode &&\n prevTargetNode.list !== draggedNode.list &&\n targetList !== prevTargetNode.list\n ) {\n moveNode({\n list: prevTargetNode.list,\n startNode: prevTargetNode.node,\n type: 'down',\n untilTheEnd: true,\n insideAnotherList: true,\n });\n removeBlankNode();\n clearTargetNode();\n }\n\n // Dragging inside the list\n if (!prevTargetNode && targetList === draggedNode.list) {\n const tail = targetList.getTail();\n if (!tail) return;\n const node = moveNode({\n list: targetList,\n startNode: tail,\n type: 'up',\n });\n setTargetNode(targetList, node);\n return;\n }\n\n // Dragging inside another list\n if (\n targetList &&\n targetList !== draggedNode.list &&\n prevTargetNode?.list !== targetList\n ) {\n const tail = targetList.getTail();\n if (!tail) return;\n const node = moveNode({\n list: targetList,\n startNode: tail,\n type: 'up',\n insideAnotherList: true,\n });\n setTargetNode(targetList, node);\n return;\n }\n\n // Dragging in the same list\n if (\n prevTargetNode &&\n prevTargetNode.list === draggedNode.list &&\n targetList === draggedNode.list\n ) {\n const axis = targetList.horizontal ? 'x' : 'y';\n const [, , prevTargetNodeRef, ,] = prevTargetNode.node;\n if (!prevTargetNodeRef.current) {\n // The target node was unmounted. It happens when the virtual list is used.\n // If the cursor is above the dragged node, we need to move the nodes down from the tail to the node where\n // the cursor is located. Otherwise, we need to move the nodes up from the head to the node where the cursor\n // is located.\n const draggedNodePos = getDraggedNodePosRef.current();\n if (!position || !draggedNodePos) return;\n const isDraggingUp = position[axis] < draggedNodePos[axis];\n if (isDraggingUp) {\n const tail = targetList.getTail();\n if (!tail || !tail[2].current) return;\n const node = moveNode({\n list: targetList,\n startNode: createEmptyNode({ prev: tail }),\n type: 'up',\n });\n setTargetNode(targetList, node);\n } else {\n const head = targetList.getHead();\n if (!head || !head[2].current) return;\n const node = moveNode({\n list: targetList,\n startNode: createEmptyNode({ next: head }),\n type: 'down',\n });\n setTargetNode(targetList, node);\n }\n return;\n }\n const prevTargetNodeRect = getNodeRect(prevTargetNode.node[2]);\n const rectProp = targetList.horizontal ? 'left' : 'top';\n if (!position || !prevTargetNodeRect) return;\n const isMoveUp = position[axis] < prevTargetNodeRect[rectProp];\n const node = isMoveUp\n ? moveNode({\n list: targetList,\n startNode: prevTargetNode.node,\n type: 'up',\n })\n : moveNode({\n list: targetList,\n startNode: prevTargetNode.node,\n type: 'down',\n });\n setTargetNode(targetList, node);\n return;\n }\n\n // Dragging in another list\n if (\n targetList &&\n targetList !== draggedNode.list &&\n prevTargetNode?.list === targetList\n ) {\n const axis = targetList.horizontal ? 'x' : 'y';\n const prevTargetNodeRect = getNodeRect(prevTargetNode.node[2]);\n const rectProp = targetList.horizontal ? 'left' : 'top';\n if (!position || !prevTargetNodeRect) return;\n const isMoveUp = position[axis] < prevTargetNodeRect[rectProp];\n const node = isMoveUp\n ? moveNode({\n list: targetList,\n startNode: prevTargetNode.node,\n type: 'up',\n insideAnotherList: true,\n })\n : moveNode({\n list: targetList,\n startNode: prevTargetNode.node,\n type: 'down',\n insideAnotherList: true,\n });\n setTargetNode(targetList, node);\n }\n }, [\n draggedNode,\n targetList,\n moveNode,\n clearTargetNode,\n removeBlankNode,\n setTargetNode,\n position,\n ]);\n\n // Update the target node if either the position or the target list has been changed\n useEffect(() => {\n updateTargetNode();\n }, [updateTargetNode]);\n\n // Update the target node if the target list has been scrolled\n const [throttledUpdateTargetNode] = useThrottle(updateTargetNode, 100);\n useEvent(targetList?.ref as any, 'scroll', throttledUpdateTargetNode);\n useEvent(window, 'scroll', throttledUpdateTargetNode);\n\n // Reset styles of the nodes when the dragged node was dropped\n useEffect(() => {\n if (!draggedNode) return () => {};\n const [, , , , draggedNodeIndex] = draggedNode.node;\n return () => {\n const targetNode = targetNodeRef.current;\n\n // If the dragged node was inside another list, reset the styles for the nodes,\n // starting at the tail and ending with the dragged node.\n if (targetNode && targetNode.list !== draggedNode.list) {\n const tail = targetNode.list.getTail();\n if (!tail) return;\n let node = tail;\n while (true) {\n const [prev, , , nodeSetStyle, nodeIndex] = node;\n nodeSetStyle({});\n if (!prev || nodeIndex <= draggedNodeIndex) break;\n node = prev;\n }\n }\n\n // If the dragged node was outside the origin list, reset the styles for the nodes,\n // starting at the tail and ending with the dragged node.\n const tail = draggedNode.list.getTail();\n if (targetNode?.list !== draggedNode.list && tail) {\n let node = tail;\n while (true) {\n const [prev, , , nodeSetStyle, nodeIndex] = node;\n nodeSetStyle({});\n if (!prev || nodeIndex <= draggedNodeIndex) break;\n node = prev;\n }\n }\n\n if (!targetNode) return;\n const [, , , targetNodeSetStyle, targetNodeIndex] = targetNode.node;\n if (targetNodeIndex > draggedNodeIndex) {\n let { node } = targetNode;\n while (true) {\n const [prev, , , nodeSetStyle, nodeIndex] = node;\n nodeSetStyle({});\n if (!prev || nodeIndex < draggedNodeIndex) return;\n node = prev;\n }\n }\n if (targetNodeIndex < draggedNodeIndex) {\n let { node } = targetNode;\n while (true) {\n const [, next, , nodeSetStyle, nodeIndex] = node;\n nodeSetStyle({});\n if (!next || nodeIndex > draggedNodeIndex) return;\n node = next;\n }\n }\n if (targetNodeIndex === draggedNodeIndex) {\n targetNodeSetStyle({});\n }\n };\n }, [draggedNode]);\n\n // Update the position of the mounted nodes between the dragged and target nodes (used in virtual list)\n useEffect(() => {\n if (!draggedNode) return () => {};\n const [, , , , draggedNodeIndex] = draggedNode.node;\n const update = (nodeProps: NodeProps) => {\n const { setStyle, index } = nodeProps;\n const targetNode = targetNodeRef.current;\n\n // If the dragged node outside the origin list\n if (\n targetNodeRef.current?.list !== draggedNode.list &&\n index > draggedNodeIndex\n ) {\n setStyle(getNodeStyle('up', draggedNode.list.horizontal));\n return;\n }\n\n if (!targetNode || !targetNode.node) return;\n const [, , , , targetNodeIndex] = targetNode.node;\n // If the dragged node was mounted\n if (index === draggedNodeIndex) {\n setStyle(HIDDEN_NODE_STYLE);\n return;\n }\n // If the node between the dragged and target nodes was mounted\n if (index > draggedNodeIndex && index < targetNodeIndex) {\n setStyle(getNodeStyle('up', targetNode.list.horizontal));\n } else if (index < draggedNodeIndex && index > targetNodeIndex) {\n setStyle(getNodeStyle('down', targetNode.list.horizontal));\n }\n };\n draggedNode.list.addListener(update);\n return () => draggedNode.list.removeListener(update);\n }, [draggedNode, getNodeStyle]);\n\n useEffect(() => {\n if (!draggedNode || !targetList || targetList === draggedNode.list) {\n return () => {};\n }\n const update = (nodeProps: NodeProps) => {\n const { setStyle, index } = nodeProps;\n const targetNode = targetNodeRef.current;\n if (!targetNode) return;\n const [, , , , targetNodeIndex] = targetNode.node;\n if (index < targetNodeIndex) return;\n setStyle(getNodeStyle('down', targetList.horizontal));\n };\n targetList.addListener(update);\n return () => targetList.removeListener(update);\n }, [draggedNode, getNodeStyle, targetList]);\n\n // Call the onDragEnd callback if the draggedNode was changed to null\n useEffect(() => {\n if (!draggedNode) return () => {};\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const target = targetRef.current;\n if (!target) return;\n const [, , , , draggedNodeIndex] = draggedNode.node;\n const dragged = { id: draggedNode.list.id, index: draggedNodeIndex };\n if (dragged.id === target.id && dragged.index === target.index) return;\n onDragEndRef.current(dragged, target);\n };\n }, [draggedNode]);\n};\n\nexport default useDragEffect;\n"],"file":"useDragEffect.js"}
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+
3
+ 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); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = exports.DroppableContext = void 0;
9
+
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
12
+ 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); }
13
+
14
+ 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; }
15
+
16
+ var DroppableContext = /*#__PURE__*/_react["default"].createContext({
17
+ registerNode: function registerNode() {
18
+ return [null, null, {
19
+ current: null
20
+ }, function () {}, -1];
21
+ },
22
+ deregisterNode: function deregisterNode() {},
23
+ onMouseDown: function onMouseDown() {},
24
+ onTouchStart: function onTouchStart() {}
25
+ });
26
+
27
+ exports.DroppableContext = DroppableContext;
28
+
29
+ var useDroppable = function useDroppable() {
30
+ return (0, _react.useContext)(DroppableContext);
31
+ };
32
+
33
+ var _default = useDroppable;
34
+ exports["default"] = _default;
35
+ //# sourceMappingURL=useDroppable.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/utils/useDroppable.ts"],"names":["DroppableContext","React","createContext","registerNode","current","deregisterNode","onMouseDown","onTouchStart","useDroppable"],"mappings":";;;;;;;;;AAAA;;;;;;AAUO,IAAMA,gBAAgB,gBAAGC,kBAAMC,aAAN,CAA2C;AACzEC,EAAAA,YAAY,EAAE;AAAA,WACZ,CAAC,IAAD,EAAO,IAAP,EAAa;AAAEC,MAAAA,OAAO,EAAE;AAAX,KAAb,EAAgC,YAAM,CAAE,CAAxC,EAA0C,CAAC,CAA3C,CADY;AAAA,GAD2D;AAGzEC,EAAAA,cAAc,EAAE,0BAAM,CAAE,CAHiD;AAIzEC,EAAAA,WAAW,EAAE,uBAAM,CAAE,CAJoD;AAKzEC,EAAAA,YAAY,EAAE,wBAAM,CAAE;AALmD,CAA3C,CAAzB;;;;AAQP,IAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,SAA6B,uBAAWR,gBAAX,CAA7B;AAAA,CAArB;;eAEeQ,Y","sourcesContent":["import React, { useContext, MouseEvent, TouchEvent } from 'react';\nimport { ExistingNode, NodeProps } from './NodeList';\n\ninterface DroppableContextProps {\n registerNode: (props: NodeProps) => ExistingNode;\n deregisterNode: (node: ExistingNode) => void;\n onMouseDown: (e: MouseEvent, node: ExistingNode) => void;\n onTouchStart: (e: TouchEvent, node: ExistingNode) => void;\n}\n\nexport const DroppableContext = React.createContext<DroppableContextProps>({\n registerNode: () =>\n [null, null, { current: null }, () => {}, -1] as ExistingNode,\n deregisterNode: () => {},\n onMouseDown: () => {},\n onTouchStart: () => {},\n});\n\nconst useDroppable = (): DroppableContextProps => useContext(DroppableContext);\n\nexport default useDroppable;\n"],"file":"useDroppable.js"}
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ var _crypto = _interopRequireDefault(require("crypto"));
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
+
14
+ var useGeneratedId = function useGeneratedId(size) {
15
+ return (0, _react.useMemo)(function () {
16
+ return _crypto["default"].randomBytes(size).toString('hex');
17
+ }, [size]);
18
+ };
19
+
20
+ var _default = useGeneratedId;
21
+ exports["default"] = _default;
22
+ //# sourceMappingURL=useGeneratedId.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/utils/useGeneratedId.ts"],"names":["useGeneratedId","size","crypto","randomBytes","toString"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD;AAAA,SACrB,oBAAQ;AAAA,WAAMC,mBAAOC,WAAP,CAAmBF,IAAnB,EAAyBG,QAAzB,CAAkC,KAAlC,CAAN;AAAA,GAAR,EAAwD,CAACH,IAAD,CAAxD,CADqB;AAAA,CAAvB;;eAGeD,c","sourcesContent":["import { useMemo } from 'react';\nimport crypto from 'crypto';\n\nconst useGeneratedId = (size: number) =>\n useMemo(() => crypto.randomBytes(size).toString('hex'), [size]);\n\nexport default useGeneratedId;\n"],"file":"useGeneratedId.js"}
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ var useGetNodeStyle = function useGetNodeStyle(size) {
11
+ var sizeRef = (0, _react.useRef)(size);
12
+ (0, _react.useEffect)(function () {
13
+ sizeRef.current = size;
14
+ }, [size]);
15
+ return (0, _react.useCallback)(function (type, horizontal) {
16
+ if (type === 'init' || !sizeRef.current) return {};
17
+ var translateFn = horizontal ? 'translateX' : 'translateY';
18
+ var sizeProp = horizontal ? 'initWidth' : 'initHeight';
19
+ var sign = type === 'down' ? 1 : -1;
20
+ var style = {};
21
+ style.transform = "".concat(translateFn, "(").concat(sign * sizeRef.current[sizeProp], "px)");
22
+ return style;
23
+ }, []);
24
+ };
25
+
26
+ var _default = useGetNodeStyle;
27
+ exports["default"] = _default;
28
+ //# sourceMappingURL=useGetNodeStyle.js.map