@elliemae/ds-shuttle 2.2.1 → 2.3.0-alpha.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.
- package/cjs/AnimationState.js +46 -19
- package/cjs/AnimationState.js.map +7 -0
- package/cjs/DSShuttle.js +166 -219
- package/cjs/DSShuttle.js.map +7 -0
- package/cjs/SearchState.js +44 -25
- package/cjs/SearchState.js.map +7 -0
- package/cjs/Shuttle.actions.js +87 -98
- package/cjs/Shuttle.actions.js.map +7 -0
- package/cjs/ShuttleContainer.js +56 -61
- package/cjs/ShuttleContainer.js.map +7 -0
- package/cjs/ShuttleImpl.js +109 -206
- package/cjs/ShuttleImpl.js.map +7 -0
- package/cjs/ShuttleRenderer.js +140 -135
- package/cjs/ShuttleRenderer.js.map +7 -0
- package/cjs/ShuttleState.js +57 -53
- package/cjs/ShuttleState.js.map +7 -0
- package/cjs/animation/animationConfig.js +53 -56
- package/cjs/animation/animationConfig.js.map +7 -0
- package/cjs/classedComponents.js +70 -69
- package/cjs/classedComponents.js.map +7 -0
- package/cjs/components/LoadingIndicator.js +49 -22
- package/cjs/components/LoadingIndicator.js.map +7 -0
- package/cjs/components/OverflowList.js +50 -48
- package/cjs/components/OverflowList.js.map +7 -0
- package/cjs/components/ShuttleBreadcrumb.js +52 -40
- package/cjs/components/ShuttleBreadcrumb.js.map +7 -0
- package/cjs/components/ShuttleInfiniteScrollIndicator.js +46 -37
- package/cjs/components/ShuttleInfiniteScrollIndicator.js.map +7 -0
- package/cjs/components/ShuttleListItem/ActionButtons.js +56 -51
- package/cjs/components/ShuttleListItem/ActionButtons.js.map +7 -0
- package/cjs/components/ShuttleListItem/ShuttleListItem.js +78 -80
- package/cjs/components/ShuttleListItem/ShuttleListItem.js.map +7 -0
- package/cjs/components/ShuttleListItem/ShuttleSourceListItem.js +78 -64
- package/cjs/components/ShuttleListItem/ShuttleSourceListItem.js.map +7 -0
- package/cjs/components/ShuttleListItem/ShuttleTargetListItem.js +72 -56
- package/cjs/components/ShuttleListItem/ShuttleTargetListItem.js.map +7 -0
- package/cjs/components/ShuttleListPanel.js +44 -26
- package/cjs/components/ShuttleListPanel.js.map +7 -0
- package/cjs/components/ShuttleSearchBox.js +61 -72
- package/cjs/components/ShuttleSearchBox.js.map +7 -0
- package/cjs/components/ShuttleSource.js +150 -146
- package/cjs/components/ShuttleSource.js.map +7 -0
- package/cjs/components/ShuttleTarget.js +88 -100
- package/cjs/components/ShuttleTarget.js.map +7 -0
- package/cjs/components/VirtualizedItem.js +45 -40
- package/cjs/components/VirtualizedItem.js.map +7 -0
- package/cjs/components/VirtualizedList.js +81 -86
- package/cjs/components/VirtualizedList.js.map +7 -0
- package/cjs/components/VirtualizedSortableList.js +47 -40
- package/cjs/components/VirtualizedSortableList.js.map +7 -0
- package/cjs/helper.js +69 -103
- package/cjs/helper.js.map +7 -0
- package/cjs/index.js +38 -12
- package/cjs/index.js.map +7 -0
- package/cjs/tests/utils.js +1218 -0
- package/cjs/tests/utils.js.map +7 -0
- package/cjs/updateShuttleStateFromProps.js +73 -69
- package/cjs/updateShuttleStateFromProps.js.map +7 -0
- package/cjs/utils.js +40 -42
- package/cjs/utils.js.map +7 -0
- package/cjs/withProviders.js +43 -27
- package/cjs/withProviders.js.map +7 -0
- package/esm/AnimationState.js +12 -8
- package/esm/AnimationState.js.map +7 -0
- package/esm/DSShuttle.js +126 -198
- package/esm/DSShuttle.js.map +7 -0
- package/esm/SearchState.js +15 -19
- package/esm/SearchState.js.map +7 -0
- package/esm/Shuttle.actions.js +63 -80
- package/esm/Shuttle.actions.js.map +7 -0
- package/esm/ShuttleContainer.js +34 -50
- package/esm/ShuttleContainer.js.map +7 -0
- package/esm/ShuttleImpl.js +78 -183
- package/esm/ShuttleImpl.js.map +7 -0
- package/esm/ShuttleRenderer.js +111 -128
- package/esm/ShuttleRenderer.js.map +7 -0
- package/esm/ShuttleState.js +34 -53
- package/esm/ShuttleState.js.map +7 -0
- package/esm/animation/animationConfig.js +24 -52
- package/esm/animation/animationConfig.js.map +7 -0
- package/esm/classedComponents.js +43 -51
- package/esm/classedComponents.js.map +7 -0
- package/esm/components/LoadingIndicator.js +20 -15
- package/esm/components/LoadingIndicator.js.map +7 -0
- package/esm/components/OverflowList.js +21 -41
- package/esm/components/OverflowList.js.map +7 -0
- package/esm/components/ShuttleBreadcrumb.js +23 -33
- package/esm/components/ShuttleBreadcrumb.js.map +7 -0
- package/esm/components/ShuttleInfiniteScrollIndicator.js +18 -31
- package/esm/components/ShuttleInfiniteScrollIndicator.js.map +7 -0
- package/esm/components/ShuttleListItem/ActionButtons.js +27 -39
- package/esm/components/ShuttleListItem/ActionButtons.js.map +7 -0
- package/esm/components/ShuttleListItem/ShuttleListItem.js +50 -72
- package/esm/components/ShuttleListItem/ShuttleListItem.js.map +7 -0
- package/esm/components/ShuttleListItem/ShuttleSourceListItem.js +45 -52
- package/esm/components/ShuttleListItem/ShuttleSourceListItem.js.map +7 -0
- package/esm/components/ShuttleListItem/ShuttleTargetListItem.js +42 -47
- package/esm/components/ShuttleListItem/ShuttleTargetListItem.js.map +7 -0
- package/esm/components/ShuttleListPanel.js +15 -19
- package/esm/components/ShuttleListPanel.js.map +7 -0
- package/esm/components/ShuttleSearchBox.js +32 -66
- package/esm/components/ShuttleSearchBox.js.map +7 -0
- package/esm/components/ShuttleSource.js +125 -129
- package/esm/components/ShuttleSource.js.map +7 -0
- package/esm/components/ShuttleTarget.js +68 -89
- package/esm/components/ShuttleTarget.js.map +7 -0
- package/esm/components/VirtualizedItem.js +15 -33
- package/esm/components/VirtualizedItem.js.map +7 -0
- package/esm/components/VirtualizedList.js +50 -75
- package/esm/components/VirtualizedList.js.map +7 -0
- package/esm/components/VirtualizedSortableList.js +17 -32
- package/esm/components/VirtualizedSortableList.js.map +7 -0
- package/esm/helper.js +43 -67
- package/esm/helper.js.map +7 -0
- package/esm/index.js +9 -2
- package/esm/index.js.map +7 -0
- package/esm/tests/utils.js +1189 -0
- package/esm/tests/utils.js.map +7 -0
- package/esm/updateShuttleStateFromProps.js +39 -58
- package/esm/updateShuttleStateFromProps.js.map +7 -0
- package/esm/utils.js +12 -18
- package/esm/utils.js.map +7 -0
- package/esm/withProviders.js +14 -20
- package/esm/withProviders.js.map +7 -0
- package/package.json +11 -11
- package/types/AnimationState.d.ts +3 -2
- package/types/DSShuttle.d.ts +1 -1
- package/types/SearchState.d.ts +3 -2
- package/types/ShuttleImpl.d.ts +3 -2
- package/types/ShuttleRenderer.d.ts +1 -0
- package/types/ShuttleState.d.ts +3 -2
- package/types/components/LoadingIndicator.d.ts +1 -0
- package/types/components/OverflowList.d.ts +1 -0
- package/types/components/ShuttleBreadcrumb.d.ts +1 -0
- package/types/components/ShuttleInfiniteScrollIndicator.d.ts +1 -0
- package/types/components/ShuttleListItem/ShuttleListItem.d.ts +1 -0
- package/types/components/ShuttleListItem/ShuttleSourceListItem.d.ts +1 -0
- package/types/components/ShuttleListItem/ShuttleTargetListItem.d.ts +1 -0
- package/types/components/ShuttleListPanel.d.ts +1 -0
- package/types/components/ShuttleSearchBox.d.ts +3 -1
- package/types/components/ShuttleSource.d.ts +1 -0
- package/types/components/ShuttleTarget.d.ts +1 -0
- package/types/components/VirtualizedItem.d.ts +1 -0
- package/types/components/VirtualizedList.d.ts +1 -0
- package/types/components/VirtualizedSortableList.d.ts +1 -0
- package/types/index.d.ts +1 -1
- package/types/updateShuttleStateFromProps.d.ts +3 -1
- package/types/withProviders.d.ts +1 -0
package/esm/ShuttleRenderer.js
CHANGED
|
@@ -1,132 +1,115 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useCallback, useContext } from "react";
|
|
3
|
+
import { ShuttleSource } from "./components/ShuttleSource";
|
|
4
|
+
import { ShuttleTarget } from "./components/ShuttleTarget";
|
|
5
|
+
import { ShuttleContainer } from "./classedComponents";
|
|
6
|
+
import { AnimationState } from "./AnimationState";
|
|
7
|
+
const noop = () => {
|
|
8
|
+
};
|
|
9
|
+
function ShuttleRenderer({
|
|
10
|
+
containerProps,
|
|
11
|
+
onNavigateOnTargetTo = noop,
|
|
12
|
+
onNavigateOnSourceTo = noop,
|
|
13
|
+
onMoveItemToSource = noop,
|
|
14
|
+
onMoveItemToTarget = noop,
|
|
15
|
+
onClearMovedItems = noop,
|
|
16
|
+
onMoveCheckedItems = noop,
|
|
17
|
+
onClearCheckedItems = noop,
|
|
18
|
+
onToggleSearch = noop,
|
|
19
|
+
onSearch = noop,
|
|
20
|
+
onSearchClose = noop,
|
|
21
|
+
onSearchOpen = noop,
|
|
22
|
+
searching = false,
|
|
23
|
+
onCheckItem = noop,
|
|
24
|
+
hierarchy = [],
|
|
25
|
+
hierarchyDest = [],
|
|
26
|
+
checkedItems = [],
|
|
27
|
+
sourceItems = [],
|
|
28
|
+
targetItems = [],
|
|
29
|
+
sourceEmptyMessage,
|
|
30
|
+
targetEmptyMessage,
|
|
31
|
+
composeTargetItemProps,
|
|
32
|
+
composeSourceItemProps,
|
|
33
|
+
targetSortable,
|
|
34
|
+
sourceSortable,
|
|
35
|
+
onSourceSortEnd,
|
|
36
|
+
onTargetSortEnd,
|
|
37
|
+
loadingSource = false,
|
|
38
|
+
loadingTarget = false,
|
|
39
|
+
onGetMoreItems = () => {
|
|
40
|
+
},
|
|
41
|
+
moreItemsLoading = false,
|
|
42
|
+
hasNextPage = false,
|
|
43
|
+
...otherProps
|
|
44
|
+
}) {
|
|
45
|
+
const { setIsMoving, setIsDrillingDown, setIsMovingBack, reset } = useContext(AnimationState.Context);
|
|
46
|
+
const removeAnimationState = useCallback(() => setTimeout(() => reset(), 500));
|
|
47
|
+
return /* @__PURE__ */ React2.createElement(ShuttleContainer, {
|
|
48
|
+
"data-testid": "em-ds-shuttle",
|
|
49
|
+
...containerProps
|
|
50
|
+
}, /* @__PURE__ */ React2.createElement(ShuttleSource, {
|
|
51
|
+
...otherProps,
|
|
52
|
+
checkedItems,
|
|
47
53
|
composeSourceItemProps,
|
|
48
|
-
|
|
54
|
+
emptyMessage: sourceEmptyMessage,
|
|
55
|
+
hierarchy,
|
|
56
|
+
items: sourceItems,
|
|
57
|
+
onCheckItem,
|
|
58
|
+
onClearCheckedItems,
|
|
59
|
+
onMoveCheckedItems: (item) => {
|
|
60
|
+
setIsMoving(true);
|
|
61
|
+
onMoveCheckedItems(item);
|
|
62
|
+
},
|
|
63
|
+
onMoveItem: (item) => {
|
|
64
|
+
setIsMoving(true);
|
|
65
|
+
onMoveItemToTarget(item);
|
|
66
|
+
removeAnimationState();
|
|
67
|
+
},
|
|
68
|
+
onNavigateTo: (item, direction = "down") => {
|
|
69
|
+
const indexInHierarchy = hierarchy.findIndex((hItem) => hItem.id === item.id);
|
|
70
|
+
setIsDrillingDown(indexInHierarchy === -1);
|
|
71
|
+
onNavigateOnSourceTo(item, direction);
|
|
72
|
+
},
|
|
73
|
+
onSearch,
|
|
74
|
+
onSearchClose,
|
|
75
|
+
onSearchOpen,
|
|
76
|
+
onSortEnd: onSourceSortEnd,
|
|
77
|
+
onToggleSearch,
|
|
78
|
+
searching,
|
|
49
79
|
sourceSortable,
|
|
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
|
-
onMoveCheckedItems: item => {
|
|
79
|
-
setIsMoving(true);
|
|
80
|
-
onMoveCheckedItems(item);
|
|
81
|
-
},
|
|
82
|
-
onMoveItem: item => {
|
|
83
|
-
setIsMoving(true);
|
|
84
|
-
onMoveItemToTarget(item);
|
|
85
|
-
removeAnimationState();
|
|
86
|
-
},
|
|
87
|
-
onNavigateTo: function (item) {
|
|
88
|
-
let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'down';
|
|
89
|
-
const indexInHierarchy = hierarchy.findIndex(hItem => hItem.id === item.id);
|
|
90
|
-
setIsDrillingDown(indexInHierarchy === -1);
|
|
91
|
-
onNavigateOnSourceTo(item, direction);
|
|
92
|
-
},
|
|
93
|
-
onSearch: onSearch,
|
|
94
|
-
onSearchClose: onSearchClose,
|
|
95
|
-
onSearchOpen: onSearchOpen,
|
|
96
|
-
onSortEnd: onSourceSortEnd,
|
|
97
|
-
onToggleSearch: onToggleSearch,
|
|
98
|
-
searching: searching,
|
|
99
|
-
sourceSortable: sourceSortable,
|
|
100
|
-
loading: loadingSource,
|
|
101
|
-
onGetMoreItems: onGetMoreItems,
|
|
102
|
-
moreItemsLoading: moreItemsLoading,
|
|
103
|
-
hasNextPage: hasNextPage
|
|
104
|
-
})), /*#__PURE__*/jsx(ShuttleTarget, _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
105
|
-
composeTargetItemProps: composeTargetItemProps,
|
|
106
|
-
emptyMessage: targetEmptyMessage,
|
|
107
|
-
hierarchy: hierarchyDest,
|
|
108
|
-
items: targetItems,
|
|
109
|
-
onClearMovedItems: () => {
|
|
110
|
-
setIsMovingBack(true);
|
|
111
|
-
removeAnimationState();
|
|
112
|
-
onClearMovedItems();
|
|
113
|
-
},
|
|
114
|
-
onMoveItem: item => {
|
|
115
|
-
setIsMovingBack(true);
|
|
116
|
-
removeAnimationState();
|
|
117
|
-
onMoveItemToSource(item);
|
|
118
|
-
},
|
|
119
|
-
onNavigateTo: function (item) {
|
|
120
|
-
let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'down';
|
|
121
|
-
const indexInHierarchy = hierarchyDest.findIndex(hItem => hItem.id === item.id);
|
|
122
|
-
setIsDrillingDown(indexInHierarchy === -1);
|
|
123
|
-
onNavigateOnTargetTo(item, direction);
|
|
124
|
-
},
|
|
125
|
-
onSortEnd: onTargetSortEnd,
|
|
126
|
-
targetSortable: targetSortable,
|
|
127
|
-
loading: loadingTarget
|
|
128
|
-
}))]
|
|
80
|
+
loading: loadingSource,
|
|
81
|
+
onGetMoreItems,
|
|
82
|
+
moreItemsLoading,
|
|
83
|
+
hasNextPage
|
|
84
|
+
}), /* @__PURE__ */ React2.createElement(ShuttleTarget, {
|
|
85
|
+
...otherProps,
|
|
86
|
+
composeTargetItemProps,
|
|
87
|
+
emptyMessage: targetEmptyMessage,
|
|
88
|
+
hierarchy: hierarchyDest,
|
|
89
|
+
items: targetItems,
|
|
90
|
+
onClearMovedItems: () => {
|
|
91
|
+
setIsMovingBack(true);
|
|
92
|
+
removeAnimationState();
|
|
93
|
+
onClearMovedItems();
|
|
94
|
+
},
|
|
95
|
+
onMoveItem: (item) => {
|
|
96
|
+
setIsMovingBack(true);
|
|
97
|
+
removeAnimationState();
|
|
98
|
+
onMoveItemToSource(item);
|
|
99
|
+
},
|
|
100
|
+
onNavigateTo: (item, direction = "down") => {
|
|
101
|
+
const indexInHierarchy = hierarchyDest.findIndex((hItem) => hItem.id === item.id);
|
|
102
|
+
setIsDrillingDown(indexInHierarchy === -1);
|
|
103
|
+
onNavigateOnTargetTo(item, direction);
|
|
104
|
+
},
|
|
105
|
+
onSortEnd: onTargetSortEnd,
|
|
106
|
+
targetSortable,
|
|
107
|
+
loading: loadingTarget
|
|
129
108
|
}));
|
|
130
109
|
}
|
|
131
|
-
|
|
132
|
-
export {
|
|
110
|
+
var ShuttleRenderer_default = ShuttleRenderer;
|
|
111
|
+
export {
|
|
112
|
+
ShuttleRenderer,
|
|
113
|
+
ShuttleRenderer_default as default
|
|
114
|
+
};
|
|
115
|
+
//# sourceMappingURL=ShuttleRenderer.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ShuttleRenderer.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useCallback, useContext } from 'react';\nimport { ShuttleSource } from './components/ShuttleSource';\nimport { ShuttleTarget } from './components/ShuttleTarget';\nimport { ShuttleContainer } from './classedComponents';\nimport { AnimationState } from './AnimationState';\n\n// todo: clean methods on jsx\nconst noop = () => {};\nfunction ShuttleRenderer({\n containerProps,\n onNavigateOnTargetTo = noop,\n onNavigateOnSourceTo = noop,\n onMoveItemToSource = noop,\n onMoveItemToTarget = noop,\n onClearMovedItems = noop,\n onMoveCheckedItems = noop,\n onClearCheckedItems = noop,\n onToggleSearch = noop,\n onSearch = noop,\n onSearchClose = noop,\n onSearchOpen = noop,\n searching = false,\n onCheckItem = noop,\n hierarchy = [],\n hierarchyDest = [],\n checkedItems = [],\n sourceItems = [],\n targetItems = [],\n sourceEmptyMessage,\n targetEmptyMessage,\n composeTargetItemProps,\n composeSourceItemProps,\n targetSortable,\n sourceSortable,\n onSourceSortEnd,\n onTargetSortEnd,\n loadingSource = false,\n loadingTarget = false,\n onGetMoreItems = () => {},\n moreItemsLoading = false,\n hasNextPage = false,\n ...otherProps\n}) {\n const { setIsMoving, setIsDrillingDown, setIsMovingBack, reset } = useContext(\n AnimationState.Context,\n );\n\n const removeAnimationState = useCallback(() =>\n setTimeout(() => reset(), 500),\n );\n\n return (\n <ShuttleContainer data-testid=\"em-ds-shuttle\" {...containerProps}>\n <ShuttleSource\n {...otherProps}\n checkedItems={checkedItems}\n composeSourceItemProps={composeSourceItemProps}\n emptyMessage={sourceEmptyMessage}\n hierarchy={hierarchy}\n items={sourceItems}\n onCheckItem={onCheckItem}\n onClearCheckedItems={onClearCheckedItems}\n onMoveCheckedItems={(item) => {\n setIsMoving(true);\n onMoveCheckedItems(item);\n }}\n onMoveItem={(item) => {\n setIsMoving(true);\n onMoveItemToTarget(item);\n removeAnimationState();\n }}\n onNavigateTo={(item, direction = 'down') => {\n const indexInHierarchy = hierarchy.findIndex(\n (hItem) => hItem.id === item.id,\n );\n setIsDrillingDown(indexInHierarchy === -1);\n onNavigateOnSourceTo(item, direction);\n }}\n onSearch={onSearch}\n onSearchClose={onSearchClose}\n onSearchOpen={onSearchOpen}\n onSortEnd={onSourceSortEnd}\n onToggleSearch={onToggleSearch}\n searching={searching}\n sourceSortable={sourceSortable}\n loading={loadingSource}\n onGetMoreItems={onGetMoreItems}\n moreItemsLoading={moreItemsLoading}\n hasNextPage={hasNextPage}\n />\n <ShuttleTarget\n {...otherProps}\n composeTargetItemProps={composeTargetItemProps}\n emptyMessage={targetEmptyMessage}\n hierarchy={hierarchyDest}\n items={targetItems}\n onClearMovedItems={() => {\n setIsMovingBack(true);\n removeAnimationState();\n onClearMovedItems();\n }}\n onMoveItem={(item) => {\n setIsMovingBack(true);\n removeAnimationState();\n onMoveItemToSource(item);\n }}\n onNavigateTo={(item, direction = 'down') => {\n const indexInHierarchy = hierarchyDest.findIndex(\n (hItem) => hItem.id === item.id,\n );\n setIsDrillingDown(indexInHierarchy === -1);\n onNavigateOnTargetTo(item, direction);\n }}\n onSortEnd={onTargetSortEnd}\n targetSortable={targetSortable}\n loading={loadingTarget}\n />\n </ShuttleContainer>\n );\n}\n\nexport { ShuttleRenderer };\nexport default ShuttleRenderer;\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AAGA,MAAM,OAAO,MAAM;AAAA;AACnB,yBAAyB;AAAA,EACvB;AAAA,EACA,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,iBAAiB,MAAM;AAAA;AAAA,EACvB,mBAAmB;AAAA,EACnB,cAAc;AAAA,KACX;AAAA,GACF;AACD,QAAM,EAAE,aAAa,mBAAmB,iBAAiB,UAAU,WACjE,eAAe;AAGjB,QAAM,uBAAuB,YAAY,MACvC,WAAW,MAAM,SAAS;AAG5B,SACE,qCAAC,kBAAD;AAAA,IAAkB,eAAY;AAAA,OAAoB;AAAA,KAChD,qCAAC,eAAD;AAAA,OACM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,oBAAoB,CAAC,SAAS;AAC5B,kBAAY;AACZ,yBAAmB;AAAA;AAAA,IAErB,YAAY,CAAC,SAAS;AACpB,kBAAY;AACZ,yBAAmB;AACnB;AAAA;AAAA,IAEF,cAAc,CAAC,MAAM,YAAY,WAAW;AAC1C,YAAM,mBAAmB,UAAU,UACjC,CAAC,UAAU,MAAM,OAAO,KAAK;AAE/B,wBAAkB,qBAAqB;AACvC,2BAAqB,MAAM;AAAA;AAAA,IAE7B;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,MAEF,qCAAC,eAAD;AAAA,OACM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX,OAAO;AAAA,IACP,mBAAmB,MAAM;AACvB,sBAAgB;AAChB;AACA;AAAA;AAAA,IAEF,YAAY,CAAC,SAAS;AACpB,sBAAgB;AAChB;AACA,yBAAmB;AAAA;AAAA,IAErB,cAAc,CAAC,MAAM,YAAY,WAAW;AAC1C,YAAM,mBAAmB,cAAc,UACrC,CAAC,UAAU,MAAM,OAAO,KAAK;AAE/B,wBAAkB,qBAAqB;AACvC,2BAAqB,MAAM;AAAA;AAAA,IAE7B,WAAW;AAAA,IACX;AAAA,IACA,SAAS;AAAA;AAAA;AAOjB,IAAO,0BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/ShuttleState.js
CHANGED
|
@@ -1,74 +1,55 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import { getItemsById, pipe } from './helper.js';
|
|
7
|
-
import { moveItem, resetMovedItems, navigateTo, resetCheckedItems, toggleItemSelection } from './Shuttle.actions.js';
|
|
8
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import createContainer from "constate";
|
|
4
|
+
import { getItemsById, pipe } from "./helper";
|
|
5
|
+
import * as actions from "./Shuttle.actions";
|
|
9
6
|
function useShuttleState() {
|
|
10
7
|
const [shuttleState, setShuttleState] = useState({
|
|
11
8
|
checkedItems: [],
|
|
12
9
|
movedItems: {},
|
|
13
|
-
hierarchy: [{
|
|
14
|
-
|
|
15
|
-
id: null
|
|
16
|
-
}],
|
|
17
|
-
hierarchyDest: [{
|
|
18
|
-
name: 'Added users',
|
|
19
|
-
id: null
|
|
20
|
-
}]
|
|
10
|
+
hierarchy: [{ name: "Category", id: null }],
|
|
11
|
+
hierarchyDest: [{ name: "Added users", id: null }]
|
|
21
12
|
});
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
function setMovedItems() {
|
|
26
|
-
let itemsIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
27
|
-
let items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
13
|
+
const setState = (state) => setShuttleState(state(shuttleState));
|
|
14
|
+
function setMovedItems(itemsIds = [], items = []) {
|
|
28
15
|
const itemsToMove = getItemsById(itemsIds, items);
|
|
29
|
-
const pipeActions = itemsToMove.map(item => moveItem(item));
|
|
30
|
-
setState(pipe([resetMovedItems(), ...pipeActions]));
|
|
16
|
+
const pipeActions = itemsToMove.map((item) => actions.moveItem(item, true));
|
|
17
|
+
setState(pipe([actions.resetMovedItems(), ...pipeActions]));
|
|
31
18
|
}
|
|
32
|
-
|
|
33
19
|
function navigate(item, dest) {
|
|
34
|
-
setState(pipe([navigateTo(item, dest), resetCheckedItems()]));
|
|
20
|
+
setState(pipe([actions.navigateTo(item, dest), actions.resetCheckedItems()]));
|
|
35
21
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
setState(resetCheckedItems());
|
|
22
|
+
function resetCheckedItems() {
|
|
23
|
+
setState(actions.resetCheckedItems());
|
|
39
24
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
setState(pipe([navigateTo({
|
|
43
|
-
id: null
|
|
44
|
-
}, true), resetMovedItems()]));
|
|
25
|
+
function resetMovedItems() {
|
|
26
|
+
setState(pipe([actions.navigateTo({ id: null }, true), actions.resetMovedItems()]));
|
|
45
27
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
setState(pipe([moveItem(item), resetCheckedItems()]));
|
|
28
|
+
function moveItem(item, dest) {
|
|
29
|
+
setState(pipe([actions.moveItem(item, dest), actions.resetCheckedItems()]));
|
|
49
30
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
setState(toggleItemSelection(item.id));
|
|
31
|
+
function toggleItemSelection(item) {
|
|
32
|
+
setState(actions.toggleItemSelection(item.id));
|
|
53
33
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
setState(pipe([...pipeActions, resetCheckedItems$1()]));
|
|
34
|
+
function moveCheckedItems(items, dest = true) {
|
|
35
|
+
const pipeActions = items.map((item) => moveItem(item, dest));
|
|
36
|
+
setState(pipe([...pipeActions, resetCheckedItems()]));
|
|
58
37
|
}
|
|
59
|
-
|
|
60
38
|
return {
|
|
61
39
|
state: shuttleState,
|
|
62
|
-
toggleItemSelection
|
|
40
|
+
toggleItemSelection,
|
|
63
41
|
moveCheckedItems,
|
|
64
|
-
moveItem
|
|
65
|
-
resetMovedItems
|
|
66
|
-
resetCheckedItems
|
|
42
|
+
moveItem,
|
|
43
|
+
resetMovedItems,
|
|
44
|
+
resetCheckedItems,
|
|
67
45
|
navigate,
|
|
68
46
|
setMovedItems
|
|
69
47
|
};
|
|
70
48
|
}
|
|
71
|
-
|
|
72
|
-
var
|
|
73
|
-
|
|
74
|
-
|
|
49
|
+
const useShuttleStateHOC = createContainer(useShuttleState, (value) => [value.state]);
|
|
50
|
+
var ShuttleState_default = useShuttleStateHOC;
|
|
51
|
+
export {
|
|
52
|
+
useShuttleStateHOC as ShuttleState,
|
|
53
|
+
ShuttleState_default as default
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=ShuttleState.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ShuttleState.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState } from 'react';\nimport createContainer from 'constate';\nimport { getItemsById, pipe } from './helper';\nimport * as actions from './Shuttle.actions';\n\nfunction useShuttleState() {\n const [shuttleState, setShuttleState] = useState({\n checkedItems: [],\n movedItems: {},\n hierarchy: [{ name: 'Category', id: null }],\n hierarchyDest: [{ name: 'Added users', id: null }],\n });\n\n const setState = state => setShuttleState(state(shuttleState));\n\n function setMovedItems(itemsIds = [], items = []) {\n const itemsToMove = getItemsById(itemsIds, items);\n const pipeActions = itemsToMove.map(item => actions.moveItem(item, true));\n setState(pipe([actions.resetMovedItems(), ...pipeActions]));\n }\n\n function navigate(item, dest) {\n setState(\n pipe([actions.navigateTo(item, dest), actions.resetCheckedItems()]),\n );\n }\n\n function resetCheckedItems() {\n setState(actions.resetCheckedItems());\n }\n\n function resetMovedItems() {\n setState(\n pipe([actions.navigateTo({ id: null }, true), actions.resetMovedItems()]),\n );\n }\n\n function moveItem(item, dest) {\n setState(pipe([actions.moveItem(item, dest), actions.resetCheckedItems()]));\n }\n\n function toggleItemSelection(item) {\n setState(actions.toggleItemSelection(item.id));\n }\n\n function moveCheckedItems(items, dest = true) {\n const pipeActions = items.map(item => moveItem(item, dest));\n setState(pipe([...pipeActions, resetCheckedItems()]));\n }\n\n return {\n state: shuttleState,\n toggleItemSelection,\n moveCheckedItems,\n moveItem,\n resetMovedItems,\n resetCheckedItems,\n navigate,\n setMovedItems,\n };\n}\n\nconst useShuttleStateHOC = createContainer(useShuttleState, value => [value.state]);\nexport { useShuttleStateHOC as ShuttleState };\nexport default useShuttleStateHOC;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,2BAA2B;AACzB,QAAM,CAAC,cAAc,mBAAmB,SAAS;AAAA,IAC/C,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,WAAW,CAAC,EAAE,MAAM,YAAY,IAAI;AAAA,IACpC,eAAe,CAAC,EAAE,MAAM,eAAe,IAAI;AAAA;AAG7C,QAAM,WAAW,WAAS,gBAAgB,MAAM;AAEhD,yBAAuB,WAAW,IAAI,QAAQ,IAAI;AAChD,UAAM,cAAc,aAAa,UAAU;AAC3C,UAAM,cAAc,YAAY,IAAI,UAAQ,QAAQ,SAAS,MAAM;AACnE,aAAS,KAAK,CAAC,QAAQ,mBAAmB,GAAG;AAAA;AAG/C,oBAAkB,MAAM,MAAM;AAC5B,aACE,KAAK,CAAC,QAAQ,WAAW,MAAM,OAAO,QAAQ;AAAA;AAIlD,+BAA6B;AAC3B,aAAS,QAAQ;AAAA;AAGnB,6BAA2B;AACzB,aACE,KAAK,CAAC,QAAQ,WAAW,EAAE,IAAI,QAAQ,OAAO,QAAQ;AAAA;AAI1D,oBAAkB,MAAM,MAAM;AAC5B,aAAS,KAAK,CAAC,QAAQ,SAAS,MAAM,OAAO,QAAQ;AAAA;AAGvD,+BAA6B,MAAM;AACjC,aAAS,QAAQ,oBAAoB,KAAK;AAAA;AAG5C,4BAA0B,OAAO,OAAO,MAAM;AAC5C,UAAM,cAAc,MAAM,IAAI,UAAQ,SAAS,MAAM;AACrD,aAAS,KAAK,CAAC,GAAG,aAAa;AAAA;AAGjC,SAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAIJ,MAAM,qBAAqB,gBAAgB,iBAAiB,WAAS,CAAC,MAAM;AAE5E,IAAO,uBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,77 +1,49 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
2
|
const itemAnimationDuration = 300;
|
|
3
3
|
const listAnimationDuration = 300;
|
|
4
|
-
const xPosMovement = 500;
|
|
5
|
-
|
|
4
|
+
const xPosMovement = 500;
|
|
6
5
|
const breadcrumbDuration = 200;
|
|
7
6
|
const xBreadcrumbPos = 300;
|
|
8
7
|
const animationConfig = {
|
|
9
8
|
slideRight: {
|
|
10
|
-
from: {
|
|
11
|
-
|
|
12
|
-
},
|
|
13
|
-
to: {
|
|
14
|
-
transform: "translate3d(".concat(xPosMovement, "px,0,0)")
|
|
15
|
-
}
|
|
9
|
+
from: { transform: "translate3d(0,0,0)" },
|
|
10
|
+
to: { transform: `translate3d(${xPosMovement}px,0,0)` }
|
|
16
11
|
},
|
|
17
12
|
slideLeft: {
|
|
18
|
-
from: {
|
|
19
|
-
|
|
20
|
-
},
|
|
21
|
-
to: {
|
|
22
|
-
transform: "translate3d(".concat(-xPosMovement, "px,0,0)")
|
|
23
|
-
}
|
|
13
|
+
from: { transform: "translate3d(0,0,0)" },
|
|
14
|
+
to: { transform: `translate3d(${-xPosMovement}px,0,0)` }
|
|
24
15
|
},
|
|
25
|
-
moveItem: isMovingLeft => ({
|
|
26
|
-
config: {
|
|
27
|
-
|
|
28
|
-
},
|
|
29
|
-
enter: {
|
|
30
|
-
opacity: 1,
|
|
31
|
-
transform: "translate3d(".concat(0, "px,0,0)")
|
|
32
|
-
},
|
|
16
|
+
moveItem: (isMovingLeft) => ({
|
|
17
|
+
config: { duration: itemAnimationDuration },
|
|
18
|
+
enter: { opacity: 1, transform: `translate3d(${0}px,0,0)` },
|
|
33
19
|
from: {
|
|
34
20
|
opacity: 1,
|
|
35
|
-
transform:
|
|
21
|
+
transform: `translate3d(${isMovingLeft ? -xPosMovement : xPosMovement}px,0,0)`
|
|
36
22
|
},
|
|
37
23
|
leave: {
|
|
38
|
-
transform:
|
|
24
|
+
transform: `translate3d(${isMovingLeft ? -xPosMovement : xPosMovement}px,0,0)`
|
|
39
25
|
}
|
|
40
26
|
}),
|
|
41
|
-
moveList: isDrillingDown => ({
|
|
42
|
-
config: {
|
|
43
|
-
|
|
44
|
-
},
|
|
45
|
-
enter: {
|
|
46
|
-
opacity: 1,
|
|
47
|
-
transform: 'translate3d(0,0,0)'
|
|
48
|
-
},
|
|
27
|
+
moveList: (isDrillingDown) => ({
|
|
28
|
+
config: { duration: listAnimationDuration },
|
|
29
|
+
enter: { opacity: 1, transform: "translate3d(0,0,0)" },
|
|
49
30
|
from: {
|
|
50
31
|
opacity: 0,
|
|
51
|
-
transform:
|
|
32
|
+
transform: `translate3d(0px,${isDrillingDown ? xPosMovement : -xPosMovement}px,0)`
|
|
52
33
|
},
|
|
53
34
|
leave: {
|
|
54
35
|
opacity: 0,
|
|
55
|
-
transform:
|
|
36
|
+
transform: `translate3d(0,${isDrillingDown ? -xPosMovement : xPosMovement}px,0)`
|
|
56
37
|
}
|
|
57
38
|
}),
|
|
58
39
|
breadcrumb: () => ({
|
|
59
|
-
config: {
|
|
60
|
-
|
|
61
|
-
},
|
|
62
|
-
|
|
63
|
-
opacity: 1,
|
|
64
|
-
transform: "translate3d(".concat(0, "px,0,0)")
|
|
65
|
-
},
|
|
66
|
-
from: {
|
|
67
|
-
opacity: 0,
|
|
68
|
-
transform: "translate3d(".concat(xBreadcrumbPos, "px,0px,0)")
|
|
69
|
-
},
|
|
70
|
-
leave: {
|
|
71
|
-
opacity: 0,
|
|
72
|
-
transform: "translate3d(".concat(xBreadcrumbPos, "px,0,0)")
|
|
73
|
-
}
|
|
40
|
+
config: { duration: breadcrumbDuration },
|
|
41
|
+
enter: { opacity: 1, transform: `translate3d(${0}px,0,0)` },
|
|
42
|
+
from: { opacity: 0, transform: `translate3d(${xBreadcrumbPos}px,0px,0)` },
|
|
43
|
+
leave: { opacity: 0, transform: `translate3d(${xBreadcrumbPos}px,0,0)` }
|
|
74
44
|
})
|
|
75
45
|
};
|
|
76
|
-
|
|
77
|
-
|
|
46
|
+
export {
|
|
47
|
+
animationConfig
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=animationConfig.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/animation/animationConfig.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// shuttle list and items constants\nconst itemAnimationDuration = 300;\nconst listAnimationDuration = 300;\nconst xPosMovement = 500;\n\n// breadcrumb constants\nconst breadcrumbDuration = 200;\nconst xBreadcrumbPos = 300;\n\nexport const animationConfig = {\n slideRight: {\n from: { transform: 'translate3d(0,0,0)' },\n to: { transform: `translate3d(${xPosMovement}px,0,0)` },\n },\n slideLeft: {\n from: { transform: 'translate3d(0,0,0)' },\n to: { transform: `translate3d(${-xPosMovement}px,0,0)` },\n },\n moveItem: isMovingLeft => ({\n config: { duration: itemAnimationDuration },\n enter: { opacity: 1, transform: `translate3d(${0}px,0,0)` },\n from: {\n opacity: 1,\n transform: `translate3d(${\n isMovingLeft ? -xPosMovement : xPosMovement\n }px,0,0)`,\n },\n leave: {\n transform: `translate3d(${\n isMovingLeft ? -xPosMovement : xPosMovement\n }px,0,0)`,\n },\n }),\n moveList: isDrillingDown => ({\n config: { duration: listAnimationDuration },\n enter: { opacity: 1, transform: 'translate3d(0,0,0)' },\n from: {\n opacity: 0,\n transform: `translate3d(0px,${\n isDrillingDown ? xPosMovement : -xPosMovement\n }px,0)`,\n },\n leave: {\n opacity: 0,\n transform: `translate3d(0,${\n isDrillingDown ? -xPosMovement : xPosMovement\n }px,0)`,\n },\n }),\n breadcrumb: () => ({\n config: { duration: breadcrumbDuration },\n enter: { opacity: 1, transform: `translate3d(${0}px,0,0)` },\n from: { opacity: 0, transform: `translate3d(${xBreadcrumbPos}px,0px,0)` },\n leave: { opacity: 0, transform: `translate3d(${xBreadcrumbPos}px,0,0)` },\n }),\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAC9B,MAAM,eAAe;AAGrB,MAAM,qBAAqB;AAC3B,MAAM,iBAAiB;AAEhB,MAAM,kBAAkB;AAAA,EAC7B,YAAY;AAAA,IACV,MAAM,EAAE,WAAW;AAAA,IACnB,IAAI,EAAE,WAAW,eAAe;AAAA;AAAA,EAElC,WAAW;AAAA,IACT,MAAM,EAAE,WAAW;AAAA,IACnB,IAAI,EAAE,WAAW,eAAe,CAAC;AAAA;AAAA,EAEnC,UAAU,kBAAiB;AAAA,IACzB,QAAQ,EAAE,UAAU;AAAA,IACpB,OAAO,EAAE,SAAS,GAAG,WAAW,eAAe;AAAA,IAC/C,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW,eACT,eAAe,CAAC,eAAe;AAAA;AAAA,IAGnC,OAAO;AAAA,MACL,WAAW,eACT,eAAe,CAAC,eAAe;AAAA;AAAA;AAAA,EAIrC,UAAU,oBAAmB;AAAA,IAC3B,QAAQ,EAAE,UAAU;AAAA,IACpB,OAAO,EAAE,SAAS,GAAG,WAAW;AAAA,IAChC,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW,mBACT,iBAAiB,eAAe,CAAC;AAAA;AAAA,IAGrC,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WAAW,iBACT,iBAAiB,CAAC,eAAe;AAAA;AAAA;AAAA,EAIvC,YAAY,MAAO;AAAA,IACjB,QAAQ,EAAE,UAAU;AAAA,IACpB,OAAO,EAAE,SAAS,GAAG,WAAW,eAAe;AAAA,IAC/C,MAAM,EAAE,SAAS,GAAG,WAAW,eAAe;AAAA,IAC9C,OAAO,EAAE,SAAS,GAAG,WAAW,eAAe;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/classedComponents.js
CHANGED
|
@@ -1,51 +1,43 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
const blockName =
|
|
7
|
-
const headerBlockName =
|
|
8
|
-
const listBlockName =
|
|
9
|
-
const footerBlockName =
|
|
10
|
-
const ShuttleContainer = aggregatedClasses(
|
|
11
|
-
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
const EmptyMessage = aggregatedClasses('span')(listBlockName, 'empty-message');
|
|
45
|
-
const LoadingList = aggregatedClasses('div')(listBlockName, 'loading-list'); // footer
|
|
46
|
-
|
|
47
|
-
const ShuttleFooter = aggregatedClasses('div')(footerBlockName);
|
|
48
|
-
const ShuttleFooterActions = aggregatedClasses('div')(footerBlockName, 'actions');
|
|
49
|
-
const ShuttleFooterCounter = aggregatedClasses('span')(footerBlockName, 'counter');
|
|
50
|
-
|
|
51
|
-
export { EmptyMessage, LoadingList, Overflow, ShuttleContainer, ShuttleFooter, ShuttleFooterActions, ShuttleFooterCounter, ShuttleHeader, ShuttleHeaderBreadcrumb, ShuttleHeaderSearchToggle, ShuttleList, ShuttleListPanel, ShuttleWrapper };
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { DSButton } from "@elliemae/ds-button";
|
|
3
|
+
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
4
|
+
import { ShuttleBreadcrumb } from "./components/ShuttleBreadcrumb";
|
|
5
|
+
import { OverflowList } from "./components/OverflowList";
|
|
6
|
+
const blockName = "shuttle";
|
|
7
|
+
const headerBlockName = `${blockName}-header`;
|
|
8
|
+
const listBlockName = `${blockName}-list`;
|
|
9
|
+
const footerBlockName = `${blockName}-footer`;
|
|
10
|
+
const ShuttleContainer = aggregatedClasses("div")(blockName);
|
|
11
|
+
const ShuttleWrapper = aggregatedClasses("div")(`${blockName}-wrapper`);
|
|
12
|
+
const ShuttleHeader = aggregatedClasses("div")(headerBlockName);
|
|
13
|
+
const ShuttleHeaderBreadcrumb = aggregatedClasses(ShuttleBreadcrumb)(headerBlockName, "breadcrumb");
|
|
14
|
+
const ShuttleHeaderSearchToggle = aggregatedClasses(DSButton)(headerBlockName, "search-toggle");
|
|
15
|
+
const ShuttleList = aggregatedClasses("div")(listBlockName, null, ({ showPulse }) => ({
|
|
16
|
+
"show-pulse": showPulse
|
|
17
|
+
}));
|
|
18
|
+
const ShuttleListPanel = aggregatedClasses("div")(listBlockName, "panel", ({ open }) => ({ open }));
|
|
19
|
+
const Overflow = aggregatedClasses(OverflowList)(listBlockName, "overflow", ({ empty, searching }) => ({
|
|
20
|
+
empty,
|
|
21
|
+
searching
|
|
22
|
+
}));
|
|
23
|
+
const EmptyMessage = aggregatedClasses("span")(listBlockName, "empty-message");
|
|
24
|
+
const LoadingList = aggregatedClasses("div")(listBlockName, "loading-list");
|
|
25
|
+
const ShuttleFooter = aggregatedClasses("div")(footerBlockName);
|
|
26
|
+
const ShuttleFooterActions = aggregatedClasses("div")(footerBlockName, "actions");
|
|
27
|
+
const ShuttleFooterCounter = aggregatedClasses("span")(footerBlockName, "counter");
|
|
28
|
+
export {
|
|
29
|
+
EmptyMessage,
|
|
30
|
+
LoadingList,
|
|
31
|
+
Overflow,
|
|
32
|
+
ShuttleContainer,
|
|
33
|
+
ShuttleFooter,
|
|
34
|
+
ShuttleFooterActions,
|
|
35
|
+
ShuttleFooterCounter,
|
|
36
|
+
ShuttleHeader,
|
|
37
|
+
ShuttleHeaderBreadcrumb,
|
|
38
|
+
ShuttleHeaderSearchToggle,
|
|
39
|
+
ShuttleList,
|
|
40
|
+
ShuttleListPanel,
|
|
41
|
+
ShuttleWrapper
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=classedComponents.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/classedComponents.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButton } from '@elliemae/ds-button';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { ShuttleBreadcrumb } from './components/ShuttleBreadcrumb';\nimport { OverflowList } from './components/OverflowList';\n\n// block names\nconst blockName = 'shuttle';\nconst headerBlockName = `${blockName}-header`;\nconst listBlockName = `${blockName}-list`;\nconst footerBlockName = `${blockName}-footer`;\n\nexport const ShuttleContainer = aggregatedClasses('div')(blockName);\n\n// wrapper\nexport const ShuttleWrapper = aggregatedClasses('div')(`${blockName}-wrapper`);\n\n// header\nexport const ShuttleHeader = aggregatedClasses('div')(headerBlockName);\nexport const ShuttleHeaderBreadcrumb = aggregatedClasses(ShuttleBreadcrumb)(headerBlockName, 'breadcrumb');\nexport const ShuttleHeaderSearchToggle = aggregatedClasses(DSButton)(headerBlockName, 'search-toggle');\n\n// list\nexport const ShuttleList = aggregatedClasses('div')(listBlockName, null, ({ showPulse }) => ({\n 'show-pulse': showPulse,\n}));\n\nexport const ShuttleListPanel = aggregatedClasses('div')(listBlockName, 'panel', ({ open }) => ({ open }));\nexport const Overflow = aggregatedClasses(OverflowList)(listBlockName, 'overflow', ({ empty, searching }) => ({\n empty,\n searching,\n}));\nexport const EmptyMessage = aggregatedClasses('span')(listBlockName, 'empty-message');\nexport const LoadingList = aggregatedClasses('div')(listBlockName, 'loading-list');\n\n// footer\nexport const ShuttleFooter = aggregatedClasses('div')(footerBlockName);\nexport const ShuttleFooterActions = aggregatedClasses('div')(footerBlockName, 'actions');\nexport const ShuttleFooterCounter = aggregatedClasses('span')(footerBlockName, 'counter');\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAGA,MAAM,YAAY;AAClB,MAAM,kBAAkB,GAAG;AAC3B,MAAM,gBAAgB,GAAG;AACzB,MAAM,kBAAkB,GAAG;AAEpB,MAAM,mBAAmB,kBAAkB,OAAO;AAGlD,MAAM,iBAAiB,kBAAkB,OAAO,GAAG;AAGnD,MAAM,gBAAgB,kBAAkB,OAAO;AAC/C,MAAM,0BAA0B,kBAAkB,mBAAmB,iBAAiB;AACtF,MAAM,4BAA4B,kBAAkB,UAAU,iBAAiB;AAG/E,MAAM,cAAc,kBAAkB,OAAO,eAAe,MAAM,CAAC,EAAE,gBAAiB;AAAA,EAC3F,cAAc;AAAA;AAGT,MAAM,mBAAmB,kBAAkB,OAAO,eAAe,SAAS,CAAC,EAAE,WAAY,GAAE;AAC3F,MAAM,WAAW,kBAAkB,cAAc,eAAe,YAAY,CAAC,EAAE,OAAO,gBAAiB;AAAA,EAC5G;AAAA,EACA;AAAA;AAEK,MAAM,eAAe,kBAAkB,QAAQ,eAAe;AAC9D,MAAM,cAAc,kBAAkB,OAAO,eAAe;AAG5D,MAAM,gBAAgB,kBAAkB,OAAO;AAC/C,MAAM,uBAAuB,kBAAkB,OAAO,iBAAiB;AACvE,MAAM,uBAAuB,kBAAkB,QAAQ,iBAAiB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|