@elliemae/ds-shuttle 2.0.0-alpha.1 → 2.0.0-alpha.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 +2 -1
- package/cjs/DSShuttle.js +85 -81
- package/cjs/SearchState.js +2 -1
- package/cjs/Shuttle.actions.js +29 -19
- package/cjs/ShuttleContainer.js +17 -10
- package/cjs/ShuttleImpl.js +30 -18
- package/cjs/ShuttleRenderer.js +11 -4
- package/cjs/ShuttleState.js +8 -3
- package/cjs/animation/animationConfig.js +10 -10
- package/cjs/classedComponents.js +33 -24
- package/cjs/components/LoadingIndicator.js +4 -4
- package/cjs/components/OverflowList.js +24 -13
- package/cjs/components/ShuttleBreadcrumb.js +23 -17
- package/cjs/components/ShuttleInfiniteScrollIndicator.js +22 -16
- package/cjs/components/ShuttleListItem/ActionButtons.js +12 -12
- package/cjs/components/ShuttleListItem/ShuttleListItem.js +26 -19
- package/cjs/components/ShuttleListItem/ShuttleSourceListItem.js +10 -4
- package/cjs/components/ShuttleListItem/ShuttleTargetListItem.js +9 -4
- package/cjs/components/ShuttleListPanel.js +9 -8
- package/cjs/components/ShuttleSearchBox.js +19 -19
- package/cjs/components/ShuttleSource.js +61 -55
- package/cjs/components/ShuttleTarget.js +37 -30
- package/cjs/components/VirtualizedItem.js +13 -7
- package/cjs/components/VirtualizedList.js +48 -36
- package/cjs/components/VirtualizedSortableList.js +7 -2
- package/cjs/helper.js +39 -19
- package/cjs/index.js +1 -1
- package/cjs/updateShuttleStateFromProps.js +17 -7
- package/cjs/utils.js +10 -7
- package/cjs/withProviders.js +7 -2
- 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 +22 -10
- 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 +16 -14
- 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 +27 -12
- package/types/DSShuttle.d.ts +259 -37
- package/types/components/ShuttleBreadcrumb.d.ts +1 -1
- package/cjs/package.json +0 -7
- package/esm/package.json +0 -7
package/cjs/helper.js
CHANGED
|
@@ -3,7 +3,20 @@
|
|
|
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/esnext.async-iterator.some.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.some.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
11
|
+
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
12
|
+
require('core-js/modules/esnext.iterator.reduce.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.map.js');
|
|
16
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
17
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
18
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
19
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
7
20
|
var tree = require('treetabular');
|
|
8
21
|
|
|
9
22
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -17,14 +30,12 @@ function _interopNamespace(e) {
|
|
|
17
30
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
18
31
|
Object.defineProperty(n, k, d.get ? d : {
|
|
19
32
|
enumerable: true,
|
|
20
|
-
get: function () {
|
|
21
|
-
return e[k];
|
|
22
|
-
}
|
|
33
|
+
get: function () { return e[k]; }
|
|
23
34
|
});
|
|
24
35
|
}
|
|
25
36
|
});
|
|
26
37
|
}
|
|
27
|
-
n[
|
|
38
|
+
n["default"] = e;
|
|
28
39
|
return Object.freeze(n);
|
|
29
40
|
}
|
|
30
41
|
|
|
@@ -33,28 +44,37 @@ var tree__namespace = /*#__PURE__*/_interopNamespace(tree);
|
|
|
33
44
|
|
|
34
45
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
35
46
|
|
|
36
|
-
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[
|
|
47
|
+
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; }
|
|
37
48
|
const getHierarchyTypeName = dest => !dest ? 'hierarchy' : 'hierarchyDest';
|
|
38
49
|
const checkHasChildren = (list, currentItem) => list.some(item => currentItem.id === item.parent);
|
|
39
|
-
const getActiveIdFromHierarchy = (
|
|
40
|
-
|
|
50
|
+
const getActiveIdFromHierarchy = function () {
|
|
51
|
+
let hierarchy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
52
|
+
return hierarchy[hierarchy.length - 1] || {};
|
|
53
|
+
};
|
|
54
|
+
const filterItemsByHierarchy = function (list, hierarchyId) {
|
|
55
|
+
let parentField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'parent';
|
|
56
|
+
return list.filter(item => item[parentField] === hierarchyId);
|
|
57
|
+
};
|
|
41
58
|
const getItemsById = (ids, list) => ids.reduce((acc, id) => acc.concat(list.find(item => String(item.id) === String(id))), []).filter(item => item);
|
|
42
|
-
const toggleInObject = (obj, key, value) => obj[key] ?
|
|
59
|
+
const toggleInObject = (obj, key, value) => obj[key] ? dsUtilities.omit(obj, [key]) : _objectSpread(_objectSpread({}, obj), {}, {
|
|
43
60
|
[key]: value
|
|
44
61
|
});
|
|
45
62
|
const isMovable = item => !item.forceNotMovable && (item.hasChildren && item.isMoveableContainer || !item.hasChildren); // utility to execute all specified actions in sequence
|
|
46
63
|
|
|
47
64
|
const pipe = actions => (initState, props) => actions.reduce((prevState, action) => action(prevState, props), initState);
|
|
48
|
-
const moveItems =
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
items
|
|
54
|
-
|
|
55
|
-
|
|
65
|
+
const moveItems = _ref => {
|
|
66
|
+
let {
|
|
67
|
+
oldIndex,
|
|
68
|
+
newIndex
|
|
69
|
+
} = _ref;
|
|
70
|
+
return items => {
|
|
71
|
+
const sourceItem = items[oldIndex];
|
|
72
|
+
items.splice(oldIndex, 1);
|
|
73
|
+
items.splice(newIndex, 0, sourceItem);
|
|
74
|
+
return items;
|
|
75
|
+
};
|
|
56
76
|
};
|
|
57
|
-
const prepareItems = items =>
|
|
77
|
+
const prepareItems = items => dsUtilities.compose(tree__namespace.fixOrder(), items => items.map(item => _objectSpread(_objectSpread({}, item), {}, {
|
|
58
78
|
hasChildren: checkHasChildren(items, item)
|
|
59
79
|
})))(items);
|
|
60
80
|
const defaultOptions = {
|
|
@@ -75,7 +95,7 @@ function filterMovedItems(movedItems, options) {
|
|
|
75
95
|
op: filterOp
|
|
76
96
|
} = _objectSpread(_objectSpread({}, defaultOptions), options);
|
|
77
97
|
|
|
78
|
-
const movedItemsHash =
|
|
98
|
+
const movedItemsHash = dsUtilities.hashArray(movedItems, idField);
|
|
79
99
|
return items => items.filter(item => filterOp(!!movedItemsHash[item[idField]]));
|
|
80
100
|
}
|
|
81
101
|
function filterBySearch(term, searching) {
|
package/cjs/index.js
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
|
-
|
|
4
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.find.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.find.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
14
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
5
15
|
var helper = require('./helper.js');
|
|
6
16
|
var Shuttle_actions = require('./Shuttle.actions.js');
|
|
7
17
|
|
|
@@ -11,7 +21,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
|
|
|
11
21
|
|
|
12
22
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
13
23
|
|
|
14
|
-
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[
|
|
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; }
|
|
15
25
|
|
|
16
26
|
const mergeToPrevState = (prevState, nextState) => _objectSpread(_objectSpread(_objectSpread({}, prevState), nextState), {}, {
|
|
17
27
|
prevProps: _objectSpread(_objectSpread({}, prevState.prevProps), nextState.prevProps)
|
|
@@ -23,7 +33,7 @@ function compareSelectedItems(nextProps, prevProps) {
|
|
|
23
33
|
idField
|
|
24
34
|
} = nextProps;
|
|
25
35
|
return nextState => {
|
|
26
|
-
if (
|
|
36
|
+
if (dsUtilities.isEqual(selectedItems, prevProps.selectedItems)) return nextState; // if we are using nonSelectedItems skip this legacy logic and paint just what's passed
|
|
27
37
|
// to nonSelectedItems (source) and selectedItems (target)
|
|
28
38
|
// TODO make controlledV2 the default behavior for controlled shuttle
|
|
29
39
|
|
|
@@ -31,7 +41,7 @@ function compareSelectedItems(nextProps, prevProps) {
|
|
|
31
41
|
const {
|
|
32
42
|
preparedItems
|
|
33
43
|
} = nextState;
|
|
34
|
-
const prevSelectedItemsHash =
|
|
44
|
+
const prevSelectedItemsHash = dsUtilities.hashArray(prevProps.selectedItems || []);
|
|
35
45
|
const itemsToMove = helper.getItemsById(selectedItems, preparedItems);
|
|
36
46
|
const actions = itemsToMove.map(item => prevSelectedItemsHash[item[idField]] ? Shuttle_actions.addToTarget(item, nextState.targetItems) : Shuttle_actions.addToTarget(item));
|
|
37
47
|
return mergeToPrevState(nextState, _objectSpread(_objectSpread({}, helper.pipe([Shuttle_actions.resetMovedItems(), ...actions])(nextState, nextProps)), {}, {
|
|
@@ -65,7 +75,7 @@ function compareItems(nextProps, prevProps) {
|
|
|
65
75
|
});
|
|
66
76
|
}
|
|
67
77
|
|
|
68
|
-
if (
|
|
78
|
+
if (dsUtilities.isEqual(items, prevProps.items)) return nextState;
|
|
69
79
|
return mergeToPrevState(nextState, {
|
|
70
80
|
preparedItems,
|
|
71
81
|
prevProps: {
|
|
@@ -77,8 +87,8 @@ function compareItems(nextProps, prevProps) {
|
|
|
77
87
|
|
|
78
88
|
function updateShuttleStateFromProps (nextProps, prevState) {
|
|
79
89
|
const stateReducers = [compareSelectedItems, compareItems].map(fn => fn(nextProps, prevState.prevProps));
|
|
80
|
-
const nextState =
|
|
81
|
-
return !
|
|
90
|
+
const nextState = dsUtilities.compose(...stateReducers)(prevState);
|
|
91
|
+
return !dsUtilities.isEqual(nextState, prevState) ? nextState : null;
|
|
82
92
|
}
|
|
83
93
|
|
|
84
94
|
module.exports = updateShuttleStateFromProps;
|
package/cjs/utils.js
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
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 tree = require('treetabular');
|
|
5
|
-
var
|
|
10
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
6
11
|
var helper = require('./helper.js');
|
|
7
12
|
|
|
8
13
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -16,14 +21,12 @@ function _interopNamespace(e) {
|
|
|
16
21
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
17
22
|
Object.defineProperty(n, k, d.get ? d : {
|
|
18
23
|
enumerable: true,
|
|
19
|
-
get: function () {
|
|
20
|
-
return e[k];
|
|
21
|
-
}
|
|
24
|
+
get: function () { return e[k]; }
|
|
22
25
|
});
|
|
23
26
|
}
|
|
24
27
|
});
|
|
25
28
|
}
|
|
26
|
-
n[
|
|
29
|
+
n["default"] = e;
|
|
27
30
|
return Object.freeze(n);
|
|
28
31
|
}
|
|
29
32
|
|
|
@@ -32,9 +35,9 @@ var tree__namespace = /*#__PURE__*/_interopNamespace(tree);
|
|
|
32
35
|
|
|
33
36
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
34
37
|
|
|
35
|
-
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[
|
|
38
|
+
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; }
|
|
36
39
|
var utils = _objectSpread({
|
|
37
|
-
prepareItems: (items, options) =>
|
|
40
|
+
prepareItems: (items, options) => dsUtilities.compose(tree__namespace.fixOrder(options), helper.prepareItems)(items)
|
|
38
41
|
}, tree__namespace);
|
|
39
42
|
|
|
40
43
|
module.exports = utils;
|
package/cjs/withProviders.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 _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
9
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
10
|
require('react');
|
|
@@ -15,10 +20,10 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
|
|
|
15
20
|
|
|
16
21
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
17
22
|
|
|
18
|
-
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[
|
|
23
|
+
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; }
|
|
19
24
|
|
|
20
25
|
function withProviders(Component) {
|
|
21
|
-
return props => /*#__PURE__*/_jsx__default[
|
|
26
|
+
return props => /*#__PURE__*/_jsx__default["default"](ShuttleState.Provider, {}, void 0, /*#__PURE__*/_jsx__default["default"](AnimationState.Provider, {}, void 0, /*#__PURE__*/_jsx__default["default"](SearchState.Provider, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)))));
|
|
22
27
|
}
|
|
23
28
|
|
|
24
29
|
module.exports = withProviders;
|
package/esm/AnimationState.js
CHANGED
package/esm/DSShuttle.js
CHANGED
|
@@ -1,92 +1,96 @@
|
|
|
1
1
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
3
|
import 'react';
|
|
3
4
|
import { debounce } from 'lodash';
|
|
4
5
|
import { PropTypes, describe } from 'react-desc';
|
|
5
|
-
import { TooltipTextProvider } from '@elliemae/ds-
|
|
6
|
+
import { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';
|
|
6
7
|
import ShuttleImpl from './ShuttleImpl.js';
|
|
7
8
|
export { default as utils } from './utils.js';
|
|
8
9
|
|
|
9
10
|
const noop = () => {};
|
|
10
11
|
|
|
11
|
-
const DSShuttle =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
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
|
-
|
|
12
|
+
const DSShuttle = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
containerProps = {},
|
|
15
|
+
idField = 'id',
|
|
16
|
+
parentIdField = 'parent',
|
|
17
|
+
showIcons = true,
|
|
18
|
+
items = [],
|
|
19
|
+
selectedItems = undefined,
|
|
20
|
+
// if defined it becomes controlled (v1)
|
|
21
|
+
// TODO make `nonSelectedItems` the default controlled behavior (v2)
|
|
22
|
+
nonSelectedItems = undefined,
|
|
23
|
+
onSearch = noop,
|
|
24
|
+
onSearchOpen = noop,
|
|
25
|
+
onSearchClose = noop,
|
|
26
|
+
onDrillDown = noop,
|
|
27
|
+
onDrillDownTarget = noop,
|
|
28
|
+
onTargetSortEnd = noop,
|
|
29
|
+
setGetStatus = noop,
|
|
30
|
+
targetSortable = true,
|
|
31
|
+
sourceEmptyMessage = 'No Items Found',
|
|
32
|
+
sourceRootTitle = 'Category',
|
|
33
|
+
targetEmptyMessage = 'No Items Selected',
|
|
34
|
+
targetRootTitle = 'Selected Items',
|
|
35
|
+
composeSourceItemProps = () => ({}),
|
|
36
|
+
composeTargetItemProps = () => ({}),
|
|
37
|
+
onAddToTarget = noop,
|
|
38
|
+
onAddCheckedItems = noop,
|
|
39
|
+
onRemoveFromTarget = noop,
|
|
40
|
+
onRemoveAllFromTarget = noop,
|
|
41
|
+
onChange = noop,
|
|
42
|
+
renderSourceCounter = noop,
|
|
43
|
+
renderTargetCounter = noop,
|
|
44
|
+
sourceClearItemsText = 'CLEAR ALL',
|
|
45
|
+
targetClearItemsText = 'CLEAR ALL',
|
|
46
|
+
searchPlaceholder = 'Search field ID, name, etc.',
|
|
47
|
+
loadingSource = false,
|
|
48
|
+
loadingTarget = false,
|
|
49
|
+
onGetMoreItems = () => null,
|
|
50
|
+
hasNextPage = false,
|
|
51
|
+
moreItemsLoading
|
|
52
|
+
} = _ref;
|
|
53
|
+
return /*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx(ShuttleImpl, {
|
|
54
|
+
composeSourceItemProps: composeSourceItemProps,
|
|
55
|
+
composeTargetItemProps: composeTargetItemProps,
|
|
56
|
+
containerProps: containerProps,
|
|
57
|
+
idField: idField,
|
|
58
|
+
items: items,
|
|
59
|
+
onAddCheckedItems: onAddCheckedItems,
|
|
60
|
+
onAddToTarget: onAddToTarget,
|
|
61
|
+
onChange: onChange,
|
|
62
|
+
onDrillDown: onDrillDown,
|
|
63
|
+
nonSelectedItems: nonSelectedItems,
|
|
64
|
+
onDrillDownTarget: onDrillDownTarget,
|
|
65
|
+
onRemoveAllFromTarget: onRemoveAllFromTarget,
|
|
66
|
+
onRemoveFromTarget: onRemoveFromTarget,
|
|
67
|
+
onSearch: onSearch,
|
|
68
|
+
onSearchClose: onSearchClose,
|
|
69
|
+
onSearchOpen: onSearchOpen,
|
|
70
|
+
onTargetSortEnd: onTargetSortEnd,
|
|
71
|
+
parentIdField: parentIdField,
|
|
72
|
+
renderSourceCounter: renderSourceCounter,
|
|
73
|
+
renderTargetCounter: renderTargetCounter,
|
|
74
|
+
searchPlaceholder: searchPlaceholder,
|
|
75
|
+
selectedItems: selectedItems,
|
|
76
|
+
setGetStatus: setGetStatus,
|
|
77
|
+
showIcons: showIcons,
|
|
78
|
+
sourceClearItemsText: sourceClearItemsText,
|
|
79
|
+
sourceEmptyMessage: sourceEmptyMessage,
|
|
80
|
+
sourceRootTitle: sourceRootTitle,
|
|
81
|
+
targetClearItemsText: targetClearItemsText,
|
|
82
|
+
targetEmptyMessage: targetEmptyMessage,
|
|
83
|
+
targetRootTitle: targetRootTitle,
|
|
84
|
+
targetSortable: targetSortable,
|
|
85
|
+
loadingSource: loadingSource,
|
|
86
|
+
loadingTarget: loadingTarget,
|
|
87
|
+
onGetMoreItems: debounce(function () {
|
|
88
|
+
onGetMoreItems(...arguments);
|
|
89
|
+
}, 500),
|
|
90
|
+
moreItemsLoading: moreItemsLoading,
|
|
91
|
+
hasNextPage: hasNextPage
|
|
92
|
+
}));
|
|
93
|
+
};
|
|
90
94
|
|
|
91
95
|
const props = {
|
|
92
96
|
/** inject props to shuttle wrapper */
|
package/esm/SearchState.js
CHANGED
package/esm/Shuttle.actions.js
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
3
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
|
-
import
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
8
|
+
import { addOrRemove, cloneDeep, compose, hashArray } from '@elliemae/ds-utilities';
|
|
3
9
|
import { toggleInObject, filterMovedItems, getHierarchyTypeName } from './helper.js';
|
|
4
10
|
import utils from './utils.js';
|
|
5
11
|
|
|
@@ -35,11 +41,13 @@ const defaultOptions = {
|
|
|
35
41
|
op: hasMoved => !hasMoved
|
|
36
42
|
}; // todo: optimize this
|
|
37
43
|
|
|
38
|
-
function getItemDeep({
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
44
|
+
function getItemDeep(_ref) {
|
|
45
|
+
let {
|
|
46
|
+
collection,
|
|
47
|
+
id,
|
|
48
|
+
options
|
|
49
|
+
} = _ref;
|
|
50
|
+
|
|
43
51
|
const {
|
|
44
52
|
idField
|
|
45
53
|
} = _objectSpread(_objectSpread({}, defaultOptions), options);
|
|
@@ -57,9 +65,10 @@ function getItemDeep({
|
|
|
57
65
|
}
|
|
58
66
|
|
|
59
67
|
function addToTarget(itemToAdd, collection) {
|
|
60
|
-
return (state, {
|
|
61
|
-
|
|
62
|
-
|
|
68
|
+
return (state, _ref2) => {
|
|
69
|
+
let {
|
|
70
|
+
idField
|
|
71
|
+
} = _ref2;
|
|
63
72
|
const items = collection || state.preparedItems;
|
|
64
73
|
const {
|
|
65
74
|
item,
|
|
@@ -76,9 +85,10 @@ function addToTarget(itemToAdd, collection) {
|
|
|
76
85
|
} // todo: optimize this
|
|
77
86
|
|
|
78
87
|
function removeFromTarget(itemToRemove) {
|
|
79
|
-
return (state, {
|
|
80
|
-
|
|
81
|
-
|
|
88
|
+
return (state, _ref3) => {
|
|
89
|
+
let {
|
|
90
|
+
idField
|
|
91
|
+
} = _ref3;
|
|
82
92
|
let targetItems = cloneDeep(state.targetItems);
|
|
83
93
|
const itemIndex = targetItems.findIndex(fItem => fItem.id === itemToRemove.id);
|
|
84
94
|
const item = targetItems[itemIndex];
|
package/esm/ShuttleContainer.js
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
2
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
3
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
6
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
3
8
|
import { useContext, useMemo } from 'react';
|
|
4
|
-
import { compose, sortBy, uniqBy, values, isFunction } from '@elliemae/ds-utilities
|
|
9
|
+
import { compose, sortBy, uniqBy, values, isFunction } from '@elliemae/ds-utilities';
|
|
5
10
|
import withProviders from './withProviders.js';
|
|
6
11
|
import { filterItemsByHierarchy, getActiveIdFromHierarchy, prepareItems, getItemsById } from './helper.js';
|
|
7
12
|
import SearchState from './SearchState.js';
|
|
@@ -17,10 +22,12 @@ function filterItemsByTerm(items, term) {
|
|
|
17
22
|
return items.filter(item => item.name.toLowerCase().indexOf(String(term).toLowerCase()) !== -1 || String(item.id).indexOf(String(term).toLowerCase()) !== -1);
|
|
18
23
|
}
|
|
19
24
|
|
|
20
|
-
function ShuttleContainer({
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
function ShuttleContainer(_ref) {
|
|
26
|
+
let {
|
|
27
|
+
items = [],
|
|
28
|
+
children
|
|
29
|
+
} = _ref;
|
|
30
|
+
|
|
24
31
|
const _useContext = useContext(useShuttleState.Context),
|
|
25
32
|
{
|
|
26
33
|
state: shuttleState
|
package/esm/ShuttleImpl.js
CHANGED
|
@@ -1,7 +1,19 @@
|
|
|
1
|
-
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
2
1
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
3
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
6
|
+
import 'core-js/modules/esnext.async-iterator.some.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.some.js';
|
|
8
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
9
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
10
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
11
|
+
import 'core-js/modules/esnext.async-iterator.find.js';
|
|
12
|
+
import 'core-js/modules/esnext.iterator.find.js';
|
|
13
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
14
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
3
15
|
import { Component } from 'react';
|
|
4
|
-
import { arrayMove, compose } from '@elliemae/ds-utilities
|
|
16
|
+
import { arrayMove, compose } from '@elliemae/ds-utilities';
|
|
5
17
|
import withProviders from './withProviders.js';
|
|
6
18
|
import { navigateTo, resetCheckedItems, resetMovedItems, addToTarget, removeFromTarget, toggleItemSelection } from './Shuttle.actions.js';
|
|
7
19
|
import { pipe, getItemsById, getActiveIdFromHierarchy, filterBySearch, filterMovedItems, getChildrenFromParent } from './helper.js';
|
|
@@ -20,12 +32,12 @@ class ShuttleImpl extends Component {
|
|
|
20
32
|
constructor(props) {
|
|
21
33
|
super(props);
|
|
22
34
|
|
|
23
|
-
|
|
35
|
+
this.getState = () => {
|
|
24
36
|
const {
|
|
25
37
|
movedItems
|
|
26
38
|
} = this.state;
|
|
27
39
|
return Object.keys(movedItems);
|
|
28
|
-
}
|
|
40
|
+
};
|
|
29
41
|
|
|
30
42
|
this.state = {
|
|
31
43
|
prevProps: {},
|
|
@@ -166,10 +178,11 @@ class ShuttleImpl extends Component {
|
|
|
166
178
|
onAddCheckedItems(items);
|
|
167
179
|
}
|
|
168
180
|
|
|
169
|
-
handleTargetSortEnd({
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
181
|
+
handleTargetSortEnd(_ref) {
|
|
182
|
+
let {
|
|
183
|
+
sourceItem,
|
|
184
|
+
targetItem
|
|
185
|
+
} = _ref;
|
|
173
186
|
const {
|
|
174
187
|
idField,
|
|
175
188
|
onTargetSortEnd
|
|
@@ -285,8 +298,7 @@ class ShuttleImpl extends Component {
|
|
|
285
298
|
|
|
286
299
|
}
|
|
287
300
|
|
|
288
|
-
|
|
289
|
-
|
|
301
|
+
ShuttleImpl.contextType = SearchState.Context;
|
|
290
302
|
var ShuttleImpl$1 = withProviders(ShuttleImpl);
|
|
291
303
|
|
|
292
304
|
export { ShuttleImpl$1 as default };
|
package/esm/ShuttleRenderer.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
3
8
|
import { useContext, useCallback } from 'react';
|
|
@@ -79,7 +84,8 @@ function ShuttleRenderer(_ref) {
|
|
|
79
84
|
onMoveItemToTarget(item);
|
|
80
85
|
removeAnimationState();
|
|
81
86
|
},
|
|
82
|
-
onNavigateTo: (item
|
|
87
|
+
onNavigateTo: function (item) {
|
|
88
|
+
let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'down';
|
|
83
89
|
const indexInHierarchy = hierarchy.findIndex(hItem => hItem.id === item.id);
|
|
84
90
|
setIsDrillingDown(indexInHierarchy === -1);
|
|
85
91
|
onNavigateOnSourceTo(item, direction);
|
|
@@ -110,7 +116,8 @@ function ShuttleRenderer(_ref) {
|
|
|
110
116
|
removeAnimationState();
|
|
111
117
|
onMoveItemToSource(item);
|
|
112
118
|
},
|
|
113
|
-
onNavigateTo: (item
|
|
119
|
+
onNavigateTo: function (item) {
|
|
120
|
+
let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'down';
|
|
114
121
|
const indexInHierarchy = hierarchyDest.findIndex(hItem => hItem.id === item.id);
|
|
115
122
|
setIsDrillingDown(indexInHierarchy === -1);
|
|
116
123
|
onNavigateOnTargetTo(item, direction);
|