@elliemae/ds-shuttle 2.0.0-next.8 → 2.0.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/DSShuttle.js +83 -80
- package/cjs/Shuttle.actions.js +27 -18
- package/cjs/ShuttleContainer.js +15 -8
- package/cjs/ShuttleImpl.js +22 -10
- package/cjs/ShuttleRenderer.js +9 -2
- package/cjs/ShuttleState.js +6 -2
- package/cjs/classedComponents.js +27 -18
- package/cjs/components/LoadingIndicator.js +2 -2
- package/cjs/components/OverflowList.js +23 -12
- package/cjs/components/ShuttleBreadcrumb.js +21 -15
- package/cjs/components/ShuttleInfiniteScrollIndicator.js +22 -16
- package/cjs/components/ShuttleListItem/ActionButtons.js +10 -10
- package/cjs/components/ShuttleListItem/ShuttleListItem.js +22 -15
- package/cjs/components/ShuttleListItem/ShuttleSourceListItem.js +5 -0
- package/cjs/components/ShuttleListItem/ShuttleTargetListItem.js +5 -0
- package/cjs/components/ShuttleListPanel.js +7 -6
- package/cjs/components/ShuttleSearchBox.js +16 -13
- package/cjs/components/ShuttleSource.js +49 -43
- package/cjs/components/ShuttleTarget.js +29 -22
- package/cjs/components/VirtualizedItem.js +12 -6
- package/cjs/components/VirtualizedList.js +47 -35
- package/cjs/components/VirtualizedSortableList.js +5 -0
- package/cjs/helper.js +36 -14
- package/cjs/updateShuttleStateFromProps.js +15 -6
- package/cjs/utils.js +7 -2
- package/cjs/withProviders.js +5 -0
- package/esm/DSShuttle.js +83 -80
- package/esm/Shuttle.actions.js +21 -12
- package/esm/ShuttleContainer.js +12 -5
- package/esm/ShuttleImpl.js +17 -5
- package/esm/ShuttleRenderer.js +9 -2
- package/esm/ShuttleState.js +6 -2
- package/esm/classedComponents.js +27 -18
- package/esm/components/LoadingIndicator.js +1 -1
- package/esm/components/OverflowList.js +23 -12
- package/esm/components/ShuttleBreadcrumb.js +21 -15
- package/esm/components/ShuttleInfiniteScrollIndicator.js +22 -16
- package/esm/components/ShuttleListItem/ActionButtons.js +7 -4
- package/esm/components/ShuttleListItem/ShuttleListItem.js +21 -13
- package/esm/components/ShuttleListItem/ShuttleSourceListItem.js +5 -0
- package/esm/components/ShuttleListItem/ShuttleTargetListItem.js +5 -0
- package/esm/components/ShuttleListPanel.js +7 -6
- package/esm/components/ShuttleSearchBox.js +14 -10
- package/esm/components/ShuttleSource.js +44 -36
- package/esm/components/ShuttleTarget.js +29 -22
- package/esm/components/VirtualizedItem.js +12 -6
- package/esm/components/VirtualizedList.js +47 -35
- package/esm/components/VirtualizedSortableList.js +5 -0
- package/esm/helper.js +33 -11
- package/esm/updateShuttleStateFromProps.js +10 -1
- package/esm/utils.js +6 -1
- package/esm/withProviders.js +5 -0
- package/package.json +10 -7
- package/types/components/ShuttleBreadcrumb.d.ts +1 -1
package/cjs/DSShuttle.js
CHANGED
|
@@ -7,7 +7,7 @@ require('core-js/modules/web.dom-collections.iterator.js');
|
|
|
7
7
|
require('react');
|
|
8
8
|
var lodash = require('lodash');
|
|
9
9
|
var reactDesc = require('react-desc');
|
|
10
|
-
var
|
|
10
|
+
var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
|
|
11
11
|
var ShuttleImpl = require('./ShuttleImpl.js');
|
|
12
12
|
var utils = require('./utils.js');
|
|
13
13
|
|
|
@@ -17,85 +17,88 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
|
17
17
|
|
|
18
18
|
const noop = () => {};
|
|
19
19
|
|
|
20
|
-
const DSShuttle =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
20
|
+
const DSShuttle = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
containerProps = {},
|
|
23
|
+
idField = 'id',
|
|
24
|
+
parentIdField = 'parent',
|
|
25
|
+
showIcons = true,
|
|
26
|
+
items = [],
|
|
27
|
+
selectedItems = undefined,
|
|
28
|
+
// if defined it becomes controlled (v1)
|
|
29
|
+
// TODO make `nonSelectedItems` the default controlled behavior (v2)
|
|
30
|
+
nonSelectedItems = undefined,
|
|
31
|
+
onSearch = noop,
|
|
32
|
+
onSearchOpen = noop,
|
|
33
|
+
onSearchClose = noop,
|
|
34
|
+
onDrillDown = noop,
|
|
35
|
+
onDrillDownTarget = noop,
|
|
36
|
+
onTargetSortEnd = noop,
|
|
37
|
+
setGetStatus = noop,
|
|
38
|
+
targetSortable = true,
|
|
39
|
+
sourceEmptyMessage = 'No Items Found',
|
|
40
|
+
sourceRootTitle = 'Category',
|
|
41
|
+
targetEmptyMessage = 'No Items Selected',
|
|
42
|
+
targetRootTitle = 'Selected Items',
|
|
43
|
+
composeSourceItemProps = () => ({}),
|
|
44
|
+
composeTargetItemProps = () => ({}),
|
|
45
|
+
onAddToTarget = noop,
|
|
46
|
+
onAddCheckedItems = noop,
|
|
47
|
+
onRemoveFromTarget = noop,
|
|
48
|
+
onRemoveAllFromTarget = noop,
|
|
49
|
+
onChange = noop,
|
|
50
|
+
renderSourceCounter = noop,
|
|
51
|
+
renderTargetCounter = noop,
|
|
52
|
+
sourceClearItemsText = 'CLEAR ALL',
|
|
53
|
+
targetClearItemsText = 'CLEAR ALL',
|
|
54
|
+
searchPlaceholder = 'Search field ID, name, etc.',
|
|
55
|
+
loadingSource = false,
|
|
56
|
+
loadingTarget = false,
|
|
57
|
+
onGetMoreItems = () => null,
|
|
58
|
+
hasNextPage = false,
|
|
59
|
+
moreItemsLoading
|
|
60
|
+
} = _ref;
|
|
61
|
+
return /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx__default["default"](ShuttleImpl, {
|
|
62
|
+
composeSourceItemProps: composeSourceItemProps,
|
|
63
|
+
composeTargetItemProps: composeTargetItemProps,
|
|
64
|
+
containerProps: containerProps,
|
|
65
|
+
idField: idField,
|
|
66
|
+
items: items,
|
|
67
|
+
onAddCheckedItems: onAddCheckedItems,
|
|
68
|
+
onAddToTarget: onAddToTarget,
|
|
69
|
+
onChange: onChange,
|
|
70
|
+
onDrillDown: onDrillDown,
|
|
71
|
+
nonSelectedItems: nonSelectedItems,
|
|
72
|
+
onDrillDownTarget: onDrillDownTarget,
|
|
73
|
+
onRemoveAllFromTarget: onRemoveAllFromTarget,
|
|
74
|
+
onRemoveFromTarget: onRemoveFromTarget,
|
|
75
|
+
onSearch: onSearch,
|
|
76
|
+
onSearchClose: onSearchClose,
|
|
77
|
+
onSearchOpen: onSearchOpen,
|
|
78
|
+
onTargetSortEnd: onTargetSortEnd,
|
|
79
|
+
parentIdField: parentIdField,
|
|
80
|
+
renderSourceCounter: renderSourceCounter,
|
|
81
|
+
renderTargetCounter: renderTargetCounter,
|
|
82
|
+
searchPlaceholder: searchPlaceholder,
|
|
83
|
+
selectedItems: selectedItems,
|
|
84
|
+
setGetStatus: setGetStatus,
|
|
85
|
+
showIcons: showIcons,
|
|
86
|
+
sourceClearItemsText: sourceClearItemsText,
|
|
87
|
+
sourceEmptyMessage: sourceEmptyMessage,
|
|
88
|
+
sourceRootTitle: sourceRootTitle,
|
|
89
|
+
targetClearItemsText: targetClearItemsText,
|
|
90
|
+
targetEmptyMessage: targetEmptyMessage,
|
|
91
|
+
targetRootTitle: targetRootTitle,
|
|
92
|
+
targetSortable: targetSortable,
|
|
93
|
+
loadingSource: loadingSource,
|
|
94
|
+
loadingTarget: loadingTarget,
|
|
95
|
+
onGetMoreItems: lodash.debounce(function () {
|
|
96
|
+
onGetMoreItems(...arguments);
|
|
97
|
+
}, 500),
|
|
98
|
+
moreItemsLoading: moreItemsLoading,
|
|
99
|
+
hasNextPage: hasNextPage
|
|
100
|
+
}));
|
|
101
|
+
};
|
|
99
102
|
|
|
100
103
|
const props = {
|
|
101
104
|
/** inject props to shuttle wrapper */
|
package/cjs/Shuttle.actions.js
CHANGED
|
@@ -4,9 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
6
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
-
|
|
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');
|
|
8
13
|
var helper = require('./helper.js');
|
|
9
|
-
var utils
|
|
14
|
+
var utils = require('./utils.js');
|
|
10
15
|
|
|
11
16
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
17
|
|
|
@@ -17,7 +22,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
17
22
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
18
23
|
function toggleItemSelection(itemId) {
|
|
19
24
|
return state => _objectSpread(_objectSpread({}, state), {}, {
|
|
20
|
-
checkedItems:
|
|
25
|
+
checkedItems: dsUtilities.addOrRemove(state.checkedItems, itemId)
|
|
21
26
|
});
|
|
22
27
|
}
|
|
23
28
|
function navigateTo(item, dest) {
|
|
@@ -44,11 +49,13 @@ const defaultOptions = {
|
|
|
44
49
|
op: hasMoved => !hasMoved
|
|
45
50
|
}; // todo: optimize this
|
|
46
51
|
|
|
47
|
-
function getItemDeep({
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
+
function getItemDeep(_ref) {
|
|
53
|
+
let {
|
|
54
|
+
collection,
|
|
55
|
+
id,
|
|
56
|
+
options
|
|
57
|
+
} = _ref;
|
|
58
|
+
|
|
52
59
|
const {
|
|
53
60
|
idField
|
|
54
61
|
} = _objectSpread(_objectSpread({}, defaultOptions), options);
|
|
@@ -56,7 +63,7 @@ function getItemDeep({
|
|
|
56
63
|
const itemIndex = collection.findIndex(fItem => fItem[idField] === id); // get item with nested children
|
|
57
64
|
|
|
58
65
|
const item = collection[itemIndex];
|
|
59
|
-
const children = item !== null && item !== void 0 && item.hasChildren ?
|
|
66
|
+
const children = item !== null && item !== void 0 && item.hasChildren ? dsUtilities.compose(utils.getChildren({
|
|
60
67
|
index: itemIndex
|
|
61
68
|
}))(collection) || [] : [];
|
|
62
69
|
return {
|
|
@@ -66,9 +73,10 @@ function getItemDeep({
|
|
|
66
73
|
}
|
|
67
74
|
|
|
68
75
|
function addToTarget(itemToAdd, collection) {
|
|
69
|
-
return (state, {
|
|
70
|
-
|
|
71
|
-
|
|
76
|
+
return (state, _ref2) => {
|
|
77
|
+
let {
|
|
78
|
+
idField
|
|
79
|
+
} = _ref2;
|
|
72
80
|
const items = collection || state.preparedItems;
|
|
73
81
|
const {
|
|
74
82
|
item,
|
|
@@ -85,19 +93,20 @@ function addToTarget(itemToAdd, collection) {
|
|
|
85
93
|
} // todo: optimize this
|
|
86
94
|
|
|
87
95
|
function removeFromTarget(itemToRemove) {
|
|
88
|
-
return (state, {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
96
|
+
return (state, _ref3) => {
|
|
97
|
+
let {
|
|
98
|
+
idField
|
|
99
|
+
} = _ref3;
|
|
100
|
+
let targetItems = dsUtilities.cloneDeep(state.targetItems);
|
|
92
101
|
const itemIndex = targetItems.findIndex(fItem => fItem.id === itemToRemove.id);
|
|
93
102
|
const item = targetItems[itemIndex];
|
|
94
|
-
const children = item !== null && item !== void 0 && item.hasChildren ?
|
|
103
|
+
const children = item !== null && item !== void 0 && item.hasChildren ? dsUtilities.compose(helper.filterMovedItems(state.movedItems), utils.getChildren({
|
|
95
104
|
index: itemIndex
|
|
96
105
|
}))(targetItems) || [] : [];
|
|
97
106
|
targetItems.splice(itemIndex, 1);
|
|
98
107
|
|
|
99
108
|
if (item !== null && item !== void 0 && item.hasChildren && children.length) {
|
|
100
|
-
const childrenHash =
|
|
109
|
+
const childrenHash = dsUtilities.hashArray(children, 'id');
|
|
101
110
|
targetItems = targetItems.filter(i => !childrenHash[i.id]);
|
|
102
111
|
}
|
|
103
112
|
|
package/cjs/ShuttleContainer.js
CHANGED
|
@@ -2,8 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
4
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
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 react = require('react');
|
|
6
|
-
var
|
|
11
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
7
12
|
var withProviders = require('./withProviders.js');
|
|
8
13
|
var helper = require('./helper.js');
|
|
9
14
|
var SearchState = require('./SearchState.js');
|
|
@@ -24,10 +29,12 @@ function filterItemsByTerm(items, term) {
|
|
|
24
29
|
return items.filter(item => item.name.toLowerCase().indexOf(String(term).toLowerCase()) !== -1 || String(item.id).indexOf(String(term).toLowerCase()) !== -1);
|
|
25
30
|
}
|
|
26
31
|
|
|
27
|
-
function ShuttleContainer({
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
32
|
+
function ShuttleContainer(_ref) {
|
|
33
|
+
let {
|
|
34
|
+
items = [],
|
|
35
|
+
children
|
|
36
|
+
} = _ref;
|
|
37
|
+
|
|
31
38
|
const _useContext = react.useContext(ShuttleState.Context),
|
|
32
39
|
{
|
|
33
40
|
state: shuttleState
|
|
@@ -53,12 +60,12 @@ function ShuttleContainer({
|
|
|
53
60
|
navigate
|
|
54
61
|
} = _objectSpread(_objectSpread(_objectSpread({}, shuttleState), searchState), handlers);
|
|
55
62
|
|
|
56
|
-
const sourceItems = react.useMemo(() =>
|
|
63
|
+
const sourceItems = react.useMemo(() => dsUtilities.compose(items => items.filter(item => !movedItems[item.id]), items => searchTerm && searching ? filterItemsByTerm(items, searchTerm) : items, items => helper.filterItemsByHierarchy(items, helper.getActiveIdFromHierarchy(hierarchy).id), items => helper.prepareItems(items))(items), [items, searchTerm, searching, hierarchy, movedItems]);
|
|
57
64
|
const targetItems = react.useMemo(() => {
|
|
58
65
|
const hierarchyId = helper.getActiveIdFromHierarchy(hierarchyDest).id;
|
|
59
|
-
return
|
|
66
|
+
return dsUtilities.compose(items => dsUtilities.sortBy(items, ['name']), items => hierarchyId ? helper.filterItemsByHierarchy(items, hierarchyId).filter(item => !movedItems[item.id]) : dsUtilities.uniqBy(dsUtilities.values(movedItems), 'id'))(items);
|
|
60
67
|
}, [items, searching, hierarchyDest, movedItems]);
|
|
61
|
-
return
|
|
68
|
+
return dsUtilities.isFunction(children) && children({
|
|
62
69
|
checkedItems,
|
|
63
70
|
hierarchy,
|
|
64
71
|
hierarchyDest,
|
package/cjs/ShuttleImpl.js
CHANGED
|
@@ -2,9 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
4
4
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
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.some.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.some.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
5
12
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
13
|
+
require('core-js/modules/esnext.async-iterator.find.js');
|
|
14
|
+
require('core-js/modules/esnext.iterator.find.js');
|
|
15
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
16
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
6
17
|
var react = require('react');
|
|
7
|
-
var
|
|
18
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
8
19
|
var withProviders = require('./withProviders.js');
|
|
9
20
|
var Shuttle_actions = require('./Shuttle.actions.js');
|
|
10
21
|
var helper = require('./helper.js');
|
|
@@ -174,10 +185,11 @@ class ShuttleImpl extends react.Component {
|
|
|
174
185
|
onAddCheckedItems(items);
|
|
175
186
|
}
|
|
176
187
|
|
|
177
|
-
handleTargetSortEnd({
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
188
|
+
handleTargetSortEnd(_ref) {
|
|
189
|
+
let {
|
|
190
|
+
sourceItem,
|
|
191
|
+
targetItem
|
|
192
|
+
} = _ref;
|
|
181
193
|
const {
|
|
182
194
|
idField,
|
|
183
195
|
onTargetSortEnd
|
|
@@ -191,8 +203,8 @@ class ShuttleImpl extends react.Component {
|
|
|
191
203
|
const collection = !hierarchyId ? movedItems : targetItems;
|
|
192
204
|
const oldIndex = collection.findIndex(tItem => tItem[idField] === sourceItem[idField]);
|
|
193
205
|
const newIndex = collection.findIndex(tItem => tItem[idField] === targetItem[idField]);
|
|
194
|
-
const sortedMovedItems = !hierarchyId ?
|
|
195
|
-
const sortedItems = hierarchyId ?
|
|
206
|
+
const sortedMovedItems = !hierarchyId ? dsUtilities.arrayMove(movedItems, oldIndex, newIndex) : movedItems;
|
|
207
|
+
const sortedItems = hierarchyId ? dsUtilities.arrayMove(targetItems, oldIndex, newIndex) : targetItems;
|
|
196
208
|
this.setState({
|
|
197
209
|
targetItems: sortedItems,
|
|
198
210
|
movedItems: sortedMovedItems
|
|
@@ -244,7 +256,7 @@ class ShuttleImpl extends react.Component {
|
|
|
244
256
|
if (nonSelectedItems) {
|
|
245
257
|
composedSourceItems = handleControlledSourceItms();
|
|
246
258
|
} else {
|
|
247
|
-
composedSourceItems =
|
|
259
|
+
composedSourceItems = dsUtilities.compose(helper.filterBySearch(searchTerm, searching), helper.filterMovedItems(movedItems), helper.getChildrenFromParent(helper.getActiveIdFromHierarchy(hierarchy).id))(items);
|
|
248
260
|
}
|
|
249
261
|
|
|
250
262
|
const handleControlledTargetItms = () => {
|
|
@@ -264,9 +276,9 @@ class ShuttleImpl extends react.Component {
|
|
|
264
276
|
if (nonSelectedItems) {
|
|
265
277
|
composedTargetItems = handleControlledTargetItms();
|
|
266
278
|
} else {
|
|
267
|
-
composedTargetItems =
|
|
279
|
+
composedTargetItems = dsUtilities.compose(tItems => {
|
|
268
280
|
const hierarchyId = helper.getActiveIdFromHierarchy(hierarchyDest).id;
|
|
269
|
-
return hierarchyId ?
|
|
281
|
+
return hierarchyId ? dsUtilities.compose(helper.filterMovedItems(movedItems), helper.getChildrenFromParent(hierarchyId))(tItems) : movedItems;
|
|
270
282
|
})(targetItems);
|
|
271
283
|
}
|
|
272
284
|
|
package/cjs/ShuttleRenderer.js
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
9
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
5
10
|
var react = require('react');
|
|
@@ -86,7 +91,8 @@ function ShuttleRenderer(_ref) {
|
|
|
86
91
|
onMoveItemToTarget(item);
|
|
87
92
|
removeAnimationState();
|
|
88
93
|
},
|
|
89
|
-
onNavigateTo: (item
|
|
94
|
+
onNavigateTo: function (item) {
|
|
95
|
+
let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'down';
|
|
90
96
|
const indexInHierarchy = hierarchy.findIndex(hItem => hItem.id === item.id);
|
|
91
97
|
setIsDrillingDown(indexInHierarchy === -1);
|
|
92
98
|
onNavigateOnSourceTo(item, direction);
|
|
@@ -117,7 +123,8 @@ function ShuttleRenderer(_ref) {
|
|
|
117
123
|
removeAnimationState();
|
|
118
124
|
onMoveItemToSource(item);
|
|
119
125
|
},
|
|
120
|
-
onNavigateTo: (item
|
|
126
|
+
onNavigateTo: function (item) {
|
|
127
|
+
let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'down';
|
|
121
128
|
const indexInHierarchy = hierarchyDest.findIndex(hItem => hItem.id === item.id);
|
|
122
129
|
setIsDrillingDown(indexInHierarchy === -1);
|
|
123
130
|
onNavigateOnTargetTo(item, direction);
|
package/cjs/ShuttleState.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
4
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
4
6
|
var react = require('react');
|
|
5
7
|
var createContainer = require('constate');
|
|
6
8
|
var helper = require('./helper.js');
|
|
@@ -26,7 +28,9 @@ function useShuttleState() {
|
|
|
26
28
|
|
|
27
29
|
const setState = state => setShuttleState(state(shuttleState));
|
|
28
30
|
|
|
29
|
-
function setMovedItems(
|
|
31
|
+
function setMovedItems() {
|
|
32
|
+
let itemsIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
33
|
+
let items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
30
34
|
const itemsToMove = helper.getItemsById(itemsIds, items);
|
|
31
35
|
const pipeActions = itemsToMove.map(item => Shuttle_actions.moveItem(item));
|
|
32
36
|
setState(helper.pipe([Shuttle_actions.resetMovedItems(), ...pipeActions]));
|
|
@@ -54,7 +58,7 @@ function useShuttleState() {
|
|
|
54
58
|
setState(Shuttle_actions.toggleItemSelection(item.id));
|
|
55
59
|
}
|
|
56
60
|
|
|
57
|
-
function moveCheckedItems(items
|
|
61
|
+
function moveCheckedItems(items) {
|
|
58
62
|
const pipeActions = items.map(item => moveItem(item));
|
|
59
63
|
setState(helper.pipe([...pipeActions, resetCheckedItems()]));
|
|
60
64
|
}
|
package/cjs/classedComponents.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var DSButton = require('@elliemae/ds-
|
|
5
|
+
var DSButton = require('@elliemae/ds-button');
|
|
6
6
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
7
7
|
var ShuttleBreadcrumb = require('./components/ShuttleBreadcrumb.js');
|
|
8
8
|
var OverflowList = require('./components/OverflowList.js');
|
|
@@ -23,23 +23,32 @@ const ShuttleHeader = dsClassnames.aggregatedClasses('div')(headerBlockName);
|
|
|
23
23
|
const ShuttleHeaderBreadcrumb = dsClassnames.aggregatedClasses(ShuttleBreadcrumb)(headerBlockName, 'breadcrumb');
|
|
24
24
|
const ShuttleHeaderSearchToggle = dsClassnames.aggregatedClasses(DSButton__default["default"])(headerBlockName, 'search-toggle'); // list
|
|
25
25
|
|
|
26
|
-
const ShuttleList = dsClassnames.aggregatedClasses('div')(listBlockName, null,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
})
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
26
|
+
const ShuttleList = dsClassnames.aggregatedClasses('div')(listBlockName, null, _ref => {
|
|
27
|
+
let {
|
|
28
|
+
showPulse
|
|
29
|
+
} = _ref;
|
|
30
|
+
return {
|
|
31
|
+
'show-pulse': showPulse
|
|
32
|
+
};
|
|
33
|
+
});
|
|
34
|
+
const ShuttleListPanel = dsClassnames.aggregatedClasses('div')(listBlockName, 'panel', _ref2 => {
|
|
35
|
+
let {
|
|
36
|
+
open
|
|
37
|
+
} = _ref2;
|
|
38
|
+
return {
|
|
39
|
+
open
|
|
40
|
+
};
|
|
41
|
+
});
|
|
42
|
+
const Overflow = dsClassnames.aggregatedClasses(OverflowList)(listBlockName, 'overflow', _ref3 => {
|
|
43
|
+
let {
|
|
44
|
+
empty,
|
|
45
|
+
searching
|
|
46
|
+
} = _ref3;
|
|
47
|
+
return {
|
|
48
|
+
empty,
|
|
49
|
+
searching
|
|
50
|
+
};
|
|
51
|
+
});
|
|
43
52
|
const EmptyMessage = dsClassnames.aggregatedClasses('span')(listBlockName, 'empty-message');
|
|
44
53
|
const LoadingList = dsClassnames.aggregatedClasses('div')(listBlockName, 'loading-list'); // footer
|
|
45
54
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
4
|
require('react');
|
|
5
|
-
var
|
|
5
|
+
var dsCircularProgressIndicator = require('@elliemae/ds-circular-progress-indicator');
|
|
6
6
|
var styled = require('styled-components');
|
|
7
7
|
|
|
8
8
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -17,7 +17,7 @@ const Wrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
|
17
17
|
|
|
18
18
|
const LoadingIndicator = () => _Wrapper || (_Wrapper = /*#__PURE__*/_jsx__default["default"](Wrapper, {
|
|
19
19
|
"data-testid": "shuttle__loading-indicator"
|
|
20
|
-
}, void 0, /*#__PURE__*/_jsx__default["default"](
|
|
20
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsCircularProgressIndicator.DSCircularProgressIndicator, {
|
|
21
21
|
size: "xl",
|
|
22
22
|
showLabel: true
|
|
23
23
|
})));
|
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
4
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.map.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');
|
|
5
12
|
var react = require('react');
|
|
6
13
|
var web = require('react-spring/web');
|
|
7
14
|
var animationConfig = require('../animation/animationConfig.js');
|
|
@@ -16,11 +23,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
16
23
|
|
|
17
24
|
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; }
|
|
18
25
|
|
|
19
|
-
function OverflowList({
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
26
|
+
function OverflowList(_ref) {
|
|
27
|
+
let {
|
|
28
|
+
className = '',
|
|
29
|
+
activeHierarchy = '',
|
|
30
|
+
children
|
|
31
|
+
} = _ref;
|
|
24
32
|
const {
|
|
25
33
|
state: {
|
|
26
34
|
isDrillingDown = false
|
|
@@ -30,13 +38,16 @@ function OverflowList({
|
|
|
30
38
|
const overflowTransition = web.useTransition(activeHierarchy, null, _objectSpread(_objectSpread({}, animationConfig.animationConfig.moveList(isDrillingDown)), {}, {
|
|
31
39
|
onDestroyed: () => setIsDrillingDown(false)
|
|
32
40
|
}));
|
|
33
|
-
return overflowTransition.map(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
41
|
+
return overflowTransition.map(_ref2 => {
|
|
42
|
+
let {
|
|
43
|
+
props,
|
|
44
|
+
key
|
|
45
|
+
} = _ref2;
|
|
46
|
+
return /*#__PURE__*/_jsx__default["default"](web.animated.div, {
|
|
47
|
+
className: className,
|
|
48
|
+
style: props
|
|
49
|
+
}, key, children);
|
|
50
|
+
});
|
|
40
51
|
}
|
|
41
52
|
|
|
42
53
|
module.exports = OverflowList;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
4
6
|
require('react');
|
|
5
7
|
var web = require('react-spring/web');
|
|
6
8
|
var DSBreadcrumb = require('@elliemae/ds-basic/Breadcrumb');
|
|
@@ -11,26 +13,30 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
13
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
12
14
|
var DSBreadcrumb__default = /*#__PURE__*/_interopDefaultLegacy(DSBreadcrumb);
|
|
13
15
|
|
|
14
|
-
function ShuttleBreadcrumb({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
function ShuttleBreadcrumb(_ref) {
|
|
17
|
+
let {
|
|
18
|
+
className = '',
|
|
19
|
+
hierarchy = [],
|
|
20
|
+
onNavigateTo = () => null
|
|
21
|
+
} = _ref;
|
|
19
22
|
const animatedCrumbs = web.useTransition(hierarchy, item => item.id, animationConfig.animationConfig.breadcrumb());
|
|
20
23
|
return /*#__PURE__*/_jsx__default["default"]("div", {
|
|
21
24
|
className: className
|
|
22
25
|
}, void 0, /*#__PURE__*/_jsx__default["default"](DSBreadcrumb__default["default"], {
|
|
23
26
|
isTitle: true
|
|
24
|
-
}, void 0, animatedCrumbs.map(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
}, void 0, animatedCrumbs.map(_ref2 => {
|
|
28
|
+
let {
|
|
29
|
+
item,
|
|
30
|
+
props,
|
|
31
|
+
key
|
|
32
|
+
} = _ref2;
|
|
33
|
+
return /*#__PURE__*/_jsx__default["default"](DSBreadcrumb__default["default"].Item, {
|
|
34
|
+
containerComponent: web.animated.li,
|
|
35
|
+
label: item.name,
|
|
36
|
+
onClick: () => onNavigateTo(item, 'up'),
|
|
37
|
+
style: props
|
|
38
|
+
}, key);
|
|
39
|
+
})));
|
|
34
40
|
}
|
|
35
41
|
|
|
36
42
|
module.exports = ShuttleBreadcrumb;
|