@elliemae/ds-shuttle 2.0.0-next.0 → 2.0.0-next.13
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/AnimationState.js +1 -0
- package/cjs/DSShuttle.js +84 -80
- package/cjs/SearchState.js +1 -0
- package/cjs/Shuttle.actions.js +28 -18
- package/cjs/ShuttleContainer.js +15 -8
- package/cjs/ShuttleImpl.js +23 -10
- package/cjs/ShuttleRenderer.js +9 -2
- package/cjs/ShuttleState.js +7 -2
- package/cjs/animation/animationConfig.js +10 -10
- package/cjs/classedComponents.js +31 -22
- 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 +6 -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 +16 -6
- package/cjs/utils.js +7 -2
- package/cjs/withProviders.js +5 -0
- package/esm/AnimationState.js +1 -0
- package/esm/DSShuttle.js +84 -80
- package/esm/SearchState.js +1 -0
- package/esm/Shuttle.actions.js +22 -12
- package/esm/ShuttleContainer.js +12 -5
- package/esm/ShuttleImpl.js +18 -5
- package/esm/ShuttleRenderer.js +9 -2
- package/esm/ShuttleState.js +7 -2
- package/esm/animation/animationConfig.js +10 -10
- package/esm/classedComponents.js +31 -22
- 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 +6 -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 +11 -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/package.json +0 -7
- package/esm/package.json +0 -7
package/cjs/AnimationState.js
CHANGED
package/cjs/DSShuttle.js
CHANGED
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
7
|
require('react');
|
|
7
8
|
var lodash = require('lodash');
|
|
8
9
|
var reactDesc = require('react-desc');
|
|
9
|
-
var
|
|
10
|
+
var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
|
|
10
11
|
var ShuttleImpl = require('./ShuttleImpl.js');
|
|
11
12
|
var utils = require('./utils.js');
|
|
12
13
|
|
|
@@ -16,85 +17,88 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
|
16
17
|
|
|
17
18
|
const noop = () => {};
|
|
18
19
|
|
|
19
|
-
const DSShuttle =
|
|
20
|
-
|
|
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
|
-
|
|
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
|
+
};
|
|
98
102
|
|
|
99
103
|
const props = {
|
|
100
104
|
/** inject props to shuttle wrapper */
|
package/cjs/SearchState.js
CHANGED
package/cjs/Shuttle.actions.js
CHANGED
|
@@ -3,9 +3,15 @@
|
|
|
3
3
|
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
|
+
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');
|
|
7
13
|
var helper = require('./helper.js');
|
|
8
|
-
var utils
|
|
14
|
+
var utils = require('./utils.js');
|
|
9
15
|
|
|
10
16
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
17
|
|
|
@@ -16,7 +22,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
16
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; }
|
|
17
23
|
function toggleItemSelection(itemId) {
|
|
18
24
|
return state => _objectSpread(_objectSpread({}, state), {}, {
|
|
19
|
-
checkedItems:
|
|
25
|
+
checkedItems: dsUtilities.addOrRemove(state.checkedItems, itemId)
|
|
20
26
|
});
|
|
21
27
|
}
|
|
22
28
|
function navigateTo(item, dest) {
|
|
@@ -43,11 +49,13 @@ const defaultOptions = {
|
|
|
43
49
|
op: hasMoved => !hasMoved
|
|
44
50
|
}; // todo: optimize this
|
|
45
51
|
|
|
46
|
-
function getItemDeep({
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
52
|
+
function getItemDeep(_ref) {
|
|
53
|
+
let {
|
|
54
|
+
collection,
|
|
55
|
+
id,
|
|
56
|
+
options
|
|
57
|
+
} = _ref;
|
|
58
|
+
|
|
51
59
|
const {
|
|
52
60
|
idField
|
|
53
61
|
} = _objectSpread(_objectSpread({}, defaultOptions), options);
|
|
@@ -55,7 +63,7 @@ function getItemDeep({
|
|
|
55
63
|
const itemIndex = collection.findIndex(fItem => fItem[idField] === id); // get item with nested children
|
|
56
64
|
|
|
57
65
|
const item = collection[itemIndex];
|
|
58
|
-
const children = item !== null && item !== void 0 && item.hasChildren ?
|
|
66
|
+
const children = item !== null && item !== void 0 && item.hasChildren ? dsUtilities.compose(utils.getChildren({
|
|
59
67
|
index: itemIndex
|
|
60
68
|
}))(collection) || [] : [];
|
|
61
69
|
return {
|
|
@@ -65,9 +73,10 @@ function getItemDeep({
|
|
|
65
73
|
}
|
|
66
74
|
|
|
67
75
|
function addToTarget(itemToAdd, collection) {
|
|
68
|
-
return (state, {
|
|
69
|
-
|
|
70
|
-
|
|
76
|
+
return (state, _ref2) => {
|
|
77
|
+
let {
|
|
78
|
+
idField
|
|
79
|
+
} = _ref2;
|
|
71
80
|
const items = collection || state.preparedItems;
|
|
72
81
|
const {
|
|
73
82
|
item,
|
|
@@ -84,19 +93,20 @@ function addToTarget(itemToAdd, collection) {
|
|
|
84
93
|
} // todo: optimize this
|
|
85
94
|
|
|
86
95
|
function removeFromTarget(itemToRemove) {
|
|
87
|
-
return (state, {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
96
|
+
return (state, _ref3) => {
|
|
97
|
+
let {
|
|
98
|
+
idField
|
|
99
|
+
} = _ref3;
|
|
100
|
+
let targetItems = dsUtilities.cloneDeep(state.targetItems);
|
|
91
101
|
const itemIndex = targetItems.findIndex(fItem => fItem.id === itemToRemove.id);
|
|
92
102
|
const item = targetItems[itemIndex];
|
|
93
|
-
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({
|
|
94
104
|
index: itemIndex
|
|
95
105
|
}))(targetItems) || [] : [];
|
|
96
106
|
targetItems.splice(itemIndex, 1);
|
|
97
107
|
|
|
98
108
|
if (item !== null && item !== void 0 && item.hasChildren && children.length) {
|
|
99
|
-
const childrenHash =
|
|
109
|
+
const childrenHash = dsUtilities.hashArray(children, 'id');
|
|
100
110
|
targetItems = targetItems.filter(i => !childrenHash[i.id]);
|
|
101
111
|
}
|
|
102
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,8 +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');
|
|
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');
|
|
5
17
|
var react = require('react');
|
|
6
|
-
var
|
|
18
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
7
19
|
var withProviders = require('./withProviders.js');
|
|
8
20
|
var Shuttle_actions = require('./Shuttle.actions.js');
|
|
9
21
|
var helper = require('./helper.js');
|
|
@@ -173,10 +185,11 @@ class ShuttleImpl extends react.Component {
|
|
|
173
185
|
onAddCheckedItems(items);
|
|
174
186
|
}
|
|
175
187
|
|
|
176
|
-
handleTargetSortEnd({
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
188
|
+
handleTargetSortEnd(_ref) {
|
|
189
|
+
let {
|
|
190
|
+
sourceItem,
|
|
191
|
+
targetItem
|
|
192
|
+
} = _ref;
|
|
180
193
|
const {
|
|
181
194
|
idField,
|
|
182
195
|
onTargetSortEnd
|
|
@@ -190,8 +203,8 @@ class ShuttleImpl extends react.Component {
|
|
|
190
203
|
const collection = !hierarchyId ? movedItems : targetItems;
|
|
191
204
|
const oldIndex = collection.findIndex(tItem => tItem[idField] === sourceItem[idField]);
|
|
192
205
|
const newIndex = collection.findIndex(tItem => tItem[idField] === targetItem[idField]);
|
|
193
|
-
const sortedMovedItems = !hierarchyId ?
|
|
194
|
-
const sortedItems = hierarchyId ?
|
|
206
|
+
const sortedMovedItems = !hierarchyId ? dsUtilities.arrayMove(movedItems, oldIndex, newIndex) : movedItems;
|
|
207
|
+
const sortedItems = hierarchyId ? dsUtilities.arrayMove(targetItems, oldIndex, newIndex) : targetItems;
|
|
195
208
|
this.setState({
|
|
196
209
|
targetItems: sortedItems,
|
|
197
210
|
movedItems: sortedMovedItems
|
|
@@ -243,7 +256,7 @@ class ShuttleImpl extends react.Component {
|
|
|
243
256
|
if (nonSelectedItems) {
|
|
244
257
|
composedSourceItems = handleControlledSourceItms();
|
|
245
258
|
} else {
|
|
246
|
-
composedSourceItems =
|
|
259
|
+
composedSourceItems = dsUtilities.compose(helper.filterBySearch(searchTerm, searching), helper.filterMovedItems(movedItems), helper.getChildrenFromParent(helper.getActiveIdFromHierarchy(hierarchy).id))(items);
|
|
247
260
|
}
|
|
248
261
|
|
|
249
262
|
const handleControlledTargetItms = () => {
|
|
@@ -263,9 +276,9 @@ class ShuttleImpl extends react.Component {
|
|
|
263
276
|
if (nonSelectedItems) {
|
|
264
277
|
composedTargetItems = handleControlledTargetItms();
|
|
265
278
|
} else {
|
|
266
|
-
composedTargetItems =
|
|
279
|
+
composedTargetItems = dsUtilities.compose(tItems => {
|
|
267
280
|
const hierarchyId = helper.getActiveIdFromHierarchy(hierarchyDest).id;
|
|
268
|
-
return hierarchyId ?
|
|
281
|
+
return hierarchyId ? dsUtilities.compose(helper.filterMovedItems(movedItems), helper.getChildrenFromParent(hierarchyId))(tItems) : movedItems;
|
|
269
282
|
})(targetItems);
|
|
270
283
|
}
|
|
271
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,5 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
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');
|
|
3
6
|
var react = require('react');
|
|
4
7
|
var createContainer = require('constate');
|
|
5
8
|
var helper = require('./helper.js');
|
|
@@ -25,7 +28,9 @@ function useShuttleState() {
|
|
|
25
28
|
|
|
26
29
|
const setState = state => setShuttleState(state(shuttleState));
|
|
27
30
|
|
|
28
|
-
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] : [];
|
|
29
34
|
const itemsToMove = helper.getItemsById(itemsIds, items);
|
|
30
35
|
const pipeActions = itemsToMove.map(item => Shuttle_actions.moveItem(item));
|
|
31
36
|
setState(helper.pipe([Shuttle_actions.resetMovedItems(), ...pipeActions]));
|
|
@@ -53,7 +58,7 @@ function useShuttleState() {
|
|
|
53
58
|
setState(Shuttle_actions.toggleItemSelection(item.id));
|
|
54
59
|
}
|
|
55
60
|
|
|
56
|
-
function moveCheckedItems(items
|
|
61
|
+
function moveCheckedItems(items) {
|
|
57
62
|
const pipeActions = items.map(item => moveItem(item));
|
|
58
63
|
setState(helper.pipe([...pipeActions, resetCheckedItems()]));
|
|
59
64
|
}
|
|
@@ -15,7 +15,7 @@ const animationConfig = {
|
|
|
15
15
|
transform: 'translate3d(0,0,0)'
|
|
16
16
|
},
|
|
17
17
|
to: {
|
|
18
|
-
transform:
|
|
18
|
+
transform: "translate3d(".concat(xPosMovement, "px,0,0)")
|
|
19
19
|
}
|
|
20
20
|
},
|
|
21
21
|
slideLeft: {
|
|
@@ -23,7 +23,7 @@ const animationConfig = {
|
|
|
23
23
|
transform: 'translate3d(0,0,0)'
|
|
24
24
|
},
|
|
25
25
|
to: {
|
|
26
|
-
transform:
|
|
26
|
+
transform: "translate3d(".concat(-xPosMovement, "px,0,0)")
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
moveItem: isMovingLeft => ({
|
|
@@ -32,14 +32,14 @@ const animationConfig = {
|
|
|
32
32
|
},
|
|
33
33
|
enter: {
|
|
34
34
|
opacity: 1,
|
|
35
|
-
transform:
|
|
35
|
+
transform: "translate3d(".concat(0, "px,0,0)")
|
|
36
36
|
},
|
|
37
37
|
from: {
|
|
38
38
|
opacity: 1,
|
|
39
|
-
transform:
|
|
39
|
+
transform: "translate3d(".concat(isMovingLeft ? -xPosMovement : xPosMovement, "px,0,0)")
|
|
40
40
|
},
|
|
41
41
|
leave: {
|
|
42
|
-
transform:
|
|
42
|
+
transform: "translate3d(".concat(isMovingLeft ? -xPosMovement : xPosMovement, "px,0,0)")
|
|
43
43
|
}
|
|
44
44
|
}),
|
|
45
45
|
moveList: isDrillingDown => ({
|
|
@@ -52,11 +52,11 @@ const animationConfig = {
|
|
|
52
52
|
},
|
|
53
53
|
from: {
|
|
54
54
|
opacity: 0,
|
|
55
|
-
transform:
|
|
55
|
+
transform: "translate3d(0px,".concat(isDrillingDown ? xPosMovement : -xPosMovement, "px,0)")
|
|
56
56
|
},
|
|
57
57
|
leave: {
|
|
58
58
|
opacity: 0,
|
|
59
|
-
transform:
|
|
59
|
+
transform: "translate3d(0,".concat(isDrillingDown ? -xPosMovement : xPosMovement, "px,0)")
|
|
60
60
|
}
|
|
61
61
|
}),
|
|
62
62
|
breadcrumb: () => ({
|
|
@@ -65,15 +65,15 @@ const animationConfig = {
|
|
|
65
65
|
},
|
|
66
66
|
enter: {
|
|
67
67
|
opacity: 1,
|
|
68
|
-
transform:
|
|
68
|
+
transform: "translate3d(".concat(0, "px,0,0)")
|
|
69
69
|
},
|
|
70
70
|
from: {
|
|
71
71
|
opacity: 0,
|
|
72
|
-
transform:
|
|
72
|
+
transform: "translate3d(".concat(xBreadcrumbPos, "px,0px,0)")
|
|
73
73
|
},
|
|
74
74
|
leave: {
|
|
75
75
|
opacity: 0,
|
|
76
|
-
transform:
|
|
76
|
+
transform: "translate3d(".concat(xBreadcrumbPos, "px,0,0)")
|
|
77
77
|
}
|
|
78
78
|
})
|
|
79
79
|
};
|
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');
|
|
@@ -12,34 +12,43 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
|
|
13
13
|
|
|
14
14
|
const blockName = 'shuttle';
|
|
15
|
-
const headerBlockName =
|
|
16
|
-
const listBlockName =
|
|
17
|
-
const footerBlockName =
|
|
15
|
+
const headerBlockName = "".concat(blockName, "-header");
|
|
16
|
+
const listBlockName = "".concat(blockName, "-list");
|
|
17
|
+
const footerBlockName = "".concat(blockName, "-footer");
|
|
18
18
|
const ShuttleContainer = dsClassnames.aggregatedClasses('div')(blockName); // wrapper
|
|
19
19
|
|
|
20
|
-
const ShuttleWrapper = dsClassnames.aggregatedClasses('div')(
|
|
20
|
+
const ShuttleWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-wrapper")); // header
|
|
21
21
|
|
|
22
22
|
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
|
})));
|