@os-design/drag-sort 1.0.29 → 1.0.31
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} +20 -18
- package/dist/Draggable.d.ts +42 -0
- package/dist/Draggable.d.ts.map +1 -0
- package/dist/{esm/Draggable.js → Draggable.js} +9 -7
- package/dist/Droppable.d.ts +38 -0
- package/dist/Droppable.d.ts.map +1 -0
- package/dist/{esm/Droppable.js → Droppable.js} +9 -8
- package/dist/index.d.ts.map +1 -0
- package/dist/{esm/index.js → index.js} +1 -2
- 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 +1 -2
- 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 +1 -6
- 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 +1 -2
- 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 +1 -4
- 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 +1 -2
- 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.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 @@
|
|
|
1
|
+
{"version":3,"file":"useInitRect.d.ts","sourceRoot":"","sources":["../../src/utils/useInitRect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAEhD,QAAA,MAAM,WAAW,SAAU,SAAS,CAAC,WAAW,CAAC;;;;;QAYtC,CAAC;AAEZ,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useInitScrollOffset.d.ts","sourceRoot":"","sources":["../../src/utils/useInitScrollOffset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAGhD,QAAA,MAAM,mBAAmB,SAAU,SAAS,CAAC,WAAW,CAAC;;;QAU9C,CAAC;AAEZ,eAAe,mBAAmB,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import { NodeStyleGetter } from './useGetNodeStyle';
|
|
1
|
+
import { type Position } from '@os-design/use-drag';
|
|
2
|
+
import NodeList, { type ExistingNode } from './NodeList';
|
|
3
|
+
import type { NodeStyleGetter } from './useGetNodeStyle';
|
|
5
4
|
interface DraggedNode {
|
|
6
5
|
node: ExistingNode;
|
|
7
6
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMoveNode.d.ts","sourceRoot":"","sources":["../../src/utils/useMoveNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,QAAQ,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,UAAU,WAAW;IACnB,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,YAAY,EAAE,eAAe,CAAC;CAC/B;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,YAAY,CAAC;IACxB,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,WAAW,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,WAAW,UAAW,gBAAgB,eAI9B,SAAS,2JAgEtB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { useCallback } from 'react';
|
|
2
2
|
import getNodeRect from './getNodeRect';
|
|
3
|
-
/* eslint-disable no-constant-condition */
|
|
4
|
-
|
|
5
3
|
const useMoveNode = props => {
|
|
6
4
|
const {
|
|
7
5
|
position,
|
|
@@ -61,5 +59,4 @@ const useMoveNode = props => {
|
|
|
61
59
|
}
|
|
62
60
|
}, [draggedNode, getNodeStyle, position]);
|
|
63
61
|
};
|
|
64
|
-
export default useMoveNode;
|
|
65
|
-
//# sourceMappingURL=useMoveNode.js.map
|
|
62
|
+
export default useMoveNode;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface Point {
|
|
2
|
+
x: number;
|
|
3
|
+
y: number;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Sets the listener that will be called whenever the scroll event occurs
|
|
7
|
+
* in one of the elements located under the specified point.
|
|
8
|
+
*/
|
|
9
|
+
declare const useScrollEventByPoint: (point: Point | null, listener: (e: Event) => void) => void;
|
|
10
|
+
export default useScrollEventByPoint;
|
|
11
|
+
//# sourceMappingURL=useScrollEventByPoint.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollEventByPoint.d.ts","sourceRoot":"","sources":["../../src/utils/useScrollEventByPoint.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;;GAGG;AACH,QAAA,MAAM,qBAAqB,UAClB,KAAK,GAAG,IAAI,YACT,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,SA2B7B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
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
4
|
declare const useTargetList: (position: Position | null, listStoreRef: RefObject<ListStore>) => import("./NodeList").default | null;
|
|
5
5
|
export default useTargetList;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTargetList.d.ts","sourceRoot":"","sources":["../../src/utils/useTargetList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAC;AACvE,OAAO,SAAS,MAAM,aAAa,CAAC;AAGpC,QAAA,MAAM,aAAa,aACP,QAAQ,GAAG,IAAI,gBACX,SAAS,CAAC,SAAS,CAAC,wCAoBnC,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -3,6 +3,9 @@ interface UseTransitionStyleProps {
|
|
|
3
3
|
ms: number;
|
|
4
4
|
enabled: boolean;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* Creates the global style for setting the transition delay.
|
|
8
|
+
*/
|
|
6
9
|
declare const useTransitionStyle: (props: UseTransitionStyleProps) => void;
|
|
7
10
|
export default useTransitionStyle;
|
|
8
11
|
//# sourceMappingURL=useTransitionStyle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTransitionStyle.d.ts","sourceRoot":"","sources":["../../src/utils/useTransitionStyle.ts"],"names":[],"mappings":"AAEA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,QAAA,MAAM,kBAAkB,UAAW,uBAAuB,SAYzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/drag-sort",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.31",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"types": "dist/
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"src",
|
|
@@ -20,9 +20,8 @@
|
|
|
20
20
|
"sideEffects": false,
|
|
21
21
|
"scripts": {
|
|
22
22
|
"clean": "rimraf dist",
|
|
23
|
-
"build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist
|
|
24
|
-
"build:
|
|
25
|
-
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
|
|
23
|
+
"build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist",
|
|
24
|
+
"build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --declarationDir dist",
|
|
26
25
|
"build": "yarn clean && npm-run-all 'build:*'",
|
|
27
26
|
"ncu": "ncu -u"
|
|
28
27
|
},
|
|
@@ -30,22 +29,22 @@
|
|
|
30
29
|
"access": "public"
|
|
31
30
|
},
|
|
32
31
|
"dependencies": {
|
|
33
|
-
"@os-design/portal": "^1.0.
|
|
34
|
-
"@os-design/use-auto-scroll": "^1.0.
|
|
35
|
-
"@os-design/use-drag": "^1.0.
|
|
36
|
-
"@os-design/use-event": "^1.0.
|
|
37
|
-
"@os-design/use-memo-object": "^1.0.
|
|
38
|
-
"@os-design/use-prevent-default-event": "^1.0.
|
|
39
|
-
"@os-design/use-throttle": "^1.0.
|
|
32
|
+
"@os-design/portal": "^1.0.18",
|
|
33
|
+
"@os-design/use-auto-scroll": "^1.0.22",
|
|
34
|
+
"@os-design/use-drag": "^1.0.20",
|
|
35
|
+
"@os-design/use-event": "^1.0.23",
|
|
36
|
+
"@os-design/use-memo-object": "^1.0.18",
|
|
37
|
+
"@os-design/use-prevent-default-event": "^1.0.20",
|
|
38
|
+
"@os-design/use-throttle": "^1.0.22"
|
|
40
39
|
},
|
|
41
40
|
"devDependencies": {
|
|
42
|
-
"@os-design/omit-emotion-props": "^1.0.
|
|
43
|
-
"@os-design/use-size": "^1.0.
|
|
41
|
+
"@os-design/omit-emotion-props": "^1.0.20",
|
|
42
|
+
"@os-design/use-size": "^1.0.24",
|
|
44
43
|
"react-window": "^1.8.10"
|
|
45
44
|
},
|
|
46
45
|
"peerDependencies": {
|
|
47
46
|
"react": ">=18",
|
|
48
47
|
"react-dom": ">=18"
|
|
49
48
|
},
|
|
50
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "86a83e87297a07afe132782ca2c95023b7139276"
|
|
51
50
|
}
|
package/src/DragAndDrop.tsx
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import Portal, { PortalProps } from '@os-design/portal';
|
|
1
|
+
import Portal, { type PortalProps } from '@os-design/portal';
|
|
2
2
|
import useAutoScroll from '@os-design/use-auto-scroll';
|
|
3
3
|
import useDrag, {
|
|
4
|
-
OnDragEnd,
|
|
5
|
-
OnDragMove,
|
|
6
|
-
OnDragStart,
|
|
7
|
-
Position,
|
|
4
|
+
type OnDragEnd,
|
|
5
|
+
type OnDragMove,
|
|
6
|
+
type OnDragStart,
|
|
7
|
+
type Position,
|
|
8
8
|
} from '@os-design/use-drag';
|
|
9
9
|
import useMemoObject from '@os-design/use-memo-object';
|
|
10
10
|
import usePreventDefaultEvent from '@os-design/use-prevent-default-event';
|
|
11
11
|
import React, {
|
|
12
|
-
MouseEvent,
|
|
13
|
-
TouchEvent,
|
|
12
|
+
type MouseEvent,
|
|
13
|
+
type TouchEvent,
|
|
14
14
|
useCallback,
|
|
15
15
|
useMemo,
|
|
16
16
|
useRef,
|
|
17
17
|
useState,
|
|
18
18
|
} from 'react';
|
|
19
19
|
import ListStore from './utils/ListStore';
|
|
20
|
-
import NodeList, { ExistingNode } from './utils/NodeList';
|
|
20
|
+
import NodeList, { type ExistingNode } from './utils/NodeList';
|
|
21
21
|
import { DragAndDropContext } from './utils/useDragAndDrop';
|
|
22
22
|
import useDragEffect, {
|
|
23
|
-
DragEndHandler,
|
|
24
|
-
DraggedNode,
|
|
23
|
+
type DragEndHandler,
|
|
24
|
+
type DraggedNode,
|
|
25
25
|
} from './utils/useDragEffect';
|
|
26
26
|
import useGeneratedId from './utils/useGeneratedId';
|
|
27
27
|
import useInitRect from './utils/useInitRect';
|
package/src/Draggable.tsx
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import useMemoObject from '@os-design/use-memo-object';
|
|
2
2
|
import React, {
|
|
3
|
-
CSSProperties,
|
|
4
|
-
MouseEvent,
|
|
5
|
-
RefObject,
|
|
6
|
-
TouchEvent,
|
|
3
|
+
type CSSProperties,
|
|
4
|
+
type MouseEvent,
|
|
5
|
+
type RefObject,
|
|
6
|
+
type TouchEvent,
|
|
7
7
|
useCallback,
|
|
8
8
|
useEffect,
|
|
9
9
|
useRef,
|
|
10
10
|
useState,
|
|
11
11
|
} from 'react';
|
|
12
|
-
import { Node } from './utils/NodeList';
|
|
12
|
+
import type { Node } from './utils/NodeList';
|
|
13
13
|
import useAppendClassName from './utils/useAppendClassName';
|
|
14
14
|
import useDragAndDrop from './utils/useDragAndDrop';
|
|
15
15
|
import useDroppable from './utils/useDroppable';
|
package/src/Droppable.tsx
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import useMemoObject from '@os-design/use-memo-object';
|
|
2
2
|
import React, {
|
|
3
|
-
MouseEvent,
|
|
4
|
-
RefObject,
|
|
5
|
-
TouchEvent,
|
|
3
|
+
type MouseEvent,
|
|
4
|
+
type RefObject,
|
|
5
|
+
type TouchEvent,
|
|
6
6
|
useCallback,
|
|
7
7
|
useEffect,
|
|
8
8
|
useMemo,
|
|
9
9
|
useRef,
|
|
10
10
|
} from 'react';
|
|
11
11
|
import NodeList, {
|
|
12
|
-
ExistingNode,
|
|
13
|
-
NodeProps,
|
|
14
|
-
RenderDraggedNode,
|
|
12
|
+
type ExistingNode,
|
|
13
|
+
type NodeProps,
|
|
14
|
+
type RenderDraggedNode,
|
|
15
15
|
} from './utils/NodeList';
|
|
16
16
|
import useDragAndDrop from './utils/useDragAndDrop';
|
|
17
17
|
import { DroppableContext } from './utils/useDroppable';
|
package/src/utils/NodeList.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React, { CSSProperties, RefObject } from 'react';
|
|
1
|
+
import React, { type CSSProperties, type RefObject } from 'react';
|
|
2
2
|
|
|
3
|
-
/* eslint-disable @typescript-eslint/no-explicit-any
|
|
3
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
4
4
|
|
|
5
5
|
// [prev, next, ref, setStyle, index, id]
|
|
6
6
|
export type Node =
|
package/src/utils/getNodeRect.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Position } from '@os-design/use-drag';
|
|
2
|
-
import React, { MouseEvent, TouchEvent, useContext } from 'react';
|
|
3
|
-
import NodeList, { ExistingNode } from './NodeList';
|
|
1
|
+
import type { Position } from '@os-design/use-drag';
|
|
2
|
+
import React, { type MouseEvent, type TouchEvent, useContext } from 'react';
|
|
3
|
+
import NodeList, { type ExistingNode } from './NodeList';
|
|
4
4
|
|
|
5
5
|
export interface SetDraggedNodeProps {
|
|
6
6
|
list: NodeList;
|
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
import { Position } from '@os-design/use-drag';
|
|
1
|
+
import type { Position } from '@os-design/use-drag';
|
|
2
2
|
import useEvent from '@os-design/use-event';
|
|
3
3
|
import useThrottle from '@os-design/use-throttle';
|
|
4
4
|
import {
|
|
5
|
-
CSSProperties,
|
|
6
|
-
RefObject,
|
|
5
|
+
type CSSProperties,
|
|
6
|
+
type RefObject,
|
|
7
7
|
useCallback,
|
|
8
8
|
useEffect,
|
|
9
9
|
useMemo,
|
|
10
10
|
useRef,
|
|
11
11
|
} from 'react';
|
|
12
12
|
import ListStore from './ListStore';
|
|
13
|
-
import NodeList, {
|
|
13
|
+
import NodeList, {
|
|
14
|
+
type ExistingNode,
|
|
15
|
+
type Node,
|
|
16
|
+
type NodeProps,
|
|
17
|
+
} from './NodeList';
|
|
14
18
|
import getElementScroll from './getElementScroll';
|
|
15
19
|
import getNodeRect from './getNodeRect';
|
|
16
20
|
import useBlankNode from './useBlankNode';
|
|
@@ -62,8 +66,6 @@ const createEmptyNode = ({
|
|
|
62
66
|
next?: Node;
|
|
63
67
|
}): ExistingNode => [prev, next, { current: null }, () => {}, -1, 'id'];
|
|
64
68
|
|
|
65
|
-
/* eslint-disable no-constant-condition */
|
|
66
|
-
|
|
67
69
|
const useDragEffect = (props: UseDragEffectProps) => {
|
|
68
70
|
const { draggedNode, cursorPosition, listStoreRef, onDragEnd } = props;
|
|
69
71
|
|
|
@@ -472,7 +474,6 @@ const useDragEffect = (props: UseDragEffectProps) => {
|
|
|
472
474
|
useEffect(() => {
|
|
473
475
|
if (!draggedNode) return () => {};
|
|
474
476
|
return () => {
|
|
475
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
476
477
|
const target = targetRef.current;
|
|
477
478
|
if (!target) return;
|
|
478
479
|
const [, , , , draggedNodeIndex, draggedNodeId] = draggedNode.node;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { MouseEvent, TouchEvent, useContext } from 'react';
|
|
2
|
-
import { ExistingNode, NodeProps } from './NodeList';
|
|
1
|
+
import React, { type MouseEvent, type TouchEvent, useContext } from 'react';
|
|
2
|
+
import type { ExistingNode, NodeProps } from './NodeList';
|
|
3
3
|
|
|
4
4
|
interface DroppableContextProps {
|
|
5
5
|
registerNode: (props: NodeProps) => ExistingNode;
|
package/src/utils/useInitRect.ts
CHANGED
package/src/utils/useMoveNode.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Position } from '@os-design/use-drag';
|
|
1
|
+
import { type Position } from '@os-design/use-drag';
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
|
-
import NodeList, { ExistingNode } from './NodeList';
|
|
3
|
+
import NodeList, { type ExistingNode } from './NodeList';
|
|
4
4
|
import getNodeRect from './getNodeRect';
|
|
5
|
-
import { NodeStyleGetter } from './useGetNodeStyle';
|
|
5
|
+
import type { NodeStyleGetter } from './useGetNodeStyle';
|
|
6
6
|
|
|
7
7
|
interface DraggedNode {
|
|
8
8
|
node: ExistingNode;
|
|
@@ -22,8 +22,6 @@ interface MoveProps {
|
|
|
22
22
|
isAnotherList?: boolean;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
/* eslint-disable no-constant-condition */
|
|
26
|
-
|
|
27
25
|
const useMoveNode = (props: UseMoveNodeProps) => {
|
|
28
26
|
const { position, draggedNode, getNodeStyle } = props;
|
|
29
27
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Position } from '@os-design/use-drag';
|
|
1
|
+
import type { Position } from '@os-design/use-drag';
|
|
2
2
|
import useThrottle from '@os-design/use-throttle';
|
|
3
|
-
import { RefObject, useCallback, useMemo, useState } from 'react';
|
|
3
|
+
import { type RefObject, useCallback, useMemo, useState } from 'react';
|
|
4
4
|
import ListStore from './ListStore';
|
|
5
5
|
import useScrollEventByPoint from './useScrollEventByPoint';
|
|
6
6
|
|
package/dist/cjs/DragAndDrop.js
DELETED
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _portal = _interopRequireDefault(require("@os-design/portal"));
|
|
9
|
-
var _useAutoScroll = _interopRequireDefault(require("@os-design/use-auto-scroll"));
|
|
10
|
-
var _useDrag2 = _interopRequireDefault(require("@os-design/use-drag"));
|
|
11
|
-
var _useMemoObject = _interopRequireDefault(require("@os-design/use-memo-object"));
|
|
12
|
-
var _usePreventDefaultEvent = _interopRequireDefault(require("@os-design/use-prevent-default-event"));
|
|
13
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
14
|
-
var _ListStore = _interopRequireDefault(require("./utils/ListStore"));
|
|
15
|
-
var _useDragAndDrop = require("./utils/useDragAndDrop");
|
|
16
|
-
var _useDragEffect = _interopRequireDefault(require("./utils/useDragEffect"));
|
|
17
|
-
var _useGeneratedId = _interopRequireDefault(require("./utils/useGeneratedId"));
|
|
18
|
-
var _useInitRect = _interopRequireDefault(require("./utils/useInitRect"));
|
|
19
|
-
var _useTransitionStyle = _interopRequireDefault(require("./utils/useTransitionStyle"));
|
|
20
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
21
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
22
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
24
|
-
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."); }
|
|
25
|
-
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); }
|
|
26
|
-
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; }
|
|
27
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
28
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
29
|
-
/**
|
|
30
|
-
* The container containing one or more lists with draggable nodes.
|
|
31
|
-
*/
|
|
32
|
-
var DragAndDrop = function DragAndDrop(_ref) {
|
|
33
|
-
var draggedNodeContainer = _ref.draggedNodeContainer,
|
|
34
|
-
_ref$minMouseDistPx = _ref.minMouseDistPx,
|
|
35
|
-
minMouseDistPx = _ref$minMouseDistPx === void 0 ? 10 : _ref$minMouseDistPx,
|
|
36
|
-
_ref$longPressMs = _ref.longPressMs,
|
|
37
|
-
longPressMs = _ref$longPressMs === void 0 ? 500 : _ref$longPressMs,
|
|
38
|
-
_ref$autoScrollDistPe = _ref.autoScrollDistPercent,
|
|
39
|
-
autoScrollDistPercent = _ref$autoScrollDistPe === void 0 ? 20 : _ref$autoScrollDistPe,
|
|
40
|
-
_ref$autoScrollMaxSpe = _ref.autoScrollMaxSpeedPx,
|
|
41
|
-
autoScrollMaxSpeedPx = _ref$autoScrollMaxSpe === void 0 ? 100 : _ref$autoScrollMaxSpe,
|
|
42
|
-
_ref$transitionDelayM = _ref.transitionDelayMs,
|
|
43
|
-
transitionDelayMs = _ref$transitionDelayM === void 0 ? 250 : _ref$transitionDelayM,
|
|
44
|
-
_ref$onDragEnd = _ref.onDragEnd,
|
|
45
|
-
onDragEnd = _ref$onDragEnd === void 0 ? function () {} : _ref$onDragEnd,
|
|
46
|
-
children = _ref.children;
|
|
47
|
-
// The user can drag a node between the lists (the Droppable components).
|
|
48
|
-
// To determine which list a node should be dropped in, we need to store refs to all the lists.
|
|
49
|
-
var listStoreRef = (0, _react.useRef)(new _ListStore["default"]());
|
|
50
|
-
|
|
51
|
-
// The class name for a node used to set the transition style
|
|
52
|
-
var generatedId = (0, _useGeneratedId["default"])();
|
|
53
|
-
var nodeClassName = (0, _react.useMemo)(function () {
|
|
54
|
-
return "n".concat(generatedId);
|
|
55
|
-
}, [generatedId]);
|
|
56
|
-
|
|
57
|
-
// The node that is currently being dragged
|
|
58
|
-
var _useState = (0, _react.useState)(null),
|
|
59
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
60
|
-
draggedNode = _useState2[0],
|
|
61
|
-
setDraggedNode = _useState2[1];
|
|
62
|
-
var startNodeRef = (0, _react.useRef)(null);
|
|
63
|
-
var _useState3 = (0, _react.useState)({
|
|
64
|
-
x: 0,
|
|
65
|
-
y: 0
|
|
66
|
-
}),
|
|
67
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
68
|
-
cursorPosition = _useState4[0],
|
|
69
|
-
setCursorPosition = _useState4[1];
|
|
70
|
-
|
|
71
|
-
// Add a new list to the store
|
|
72
|
-
var registerList = (0, _react.useCallback)(function (list) {
|
|
73
|
-
listStoreRef.current.add(list);
|
|
74
|
-
}, []);
|
|
75
|
-
|
|
76
|
-
// Remove the existing list from the store
|
|
77
|
-
var deregisterList = (0, _react.useCallback)(function (id) {
|
|
78
|
-
listStoreRef.current.remove(id);
|
|
79
|
-
}, []);
|
|
80
|
-
|
|
81
|
-
// Set the style to delay transitions when the node is dragging
|
|
82
|
-
(0, _useTransitionStyle["default"])({
|
|
83
|
-
className: nodeClassName,
|
|
84
|
-
ms: transitionDelayMs,
|
|
85
|
-
enabled: !!draggedNode
|
|
86
|
-
});
|
|
87
|
-
var onDragStart = (0, _react.useCallback)(function (pos, startPos) {
|
|
88
|
-
var startNode = startNodeRef.current;
|
|
89
|
-
if (!startNode) return;
|
|
90
|
-
var _startNode$node = _slicedToArray(startNode.node, 3),
|
|
91
|
-
nodeRef = _startNode$node[2];
|
|
92
|
-
if (!nodeRef.current) return;
|
|
93
|
-
var rect = nodeRef.current.getBoundingClientRect();
|
|
94
|
-
setCursorPosition(pos);
|
|
95
|
-
setDraggedNode({
|
|
96
|
-
list: startNode.list,
|
|
97
|
-
node: startNode.node,
|
|
98
|
-
position: {
|
|
99
|
-
x: startPos.x - rect.x,
|
|
100
|
-
y: startPos.y - rect.y
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
startNodeRef.current = null;
|
|
104
|
-
}, []);
|
|
105
|
-
var onDragMove = (0, _react.useCallback)(function (pos) {
|
|
106
|
-
setCursorPosition(pos);
|
|
107
|
-
}, []);
|
|
108
|
-
var dragEndHandler = (0, _react.useCallback)(function () {
|
|
109
|
-
setDraggedNode(null);
|
|
110
|
-
}, []);
|
|
111
|
-
var _useDrag = (0, _useDrag2["default"])({
|
|
112
|
-
onDragStart: onDragStart,
|
|
113
|
-
onDragMove: onDragMove,
|
|
114
|
-
onDragEnd: dragEndHandler,
|
|
115
|
-
minMouseDistPx: minMouseDistPx,
|
|
116
|
-
longPressMs: longPressMs
|
|
117
|
-
}),
|
|
118
|
-
onMouseDown = _useDrag.onMouseDown,
|
|
119
|
-
onTouchStart = _useDrag.onTouchStart;
|
|
120
|
-
|
|
121
|
-
// Handlers that determine whether a user clicks on the node
|
|
122
|
-
var mouseDownHandler = (0, _react.useCallback)(function (e, list, node) {
|
|
123
|
-
startNodeRef.current = {
|
|
124
|
-
list: list,
|
|
125
|
-
node: node
|
|
126
|
-
};
|
|
127
|
-
onMouseDown(e);
|
|
128
|
-
}, [onMouseDown]);
|
|
129
|
-
var touchStartHandler = (0, _react.useCallback)(function (e, list, node) {
|
|
130
|
-
startNodeRef.current = {
|
|
131
|
-
list: list,
|
|
132
|
-
node: node
|
|
133
|
-
};
|
|
134
|
-
onTouchStart(e);
|
|
135
|
-
}, [onTouchStart]);
|
|
136
|
-
|
|
137
|
-
// Prevent body scrolling when the node is dragging.
|
|
138
|
-
// It's important to attach the event to the body (not to the document). Otherwise, it won't work in mobile chrome.
|
|
139
|
-
(0, _usePreventDefaultEvent["default"])(document.body, 'touchmove', !!draggedNode);
|
|
140
|
-
|
|
141
|
-
// Implement the drag animation
|
|
142
|
-
(0, _useDragEffect["default"])({
|
|
143
|
-
draggedNode: draggedNode,
|
|
144
|
-
cursorPosition: cursorPosition,
|
|
145
|
-
listStoreRef: listStoreRef,
|
|
146
|
-
onDragEnd: onDragEnd
|
|
147
|
-
});
|
|
148
|
-
|
|
149
|
-
// Auto scroll if the cursor position is located near the border
|
|
150
|
-
(0, _useAutoScroll["default"])({
|
|
151
|
-
enabled: !!draggedNode,
|
|
152
|
-
distPercent: autoScrollDistPercent,
|
|
153
|
-
maxSpeedPx: autoScrollMaxSpeedPx
|
|
154
|
-
});
|
|
155
|
-
var initRect = (0, _useInitRect["default"])(draggedNode ? draggedNode.node[2] : undefined);
|
|
156
|
-
var dragAndDropContext = (0, _useMemoObject["default"])({
|
|
157
|
-
registerList: registerList,
|
|
158
|
-
deregisterList: deregisterList,
|
|
159
|
-
onMouseDown: mouseDownHandler,
|
|
160
|
-
onTouchStart: touchStartHandler,
|
|
161
|
-
nodeClassName: nodeClassName
|
|
162
|
-
});
|
|
163
|
-
return /*#__PURE__*/_react["default"].createElement(_useDragAndDrop.DragAndDropContext.Provider, {
|
|
164
|
-
value: dragAndDropContext
|
|
165
|
-
}, children, draggedNode && /*#__PURE__*/_react["default"].createElement(_portal["default"], {
|
|
166
|
-
container: draggedNodeContainer
|
|
167
|
-
}, draggedNode.list.renderDraggedNode({
|
|
168
|
-
index: draggedNode.node[4],
|
|
169
|
-
id: draggedNode.node[5],
|
|
170
|
-
style: {
|
|
171
|
-
position: 'fixed',
|
|
172
|
-
left: cursorPosition.x - draggedNode.position.x,
|
|
173
|
-
top: cursorPosition.y - draggedNode.position.y,
|
|
174
|
-
width: initRect ? initRect.initWidth : undefined,
|
|
175
|
-
height: initRect ? initRect.initHeight : undefined,
|
|
176
|
-
zIndex: 1001
|
|
177
|
-
}
|
|
178
|
-
})));
|
|
179
|
-
};
|
|
180
|
-
var _default = exports["default"] = DragAndDrop;
|
|
181
|
-
//# sourceMappingURL=DragAndDrop.js.map
|