@os-design/drag-sort 1.0.30 → 1.0.32
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/DragAndDrop.d.ts +52 -0
- package/dist/DragAndDrop.d.ts.map +1 -0
- package/dist/{esm/DragAndDrop.js → DragAndDrop.js} +26 -24
- package/dist/Draggable.d.ts +42 -0
- package/dist/Draggable.d.ts.map +1 -0
- package/dist/{esm/Draggable.js → Draggable.js} +12 -10
- package/dist/Droppable.d.ts +38 -0
- package/dist/Droppable.d.ts.map +1 -0
- package/dist/{esm/Droppable.js → Droppable.js} +13 -12
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +6 -0
- package/dist/utils/ListStore.d.ts +22 -0
- package/dist/utils/ListStore.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/ListStore.js +1 -2
- package/dist/utils/NodeList.d.ts +104 -0
- package/dist/utils/NodeList.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/NodeList.js +2 -3
- package/dist/utils/getElementOffset.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/getElementOffset.js +1 -2
- package/dist/utils/getElementScroll.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/getElementScroll.js +1 -2
- package/dist/{types/utils → utils}/getNodeRect.d.ts +4 -1
- package/dist/utils/getNodeRect.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/getNodeRect.js +3 -5
- package/dist/utils/useAppendClassName.d.ts +7 -0
- package/dist/utils/useAppendClassName.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useAppendClassName.js +1 -2
- package/dist/{types/utils → utils}/useBlankNode.d.ts +4 -0
- package/dist/utils/useBlankNode.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useBlankNode.js +1 -2
- package/dist/{types/utils → utils}/useDragAndDrop.d.ts +3 -3
- package/dist/utils/useDragAndDrop.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useDragAndDrop.js +1 -2
- package/dist/{types/utils → utils}/useDragEffect.d.ts +3 -3
- package/dist/utils/useDragEffect.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useDragEffect.js +9 -14
- package/dist/{types/utils → utils}/useDroppable.d.ts +2 -2
- package/dist/utils/useDroppable.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useDroppable.js +1 -2
- package/dist/utils/useGeneratedId.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useGeneratedId.js +1 -2
- package/dist/{types/utils → utils}/useGetNodeStyle.d.ts +1 -1
- package/dist/utils/useGetNodeStyle.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useGetNodeStyle.js +1 -2
- package/dist/{types/utils → utils}/useInitRect.d.ts +1 -1
- package/dist/utils/useInitRect.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useInitRect.js +1 -2
- package/dist/{types/utils → utils}/useInitScrollOffset.d.ts +1 -1
- package/dist/utils/useInitScrollOffset.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useInitScrollOffset.js +2 -3
- package/dist/{types/utils → utils}/useMoveNode.d.ts +3 -4
- package/dist/utils/useMoveNode.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useMoveNode.js +2 -5
- package/dist/utils/useScrollEventByPoint.d.ts +11 -0
- package/dist/utils/useScrollEventByPoint.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useScrollEventByPoint.js +1 -2
- package/dist/{types/utils → utils}/useTargetList.d.ts +2 -2
- package/dist/utils/useTargetList.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useTargetList.js +2 -3
- package/dist/{types/utils → utils}/useTransitionStyle.d.ts +3 -0
- package/dist/utils/useTransitionStyle.d.ts.map +1 -0
- package/dist/{esm/utils → utils}/useTransitionStyle.js +1 -2
- package/package.json +16 -17
- package/src/DragAndDrop.tsx +10 -10
- package/src/Draggable.tsx +5 -5
- package/src/Droppable.tsx +6 -6
- package/src/utils/NodeList.ts +2 -2
- package/src/utils/getNodeRect.ts +1 -1
- package/src/utils/useAppendClassName.ts +1 -1
- package/src/utils/useBlankNode.ts +1 -1
- package/src/utils/useDragAndDrop.ts +3 -3
- package/src/utils/useDragEffect.ts +8 -7
- package/src/utils/useDroppable.ts +2 -2
- package/src/utils/useGetNodeStyle.ts +1 -1
- package/src/utils/useInitRect.ts +1 -1
- package/src/utils/useInitScrollOffset.ts +1 -1
- package/src/utils/useMoveNode.ts +3 -5
- package/src/utils/useTargetList.ts +2 -2
- package/dist/cjs/DragAndDrop.js +0 -181
- package/dist/cjs/DragAndDrop.js.map +0 -1
- package/dist/cjs/Draggable.js +0 -81
- package/dist/cjs/Draggable.js.map +0 -1
- package/dist/cjs/Droppable.js +0 -98
- package/dist/cjs/Droppable.js.map +0 -1
- package/dist/cjs/index.js +0 -68
- package/dist/cjs/index.js.map +0 -1
- package/dist/cjs/utils/ListStore.js +0 -61
- package/dist/cjs/utils/ListStore.js.map +0 -1
- package/dist/cjs/utils/NodeList.js +0 -228
- package/dist/cjs/utils/NodeList.js.map +0 -1
- package/dist/cjs/utils/getElementOffset.js +0 -22
- package/dist/cjs/utils/getElementOffset.js.map +0 -1
- package/dist/cjs/utils/getElementScroll.js +0 -22
- package/dist/cjs/utils/getElementScroll.js.map +0 -1
- package/dist/cjs/utils/getNodeRect.js +0 -38
- package/dist/cjs/utils/getNodeRect.js.map +0 -1
- package/dist/cjs/utils/useAppendClassName.js +0 -23
- package/dist/cjs/utils/useAppendClassName.js.map +0 -1
- package/dist/cjs/utils/useBlankNode.js +0 -94
- package/dist/cjs/utils/useBlankNode.js.map +0 -1
- package/dist/cjs/utils/useDragAndDrop.js +0 -22
- package/dist/cjs/utils/useDragAndDrop.js.map +0 -1
- package/dist/cjs/utils/useDragEffect.js +0 -468
- package/dist/cjs/utils/useDragEffect.js.map +0 -1
- package/dist/cjs/utils/useDroppable.js +0 -25
- package/dist/cjs/utils/useDroppable.js.map +0 -1
- package/dist/cjs/utils/useGeneratedId.js +0 -14
- package/dist/cjs/utils/useGeneratedId.js.map +0 -1
- package/dist/cjs/utils/useGetNodeStyle.js +0 -24
- package/dist/cjs/utils/useGetNodeStyle.js.map +0 -1
- package/dist/cjs/utils/useInitRect.js +0 -21
- package/dist/cjs/utils/useInitRect.js.map +0 -1
- package/dist/cjs/utils/useInitScrollOffset.js +0 -21
- package/dist/cjs/utils/useInitScrollOffset.js.map +0 -1
- package/dist/cjs/utils/useMoveNode.js +0 -90
- package/dist/cjs/utils/useMoveNode.js.map +0 -1
- package/dist/cjs/utils/useScrollEventByPoint.js +0 -57
- package/dist/cjs/utils/useScrollEventByPoint.js.map +0 -1
- package/dist/cjs/utils/useTargetList.js +0 -44
- package/dist/cjs/utils/useTargetList.js.map +0 -1
- package/dist/cjs/utils/useTransitionStyle.js +0 -26
- package/dist/cjs/utils/useTransitionStyle.js.map +0 -1
- package/dist/esm/DragAndDrop.js.map +0 -1
- package/dist/esm/Draggable.js.map +0 -1
- package/dist/esm/Droppable.js.map +0 -1
- package/dist/esm/index.js +0 -7
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/utils/ListStore.js.map +0 -1
- package/dist/esm/utils/NodeList.js.map +0 -1
- package/dist/esm/utils/getElementOffset.js.map +0 -1
- package/dist/esm/utils/getElementScroll.js.map +0 -1
- package/dist/esm/utils/getNodeRect.js.map +0 -1
- package/dist/esm/utils/useAppendClassName.js.map +0 -1
- package/dist/esm/utils/useBlankNode.js.map +0 -1
- package/dist/esm/utils/useDragAndDrop.js.map +0 -1
- package/dist/esm/utils/useDragEffect.js.map +0 -1
- package/dist/esm/utils/useDroppable.js.map +0 -1
- package/dist/esm/utils/useGeneratedId.js.map +0 -1
- package/dist/esm/utils/useGetNodeStyle.js.map +0 -1
- package/dist/esm/utils/useInitRect.js.map +0 -1
- package/dist/esm/utils/useInitScrollOffset.js.map +0 -1
- package/dist/esm/utils/useMoveNode.js.map +0 -1
- package/dist/esm/utils/useScrollEventByPoint.js.map +0 -1
- package/dist/esm/utils/useTargetList.js.map +0 -1
- package/dist/esm/utils/useTransitionStyle.js.map +0 -1
- package/dist/types/DragAndDrop.d.ts +0 -17
- package/dist/types/DragAndDrop.d.ts.map +0 -1
- package/dist/types/Draggable.d.ts +0 -18
- package/dist/types/Draggable.d.ts.map +0 -1
- package/dist/types/Droppable.d.ts +0 -15
- package/dist/types/Droppable.d.ts.map +0 -1
- package/dist/types/index.d.ts.map +0 -1
- package/dist/types/utils/ListStore.d.ts +0 -10
- package/dist/types/utils/ListStore.d.ts.map +0 -1
- package/dist/types/utils/NodeList.d.ts +0 -44
- package/dist/types/utils/NodeList.d.ts.map +0 -1
- package/dist/types/utils/getElementOffset.d.ts.map +0 -1
- package/dist/types/utils/getElementScroll.d.ts.map +0 -1
- package/dist/types/utils/getNodeRect.d.ts.map +0 -1
- package/dist/types/utils/useAppendClassName.d.ts +0 -4
- package/dist/types/utils/useAppendClassName.d.ts.map +0 -1
- package/dist/types/utils/useBlankNode.d.ts.map +0 -1
- package/dist/types/utils/useDragAndDrop.d.ts.map +0 -1
- package/dist/types/utils/useDragEffect.d.ts.map +0 -1
- package/dist/types/utils/useDroppable.d.ts.map +0 -1
- package/dist/types/utils/useGeneratedId.d.ts.map +0 -1
- package/dist/types/utils/useGetNodeStyle.d.ts.map +0 -1
- package/dist/types/utils/useInitRect.d.ts.map +0 -1
- package/dist/types/utils/useInitScrollOffset.d.ts.map +0 -1
- package/dist/types/utils/useMoveNode.d.ts.map +0 -1
- package/dist/types/utils/useScrollEventByPoint.d.ts +0 -7
- package/dist/types/utils/useScrollEventByPoint.d.ts.map +0 -1
- package/dist/types/utils/useTargetList.d.ts.map +0 -1
- package/dist/types/utils/useTransitionStyle.d.ts.map +0 -1
- /package/dist/{types/index.d.ts → index.d.ts} +0 -0
- /package/dist/{types/utils → utils}/getElementOffset.d.ts +0 -0
- /package/dist/{types/utils → utils}/getElementScroll.d.ts +0 -0
- /package/dist/{types/utils → utils}/useGeneratedId.d.ts +0 -0
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { type PortalProps } from '@os-design/portal';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { type DragEndHandler } from './utils/useDragEffect';
|
|
4
|
+
export interface DragAndDropProps {
|
|
5
|
+
/**
|
|
6
|
+
* The container in which the dragged node will be rendered.
|
|
7
|
+
* @default document.body
|
|
8
|
+
*/
|
|
9
|
+
draggedNodeContainer?: PortalProps['container'];
|
|
10
|
+
/**
|
|
11
|
+
* The min distance required to start dragging a node (in px).
|
|
12
|
+
* @default 10
|
|
13
|
+
*/
|
|
14
|
+
minMouseDistPx?: number;
|
|
15
|
+
/**
|
|
16
|
+
* The delay of the long press event required to start dragging a node on the touch device (in ms).
|
|
17
|
+
* @default 500
|
|
18
|
+
*/
|
|
19
|
+
longPressMs?: number;
|
|
20
|
+
/**
|
|
21
|
+
* The distance to the bound at which the list starts to scroll automatically (in percent).
|
|
22
|
+
* @default 20
|
|
23
|
+
*/
|
|
24
|
+
autoScrollDistPercent?: number;
|
|
25
|
+
/**
|
|
26
|
+
* The max auto scroll speed (in px).
|
|
27
|
+
* @default 100
|
|
28
|
+
*/
|
|
29
|
+
autoScrollMaxSpeedPx?: number;
|
|
30
|
+
/**
|
|
31
|
+
* The animation duration (in ms).
|
|
32
|
+
* @default 250
|
|
33
|
+
*/
|
|
34
|
+
transitionDelayMs?: number;
|
|
35
|
+
/**
|
|
36
|
+
* The callback that is called when the drag is completed.
|
|
37
|
+
* @default undefined
|
|
38
|
+
*/
|
|
39
|
+
onDragEnd?: DragEndHandler;
|
|
40
|
+
/**
|
|
41
|
+
* The children.
|
|
42
|
+
* @default undefined
|
|
43
|
+
*/
|
|
44
|
+
children?: React.ReactNode;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* The container containing one or more lists with draggable nodes.
|
|
48
|
+
*/
|
|
49
|
+
declare const DragAndDrop: React.FC<DragAndDropProps>;
|
|
50
|
+
export type { DragEndHandler } from './utils/useDragEffect';
|
|
51
|
+
export default DragAndDrop;
|
|
52
|
+
//# sourceMappingURL=DragAndDrop.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DragAndDrop.d.ts","sourceRoot":"","sources":["../src/DragAndDrop.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAU7D,OAAO,KAON,MAAM,OAAO,CAAC;AAIf,OAAsB,EACpB,KAAK,cAAc,EAEpB,MAAM,uBAAuB,CAAC;AAK/B,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAOD;;GAEG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmJ3C,CAAC;AAEF,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAe,WAAW,CAAC"}
|
|
@@ -4,12 +4,13 @@ import useDrag from '@os-design/use-drag';
|
|
|
4
4
|
import useMemoObject from '@os-design/use-memo-object';
|
|
5
5
|
import usePreventDefaultEvent from '@os-design/use-prevent-default-event';
|
|
6
6
|
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
|
7
|
-
import ListStore from
|
|
8
|
-
import { DragAndDropContext } from
|
|
9
|
-
import useDragEffect from
|
|
10
|
-
import useGeneratedId from
|
|
11
|
-
import useInitRect from
|
|
12
|
-
import useTransitionStyle from
|
|
7
|
+
import ListStore from "./utils/ListStore.js";
|
|
8
|
+
import { DragAndDropContext } from "./utils/useDragAndDrop.js";
|
|
9
|
+
import useDragEffect from "./utils/useDragEffect.js";
|
|
10
|
+
import useGeneratedId from "./utils/useGeneratedId.js";
|
|
11
|
+
import useInitRect from "./utils/useInitRect.js";
|
|
12
|
+
import useTransitionStyle from "./utils/useTransitionStyle.js";
|
|
13
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
14
|
/**
|
|
14
15
|
* The container containing one or more lists with draggable nodes.
|
|
15
16
|
*/
|
|
@@ -131,22 +132,23 @@ const DragAndDrop = ({
|
|
|
131
132
|
onTouchStart: touchStartHandler,
|
|
132
133
|
nodeClassName
|
|
133
134
|
});
|
|
134
|
-
return /*#__PURE__*/
|
|
135
|
-
value: dragAndDropContext
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
135
|
+
return /*#__PURE__*/_jsxs(DragAndDropContext.Provider, {
|
|
136
|
+
value: dragAndDropContext,
|
|
137
|
+
children: [children, draggedNode && /*#__PURE__*/_jsx(Portal, {
|
|
138
|
+
container: draggedNodeContainer,
|
|
139
|
+
children: draggedNode.list.renderDraggedNode({
|
|
140
|
+
index: draggedNode.node[4],
|
|
141
|
+
id: draggedNode.node[5],
|
|
142
|
+
style: {
|
|
143
|
+
position: 'fixed',
|
|
144
|
+
left: cursorPosition.x - draggedNode.position.x,
|
|
145
|
+
top: cursorPosition.y - draggedNode.position.y,
|
|
146
|
+
width: initRect ? initRect.initWidth : undefined,
|
|
147
|
+
height: initRect ? initRect.initHeight : undefined,
|
|
148
|
+
zIndex: 1001
|
|
149
|
+
}
|
|
150
|
+
})
|
|
151
|
+
})]
|
|
152
|
+
});
|
|
150
153
|
};
|
|
151
|
-
export default DragAndDrop;
|
|
152
|
-
//# sourceMappingURL=DragAndDrop.js.map
|
|
154
|
+
export default DragAndDrop;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React, { type CSSProperties, type MouseEvent, type RefObject, type TouchEvent } from 'react';
|
|
2
|
+
export interface DraggableHandlers {
|
|
3
|
+
/**
|
|
4
|
+
* The handler that should be called when the mouse down event occurs.
|
|
5
|
+
*/
|
|
6
|
+
onMouseDown: (e: MouseEvent) => void;
|
|
7
|
+
/**
|
|
8
|
+
* The handler that should be called when the touch start event occurs.
|
|
9
|
+
*/
|
|
10
|
+
onTouchStart: (e: TouchEvent) => void;
|
|
11
|
+
}
|
|
12
|
+
export interface DraggableChildrenProps {
|
|
13
|
+
/**
|
|
14
|
+
* The reference to the draggable list item.
|
|
15
|
+
*/
|
|
16
|
+
ref: RefObject<any>;
|
|
17
|
+
/**
|
|
18
|
+
* Additional styles for moving the list item.
|
|
19
|
+
*/
|
|
20
|
+
style: CSSProperties;
|
|
21
|
+
/**
|
|
22
|
+
* The handlers to catch events when the user starts dragging the list item.
|
|
23
|
+
*/
|
|
24
|
+
handlers: DraggableHandlers;
|
|
25
|
+
}
|
|
26
|
+
export interface DraggableProps {
|
|
27
|
+
/**
|
|
28
|
+
* The index of the draggable node.
|
|
29
|
+
*/
|
|
30
|
+
index: number;
|
|
31
|
+
/**
|
|
32
|
+
* The ID of the draggable node.
|
|
33
|
+
*/
|
|
34
|
+
id: string;
|
|
35
|
+
/**
|
|
36
|
+
* The function that renders the draggable node.
|
|
37
|
+
*/
|
|
38
|
+
children: (props: DraggableChildrenProps) => React.ReactNode;
|
|
39
|
+
}
|
|
40
|
+
declare const Draggable: React.FC<DraggableProps>;
|
|
41
|
+
export default Draggable;
|
|
42
|
+
//# sourceMappingURL=Draggable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../src/Draggable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,UAAU,EAKhB,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+CvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import useMemoObject from '@os-design/use-memo-object';
|
|
2
2
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
|
-
import useAppendClassName from
|
|
4
|
-
import useDragAndDrop from
|
|
5
|
-
import useDroppable from
|
|
3
|
+
import useAppendClassName from "./utils/useAppendClassName.js";
|
|
4
|
+
import useDragAndDrop from "./utils/useDragAndDrop.js";
|
|
5
|
+
import useDroppable from "./utils/useDroppable.js";
|
|
6
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
6
7
|
const Draggable = ({
|
|
7
8
|
index,
|
|
8
9
|
id,
|
|
@@ -55,11 +56,12 @@ const Draggable = ({
|
|
|
55
56
|
onMouseDown: mouseDownHandler,
|
|
56
57
|
onTouchStart: touchStartHandler
|
|
57
58
|
});
|
|
58
|
-
return /*#__PURE__*/
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
|
60
|
+
children: children({
|
|
61
|
+
ref,
|
|
62
|
+
style,
|
|
63
|
+
handlers
|
|
64
|
+
})
|
|
65
|
+
});
|
|
63
66
|
};
|
|
64
|
-
export default Draggable;
|
|
65
|
-
//# sourceMappingURL=Draggable.js.map
|
|
67
|
+
export default Draggable;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { type RefObject } from 'react';
|
|
2
|
+
import { type RenderDraggedNode } from './utils/NodeList';
|
|
3
|
+
export interface DroppableChildrenProps {
|
|
4
|
+
/**
|
|
5
|
+
* The reference to the list.
|
|
6
|
+
* If a virtual list is used, pass it to the outerRef prop.
|
|
7
|
+
*/
|
|
8
|
+
ref: RefObject<HTMLDivElement>;
|
|
9
|
+
/**
|
|
10
|
+
* The reference to the container inside the virtual list.
|
|
11
|
+
* Pass it to the innerRef prop.
|
|
12
|
+
*/
|
|
13
|
+
innerRef: RefObject<HTMLDivElement>;
|
|
14
|
+
}
|
|
15
|
+
export interface DroppableProps {
|
|
16
|
+
/**
|
|
17
|
+
* The function that renders the dragged node.
|
|
18
|
+
*/
|
|
19
|
+
renderDraggedNode: RenderDraggedNode;
|
|
20
|
+
/**
|
|
21
|
+
* The ID of the list with draggable nodes.
|
|
22
|
+
* Used to determine in which list the dragged node was dropped.
|
|
23
|
+
* @default undefined
|
|
24
|
+
*/
|
|
25
|
+
id?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Whether the list is horizontal.
|
|
28
|
+
* @default false
|
|
29
|
+
*/
|
|
30
|
+
horizontal?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* The function that renders the list with draggable nodes.
|
|
33
|
+
*/
|
|
34
|
+
children: (props: DroppableChildrenProps) => React.ReactNode;
|
|
35
|
+
}
|
|
36
|
+
declare const Droppable: React.FC<DroppableProps>;
|
|
37
|
+
export default Droppable;
|
|
38
|
+
//# sourceMappingURL=Droppable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../src/Droppable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAiB,EAGf,KAAK,iBAAiB,EACvB,MAAM,kBAAkB,CAAC;AAK1B,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC/B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,iBAAiB,EAAE,iBAAiB,CAAC;IACrC;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuFvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import useMemoObject from '@os-design/use-memo-object';
|
|
2
2
|
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
3
|
-
import NodeList from
|
|
4
|
-
import useDragAndDrop from
|
|
5
|
-
import { DroppableContext } from
|
|
6
|
-
import useGeneratedId from
|
|
3
|
+
import NodeList from "./utils/NodeList.js";
|
|
4
|
+
import useDragAndDrop from "./utils/useDragAndDrop.js";
|
|
5
|
+
import { DroppableContext } from "./utils/useDroppable.js";
|
|
6
|
+
import useGeneratedId from "./utils/useGeneratedId.js";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
8
|
const Droppable = ({
|
|
8
9
|
renderDraggedNode,
|
|
9
10
|
id,
|
|
@@ -72,12 +73,12 @@ const Droppable = ({
|
|
|
72
73
|
onMouseDown: mouseDownHandler,
|
|
73
74
|
onTouchStart: touchStartHandler
|
|
74
75
|
});
|
|
75
|
-
return /*#__PURE__*/
|
|
76
|
-
value: droppableContext
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
76
|
+
return /*#__PURE__*/_jsx(DroppableContext.Provider, {
|
|
77
|
+
value: droppableContext,
|
|
78
|
+
children: children({
|
|
79
|
+
ref,
|
|
80
|
+
innerRef
|
|
81
|
+
})
|
|
82
|
+
});
|
|
81
83
|
};
|
|
82
|
-
export default Droppable;
|
|
83
|
-
//# sourceMappingURL=Droppable.js.map
|
|
84
|
+
export default Droppable;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEnD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as DragAndDrop } from "./DragAndDrop.js";
|
|
2
|
+
export { default as Droppable } from "./Droppable.js";
|
|
3
|
+
export { default as Draggable } from "./Draggable.js";
|
|
4
|
+
export * from "./DragAndDrop.js";
|
|
5
|
+
export * from "./Droppable.js";
|
|
6
|
+
export * from "./Draggable.js";
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import NodeList from './NodeList';
|
|
2
|
+
/**
|
|
3
|
+
* Stores all the lists where the draggable items is located.
|
|
4
|
+
*/
|
|
5
|
+
declare class ListStore {
|
|
6
|
+
private lists;
|
|
7
|
+
constructor();
|
|
8
|
+
/**
|
|
9
|
+
* Adds a new list to the store.
|
|
10
|
+
*/
|
|
11
|
+
add(list: NodeList): void;
|
|
12
|
+
/**
|
|
13
|
+
* Removes the list from the store.
|
|
14
|
+
*/
|
|
15
|
+
remove(id: string): void;
|
|
16
|
+
/**
|
|
17
|
+
* Returns the list in which the position is located.
|
|
18
|
+
*/
|
|
19
|
+
findByPosition(x: number, y: number): NodeList | undefined;
|
|
20
|
+
}
|
|
21
|
+
export default ListStore;
|
|
22
|
+
//# sourceMappingURL=ListStore.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListStore.d.ts","sourceRoot":"","sources":["../../src/utils/ListStore.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;GAEG;AACH,cAAM,SAAS;IACb,OAAO,CAAC,KAAK,CAAa;;IAM1B;;OAEG;IACI,GAAG,CAAC,IAAI,EAAE,QAAQ;IAIzB;;OAEG;IACI,MAAM,CAAC,EAAE,EAAE,MAAM;IAMxB;;OAEG;IACI,cAAc,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;CAa3C;AAED,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import React, { type CSSProperties, type RefObject } from 'react';
|
|
2
|
+
export type Node = [Node, Node, RefObject<any>, (style: CSSProperties) => void, number, string] | null;
|
|
3
|
+
export type ExistingNode = Exclude<Node, null>;
|
|
4
|
+
export interface NodeProps {
|
|
5
|
+
ref: React.MutableRefObject<any>;
|
|
6
|
+
setStyle: (style: CSSProperties) => void;
|
|
7
|
+
index: number;
|
|
8
|
+
id: string;
|
|
9
|
+
}
|
|
10
|
+
interface RenderDraggedNodeProps {
|
|
11
|
+
/**
|
|
12
|
+
* The index of the dragged node.
|
|
13
|
+
*/
|
|
14
|
+
index: number;
|
|
15
|
+
/**
|
|
16
|
+
* The ID of the dragged node.
|
|
17
|
+
*/
|
|
18
|
+
id: string;
|
|
19
|
+
/**
|
|
20
|
+
* The style of the dragged node with position.
|
|
21
|
+
*/
|
|
22
|
+
style: CSSProperties;
|
|
23
|
+
}
|
|
24
|
+
export type RenderDraggedNode = (props: RenderDraggedNodeProps) => React.ReactNode;
|
|
25
|
+
interface InitProps {
|
|
26
|
+
id: string;
|
|
27
|
+
ref: RefObject<HTMLDivElement>;
|
|
28
|
+
innerRef: RefObject<HTMLDivElement>;
|
|
29
|
+
horizontal: boolean;
|
|
30
|
+
renderDraggedNode: RenderDraggedNode;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Stores all the draggable items in the list.
|
|
34
|
+
* The structure of the doubly linked list is used.
|
|
35
|
+
*/
|
|
36
|
+
declare class NodeList {
|
|
37
|
+
/**
|
|
38
|
+
* The ID of the list.
|
|
39
|
+
*/
|
|
40
|
+
id: string;
|
|
41
|
+
/**
|
|
42
|
+
* The ref to the list.
|
|
43
|
+
*/
|
|
44
|
+
ref: RefObject<HTMLDivElement>;
|
|
45
|
+
/**
|
|
46
|
+
* The inner ref to the list.
|
|
47
|
+
* Used by the virtual list.
|
|
48
|
+
*/
|
|
49
|
+
innerRef: RefObject<HTMLDivElement>;
|
|
50
|
+
/**
|
|
51
|
+
* Whether the list is horizontal.
|
|
52
|
+
*/
|
|
53
|
+
horizontal: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* The callback that renders the dragged node.
|
|
56
|
+
*/
|
|
57
|
+
renderDraggedNode: RenderDraggedNode;
|
|
58
|
+
/**
|
|
59
|
+
* The head of draggable nodes.
|
|
60
|
+
*/
|
|
61
|
+
private head;
|
|
62
|
+
/**
|
|
63
|
+
* The tail of draggable nodes.
|
|
64
|
+
*/
|
|
65
|
+
private tail;
|
|
66
|
+
/**
|
|
67
|
+
* Listeners of node addition events.
|
|
68
|
+
*/
|
|
69
|
+
private listeners;
|
|
70
|
+
constructor(props: InitProps);
|
|
71
|
+
getHead(): Node;
|
|
72
|
+
getTail(): Node;
|
|
73
|
+
/**
|
|
74
|
+
* Adds the node to the beginning.
|
|
75
|
+
* TL: O(1).
|
|
76
|
+
*/
|
|
77
|
+
private addToTheBeginning;
|
|
78
|
+
/**
|
|
79
|
+
* Adds the node to the end.
|
|
80
|
+
* TL: O(1).
|
|
81
|
+
*/
|
|
82
|
+
private addToTheEnd;
|
|
83
|
+
/**
|
|
84
|
+
* Adds the node after the specified one.
|
|
85
|
+
* TL: O(1).
|
|
86
|
+
*/
|
|
87
|
+
private static addAfter;
|
|
88
|
+
/**
|
|
89
|
+
* Adds a new node depends on its position.
|
|
90
|
+
* Called when a new node is mounted.
|
|
91
|
+
* TL: O(1) – add to the beginning or to the end, O(n) – add to the middle.
|
|
92
|
+
*/
|
|
93
|
+
add(props: NodeProps): ExistingNode;
|
|
94
|
+
/**
|
|
95
|
+
* Removes the existing node.
|
|
96
|
+
* Called when the node is unmounted.
|
|
97
|
+
* TL: O(1).
|
|
98
|
+
*/
|
|
99
|
+
remove(node: ExistingNode): void;
|
|
100
|
+
addListener(callback: (props: NodeProps) => void): void;
|
|
101
|
+
removeListener(callback: (props: NodeProps) => void): void;
|
|
102
|
+
}
|
|
103
|
+
export default NodeList;
|
|
104
|
+
//# sourceMappingURL=NodeList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NodeList.d.ts","sourceRoot":"","sources":["../../src/utils/NodeList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,MAAM,MAAM,IAAI,GACZ,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,GAC5E,IAAI,CAAC;AAET,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAE/C,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,KAAK,EAAE,sBAAsB,KAC1B,KAAK,CAAC,SAAS,CAAC;AAErB,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED;;;GAGG;AACH,cAAM,QAAQ;IACZ;;OAEG;IACI,EAAE,EAAE,MAAM,CAAC;IAElB;;OAEG;IACI,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAEtC;;;OAGG;IACI,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAE3C;;OAEG;IACI,UAAU,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACI,iBAAiB,EAAE,iBAAiB,CAAC;IAE5C;;OAEG;IACH,OAAO,CAAC,IAAI,CAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,IAAI,CAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,SAAS,CAAoC;gBAElC,KAAK,EAAE,SAAS;IAW5B,OAAO;IAIP,OAAO;IAId;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAezB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAenB;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ;IAMvB;;;;OAIG;IACI,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY;IA2C1C;;;;OAIG;IACI,MAAM,CAAC,IAAI,EAAE,YAAY;IAuBzB,WAAW,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI;IAIhD,cAAc,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI;CAI3D;AAED,eAAe,QAAQ,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-explicit-any
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
2
|
|
|
3
3
|
// [prev, next, ref, setStyle, index, id]
|
|
4
4
|
|
|
@@ -176,5 +176,4 @@ class NodeList {
|
|
|
176
176
|
this.listeners.splice(index, 1);
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
|
-
export default NodeList;
|
|
180
|
-
//# sourceMappingURL=NodeList.js.map
|
|
179
|
+
export default NodeList;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getElementOffset.d.ts","sourceRoot":"","sources":["../../src/utils/getElementOffset.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,gBAAgB,YAAa,WAAW;;;CAU7C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getElementScroll.d.ts","sourceRoot":"","sources":["../../src/utils/getElementScroll.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,gBAAgB,YAAa,WAAW;;;CAU7C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getNodeRect.d.ts","sourceRoot":"","sources":["../../src/utils/getNodeRect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;GAEG;AACH,QAAA,MAAM,WAAW,QAAS,SAAS,CAAC,WAAW,CAAC;;;;;QAmB/C,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import getElementOffset from
|
|
2
|
-
import getElementScroll from
|
|
3
|
-
|
|
1
|
+
import getElementOffset from "./getElementOffset.js";
|
|
2
|
+
import getElementScroll from "./getElementScroll.js";
|
|
4
3
|
/**
|
|
5
4
|
* Computes the bounds of the existing node without considering transforms.
|
|
6
5
|
*/
|
|
@@ -31,5 +30,4 @@ const getNodeRect = ref => {
|
|
|
31
30
|
bottom: top + height
|
|
32
31
|
};
|
|
33
32
|
};
|
|
34
|
-
export default getNodeRect;
|
|
35
|
-
//# sourceMappingURL=getNodeRect.js.map
|
|
33
|
+
export default getNodeRect;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type RefObject } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Adds a new class name to the element.
|
|
4
|
+
*/
|
|
5
|
+
declare const useAppendClassName: (ref: RefObject<HTMLElement>, className: string) => void;
|
|
6
|
+
export default useAppendClassName;
|
|
7
|
+
//# sourceMappingURL=useAppendClassName.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAppendClassName.d.ts","sourceRoot":"","sources":["../../src/utils/useAppendClassName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAElD;;GAEG;AACH,QAAA,MAAM,kBAAkB,QAAS,SAAS,CAAC,WAAW,CAAC,aAAa,MAAM,SAYzE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -11,6 +11,10 @@ interface UseBlankNodeProps {
|
|
|
11
11
|
targetList: NodeList | null;
|
|
12
12
|
initDraggedNodeRect: InitSize | null;
|
|
13
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* Appends the blank node to the list to increase the height of it.
|
|
16
|
+
* Used when the dragged node is located inside another list.
|
|
17
|
+
*/
|
|
14
18
|
declare const useBlankNode: (props: UseBlankNodeProps) => () => void;
|
|
15
19
|
export default useBlankNode;
|
|
16
20
|
//# sourceMappingURL=useBlankNode.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBlankNode.d.ts","sourceRoot":"","sources":["../../src/utils/useBlankNode.ts"],"names":[],"mappings":"AACA,OAAO,QAA+B,MAAM,YAAY,CAAC;AAEzD,UAAU,QAAQ;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5B,mBAAmB,EAAE,QAAQ,GAAG,IAAI,CAAC;CACtC;AAOD;;;GAGG;AACH,QAAA,MAAM,YAAY,UAAW,iBAAiB,eA0E7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Position } from '@os-design/use-drag';
|
|
2
|
-
import React, { MouseEvent, TouchEvent } from 'react';
|
|
3
|
-
import NodeList, { ExistingNode } from './NodeList';
|
|
1
|
+
import type { Position } from '@os-design/use-drag';
|
|
2
|
+
import React, { type MouseEvent, type TouchEvent } from 'react';
|
|
3
|
+
import NodeList, { type ExistingNode } from './NodeList';
|
|
4
4
|
export interface SetDraggedNodeProps {
|
|
5
5
|
list: NodeList;
|
|
6
6
|
node: ExistingNode;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDragAndDrop.d.ts","sourceRoot":"","sources":["../../src/utils/useDragAndDrop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAc,MAAM,OAAO,CAAC;AAC5E,OAAO,QAAQ,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;AAE9E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAC1C,YAAY,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAC3C,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,wCAM7B,CAAC;AAEH,QAAA,MAAM,cAAc,QAAO,uBACK,CAAC;AAEjC,eAAe,cAAc,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Position } from '@os-design/use-drag';
|
|
2
|
-
import { RefObject } from 'react';
|
|
1
|
+
import type { Position } from '@os-design/use-drag';
|
|
2
|
+
import { type RefObject } from 'react';
|
|
3
3
|
import ListStore from './ListStore';
|
|
4
|
-
import NodeList, { ExistingNode } from './NodeList';
|
|
4
|
+
import NodeList, { type ExistingNode } from './NodeList';
|
|
5
5
|
export interface DraggedNode {
|
|
6
6
|
list: NodeList;
|
|
7
7
|
node: ExistingNode;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDragEffect.d.ts","sourceRoot":"","sources":["../../src/utils/useDragEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,QAAQ,EAAE,EACf,KAAK,YAAY,EAGlB,MAAM,YAAY,CAAC;AAUpB,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAOD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,cAAc,GAAG,CAC3B,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,YAAY,KACjB,IAAI,CAAC;AAEV,UAAU,kBAAkB;IAC1B,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,QAAQ,CAAC;IACzB,YAAY,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,SAAS,EAAE,cAAc,CAAC;CAC3B;AAeD,QAAA,MAAM,aAAa,UAAW,kBAAkB,SAoa/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import useEvent from '@os-design/use-event';
|
|
2
2
|
import useThrottle from '@os-design/use-throttle';
|
|
3
3
|
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
4
|
-
import getElementScroll from
|
|
5
|
-
import getNodeRect from
|
|
6
|
-
import useBlankNode from
|
|
7
|
-
import useGetNodeStyle from
|
|
8
|
-
import useInitRect from
|
|
9
|
-
import useInitScrollOffset from
|
|
10
|
-
import useMoveNode from
|
|
11
|
-
import useTargetList from
|
|
4
|
+
import getElementScroll from "./getElementScroll.js";
|
|
5
|
+
import getNodeRect from "./getNodeRect.js";
|
|
6
|
+
import useBlankNode from "./useBlankNode.js";
|
|
7
|
+
import useGetNodeStyle from "./useGetNodeStyle.js";
|
|
8
|
+
import useInitRect from "./useInitRect.js";
|
|
9
|
+
import useInitScrollOffset from "./useInitScrollOffset.js";
|
|
10
|
+
import useMoveNode from "./useMoveNode.js";
|
|
11
|
+
import useTargetList from "./useTargetList.js";
|
|
12
12
|
const HIDDEN_NODE_STYLE = {
|
|
13
13
|
opacity: 0,
|
|
14
14
|
pointerEvents: 'none'
|
|
@@ -19,9 +19,6 @@ const createEmptyNode = ({
|
|
|
19
19
|
}) => [prev, next, {
|
|
20
20
|
current: null
|
|
21
21
|
}, () => {}, -1, 'id'];
|
|
22
|
-
|
|
23
|
-
/* eslint-disable no-constant-condition */
|
|
24
|
-
|
|
25
22
|
const useDragEffect = props => {
|
|
26
23
|
const {
|
|
27
24
|
draggedNode,
|
|
@@ -416,7 +413,6 @@ const useDragEffect = props => {
|
|
|
416
413
|
useEffect(() => {
|
|
417
414
|
if (!draggedNode) return () => {};
|
|
418
415
|
return () => {
|
|
419
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
420
416
|
const target = targetRef.current;
|
|
421
417
|
if (!target) return;
|
|
422
418
|
const [,,,, draggedNodeIndex, draggedNodeId] = draggedNode.node;
|
|
@@ -430,5 +426,4 @@ const useDragEffect = props => {
|
|
|
430
426
|
};
|
|
431
427
|
}, [draggedNode]);
|
|
432
428
|
};
|
|
433
|
-
export default useDragEffect;
|
|
434
|
-
//# sourceMappingURL=useDragEffect.js.map
|
|
429
|
+
export default useDragEffect;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { MouseEvent, TouchEvent } from 'react';
|
|
2
|
-
import { ExistingNode, NodeProps } from './NodeList';
|
|
1
|
+
import React, { type MouseEvent, type TouchEvent } from 'react';
|
|
2
|
+
import type { ExistingNode, NodeProps } from './NodeList';
|
|
3
3
|
interface DroppableContextProps {
|
|
4
4
|
registerNode: (props: NodeProps) => ExistingNode;
|
|
5
5
|
deregisterNode: (node: ExistingNode) => void;
|