react-arborist 3.1.0 → 3.3.0-rc.1
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/dnd/drop-hook.d.ts +1 -1
- package/dist/index.js +68 -32
- package/dist/index.js.map +1 -1
- package/dist/interfaces/node-api.d.ts +1 -0
- package/dist/interfaces/tree-api.d.ts +8 -0
- package/dist/module.js +68 -32
- package/dist/module.js.map +1 -1
- package/dist/state/dnd-slice.d.ts +3 -3
- package/dist/state/drag-slice.d.ts +3 -1
- package/dist/state/selection-slice.d.ts +8 -2
- package/dist/utils.d.ts +2 -2
- package/package.json +1 -1
- package/src/components/provider.tsx +0 -1
- package/src/dnd/compute-drop.ts +6 -3
- package/src/dnd/drag-hook.ts +1 -1
- package/src/dnd/drop-hook.ts +1 -1
- package/src/interfaces/node-api.ts +10 -0
- package/src/interfaces/tree-api.ts +34 -9
- package/src/state/dnd-slice.ts +2 -2
- package/src/state/drag-slice.ts +27 -11
- package/src/state/initial.ts +6 -1
- package/src/state/selection-slice.ts +12 -3
- package/src/types/tree-props.ts +2 -2
- package/src/utils.ts +2 -2
package/dist/dnd/drop-hook.d.ts
CHANGED
|
@@ -3,6 +3,6 @@ import { ConnectDropTarget } from "react-dnd";
|
|
|
3
3
|
import { NodeApi } from "../interfaces/node-api";
|
|
4
4
|
export declare type DropResult = {
|
|
5
5
|
parentId: string | null;
|
|
6
|
-
index: number;
|
|
6
|
+
index: number | null;
|
|
7
7
|
};
|
|
8
8
|
export declare function useDropHook(el: RefObject<HTMLElement | null>, node: NodeApi<any>): ConnectDropTarget;
|
package/dist/index.js
CHANGED
|
@@ -68,7 +68,7 @@ var $eb5355379510ac9b$exports = {};
|
|
|
68
68
|
$parcel$export($eb5355379510ac9b$exports, "bound", () => $eb5355379510ac9b$export$adf7c0fe6059d774);
|
|
69
69
|
$parcel$export($eb5355379510ac9b$exports, "isItem", () => $eb5355379510ac9b$export$5318634f2ee07019);
|
|
70
70
|
$parcel$export($eb5355379510ac9b$exports, "isClosed", () => $eb5355379510ac9b$export$4210f5ea57fbae57);
|
|
71
|
-
$parcel$export($eb5355379510ac9b$exports, "
|
|
71
|
+
$parcel$export($eb5355379510ac9b$exports, "isDescendant", () => $eb5355379510ac9b$export$8503f9d2928f9a64);
|
|
72
72
|
$parcel$export($eb5355379510ac9b$exports, "indexOf", () => $eb5355379510ac9b$export$305f7d4e9d4624f2);
|
|
73
73
|
$parcel$export($eb5355379510ac9b$exports, "noop", () => $eb5355379510ac9b$export$8793edee2d425525);
|
|
74
74
|
$parcel$export($eb5355379510ac9b$exports, "dfs", () => $eb5355379510ac9b$export$51b654aff22fc5a6);
|
|
@@ -92,7 +92,7 @@ function $eb5355379510ac9b$export$5318634f2ee07019(node) {
|
|
|
92
92
|
function $eb5355379510ac9b$export$4210f5ea57fbae57(node) {
|
|
93
93
|
return node && node.isInternal && !node.isOpen;
|
|
94
94
|
}
|
|
95
|
-
const $eb5355379510ac9b$export$
|
|
95
|
+
const $eb5355379510ac9b$export$8503f9d2928f9a64 = (a, b)=>{
|
|
96
96
|
let n = a;
|
|
97
97
|
while(n){
|
|
98
98
|
if (n.id === b.id) return true;
|
|
@@ -449,6 +449,15 @@ class $9b37fe5960a1a3c6$export$d4b903da0f522dc8 {
|
|
|
449
449
|
const i = this.childIndex;
|
|
450
450
|
return this.parent?.children[i + 1] ?? null;
|
|
451
451
|
}
|
|
452
|
+
isAncestorOf(node) {
|
|
453
|
+
if (!node) return false;
|
|
454
|
+
let ancestor = node;
|
|
455
|
+
while(ancestor){
|
|
456
|
+
if (ancestor.id === this.id) return true;
|
|
457
|
+
ancestor = ancestor.parent;
|
|
458
|
+
}
|
|
459
|
+
return false;
|
|
460
|
+
}
|
|
452
461
|
select() {
|
|
453
462
|
this.tree.select(this);
|
|
454
463
|
}
|
|
@@ -623,7 +632,9 @@ const $9d556ecd8e421ffe$export$d4c72bab9d6cc13a = (props)=>({
|
|
|
623
632
|
},
|
|
624
633
|
drag: {
|
|
625
634
|
id: null,
|
|
626
|
-
|
|
635
|
+
selectedIds: [],
|
|
636
|
+
destinationParentId: null,
|
|
637
|
+
destinationIndex: null
|
|
627
638
|
},
|
|
628
639
|
selection: {
|
|
629
640
|
ids: new Set(),
|
|
@@ -663,9 +674,9 @@ const $58f9381615aa3d17$export$e324594224ef24da = {
|
|
|
663
674
|
id
|
|
664
675
|
]).map((0, $eb5355379510ac9b$export$65e5b62a4c490288))
|
|
665
676
|
}),
|
|
666
|
-
set: (
|
|
677
|
+
set: (args)=>({
|
|
667
678
|
type: "SELECTION_SET",
|
|
668
|
-
|
|
679
|
+
...args
|
|
669
680
|
}),
|
|
670
681
|
mostRecent: (id)=>({
|
|
671
682
|
type: "SELECTION_MOST_RECENT",
|
|
@@ -708,7 +719,9 @@ function $58f9381615aa3d17$export$1650419e431d3ba3(state = (0, $9d556ecd8e421ffe
|
|
|
708
719
|
case "SELECTION_SET":
|
|
709
720
|
return {
|
|
710
721
|
...state,
|
|
711
|
-
ids:
|
|
722
|
+
ids: action.ids,
|
|
723
|
+
mostRecent: action.mostRecent,
|
|
724
|
+
anchor: action.anchor
|
|
712
725
|
};
|
|
713
726
|
case "SELECTION_MOST_RECENT":
|
|
714
727
|
return {
|
|
@@ -980,7 +993,7 @@ function $74bee24dbb0f3e2b$export$715c0d031ede7907(node) {
|
|
|
980
993
|
(0, $eb5355379510ac9b$export$c6d63370cef03886)(tree.props.onMove, {
|
|
981
994
|
dragIds: dragIds,
|
|
982
995
|
parentId: parentId === (0, $0d7f39915c1a8ae9$export$ec71a3379b43ae5c) ? null : parentId,
|
|
983
|
-
index: index,
|
|
996
|
+
index: index === null ? 0 : index,
|
|
984
997
|
dragNodes: tree.dragNodes,
|
|
985
998
|
parentNode: tree.get(parentId)
|
|
986
999
|
});
|
|
@@ -1025,7 +1038,7 @@ function $462841de7cc5b715$var$measureHover(el, offset) {
|
|
|
1025
1038
|
};
|
|
1026
1039
|
}
|
|
1027
1040
|
function $462841de7cc5b715$var$getNodesAroundCursor(node, prev, next, hover) {
|
|
1028
|
-
if (!node) // We're
|
|
1041
|
+
if (!node) // We're hovering over the empty part of the list, not over an item,
|
|
1029
1042
|
// Put the cursor below the last item which is "prev"
|
|
1030
1043
|
return [
|
|
1031
1044
|
prev,
|
|
@@ -1109,7 +1122,7 @@ function $462841de7cc5b715$export$f502ca02ebb85a1c(args) {
|
|
|
1109
1122
|
const { node: node , nextNode: nextNode , prevNode: prevNode } = args;
|
|
1110
1123
|
const [above, below] = $462841de7cc5b715$var$getNodesAroundCursor(node, prevNode, nextNode, hover);
|
|
1111
1124
|
/* Hovering over the middle of a folder */ if (node && node.isInternal && hover.inMiddle) return {
|
|
1112
|
-
drop: $462841de7cc5b715$var$dropAt(node.id,
|
|
1125
|
+
drop: $462841de7cc5b715$var$dropAt(node.id, null),
|
|
1113
1126
|
cursor: $462841de7cc5b715$var$highlightCursor(node.id)
|
|
1114
1127
|
};
|
|
1115
1128
|
/* At the top of the list */ if (!above) return {
|
|
@@ -1786,19 +1799,34 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
|
|
|
1786
1799
|
$5c74fef433be2b0a$var$safeRun(this.props.onSelect, this.selectedNodes);
|
|
1787
1800
|
}
|
|
1788
1801
|
deselectAll() {
|
|
1789
|
-
this.
|
|
1790
|
-
|
|
1791
|
-
|
|
1802
|
+
this.setSelection({
|
|
1803
|
+
ids: [],
|
|
1804
|
+
anchor: null,
|
|
1805
|
+
mostRecent: null
|
|
1806
|
+
});
|
|
1792
1807
|
$5c74fef433be2b0a$var$safeRun(this.props.onSelect, this.selectedNodes);
|
|
1793
1808
|
}
|
|
1794
1809
|
selectAll() {
|
|
1795
|
-
this.
|
|
1810
|
+
this.setSelection({
|
|
1811
|
+
ids: Object.keys(this.idToIndex),
|
|
1812
|
+
anchor: this.firstNode,
|
|
1813
|
+
mostRecent: this.lastNode
|
|
1814
|
+
});
|
|
1796
1815
|
this.dispatch((0, $61ef7f2c3c9633e7$export$d7ddd398f22d79ef)(this.lastNode?.id));
|
|
1797
|
-
this.dispatch((0, $58f9381615aa3d17$export$e324594224ef24da).anchor(this.firstNode));
|
|
1798
|
-
this.dispatch((0, $58f9381615aa3d17$export$e324594224ef24da).mostRecent(this.lastNode));
|
|
1799
1816
|
if (this.focusedNode) $5c74fef433be2b0a$var$safeRun(this.props.onFocus, this.focusedNode);
|
|
1800
1817
|
$5c74fef433be2b0a$var$safeRun(this.props.onSelect, this.selectedNodes);
|
|
1801
1818
|
}
|
|
1819
|
+
setSelection(args) {
|
|
1820
|
+
const ids = new Set(args.ids?.map($5c74fef433be2b0a$var$identify));
|
|
1821
|
+
const anchor = $5c74fef433be2b0a$var$identifyNull(args.anchor);
|
|
1822
|
+
const mostRecent = $5c74fef433be2b0a$var$identifyNull(args.mostRecent);
|
|
1823
|
+
this.dispatch((0, $58f9381615aa3d17$export$e324594224ef24da).set({
|
|
1824
|
+
ids: ids,
|
|
1825
|
+
anchor: anchor,
|
|
1826
|
+
mostRecent: mostRecent
|
|
1827
|
+
}));
|
|
1828
|
+
$5c74fef433be2b0a$var$safeRun(this.props.onSelect, this.selectedNodes);
|
|
1829
|
+
}
|
|
1802
1830
|
/* Drag and Drop */ get cursorParentId() {
|
|
1803
1831
|
const { cursor: cursor } = this.state.dnd;
|
|
1804
1832
|
switch(cursor.type){
|
|
@@ -1814,6 +1842,15 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
|
|
|
1814
1842
|
get dragNodes() {
|
|
1815
1843
|
return this.state.dnd.dragIds.map((id)=>this.get(id)).filter((n)=>!!n);
|
|
1816
1844
|
}
|
|
1845
|
+
get dragNode() {
|
|
1846
|
+
return this.get(this.state.nodes.drag.id);
|
|
1847
|
+
}
|
|
1848
|
+
get dragDestinationParent() {
|
|
1849
|
+
return this.get(this.state.nodes.drag.destinationParentId);
|
|
1850
|
+
}
|
|
1851
|
+
get dragDestinationIndex() {
|
|
1852
|
+
return this.state.nodes.drag.destinationIndex;
|
|
1853
|
+
}
|
|
1817
1854
|
canDrop() {
|
|
1818
1855
|
if (this.isFiltered) return false;
|
|
1819
1856
|
const parentNode = this.get(this.state.dnd.parentId) ?? this.root;
|
|
@@ -1822,13 +1859,13 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
|
|
|
1822
1859
|
for (const drag of dragNodes){
|
|
1823
1860
|
if (!drag) return false;
|
|
1824
1861
|
if (!parentNode) return false;
|
|
1825
|
-
if (drag.isInternal && $eb5355379510ac9b$exports.
|
|
1862
|
+
if (drag.isInternal && $eb5355379510ac9b$exports.isDescendant(parentNode, drag)) return false;
|
|
1826
1863
|
}
|
|
1827
1864
|
// Allow the user to insert their own logic
|
|
1828
1865
|
if (typeof isDisabled == "function") return !isDisabled({
|
|
1829
1866
|
parentNode: parentNode,
|
|
1830
1867
|
dragNodes: this.dragNodes,
|
|
1831
|
-
index: this.state.dnd.index
|
|
1868
|
+
index: this.state.dnd.index || 0
|
|
1832
1869
|
});
|
|
1833
1870
|
else if (typeof isDisabled == "string") // @ts-ignore
|
|
1834
1871
|
return !parentNode.data[isDisabled];
|
|
@@ -1954,7 +1991,8 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
|
|
|
1954
1991
|
willReceiveDrop(node) {
|
|
1955
1992
|
const id = $5c74fef433be2b0a$var$identifyNull(node);
|
|
1956
1993
|
if (!id) return false;
|
|
1957
|
-
|
|
1994
|
+
const { destinationParentId: destinationParentId , destinationIndex: destinationIndex } = this.state.nodes.drag;
|
|
1995
|
+
return id === destinationParentId && destinationIndex === null;
|
|
1958
1996
|
}
|
|
1959
1997
|
/* Tree Event Handlers */ onFocus() {
|
|
1960
1998
|
const node = this.focusedNode || this.firstNode;
|
|
@@ -1992,30 +2030,28 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
|
|
|
1992
2030
|
|
|
1993
2031
|
|
|
1994
2032
|
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
idWillReceiveDrop: null
|
|
1998
|
-
}, action) {
|
|
2033
|
+
|
|
2034
|
+
function $2f73c1963cd9aa06$export$1650419e431d3ba3(state = (0, $9d556ecd8e421ffe$export$d4c72bab9d6cc13a)().nodes.drag, action) {
|
|
1999
2035
|
switch(action.type){
|
|
2000
2036
|
case "DND_DRAG_START":
|
|
2001
2037
|
return {
|
|
2002
2038
|
...state,
|
|
2003
|
-
id: action.id
|
|
2039
|
+
id: action.id,
|
|
2040
|
+
selectedIds: action.dragIds
|
|
2004
2041
|
};
|
|
2005
2042
|
case "DND_DRAG_END":
|
|
2006
2043
|
return {
|
|
2007
2044
|
...state,
|
|
2008
|
-
id: null
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
if (c.type === "highlight" && c.id !== state.idWillReceiveDrop) return {
|
|
2013
|
-
...state,
|
|
2014
|
-
idWillReceiveDrop: c.id
|
|
2045
|
+
id: null,
|
|
2046
|
+
destinationParentId: null,
|
|
2047
|
+
destinationIndex: null,
|
|
2048
|
+
selectedIds: []
|
|
2015
2049
|
};
|
|
2016
|
-
|
|
2050
|
+
case "DND_HOVERING":
|
|
2051
|
+
if (action.parentId !== state.destinationParentId || action.index != state.destinationIndex) return {
|
|
2017
2052
|
...state,
|
|
2018
|
-
|
|
2053
|
+
destinationParentId: action.parentId,
|
|
2054
|
+
destinationIndex: action.index
|
|
2019
2055
|
};
|
|
2020
2056
|
else return state;
|
|
2021
2057
|
default:
|