@elliemae/ds-treeview 2.0.0-next.0 → 2.0.0-next.13
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/cjs/TreeView.js +6 -0
- package/cjs/config/cssClassesConstants.js +1 -1
- package/cjs/deprecated/TreeView.js +7 -1
- package/cjs/deprecated/__testUtils__/utils.js +10 -1
- package/cjs/deprecated/plugins/dnd/TreeDndPlugin.js +15 -8
- package/cjs/deprecated/plugins/dnd/renderers/DraggableItem.js +10 -5
- package/cjs/deprecated/plugins/dnd/renderers/DroppableList.js +21 -15
- package/cjs/deprecated/plugins/dnd/utils.js +42 -34
- package/cjs/deprecated/plugins/roving/TreeRovingPlugin.js +13 -3
- package/cjs/deprecated/plugins/searchable/SearchableTreePlugin.js +5 -3
- package/cjs/deprecated/plugins/searchable/utils.js +1 -1
- package/cjs/deprecated/plugins/selectable/SelectablePluginTree.js +53 -33
- package/cjs/deprecated/plugins/toolbar/TreeToolbarPlugin.js +11 -7
- package/cjs/deprecated/plugins/tree/TreeDataPlugin.js +45 -34
- package/cjs/deprecated/plugins/tree/useExpandTreeState.js +9 -5
- package/cjs/deprecated/plugins/tree/utils.js +19 -6
- package/cjs/deprecated/plugins/tree/walkTreeStrategy.js +13 -9
- package/cjs/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js +24 -10
- package/cjs/deprecated/renderers.js +17 -9
- package/cjs/parts/CheckboxSelectable.js +7 -3
- package/cjs/parts/ChildrenCountDisplayer.js +2 -2
- package/cjs/parts/ExpandCaret.js +11 -11
- package/cjs/parts/Icon.js +2 -2
- package/cjs/parts/NestingSpace.js +6 -1
- package/cjs/parts/RadioSelectable.js +3 -4
- package/cjs/parts/TreeItem.js +34 -23
- package/cjs/parts/TreeItemText.js +18 -15
- package/cjs/parts/TreeList.js +26 -16
- package/cjs/related-components/TreeViewSearchBar.js +2 -2
- package/cjs/utils/array-helpers.js +2 -0
- package/cjs/utils/dnd-helpers.js +29 -25
- package/cjs/utils/group-expands-helpers.js +7 -5
- package/cjs/utils/keyboard-helpers.js +6 -3
- package/cjs/utils/object-helpers.js +8 -0
- package/cjs/utils/refs-helpers.js +11 -1
- package/cjs/utils/selectable-helper.js +9 -2
- package/cjs/utils/tree-helpers.js +27 -9
- package/cjs/utils/useDnDHelpers.js +21 -14
- package/cjs/utils/useInstanceRefActions.js +14 -10
- package/cjs/utils/useTree.js +6 -0
- package/esm/TreeView.js +6 -0
- package/esm/config/cssClassesConstants.js +1 -1
- package/esm/deprecated/TreeView.js +7 -1
- package/esm/deprecated/__testUtils__/utils.js +10 -1
- package/esm/deprecated/plugins/dnd/TreeDndPlugin.js +14 -7
- package/esm/deprecated/plugins/dnd/renderers/DraggableItem.js +9 -3
- package/esm/deprecated/plugins/dnd/renderers/DroppableList.js +18 -11
- package/esm/deprecated/plugins/dnd/utils.js +35 -27
- package/esm/deprecated/plugins/roving/TreeRovingPlugin.js +12 -2
- package/esm/deprecated/plugins/searchable/SearchableTreePlugin.js +4 -1
- package/esm/deprecated/plugins/searchable/utils.js +1 -1
- package/esm/deprecated/plugins/selectable/SelectablePluginTree.js +45 -22
- package/esm/deprecated/plugins/toolbar/TreeToolbarPlugin.js +8 -3
- package/esm/deprecated/plugins/tree/TreeDataPlugin.js +35 -22
- package/esm/deprecated/plugins/tree/useExpandTreeState.js +7 -2
- package/esm/deprecated/plugins/tree/utils.js +19 -6
- package/esm/deprecated/plugins/tree/walkTreeStrategy.js +13 -9
- package/esm/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js +24 -10
- package/esm/deprecated/renderers.js +17 -9
- package/esm/parts/CheckboxSelectable.js +7 -2
- package/esm/parts/ChildrenCountDisplayer.js +2 -2
- package/esm/parts/ExpandCaret.js +9 -7
- package/esm/parts/Icon.js +1 -1
- package/esm/parts/NestingSpace.js +6 -1
- package/esm/parts/RadioSelectable.js +3 -3
- package/esm/parts/TreeItem.js +34 -22
- package/esm/parts/TreeItemText.js +16 -13
- package/esm/parts/TreeList.js +25 -15
- package/esm/related-components/TreeViewSearchBar.js +1 -1
- package/esm/utils/array-helpers.js +2 -0
- package/esm/utils/dnd-helpers.js +29 -25
- package/esm/utils/group-expands-helpers.js +7 -5
- package/esm/utils/keyboard-helpers.js +6 -3
- package/esm/utils/object-helpers.js +8 -0
- package/esm/utils/refs-helpers.js +11 -1
- package/esm/utils/selectable-helper.js +9 -2
- package/esm/utils/tree-helpers.js +27 -9
- package/esm/utils/useDnDHelpers.js +21 -14
- package/esm/utils/useInstanceRefActions.js +14 -10
- package/esm/utils/useTree.js +6 -0
- package/package.json +11 -10
- package/types/deprecated/plugins/tree/useExpandTreeState.d.ts +12 -2
- package/cjs/package.json +0 -7
- package/esm/package.json +0 -7
package/esm/parts/TreeList.js
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
2
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
3
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
4
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
5
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
8
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
9
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
3
10
|
import { useContext } from 'react';
|
|
4
11
|
import { SortableContainer } from '@elliemae/react-sortable-hoc';
|
|
5
12
|
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
6
|
-
import { DSCircularProgressIndicator } from '@elliemae/ds-
|
|
13
|
+
import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';
|
|
7
14
|
import TreeViewContext from '../TreeViewContext.js';
|
|
8
15
|
import { DragAndDropTreeItem, TreeItem } from './TreeItem.js';
|
|
9
16
|
import { treeListBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
|
|
@@ -12,20 +19,23 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
12
19
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
13
20
|
|
|
14
21
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
15
|
-
const treeListNoItemsBn =
|
|
22
|
+
const treeListNoItemsBn = "".concat(treeListBlockName, "-no-items");
|
|
16
23
|
const TreeListNoItems = aggregatedClasses('div', {
|
|
17
24
|
'data-testid': treeListNoItemsBn
|
|
18
25
|
})(treeListNoItemsBn);
|
|
19
26
|
const TreeListWrapper = aggregatedClasses('ul', {
|
|
20
27
|
'data-testid': treeListBlockName,
|
|
21
28
|
role: 'tree'
|
|
22
|
-
})(treeListBlockName, null,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
+
})(treeListBlockName, null, _ref => {
|
|
30
|
+
let {
|
|
31
|
+
rowSize
|
|
32
|
+
} = _ref;
|
|
33
|
+
return {
|
|
34
|
+
["rowsize-".concat(rowSize)]: rowSize
|
|
35
|
+
};
|
|
36
|
+
});
|
|
37
|
+
const compactRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-compact");
|
|
38
|
+
const normaRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-normal");
|
|
29
39
|
const TreeList = props => {
|
|
30
40
|
const {
|
|
31
41
|
onMouseDragOverItem
|
|
@@ -48,13 +58,13 @@ const TreeList = props => {
|
|
|
48
58
|
totalSize,
|
|
49
59
|
virtualItems
|
|
50
60
|
} = virtualListHelpers;
|
|
51
|
-
const className =
|
|
61
|
+
const className = "".concat(rowSize === 'compact' ? "".concat(compactRowClass) : "".concat(normaRowClass));
|
|
52
62
|
return /*#__PURE__*/jsxs(TreeListWrapper, {
|
|
53
63
|
ref: virtualListRef,
|
|
54
64
|
className: className,
|
|
55
65
|
style: {
|
|
56
|
-
height:
|
|
57
|
-
width:
|
|
66
|
+
height: "".concat(typeof height === 'number' ? "".concat(height, "px") : height),
|
|
67
|
+
width: "".concat(typeof width === 'number' ? "".concat(width, "px") : width),
|
|
58
68
|
overflow: 'auto'
|
|
59
69
|
},
|
|
60
70
|
children: [isLoading ? /*#__PURE__*/_jsx("div", {
|
|
@@ -73,7 +83,7 @@ const TreeList = props => {
|
|
|
73
83
|
showTooltip: false
|
|
74
84
|
})) : null, !isLoading && virtualItems.length === 0 ? /*#__PURE__*/_jsx(TreeListNoItems, {}, void 0, noItemsPlaceholder) : null, !isLoading && virtualItems.length !== 0 ? /*#__PURE__*/_jsx("div", {
|
|
75
85
|
style: {
|
|
76
|
-
height:
|
|
86
|
+
height: "".concat(totalSize, "px"),
|
|
77
87
|
width: '100%',
|
|
78
88
|
position: 'relative'
|
|
79
89
|
}
|
|
@@ -93,10 +103,10 @@ const TreeList = props => {
|
|
|
93
103
|
top: 0,
|
|
94
104
|
left: 0,
|
|
95
105
|
width: '100%',
|
|
96
|
-
transform:
|
|
106
|
+
transform: "translateY(".concat(start, "px)")
|
|
97
107
|
};
|
|
98
108
|
const listItemProps = {
|
|
99
|
-
key:
|
|
109
|
+
key: "DS-TreeView-List-Item-".concat(id),
|
|
100
110
|
virtualItemRef: measureRef,
|
|
101
111
|
index,
|
|
102
112
|
// this is consumed by the DnD HOC
|
package/esm/utils/dnd-helpers.js
CHANGED
|
@@ -8,13 +8,14 @@ const keyCodes = {
|
|
|
8
8
|
up: [38, 37],
|
|
9
9
|
down: [40, 39]
|
|
10
10
|
};
|
|
11
|
-
const sameParentAsHoverItemDrop =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
11
|
+
const sameParentAsHoverItemDrop = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
isBefore,
|
|
14
|
+
isAfter,
|
|
15
|
+
draggedItem,
|
|
16
|
+
overItem,
|
|
17
|
+
movementDirection
|
|
18
|
+
} = _ref;
|
|
18
19
|
const hoveredItemNodeNestedIndex = overItem.node.getIndex();
|
|
19
20
|
let newParentNode = getItemsParentNode([overItem], true);
|
|
20
21
|
const {
|
|
@@ -40,13 +41,14 @@ const sameParentAsHoverItemDrop = ({
|
|
|
40
41
|
newParentNode
|
|
41
42
|
};
|
|
42
43
|
};
|
|
43
|
-
const inferHoverItemKinshipDrop =
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
44
|
+
const inferHoverItemKinshipDrop = _ref2 => {
|
|
45
|
+
let {
|
|
46
|
+
isBefore,
|
|
47
|
+
isAfter,
|
|
48
|
+
draggedItem,
|
|
49
|
+
overItem,
|
|
50
|
+
movementDirection
|
|
51
|
+
} = _ref2;
|
|
50
52
|
const hoverItemModel = overItem.node.model;
|
|
51
53
|
const isGroupAndIsExpanded = hoverItemModel.isExpanded && hoverItemModel.children.length > 0;
|
|
52
54
|
|
|
@@ -75,13 +77,14 @@ const inferHoverItemKinshipDrop = ({
|
|
|
75
77
|
newParentNode: overItem.node
|
|
76
78
|
};
|
|
77
79
|
};
|
|
78
|
-
const isDropValid =
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
80
|
+
const isDropValid = _ref3 => {
|
|
81
|
+
let {
|
|
82
|
+
isBefore,
|
|
83
|
+
isAfter,
|
|
84
|
+
draggedItem,
|
|
85
|
+
overItem,
|
|
86
|
+
restrictDragAndDrop
|
|
87
|
+
} = _ref3;
|
|
85
88
|
const {
|
|
86
89
|
id: movedId
|
|
87
90
|
} = draggedItem;
|
|
@@ -105,11 +108,12 @@ const isDropValid = ({
|
|
|
105
108
|
|
|
106
109
|
return true;
|
|
107
110
|
};
|
|
108
|
-
const inferKeyboardKinshipDrop =
|
|
109
|
-
|
|
110
|
-
|
|
111
|
+
const inferKeyboardKinshipDrop = _ref4 => {
|
|
112
|
+
let {
|
|
113
|
+
items,
|
|
114
|
+
newIndex // movementDirection,
|
|
111
115
|
|
|
112
|
-
}
|
|
116
|
+
} = _ref4;
|
|
113
117
|
const kinship = {}; // const directionOffset = movementDirection === 'topToBottom' ? 0 : 0;
|
|
114
118
|
|
|
115
119
|
const itemBefore = items[newIndex];
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { useCallback, useEffect } from 'react';
|
|
2
2
|
|
|
3
3
|
/* eslint-disable max-params */
|
|
4
|
-
const toggleItemExpand = (itemToToggle, triggerTreeRerender
|
|
4
|
+
const toggleItemExpand = function (itemToToggle, triggerTreeRerender) {
|
|
5
|
+
let scrollTo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => {};
|
|
5
6
|
const {
|
|
6
7
|
node: {
|
|
7
8
|
model: {
|
|
@@ -59,10 +60,11 @@ const toggleExpandAllHelper = (isExpand, treeRoot, triggerTreeRerender, setLates
|
|
|
59
60
|
}
|
|
60
61
|
setLatestToggledItem(null);
|
|
61
62
|
};
|
|
62
|
-
const useNotifyExpandedChange = (propsWithDefaults, {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
const useNotifyExpandedChange = (propsWithDefaults, _ref) => {
|
|
64
|
+
let {
|
|
65
|
+
latestToggledItem,
|
|
66
|
+
expandedGroups
|
|
67
|
+
} = _ref;
|
|
66
68
|
const notifyExpandedChange = useCallback(expandedGroupHashmap => propsWithDefaults.onExpandChange(expandedGroupHashmap, latestToggledItem), [propsWithDefaults, latestToggledItem]);
|
|
67
69
|
useEffect(() => {
|
|
68
70
|
notifyExpandedChange(expandedGroups);
|
|
@@ -37,9 +37,12 @@ const useOnItemKeyDown = item => {
|
|
|
37
37
|
} = item;
|
|
38
38
|
const onItemFocusCurry = useCallback(newFocusItem => onItemFocus({
|
|
39
39
|
itemIndex: newFocusItem.virtualIndex,
|
|
40
|
-
scrollToItem: (
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
scrollToItem: function () {
|
|
41
|
+
let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
|
|
42
|
+
align: 'start'
|
|
43
|
+
};
|
|
44
|
+
return scrollToIndex(newFocusItem.virtualIndex, opts);
|
|
45
|
+
},
|
|
43
46
|
item: newFocusItem
|
|
44
47
|
}), [onItemFocus]);
|
|
45
48
|
const onItemKeyDown = useCallback(e => {
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
6
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
8
|
+
|
|
1
9
|
/* eslint-disable no-sequences */
|
|
2
10
|
|
|
3
11
|
/* eslint-disable no-return-assign */
|
|
@@ -1,5 +1,15 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
+
|
|
1
7
|
// allow multiple refs to be set to point to the same DOM element
|
|
2
|
-
const setMultipleRefs = (
|
|
8
|
+
const setMultipleRefs = function () {
|
|
9
|
+
for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
10
|
+
refs[_key] = arguments[_key];
|
|
11
|
+
}
|
|
12
|
+
|
|
3
13
|
const filteredRefs = refs.filter(Boolean);
|
|
4
14
|
if (!filteredRefs.length) return null;
|
|
5
15
|
if (filteredRefs.length === 0) return filteredRefs[0];
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import { walkAllNodeChildren, walkParents } from './tree-helpers.js';
|
|
3
8
|
|
|
@@ -19,7 +24,8 @@ const getGroupCheckState = node => {
|
|
|
19
24
|
if (anyChildChecked) return 'mixed';
|
|
20
25
|
return false;
|
|
21
26
|
};
|
|
22
|
-
const selectCheckboxItemModelParentsTillRoot = (modelToCheck
|
|
27
|
+
const selectCheckboxItemModelParentsTillRoot = function (modelToCheck) {
|
|
28
|
+
let triggerTreeRerender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
23
29
|
const newSelections = {};
|
|
24
30
|
const {
|
|
25
31
|
nodePath
|
|
@@ -32,7 +38,8 @@ const selectCheckboxItemModelParentsTillRoot = (modelToCheck, triggerTreeRerende
|
|
|
32
38
|
if (triggerTreeRerender) triggerTreeRerender();
|
|
33
39
|
return newSelections;
|
|
34
40
|
};
|
|
35
|
-
const toggleCheckboxItem = (itemToSelect
|
|
41
|
+
const toggleCheckboxItem = function (itemToSelect) {
|
|
42
|
+
let triggerTreeRerender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
36
43
|
const {
|
|
37
44
|
node: {
|
|
38
45
|
model: {
|
|
@@ -1,8 +1,17 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
import 'core-js/modules/esnext.async-iterator.find.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.find.js';
|
|
7
|
+
import 'core-js/modules/esnext.async-iterator.every.js';
|
|
8
|
+
import 'core-js/modules/esnext.iterator.every.js';
|
|
1
9
|
import { createRef } from 'react';
|
|
2
10
|
import { standardizeSearchQueryString } from './string-helpers.js';
|
|
3
11
|
|
|
4
|
-
|
|
5
|
-
|
|
12
|
+
const walkVisibles = function (node, callback) {
|
|
13
|
+
let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
14
|
+
let highlightOnlyQuery = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
6
15
|
const {
|
|
7
16
|
children,
|
|
8
17
|
model
|
|
@@ -24,7 +33,8 @@ const walkVisibles = (node, callback, skipRoot = true, highlightOnlyQuery = fals
|
|
|
24
33
|
});
|
|
25
34
|
}
|
|
26
35
|
};
|
|
27
|
-
const walkParents = (nodePath, callback
|
|
36
|
+
const walkParents = function (nodePath, callback) {
|
|
37
|
+
let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
28
38
|
const parents = [...nodePath].reverse();
|
|
29
39
|
parents.shift(); // remove current node from the parents array
|
|
30
40
|
|
|
@@ -32,7 +42,8 @@ const walkParents = (nodePath, callback, skipRoot = true) => {
|
|
|
32
42
|
|
|
33
43
|
parents.forEach(callback);
|
|
34
44
|
};
|
|
35
|
-
const walkAllNodeChildren = (node, callback
|
|
45
|
+
const walkAllNodeChildren = function (node, callback) {
|
|
46
|
+
let isFirst = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
36
47
|
const {
|
|
37
48
|
children = []
|
|
38
49
|
} = node;
|
|
@@ -50,7 +61,9 @@ const getNodeById = (treeRoot, id) => {
|
|
|
50
61
|
return nodes[0];
|
|
51
62
|
};
|
|
52
63
|
const cloneNode = (tree, node) => tree.parse(node.model);
|
|
53
|
-
const getItemsParentNode = (
|
|
64
|
+
const getItemsParentNode = function () {
|
|
65
|
+
let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
66
|
+
let skipSameParentCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
54
67
|
if (items.length === 0) throw new Error("Received empty items, can't retrieve parent"); // in case we already know the items compared shares the same parent
|
|
55
68
|
|
|
56
69
|
if (!skipSameParentCheck) if (!itemsShareSameParent(items)) // if we don't know (default, we don't) check if they share the parent
|
|
@@ -67,7 +80,8 @@ const getItemsParentNode = (items = [], skipSameParentCheck = false) => {
|
|
|
67
80
|
const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];
|
|
68
81
|
return directParentNode;
|
|
69
82
|
};
|
|
70
|
-
const itemsShareSameParent = (
|
|
83
|
+
const itemsShareSameParent = function () {
|
|
84
|
+
let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
71
85
|
if (items.length === 0) throw new Error('Received empty items for comparison');
|
|
72
86
|
if (items.length === 1) return true; // when moving in first position we receive [undefined,...{items}]
|
|
73
87
|
// when moving in last position we receive [...{items}, undefined]
|
|
@@ -88,21 +102,25 @@ const itemsShareSameParent = (items = []) => {
|
|
|
88
102
|
return directParentNode === itemDirectParent;
|
|
89
103
|
});
|
|
90
104
|
};
|
|
91
|
-
const getNodeMatchesSearchQuery = (node
|
|
105
|
+
const getNodeMatchesSearchQuery = function (node) {
|
|
106
|
+
let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
92
107
|
const standardizedName = standardizeSearchQueryString(node.model.name);
|
|
93
108
|
const standardizedSearchQuery = standardizeSearchQueryString(searchQuery);
|
|
94
109
|
return standardizedName.includes(standardizedSearchQuery);
|
|
95
110
|
};
|
|
96
|
-
const getChildrenMatchesSearchQuery = (parentNode
|
|
111
|
+
const getChildrenMatchesSearchQuery = function (parentNode) {
|
|
112
|
+
let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
97
113
|
let anyChildMatch = false;
|
|
98
114
|
walkAllNodeChildren(parentNode, node => {
|
|
99
115
|
if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;
|
|
100
116
|
});
|
|
101
117
|
return anyChildMatch;
|
|
102
118
|
};
|
|
103
|
-
const enrichNodeModelInPlace = (node
|
|
119
|
+
const enrichNodeModelInPlace = function (node) {
|
|
104
120
|
var _node$model, _node$model$children;
|
|
105
121
|
|
|
122
|
+
let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
123
|
+
let selection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
106
124
|
const path = node.getPath();
|
|
107
125
|
const depth = path.length - 1;
|
|
108
126
|
node.model.nodePath = path;
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.constructor.js';
|
|
2
|
+
import 'core-js/modules/esnext.async-iterator.drop.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
4
|
+
import 'core-js/modules/esnext.iterator.drop.js';
|
|
5
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
1
6
|
import { useContext, useCallback } from 'react';
|
|
2
7
|
import { cloneDeep } from 'lodash';
|
|
3
8
|
import TreeViewContext, { defaultRelativeMouseCoord } from '../TreeViewContext.js';
|
|
4
9
|
import { getNodeById, focusItem } from './tree-helpers.js';
|
|
5
10
|
import { inferKeyboardKinshipDrop, inferHoverItemKinshipDrop, isDropValid } from './dnd-helpers.js';
|
|
6
11
|
|
|
7
|
-
/* eslint-disable max-depth */
|
|
8
12
|
const useDnDHelpers = () => {
|
|
9
13
|
const ctx = useContext(TreeViewContext);
|
|
10
14
|
const {
|
|
@@ -27,11 +31,12 @@ const useDnDHelpers = () => {
|
|
|
27
31
|
treeRoot,
|
|
28
32
|
draggedItem
|
|
29
33
|
} = ctx;
|
|
30
|
-
const onSortEnd = useCallback(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
const onSortEnd = useCallback(_ref => {
|
|
35
|
+
let {
|
|
36
|
+
oldIndex,
|
|
37
|
+
newIndex,
|
|
38
|
+
isKeySorting
|
|
39
|
+
} = _ref;
|
|
35
40
|
let newItems = cloneDeep(data);
|
|
36
41
|
const {
|
|
37
42
|
isBefore,
|
|
@@ -126,13 +131,14 @@ const useDnDHelpers = () => {
|
|
|
126
131
|
// at the top/center/bottom of an element to choose where to move the element
|
|
127
132
|
// requested in the specs
|
|
128
133
|
|
|
129
|
-
const onMouseDragOverItem = useCallback(
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
134
|
+
const onMouseDragOverItem = useCallback(_ref2 => {
|
|
135
|
+
let {
|
|
136
|
+
event,
|
|
137
|
+
item,
|
|
138
|
+
itemIndex,
|
|
139
|
+
setIsDraggingOverThis,
|
|
140
|
+
openFolderOnHoverTimeout
|
|
141
|
+
} = _ref2;
|
|
136
142
|
const {
|
|
137
143
|
node
|
|
138
144
|
} = item;
|
|
@@ -179,7 +185,8 @@ const useDnDHelpers = () => {
|
|
|
179
185
|
setIsDraggingOverThis(true);
|
|
180
186
|
|
|
181
187
|
if (!(openFolderOnHoverTimeout !== null && openFolderOnHoverTimeout !== void 0 && openFolderOnHoverTimeout.current) && // only set the interval if it wasn't set already once
|
|
182
|
-
(draggedItem === null || draggedItem === void 0 ? void 0 : draggedItem.id) !== (item === null || item === void 0 ? void 0 : item.id) && (
|
|
188
|
+
(draggedItem === null || draggedItem === void 0 ? void 0 : draggedItem.id) !== (item === null || item === void 0 ? void 0 : item.id) && ( // don't open ghost element
|
|
189
|
+
item.isGroup || item.children.length > 0) && // only open groups
|
|
183
190
|
!restrictDragAndDrop) {
|
|
184
191
|
openFolderOnHoverTimeout.current = setTimeout(() => {
|
|
185
192
|
item.node.model.isExpanded = true;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
1
2
|
import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
|
|
2
3
|
import { focusItem } from './tree-helpers.js';
|
|
3
4
|
import { toggleExpandAllHelper } from './group-expands-helpers.js';
|
|
4
5
|
|
|
5
|
-
const useInstanceRefActions = ({
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
const useInstanceRefActions = (_ref, ctx) => {
|
|
7
|
+
let {
|
|
8
|
+
actions
|
|
9
|
+
} = _ref;
|
|
8
10
|
const {
|
|
9
11
|
props: {
|
|
10
12
|
onItemFocus
|
|
@@ -39,19 +41,21 @@ const useInstanceRefActions = ({
|
|
|
39
41
|
setPromise(p);
|
|
40
42
|
return p;
|
|
41
43
|
}, [promises, treeRoot, triggerTreeRerender, setLatestToggledItem]);
|
|
42
|
-
actions.scrollTo = useCallback((indx
|
|
43
|
-
|
|
44
|
-
|
|
44
|
+
actions.scrollTo = useCallback(function (indx) {
|
|
45
|
+
let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
46
|
+
align: 'start'
|
|
47
|
+
};
|
|
45
48
|
if (scrollToIndex) scrollToIndex(indx, opts);
|
|
46
49
|
}, [scrollToIndex]);
|
|
47
50
|
actions.setSelectedItemByVirtualIndex = useCallback(index => {
|
|
48
51
|
const itemByIndex = visibleItems[index];
|
|
49
52
|
setSelectedItem(itemByIndex);
|
|
50
53
|
}, [visibleItems, setSelectedItem]);
|
|
51
|
-
actions.setFocusedItemByVirtualIndex = useCallback((index
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
54
|
+
actions.setFocusedItemByVirtualIndex = useCallback(function (index) {
|
|
55
|
+
let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
56
|
+
align: 'start',
|
|
57
|
+
withScroll: false
|
|
58
|
+
};
|
|
55
59
|
const itemByIndex = visibleItems[index];
|
|
56
60
|
const onItemFocusParams = {
|
|
57
61
|
itemIndex: itemByIndex.virtualIndex,
|
package/esm/utils/useTree.js
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
8
|
import { useMemo, useState, useEffect, useCallback } from 'react';
|
|
3
9
|
import TreeModel from 'tree-model';
|
|
4
10
|
import { cloneDeep } from 'lodash';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-treeview",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.13",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tree View",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -319,18 +319,19 @@
|
|
|
319
319
|
"generateSubmodules": true
|
|
320
320
|
},
|
|
321
321
|
"dependencies": {
|
|
322
|
-
"@elliemae/ds-basic": "2.0.0-next.
|
|
323
|
-
"@elliemae/ds-classnames": "2.0.0-next.
|
|
324
|
-
"@elliemae/ds-dropdownmenu": "2.0.0-next.
|
|
325
|
-
"@elliemae/ds-icons": "2.0.0-next.
|
|
326
|
-
"@elliemae/ds-shared": "2.0.0-next.
|
|
327
|
-
"@elliemae/ds-utilities": "2.0.0-next.
|
|
322
|
+
"@elliemae/ds-basic": "2.0.0-next.13",
|
|
323
|
+
"@elliemae/ds-classnames": "2.0.0-next.13",
|
|
324
|
+
"@elliemae/ds-dropdownmenu": "2.0.0-next.13",
|
|
325
|
+
"@elliemae/ds-icons": "2.0.0-next.13",
|
|
326
|
+
"@elliemae/ds-shared": "2.0.0-next.13",
|
|
327
|
+
"@elliemae/ds-utilities": "2.0.0-next.13",
|
|
328
328
|
"@elliemae/react-sortable-hoc": "^1.0.0",
|
|
329
329
|
"@john-osullivan/react-window-dynamic-fork": "1.9.0-alpha.1",
|
|
330
330
|
"prop-types": "~15.7.2",
|
|
331
331
|
"react-beautiful-dnd": "~13.0.0",
|
|
332
|
+
"react-desc": "~4.1.3",
|
|
332
333
|
"react-highlight-words": "~0.17.0",
|
|
333
|
-
"react-virtual": "
|
|
334
|
+
"react-virtual": "~2.3.2",
|
|
334
335
|
"react-virtualized-auto-sizer": "~1.0.6",
|
|
335
336
|
"react-window": "~1.8.6",
|
|
336
337
|
"resize-observer-polyfill": "~1.5.1",
|
|
@@ -339,12 +340,12 @@
|
|
|
339
340
|
"uuid": "~8.3.2"
|
|
340
341
|
},
|
|
341
342
|
"devDependencies": {
|
|
342
|
-
"styled-components": "~5.3.
|
|
343
|
+
"styled-components": "~5.3.3"
|
|
343
344
|
},
|
|
344
345
|
"peerDependencies": {
|
|
345
346
|
"lodash": "^4.17.21",
|
|
346
347
|
"react": "~17.0.2",
|
|
347
348
|
"react-dom": "^17.0.2",
|
|
348
|
-
"styled-components": "^5.3.
|
|
349
|
+
"styled-components": "^5.3.3"
|
|
349
350
|
}
|
|
350
351
|
}
|
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
export declare const useExpandTreeState: (instance: any) => {
|
|
2
|
-
state:
|
|
3
|
-
|
|
2
|
+
state: {
|
|
3
|
+
expandedAll: boolean;
|
|
4
|
+
expanded: any;
|
|
5
|
+
isExpandedAll: boolean;
|
|
6
|
+
};
|
|
7
|
+
actions: {
|
|
8
|
+
toggleExpandAll: (expanded: any) => Promise<any>;
|
|
9
|
+
toggleExpand: (item: any, opts: any) => void;
|
|
10
|
+
_toggleExpand: (item: any, opts: any) => void;
|
|
11
|
+
expand: (item: any, stateData?: boolean | undefined) => void;
|
|
12
|
+
collapse: (item: any) => void;
|
|
13
|
+
};
|
|
4
14
|
};
|
package/cjs/package.json
DELETED