@elliemae/ds-treeview 2.0.0-alpha.5 → 2.0.0-alpha.9
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 +3 -3
- package/cjs/TreeViewContext.js +1 -1
- package/cjs/deprecated/TreeView.js +4 -4
- package/cjs/deprecated/__testUtils__/utils.js +3 -3
- package/cjs/deprecated/plugins/dnd/TreeDndPlugin.js +2 -2
- package/cjs/deprecated/plugins/dnd/renderers/DraggableItem.js +4 -4
- package/cjs/deprecated/plugins/dnd/renderers/DroppableList.js +6 -6
- package/cjs/deprecated/plugins/dnd/utils.js +1 -1
- package/cjs/deprecated/plugins/roving/TreeRovingPlugin.js +5 -5
- package/cjs/deprecated/plugins/searchable/SearchableTreePlugin.js +3 -3
- package/cjs/deprecated/plugins/selectable/SelectablePluginTree.js +5 -5
- package/cjs/deprecated/plugins/toolbar/TreeToolbarPlugin.js +8 -8
- package/cjs/deprecated/plugins/tree/TreeDataPlugin.js +9 -9
- package/cjs/deprecated/plugins/tree/useExpandTreeState.js +2 -2
- package/cjs/deprecated/plugins/tree/utils.js +5 -5
- package/cjs/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js +5 -5
- package/cjs/deprecated/renderers.js +3 -3
- package/cjs/parts/CheckboxSelectable.js +4 -4
- package/cjs/parts/ChildrenCountDisplayer.js +1 -1
- package/cjs/parts/ExpandCaret.js +5 -5
- package/cjs/parts/Icon.js +2 -2
- package/cjs/parts/NestingSpace.js +2 -2
- package/cjs/parts/RadioSelectable.js +2 -2
- package/cjs/parts/TreeItem.js +11 -11
- package/cjs/parts/TreeItemText.js +12 -12
- package/cjs/parts/TreeList.js +5 -5
- package/cjs/plugins/dnd/TreeDndPlugin.js +2 -2
- package/cjs/prop-types.js +20 -20
- package/cjs/related-components/TreeViewSearchBar.js +1 -1
- package/cjs/utils/keyboard-helpers.js +1 -1
- package/cjs/utils/selectable-helper.js +1 -1
- package/cjs/utils/useDnDHelpers.js +1 -1
- package/cjs/utils/useTree.js +2 -2
- package/package.json +7 -7
package/cjs/TreeView.js
CHANGED
|
@@ -26,7 +26,7 @@ var _TreeDnD, _TreeList;
|
|
|
26
26
|
|
|
27
27
|
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; }
|
|
28
28
|
|
|
29
|
-
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__default[
|
|
29
|
+
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__default["default"](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; }
|
|
30
30
|
function TreeView(props) {
|
|
31
31
|
const treeRef = React.useRef({
|
|
32
32
|
actions: {}
|
|
@@ -114,9 +114,9 @@ function TreeView(props) {
|
|
|
114
114
|
ctx.props.onInstanceRefInitialized(treeRef);
|
|
115
115
|
}, 100);
|
|
116
116
|
}, []);
|
|
117
|
-
return /*#__PURE__*/_jsx__default[
|
|
117
|
+
return /*#__PURE__*/_jsx__default["default"](TreeViewContext["default"].Provider, {
|
|
118
118
|
value: ctx
|
|
119
|
-
}, void 0, plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin.TreeDndPlugin) ? _TreeDnD || (_TreeDnD = /*#__PURE__*/_jsx__default[
|
|
119
|
+
}, void 0, plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin.TreeDndPlugin) ? _TreeDnD || (_TreeDnD = /*#__PURE__*/_jsx__default["default"](TreeDndPlugin.TreeDnD, {})) : _TreeList || (_TreeList = /*#__PURE__*/_jsx__default["default"](TreeList.TreeList, {})));
|
|
120
120
|
}
|
|
121
121
|
TreeView.defaultProps = TreeViewContext.defaultProps;
|
|
122
122
|
const TreeViewWithSchema = reactDesc.describe(TreeView);
|
package/cjs/TreeViewContext.js
CHANGED
|
@@ -102,6 +102,6 @@ const TreeViewContext = /*#__PURE__*/React.createContext({
|
|
|
102
102
|
setHoverItem: () => {}
|
|
103
103
|
});
|
|
104
104
|
|
|
105
|
-
exports[
|
|
105
|
+
exports["default"] = TreeViewContext;
|
|
106
106
|
exports.defaultProps = defaultProps;
|
|
107
107
|
exports.defaultRelativeMouseCoord = defaultRelativeMouseCoord;
|
|
@@ -24,9 +24,9 @@ const _excluded = ["data", "plugins", "children", "roving", "rowSize"];
|
|
|
24
24
|
|
|
25
25
|
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; }
|
|
26
26
|
|
|
27
|
-
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__default[
|
|
27
|
+
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__default["default"](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; }
|
|
28
28
|
|
|
29
|
-
const wrapComponentIfExists = (Wrapper, children) => Wrapper ? /*#__PURE__*/_jsx__default[
|
|
29
|
+
const wrapComponentIfExists = (Wrapper, children) => Wrapper ? /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, children) : children;
|
|
30
30
|
|
|
31
31
|
function TreeView(_ref) {
|
|
32
32
|
let {
|
|
@@ -36,9 +36,9 @@ function TreeView(_ref) {
|
|
|
36
36
|
roving = true,
|
|
37
37
|
rowSize = 'normal'
|
|
38
38
|
} = _ref,
|
|
39
|
-
props = _objectWithoutProperties__default[
|
|
39
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
40
40
|
|
|
41
|
-
const instance = useDataList__default[
|
|
41
|
+
const instance = useDataList__default["default"](_objectSpread(_objectSpread({
|
|
42
42
|
data,
|
|
43
43
|
plugins: [TreeDataPlugin.TreePluginList, TreeVirtualizationPlugin.TreeVirtualizationPlugin, roving && TreeRovingPlugin.TreeRovingPlugin, ...plugins],
|
|
44
44
|
customDecorators: {
|
|
@@ -34,7 +34,7 @@ const _excluded = ["data", "plugins"],
|
|
|
34
34
|
|
|
35
35
|
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; }
|
|
36
36
|
|
|
37
|
-
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__default[
|
|
37
|
+
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__default["default"](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; }
|
|
38
38
|
const treeItemsToMap = items => {
|
|
39
39
|
const itemsMap = new Map();
|
|
40
40
|
items.forEach(item => itemsMap.set(item.textContent.replace(/\(.*?\)/, '').replace(' ', ''), item));
|
|
@@ -54,7 +54,7 @@ function getTreeItemsFromRender(_ref, key = renderers.treeItemBlockName) {
|
|
|
54
54
|
data,
|
|
55
55
|
plugins
|
|
56
56
|
} = _ref,
|
|
57
|
-
props = _objectWithoutProperties__default[
|
|
57
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
58
58
|
|
|
59
59
|
const _render = react.render( /*#__PURE__*/jsxRuntime.jsx(TreeView.TreeView, _objectSpread(_objectSpread({}, props), {}, {
|
|
60
60
|
data: data,
|
|
@@ -65,7 +65,7 @@ function getTreeItemsFromRender(_ref, key = renderers.treeItemBlockName) {
|
|
|
65
65
|
{
|
|
66
66
|
getAllByTestId
|
|
67
67
|
} = _render,
|
|
68
|
-
testingLibraryApi = _objectWithoutProperties__default[
|
|
68
|
+
testingLibraryApi = _objectWithoutProperties__default["default"](_render, _excluded2);
|
|
69
69
|
|
|
70
70
|
const items = getAllByTestId(key);
|
|
71
71
|
const itemsMap = treeItemsToMap(items);
|
|
@@ -17,8 +17,8 @@ var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createIns
|
|
|
17
17
|
|
|
18
18
|
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; }
|
|
19
19
|
|
|
20
|
-
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__default[
|
|
21
|
-
const TreeDndPlugin = createInstancePlugin__default[
|
|
20
|
+
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__default["default"](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; }
|
|
21
|
+
const TreeDndPlugin = createInstancePlugin__default["default"]('tree-dnd', {
|
|
22
22
|
state(instance) {
|
|
23
23
|
const {
|
|
24
24
|
originalData,
|
|
@@ -20,7 +20,7 @@ const _excluded = ["key"];
|
|
|
20
20
|
|
|
21
21
|
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; }
|
|
22
22
|
|
|
23
|
-
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__default[
|
|
23
|
+
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__default["default"](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; }
|
|
24
24
|
|
|
25
25
|
const DraggableItem = (renderers // , instance
|
|
26
26
|
) => props => {
|
|
@@ -35,7 +35,7 @@ const DraggableItem = (renderers // , instance
|
|
|
35
35
|
const isDragDisabled = (record === null || record === void 0 ? void 0 : (_record$parentNode = record.parentNode) === null || _record$parentNode === void 0 ? void 0 : (_record$parentNode$da = _record$parentNode.data) === null || _record$parentNode$da === void 0 ? void 0 : _record$parentNode$da.disableDragChildren) || (record === null || record === void 0 ? void 0 : (_record$data = record.data) === null || _record$data === void 0 ? void 0 : _record$data.disableDrag) || false; // const { draggedRecord } = instance.getInstance().state;
|
|
36
36
|
// const isDragging = record.id === draggedRecord?.id;
|
|
37
37
|
|
|
38
|
-
return /*#__PURE__*/_jsx__default[
|
|
38
|
+
return /*#__PURE__*/_jsx__default["default"](reactBeautifulDnd.Draggable, {
|
|
39
39
|
isDragDisabled: isDragDisabled,
|
|
40
40
|
draggableId: String(record.id),
|
|
41
41
|
index: index
|
|
@@ -44,11 +44,11 @@ const DraggableItem = (renderers // , instance
|
|
|
44
44
|
{
|
|
45
45
|
key
|
|
46
46
|
} = _getDraggableProps,
|
|
47
|
-
draggableProps = _objectWithoutProperties__default[
|
|
47
|
+
draggableProps = _objectWithoutProperties__default["default"](_getDraggableProps, _excluded);
|
|
48
48
|
|
|
49
49
|
return /*#__PURE__*/jsxRuntime.jsx(ItemComponent, _objectSpread(_objectSpread({}, draggableProps), {}, {
|
|
50
50
|
// isDragging={isDragging}
|
|
51
|
-
leftAddons: [/*#__PURE__*/jsxRuntime.jsx(GripperVertical__default[
|
|
51
|
+
leftAddons: [/*#__PURE__*/jsxRuntime.jsx(GripperVertical__default["default"], _objectSpread(_objectSpread({
|
|
52
52
|
"data-testid": "drag-handle"
|
|
53
53
|
}, provided.dragHandleProps), {}, {
|
|
54
54
|
className: "drag-handle",
|
|
@@ -25,13 +25,13 @@ const _excluded = ["records"];
|
|
|
25
25
|
|
|
26
26
|
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; }
|
|
27
27
|
|
|
28
|
-
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__default[
|
|
28
|
+
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__default["default"](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; }
|
|
29
29
|
|
|
30
30
|
const DroppableList = (renderers, instance) => _ref => {
|
|
31
31
|
let {
|
|
32
32
|
records
|
|
33
33
|
} = _ref,
|
|
34
|
-
rest = _objectWithoutProperties__default[
|
|
34
|
+
rest = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
35
35
|
|
|
36
36
|
const {
|
|
37
37
|
props: {
|
|
@@ -48,7 +48,7 @@ const DroppableList = (renderers, instance) => _ref => {
|
|
|
48
48
|
},
|
|
49
49
|
itemRenderer
|
|
50
50
|
} = instance.getInstance();
|
|
51
|
-
const focusContext = React.useContext(FocusGroupContext__default[
|
|
51
|
+
const focusContext = React.useContext(FocusGroupContext__default["default"]);
|
|
52
52
|
const [focusedItemWasDragged, setFocusedItemWasDragged] = React.useState(false);
|
|
53
53
|
const preDragFocusedNode = React.useRef();
|
|
54
54
|
const expandTimerRef = React.useRef();
|
|
@@ -143,18 +143,18 @@ const DroppableList = (renderers, instance) => _ref => {
|
|
|
143
143
|
record: record
|
|
144
144
|
}, utils$1.getDraggableProps({
|
|
145
145
|
className: 'item-cloned'
|
|
146
|
-
}, provided, snapshot)), /*#__PURE__*/jsxRuntime.jsx(GripperVertical__default[
|
|
146
|
+
}, provided, snapshot)), /*#__PURE__*/jsxRuntime.jsx(GripperVertical__default["default"], _objectSpread(_objectSpread({}, provided.dragHandleProps), {}, {
|
|
147
147
|
className: "drag-handle"
|
|
148
148
|
})), itemRenderer({
|
|
149
149
|
record,
|
|
150
150
|
nestingLevel: targetRecord.nestingLevel
|
|
151
151
|
}));
|
|
152
152
|
}, [currTargetRef, records, itemRenderer]);
|
|
153
|
-
return /*#__PURE__*/_jsx__default[
|
|
153
|
+
return /*#__PURE__*/_jsx__default["default"](reactBeautifulDnd.DragDropContext, {
|
|
154
154
|
onDragEnd: onDragEnd,
|
|
155
155
|
onDragStart: onDragStart,
|
|
156
156
|
onDragUpdate: onDragUpdate
|
|
157
|
-
}, void 0, /*#__PURE__*/_jsx__default[
|
|
157
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](reactBeautifulDnd.Droppable, {
|
|
158
158
|
droppableId: "droppableId",
|
|
159
159
|
isCombineEnabled: true,
|
|
160
160
|
mode: "virtual",
|
|
@@ -12,7 +12,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
|
|
|
12
12
|
|
|
13
13
|
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; }
|
|
14
14
|
|
|
15
|
-
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__default[
|
|
15
|
+
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__default["default"](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; }
|
|
16
16
|
function getStyle(provided, style) {
|
|
17
17
|
if (!style) {
|
|
18
18
|
return provided.draggableProps.style;
|
|
@@ -25,13 +25,13 @@ const _excluded = ["innerRef", "onFocus", "onBlur"];
|
|
|
25
25
|
|
|
26
26
|
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; }
|
|
27
27
|
|
|
28
|
-
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__default[
|
|
28
|
+
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__default["default"](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; }
|
|
29
29
|
|
|
30
30
|
const TreeListRovingHoc = instance => props => {
|
|
31
31
|
const {
|
|
32
32
|
hotKeys
|
|
33
33
|
} = instance.getInstance();
|
|
34
|
-
return /*#__PURE__*/_jsx__default[
|
|
34
|
+
return /*#__PURE__*/_jsx__default["default"](FocusGroupProvider__default["default"], {
|
|
35
35
|
hotKeys: hotKeys
|
|
36
36
|
}, void 0, props.children);
|
|
37
37
|
}; // eslint-disable-next-line react/display-name
|
|
@@ -43,12 +43,12 @@ const TreeItemRovingHoc = Component => _ref => {
|
|
|
43
43
|
onFocus,
|
|
44
44
|
onBlur
|
|
45
45
|
} = _ref,
|
|
46
|
-
props = _objectWithoutProperties__default[
|
|
46
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
47
47
|
|
|
48
48
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
49
49
|
const ref = React.useRef(null); // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
50
50
|
|
|
51
|
-
useFocusGroupItem__default[
|
|
51
|
+
useFocusGroupItem__default["default"](ref, {
|
|
52
52
|
onFocus,
|
|
53
53
|
onBlur
|
|
54
54
|
});
|
|
@@ -57,7 +57,7 @@ const TreeItemRovingHoc = Component => _ref => {
|
|
|
57
57
|
}));
|
|
58
58
|
};
|
|
59
59
|
|
|
60
|
-
const TreeRovingPlugin = createInstancePlugin__default[
|
|
60
|
+
const TreeRovingPlugin = createInstancePlugin__default["default"]('tree-data', {
|
|
61
61
|
getItemProps(props, instance) {
|
|
62
62
|
const [isItemFocused, setIsItemFocused] = React.useState(false);
|
|
63
63
|
return _objectSpread(_objectSpread({}, props), {}, {
|
|
@@ -69,7 +69,7 @@ const itemRenderer = (value, itemProps, instance) => {
|
|
|
69
69
|
}
|
|
70
70
|
} = instance.getInstance();
|
|
71
71
|
if (!showHighlight || !searchQuery) return value;
|
|
72
|
-
return /*#__PURE__*/_jsx__default[
|
|
72
|
+
return /*#__PURE__*/_jsx__default["default"](Highlighter__default["default"], {
|
|
73
73
|
autoEscape: true,
|
|
74
74
|
highlightClassName: "tree-text-highlight",
|
|
75
75
|
searchWords: [searchQuery],
|
|
@@ -78,7 +78,7 @@ const itemRenderer = (value, itemProps, instance) => {
|
|
|
78
78
|
};
|
|
79
79
|
|
|
80
80
|
itemRenderer.order = 0;
|
|
81
|
-
const SearchableTreePlugin = createInstancePlugin__default[
|
|
81
|
+
const SearchableTreePlugin = createInstancePlugin__default["default"]('searchable-tree', {
|
|
82
82
|
instance: instance => {
|
|
83
83
|
const {
|
|
84
84
|
props: {
|
|
@@ -86,7 +86,7 @@ const SearchableTreePlugin = createInstancePlugin__default['default']('searchabl
|
|
|
86
86
|
}
|
|
87
87
|
} = instance; // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
88
88
|
|
|
89
|
-
const prevSearchQuery = usePrevious__default[
|
|
89
|
+
const prevSearchQuery = usePrevious__default["default"](searchQuery);
|
|
90
90
|
return {
|
|
91
91
|
prevSearchQuery
|
|
92
92
|
};
|
|
@@ -26,7 +26,7 @@ var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createIns
|
|
|
26
26
|
|
|
27
27
|
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; }
|
|
28
28
|
|
|
29
|
-
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__default[
|
|
29
|
+
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__default["default"](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; }
|
|
30
30
|
|
|
31
31
|
const updateParentState = ({
|
|
32
32
|
node,
|
|
@@ -70,7 +70,7 @@ const useSelectableTreeState = instance => {
|
|
|
70
70
|
isSingleSelect = false
|
|
71
71
|
}
|
|
72
72
|
} = instance;
|
|
73
|
-
const [selection, setSelection] = useDerivedStateFromProps__default[
|
|
73
|
+
const [selection, setSelection] = useDerivedStateFromProps__default["default"](selectionProp);
|
|
74
74
|
const isAllSelected = React.useMemo(() => {
|
|
75
75
|
if (!isMultiSelect) return false;
|
|
76
76
|
const amountSelected = originalData.reduce((result, item) => selection[item[idKey]] === true ? result + 1 : result, 0);
|
|
@@ -161,7 +161,7 @@ const updateParentInternalState = (record, checked) => {
|
|
|
161
161
|
parentNode.selectedChildren = parentNode.selectedChildren.filter(id => id !== record.id);
|
|
162
162
|
}
|
|
163
163
|
};
|
|
164
|
-
const SelectablePluginTree = createInstancePlugin__default[
|
|
164
|
+
const SelectablePluginTree = createInstancePlugin__default["default"]('selectable', {
|
|
165
165
|
state: useSelectableTreeState,
|
|
166
166
|
// itemRenderer: SelectionFormatter,
|
|
167
167
|
record: (record, instance) => {
|
|
@@ -216,7 +216,7 @@ const SelectablePluginTree = createInstancePlugin__default['default']('selectabl
|
|
|
216
216
|
itemIndex: props === null || props === void 0 ? void 0 : props.index
|
|
217
217
|
});
|
|
218
218
|
|
|
219
|
-
const checkboxAddon = isMultiSelect && /*#__PURE__*/_jsx__default[
|
|
219
|
+
const checkboxAddon = isMultiSelect && /*#__PURE__*/_jsx__default["default"](Checkbox__default["default"], {
|
|
220
220
|
checked: record.checked,
|
|
221
221
|
disabled: record.isGroup ? disableGroups : disableLeafs,
|
|
222
222
|
className: "tree-item-checkbox",
|
|
@@ -225,7 +225,7 @@ const SelectablePluginTree = createInstancePlugin__default['default']('selectabl
|
|
|
225
225
|
tabIndex: -1
|
|
226
226
|
});
|
|
227
227
|
|
|
228
|
-
const radioAddon = isSingleSelect && !isMultiSelect && /*#__PURE__*/_jsx__default[
|
|
228
|
+
const radioAddon = isSingleSelect && !isMultiSelect && /*#__PURE__*/_jsx__default["default"](Radio__default["default"], {
|
|
229
229
|
checked: !!record.checked,
|
|
230
230
|
disabled: record.isGroup ? disableGroups : disableLeafs,
|
|
231
231
|
className: "tree-item-radio",
|
|
@@ -29,7 +29,7 @@ const _excluded = ["onMouseEnter", "onMouseLeave", "extraParams", "renderToolbar
|
|
|
29
29
|
|
|
30
30
|
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; }
|
|
31
31
|
|
|
32
|
-
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__default[
|
|
32
|
+
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__default["default"](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; }
|
|
33
33
|
|
|
34
34
|
const ToolbarDisclosure = props => {
|
|
35
35
|
const {
|
|
@@ -38,12 +38,12 @@ const ToolbarDisclosure = props => {
|
|
|
38
38
|
extraParams,
|
|
39
39
|
renderToolbar,
|
|
40
40
|
isItemFocused,
|
|
41
|
-
icon = /*#__PURE__*/_jsx__default[
|
|
41
|
+
icon = /*#__PURE__*/_jsx__default["default"](MoreOptionsVert__default["default"], {
|
|
42
42
|
color: ['brand-primary', 800]
|
|
43
43
|
}),
|
|
44
44
|
rowSize
|
|
45
45
|
} = props,
|
|
46
|
-
rest = _objectWithoutProperties__default[
|
|
46
|
+
rest = _objectWithoutProperties__default["default"](props, _excluded);
|
|
47
47
|
|
|
48
48
|
const toolbarContext = React.useContext(ToolbarProvider.ToolbarContext);
|
|
49
49
|
const ref = React.useRef(null);
|
|
@@ -66,7 +66,7 @@ const ToolbarDisclosure = props => {
|
|
|
66
66
|
toolbarContext.hide(e);
|
|
67
67
|
};
|
|
68
68
|
|
|
69
|
-
return /*#__PURE__*/jsxRuntime.jsx(Button__default[
|
|
69
|
+
return /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], _objectSpread(_objectSpread({}, rest), {}, {
|
|
70
70
|
buttonType: "text",
|
|
71
71
|
className: "toolbar-trigger",
|
|
72
72
|
icon: icon,
|
|
@@ -88,7 +88,7 @@ const TriggerFormatter = (value, extraParams, instance) => {
|
|
|
88
88
|
}
|
|
89
89
|
} = instance.getInstance();
|
|
90
90
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
91
|
-
children: [value, /*#__PURE__*/_jsx__default[
|
|
91
|
+
children: [value, /*#__PURE__*/_jsx__default["default"](ToolbarDisclosure, {
|
|
92
92
|
isItemFocused: extraParams.isItemFocused,
|
|
93
93
|
onClose: onCloseToolbar,
|
|
94
94
|
onShow: onShowToolbar,
|
|
@@ -98,7 +98,7 @@ const TriggerFormatter = (value, extraParams, instance) => {
|
|
|
98
98
|
});
|
|
99
99
|
};
|
|
100
100
|
|
|
101
|
-
const TreeToolbarPlugin = createInstancePlugin__default[
|
|
101
|
+
const TreeToolbarPlugin = createInstancePlugin__default["default"]('tree-toolbar', {
|
|
102
102
|
itemRenderer: TriggerFormatter,
|
|
103
103
|
|
|
104
104
|
renderers(renderers) {
|
|
@@ -106,8 +106,8 @@ const TreeToolbarPlugin = createInstancePlugin__default['default']('tree-toolbar
|
|
|
106
106
|
const Component = renderers.list; // eslint-disable-next-line react/display-name
|
|
107
107
|
|
|
108
108
|
return props => {
|
|
109
|
-
const focusContext = React.useContext(FocusGroupContext__default[
|
|
110
|
-
return /*#__PURE__*/_jsx__default[
|
|
109
|
+
const focusContext = React.useContext(FocusGroupContext__default["default"]);
|
|
110
|
+
return /*#__PURE__*/_jsx__default["default"](ToolbarProvider__default["default"], {
|
|
111
111
|
onHide: (state, e) => {
|
|
112
112
|
if (e && e.type === 'keydown' && focusContext) focusContext.focus();
|
|
113
113
|
}
|
|
@@ -30,7 +30,7 @@ var _ArrowheadDown, _ArrowheadRight;
|
|
|
30
30
|
|
|
31
31
|
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; }
|
|
32
32
|
|
|
33
|
-
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__default[
|
|
33
|
+
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__default["default"](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; }
|
|
34
34
|
const ItemContent = dsClassnames.aggregatedClasses('div')(`${renderers.treeItemBlockName}-content`);
|
|
35
35
|
const ItemValue = dsClassnames.aggregatedClasses('span')(renderers.treeItemBlockName, 'value');
|
|
36
36
|
|
|
@@ -65,14 +65,14 @@ const itemRenderer = (value, itemProps, instance) => {
|
|
|
65
65
|
}, [record.data, onItemClick]);
|
|
66
66
|
const amountChildren = Number(utils$1.getItemChildrenLength(record));
|
|
67
67
|
const renderedLabel = utils.isFunction(labelRenderer) && labelRenderer(value, itemProps) || value;
|
|
68
|
-
return /*#__PURE__*/_jsx__default[
|
|
68
|
+
return /*#__PURE__*/_jsx__default["default"](ItemContent, {
|
|
69
69
|
"data-testid": `${renderers.treeItemBlockName}-content`,
|
|
70
70
|
onClick: handleItemClick
|
|
71
|
-
}, void 0, /*#__PURE__*/_jsx__default[
|
|
71
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](ItemValue, {}, void 0, renderedLabel, showChildrenAmount && record.isGroup && ` (${amountChildren})`));
|
|
72
72
|
};
|
|
73
73
|
|
|
74
74
|
itemRenderer.order = 100;
|
|
75
|
-
const TreePluginList = createInstancePlugin__default[
|
|
75
|
+
const TreePluginList = createInstancePlugin__default["default"]('tree-data', {
|
|
76
76
|
state: useExpandTreeState.useExpandTreeState,
|
|
77
77
|
recordIterator: opts => {
|
|
78
78
|
const shouldWalkChildren = record => {
|
|
@@ -117,13 +117,13 @@ const TreePluginList = createInstancePlugin__default['default']('tree-data', {
|
|
|
117
117
|
spaceForNestingLevel
|
|
118
118
|
});
|
|
119
119
|
|
|
120
|
-
const expandAddon = record.isGroup && /*#__PURE__*/_jsx__default[
|
|
120
|
+
const expandAddon = record.isGroup && /*#__PURE__*/_jsx__default["default"](Button__default["default"], {
|
|
121
121
|
buttonType: "text",
|
|
122
122
|
className: "expandable-arrow",
|
|
123
123
|
"data-testid": "tree-item-expand-toggle",
|
|
124
|
-
icon: record.expanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default[
|
|
124
|
+
icon: record.expanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](ArrowheadDown__default["default"], {
|
|
125
125
|
"data-testid": "ic-arrow-head-down"
|
|
126
|
-
})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default[
|
|
126
|
+
})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](ArrowheadRight__default["default"], {
|
|
127
127
|
"data-testid": "ic-arrow-head-right"
|
|
128
128
|
})),
|
|
129
129
|
onClick: e => {
|
|
@@ -136,12 +136,12 @@ const TreePluginList = createInstancePlugin__default['default']('tree-data', {
|
|
|
136
136
|
|
|
137
137
|
}, `${record.id}-expand-addon`);
|
|
138
138
|
|
|
139
|
-
const iconAddon = icon && /*#__PURE__*/React__default[
|
|
139
|
+
const iconAddon = icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
|
|
140
140
|
'data-testid': record.isGroup ? 'tree-item-group-icon' : 'tree-item-icon',
|
|
141
141
|
className: utils.cx(icon.props.className, 'tree-item-icon')
|
|
142
142
|
});
|
|
143
143
|
|
|
144
|
-
const spaceAddon = /*#__PURE__*/_jsx__default[
|
|
144
|
+
const spaceAddon = /*#__PURE__*/_jsx__default["default"]("div", {
|
|
145
145
|
"data-testid": "tree-item-nested-space",
|
|
146
146
|
style: {
|
|
147
147
|
width: itemNestingLeftPadding
|
|
@@ -15,7 +15,7 @@ var useExpandState__default = /*#__PURE__*/_interopDefaultLegacy(useExpandState)
|
|
|
15
15
|
|
|
16
16
|
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; }
|
|
17
17
|
|
|
18
|
-
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__default[
|
|
18
|
+
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__default["default"](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; }
|
|
19
19
|
|
|
20
20
|
const toggleExpandAllAsync = (expand, data) => new Promise(resolve => {
|
|
21
21
|
const nextState = {};
|
|
@@ -46,7 +46,7 @@ const useExpandTreeState = instance => {
|
|
|
46
46
|
onCollapse
|
|
47
47
|
}
|
|
48
48
|
} = instance;
|
|
49
|
-
const expandedState = useExpandState__default[
|
|
49
|
+
const expandedState = useExpandState__default["default"]({
|
|
50
50
|
items: originalData,
|
|
51
51
|
itemKey,
|
|
52
52
|
expanded: expandedItemsProp,
|
|
@@ -8,14 +8,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
8
|
|
|
9
9
|
var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
|
|
10
10
|
|
|
11
|
-
const getParentId = record => get__default[
|
|
11
|
+
const getParentId = record => get__default["default"](record, ['parentNode', 'id']);
|
|
12
12
|
const findItemOnDocument = id => document.querySelector(`[data-id="${id}"]`);
|
|
13
13
|
const getListFromDocument = () => document.querySelector(`[data-testid="tree-list"]`);
|
|
14
|
-
const getParentChildren = (record, childrenKey = 'children') => get__default[
|
|
15
|
-
const getItemLabel = (record, nameKey = 'name') => get__default[
|
|
16
|
-
const getItemChildren = (record, childrenKey = 'children') => get__default[
|
|
14
|
+
const getParentChildren = (record, childrenKey = 'children') => get__default["default"](record, ['parentNode', 'data', childrenKey]);
|
|
15
|
+
const getItemLabel = (record, nameKey = 'name') => get__default["default"](record, ['data', nameKey]);
|
|
16
|
+
const getItemChildren = (record, childrenKey = 'children') => get__default["default"](record, ['data', childrenKey]);
|
|
17
17
|
const getItemChildrenLength = (record, childrenKey = 'children') => {
|
|
18
|
-
const children = get__default[
|
|
18
|
+
const children = get__default["default"](record, ['data', childrenKey]);
|
|
19
19
|
return children && children.length;
|
|
20
20
|
};
|
|
21
21
|
const findItemById = (records, id) => records.find(record => String(record.id) === id);
|
|
@@ -24,7 +24,7 @@ const _excluded = ["records", "itemRenderer", "innerRef"];
|
|
|
24
24
|
|
|
25
25
|
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; }
|
|
26
26
|
|
|
27
|
-
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__default[
|
|
27
|
+
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__default["default"](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; }
|
|
28
28
|
|
|
29
29
|
function shallowDiffers(prev, next) {
|
|
30
30
|
// eslint-disable-next-line no-restricted-syntax
|
|
@@ -61,7 +61,7 @@ function areEqualRecords(prevProps, nextProps) {
|
|
|
61
61
|
// https://react-window.now.sh/#/examples/list/memoized-list-items
|
|
62
62
|
|
|
63
63
|
|
|
64
|
-
const VirtualizedTreeItem = /*#__PURE__*/React__default[
|
|
64
|
+
const VirtualizedTreeItem = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/React__default["default"].forwardRef(({
|
|
65
65
|
index,
|
|
66
66
|
style,
|
|
67
67
|
data
|
|
@@ -102,7 +102,7 @@ const VirtualizedTree = (renderers$1, instance) => _ref => {
|
|
|
102
102
|
itemRenderer,
|
|
103
103
|
innerRef
|
|
104
104
|
} = _ref,
|
|
105
|
-
rest = _objectWithoutProperties__default[
|
|
105
|
+
rest = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
106
106
|
|
|
107
107
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
108
108
|
const {
|
|
@@ -136,7 +136,7 @@ const VirtualizedTree = (renderers$1, instance) => _ref => {
|
|
|
136
136
|
}), [records, currRenderers, listRef]); // todo: revise this
|
|
137
137
|
|
|
138
138
|
if (records && !records.length) {
|
|
139
|
-
return /*#__PURE__*/_jsx__default[
|
|
139
|
+
return /*#__PURE__*/_jsx__default["default"](renderers.TreeListNoItems, {}, void 0, noItemsPlaceholder);
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
return /*#__PURE__*/jsxRuntime.jsx(ListComponent, _objectSpread(_objectSpread({
|
|
@@ -155,7 +155,7 @@ const VirtualizedTree = (renderers$1, instance) => _ref => {
|
|
|
155
155
|
}));
|
|
156
156
|
};
|
|
157
157
|
|
|
158
|
-
const TreeVirtualizationPlugin = createInstancePlugin__default[
|
|
158
|
+
const TreeVirtualizationPlugin = createInstancePlugin__default["default"]('tree-virtualization', {
|
|
159
159
|
state() {
|
|
160
160
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
161
161
|
const listRef = React.useRef();
|
|
@@ -19,7 +19,7 @@ const _excluded = ["leftAddons", "rightAddons", "children"];
|
|
|
19
19
|
|
|
20
20
|
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; }
|
|
21
21
|
|
|
22
|
-
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__default[
|
|
22
|
+
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__default["default"](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; }
|
|
23
23
|
const treeListBlockName = 'tree-list';
|
|
24
24
|
const treeItemBlockName = 'tree-item';
|
|
25
25
|
const treeListNoItemsBn = `${treeListBlockName}-no-items`;
|
|
@@ -46,10 +46,10 @@ function TreeItem(_ref) {
|
|
|
46
46
|
rightAddons,
|
|
47
47
|
children
|
|
48
48
|
} = _ref,
|
|
49
|
-
rest = _objectWithoutProperties__default[
|
|
49
|
+
rest = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
50
50
|
|
|
51
51
|
return /*#__PURE__*/jsxRuntime.jsxs(TreeListItem, _objectSpread(_objectSpread({}, rest), {}, {
|
|
52
|
-
children: [leftAddons && /*#__PURE__*/_jsx__default[
|
|
52
|
+
children: [leftAddons && /*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, leftAddons), children, rightAddons && /*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, rightAddons)]
|
|
53
53
|
}));
|
|
54
54
|
}
|
|
55
55
|
|
|
@@ -18,8 +18,8 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
18
18
|
|
|
19
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; }
|
|
20
20
|
|
|
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__default[
|
|
22
|
-
const StyledCheckboxWrapper = /*#__PURE__*/styled__default[
|
|
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__default["default"](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; }
|
|
22
|
+
const StyledCheckboxWrapper = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
23
23
|
componentId: "sc-1tyhs3t-0"
|
|
24
24
|
})(["padding-top:3px;"]);
|
|
25
25
|
|
|
@@ -31,7 +31,7 @@ function CheckboxSelectable(props) {
|
|
|
31
31
|
const {
|
|
32
32
|
id
|
|
33
33
|
} = item;
|
|
34
|
-
const ctx = React.useContext(TreeViewContext[
|
|
34
|
+
const ctx = React.useContext(TreeViewContext["default"]);
|
|
35
35
|
const {
|
|
36
36
|
props: {
|
|
37
37
|
disableGroups,
|
|
@@ -71,7 +71,7 @@ function CheckboxSelectable(props) {
|
|
|
71
71
|
|
|
72
72
|
return false;
|
|
73
73
|
}, [selectedCheckboxes, id]);
|
|
74
|
-
return /*#__PURE__*/_jsx__default[
|
|
74
|
+
return /*#__PURE__*/_jsx__default["default"](StyledCheckboxWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](Checkbox__default["default"], {
|
|
75
75
|
checked: isChecked,
|
|
76
76
|
disabled: item.isGroup ? disableGroups : disableLeafs,
|
|
77
77
|
className: "em-ds-tree-item-checkbox",
|
|
@@ -21,7 +21,7 @@ const ChildrenCountDisplayer = props => {
|
|
|
21
21
|
} = item;
|
|
22
22
|
if (!isGroup) return null; // return ` | ${children.length} Items`;
|
|
23
23
|
|
|
24
|
-
return /*#__PURE__*/_jsx__default[
|
|
24
|
+
return /*#__PURE__*/_jsx__default["default"]("span", {
|
|
25
25
|
"data-testid": "tree-item-children-count-displayer",
|
|
26
26
|
className: className
|
|
27
27
|
}, void 0, ` | ${children.length} Items`);
|
package/cjs/parts/ExpandCaret.js
CHANGED
|
@@ -31,7 +31,7 @@ const ExpandCaret = props => {
|
|
|
31
31
|
children
|
|
32
32
|
} = item;
|
|
33
33
|
const isGroupOrHasChildrens = isGroup || Array.isArray(children) && children.length > 0;
|
|
34
|
-
const ctx = React.useContext(TreeViewContext[
|
|
34
|
+
const ctx = React.useContext(TreeViewContext["default"]);
|
|
35
35
|
const {
|
|
36
36
|
props: {
|
|
37
37
|
onItemFocus
|
|
@@ -44,14 +44,14 @@ const ExpandCaret = props => {
|
|
|
44
44
|
scrollToIndex
|
|
45
45
|
}
|
|
46
46
|
} = ctx;
|
|
47
|
-
if (isGroupOrHasChildrens) return /*#__PURE__*/_jsx__default[
|
|
47
|
+
if (isGroupOrHasChildrens) return /*#__PURE__*/_jsx__default["default"](Button__default["default"], {
|
|
48
48
|
buttonType: "text",
|
|
49
49
|
className: "expandable-arrow",
|
|
50
50
|
"data-testid": "tree-item-expand-toggle",
|
|
51
|
-
icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default[
|
|
51
|
+
icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](ArrowheadDown__default["default"], {
|
|
52
52
|
size: "s",
|
|
53
53
|
"data-testid": "ic-arrow-head-down"
|
|
54
|
-
})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default[
|
|
54
|
+
})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](ArrowheadRight__default["default"], {
|
|
55
55
|
size: "s",
|
|
56
56
|
"data-testid": "ic-arrow-head-right"
|
|
57
57
|
})),
|
|
@@ -78,7 +78,7 @@ const ExpandCaret = props => {
|
|
|
78
78
|
size: "s",
|
|
79
79
|
tabIndex: -1
|
|
80
80
|
}, `${id}-expand-addon`);
|
|
81
|
-
return /*#__PURE__*/_jsx__default[
|
|
81
|
+
return /*#__PURE__*/_jsx__default["default"]("div", {
|
|
82
82
|
style: {
|
|
83
83
|
width: '24px'
|
|
84
84
|
}
|
package/cjs/parts/Icon.js
CHANGED
|
@@ -15,7 +15,7 @@ const Icon = props => {
|
|
|
15
15
|
item
|
|
16
16
|
} = props;
|
|
17
17
|
const isGroupOrHasChildrens = item.isGroup || Array.isArray(item.children) && item.children.length > 0;
|
|
18
|
-
const ctx = React.useContext(TreeViewContext[
|
|
18
|
+
const ctx = React.useContext(TreeViewContext["default"]);
|
|
19
19
|
const {
|
|
20
20
|
props: {
|
|
21
21
|
groupIcon,
|
|
@@ -24,7 +24,7 @@ const Icon = props => {
|
|
|
24
24
|
} = ctx;
|
|
25
25
|
const icon = isGroupOrHasChildrens ? groupIcon : itemIcon;
|
|
26
26
|
if (!icon) return null;
|
|
27
|
-
return /*#__PURE__*/React__default[
|
|
27
|
+
return /*#__PURE__*/React__default["default"].cloneElement(icon, {
|
|
28
28
|
'data-testid': isGroupOrHasChildrens ? 'tree-item-group-icon' : 'tree-item-icon',
|
|
29
29
|
className: utils.cx(icon.props.className, 'tree-item-icon')
|
|
30
30
|
});
|
|
@@ -13,7 +13,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
|
|
|
13
13
|
|
|
14
14
|
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; }
|
|
15
15
|
|
|
16
|
-
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__default[
|
|
16
|
+
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__default["default"](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; }
|
|
17
17
|
|
|
18
18
|
const getItemNestingLeftPadding = (level, opts) => {
|
|
19
19
|
const {
|
|
@@ -38,7 +38,7 @@ const NestingSpace = props => {
|
|
|
38
38
|
const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
|
|
39
39
|
spaceForNestingLevel
|
|
40
40
|
});
|
|
41
|
-
return /*#__PURE__*/_jsx__default[
|
|
41
|
+
return /*#__PURE__*/_jsx__default["default"]("div", {
|
|
42
42
|
"data-testid": "tree-item-nested-space",
|
|
43
43
|
style: {
|
|
44
44
|
width: itemNestingLeftPadding
|
|
@@ -15,7 +15,7 @@ function RadioSelectable(props) {
|
|
|
15
15
|
item,
|
|
16
16
|
itemIndex
|
|
17
17
|
} = props;
|
|
18
|
-
const ctx = React.useContext(TreeViewContext[
|
|
18
|
+
const ctx = React.useContext(TreeViewContext["default"]);
|
|
19
19
|
const {
|
|
20
20
|
props: {
|
|
21
21
|
disableGroups,
|
|
@@ -48,7 +48,7 @@ function RadioSelectable(props) {
|
|
|
48
48
|
if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
|
|
49
49
|
}, [item, id, onSelectionChange, scrollToIndex]);
|
|
50
50
|
const radioName = React.useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
|
|
51
|
-
return /*#__PURE__*/_jsx__default[
|
|
51
|
+
return /*#__PURE__*/_jsx__default["default"](Radio__default["default"], {
|
|
52
52
|
checked: selectedCheckboxes[id] === true,
|
|
53
53
|
name: radioName,
|
|
54
54
|
disabled: item.isGroup ? disableGroups : disableLeafs,
|
package/cjs/parts/TreeItem.js
CHANGED
|
@@ -28,7 +28,7 @@ var GripperVertical__default = /*#__PURE__*/_interopDefaultLegacy(GripperVertica
|
|
|
28
28
|
|
|
29
29
|
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; }
|
|
30
30
|
|
|
31
|
-
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__default[
|
|
31
|
+
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__default["default"](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; }
|
|
32
32
|
const TreeListItem = dsClassnames.aggregatedClasses('li', {
|
|
33
33
|
'data-testid': cssClassesConstants.treeItemBlockName,
|
|
34
34
|
role: 'treeitem'
|
|
@@ -36,7 +36,7 @@ const TreeListItem = dsClassnames.aggregatedClasses('li', {
|
|
|
36
36
|
const TreeListItemAddonsWrapper = dsClassnames.aggregatedClasses('div')(cssClassesConstants.treeItemBlockName, 'addons');
|
|
37
37
|
const DnDHandle = reactSortableHoc.SortableHandle(({
|
|
38
38
|
id
|
|
39
|
-
}) => /*#__PURE__*/_jsx__default[
|
|
39
|
+
}) => /*#__PURE__*/_jsx__default["default"](GripperVertical__default["default"], {
|
|
40
40
|
"data-testid": "drag-handle",
|
|
41
41
|
className: "drag-handle",
|
|
42
42
|
size: "s",
|
|
@@ -67,7 +67,7 @@ const TreeItem = props => {
|
|
|
67
67
|
const openFolderOnHoverTimeout = React.useRef();
|
|
68
68
|
const [isDraggingOverThis, setIsDraggingOverThis] = React.useState(false);
|
|
69
69
|
const onItemKeyDown = keyboardHelpers.useOnItemKeyDown(item);
|
|
70
|
-
const ctx = React.useContext(TreeViewContext[
|
|
70
|
+
const ctx = React.useContext(TreeViewContext["default"]);
|
|
71
71
|
const {
|
|
72
72
|
props: {
|
|
73
73
|
disableIcons,
|
|
@@ -168,24 +168,24 @@ const TreeItem = props => {
|
|
|
168
168
|
"data-id": item.id,
|
|
169
169
|
"data-index": item.virtualIndex,
|
|
170
170
|
onKeyDown: onItemKeyDown,
|
|
171
|
-
children: [/*#__PURE__*/_jsx__default[
|
|
171
|
+
children: [/*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx__default["default"](DnDHandle, {
|
|
172
172
|
id: id
|
|
173
|
-
}) : null, withRadioChecks ? /*#__PURE__*/_jsx__default[
|
|
173
|
+
}) : null, withRadioChecks ? /*#__PURE__*/_jsx__default["default"](RadioSelectable, {
|
|
174
174
|
item: item,
|
|
175
175
|
itemIndex: itemIndex
|
|
176
|
-
}) : null, withCheckboxChecks ? /*#__PURE__*/_jsx__default[
|
|
176
|
+
}) : null, withCheckboxChecks ? /*#__PURE__*/_jsx__default["default"](CheckboxSelectable, {
|
|
177
177
|
item: item,
|
|
178
178
|
itemIndex: itemIndex
|
|
179
|
-
}) : null, /*#__PURE__*/_jsx__default[
|
|
179
|
+
}) : null, /*#__PURE__*/_jsx__default["default"](NestingSpace.NestingSpace, {
|
|
180
180
|
item: item,
|
|
181
181
|
spaceForNestingLevel: spaceForNestingLevel
|
|
182
|
-
}), /*#__PURE__*/_jsx__default[
|
|
182
|
+
}), /*#__PURE__*/_jsx__default["default"](ExpandCaret.ExpandCaret, {
|
|
183
183
|
item: item
|
|
184
|
-
}), !disableIcons ? /*#__PURE__*/_jsx__default[
|
|
184
|
+
}), !disableIcons ? /*#__PURE__*/_jsx__default["default"](Icon.Icon, {
|
|
185
185
|
item: item
|
|
186
|
-
}) : null), /*#__PURE__*/_jsx__default[
|
|
186
|
+
}) : null), /*#__PURE__*/_jsx__default["default"](TreeItemText.TreeItemText, {
|
|
187
187
|
item: item
|
|
188
|
-
}), rightAddons && /*#__PURE__*/_jsx__default[
|
|
188
|
+
}), rightAddons && /*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons)]
|
|
189
189
|
});
|
|
190
190
|
};
|
|
191
191
|
const DragAndDropTreeItem = reactSortableHoc.SortableElement(TreeItem);
|
|
@@ -25,7 +25,7 @@ const classNameModifierTruncate = `${cssClassesConstants.DSTreeViewPrefix}-${css
|
|
|
25
25
|
|
|
26
26
|
const CustomHighlight = ({
|
|
27
27
|
children
|
|
28
|
-
}) => /*#__PURE__*/_jsx__default[
|
|
28
|
+
}) => /*#__PURE__*/_jsx__default["default"]("mark", {
|
|
29
29
|
className: "tree-text-highlight",
|
|
30
30
|
"data-testid": "tree-text-highlight"
|
|
31
31
|
}, void 0, children);
|
|
@@ -36,7 +36,7 @@ function TreeItemText(props) {
|
|
|
36
36
|
const {
|
|
37
37
|
item
|
|
38
38
|
} = props;
|
|
39
|
-
const ctx = React.useContext(TreeViewContext[
|
|
39
|
+
const ctx = React.useContext(TreeViewContext["default"]);
|
|
40
40
|
const {
|
|
41
41
|
props: {
|
|
42
42
|
searchQuery,
|
|
@@ -50,14 +50,14 @@ function TreeItemText(props) {
|
|
|
50
50
|
|
|
51
51
|
if (searchQuery) {
|
|
52
52
|
if (labelOverflow === 'truncate') {
|
|
53
|
-
return /*#__PURE__*/_jsx__default[
|
|
53
|
+
return /*#__PURE__*/_jsx__default["default"](dsBasic.SimpleTruncatedTooltipText, {
|
|
54
54
|
value: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
55
|
-
children: [/*#__PURE__*/_jsx__default[
|
|
55
|
+
children: [/*#__PURE__*/_jsx__default["default"](Highlighter__default["default"], {
|
|
56
56
|
autoEscape: true,
|
|
57
57
|
highlightTag: CustomHighlight,
|
|
58
58
|
searchWords: [searchQuery],
|
|
59
59
|
textToHighlight: itemLabelText
|
|
60
|
-
}), showChildrenAmount ? _ChildrenCountDisplay || (_ChildrenCountDisplay = /*#__PURE__*/_jsx__default[
|
|
60
|
+
}), showChildrenAmount ? _ChildrenCountDisplay || (_ChildrenCountDisplay = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
|
|
61
61
|
item: item
|
|
62
62
|
})) : null]
|
|
63
63
|
})
|
|
@@ -65,21 +65,21 @@ function TreeItemText(props) {
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
68
|
-
children: [/*#__PURE__*/_jsx__default[
|
|
68
|
+
children: [/*#__PURE__*/_jsx__default["default"](Highlighter__default["default"], {
|
|
69
69
|
autoEscape: true,
|
|
70
70
|
highlightTag: CustomHighlight,
|
|
71
71
|
searchWords: [searchQuery],
|
|
72
72
|
textToHighlight: itemLabelText
|
|
73
|
-
}), showChildrenAmount ? _ChildrenCountDisplay2 || (_ChildrenCountDisplay2 = /*#__PURE__*/_jsx__default[
|
|
73
|
+
}), showChildrenAmount ? _ChildrenCountDisplay2 || (_ChildrenCountDisplay2 = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
|
|
74
74
|
item: item
|
|
75
75
|
})) : null]
|
|
76
76
|
});
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
if (labelOverflow === 'truncate') {
|
|
80
|
-
return /*#__PURE__*/_jsx__default[
|
|
80
|
+
return /*#__PURE__*/_jsx__default["default"](dsBasic.SimpleTruncatedTooltipText, {
|
|
81
81
|
value: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
82
|
-
children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay3 || (_ChildrenCountDisplay3 = /*#__PURE__*/_jsx__default[
|
|
82
|
+
children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay3 || (_ChildrenCountDisplay3 = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
|
|
83
83
|
item: item
|
|
84
84
|
})) : null]
|
|
85
85
|
})
|
|
@@ -87,7 +87,7 @@ function TreeItemText(props) {
|
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
90
|
-
children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay4 || (_ChildrenCountDisplay4 = /*#__PURE__*/_jsx__default[
|
|
90
|
+
children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay4 || (_ChildrenCountDisplay4 = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
|
|
91
91
|
item: item
|
|
92
92
|
})) : null]
|
|
93
93
|
});
|
|
@@ -95,9 +95,9 @@ function TreeItemText(props) {
|
|
|
95
95
|
let className = '';
|
|
96
96
|
if (labelOverflow === 'wrap-all') className += `${classNameModifierWrapAll} `;
|
|
97
97
|
if (labelOverflow === 'truncate') className += `${classNameModifierTruncate} `;
|
|
98
|
-
return /*#__PURE__*/_jsx__default[
|
|
98
|
+
return /*#__PURE__*/_jsx__default["default"](ItemContent, {
|
|
99
99
|
"data-testid": `${cssClassesConstants.treeItemBlockName}-content`
|
|
100
|
-
}, void 0, /*#__PURE__*/_jsx__default[
|
|
100
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](ItemValue, {
|
|
101
101
|
className: className
|
|
102
102
|
}, void 0, Text));
|
|
103
103
|
}
|
package/cjs/parts/TreeList.js
CHANGED
|
@@ -20,7 +20,7 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
|
20
20
|
|
|
21
21
|
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; }
|
|
22
22
|
|
|
23
|
-
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__default[
|
|
23
|
+
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__default["default"](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; }
|
|
24
24
|
const treeListNoItemsBn = `${cssClassesConstants.treeListBlockName}-no-items`;
|
|
25
25
|
const TreeListNoItems = dsClassnames.aggregatedClasses('div', {
|
|
26
26
|
'data-testid': treeListNoItemsBn
|
|
@@ -39,7 +39,7 @@ const TreeList = props => {
|
|
|
39
39
|
const {
|
|
40
40
|
onMouseDragOverItem
|
|
41
41
|
} = props;
|
|
42
|
-
const ctx = React.useContext(TreeViewContext[
|
|
42
|
+
const ctx = React.useContext(TreeViewContext["default"]);
|
|
43
43
|
const {
|
|
44
44
|
virtualListRef,
|
|
45
45
|
virtualListHelpers,
|
|
@@ -66,7 +66,7 @@ const TreeList = props => {
|
|
|
66
66
|
width: `${typeof width === 'number' ? `${width}px` : width}`,
|
|
67
67
|
overflow: 'auto'
|
|
68
68
|
},
|
|
69
|
-
children: [isLoading ? /*#__PURE__*/_jsx__default[
|
|
69
|
+
children: [isLoading ? /*#__PURE__*/_jsx__default["default"]("div", {
|
|
70
70
|
style: {
|
|
71
71
|
width: '100%',
|
|
72
72
|
height: '100%',
|
|
@@ -74,13 +74,13 @@ const TreeList = props => {
|
|
|
74
74
|
alignItems: 'center',
|
|
75
75
|
justifyContent: 'center'
|
|
76
76
|
}
|
|
77
|
-
}, void 0, /*#__PURE__*/_jsx__default[
|
|
77
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](CircularProgressIndicator.DSCircularProgressIndicator, {
|
|
78
78
|
size: "xl",
|
|
79
79
|
loading: isLoading,
|
|
80
80
|
showLabel: true,
|
|
81
81
|
waiting: false,
|
|
82
82
|
showTooltip: false
|
|
83
|
-
})) : null, !isLoading && virtualItems.length === 0 ? /*#__PURE__*/_jsx__default[
|
|
83
|
+
})) : null, !isLoading && virtualItems.length === 0 ? /*#__PURE__*/_jsx__default["default"](TreeListNoItems, {}, void 0, noItemsPlaceholder) : null, !isLoading && virtualItems.length !== 0 ? /*#__PURE__*/_jsx__default["default"]("div", {
|
|
84
84
|
style: {
|
|
85
85
|
height: `${totalSize}px`,
|
|
86
86
|
width: '100%',
|
|
@@ -20,11 +20,11 @@ const TreeDnD = () => {
|
|
|
20
20
|
onMouseDragOverItem,
|
|
21
21
|
onSortEnd
|
|
22
22
|
} = useDnDHelpers.useDnDHelpers();
|
|
23
|
-
const ctx = React.useContext(TreeViewContext[
|
|
23
|
+
const ctx = React.useContext(TreeViewContext["default"]);
|
|
24
24
|
const {
|
|
25
25
|
virtualListRef
|
|
26
26
|
} = ctx;
|
|
27
|
-
return /*#__PURE__*/_jsx__default[
|
|
27
|
+
return /*#__PURE__*/_jsx__default["default"](TreeList.DragAndDropTreeList, {
|
|
28
28
|
useDragHandle: true,
|
|
29
29
|
transitionDuration: 0,
|
|
30
30
|
keyboardSortingTransitionDuration: 0,
|
package/cjs/prop-types.js
CHANGED
|
@@ -9,46 +9,46 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
10
10
|
|
|
11
11
|
/* eslint-disable max-lines */
|
|
12
|
-
const InstanceActionsPropTypes = PropTypes__default[
|
|
13
|
-
toggleExpandAll: PropTypes__default[
|
|
14
|
-
scrollTo: PropTypes__default[
|
|
12
|
+
const InstanceActionsPropTypes = PropTypes__default["default"].shape({
|
|
13
|
+
toggleExpandAll: PropTypes__default["default"].func,
|
|
14
|
+
scrollTo: PropTypes__default["default"].func
|
|
15
15
|
});
|
|
16
|
-
const TreeViewInstancePropType = PropTypes__default[
|
|
17
|
-
current: PropTypes__default[
|
|
16
|
+
const TreeViewInstancePropType = PropTypes__default["default"].shape({
|
|
17
|
+
current: PropTypes__default["default"].oneOfType([PropTypes__default["default"].oneOf([null]), PropTypes__default["default"].shape({
|
|
18
18
|
actions: InstanceActionsPropTypes.isRequired
|
|
19
19
|
})])
|
|
20
20
|
});
|
|
21
|
-
const TreeViewItemPropType = PropTypes__default[
|
|
22
|
-
children: PropTypes__default[
|
|
23
|
-
id: PropTypes__default[
|
|
24
|
-
isGroup: PropTypes__default[
|
|
25
|
-
name: PropTypes__default[
|
|
26
|
-
node: PropTypes__default[
|
|
21
|
+
const TreeViewItemPropType = PropTypes__default["default"].shape({
|
|
22
|
+
children: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
|
|
23
|
+
id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
|
|
24
|
+
isGroup: PropTypes__default["default"].oneOfType([PropTypes__default["default"].oneOf([undefined, null]), PropTypes__default["default"].bool]),
|
|
25
|
+
name: PropTypes__default["default"].string,
|
|
26
|
+
node: PropTypes__default["default"].object
|
|
27
27
|
});
|
|
28
28
|
const TreeListPropTypes = {
|
|
29
29
|
// required when drag and drop is enabled, tracks the drag and drop results after drop and visual feedback borders
|
|
30
30
|
// passed down to TreeItem
|
|
31
|
-
onMouseDragOverItem: PropTypes__default[
|
|
31
|
+
onMouseDragOverItem: PropTypes__default["default"].func
|
|
32
32
|
};
|
|
33
33
|
const TreeItemPropTypes = {
|
|
34
34
|
item: TreeViewItemPropType.isRequired,
|
|
35
|
-
index: PropTypes__default[
|
|
36
|
-
itemIndex: PropTypes__default[
|
|
37
|
-
itemWrapperStyle: PropTypes__default[
|
|
38
|
-
virtualItemRef: PropTypes__default[
|
|
39
|
-
spaceForNestingLevel: PropTypes__default[
|
|
40
|
-
onMouseDragOverItem: PropTypes__default[
|
|
35
|
+
index: PropTypes__default["default"].number,
|
|
36
|
+
itemIndex: PropTypes__default["default"].number,
|
|
37
|
+
itemWrapperStyle: PropTypes__default["default"].object,
|
|
38
|
+
virtualItemRef: PropTypes__default["default"].func,
|
|
39
|
+
spaceForNestingLevel: PropTypes__default["default"].number,
|
|
40
|
+
onMouseDragOverItem: PropTypes__default["default"].func
|
|
41
41
|
};
|
|
42
42
|
const TreeItemExpandCaretPropTypes = {
|
|
43
43
|
item: TreeViewItemPropType.isRequired
|
|
44
44
|
};
|
|
45
45
|
const TreeItemNestingSpacePropTypes = {
|
|
46
46
|
item: TreeViewItemPropType.isRequired,
|
|
47
|
-
spaceForNestingLevel: PropTypes__default[
|
|
47
|
+
spaceForNestingLevel: PropTypes__default["default"].number.isRequired
|
|
48
48
|
};
|
|
49
49
|
const TreeItemCheckboxPropTypes = {
|
|
50
50
|
item: TreeViewItemPropType.isRequired,
|
|
51
|
-
itemIndex: PropTypes__default[
|
|
51
|
+
itemIndex: PropTypes__default["default"].number.isRequired
|
|
52
52
|
};
|
|
53
53
|
|
|
54
54
|
exports.InstanceActionsPropTypes = InstanceActionsPropTypes;
|
|
@@ -20,7 +20,7 @@ function TreeViewSearchBar(props) {
|
|
|
20
20
|
totalResults,
|
|
21
21
|
value
|
|
22
22
|
} = props;
|
|
23
|
-
return /*#__PURE__*/_jsx__default[
|
|
23
|
+
return /*#__PURE__*/_jsx__default["default"](dsBasic.DSNavSearchBox, {
|
|
24
24
|
onChange: v => {
|
|
25
25
|
handleChange({
|
|
26
26
|
target: {
|
|
@@ -20,7 +20,7 @@ var groupExpandsHelpers = require('./group-expands-helpers.js');
|
|
|
20
20
|
// 106 (NumPad) *
|
|
21
21
|
|
|
22
22
|
const useOnItemKeyDown = item => {
|
|
23
|
-
const ctx = React.useContext(TreeViewContext[
|
|
23
|
+
const ctx = React.useContext(TreeViewContext["default"]);
|
|
24
24
|
const {
|
|
25
25
|
props: {
|
|
26
26
|
onItemFocus
|
|
@@ -11,7 +11,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
|
|
|
11
11
|
|
|
12
12
|
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
13
|
|
|
14
|
-
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__default[
|
|
14
|
+
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__default["default"](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
15
|
const getGroupCheckState = node => {
|
|
16
16
|
let childAllChecked = true;
|
|
17
17
|
let anyChildChecked = false;
|
|
@@ -10,7 +10,7 @@ var dndHelpers = require('./dnd-helpers.js');
|
|
|
10
10
|
|
|
11
11
|
/* eslint-disable max-depth */
|
|
12
12
|
const useDnDHelpers = () => {
|
|
13
|
-
const ctx = React.useContext(TreeViewContext[
|
|
13
|
+
const ctx = React.useContext(TreeViewContext["default"]);
|
|
14
14
|
const {
|
|
15
15
|
props: {
|
|
16
16
|
data,
|
package/cjs/utils/useTree.js
CHANGED
|
@@ -15,14 +15,14 @@ var TreeModel__default = /*#__PURE__*/_interopDefaultLegacy(TreeModel);
|
|
|
15
15
|
|
|
16
16
|
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; }
|
|
17
17
|
|
|
18
|
-
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__default[
|
|
18
|
+
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__default["default"](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; }
|
|
19
19
|
const useTree = (data, props, states) => {
|
|
20
20
|
const {
|
|
21
21
|
setExpandedGroups
|
|
22
22
|
} = states;
|
|
23
23
|
const unfrozenData = React.useMemo(() => lodash.cloneDeep(data), [data]); // convert data into a TreeModel with extra isExpanded prop
|
|
24
24
|
|
|
25
|
-
const tree = React.useMemo(() => new TreeModel__default[
|
|
25
|
+
const tree = React.useMemo(() => new TreeModel__default["default"](), []);
|
|
26
26
|
const [treeData, setTreeData] = React.useState({
|
|
27
27
|
name: '__root',
|
|
28
28
|
isExpanded: true,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-treeview",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.9",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tree View",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -319,12 +319,12 @@
|
|
|
319
319
|
"generateSubmodules": true
|
|
320
320
|
},
|
|
321
321
|
"dependencies": {
|
|
322
|
-
"@elliemae/ds-basic": "2.0.0-alpha.
|
|
323
|
-
"@elliemae/ds-classnames": "2.0.0-alpha.
|
|
324
|
-
"@elliemae/ds-dropdownmenu": "2.0.0-alpha.
|
|
325
|
-
"@elliemae/ds-icons": "2.0.0-alpha.
|
|
326
|
-
"@elliemae/ds-shared": "2.0.0-alpha.
|
|
327
|
-
"@elliemae/ds-utilities": "2.0.0-alpha.
|
|
322
|
+
"@elliemae/ds-basic": "2.0.0-alpha.9",
|
|
323
|
+
"@elliemae/ds-classnames": "2.0.0-alpha.9",
|
|
324
|
+
"@elliemae/ds-dropdownmenu": "2.0.0-alpha.9",
|
|
325
|
+
"@elliemae/ds-icons": "2.0.0-alpha.9",
|
|
326
|
+
"@elliemae/ds-shared": "2.0.0-alpha.9",
|
|
327
|
+
"@elliemae/ds-utilities": "2.0.0-alpha.9",
|
|
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",
|