@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,89 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
- require('core-js/modules/esnext.map.delete-all.js');
8
- require('core-js/modules/esnext.map.emplace.js');
9
- require('core-js/modules/esnext.map.every.js');
10
- require('core-js/modules/esnext.map.filter.js');
11
- require('core-js/modules/esnext.map.find.js');
12
- require('core-js/modules/esnext.map.find-key.js');
13
- require('core-js/modules/esnext.map.includes.js');
14
- require('core-js/modules/esnext.map.key-of.js');
15
- require('core-js/modules/esnext.map.map-keys.js');
16
- require('core-js/modules/esnext.map.map-values.js');
17
- require('core-js/modules/esnext.map.merge.js');
18
- require('core-js/modules/esnext.map.reduce.js');
19
- require('core-js/modules/esnext.map.some.js');
20
- require('core-js/modules/esnext.map.update.js');
21
- require('core-js/modules/web.dom-collections.iterator.js');
22
- require('core-js/modules/esnext.async-iterator.for-each.js');
23
- require('core-js/modules/esnext.iterator.constructor.js');
24
- require('core-js/modules/esnext.iterator.for-each.js');
25
- require('core-js/modules/es.string.replace.js');
26
- require('core-js/modules/esnext.async-iterator.filter.js');
27
- require('core-js/modules/esnext.iterator.filter.js');
28
- require('react');
29
- var react = require('@testing-library/react');
30
- var renderers = require('../renderers.js');
31
- var TreeView = require('../TreeView.js');
32
- var jsxRuntime = require('react/jsx-runtime');
33
-
34
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
35
-
36
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
37
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
38
-
39
- const _excluded = ["data", "plugins"],
40
- _excluded2 = ["getAllByTestId"];
41
-
42
- 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; }
43
-
44
- 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__default["default"](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; }
45
- const treeItemsToMap = items => {
46
- const itemsMap = new Map();
47
- items.forEach(item => itemsMap.set(item.textContent.replace(/\(.*?\)/, '').replace(' ', ''), item));
48
- return itemsMap;
49
- };
50
- /**
51
- * Returns items and itemMap with itemText as keys
52
- *
53
- * @param root0
54
- * @param root0.data
55
- * @param root0.plugins
56
- * @param key
57
- */
58
-
59
- function getTreeItemsFromRender(_ref) {
60
- let key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : renderers.treeItemBlockName;
61
-
62
- let {
63
- data,
64
- plugins
65
- } = _ref,
66
- props = _objectWithoutProperties__default["default"](_ref, _excluded);
67
-
68
- const _render = react.render( /*#__PURE__*/jsxRuntime.jsx(TreeView.TreeView, _objectSpread(_objectSpread({}, props), {}, {
69
- data: data,
70
- height: 1000,
71
- plugins: plugins,
72
- width: 300
73
- }))),
74
- {
75
- getAllByTestId
76
- } = _render,
77
- testingLibraryApi = _objectWithoutProperties__default["default"](_render, _excluded2);
78
-
79
- const items = getAllByTestId(key);
80
- const itemsMap = treeItemsToMap(items);
81
- return _objectSpread({
82
- items,
83
- itemsMap,
84
- getAllByTestId
85
- }, testingLibraryApi);
86
- }
87
-
88
- exports.getTreeItemsFromRender = getTreeItemsFromRender;
89
- exports.treeItemsToMap = treeItemsToMap;
@@ -1,27 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var TreeView = require('./TreeView.js');
6
- var TreeDndPlugin = require('./plugins/dnd/TreeDndPlugin.js');
7
- var TreeRovingPlugin = require('./plugins/roving/TreeRovingPlugin.js');
8
- var SelectablePluginTree = require('./plugins/selectable/SelectablePluginTree.js');
9
- var TreeToolbarPlugin = require('./plugins/toolbar/TreeToolbarPlugin.js');
10
- var TreeDataPlugin = require('./plugins/tree/TreeDataPlugin.js');
11
- var TreeVirtualizationPlugin = require('./plugins/virtualization/TreeVirtualizationPlugin.js');
12
- var SearchableTreePlugin = require('./plugins/searchable/SearchableTreePlugin.js');
13
-
14
- /* eslint-disable global-require */
15
- // Polyfill ResizeObserver for demo
16
- if (typeof ResizeObserver === 'undefined') {
17
- global.ResizeObserver = require('resize-observer-polyfill').default;
18
- }
19
-
20
- exports.TreeView = TreeView.TreeView;
21
- exports.TreeDndPlugin = TreeDndPlugin.TreeDndPlugin;
22
- exports.TreeRovingPlugin = TreeRovingPlugin.TreeRovingPlugin;
23
- exports.SelectablePluginTree = SelectablePluginTree.SelectablePluginTree;
24
- exports.TreeToolbarPlugin = TreeToolbarPlugin.TreeToolbarPlugin;
25
- exports.TreePluginList = TreeDataPlugin.TreePluginList;
26
- exports.TreeVirtualizationPlugin = TreeVirtualizationPlugin.TreeVirtualizationPlugin;
27
- exports.SearchableTreePlugin = SearchableTreePlugin.SearchableTreePlugin;
@@ -1,119 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
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');
12
- var React = require('react');
13
- var dsUtilities = require('@elliemae/ds-utilities');
14
- var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
15
- var DraggableItem = require('./renderers/DraggableItem.js');
16
- var DroppableList = require('./renderers/DroppableList.js');
17
- var utils = require('./utils.js');
18
-
19
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
-
21
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
22
- var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
23
-
24
- 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; }
25
-
26
- 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__default["default"](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; }
27
- const TreeDndPlugin = createInstancePlugin__default["default"]('tree-dnd', {
28
- state(instance) {
29
- const {
30
- originalData,
31
- props: {
32
- childrenKey = 'children',
33
- onOrderChange = () => null
34
- }
35
- } = instance; // eslint-disable-next-line react-hooks/rules-of-hooks
36
-
37
- const [draggedRecord, setDraggedRecord] = React.useState(null); // eslint-disable-next-line react-hooks/rules-of-hooks
38
-
39
- const changeRecordsPosition = React.useCallback(_ref => {
40
- let {
41
- sourceRecord,
42
- targetRecord,
43
- combineWith,
44
- down
45
- } = _ref;
46
- let nextTreeData;
47
- const sourceTreePosition = utils.getTreePosition(sourceRecord.path);
48
- let targetTreePosition = {};
49
-
50
- if (combineWith) {
51
- targetTreePosition = {
52
- parentPath: combineWith.path
53
- };
54
- } else if (targetRecord) {
55
- targetTreePosition = utils.getTreePosition(targetRecord.path);
56
- } else {
57
- // there is no reordering
58
- // Reason: outside tree / outside drop target
59
- return originalData;
60
- } // if we are not combining elements we change the same array
61
- // if we combine elements, we change a different array (the children of the target)
62
-
63
-
64
- const changingSameArray = !combineWith && dsUtilities.isEqual(sourceTreePosition.parentPath, targetTreePosition.parentPath);
65
-
66
- if (changingSameArray) {
67
- nextTreeData = utils.changePositionSameArray({
68
- sourceRecord,
69
- targetRecord,
70
- sourceTreePosition,
71
- targetTreePosition,
72
- data: originalData
73
- });
74
- } else {
75
- nextTreeData = utils.changePositionBetweenDifferentArrays({
76
- sourceRecord,
77
- targetRecord: combineWith || targetRecord,
78
- combineWith,
79
- sourceTreePosition,
80
- targetTreePosition,
81
- data: originalData,
82
- down
83
- });
84
- }
85
-
86
- onOrderChange(nextTreeData, sourceRecord); // console.log('nextTreeData :>> ', nextTreeData);
87
- // console.log(
88
- // `${sourceRecord?.data?.name} --> ${
89
- // combineWith?.data?.name || targetRecord?.data?.name
90
- // }`,
91
- // );
92
-
93
- return nextTreeData;
94
- }, [originalData, childrenKey]);
95
- return {
96
- state: {
97
- draggedRecord
98
- },
99
- actions: {
100
- setDraggedRecord,
101
- changeRecordsPosition
102
- }
103
- };
104
- },
105
-
106
- renderers(renderers, instance) {
107
- // eslint-disable-next-line react-hooks/rules-of-hooks
108
- const item = React.useMemo(() => DraggableItem(renderers), []); // eslint-disable-next-line react-hooks/rules-of-hooks
109
-
110
- const list = React.useMemo(() => DroppableList(renderers, instance), []);
111
- return _objectSpread(_objectSpread({}, renderers), {}, {
112
- item,
113
- list
114
- });
115
- }
116
-
117
- });
118
-
119
- exports.TreeDndPlugin = TreeDndPlugin;
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var TreeDndPlugin = require('./TreeDndPlugin.js');
6
-
7
-
8
-
9
- exports.TreeDndPlugin = TreeDndPlugin.TreeDndPlugin;
@@ -1,67 +0,0 @@
1
- 'use strict';
2
-
3
- var _jsx = require('@babel/runtime/helpers/jsx');
4
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
5
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
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');
12
- require('react');
13
- var reactBeautifulDnd = require('react-beautiful-dnd');
14
- var dsIcons = require('@elliemae/ds-icons');
15
- var utils = require('../utils.js');
16
- var jsxRuntime = require('react/jsx-runtime');
17
-
18
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
-
20
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
21
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
22
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
23
-
24
- const _excluded = ["key"];
25
-
26
- 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; }
27
-
28
- 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__default["default"](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; }
29
-
30
- const DraggableItem = (renderers // , instance
31
- ) => props => {
32
- var _record$parentNode, _record$parentNode$da, _record$data;
33
-
34
- const {
35
- record,
36
- index,
37
- isItemFocused
38
- } = props;
39
- const ItemComponent = renderers.item;
40
- 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;
41
- // const isDragging = record.id === draggedRecord?.id;
42
-
43
- return /*#__PURE__*/_jsx__default["default"](reactBeautifulDnd.Draggable, {
44
- isDragDisabled: isDragDisabled,
45
- draggableId: String(record.id),
46
- index: index
47
- }, "".concat(record.id, "-draggable"), (provided, snapshot) => {
48
- const _getDraggableProps = utils.getDraggableProps(props, provided, snapshot),
49
- {
50
- key
51
- } = _getDraggableProps,
52
- draggableProps = _objectWithoutProperties__default["default"](_getDraggableProps, _excluded);
53
-
54
- return /*#__PURE__*/jsxRuntime.jsx(ItemComponent, _objectSpread(_objectSpread({}, draggableProps), {}, {
55
- // isDragging={isDragging}
56
- leftAddons: [/*#__PURE__*/jsxRuntime.jsx(dsIcons.GripperVertical, _objectSpread(_objectSpread({
57
- "data-testid": "drag-handle"
58
- }, provided.dragHandleProps), {}, {
59
- className: "drag-handle",
60
- tabIndex: isItemFocused ? 0 : -1
61
- }), "".concat(record.id, "-drag-handle")), ...(props.leftAddons || [])],
62
- children: props.children
63
- }), key);
64
- });
65
- };
66
-
67
- module.exports = DraggableItem;
@@ -1,181 +0,0 @@
1
- 'use strict';
2
-
3
- var _jsx = require('@babel/runtime/helpers/jsx');
4
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
5
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
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');
12
- var React = require('react');
13
- var reactBeautifulDnd = require('react-beautiful-dnd');
14
- var dsUtilities = require('@elliemae/ds-utilities');
15
- var dsIcons = require('@elliemae/ds-icons');
16
- var FocusGroupContext = require('@elliemae/ds-shared/FocusGroup/FocusGroupContext');
17
- var utils = require('../../tree/utils.js');
18
- var utils$1 = require('../utils.js');
19
- var jsxRuntime = require('react/jsx-runtime');
20
-
21
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
22
-
23
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
24
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
25
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
26
- var FocusGroupContext__default = /*#__PURE__*/_interopDefaultLegacy(FocusGroupContext);
27
-
28
- const _excluded = ["records"];
29
-
30
- 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; }
31
-
32
- 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__default["default"](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; }
33
-
34
- const DroppableList = (renderers, instance) => _ref => {
35
- let {
36
- records
37
- } = _ref,
38
- rest = _objectWithoutProperties__default["default"](_ref, _excluded);
39
-
40
- const {
41
- props: {
42
- expandTimerDelay = 1000,
43
- restrictDragAndDrop
44
- },
45
- actions: {
46
- setDraggedRecord,
47
- changeRecordsPosition,
48
- toggleExpand
49
- },
50
- state: {
51
- draggedRecord
52
- },
53
- itemRenderer
54
- } = instance.getInstance();
55
- const focusContext = React.useContext(FocusGroupContext__default["default"]);
56
- const [focusedItemWasDragged, setFocusedItemWasDragged] = React.useState(false);
57
- const preDragFocusedNode = React.useRef();
58
- const expandTimerRef = React.useRef();
59
- const draggedRecordShouldExpand = React.useRef(false);
60
- const currTargetRef = React.useRef({});
61
- const onDragUpdate = React.useCallback(data => {
62
- const {
63
- destination,
64
- combine
65
- } = data;
66
- clearTimeout(expandTimerRef.current);
67
-
68
- if (combine) {
69
- const {
70
- draggableId
71
- } = combine;
72
- const targetRecord = utils.findItemById(records, draggableId);
73
-
74
- if (targetRecord && targetRecord.isGroup && !targetRecord.expanded) {
75
- expandTimerRef.current = setTimeout(() => toggleExpand(targetRecord), expandTimerDelay);
76
- }
77
- }
78
-
79
- currTargetRef.current = destination || currTargetRef.current;
80
- }, [records]);
81
- const onDragStart = React.useCallback(_ref2 => {
82
- let {
83
- source
84
- } = _ref2;
85
- preDragFocusedNode.current = document.activeElement; // when we move the currently focused item, preDragFocusedNode is the body of the doc
86
-
87
- setFocusedItemWasDragged(preDragFocusedNode.current.tagName === 'BODY');
88
- const draggingRecord = records[source.index];
89
-
90
- if (draggingRecord.expanded) {
91
- draggedRecordShouldExpand.current = true;
92
- toggleExpand(draggingRecord);
93
- }
94
-
95
- setDraggedRecord(draggingRecord);
96
- }, [records]);
97
- const onDragEnd = React.useCallback( // eslint-disable-next-line complexity
98
- // eslint-disable-next-line max-statements
99
- _ref3 => {
100
- var _sourceRecord$parentN, _targetRecord$parentN;
101
-
102
- let {
103
- destination,
104
- source,
105
- combine
106
- } = _ref3;
107
- clearTimeout(expandTimerRef.current);
108
- const sourceIndex = source.index;
109
- const destinationIndex = destination && destination.index;
110
- if (sourceIndex === destinationIndex) return;
111
- const sourceRecord = records[sourceIndex];
112
- const targetRecord = destination && records[destinationIndex];
113
- const combineWith = combine && utils.findItemById(records, combine.draggableId);
114
- const down = sourceIndex < destinationIndex;
115
- if (restrictDragAndDrop && (sourceRecord === null || sourceRecord === void 0 ? void 0 : (_sourceRecord$parentN = sourceRecord.parentNode) === null || _sourceRecord$parentN === void 0 ? void 0 : _sourceRecord$parentN.id) !== (targetRecord === null || targetRecord === void 0 ? void 0 : (_targetRecord$parentN = targetRecord.parentNode) === null || _targetRecord$parentN === void 0 ? void 0 : _targetRecord$parentN.id)) return; // TODO check if we can change the records Immutable, this makes the DOM inconsistent on first renderers
116
-
117
- changeRecordsPosition({
118
- sourceRecord,
119
- targetRecord,
120
- combineWith,
121
- down
122
- });
123
-
124
- if (draggedRecordShouldExpand.current) {
125
- draggedRecordShouldExpand.current = false;
126
- toggleExpand(sourceRecord);
127
- }
128
-
129
- if (focusContext) {
130
- // TODO if we fix the mutable/immutable records handling this work-around should not be required anymore
131
- setTimeout(() => {
132
- const postDragFocusedNode = focusedItemWasDragged ? utils.findItemOnDocument(sourceRecord.id) : utils.findItemOnDocument(preDragFocusedNode.current.dataset.id);
133
- focusContext.focusItemByNode(postDragFocusedNode);
134
- }, 0);
135
- }
136
-
137
- currTargetRef.current = null;
138
- setDraggedRecord(null);
139
- }, [records, focusedItemWasDragged]);
140
- const {
141
- item: ItemComponent,
142
- list: ListComponent
143
- } = renderers;
144
- const renderClone = React.useCallback((provided, snapshot, rubric) => {
145
- const targetRecord = currTargetRef.current && records[currTargetRef.current.index] || {};
146
- const record = records[rubric.source.index];
147
- return /*#__PURE__*/React.createElement(ItemComponent, _objectSpread(_objectSpread({}, provided.draggableProps), {}, {
148
- key: rubric.source.index,
149
- record: record
150
- }, utils$1.getDraggableProps({
151
- className: 'item-cloned'
152
- }, provided, snapshot)), /*#__PURE__*/jsxRuntime.jsx(dsIcons.GripperVertical, _objectSpread(_objectSpread({}, provided.dragHandleProps), {}, {
153
- className: "drag-handle"
154
- })), itemRenderer({
155
- record,
156
- nestingLevel: targetRecord.nestingLevel
157
- }));
158
- }, [currTargetRef, records, itemRenderer]);
159
- return /*#__PURE__*/_jsx__default["default"](reactBeautifulDnd.DragDropContext, {
160
- onDragEnd: onDragEnd,
161
- onDragStart: onDragStart,
162
- onDragUpdate: onDragUpdate
163
- }, void 0, /*#__PURE__*/_jsx__default["default"](reactBeautifulDnd.Droppable, {
164
- droppableId: "droppableId",
165
- isCombineEnabled: true,
166
- mode: "virtual",
167
- renderClone: renderClone
168
- }, void 0, (droppableProvided, snapshot) => {
169
- // Add an extra item to our list to make space for a dragging item
170
- // work in a virtual list
171
- const itemCount = snapshot.isUsingPlaceholder ? records.length + 1 : records.length;
172
- return /*#__PURE__*/jsxRuntime.jsx(ListComponent, _objectSpread(_objectSpread({}, rest), {}, {
173
- className: dsUtilities.cx(rest.className, draggedRecord && 'dragging'),
174
- innerRef: dsUtilities.mergeRefs(droppableProvided.innerRef, rest.innerRef, rest.ref),
175
- itemCount: itemCount,
176
- records: records
177
- }));
178
- }));
179
- };
180
-
181
- module.exports = DroppableList;
@@ -1,157 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
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');
12
- var dsUtilities = require('@elliemae/ds-utilities');
13
-
14
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
-
16
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
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__default["default"](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
- function getStyle(provided, style) {
22
- if (!style) {
23
- return provided.draggableProps.style;
24
- }
25
-
26
- return _objectSpread(_objectSpread({}, provided.draggableProps.style), style);
27
- }
28
- function getDraggableProps(props, provided, snapshot) {
29
- const isGroupedOver = Boolean(snapshot.combineTargetFor);
30
- return _objectSpread(_objectSpread(_objectSpread({}, props), provided.draggableProps), {}, {
31
- className: dsUtilities.cx(props.className, isGroupedOver && 'can-group-over'),
32
- // provided,
33
- innerRef: dsUtilities.mergeRefs(provided.innerRef, props.innerRef, props.ref),
34
- 'data-index': props.index,
35
- style: getStyle(provided, _objectSpread(_objectSpread({}, props.style), {}, {
36
- display: 'flex'
37
- }))
38
- });
39
- }
40
- const setTreeArrayInPath = (treeData, path, data) => {
41
- const nextTreeData = [...treeData];
42
-
43
- if (path.length) {
44
- dsUtilities.set(nextTreeData, path, data);
45
- return nextTreeData;
46
- }
47
-
48
- return data;
49
- }; // check if at the earliest possible different nest level the source is before the target or not
50
-
51
- const isSourceBeforeTarget = (sourcePath, targetPath) => {
52
- let sourceIsBeforeTarget = false;
53
-
54
- if (sourcePath.length <= targetPath.length) {
55
- // we increase by 2 beacuse every other position is 'children'
56
- for (let i = 0; i < sourcePath.length; i += 2) {
57
- const source = sourcePath[i];
58
- const target = targetPath[i]; // since we skip by 2 source/target can be out of bounds
59
- // if source/target are the same we are at same nest level
60
-
61
- if (!Number.isInteger(source) || // check to see if it's a number because 0 == false in javascript
62
- !Number.isInteger(target) || source === target) continue; // the nest level differs, as such we check if source if before or after
63
-
64
- sourceIsBeforeTarget = source < target;
65
- break;
66
- }
67
- }
68
-
69
- return sourceIsBeforeTarget;
70
- };
71
- const updateTargetPath = function (sourcePath, targetPath) {
72
- let incr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
73
- const nextTargetPath = [...targetPath];
74
- const posToUpdate = sourcePath.length ? sourcePath.length - 1 : 0;
75
- nextTargetPath.splice(posToUpdate, 1, targetPath[posToUpdate] + incr);
76
- return nextTargetPath;
77
- };
78
- const getParentPath = path => path.slice(0, -1);
79
- const getParentChildrenByPath = (treeData, path) => path && path.length ? dsUtilities.get(treeData, path) : treeData;
80
- const getTreePosition = recordPath => ({
81
- parentPath: getParentPath(recordPath),
82
- index: recordPath.slice(-1)[0]
83
- });
84
- const changePositionBetweenDifferentArrays = _ref => {
85
- let {
86
- sourceTreePosition,
87
- // already extracted sourceRecord.path
88
- targetTreePosition,
89
- // already extracted targetRecord.path
90
- // combineWith the element we want to append to the children of (this is null when the drag doesn't result in adding children)
91
- combineWith,
92
- sourceRecord,
93
- // what we are dragging
94
- targetRecord,
95
- // what we are dropping on top of
96
- down,
97
- // ???
98
- data,
99
- // tree before dragEnd changes
100
- childrenKey = 'children' // constant -> 'children'
101
-
102
- } = _ref;
103
- let nextTreeData = dsUtilities.cloneDeep(data);
104
- if (!sourceRecord || !sourceRecord.data) throw new Error('error while dragging, no dragged item received');
105
- const sourceTreeChildren = getParentChildrenByPath(nextTreeData, sourceTreePosition.parentPath); // When moving an item we remove the item from it's former parent children array
106
-
107
- sourceTreeChildren.splice(sourceTreePosition.index, 1);
108
- nextTreeData = setTreeArrayInPath(nextTreeData, sourceTreePosition.parentPath, sourceTreeChildren); // if source is at previous position than the target children
109
- // then the index should decrease
110
-
111
- const shouldUpdateTarget = isSourceBeforeTarget(sourceRecord.path, targetRecord.path);
112
- const nextTargetPosition = shouldUpdateTarget ? combineWith ? {
113
- parentPath: updateTargetPath(sourceRecord.path, combineWith.path)
114
- } : getTreePosition(updateTargetPath(sourceRecord.path, targetRecord.path)) : targetTreePosition; // add to target
115
-
116
- const {
117
- parentPath
118
- } = nextTargetPosition;
119
- const targetTreeChildren = getParentChildrenByPath(nextTreeData, parentPath) || (combineWith === null || combineWith === void 0 ? void 0 : combineWith.data) || (targetRecord === null || targetRecord === void 0 ? void 0 : targetRecord.data);
120
-
121
- if (combineWith && targetTreeChildren) {
122
- const targetChildrensArray = targetTreeChildren[childrenKey];
123
- targetChildrensArray.push(sourceRecord.data);
124
- } else if (targetTreeChildren) {
125
- targetTreeChildren.splice(targetTreePosition.index + (down ? 1 : 0), 0, sourceRecord.data);
126
- }
127
-
128
- nextTreeData = setTreeArrayInPath(nextTreeData, parentPath, targetTreeChildren);
129
- return nextTreeData;
130
- };
131
- const combineWithTarget = () => {};
132
- const changePositionSameArray = _ref2 => {
133
- let {
134
- targetTreePosition,
135
- sourceRecord,
136
- targetRecord,
137
- data
138
- } = _ref2;
139
- let nextTreeData = dsUtilities.cloneDeep(data);
140
- const targetTreeChildren = getParentChildrenByPath(nextTreeData, targetTreePosition.parentPath);
141
- const nextChildren = dsUtilities.arrayMove(targetTreeChildren, sourceRecord.index, targetRecord.index); // mutates the tree. That's the reason of the clone above
142
-
143
- nextTreeData = setTreeArrayInPath(nextTreeData, targetTreePosition.parentPath, nextChildren);
144
- return nextTreeData;
145
- };
146
-
147
- exports.changePositionBetweenDifferentArrays = changePositionBetweenDifferentArrays;
148
- exports.changePositionSameArray = changePositionSameArray;
149
- exports.combineWithTarget = combineWithTarget;
150
- exports.getDraggableProps = getDraggableProps;
151
- exports.getParentChildrenByPath = getParentChildrenByPath;
152
- exports.getParentPath = getParentPath;
153
- exports.getStyle = getStyle;
154
- exports.getTreePosition = getTreePosition;
155
- exports.isSourceBeforeTarget = isSourceBeforeTarget;
156
- exports.setTreeArrayInPath = setTreeArrayInPath;
157
- exports.updateTargetPath = updateTargetPath;