@elliemae/ds-treeview 2.0.2 → 2.1.0-rc.4

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.
Files changed (165) hide show
  1. package/cjs/TreeView.js +5 -103
  2. package/cjs/TreeViewContext.js +44 -47
  3. package/cjs/config/useTreeview.js +137 -0
  4. package/cjs/index.js +1 -7
  5. package/cjs/parts/CheckboxSelectable.js +5 -7
  6. package/cjs/parts/ExpandCaret.js +17 -11
  7. package/cjs/parts/Icon.js +4 -0
  8. package/cjs/parts/NestingSpace.js +15 -22
  9. package/cjs/parts/RadioSelectable.js +7 -9
  10. package/cjs/parts/TreeItem.js +14 -11
  11. package/cjs/parts/TreeList.js +4 -2
  12. package/cjs/plugins/dnd/TreeDndPlugin.js +1 -1
  13. package/cjs/react-desc-prop-types.js +28 -27
  14. package/cjs/related-components/TreeViewSearchBar.js +9 -1
  15. package/cjs/{deprecated/plugins/selectable/helper.js → sharedTypes.js} +0 -0
  16. package/cjs/utils/dnd-helpers.js +2 -4
  17. package/cjs/utils/group-expands-helpers.js +34 -8
  18. package/cjs/utils/keyboard-helpers.js +64 -60
  19. package/cjs/utils/object-helpers.js +25 -7
  20. package/cjs/utils/refs-helpers.js +2 -2
  21. package/cjs/utils/tree-helpers.js +42 -27
  22. package/cjs/utils/useDnDHelpers.js +107 -100
  23. package/cjs/utils/useInstanceRefActions.js +3 -2
  24. package/cjs/utils/useTree.js +25 -6
  25. package/esm/TreeView.js +6 -103
  26. package/esm/TreeViewContext.js +44 -47
  27. package/esm/config/useTreeview.js +129 -0
  28. package/esm/index.js +0 -8
  29. package/esm/parts/CheckboxSelectable.js +5 -7
  30. package/esm/parts/ExpandCaret.js +17 -11
  31. package/esm/parts/Icon.js +4 -0
  32. package/esm/parts/NestingSpace.js +15 -21
  33. package/esm/parts/RadioSelectable.js +7 -9
  34. package/esm/parts/TreeItem.js +14 -11
  35. package/esm/parts/TreeList.js +4 -2
  36. package/esm/plugins/dnd/TreeDndPlugin.js +1 -1
  37. package/esm/react-desc-prop-types.js +28 -27
  38. package/esm/related-components/TreeViewSearchBar.js +9 -1
  39. package/esm/{deprecated/plugins/selectable/helper.js → sharedTypes.js} +0 -0
  40. package/esm/utils/dnd-helpers.js +2 -4
  41. package/esm/utils/group-expands-helpers.js +34 -9
  42. package/esm/utils/keyboard-helpers.js +62 -58
  43. package/esm/utils/object-helpers.js +25 -7
  44. package/esm/utils/refs-helpers.js +2 -2
  45. package/esm/utils/tree-helpers.js +42 -27
  46. package/esm/utils/useDnDHelpers.js +107 -100
  47. package/esm/utils/useInstanceRefActions.js +3 -2
  48. package/esm/utils/useTree.js +25 -6
  49. package/package.json +17 -128
  50. package/types/TreeView.d.ts +4 -148
  51. package/types/TreeViewContext.d.ts +4 -106
  52. package/types/config/useTreeview.d.ts +7 -0
  53. package/types/index.d.ts +0 -1
  54. package/types/parts/CheckboxSelectable.d.ts +5 -6
  55. package/types/parts/ChildrenCountDisplayer.d.ts +6 -6
  56. package/types/parts/ExpandCaret.d.ts +6 -6
  57. package/types/parts/Icon.d.ts +7 -5
  58. package/types/parts/NestingSpace.d.ts +3 -8
  59. package/types/parts/RadioSelectable.d.ts +5 -6
  60. package/types/parts/TreeItem.d.ts +22 -14
  61. package/types/parts/TreeItemText.d.ts +5 -5
  62. package/types/parts/TreeList.d.ts +22 -9
  63. package/types/react-desc-prop-types.d.ts +124 -43
  64. package/types/related-components/TreeViewSearchBar.d.ts +14 -11
  65. package/types/sharedTypes.d.ts +54 -0
  66. package/types/utils/array-helpers.d.ts +2 -2
  67. package/types/utils/dnd-helpers.d.ts +26 -25
  68. package/types/utils/group-expands-helpers.d.ts +13 -10
  69. package/types/utils/keyboard-helpers.d.ts +5 -3
  70. package/types/utils/object-helpers.d.ts +6 -2
  71. package/types/utils/refs-helpers.d.ts +4 -1
  72. package/types/utils/selectable-helper.d.ts +7 -3
  73. package/types/utils/string-helpers.d.ts +1 -1
  74. package/types/utils/tree-helpers.d.ts +25 -11
  75. package/types/utils/useDnDHelpers.d.ts +23 -3
  76. package/types/utils/useInstanceRefActions.d.ts +3 -3
  77. package/types/utils/useTree.d.ts +8 -7
  78. package/cjs/deprecated/TreeView.js +0 -72
  79. package/cjs/deprecated/__testUtils__/utils.js +0 -89
  80. package/cjs/deprecated/index.js +0 -27
  81. package/cjs/deprecated/plugins/dnd/TreeDndPlugin.js +0 -119
  82. package/cjs/deprecated/plugins/dnd/index.js +0 -9
  83. package/cjs/deprecated/plugins/dnd/renderers/DraggableItem.js +0 -67
  84. package/cjs/deprecated/plugins/dnd/renderers/DroppableList.js +0 -181
  85. package/cjs/deprecated/plugins/dnd/utils.js +0 -157
  86. package/cjs/deprecated/plugins/index.js +0 -21
  87. package/cjs/deprecated/plugins/roving/TreeRovingPlugin.js +0 -109
  88. package/cjs/deprecated/plugins/roving/index.js +0 -9
  89. package/cjs/deprecated/plugins/searchable/SearchableTreePlugin.js +0 -109
  90. package/cjs/deprecated/plugins/searchable/index.js +0 -9
  91. package/cjs/deprecated/plugins/searchable/utils.js +0 -7
  92. package/cjs/deprecated/plugins/selectable/SelectablePluginTree.js +0 -290
  93. package/cjs/deprecated/plugins/selectable/index.js +0 -9
  94. package/cjs/deprecated/plugins/selectable/utils.js +0 -19
  95. package/cjs/deprecated/plugins/toolbar/TreeToolbarPlugin.js +0 -128
  96. package/cjs/deprecated/plugins/toolbar/index.js +0 -9
  97. package/cjs/deprecated/plugins/tree/TreeDataPlugin.js +0 -281
  98. package/cjs/deprecated/plugins/tree/index.js +0 -9
  99. package/cjs/deprecated/plugins/tree/useExpandTreeState.js +0 -143
  100. package/cjs/deprecated/plugins/tree/utils.js +0 -43
  101. package/cjs/deprecated/plugins/tree/walkTreeStrategy.js +0 -60
  102. package/cjs/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js +0 -209
  103. package/cjs/deprecated/plugins/virtualization/index.js +0 -9
  104. package/cjs/deprecated/renderers.js +0 -76
  105. package/cjs/prop-types.js +0 -61
  106. package/esm/deprecated/TreeView.js +0 -61
  107. package/esm/deprecated/__testUtils__/utils.js +0 -79
  108. package/esm/deprecated/index.js +0 -14
  109. package/esm/deprecated/plugins/dnd/TreeDndPlugin.js +0 -110
  110. package/esm/deprecated/plugins/dnd/index.js +0 -1
  111. package/esm/deprecated/plugins/dnd/renderers/DraggableItem.js +0 -59
  112. package/esm/deprecated/plugins/dnd/renderers/DroppableList.js +0 -172
  113. package/esm/deprecated/plugins/dnd/utils.js +0 -139
  114. package/esm/deprecated/plugins/index.js +0 -7
  115. package/esm/deprecated/plugins/roving/TreeRovingPlugin.js +0 -96
  116. package/esm/deprecated/plugins/roving/index.js +0 -1
  117. package/esm/deprecated/plugins/searchable/SearchableTreePlugin.js +0 -99
  118. package/esm/deprecated/plugins/searchable/index.js +0 -1
  119. package/esm/deprecated/plugins/searchable/utils.js +0 -3
  120. package/esm/deprecated/plugins/selectable/SelectablePluginTree.js +0 -280
  121. package/esm/deprecated/plugins/selectable/index.js +0 -1
  122. package/esm/deprecated/plugins/selectable/utils.js +0 -15
  123. package/esm/deprecated/plugins/toolbar/TreeToolbarPlugin.js +0 -114
  124. package/esm/deprecated/plugins/toolbar/index.js +0 -1
  125. package/esm/deprecated/plugins/tree/TreeDataPlugin.js +0 -269
  126. package/esm/deprecated/plugins/tree/index.js +0 -1
  127. package/esm/deprecated/plugins/tree/useExpandTreeState.js +0 -135
  128. package/esm/deprecated/plugins/tree/utils.js +0 -28
  129. package/esm/deprecated/plugins/tree/walkTreeStrategy.js +0 -56
  130. package/esm/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js +0 -197
  131. package/esm/deprecated/plugins/virtualization/index.js +0 -1
  132. package/esm/deprecated/renderers.js +0 -59
  133. package/esm/prop-types.js +0 -46
  134. package/types/deprecated/TreeView.d.ts +0 -8
  135. package/types/deprecated/__testUtils__/utils.d.ts +0 -72
  136. package/types/deprecated/index.d.ts +0 -2
  137. package/types/deprecated/plugins/dnd/TreeDndPlugin.d.ts +0 -1
  138. package/types/deprecated/plugins/dnd/index.d.ts +0 -1
  139. package/types/deprecated/plugins/dnd/renderers/DraggableItem.d.ts +0 -3
  140. package/types/deprecated/plugins/dnd/renderers/DroppableList.d.ts +0 -6
  141. package/types/deprecated/plugins/dnd/tests/TreeDndPlugin.test.d.ts +0 -0
  142. package/types/deprecated/plugins/dnd/utils.d.ts +0 -28
  143. package/types/deprecated/plugins/index.d.ts +0 -7
  144. package/types/deprecated/plugins/roving/TreeRovingPlugin.d.ts +0 -1
  145. package/types/deprecated/plugins/roving/index.d.ts +0 -1
  146. package/types/deprecated/plugins/searchable/SearchableTreePlugin.d.ts +0 -1
  147. package/types/deprecated/plugins/searchable/index.d.ts +0 -1
  148. package/types/deprecated/plugins/searchable/utils.d.ts +0 -1
  149. package/types/deprecated/plugins/selectable/SelectablePluginTree.d.ts +0 -1
  150. package/types/deprecated/plugins/selectable/helper.d.ts +0 -0
  151. package/types/deprecated/plugins/selectable/index.d.ts +0 -1
  152. package/types/deprecated/plugins/selectable/tests/SelectablePluginTree.test.d.ts +0 -1
  153. package/types/deprecated/plugins/selectable/utils.d.ts +0 -1
  154. package/types/deprecated/plugins/toolbar/TreeToolbarPlugin.d.ts +0 -1
  155. package/types/deprecated/plugins/toolbar/index.d.ts +0 -1
  156. package/types/deprecated/plugins/tree/TreeDataPlugin.d.ts +0 -1
  157. package/types/deprecated/plugins/tree/index.d.ts +0 -1
  158. package/types/deprecated/plugins/tree/tests/TreeDataPlugin.test.d.ts +0 -1
  159. package/types/deprecated/plugins/tree/useExpandTreeState.d.ts +0 -14
  160. package/types/deprecated/plugins/tree/utils.d.ts +0 -8
  161. package/types/deprecated/plugins/tree/walkTreeStrategy.d.ts +0 -9
  162. package/types/deprecated/plugins/virtualization/TreeVirtualizationPlugin.d.ts +0 -1
  163. package/types/deprecated/plugins/virtualization/index.d.ts +0 -1
  164. package/types/deprecated/renderers.d.ts +0 -19
  165. package/types/prop-types.d.ts +0 -26
