@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.
- package/dist/cjs/DragAndDrop.js +50 -72
- package/dist/cjs/DragAndDrop.js.map +1 -1
- package/dist/cjs/Draggable.js +19 -36
- package/dist/cjs/Draggable.js.map +1 -1
- package/dist/cjs/Droppable.js +24 -33
- package/dist/cjs/Droppable.js.map +1 -1
- package/dist/cjs/index.js +0 -9
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/utils/ListStore.js +4 -13
- package/dist/cjs/utils/ListStore.js.map +1 -1
- package/dist/cjs/utils/NodeList.js +25 -56
- package/dist/cjs/utils/NodeList.js.map +1 -1
- package/dist/cjs/utils/getElementOffset.js +0 -4
- package/dist/cjs/utils/getElementOffset.js.map +1 -1
- package/dist/cjs/utils/getElementScroll.js +0 -4
- package/dist/cjs/utils/getElementScroll.js.map +1 -1
- package/dist/cjs/utils/getNodeRect.js +9 -18
- package/dist/cjs/utils/getNodeRect.js.map +1 -1
- package/dist/cjs/utils/useAppendClassName.js +0 -3
- package/dist/cjs/utils/useAppendClassName.js.map +1 -1
- package/dist/cjs/utils/useBlankNode.js +17 -26
- package/dist/cjs/utils/useBlankNode.js.map +1 -1
- package/dist/cjs/utils/useDragAndDrop.js +0 -8
- package/dist/cjs/utils/useDragAndDrop.js.map +1 -1
- package/dist/cjs/utils/useDragEffect.js +104 -163
- package/dist/cjs/utils/useDragEffect.js.map +1 -1
- package/dist/cjs/utils/useDroppable.js +0 -8
- package/dist/cjs/utils/useDroppable.js.map +1 -1
- package/dist/cjs/utils/useGeneratedId.js +0 -3
- package/dist/cjs/utils/useGeneratedId.js.map +1 -1
- package/dist/cjs/utils/useGetNodeStyle.js +0 -3
- package/dist/cjs/utils/useGetNodeStyle.js.map +1 -1
- package/dist/cjs/utils/useInitRect.js +0 -3
- package/dist/cjs/utils/useInitRect.js.map +1 -1
- package/dist/cjs/utils/useInitScrollOffset.js +0 -5
- package/dist/cjs/utils/useInitScrollOffset.js.map +1 -1
- package/dist/cjs/utils/useMoveNode.js +23 -48
- package/dist/cjs/utils/useMoveNode.js.map +1 -1
- package/dist/cjs/utils/useScrollEventByPoint.js +2 -10
- package/dist/cjs/utils/useScrollEventByPoint.js.map +1 -1
- package/dist/cjs/utils/useTargetList.js +8 -21
- package/dist/cjs/utils/useTargetList.js.map +1 -1
- package/dist/cjs/utils/useTransitionStyle.js +2 -5
- package/dist/cjs/utils/useTransitionStyle.js.map +1 -1
- package/dist/esm/DragAndDrop.js +19 -12
- package/dist/esm/DragAndDrop.js.map +1 -1
- package/dist/esm/Draggable.js +10 -9
- package/dist/esm/Draggable.js.map +1 -1
- package/dist/esm/Droppable.js +17 -14
- package/dist/esm/Droppable.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/ListStore.js +3 -8
- package/dist/esm/utils/ListStore.js.map +1 -1
- package/dist/esm/utils/NodeList.js +17 -36
- package/dist/esm/utils/NodeList.js.map +1 -1
- package/dist/esm/utils/getElementOffset.js +0 -3
- package/dist/esm/utils/getElementOffset.js.map +1 -1
- package/dist/esm/utils/getElementScroll.js +0 -3
- package/dist/esm/utils/getElementScroll.js.map +1 -1
- package/dist/esm/utils/getNodeRect.js +1 -2
- package/dist/esm/utils/getNodeRect.js.map +1 -1
- package/dist/esm/utils/useAppendClassName.js +1 -2
- package/dist/esm/utils/useAppendClassName.js.map +1 -1
- package/dist/esm/utils/useBlankNode.js +10 -9
- package/dist/esm/utils/useBlankNode.js.map +1 -1
- package/dist/esm/utils/useDragAndDrop.js +0 -2
- package/dist/esm/utils/useDragAndDrop.js.map +1 -1
- package/dist/esm/utils/useDragEffect.js +57 -60
- package/dist/esm/utils/useDragEffect.js.map +1 -1
- package/dist/esm/utils/useDroppable.js +0 -2
- package/dist/esm/utils/useDroppable.js.map +1 -1
- package/dist/esm/utils/useGeneratedId.js +0 -2
- package/dist/esm/utils/useGeneratedId.js.map +1 -1
- package/dist/esm/utils/useGetNodeStyle.js +0 -2
- package/dist/esm/utils/useGetNodeStyle.js.map +1 -1
- package/dist/esm/utils/useInitRect.js +0 -2
- package/dist/esm/utils/useInitRect.js.map +1 -1
- package/dist/esm/utils/useInitScrollOffset.js +0 -2
- package/dist/esm/utils/useInitScrollOffset.js.map +1 -1
- package/dist/esm/utils/useMoveNode.js +1 -11
- package/dist/esm/utils/useMoveNode.js.map +1 -1
- package/dist/esm/utils/useScrollEventByPoint.js +0 -5
- package/dist/esm/utils/useScrollEventByPoint.js.map +1 -1
- package/dist/esm/utils/useTargetList.js +2 -3
- package/dist/esm/utils/useTargetList.js.map +1 -1
- package/dist/esm/utils/useTransitionStyle.js +0 -2
- package/dist/esm/utils/useTransitionStyle.js.map +1 -1
- 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
|
-
|
|
52
|
-
|
|
53
|
-
|
|
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
|
-
|
|
64
|
-
|
|
65
|
-
|
|
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]);
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
68
|
+
y = cursorPosition.y;
|
|
86
69
|
var initWidth = initDraggedNodeRect.initWidth,
|
|
87
|
-
|
|
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]);
|
|
75
|
+
}, [cursorPosition, draggedNode, initDraggedNodeRect]);
|
|
93
76
|
|
|
94
|
-
|
|
77
|
+
// The list in which the cursor is located
|
|
78
|
+
var targetList = (0, _useTargetList["default"])(position, listStoreRef);
|
|
95
79
|
|
|
96
|
-
|
|
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
|
-
|
|
106
|
-
|
|
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
|
-
}, []);
|
|
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
|
-
|
|
130
|
-
|
|
131
|
-
|
|
114
|
+
initY = initDraggedNodeRect.initY,
|
|
115
|
+
initWidth = initDraggedNodeRect.initWidth,
|
|
116
|
+
initHeight = initDraggedNodeRect.initHeight;
|
|
132
117
|
var initScrollLeft = initDraggedNodeListScrollOffset.initScrollLeft,
|
|
133
|
-
|
|
134
|
-
|
|
118
|
+
initScrollTop = initDraggedNodeListScrollOffset.initScrollTop;
|
|
135
119
|
var _getElementScroll = (0, _getElementScroll2["default"])(targetList.ref.current),
|
|
136
|
-
|
|
137
|
-
|
|
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]);
|
|
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
|
-
|
|
154
|
-
|
|
136
|
+
draggedNodeSetStyle = _draggedNode$node[3];
|
|
155
137
|
draggedNodeSetStyle(HIDDEN_NODE_STYLE);
|
|
156
138
|
return function () {
|
|
157
139
|
return draggedNodeSetStyle({});
|
|
158
140
|
};
|
|
159
|
-
}, [draggedNode]);
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
|
|
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
|
-
}
|
|
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]);
|
|
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]);
|
|
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
|
-
|
|
334
|
-
|
|
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);
|
|
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
|
-
|
|
344
|
-
|
|
306
|
+
draggedNodeIndex = _draggedNode$node2[4];
|
|
345
307
|
return function () {
|
|
346
|
-
var targetNode = targetNodeRef.current;
|
|
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
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
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
|
-
}
|
|
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
|
-
|
|
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
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
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
|
-
}
|
|
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
|
-
|
|
400
|
-
|
|
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
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
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
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
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]);
|
|
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
|
-
|
|
444
|
-
|
|
391
|
+
draggedNodeIndex = _draggedNode$node3[4];
|
|
445
392
|
var update = function update(nodeProps) {
|
|
446
393
|
var setStyle = nodeProps.setStyle,
|
|
447
|
-
|
|
448
|
-
var targetNode = targetNodeRef.current;
|
|
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
|
-
}
|
|
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
|
-
|
|
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]);
|
|
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
|
-
|
|
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
|
-
|
|
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]);
|
|
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
|
-
|
|
513
|
-
|
|
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
|