@elliemae/ds-treeview 2.0.0-alpha.10 → 2.0.0-alpha.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/TreeView.js +6 -0
- package/cjs/config/cssClassesConstants.js +1 -1
- package/cjs/deprecated/TreeView.js +7 -1
- package/cjs/deprecated/__testUtils__/utils.js +10 -1
- package/cjs/deprecated/plugins/dnd/TreeDndPlugin.js +15 -8
- package/cjs/deprecated/plugins/dnd/renderers/DraggableItem.js +10 -5
- package/cjs/deprecated/plugins/dnd/renderers/DroppableList.js +21 -15
- package/cjs/deprecated/plugins/dnd/utils.js +42 -34
- package/cjs/deprecated/plugins/roving/TreeRovingPlugin.js +13 -3
- package/cjs/deprecated/plugins/searchable/SearchableTreePlugin.js +5 -3
- package/cjs/deprecated/plugins/searchable/utils.js +1 -1
- package/cjs/deprecated/plugins/selectable/SelectablePluginTree.js +53 -33
- package/cjs/deprecated/plugins/toolbar/TreeToolbarPlugin.js +11 -7
- package/cjs/deprecated/plugins/tree/TreeDataPlugin.js +45 -34
- package/cjs/deprecated/plugins/tree/useExpandTreeState.js +9 -5
- package/cjs/deprecated/plugins/tree/utils.js +19 -6
- package/cjs/deprecated/plugins/tree/walkTreeStrategy.js +13 -9
- package/cjs/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js +24 -10
- package/cjs/deprecated/renderers.js +17 -9
- package/cjs/parts/CheckboxSelectable.js +7 -3
- package/cjs/parts/ChildrenCountDisplayer.js +2 -2
- package/cjs/parts/ExpandCaret.js +11 -11
- package/cjs/parts/Icon.js +2 -2
- package/cjs/parts/NestingSpace.js +6 -1
- package/cjs/parts/RadioSelectable.js +3 -4
- package/cjs/parts/TreeItem.js +34 -23
- package/cjs/parts/TreeItemText.js +18 -15
- package/cjs/parts/TreeList.js +26 -16
- package/cjs/related-components/TreeViewSearchBar.js +2 -2
- package/cjs/utils/array-helpers.js +2 -0
- package/cjs/utils/dnd-helpers.js +29 -25
- package/cjs/utils/group-expands-helpers.js +7 -5
- package/cjs/utils/keyboard-helpers.js +6 -3
- package/cjs/utils/object-helpers.js +8 -0
- package/cjs/utils/refs-helpers.js +11 -1
- package/cjs/utils/selectable-helper.js +9 -2
- package/cjs/utils/tree-helpers.js +27 -9
- package/cjs/utils/useDnDHelpers.js +21 -14
- package/cjs/utils/useInstanceRefActions.js +14 -10
- package/cjs/utils/useTree.js +6 -0
- package/esm/TreeView.js +6 -0
- package/esm/config/cssClassesConstants.js +1 -1
- package/esm/deprecated/TreeView.js +7 -1
- package/esm/deprecated/__testUtils__/utils.js +10 -1
- package/esm/deprecated/plugins/dnd/TreeDndPlugin.js +14 -7
- package/esm/deprecated/plugins/dnd/renderers/DraggableItem.js +9 -3
- package/esm/deprecated/plugins/dnd/renderers/DroppableList.js +18 -11
- package/esm/deprecated/plugins/dnd/utils.js +35 -27
- package/esm/deprecated/plugins/roving/TreeRovingPlugin.js +12 -2
- package/esm/deprecated/plugins/searchable/SearchableTreePlugin.js +4 -1
- package/esm/deprecated/plugins/searchable/utils.js +1 -1
- package/esm/deprecated/plugins/selectable/SelectablePluginTree.js +45 -22
- package/esm/deprecated/plugins/toolbar/TreeToolbarPlugin.js +8 -3
- package/esm/deprecated/plugins/tree/TreeDataPlugin.js +35 -22
- package/esm/deprecated/plugins/tree/useExpandTreeState.js +7 -2
- package/esm/deprecated/plugins/tree/utils.js +19 -6
- package/esm/deprecated/plugins/tree/walkTreeStrategy.js +13 -9
- package/esm/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js +24 -10
- package/esm/deprecated/renderers.js +17 -9
- package/esm/parts/CheckboxSelectable.js +7 -2
- package/esm/parts/ChildrenCountDisplayer.js +2 -2
- package/esm/parts/ExpandCaret.js +9 -7
- package/esm/parts/Icon.js +1 -1
- package/esm/parts/NestingSpace.js +6 -1
- package/esm/parts/RadioSelectable.js +3 -3
- package/esm/parts/TreeItem.js +34 -22
- package/esm/parts/TreeItemText.js +16 -13
- package/esm/parts/TreeList.js +25 -15
- package/esm/related-components/TreeViewSearchBar.js +1 -1
- package/esm/utils/array-helpers.js +2 -0
- package/esm/utils/dnd-helpers.js +29 -25
- package/esm/utils/group-expands-helpers.js +7 -5
- package/esm/utils/keyboard-helpers.js +6 -3
- package/esm/utils/object-helpers.js +8 -0
- package/esm/utils/refs-helpers.js +11 -1
- package/esm/utils/selectable-helper.js +9 -2
- package/esm/utils/tree-helpers.js +27 -9
- package/esm/utils/useDnDHelpers.js +21 -14
- package/esm/utils/useInstanceRefActions.js +14 -10
- package/esm/utils/useTree.js +6 -0
- package/package.json +14 -13
- package/types/TreeView.d.ts +118 -28
- package/types/deprecated/__testUtils__/utils.d.ts +49 -49
- package/types/deprecated/plugins/tree/useExpandTreeState.d.ts +12 -2
- package/types/react-desc-prop-types.d.ts +113 -27
- package/cjs/package.json +0 -7
- package/esm/package.json +0 -7
|
@@ -2,13 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
12
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
8
13
|
var React = require('react');
|
|
9
|
-
var
|
|
10
|
-
var Button = require('@elliemae/ds-
|
|
11
|
-
var
|
|
14
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
15
|
+
var Button = require('@elliemae/ds-button');
|
|
16
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
12
17
|
var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
|
|
13
18
|
var ToolbarProvider = require('@elliemae/ds-shared/toolbar/ToolbarProvider');
|
|
14
19
|
var FocusGroupContext = require('@elliemae/ds-shared/FocusGroup/FocusGroupContext');
|
|
@@ -19,7 +24,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
19
24
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
20
25
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
21
26
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
22
|
-
var MoreOptionsVert__default = /*#__PURE__*/_interopDefaultLegacy(MoreOptionsVert);
|
|
23
27
|
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
24
28
|
var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
|
|
25
29
|
var ToolbarProvider__default = /*#__PURE__*/_interopDefaultLegacy(ToolbarProvider);
|
|
@@ -38,7 +42,7 @@ const ToolbarDisclosure = props => {
|
|
|
38
42
|
extraParams,
|
|
39
43
|
renderToolbar,
|
|
40
44
|
isItemFocused,
|
|
41
|
-
icon = /*#__PURE__*/_jsx__default["default"](
|
|
45
|
+
icon = /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {
|
|
42
46
|
color: ['brand-primary', 800]
|
|
43
47
|
}),
|
|
44
48
|
rowSize
|
|
@@ -72,8 +76,8 @@ const ToolbarDisclosure = props => {
|
|
|
72
76
|
icon: icon,
|
|
73
77
|
innerRef: ref,
|
|
74
78
|
onClick: show,
|
|
75
|
-
onMouseEnter:
|
|
76
|
-
onMouseLeave:
|
|
79
|
+
onMouseEnter: dsUtilities.runAll(show, onMouseEnter),
|
|
80
|
+
onMouseLeave: dsUtilities.runAll(hide, onMouseLeave),
|
|
77
81
|
tabIndex: isItemFocused ? 0 : -1
|
|
78
82
|
}));
|
|
79
83
|
};
|
|
@@ -4,15 +4,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
6
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.some.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.some.js');
|
|
10
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
11
|
+
require('core-js/modules/esnext.async-iterator.find.js');
|
|
12
|
+
require('core-js/modules/esnext.iterator.find.js');
|
|
13
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
14
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
15
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
16
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
7
17
|
var React = require('react');
|
|
8
|
-
var
|
|
9
|
-
var Button = require('@elliemae/ds-
|
|
10
|
-
var
|
|
11
|
-
var ArrowheadRight = require('@elliemae/ds-icons/ArrowheadRight');
|
|
18
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
19
|
+
var Button = require('@elliemae/ds-button');
|
|
20
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
12
21
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
13
22
|
var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
|
|
14
23
|
var walkTreeStrategy = require('./walkTreeStrategy.js');
|
|
15
|
-
var utils
|
|
24
|
+
var utils = require('./utils.js');
|
|
16
25
|
var renderers = require('../../renderers.js');
|
|
17
26
|
var useExpandTreeState = require('./useExpandTreeState.js');
|
|
18
27
|
|
|
@@ -22,8 +31,6 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
|
22
31
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
23
32
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
24
33
|
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
25
|
-
var ArrowheadDown__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadDown);
|
|
26
|
-
var ArrowheadRight__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadRight);
|
|
27
34
|
var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
|
|
28
35
|
|
|
29
36
|
var _ArrowheadDown, _ArrowheadRight;
|
|
@@ -31,7 +38,7 @@ var _ArrowheadDown, _ArrowheadRight;
|
|
|
31
38
|
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
39
|
|
|
33
40
|
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
|
-
const ItemContent = dsClassnames.aggregatedClasses('div')(
|
|
41
|
+
const ItemContent = dsClassnames.aggregatedClasses('div')("".concat(renderers.treeItemBlockName, "-content"));
|
|
35
42
|
const ItemValue = dsClassnames.aggregatedClasses('span')(renderers.treeItemBlockName, 'value');
|
|
36
43
|
|
|
37
44
|
const noop = () => null;
|
|
@@ -45,7 +52,7 @@ const getItemNestingLeftPadding = (level, opts) => {
|
|
|
45
52
|
}, opts);
|
|
46
53
|
|
|
47
54
|
const groupLeftPadding = spaceForNestingLevel * (level - 1);
|
|
48
|
-
return isChild ?
|
|
55
|
+
return isChild ? "".concat(groupLeftPadding + spaceForNestingLevel - 0.1, "em") : "".concat(groupLeftPadding, "em");
|
|
49
56
|
};
|
|
50
57
|
|
|
51
58
|
const itemRenderer = (value, itemProps, instance) => {
|
|
@@ -63,12 +70,12 @@ const itemRenderer = (value, itemProps, instance) => {
|
|
|
63
70
|
const handleItemClick = React.useCallback(e => {
|
|
64
71
|
onItemClick(record.data, e);
|
|
65
72
|
}, [record.data, onItemClick]);
|
|
66
|
-
const amountChildren = Number(utils
|
|
67
|
-
const renderedLabel =
|
|
73
|
+
const amountChildren = Number(utils.getItemChildrenLength(record));
|
|
74
|
+
const renderedLabel = dsUtilities.isFunction(labelRenderer) && labelRenderer(value, itemProps) || value;
|
|
68
75
|
return /*#__PURE__*/_jsx__default["default"](ItemContent, {
|
|
69
|
-
"data-testid":
|
|
76
|
+
"data-testid": "".concat(renderers.treeItemBlockName, "-content"),
|
|
70
77
|
onClick: handleItemClick
|
|
71
|
-
}, void 0, /*#__PURE__*/_jsx__default["default"](ItemValue, {}, void 0, renderedLabel, showChildrenAmount && record.isGroup &&
|
|
78
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](ItemValue, {}, void 0, renderedLabel, showChildrenAmount && record.isGroup && " (".concat(amountChildren, ")")));
|
|
72
79
|
};
|
|
73
80
|
|
|
74
81
|
itemRenderer.order = 100;
|
|
@@ -93,9 +100,10 @@ const TreePluginList = createInstancePlugin__default["default"]('tree-data', {
|
|
|
93
100
|
}));
|
|
94
101
|
},
|
|
95
102
|
|
|
96
|
-
getItemProps(props, instance, {
|
|
97
|
-
|
|
98
|
-
|
|
103
|
+
getItemProps(props, instance, _ref) {
|
|
104
|
+
let {
|
|
105
|
+
record
|
|
106
|
+
} = _ref;
|
|
99
107
|
const {
|
|
100
108
|
nestingLevel
|
|
101
109
|
} = record;
|
|
@@ -121,9 +129,9 @@ const TreePluginList = createInstancePlugin__default["default"]('tree-data', {
|
|
|
121
129
|
buttonType: "text",
|
|
122
130
|
className: "expandable-arrow",
|
|
123
131
|
"data-testid": "tree-item-expand-toggle",
|
|
124
|
-
icon: record.expanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](
|
|
132
|
+
icon: record.expanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
|
|
125
133
|
"data-testid": "ic-arrow-head-down"
|
|
126
|
-
})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](
|
|
134
|
+
})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
|
|
127
135
|
"data-testid": "ic-arrow-head-right"
|
|
128
136
|
})),
|
|
129
137
|
onClick: e => {
|
|
@@ -134,11 +142,11 @@ const TreePluginList = createInstancePlugin__default["default"]('tree-data', {
|
|
|
134
142
|
size: "s",
|
|
135
143
|
tabIndex: -1 // eslint-disable-next-line max-lines
|
|
136
144
|
|
|
137
|
-
},
|
|
145
|
+
}, "".concat(record.id, "-expand-addon"));
|
|
138
146
|
|
|
139
147
|
const iconAddon = icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
|
|
140
148
|
'data-testid': record.isGroup ? 'tree-item-group-icon' : 'tree-item-icon',
|
|
141
|
-
className:
|
|
149
|
+
className: dsUtilities.cx(icon.props.className, 'tree-item-icon')
|
|
142
150
|
});
|
|
143
151
|
|
|
144
152
|
const spaceAddon = /*#__PURE__*/_jsx__default["default"]("div", {
|
|
@@ -146,11 +154,11 @@ const TreePluginList = createInstancePlugin__default["default"]('tree-data', {
|
|
|
146
154
|
style: {
|
|
147
155
|
width: itemNestingLeftPadding
|
|
148
156
|
}
|
|
149
|
-
},
|
|
157
|
+
}, "".concat(record.id, "-space-addon"));
|
|
150
158
|
|
|
151
159
|
return _objectSpread(_objectSpread({}, props), {}, {
|
|
152
160
|
'data-id': record.id,
|
|
153
|
-
'data-parentid': utils
|
|
161
|
+
'data-parentid': utils.getParentId(record),
|
|
154
162
|
'aria-expanded': !!record.expanded,
|
|
155
163
|
leftAddons: [...(props.leftAddons || []), spaceAddon, expandAddon, iconAddon]
|
|
156
164
|
});
|
|
@@ -172,9 +180,10 @@ const TreePluginList = createInstancePlugin__default["default"]('tree-data', {
|
|
|
172
180
|
},
|
|
173
181
|
|
|
174
182
|
hotKeys(instance) {
|
|
175
|
-
function handleExpand({
|
|
176
|
-
|
|
177
|
-
|
|
183
|
+
function handleExpand(_ref2) {
|
|
184
|
+
let {
|
|
185
|
+
index
|
|
186
|
+
} = _ref2;
|
|
178
187
|
const {
|
|
179
188
|
records,
|
|
180
189
|
actions: {
|
|
@@ -185,9 +194,10 @@ const TreePluginList = createInstancePlugin__default["default"]('tree-data', {
|
|
|
185
194
|
if (record && record.data.children.length > 0) _toggleExpand(record.data);
|
|
186
195
|
}
|
|
187
196
|
|
|
188
|
-
function handleCollapse({
|
|
189
|
-
|
|
190
|
-
|
|
197
|
+
function handleCollapse(_ref3) {
|
|
198
|
+
let {
|
|
199
|
+
index
|
|
200
|
+
} = _ref3;
|
|
191
201
|
const {
|
|
192
202
|
records,
|
|
193
203
|
actions: {
|
|
@@ -218,11 +228,11 @@ const TreePluginList = createInstancePlugin__default["default"]('tree-data', {
|
|
|
218
228
|
if (itemToFocus) {
|
|
219
229
|
// eslint-disable-next-line no-unused-expressions
|
|
220
230
|
// eslint-disable-next-line mdx/no-unused-expressions
|
|
221
|
-
utils
|
|
231
|
+
utils.findItemOnDocument(itemToFocus.id) ? utils.findItemOnDocument(itemToFocus.id).focus() : utils.findItemOnDocument(records[0].id).focus();
|
|
222
232
|
} else {
|
|
223
|
-
utils
|
|
233
|
+
utils.getListFromDocument().scrollTo(0, 0);
|
|
224
234
|
setTimeout(() => {
|
|
225
|
-
utils
|
|
235
|
+
utils.findItemOnDocument(records[0].id).focus();
|
|
226
236
|
}, 200);
|
|
227
237
|
}
|
|
228
238
|
});
|
|
@@ -239,9 +249,10 @@ const TreePluginList = createInstancePlugin__default["default"]('tree-data', {
|
|
|
239
249
|
handler: handleCollapse
|
|
240
250
|
}, {
|
|
241
251
|
key: 'enter',
|
|
242
|
-
handler:
|
|
243
|
-
|
|
244
|
-
|
|
252
|
+
handler: _ref4 => {
|
|
253
|
+
let {
|
|
254
|
+
index
|
|
255
|
+
} = _ref4;
|
|
245
256
|
const {
|
|
246
257
|
records,
|
|
247
258
|
actions: {
|
|
@@ -3,15 +3,19 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
6
12
|
var React = require('react');
|
|
7
|
-
var
|
|
8
|
-
var utils = require('@elliemae/ds-utilities/utils');
|
|
13
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
9
14
|
var walkTreeStrategy = require('./walkTreeStrategy.js');
|
|
10
15
|
|
|
11
16
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
17
|
|
|
13
18
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
14
|
-
var useExpandState__default = /*#__PURE__*/_interopDefaultLegacy(useExpandState);
|
|
15
19
|
|
|
16
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; }
|
|
17
21
|
|
|
@@ -46,7 +50,7 @@ const useExpandTreeState = instance => {
|
|
|
46
50
|
onCollapse
|
|
47
51
|
}
|
|
48
52
|
} = instance;
|
|
49
|
-
const expandedState =
|
|
53
|
+
const expandedState = dsUtilities.useExpandState({
|
|
50
54
|
items: originalData,
|
|
51
55
|
itemKey,
|
|
52
56
|
expanded: expandedItemsProp,
|
|
@@ -104,7 +108,7 @@ const useExpandTreeState = instance => {
|
|
|
104
108
|
};
|
|
105
109
|
|
|
106
110
|
const handleToggleExpand = (item, opts) => {
|
|
107
|
-
if (
|
|
111
|
+
if (dsUtilities.isFunction(onToggleExpand)) {
|
|
108
112
|
onToggleExpand(item);
|
|
109
113
|
} else {
|
|
110
114
|
toggleExpand(item, opts);
|
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.find.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.find.js');
|
|
5
8
|
var get = require('lodash/get');
|
|
6
9
|
|
|
7
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -9,12 +12,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
12
|
var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
|
|
10
13
|
|
|
11
14
|
const getParentId = record => get__default["default"](record, ['parentNode', 'id']);
|
|
12
|
-
const findItemOnDocument = id => document.querySelector(
|
|
13
|
-
const getListFromDocument = () => document.querySelector(
|
|
14
|
-
const getParentChildren = (record
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
const findItemOnDocument = id => document.querySelector("[data-id=\"".concat(id, "\"]"));
|
|
16
|
+
const getListFromDocument = () => document.querySelector("[data-testid=\"tree-list\"]");
|
|
17
|
+
const getParentChildren = function (record) {
|
|
18
|
+
let childrenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
|
|
19
|
+
return get__default["default"](record, ['parentNode', 'data', childrenKey]);
|
|
20
|
+
};
|
|
21
|
+
const getItemLabel = function (record) {
|
|
22
|
+
let nameKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'name';
|
|
23
|
+
return get__default["default"](record, ['data', nameKey]);
|
|
24
|
+
};
|
|
25
|
+
const getItemChildren = function (record) {
|
|
26
|
+
let childrenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
|
|
27
|
+
return get__default["default"](record, ['data', childrenKey]);
|
|
28
|
+
};
|
|
29
|
+
const getItemChildrenLength = function (record) {
|
|
30
|
+
let childrenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
|
|
18
31
|
const children = get__default["default"](record, ['data', childrenKey]);
|
|
19
32
|
return children && children.length;
|
|
20
33
|
};
|
|
@@ -2,20 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
|
+
|
|
5
7
|
function getPath(parentNode, index, childrenKey) {
|
|
6
8
|
if (!parentNode) return [index];
|
|
7
9
|
return [...parentNode.path, childrenKey, index];
|
|
8
10
|
}
|
|
9
11
|
|
|
10
|
-
function walkTreeStrategy({
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
function walkTreeStrategy(_ref) {
|
|
13
|
+
let {
|
|
14
|
+
data,
|
|
15
|
+
childrenKey = 'children',
|
|
16
|
+
level = 0,
|
|
17
|
+
getId = item => item.id,
|
|
18
|
+
parentNode,
|
|
19
|
+
shouldWalkChildren = () => true,
|
|
20
|
+
cb
|
|
21
|
+
} = _ref;
|
|
22
|
+
|
|
19
23
|
// eslint-disable-next-line no-plusplus
|
|
20
24
|
for (let i = 0; i < data.length; i++) {
|
|
21
25
|
const currLevel = level + 1;
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
11
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
12
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
@@ -61,11 +66,12 @@ function areEqualRecords(prevProps, nextProps) {
|
|
|
61
66
|
// https://react-window.now.sh/#/examples/list/memoized-list-items
|
|
62
67
|
|
|
63
68
|
|
|
64
|
-
const VirtualizedTreeItem = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/React__default["default"].forwardRef(({
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
+
const VirtualizedTreeItem = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
70
|
+
let {
|
|
71
|
+
index,
|
|
72
|
+
style,
|
|
73
|
+
data
|
|
74
|
+
} = _ref;
|
|
69
75
|
const {
|
|
70
76
|
instance,
|
|
71
77
|
records,
|
|
@@ -96,13 +102,13 @@ const VirtualizedTreeItem = /*#__PURE__*/React__default["default"].memo( /*#__PU
|
|
|
96
102
|
}));
|
|
97
103
|
}), areEqualRecords); // eslint-disable-next-line react/display-name
|
|
98
104
|
|
|
99
|
-
const VirtualizedTree = (renderers$1, instance) =>
|
|
105
|
+
const VirtualizedTree = (renderers$1, instance) => _ref2 => {
|
|
100
106
|
let {
|
|
101
107
|
records,
|
|
102
108
|
itemRenderer,
|
|
103
109
|
innerRef
|
|
104
|
-
} =
|
|
105
|
-
rest = _objectWithoutProperties__default["default"](
|
|
110
|
+
} = _ref2,
|
|
111
|
+
rest = _objectWithoutProperties__default["default"](_ref2, _excluded);
|
|
106
112
|
|
|
107
113
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
108
114
|
const {
|
|
@@ -164,17 +170,25 @@ const TreeVirtualizationPlugin = createInstancePlugin__default["default"]('tree-
|
|
|
164
170
|
listRef
|
|
165
171
|
},
|
|
166
172
|
actions: {
|
|
167
|
-
scrollTo: (
|
|
173
|
+
scrollTo: function () {
|
|
168
174
|
var _listRef$current;
|
|
169
175
|
|
|
170
176
|
if (listRef !== null && listRef !== void 0 && (_listRef$current = listRef.current) !== null && _listRef$current !== void 0 && _listRef$current.scrollTo) {
|
|
177
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
178
|
+
args[_key] = arguments[_key];
|
|
179
|
+
}
|
|
180
|
+
|
|
171
181
|
listRef.current.scrollTo(args);
|
|
172
182
|
}
|
|
173
183
|
},
|
|
174
|
-
scrollToItem: (
|
|
184
|
+
scrollToItem: function () {
|
|
175
185
|
var _listRef$current2;
|
|
176
186
|
|
|
177
187
|
if (listRef !== null && listRef !== void 0 && (_listRef$current2 = listRef.current) !== null && _listRef$current2 !== void 0 && _listRef$current2.scrollToItem) {
|
|
188
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
189
|
+
args[_key2] = arguments[_key2];
|
|
190
|
+
}
|
|
191
|
+
|
|
178
192
|
listRef.current.scrollToItem(args);
|
|
179
193
|
}
|
|
180
194
|
}
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
12
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
@@ -22,7 +27,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
22
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; }
|
|
23
28
|
const treeListBlockName = 'tree-list';
|
|
24
29
|
const treeItemBlockName = 'tree-item';
|
|
25
|
-
const treeListNoItemsBn =
|
|
30
|
+
const treeListNoItemsBn = "".concat(treeListBlockName, "-no-items");
|
|
26
31
|
const TreeListItem = dsClassnames.aggregatedClasses('li', {
|
|
27
32
|
'data-testid': treeItemBlockName,
|
|
28
33
|
role: 'treeitem'
|
|
@@ -31,22 +36,25 @@ const TreeListItemAddonsWrapper = dsClassnames.aggregatedClasses('div')(treeItem
|
|
|
31
36
|
const TreeList = dsClassnames.aggregatedClasses('ul', {
|
|
32
37
|
'data-testid': treeListBlockName,
|
|
33
38
|
role: 'tree'
|
|
34
|
-
})(treeListBlockName, null,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
+
})(treeListBlockName, null, _ref => {
|
|
40
|
+
let {
|
|
41
|
+
rowSize
|
|
42
|
+
} = _ref;
|
|
43
|
+
return {
|
|
44
|
+
["rowsize-".concat(rowSize)]: rowSize
|
|
45
|
+
};
|
|
46
|
+
});
|
|
39
47
|
const TreeListNoItems = dsClassnames.aggregatedClasses('div', {
|
|
40
48
|
'data-testid': treeListNoItemsBn
|
|
41
49
|
})(treeListNoItemsBn);
|
|
42
50
|
|
|
43
|
-
function TreeItem(
|
|
51
|
+
function TreeItem(_ref2) {
|
|
44
52
|
let {
|
|
45
53
|
leftAddons,
|
|
46
54
|
rightAddons,
|
|
47
55
|
children
|
|
48
|
-
} =
|
|
49
|
-
rest = _objectWithoutProperties__default["default"](
|
|
56
|
+
} = _ref2,
|
|
57
|
+
rest = _objectWithoutProperties__default["default"](_ref2, _excluded);
|
|
50
58
|
|
|
51
59
|
return /*#__PURE__*/jsxRuntime.jsxs(TreeListItem, _objectSpread(_objectSpread({}, rest), {}, {
|
|
52
60
|
children: [leftAddons && /*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, leftAddons), children, rightAddons && /*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, rightAddons)]
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
3
8
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
9
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
10
|
var React = require('react');
|
|
6
|
-
var
|
|
11
|
+
var dsForm = require('@elliemae/ds-form');
|
|
7
12
|
var styled = require('styled-components');
|
|
8
13
|
var TreeViewContext = require('../TreeViewContext.js');
|
|
9
14
|
var selectableHelper = require('../utils/selectable-helper.js');
|
|
@@ -13,7 +18,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
18
|
|
|
14
19
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
15
20
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
16
|
-
var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
|
|
17
21
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
18
22
|
|
|
19
23
|
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; }
|
|
@@ -71,7 +75,7 @@ function CheckboxSelectable(props) {
|
|
|
71
75
|
|
|
72
76
|
return false;
|
|
73
77
|
}, [selectedCheckboxes, id]);
|
|
74
|
-
return /*#__PURE__*/_jsx__default["default"](StyledCheckboxWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](
|
|
78
|
+
return /*#__PURE__*/_jsx__default["default"](StyledCheckboxWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
|
|
75
79
|
checked: isChecked,
|
|
76
80
|
disabled: item.isGroup ? disableGroups : disableLeafs,
|
|
77
81
|
className: "em-ds-tree-item-checkbox",
|
|
@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
|
|
11
11
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
12
12
|
|
|
13
|
-
const className =
|
|
13
|
+
const className = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "-children-count-displayer");
|
|
14
14
|
const ChildrenCountDisplayer = props => {
|
|
15
15
|
const {
|
|
16
16
|
item
|
|
@@ -24,7 +24,7 @@ const ChildrenCountDisplayer = props => {
|
|
|
24
24
|
return /*#__PURE__*/_jsx__default["default"]("span", {
|
|
25
25
|
"data-testid": "tree-item-children-count-displayer",
|
|
26
26
|
className: className
|
|
27
|
-
}, void 0,
|
|
27
|
+
}, void 0, " | ".concat(children.length, " Items"));
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
exports.ChildrenCountDisplayer = ChildrenCountDisplayer;
|
package/cjs/parts/ExpandCaret.js
CHANGED
|
@@ -4,9 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var Button = require('@elliemae/ds-
|
|
8
|
-
var
|
|
9
|
-
var ArrowheadRight = require('@elliemae/ds-icons/ArrowheadRight');
|
|
7
|
+
var Button = require('@elliemae/ds-button');
|
|
8
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
10
9
|
var groupExpandsHelpers = require('../utils/group-expands-helpers.js');
|
|
11
10
|
var treeHelpers = require('../utils/tree-helpers.js');
|
|
12
11
|
var TreeViewContext = require('../TreeViewContext.js');
|
|
@@ -15,8 +14,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
14
|
|
|
16
15
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
17
16
|
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
18
|
-
var ArrowheadDown__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadDown);
|
|
19
|
-
var ArrowheadRight__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadRight);
|
|
20
17
|
|
|
21
18
|
var _ArrowheadDown, _ArrowheadRight;
|
|
22
19
|
const ExpandCaret = props => {
|
|
@@ -48,10 +45,10 @@ const ExpandCaret = props => {
|
|
|
48
45
|
buttonType: "text",
|
|
49
46
|
className: "expandable-arrow",
|
|
50
47
|
"data-testid": "tree-item-expand-toggle",
|
|
51
|
-
icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](
|
|
48
|
+
icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
|
|
52
49
|
size: "s",
|
|
53
50
|
"data-testid": "ic-arrow-head-down"
|
|
54
|
-
})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](
|
|
51
|
+
})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
|
|
55
52
|
size: "s",
|
|
56
53
|
"data-testid": "ic-arrow-head-right"
|
|
57
54
|
})),
|
|
@@ -67,9 +64,12 @@ const ExpandCaret = props => {
|
|
|
67
64
|
setLatestToggledItem(item);
|
|
68
65
|
onItemFocus({
|
|
69
66
|
itemIndex: item.virtualIndex,
|
|
70
|
-
scrollToItem: (
|
|
71
|
-
|
|
72
|
-
|
|
67
|
+
scrollToItem: function () {
|
|
68
|
+
let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
|
|
69
|
+
align: 'start'
|
|
70
|
+
};
|
|
71
|
+
return scrollToIndex(item.virtualIndex, opts);
|
|
72
|
+
},
|
|
73
73
|
item
|
|
74
74
|
});
|
|
75
75
|
setFocusedItem(item);
|
|
@@ -77,7 +77,7 @@ const ExpandCaret = props => {
|
|
|
77
77
|
},
|
|
78
78
|
size: "s",
|
|
79
79
|
tabIndex: -1
|
|
80
|
-
},
|
|
80
|
+
}, "".concat(id, "-expand-addon"));
|
|
81
81
|
return /*#__PURE__*/_jsx__default["default"]("div", {
|
|
82
82
|
style: {
|
|
83
83
|
width: '24px'
|
package/cjs/parts/Icon.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var
|
|
6
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
7
7
|
var TreeViewContext = require('../TreeViewContext.js');
|
|
8
8
|
|
|
9
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -26,7 +26,7 @@ const Icon = props => {
|
|
|
26
26
|
if (!icon) return null;
|
|
27
27
|
return /*#__PURE__*/React__default["default"].cloneElement(icon, {
|
|
28
28
|
'data-testid': isGroupOrHasChildrens ? 'tree-item-group-icon' : 'tree-item-icon',
|
|
29
|
-
className:
|
|
29
|
+
className: dsUtilities.cx(icon.props.className, 'tree-item-icon')
|
|
30
30
|
});
|
|
31
31
|
};
|
|
32
32
|
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
11
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
12
|
require('react');
|
|
@@ -24,7 +29,7 @@ const getItemNestingLeftPadding = (level, opts) => {
|
|
|
24
29
|
const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1; // root level left-padding would be negative and would not be applied
|
|
25
30
|
// if "root-level" nesting, then defaults to 0 left-padding.
|
|
26
31
|
|
|
27
|
-
return finalLeftPadding > 0 ?
|
|
32
|
+
return finalLeftPadding > 0 ? "".concat(finalLeftPadding, "em") : '0';
|
|
28
33
|
};
|
|
29
34
|
|
|
30
35
|
const NestingSpace = props => {
|