@@ -1,135 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import 'core-js/modules/web.dom-collections.iterator.js';
8
- import { useRef, useState, useEffect } from 'react';
9
- import { useExpandState, isFunction } from '@elliemae/ds-utilities';
10
- import { walkTreeStrategy } from './walkTreeStrategy.js';
11
-
12
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
13
-
14
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
15
-
16
- const toggleExpandAllAsync = (expand, data) => new Promise(resolve => {
17
- const nextState = {};
18
-
19
- if (expand) {
20
- walkTreeStrategy({
21
- data,
22
- cb: node => {
23
- if (node.isGroup) nextState[node.id] = true;
24
- }
25
- });
26
- }
27
-
28
- resolve(nextState);
29
- });
30
-
31
- const useExpandTreeState = instance => {
32
- const {
33
- originalData,
34
- props: {
35
- searchQuery,
36
- expandedRows: expandedItemsProp = {},
37
- itemKey = 'id',
38
- onExpand,
39
- onExpandChange,
40
- onExpandAll,
41
- onToggleExpand,
42
- onCollapse
43
- }
44
- } = instance;
45
- const expandedState = useExpandState({
46
- items: originalData,
47
- itemKey,
48
- expanded: expandedItemsProp,
49
- onExpand,
50
- onExpandChange,
51
- onExpandAll,
52
- onToggleExpand,
53
- onCollapse
54
- });
55
- const totalExpandableRecords = useRef(0);
56
- const [expandedAll, setExpandAll] = useState(false);
57
- useEffect(() => {
58
- totalExpandableRecords.current = 0;
59
- walkTreeStrategy({
60
- data: originalData,
61
- cb: node => {
62
- if (node.isGroup) totalExpandableRecords.current += 1;
63
- }
64
- });
65
- }, [originalData]);
66
- useEffect(() => {
67
- const currLength = Object.keys(expandedState.state.expanded || {}).length;
68
- let isExpandedAll;
69
- if (currLength === 0) isExpandedAll = false;else if (totalExpandableRecords.current !== currLength) isExpandedAll = 'mixed';else if (currLength === totalExpandableRecords.current) isExpandedAll = true;
70
- setExpandAll(isExpandedAll);
71
- }, [expandedState.state.expanded, originalData]);
72
-
73
- const toggleExpand = (item, opts) => {
74
- const {
75
- expandAllChildren
76
- } = opts || {};
77
- expandedState.setExpanded(prevState => {
78
- const nextExpandState = _objectSpread({}, prevState);
79
-
80
- const nextState = !prevState[item[itemKey]];
81
- if (nextState) nextExpandState[item[itemKey]] = true;else delete nextExpandState[item[itemKey]];
82
-
83
- if (expandAllChildren) {
84
- walkTreeStrategy({
85
- data: item.children,
86
- cb: node => {
87
- if (node.isGroup) {
88
- if (nextState) nextExpandState[node.id] = true;else delete nextExpandState[node.id];
89
- }
90
- }
91
- });
92
- }
93
-
94
- if (onExpandChange) {
95
- onExpandChange(nextExpandState, item);
96
- }
97
-
98
- return nextExpandState;
99
- });
100
- };
101
-
102
- const handleToggleExpand = (item, opts) => {
103
- if (isFunction(onToggleExpand)) {
104
- onToggleExpand(item);
105
- } else {
106
- toggleExpand(item, opts);
107
- }
108
- };
109
-
110
- const toggleExpandAll = expanded => {
111
- let nextExpanded = true; // if no param is passed, keep toggle behavior
112
-
113
- if (typeof expandedAll === 'boolean') nextExpanded = !expandedAll;
114
- if (typeof expanded !== 'undefined') nextExpanded = expanded;
115
- setExpandAll(nextExpanded);
116
- return toggleExpandAllAsync(nextExpanded, originalData).then(nextState => expandedState.setExpanded(nextState));
117
- };
118
-
119
- useEffect(() => {
120
- if (searchQuery && (!expandedAll || expandedAll === 'mixed')) toggleExpandAll(true);
121
- }, [searchQuery]); // eslint-disable-next-line max-lines
122
-
123
- return {
124
- state: _objectSpread(_objectSpread({}, expandedState.state), {}, {
125
- expandedAll
126
- }),
127
- actions: _objectSpread(_objectSpread({}, expandedState.actions), {}, {
128
- toggleExpandAll,
129
- toggleExpand,
130
- _toggleExpand: handleToggleExpand
131
- })
132
- };
133
- };
134
-
135
- export { useExpandTreeState };
@@ -1,28 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.find.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.find.js';
4
- import get from 'lodash/get';
5
-
6
- const getParentId = record => get(record, ['parentNode', 'id']);
7
- const findItemOnDocument = id => document.querySelector("[data-id=\"".concat(id, "\"]"));
8
- const getListFromDocument = () => document.querySelector("[data-testid=\"tree-list\"]");
9
- const getParentChildren = function (record) {
10
- let childrenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
11
- return get(record, ['parentNode', 'data', childrenKey]);
12
- };
13
- const getItemLabel = function (record) {
14
- let nameKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'name';
15
- return get(record, ['data', nameKey]);
16
- };
17
- const getItemChildren = function (record) {
18
- let childrenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
19
- return get(record, ['data', childrenKey]);
20
- };
21
- const getItemChildrenLength = function (record) {
22
- let childrenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
23
- const children = get(record, ['data', childrenKey]);
24
- return children && children.length;
25
- };
26
- const findItemById = (records, id) => records.find(record => String(record.id) === id);
27
-
28
- export { findItemById, findItemOnDocument, getItemChildren, getItemChildrenLength, getItemLabel, getListFromDocument, getParentChildren, getParentId };
@@ -1,56 +0,0 @@
1
- import 'core-js/modules/web.dom-collections.iterator.js';
2
-
3
- function getPath(parentNode, index, childrenKey) {
4
- if (!parentNode) return [index];
5
- return [...parentNode.path, childrenKey, index];
6
- }
7
-
8
- function walkTreeStrategy(_ref) {
9
- let {
10
- data,
11
- childrenKey = 'children',
12
- level = 0,
13
- getId = item => item.id,
14
- parentNode,
15
- shouldWalkChildren = () => true,
16
- cb
17
- } = _ref;
18
-
19
- // eslint-disable-next-line no-plusplus
20
- for (let i = 0; i < data.length; i++) {
21
- const currLevel = level + 1;
22
- const item = data[i];
23
- if (!item) throw new Error('no item received, invalid tree walking strategy!');
24
- const children = item[childrenKey];
25
- const {
26
- isGroup
27
- } = item;
28
- const node = {
29
- index: i,
30
- id: getId(item),
31
- data: item,
32
- path: getPath(parentNode, i, childrenKey),
33
- isGroup: children && !!children.length || isGroup,
34
- nestingLevel: currLevel,
35
- parentNode: parentNode || {
36
- isGroup: true,
37
- data: {
38
- children: data
39
- }
40
- }
41
- };
42
- cb(node);
43
-
44
- if (shouldWalkChildren(node) && children && children.length) {
45
- walkTreeStrategy({
46
- data: children,
47
- level: currLevel,
48
- parentNode: node,
49
- shouldWalkChildren,
50
- cb
51
- });
52
- }
53
- }
54
- }
55
-
56
- export { walkTreeStrategy };
@@ -1,197 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _jsx from '@babel/runtime/helpers/esm/jsx';
7
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
8
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
9
- import React, { useRef, useMemo } from 'react';
10
- import { DynamicSizeList } from '@john-osullivan/react-window-dynamic-fork';
11
- import { getVirtualListComponent } from '@elliemae/ds-shared/virtualization';
12
- import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
13
- import { TreeListNoItems } from '../../renderers.js';
14
- import { jsx } from 'react/jsx-runtime';
15
-
16
- const _excluded = ["records", "itemRenderer", "innerRef"];
17
-
18
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
19
-
20
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
21
-
22
- function shallowDiffers(prev, next) {
23
- // eslint-disable-next-line no-restricted-syntax
24
- for (const attribute in prev) {
25
- if (!(attribute in next)) {
26
- return true;
27
- }
28
- } // eslint-disable-next-line no-restricted-syntax
29
-
30
-
31
- for (const attribute in next) {
32
- if (prev[attribute] !== next[attribute]) {
33
- return true;
34
- }
35
- }
36
-
37
- return false;
38
- } // more performant alternative to areEqual from react-window 1.8.5
39
-
40
-
41
- function areEqualRecords(prevProps, nextProps) {
42
- const {
43
- style: prevStyle,
44
- index: pIdx,
45
- data: pData
46
- } = prevProps;
47
- const {
48
- style: nextStyle,
49
- index: nIdx,
50
- data: nData
51
- } = nextProps;
52
- return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(pData === null || pData === void 0 ? void 0 : pData.records[pIdx], nData === null || nData === void 0 ? void 0 : nData.records[nIdx]);
53
- } // memoized list items strategy
54
- // https://react-window.now.sh/#/examples/list/memoized-list-items
55
-
56
-
57
- const VirtualizedTreeItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((_ref, ref) => {
58
- let {
59
- index,
60
- style,
61
- data
62
- } = _ref;
63
- const {
64
- instance,
65
- records,
66
- listRef
67
- } = data;
68
- const {
69
- itemRenderer,
70
- getItemProps,
71
- renderers
72
- } = instance.getInstance();
73
- const record = records[index];
74
- const ItemComponent = renderers.item; // needed to show the shadow below the row and because
75
- // of absolute positioning from react-window
76
-
77
- const mixedProps = getItemProps({
78
- index,
79
- record,
80
- style,
81
- listRef,
82
- innerRef: ref
83
- }, {
84
- record
85
- });
86
- record.style = style;
87
- return /*#__PURE__*/jsx(ItemComponent, _objectSpread(_objectSpread({}, mixedProps), {}, {
88
- tabIndex: -1,
89
- children: itemRenderer(mixedProps)
90
- }));
91
- }), areEqualRecords); // eslint-disable-next-line react/display-name
92
-
93
- const VirtualizedTree = (renderers, instance) => _ref2 => {
94
- let {
95
- records,
96
- itemRenderer,
97
- innerRef
98
- } = _ref2,
99
- rest = _objectWithoutProperties(_ref2, _excluded);
100
-
101
- // eslint-disable-next-line react-hooks/rules-of-hooks
102
- const {
103
- props: {
104
- autoHeight,
105
- fluid,
106
- width,
107
- height = 500,
108
- noItemsPlaceholder = 'No items found',
109
- initialOffset
110
- },
111
- state: {
112
- listRef
113
- },
114
- renderers: currRenderers,
115
- setListRef
116
- } = instance.getInstance(); // eslint-disable-next-line react-hooks/rules-of-hooks
117
-
118
- const ListComponent = useMemo(() => getVirtualListComponent({
119
- component: DynamicSizeList,
120
- height,
121
- fluid,
122
- autoHeight
123
- }), [height, autoHeight]); // eslint-disable-next-line react-hooks/rules-of-hooks
124
-
125
- const itemData = useMemo(() => ({
126
- instance,
127
- listRef,
128
- renderers: currRenderers,
129
- records
130
- }), [records, currRenderers, listRef]); // todo: revise this
131
-
132
- if (records && !records.length) {
133
- return /*#__PURE__*/_jsx(TreeListNoItems, {}, void 0, noItemsPlaceholder);
134
- }
135
-
136
- return /*#__PURE__*/jsx(ListComponent, _objectSpread(_objectSpread({
137
- innerRef: setListRef
138
- }, rest), {}, {
139
- ref: listRef,
140
- component: DynamicSizeList,
141
- height: height,
142
- initialScrollOffset: initialOffset,
143
- itemCount: records.length,
144
- itemData: itemData,
145
- outerElementType: renderers.list,
146
- outerRef: innerRef,
147
- width: width,
148
- children: VirtualizedTreeItem
149
- }));
150
- };
151
-
152
- const TreeVirtualizationPlugin = createInstancePlugin('tree-virtualization', {
153
- state() {
154
- // eslint-disable-next-line react-hooks/rules-of-hooks
155
- const listRef = useRef();
156
- return {
157
- state: {
158
- listRef
159
- },
160
- actions: {
161
- scrollTo: function () {
162
- var _listRef$current;
163
-
164
- if (listRef !== null && listRef !== void 0 && (_listRef$current = listRef.current) !== null && _listRef$current !== void 0 && _listRef$current.scrollTo) {
165
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
166
- args[_key] = arguments[_key];
167
- }
168
-
169
- listRef.current.scrollTo(args);
170
- }
171
- },
172
- scrollToItem: function () {
173
- var _listRef$current2;
174
-
175
- if (listRef !== null && listRef !== void 0 && (_listRef$current2 = listRef.current) !== null && _listRef$current2 !== void 0 && _listRef$current2.scrollToItem) {
176
- for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
177
- args[_key2] = arguments[_key2];
178
- }
179
-
180
- listRef.current.scrollToItem(args);
181
- }
182
- }
183
- }
184
- };
185
- },
186
-
187
- renderers(renderers, instance) {
188
- return {
189
- item: renderers.item,
190
- // eslint-disable-next-line react-hooks/rules-of-hooks
191
- list: useMemo(() => VirtualizedTree(renderers, instance), [])
192
- };
193
- }
194
-
195
- });
196
-
197
- export { TreeVirtualizationPlugin };
@@ -1 +0,0 @@
1
- export { TreeVirtualizationPlugin } from './TreeVirtualizationPlugin.js';
@@ -1,59 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import _jsx from '@babel/runtime/helpers/esm/jsx';
8
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
9
- import { aggregatedClasses } from '@elliemae/ds-classnames';
10
- import 'react';
11
- import { jsxs } from 'react/jsx-runtime';
12
-
13
- const _excluded = ["leftAddons", "rightAddons", "children"];
14
-
15
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
16
-
17
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
18
- const treeListBlockName = 'tree-list';
19
- const treeItemBlockName = 'tree-item';
20
- const treeListNoItemsBn = "".concat(treeListBlockName, "-no-items");
21
- const TreeListItem = aggregatedClasses('li', {
22
- 'data-testid': treeItemBlockName,
23
- role: 'treeitem'
24
- })(treeItemBlockName);
25
- const TreeListItemAddonsWrapper = aggregatedClasses('div')(treeItemBlockName, 'addons');
26
- const TreeList = aggregatedClasses('ul', {
27
- 'data-testid': treeListBlockName,
28
- role: 'tree'
29
- })(treeListBlockName, null, _ref => {
30
- let {
31
- rowSize
32
- } = _ref;
33
- return {
34
- ["rowsize-".concat(rowSize)]: rowSize
35
- };
36
- });
37
- const TreeListNoItems = aggregatedClasses('div', {
38
- 'data-testid': treeListNoItemsBn
39
- })(treeListNoItemsBn);
40
-
41
- function TreeItem(_ref2) {
42
- let {
43
- leftAddons,
44
- rightAddons,
45
- children
46
- } = _ref2,
47
- rest = _objectWithoutProperties(_ref2, _excluded);
48
-
49
- return /*#__PURE__*/jsxs(TreeListItem, _objectSpread(_objectSpread({}, rest), {}, {
50
- children: [leftAddons && /*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, leftAddons), children, rightAddons && /*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, rightAddons)]
51
- }));
52
- }
53
-
54
- const TreeRenderers = {
55
- list: TreeList,
56
- item: TreeItem
57
- };
58
-
59
- export { TreeList, TreeListItem, TreeListItemAddonsWrapper, TreeListNoItems, TreeRenderers, treeItemBlockName, treeListBlockName, treeListNoItemsBn };
package/esm/prop-types.js DELETED
@@ -1,46 +0,0 @@
1
- import PropTypes from 'prop-types';
2
-
3
- /* eslint-disable max-lines */
4
- const InstanceActionsPropTypes = PropTypes.shape({
5
- toggleExpandAll: PropTypes.func,
6
- scrollTo: PropTypes.func
7
- });
8
- const TreeViewInstancePropType = PropTypes.shape({
9
- current: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.shape({
10
- actions: InstanceActionsPropTypes.isRequired
11
- })])
12
- });
13
- const TreeViewItemPropType = PropTypes.shape({
14
- children: PropTypes.arrayOf(PropTypes.object),
15
- id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
16
- isGroup: PropTypes.oneOfType([PropTypes.oneOf([undefined, null]), PropTypes.bool]),
17
- name: PropTypes.string,
18
- node: PropTypes.object
19
- });
20
- const TreeListPropTypes = {
21
- // required when drag and drop is enabled, tracks the drag and drop results after drop and visual feedback borders
22
- // passed down to TreeItem
23
- onMouseDragOverItem: PropTypes.func
24
- };
25
- const TreeItemPropTypes = {
26
- item: TreeViewItemPropType.isRequired,
27
- index: PropTypes.number,
28
- itemIndex: PropTypes.number,
29
- itemWrapperStyle: PropTypes.object,
30
- virtualItemRef: PropTypes.func,
31
- spaceForNestingLevel: PropTypes.number,
32
- onMouseDragOverItem: PropTypes.func
33
- };
34
- const TreeItemExpandCaretPropTypes = {
35
- item: TreeViewItemPropType.isRequired
36
- };
37
- const TreeItemNestingSpacePropTypes = {
38
- item: TreeViewItemPropType.isRequired,
39
- spaceForNestingLevel: PropTypes.number.isRequired
40
- };
41
- const TreeItemCheckboxPropTypes = {
42
- item: TreeViewItemPropType.isRequired,
43
- itemIndex: PropTypes.number.isRequired
44
- };
45
-
46
- export { InstanceActionsPropTypes, TreeItemCheckboxPropTypes, TreeItemExpandCaretPropTypes, TreeItemNestingSpacePropTypes, TreeItemPropTypes, TreeListPropTypes, TreeViewInstancePropType, TreeViewItemPropType };
@@ -1,8 +0,0 @@
1
- export declare function TreeView({ data, plugins, children, roving, rowSize, ...props }: {
2
- [x: string]: any;
3
- data: any;
4
- plugins?: never[] | undefined;
5
- children: any;
6
- roving?: boolean | undefined;
7
- rowSize?: string | undefined;
8
- }): any;
@@ -1,72 +0,0 @@
1
- import React from 'react';
2
- export declare const treeItemsToMap: (items: any) => Map<any, any>;
3
- /**
4
- * Returns items and itemMap with itemText as keys
5
- *
6
- * @param root0
7
- * @param root0.data
8
- * @param root0.plugins
9
- * @param key
10
- */
11
- export declare function getTreeItemsFromRender({ data, plugins, ...props }: {
12
- [x: string]: any;
13
- data: any;
14
- plugins: any;
15
- }, key?: string): {
16
- container: HTMLElement;
17
- baseElement: Element;
18
- debug: (baseElement?: Element | DocumentFragment | (Element | DocumentFragment)[] | undefined, maxLength?: number | undefined, options?: import("pretty-format").PrettyFormatOptions | undefined) => void;
19
- rerender: (ui: React.ReactElement<any, string | React.JSXElementConstructor<any>>) => void;
20
- unmount: () => void;
21
- asFragment: () => DocumentFragment;
22
- getByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement;
23
- getAllByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
24
- queryByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement | null;
25
- queryAllByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
26
- findByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
27
- findAllByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
28
- getByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
29
- getAllByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
30
- queryByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
31
- queryAllByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
32
- findByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
33
- findAllByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
34
- getByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement;
35
- getAllByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
36
- queryByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement | null;
37
- queryAllByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
38
- findByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
39
- findAllByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
40
- getByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
41
- getAllByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
42
- queryByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
43
- queryAllByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
44
- findByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
45
- findAllByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
46
- getByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
47
- getAllByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
48
- queryByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
49
- queryAllByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
50
- findByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
51
- findAllByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
52
- getByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
53
- getAllByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
54
- queryByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
55
- queryAllByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
56
- findByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
57
- findAllByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
58
- getByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement;
59
- getAllByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement[];
60
- queryByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement | null;
61
- queryAllByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement[];
62
- findByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
63
- findAllByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
64
- getByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
65
- queryByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
66
- queryAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
67
- findByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
68
- findAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
69
- items: HTMLElement[];
70
- itemsMap: Map<any, any>;
71
- getAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
72
- };
@@ -1,2 +0,0 @@
1
- export * from './TreeView';
2
- export * from './plugins';
@@ -1 +0,0 @@
1
- export declare const TreeDndPlugin: any;
@@ -1 +0,0 @@
1
- export * from './TreeDndPlugin';
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- declare const DraggableItem: (renderers: any) => (props: any) => JSX.Element;
3
- export default DraggableItem;
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- declare const DroppableList: (renderers: any, instance: any) => ({ records, ...rest }: {
3
- [x: string]: any;
4
- records: any;
5
- }) => JSX.Element;
6
- export default DroppableList;