@elliemae/ds-treeview 2.2.0 → 2.3.0-alpha.3
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 +47 -31
- package/cjs/TreeView.js.map +7 -0
- package/cjs/TreeViewContext.js +55 -43
- package/cjs/TreeViewContext.js.map +7 -0
- package/cjs/config/cssClassesConstants.js +41 -13
- package/cjs/config/cssClassesConstants.js.map +7 -0
- package/cjs/config/useTreeview.js +102 -88
- package/cjs/config/useTreeview.js.map +7 -0
- package/cjs/hoc/DnDTreeContext.js +45 -0
- package/cjs/hoc/DnDTreeContext.js.map +7 -0
- package/cjs/hoc/SortableItemContext.js +46 -0
- package/cjs/hoc/SortableItemContext.js.map +7 -0
- package/cjs/hoc/WithConditionalDnDContext.js +128 -0
- package/cjs/hoc/WithConditionalDnDContext.js.map +7 -0
- package/cjs/hoc/WithDnDSortableItemContext.js +69 -0
- package/cjs/hoc/WithDnDSortableItemContext.js.map +7 -0
- package/cjs/index.js +37 -27
- package/cjs/index.js.map +7 -0
- package/cjs/parts/CheckboxSelectable.js +70 -59
- package/cjs/parts/CheckboxSelectable.js.map +7 -0
- package/cjs/parts/ChildrenCountDisplayer.js +45 -28
- package/cjs/parts/ChildrenCountDisplayer.js.map +7 -0
- package/cjs/parts/DnDHandle.js +57 -0
- package/cjs/parts/DnDHandle.js.map +7 -0
- package/cjs/parts/DropIndicator.js +80 -0
- package/cjs/parts/DropIndicator.js.map +7 -0
- package/cjs/parts/ExpandCaret.js +85 -83
- package/cjs/parts/ExpandCaret.js.map +7 -0
- package/cjs/parts/Icon.js +46 -31
- package/cjs/parts/Icon.js.map +7 -0
- package/cjs/parts/NestingSpace.js +43 -35
- package/cjs/parts/NestingSpace.js.map +7 -0
- package/cjs/parts/RadioSelectable.js +52 -37
- package/cjs/parts/RadioSelectable.js.map +7 -0
- package/cjs/parts/TreeItem.js +121 -165
- package/cjs/parts/TreeItem.js.map +7 -0
- package/cjs/parts/TreeItemText.js +88 -95
- package/cjs/parts/TreeItemText.js.map +7 -0
- package/cjs/parts/TreeList.js +114 -132
- package/cjs/parts/TreeList.js.map +7 -0
- package/cjs/plugins/dnd/TreeDndPlugin.js +34 -43
- package/cjs/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/cjs/plugins/dnd/index.js +28 -10
- package/cjs/plugins/dnd/index.js.map +7 -0
- package/cjs/plugins/index.js +34 -22
- package/cjs/plugins/index.js.map +7 -0
- package/cjs/plugins/roving/TreeRovingPlugin.js +35 -7
- package/cjs/plugins/roving/TreeRovingPlugin.js.map +7 -0
- package/cjs/plugins/roving/index.js +28 -9
- package/cjs/plugins/roving/index.js.map +7 -0
- package/cjs/plugins/searchable/SearchableTreePlugin.js +35 -7
- package/cjs/plugins/searchable/SearchableTreePlugin.js.map +7 -0
- package/cjs/plugins/searchable/index.js +28 -9
- package/cjs/plugins/searchable/index.js.map +7 -0
- package/cjs/plugins/selectable/SelectablePluginTree.js +35 -7
- package/cjs/plugins/selectable/SelectablePluginTree.js.map +7 -0
- package/cjs/plugins/selectable/index.js +28 -9
- package/cjs/plugins/selectable/index.js.map +7 -0
- package/cjs/plugins/toolbar/TreeToolbarPlugin.js +35 -7
- package/cjs/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
- package/cjs/plugins/toolbar/index.js +28 -9
- package/cjs/plugins/toolbar/index.js.map +7 -0
- package/cjs/plugins/tree/TreeDataPlugin.js +35 -7
- package/cjs/plugins/tree/TreeDataPlugin.js.map +7 -0
- package/cjs/plugins/tree/index.js +28 -9
- package/cjs/plugins/tree/index.js.map +7 -0
- package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js +35 -7
- package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
- package/cjs/plugins/virtualization/index.js +28 -9
- package/cjs/plugins/virtualization/index.js.map +7 -0
- package/cjs/react-desc-prop-types.js +83 -53
- package/cjs/react-desc-prop-types.js.map +7 -0
- package/cjs/related-components/TreeViewSearchBar.js +42 -40
- package/cjs/related-components/TreeViewSearchBar.js.map +7 -0
- package/cjs/sharedTypes.js +27 -2
- package/cjs/sharedTypes.js.map +7 -0
- package/cjs/utils/array-helpers.js +35 -11
- package/cjs/utils/array-helpers.js.map +7 -0
- package/cjs/utils/group-expands-helpers.js +86 -59
- package/cjs/utils/group-expands-helpers.js.map +7 -0
- package/cjs/utils/keyboard-helpers.js +86 -90
- package/cjs/utils/keyboard-helpers.js.map +7 -0
- package/cjs/utils/object-helpers.js +43 -36
- package/cjs/utils/object-helpers.js.map +7 -0
- package/cjs/utils/refs-helpers.js +43 -22
- package/cjs/utils/refs-helpers.js.map +7 -0
- package/cjs/utils/selectable-helper.js +61 -53
- package/cjs/utils/selectable-helper.js.map +7 -0
- package/cjs/utils/string-helpers.js +35 -7
- package/cjs/utils/string-helpers.js.map +7 -0
- package/cjs/utils/tree-helpers.js +125 -135
- package/cjs/utils/tree-helpers.js.map +7 -0
- package/cjs/utils/useInstanceRefActions.js +54 -43
- package/cjs/utils/useInstanceRefActions.js.map +7 -0
- package/cjs/utils/useTree.js +78 -78
- package/cjs/utils/useTree.js.map +7 -0
- package/esm/TreeView.js +16 -20
- package/esm/TreeView.js.map +7 -0
- package/esm/TreeViewContext.js +26 -37
- package/esm/TreeViewContext.js.map +7 -0
- package/esm/config/cssClassesConstants.js +12 -6
- package/esm/config/cssClassesConstants.js.map +7 -0
- package/esm/config/useTreeview.js +59 -66
- package/esm/config/useTreeview.js.map +7 -0
- package/esm/hoc/DnDTreeContext.js +16 -0
- package/esm/hoc/DnDTreeContext.js.map +7 -0
- package/esm/hoc/SortableItemContext.js +17 -0
- package/esm/hoc/SortableItemContext.js.map +7 -0
- package/esm/hoc/WithConditionalDnDContext.js +99 -0
- package/esm/hoc/WithConditionalDnDContext.js.map +7 -0
- package/esm/hoc/WithDnDSortableItemContext.js +40 -0
- package/esm/hoc/WithDnDSortableItemContext.js.map +7 -0
- package/esm/index.js +8 -9
- package/esm/index.js.map +7 -0
- package/esm/parts/CheckboxSelectable.js +36 -46
- package/esm/parts/CheckboxSelectable.js.map +7 -0
- package/esm/parts/ChildrenCountDisplayer.js +16 -20
- package/esm/parts/ChildrenCountDisplayer.js.map +7 -0
- package/esm/parts/DnDHandle.js +28 -0
- package/esm/parts/DnDHandle.js.map +7 -0
- package/esm/parts/DropIndicator.js +51 -0
- package/esm/parts/DropIndicator.js.map +7 -0
- package/esm/parts/ExpandCaret.js +54 -72
- package/esm/parts/ExpandCaret.js.map +7 -0
- package/esm/parts/Icon.js +16 -22
- package/esm/parts/Icon.js.map +7 -0
- package/esm/parts/NestingSpace.js +14 -27
- package/esm/parts/NestingSpace.js.map +7 -0
- package/esm/parts/RadioSelectable.js +20 -28
- package/esm/parts/RadioSelectable.js.map +7 -0
- package/esm/parts/TreeItem.js +89 -150
- package/esm/parts/TreeItem.js.map +7 -0
- package/esm/parts/TreeItemText.js +58 -85
- package/esm/parts/TreeItemText.js.map +7 -0
- package/esm/parts/TreeList.js +86 -120
- package/esm/parts/TreeList.js.map +7 -0
- package/esm/plugins/dnd/TreeDndPlugin.js +5 -34
- package/esm/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/esm/plugins/dnd/index.js +3 -1
- package/esm/plugins/dnd/index.js.map +7 -0
- package/esm/plugins/index.js +9 -7
- package/esm/plugins/index.js.map +7 -0
- package/esm/plugins/roving/TreeRovingPlugin.js +6 -3
- package/esm/plugins/roving/TreeRovingPlugin.js.map +7 -0
- package/esm/plugins/roving/index.js +3 -1
- package/esm/plugins/roving/index.js.map +7 -0
- package/esm/plugins/searchable/SearchableTreePlugin.js +6 -3
- package/esm/plugins/searchable/SearchableTreePlugin.js.map +7 -0
- package/esm/plugins/searchable/index.js +3 -1
- package/esm/plugins/searchable/index.js.map +7 -0
- package/esm/plugins/selectable/SelectablePluginTree.js +6 -3
- package/esm/plugins/selectable/SelectablePluginTree.js.map +7 -0
- package/esm/plugins/selectable/index.js +3 -1
- package/esm/plugins/selectable/index.js.map +7 -0
- package/esm/plugins/toolbar/TreeToolbarPlugin.js +6 -3
- package/esm/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
- package/esm/plugins/toolbar/index.js +3 -1
- package/esm/plugins/toolbar/index.js.map +7 -0
- package/esm/plugins/tree/TreeDataPlugin.js +6 -3
- package/esm/plugins/tree/TreeDataPlugin.js.map +7 -0
- package/esm/plugins/tree/index.js +3 -1
- package/esm/plugins/tree/index.js.map +7 -0
- package/esm/plugins/virtualization/TreeVirtualizationPlugin.js +6 -3
- package/esm/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
- package/esm/plugins/virtualization/index.js +3 -1
- package/esm/plugins/virtualization/index.js.map +7 -0
- package/esm/react-desc-prop-types.js +48 -43
- package/esm/react-desc-prop-types.js.map +7 -0
- package/esm/related-components/TreeViewSearchBar.js +13 -32
- package/esm/related-components/TreeViewSearchBar.js.map +7 -0
- package/esm/sharedTypes.js +2 -1
- package/esm/sharedTypes.js.map +7 -0
- package/esm/utils/array-helpers.js +6 -6
- package/esm/utils/array-helpers.js.map +7 -0
- package/esm/utils/group-expands-helpers.js +56 -46
- package/esm/utils/group-expands-helpers.js.map +7 -0
- package/esm/utils/keyboard-helpers.js +47 -74
- package/esm/utils/keyboard-helpers.js.map +7 -0
- package/esm/utils/object-helpers.js +14 -31
- package/esm/utils/object-helpers.js.map +7 -0
- package/esm/utils/refs-helpers.js +15 -19
- package/esm/utils/refs-helpers.js.map +7 -0
- package/esm/utils/selectable-helper.js +32 -43
- package/esm/utils/selectable-helper.js.map +7 -0
- package/esm/utils/string-helpers.js +6 -3
- package/esm/utils/string-helpers.js.map +7 -0
- package/esm/utils/tree-helpers.js +94 -119
- package/esm/utils/tree-helpers.js.map +7 -0
- package/esm/utils/useInstanceRefActions.js +21 -35
- package/esm/utils/useInstanceRefActions.js.map +7 -0
- package/esm/utils/useTree.js +37 -57
- package/esm/utils/useTree.js.map +7 -0
- package/package.json +34 -18
- package/types/hoc/DnDTreeContext.d.ts +14 -0
- package/types/hoc/SortableItemContext.d.ts +19 -0
- package/types/hoc/WithConditionalDnDContext.d.ts +4 -0
- package/types/hoc/WithDnDSortableItemContext.d.ts +4 -0
- package/types/parts/DnDHandle.d.ts +6 -0
- package/types/parts/DropIndicator.d.ts +10 -0
- package/types/parts/TreeItem.d.ts +4 -11
- package/types/parts/TreeList.d.ts +0 -4
- package/types/plugins/dnd/TreeDndPlugin.d.ts +0 -2
- package/types/react-desc-prop-types.d.ts +17 -3
- package/types/sharedTypes.d.ts +1 -8
- package/types/utils/keyboard-helpers.d.ts +2 -1
- package/types/utils/refs-helpers.d.ts +1 -1
- package/types/utils/tree-helpers.d.ts +4 -1
- package/types/utils/useTree.d.ts +1 -0
- package/cjs/utils/dnd-helpers.js +0 -140
- package/cjs/utils/useDnDHelpers.js +0 -220
- package/esm/utils/dnd-helpers.js +0 -132
- package/esm/utils/useDnDHelpers.js +0 -216
- package/types/utils/dnd-helpers.d.ts +0 -39
- package/types/utils/useDnDHelpers.d.ts +0 -26
package/esm/parts/TreeList.js
CHANGED
|
@@ -1,128 +1,94 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const
|
|
23
|
-
const TreeListNoItems = aggregatedClasses('div', {
|
|
24
|
-
'data-testid': treeListNoItemsBn
|
|
25
|
-
})(treeListNoItemsBn); // React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era
|
|
26
|
-
// we omit the LegacyRef typings in favor of hook-era typings
|
|
27
|
-
|
|
28
|
-
const TreeListWrapper = aggregatedClasses('ul', {
|
|
29
|
-
'data-testid': treeListBlockName,
|
|
30
|
-
role: 'tree'
|
|
31
|
-
})(treeListBlockName, null, _ref => {
|
|
32
|
-
let {
|
|
33
|
-
rowSize
|
|
34
|
-
} = _ref;
|
|
35
|
-
return {
|
|
36
|
-
["rowsize-".concat(rowSize)]: rowSize
|
|
37
|
-
};
|
|
38
|
-
});
|
|
39
|
-
const compactRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-compact");
|
|
40
|
-
const normaRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-normal");
|
|
41
|
-
const TreeList = props => {
|
|
42
|
-
const {
|
|
43
|
-
onMouseDragOverItem
|
|
44
|
-
} = props;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useContext } from "react";
|
|
3
|
+
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
4
|
+
import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indicator";
|
|
5
|
+
import TreeViewContext from "../TreeViewContext";
|
|
6
|
+
import { DSTreeViewPrefix, treeListBlockName } from "../config/cssClassesConstants";
|
|
7
|
+
import TreeItem from "./TreeItem";
|
|
8
|
+
import { withConditionalDnDRowContext } from "../hoc/WithConditionalDnDContext";
|
|
9
|
+
import { DnDTreeContext } from "../hoc/DnDTreeContext";
|
|
10
|
+
const treeListNoItemsBn = `${treeListBlockName}-no-items`;
|
|
11
|
+
const TreeListNoItems = aggregatedClasses("div", {
|
|
12
|
+
"data-testid": treeListNoItemsBn
|
|
13
|
+
})(treeListNoItemsBn);
|
|
14
|
+
const TreeListWrapper = aggregatedClasses("ul", {
|
|
15
|
+
"data-testid": treeListBlockName,
|
|
16
|
+
role: "tree"
|
|
17
|
+
})(treeListBlockName, null, ({ rowSize }) => ({
|
|
18
|
+
[`rowsize-${rowSize}`]: rowSize
|
|
19
|
+
}));
|
|
20
|
+
const compactRowClass = `${DSTreeViewPrefix}-tv-row-size-compact`;
|
|
21
|
+
const normaRowClass = `${DSTreeViewPrefix}-tv-row-size-normal`;
|
|
22
|
+
const TreeListComp = () => {
|
|
45
23
|
const ctx = useContext(TreeViewContext);
|
|
46
24
|
const {
|
|
47
25
|
virtualListRef,
|
|
48
26
|
virtualListHelpers,
|
|
49
|
-
visibleItems,
|
|
50
|
-
|
|
51
|
-
props: {
|
|
52
|
-
width,
|
|
53
|
-
height,
|
|
54
|
-
rowSize,
|
|
55
|
-
noItemsPlaceholder,
|
|
56
|
-
isLoading
|
|
57
|
-
}
|
|
27
|
+
visibleItems: flattenedVisibleItems,
|
|
28
|
+
props: { width, height, rowSize, noItemsPlaceholder, isLoading }
|
|
58
29
|
} = ctx;
|
|
59
|
-
const {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
const className = "".concat(rowSize === 'compact' ? "".concat(compactRowClass) : "".concat(normaRowClass));
|
|
64
|
-
return /*#__PURE__*/jsxs(TreeListWrapper, {
|
|
30
|
+
const { totalSize, virtualItems } = virtualListHelpers;
|
|
31
|
+
const className = `${rowSize === "compact" ? `${compactRowClass}` : `${normaRowClass}`}`;
|
|
32
|
+
const { visibleItems } = useContext(DnDTreeContext);
|
|
33
|
+
return /* @__PURE__ */ React2.createElement(TreeListWrapper, {
|
|
65
34
|
ref: virtualListRef,
|
|
66
|
-
className
|
|
35
|
+
className,
|
|
36
|
+
style: {
|
|
37
|
+
height: `${typeof height === "number" ? `${height}px` : height}`,
|
|
38
|
+
width: `${typeof width === "number" ? `${width}px` : width}`,
|
|
39
|
+
overflow: "auto"
|
|
40
|
+
}
|
|
41
|
+
}, isLoading ? /* @__PURE__ */ React2.createElement("div", {
|
|
67
42
|
style: {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
};
|
|
119
|
-
if (withDragAndDrop) return /*#__PURE__*/jsx(DragAndDropTreeItem, _objectSpread(_objectSpread({}, listItemProps), {}, {
|
|
120
|
-
onMouseDragOverItem: onMouseDragOverItem
|
|
121
|
-
}));
|
|
122
|
-
return /*#__PURE__*/jsx(TreeItem, _objectSpread({}, listItemProps));
|
|
123
|
-
})) : null]
|
|
124
|
-
});
|
|
43
|
+
width: "100%",
|
|
44
|
+
height: "100%",
|
|
45
|
+
display: "flex",
|
|
46
|
+
alignItems: "center",
|
|
47
|
+
justifyContent: "center"
|
|
48
|
+
}
|
|
49
|
+
}, /* @__PURE__ */ React2.createElement(DSCircularProgressIndicator, {
|
|
50
|
+
size: "xl",
|
|
51
|
+
loading: isLoading,
|
|
52
|
+
showLabel: true,
|
|
53
|
+
waiting: false,
|
|
54
|
+
showTooltip: false
|
|
55
|
+
})) : null, !isLoading && virtualItems.length === 0 ? /* @__PURE__ */ React2.createElement(TreeListNoItems, null, noItemsPlaceholder) : null, !isLoading && virtualItems.length !== 0 ? /* @__PURE__ */ React2.createElement("div", {
|
|
56
|
+
style: {
|
|
57
|
+
height: `${totalSize}px`,
|
|
58
|
+
width: "100%",
|
|
59
|
+
position: "relative"
|
|
60
|
+
}
|
|
61
|
+
}, virtualItems.map((virtualItem) => {
|
|
62
|
+
const { index, measureRef, start } = virtualItem;
|
|
63
|
+
const item = (visibleItems || flattenedVisibleItems)[index];
|
|
64
|
+
if (!item)
|
|
65
|
+
return null;
|
|
66
|
+
item.virtualIndex = index;
|
|
67
|
+
const { id } = item;
|
|
68
|
+
const style = {
|
|
69
|
+
position: "absolute",
|
|
70
|
+
top: `${start}px`,
|
|
71
|
+
left: 0,
|
|
72
|
+
width: "100%"
|
|
73
|
+
};
|
|
74
|
+
const listItemProps = {
|
|
75
|
+
key: `DS-TreeView-List-Item-${id}`,
|
|
76
|
+
virtualItemRef: measureRef,
|
|
77
|
+
index,
|
|
78
|
+
itemIndex: index,
|
|
79
|
+
item,
|
|
80
|
+
itemWrapperStyle: style
|
|
81
|
+
};
|
|
82
|
+
return /* @__PURE__ */ React2.createElement(TreeItem, {
|
|
83
|
+
...listItemProps
|
|
84
|
+
});
|
|
85
|
+
})) : null);
|
|
86
|
+
};
|
|
87
|
+
const TreeList = withConditionalDnDRowContext(TreeListComp);
|
|
88
|
+
export {
|
|
89
|
+
TreeList,
|
|
90
|
+
TreeListNoItems,
|
|
91
|
+
TreeListWrapper,
|
|
92
|
+
treeListNoItemsBn
|
|
125
93
|
};
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
export { DragAndDropTreeList, TreeList, TreeListNoItems, TreeListWrapper, treeListNoItemsBn };
|
|
94
|
+
//# sourceMappingURL=TreeList.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeList.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nimport TreeViewContext from '../TreeViewContext';\nimport { DSTreeViewPrefix, treeListBlockName } from '../config/cssClassesConstants';\nimport TreeItem from './TreeItem';\n\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { withConditionalDnDRowContext } from '../hoc/WithConditionalDnDContext';\nimport { DnDTreeContext } from '../hoc/DnDTreeContext';\n\nexport const treeListNoItemsBn = `${treeListBlockName}-no-items`;\nexport const TreeListNoItems = aggregatedClasses('div', {\n 'data-testid': treeListNoItemsBn,\n})(treeListNoItemsBn) as unknown as React.ComponentType<React.ComponentProps<'div'>>;\n\n// React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era\n// we omit the LegacyRef typings in favor of hook-era typings\ninterface UlProps extends Omit<React.ComponentProps<'ul'>, 'ref'> {\n ref: React.MutableRefObject<HTMLUListElement | undefined> | undefined;\n}\nexport const TreeListWrapper = aggregatedClasses('ul', {\n 'data-testid': treeListBlockName,\n role: 'tree',\n})(treeListBlockName, null, ({ rowSize }: { rowSize: 'normal' | 'compact' }) => ({\n [`rowsize-${rowSize}`]: rowSize,\n})) as unknown as React.ComponentType<UlProps>;\n\nconst compactRowClass = `${DSTreeViewPrefix}-tv-row-size-compact`;\nconst normaRowClass = `${DSTreeViewPrefix}-tv-row-size-normal`;\n\ninterface PropsT {\n onMouseDragOverItem?: (opts: {\n event: React.MouseEvent<HTMLLIElement>;\n item: DSTreeviewT.Item;\n itemIndex: number;\n setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;\n openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n }) => void;\n}\n\nconst TreeListComp: React.ComponentType<PropsT> = () => {\n const ctx = useContext(TreeViewContext);\n const {\n virtualListRef,\n virtualListHelpers,\n visibleItems: flattenedVisibleItems,\n props: { width, height, rowSize, noItemsPlaceholder, isLoading },\n } = ctx;\n const { totalSize, virtualItems } = virtualListHelpers;\n const className = `${rowSize === 'compact' ? `${compactRowClass}` : `${normaRowClass}`}`;\n\n const { visibleItems } = useContext(DnDTreeContext);\n\n return (\n <TreeListWrapper\n ref={virtualListRef}\n className={className}\n style={{\n height: `${typeof height === 'number' ? `${height}px` : height}`,\n width: `${typeof width === 'number' ? `${width}px` : width}`,\n overflow: 'auto',\n }}\n >\n {isLoading ? (\n <div\n style={{\n width: '100%',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <DSCircularProgressIndicator size=\"xl\" loading={isLoading} showLabel waiting={false} showTooltip={false} />\n </div>\n ) : null}\n {!isLoading && virtualItems.length === 0 ? <TreeListNoItems>{noItemsPlaceholder}</TreeListNoItems> : null}\n {!isLoading && virtualItems.length !== 0 ? (\n <div\n style={{\n height: `${totalSize}px`,\n width: '100%',\n position: 'relative',\n }}\n >\n {virtualItems.map((virtualItem) => {\n const { index, measureRef, start } = virtualItem;\n const item = (visibleItems || flattenedVisibleItems)[index];\n if (!item) return null;\n item.virtualIndex = index;\n const { id } = item;\n\n const style = {\n position: 'absolute',\n top: `${start}px`,\n left: 0,\n width: '100%',\n };\n\n const listItemProps = {\n key: `DS-TreeView-List-Item-${id}`,\n virtualItemRef: measureRef,\n index, // this is consumed by the DnD HOC\n itemIndex: index,\n item,\n itemWrapperStyle: style,\n };\n\n return <TreeItem {...listItemProps} />;\n })}\n </div>\n ) : null}\n </TreeListWrapper>\n );\n};\n\nexport const TreeList = withConditionalDnDRowContext(TreeListComp);\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AAEA;AACA;AACA;AAGA;AACA;AAEO,MAAM,oBAAoB,GAAG;AAC7B,MAAM,kBAAkB,kBAAkB,OAAO;AAAA,EACtD,eAAe;AAAA,GACd;AAOI,MAAM,kBAAkB,kBAAkB,MAAM;AAAA,EACrD,eAAe;AAAA,EACf,MAAM;AAAA,GACL,mBAAmB,MAAM,CAAC,EAAE,cAAkD;AAAA,GAC9E,WAAW,YAAY;AAAA;AAG1B,MAAM,kBAAkB,GAAG;AAC3B,MAAM,gBAAgB,GAAG;AAYzB,MAAM,eAA4C,MAAM;AACtD,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,OAAO,EAAE,OAAO,QAAQ,SAAS,oBAAoB;AAAA,MACnD;AACJ,QAAM,EAAE,WAAW,iBAAiB;AACpC,QAAM,YAAY,GAAG,YAAY,YAAY,GAAG,oBAAoB,GAAG;AAEvE,QAAM,EAAE,iBAAiB,WAAW;AAEpC,SACE,qCAAC,iBAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAQ,GAAG,OAAO,WAAW,WAAW,GAAG,aAAa;AAAA,MACxD,OAAO,GAAG,OAAO,UAAU,WAAW,GAAG,YAAY;AAAA,MACrD,UAAU;AAAA;AAAA,KAGX,YACC,qCAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA;AAAA,KAGlB,qCAAC,6BAAD;AAAA,IAA6B,MAAK;AAAA,IAAK,SAAS;AAAA,IAAW,WAAS;AAAA,IAAC,SAAS;AAAA,IAAO,aAAa;AAAA,QAElG,MACH,CAAC,aAAa,aAAa,WAAW,IAAI,qCAAC,iBAAD,MAAkB,sBAAwC,MACpG,CAAC,aAAa,aAAa,WAAW,IACrC,qCAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,QAAQ,GAAG;AAAA,MACX,OAAO;AAAA,MACP,UAAU;AAAA;AAAA,KAGX,aAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,UAAU;AACrC,UAAM,OAAQ,iBAAgB,uBAAuB;AACrD,QAAI,CAAC;AAAM,aAAO;AAClB,SAAK,eAAe;AACpB,UAAM,EAAE,OAAO;AAEf,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,GAAG;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,KAAK,yBAAyB;AAAA,MAC9B,gBAAgB;AAAA,MAChB;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,kBAAkB;AAAA;AAGpB,WAAO,qCAAC,UAAD;AAAA,SAAc;AAAA;AAAA,QAGvB;AAAA;AAKH,MAAM,WAAW,6BAA6B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,35 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
import { keyCodes } from '../../utils/dnd-helpers.js';
|
|
6
|
-
import TreeViewContext from '../../TreeViewContext.js';
|
|
7
|
-
|
|
8
|
-
const TreeDnD = () => {
|
|
9
|
-
const {
|
|
10
|
-
updateBeforeSortStart,
|
|
11
|
-
onSortStart,
|
|
12
|
-
onMouseDragOverItem,
|
|
13
|
-
onSortEnd
|
|
14
|
-
} = useDnDHelpers();
|
|
15
|
-
const ctx = useContext(TreeViewContext);
|
|
16
|
-
const {
|
|
17
|
-
virtualListRef
|
|
18
|
-
} = ctx;
|
|
19
|
-
return /*#__PURE__*/_jsx(DragAndDropTreeList, {
|
|
20
|
-
useDragHandle: true,
|
|
21
|
-
transitionDuration: 0,
|
|
22
|
-
keyboardSortingTransitionDuration: 0,
|
|
23
|
-
hideSortableGhost: false,
|
|
24
|
-
disableAnimation: true,
|
|
25
|
-
updateBeforeSortStart: updateBeforeSortStart,
|
|
26
|
-
onSortStart: onSortStart,
|
|
27
|
-
onMouseDragOverItem: onMouseDragOverItem,
|
|
28
|
-
onSortEnd: onSortEnd,
|
|
29
|
-
getContainer: () => virtualListRef === null || virtualListRef === void 0 ? void 0 : virtualListRef.current,
|
|
30
|
-
keyCodes: keyCodes
|
|
31
|
-
});
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const TreeDndPlugin = "tree-dnd";
|
|
3
|
+
export {
|
|
4
|
+
TreeDndPlugin
|
|
32
5
|
};
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
export { TreeDnD, TreeDndPlugin };
|
|
6
|
+
//# sourceMappingURL=TreeDndPlugin.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/dnd/TreeDndPlugin.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const TreeDndPlugin = 'tree-dnd';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,gBAAgB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/plugins/dnd/index.js
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/dnd/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeDndPlugin';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/plugins/index.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export * from "./dnd";
|
|
3
|
+
export * from "./roving";
|
|
4
|
+
export * from "./selectable";
|
|
5
|
+
export * from "./toolbar";
|
|
6
|
+
export * from "./tree";
|
|
7
|
+
export * from "./virtualization";
|
|
8
|
+
export * from "./searchable";
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/plugins/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './dnd';\nexport * from './roving';\nexport * from './selectable';\nexport * from './toolbar';\nexport * from './tree';\nexport * from './virtualization';\nexport * from './searchable';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/roving/TreeRovingPlugin.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const TreeRovingPlugin = 'tree-roving';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,mBAAmB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/roving/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeRovingPlugin';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/searchable/SearchableTreePlugin.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const SearchableTreePlugin = 'tree-searchable';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,uBAAuB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/searchable/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './SearchableTreePlugin';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/selectable/SelectablePluginTree.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const SelectablePluginTree = 'tree-selectable';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,uBAAuB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/selectable/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './SelectablePluginTree';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/toolbar/TreeToolbarPlugin.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const TreeToolbarPlugin = 'tree-toolbar';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,oBAAoB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/toolbar/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeToolbarPlugin';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/tree/TreeDataPlugin.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const TreePluginList = 'tree-data';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,iBAAiB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/tree/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeDataPlugin';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const TreeVirtualizationPlugin = "tree-virtualization";
|
|
3
|
+
export {
|
|
4
|
+
TreeVirtualizationPlugin
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=TreeVirtualizationPlugin.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/virtualization/TreeVirtualizationPlugin.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const TreeVirtualizationPlugin = 'tree-virtualization';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,2BAA2B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/virtualization/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeVirtualizationPlugin';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|