@elliemae/ds-shuttle 3.4.3-rc.1 → 3.4.4-rc.0
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/dist/cjs/AnimationState.js +36 -21
- package/dist/cjs/AnimationState.js.map +2 -2
- package/dist/cjs/DSShuttle.js +71 -54
- package/dist/cjs/DSShuttle.js.map +2 -2
- package/dist/cjs/SearchState.js +4 -1
- package/dist/cjs/SearchState.js.map +2 -2
- package/dist/cjs/Shuttle.actions.js +17 -5
- package/dist/cjs/Shuttle.actions.js.map +2 -2
- package/dist/cjs/ShuttleContainer.js +25 -5
- package/dist/cjs/ShuttleContainer.js.map +2 -2
- package/dist/cjs/ShuttleImpl.js +61 -15
- package/dist/cjs/ShuttleImpl.js.map +1 -1
- package/dist/cjs/ShuttleRenderer.js +81 -65
- package/dist/cjs/ShuttleRenderer.js.map +1 -1
- package/dist/cjs/ShuttleState.js +10 -3
- package/dist/cjs/ShuttleState.js.map +2 -2
- package/dist/cjs/animation/animationConfig.js +4 -1
- package/dist/cjs/animation/animationConfig.js.map +1 -1
- package/dist/cjs/classedComponents.js +4 -1
- package/dist/cjs/classedComponents.js.map +1 -1
- package/dist/cjs/components/LoadingIndicator.js +12 -8
- package/dist/cjs/components/LoadingIndicator.js.map +1 -1
- package/dist/cjs/components/OverflowList.js +10 -6
- package/dist/cjs/components/OverflowList.js.map +1 -1
- package/dist/cjs/components/ShuttleBreadcrumb.js +17 -13
- package/dist/cjs/components/ShuttleBreadcrumb.js.map +1 -1
- package/dist/cjs/components/ShuttleInfiniteScrollIndicator.js +12 -8
- package/dist/cjs/components/ShuttleInfiniteScrollIndicator.js.map +1 -1
- package/dist/cjs/components/ShuttleListItem/ActionButtons.js +11 -8
- package/dist/cjs/components/ShuttleListItem/ActionButtons.js.map +1 -1
- package/dist/cjs/components/ShuttleListItem/ShuttleListItem.js +33 -16
- package/dist/cjs/components/ShuttleListItem/ShuttleListItem.js.map +1 -1
- package/dist/cjs/components/ShuttleListItem/ShuttleSourceListItem.js +11 -9
- package/dist/cjs/components/ShuttleListItem/ShuttleSourceListItem.js.map +1 -1
- package/dist/cjs/components/ShuttleListItem/ShuttleTargetListItem.js +11 -9
- package/dist/cjs/components/ShuttleListItem/ShuttleTargetListItem.js.map +1 -1
- package/dist/cjs/components/ShuttleListPanel.js +14 -10
- package/dist/cjs/components/ShuttleListPanel.js.map +2 -2
- package/dist/cjs/components/ShuttleSearchBox.js +18 -13
- package/dist/cjs/components/ShuttleSearchBox.js.map +1 -1
- package/dist/cjs/components/ShuttleSource.js +98 -59
- package/dist/cjs/components/ShuttleSource.js.map +2 -2
- package/dist/cjs/components/ShuttleTarget.js +60 -33
- package/dist/cjs/components/ShuttleTarget.js.map +1 -1
- package/dist/cjs/components/VirtualizedItem.js +20 -14
- package/dist/cjs/components/VirtualizedItem.js.map +1 -1
- package/dist/cjs/components/VirtualizedList.js +28 -20
- package/dist/cjs/components/VirtualizedList.js.map +2 -2
- package/dist/cjs/components/VirtualizedSortableList.js +9 -5
- package/dist/cjs/components/VirtualizedSortableList.js.map +1 -1
- package/dist/cjs/helper.js +18 -7
- package/dist/cjs/helper.js.map +2 -2
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/tests/utils.js +7 -2
- package/dist/cjs/tests/utils.js.map +1 -1
- package/dist/cjs/updateShuttleStateFromProps.js +13 -4
- package/dist/cjs/updateShuttleStateFromProps.js.map +1 -1
- package/dist/cjs/utils.js +4 -1
- package/dist/cjs/utils.js.map +1 -1
- package/dist/cjs/withProviders.js +14 -5
- package/dist/cjs/withProviders.js.map +1 -1
- package/dist/esm/AnimationState.js +32 -20
- package/dist/esm/AnimationState.js.map +1 -1
- package/dist/esm/DSShuttle.js +67 -53
- package/dist/esm/DSShuttle.js.map +1 -1
- package/dist/esm/SearchState.js.map +1 -1
- package/dist/esm/Shuttle.actions.js +13 -4
- package/dist/esm/Shuttle.actions.js.map +1 -1
- package/dist/esm/ShuttleContainer.js +21 -4
- package/dist/esm/ShuttleContainer.js.map +2 -2
- package/dist/esm/ShuttleImpl.js +57 -14
- package/dist/esm/ShuttleImpl.js.map +1 -1
- package/dist/esm/ShuttleRenderer.js +77 -64
- package/dist/esm/ShuttleRenderer.js.map +1 -1
- package/dist/esm/ShuttleState.js +6 -2
- package/dist/esm/ShuttleState.js.map +1 -1
- package/dist/esm/animation/animationConfig.js.map +1 -1
- package/dist/esm/classedComponents.js.map +1 -1
- package/dist/esm/components/LoadingIndicator.js +8 -7
- package/dist/esm/components/LoadingIndicator.js.map +1 -1
- package/dist/esm/components/OverflowList.js +6 -5
- package/dist/esm/components/OverflowList.js.map +1 -1
- package/dist/esm/components/ShuttleBreadcrumb.js +13 -12
- package/dist/esm/components/ShuttleBreadcrumb.js.map +1 -1
- package/dist/esm/components/ShuttleInfiniteScrollIndicator.js +8 -7
- package/dist/esm/components/ShuttleInfiniteScrollIndicator.js.map +1 -1
- package/dist/esm/components/ShuttleListItem/ActionButtons.js +7 -7
- package/dist/esm/components/ShuttleListItem/ActionButtons.js.map +1 -1
- package/dist/esm/components/ShuttleListItem/ShuttleListItem.js +29 -15
- package/dist/esm/components/ShuttleListItem/ShuttleListItem.js.map +1 -1
- package/dist/esm/components/ShuttleListItem/ShuttleSourceListItem.js +7 -8
- package/dist/esm/components/ShuttleListItem/ShuttleSourceListItem.js.map +1 -1
- package/dist/esm/components/ShuttleListItem/ShuttleTargetListItem.js +7 -8
- package/dist/esm/components/ShuttleListItem/ShuttleTargetListItem.js.map +1 -1
- package/dist/esm/components/ShuttleListPanel.js +10 -9
- package/dist/esm/components/ShuttleListPanel.js.map +1 -1
- package/dist/esm/components/ShuttleSearchBox.js +14 -12
- package/dist/esm/components/ShuttleSearchBox.js.map +1 -1
- package/dist/esm/components/ShuttleSource.js +94 -58
- package/dist/esm/components/ShuttleSource.js.map +1 -1
- package/dist/esm/components/ShuttleTarget.js +56 -32
- package/dist/esm/components/ShuttleTarget.js.map +1 -1
- package/dist/esm/components/VirtualizedItem.js +16 -13
- package/dist/esm/components/VirtualizedItem.js.map +1 -1
- package/dist/esm/components/VirtualizedList.js +24 -19
- package/dist/esm/components/VirtualizedList.js.map +1 -1
- package/dist/esm/components/VirtualizedSortableList.js +5 -4
- package/dist/esm/components/VirtualizedSortableList.js.map +1 -1
- package/dist/esm/helper.js +14 -6
- package/dist/esm/helper.js.map +2 -2
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/tests/utils.js +3 -1
- package/dist/esm/tests/utils.js.map +1 -1
- package/dist/esm/updateShuttleStateFromProps.js +9 -3
- package/dist/esm/updateShuttleStateFromProps.js.map +1 -1
- package/dist/esm/utils.js.map +1 -1
- package/dist/esm/withProviders.js +10 -4
- package/dist/esm/withProviders.js.map +1 -1
- package/package.json +11 -11
|
@@ -20,7 +20,9 @@ function toggleItemSelection(itemId) {
|
|
|
20
20
|
function navigateTo(item, dest) {
|
|
21
21
|
const hierarchyType = getHierarchyTypeName(dest);
|
|
22
22
|
return (state) => {
|
|
23
|
-
const indexInHierarchy = state[hierarchyType].findIndex(
|
|
23
|
+
const indexInHierarchy = state[hierarchyType].findIndex(
|
|
24
|
+
(hItem) => hItem.id === item.id
|
|
25
|
+
);
|
|
24
26
|
const hierarchy = state[hierarchyType];
|
|
25
27
|
return {
|
|
26
28
|
...state,
|
|
@@ -66,9 +68,14 @@ function addToTarget(itemToAdd, collection) {
|
|
|
66
68
|
function removeFromTarget(itemToRemove) {
|
|
67
69
|
return (state, { idField }) => {
|
|
68
70
|
let targetItems = cloneDeep(state.targetItems);
|
|
69
|
-
const itemIndex = targetItems.findIndex(
|
|
71
|
+
const itemIndex = targetItems.findIndex(
|
|
72
|
+
(fItem) => fItem.id === itemToRemove.id
|
|
73
|
+
);
|
|
70
74
|
const item = targetItems[itemIndex];
|
|
71
|
-
const children = item?.hasChildren ? compose(
|
|
75
|
+
const children = item?.hasChildren ? compose(
|
|
76
|
+
filterMovedItems(state.movedItems),
|
|
77
|
+
utils.getChildren({ index: itemIndex })
|
|
78
|
+
)(targetItems) || [] : [];
|
|
72
79
|
targetItems.splice(itemIndex, 1);
|
|
73
80
|
if (item?.hasChildren && children.length) {
|
|
74
81
|
const childrenHash = hashArray(children, "id");
|
|
@@ -76,7 +83,9 @@ function removeFromTarget(itemToRemove) {
|
|
|
76
83
|
}
|
|
77
84
|
return {
|
|
78
85
|
...state,
|
|
79
|
-
movedItems: state.movedItems.filter(
|
|
86
|
+
movedItems: state.movedItems.filter(
|
|
87
|
+
(mItem) => mItem[idField] !== itemToRemove[idField]
|
|
88
|
+
),
|
|
80
89
|
targetItems
|
|
81
90
|
};
|
|
82
91
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Shuttle.actions.js"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n addOrRemove,\n cloneDeep,\n hashArray,\n compose,\n} from '@elliemae/ds-utilities';\nimport {\n getHierarchyTypeName,\n toggleInObject,\n filterMovedItems,\n} from './helper';\n\nimport utils from './utils';\n\nexport function toggleItemSelection(itemId) {\n return state => ({\n ...state,\n checkedItems: addOrRemove(state.checkedItems, itemId),\n });\n}\nexport function navigateTo(item, dest) {\n const hierarchyType = getHierarchyTypeName(dest);\n return state => {\n const indexInHierarchy = state[hierarchyType].findIndex(\n hItem => hItem.id === item.id,\n );\n const hierarchy = state[hierarchyType];\n return {\n ...state,\n [hierarchyType]:\n indexInHierarchy !== -1\n ? hierarchy.slice(0, indexInHierarchy + 1)\n : [...hierarchy, item],\n };\n };\n}\nexport function moveItem(item) {\n return state => {\n const movedItems = toggleInObject(state.movedItems, item.id, item);\n return {\n ...state,\n movedItems,\n };\n };\n}\n\nconst defaultOptions = {\n parentField: 'parent',\n idField: 'id',\n op: hasMoved => !hasMoved,\n};\n\n// todo: optimize this\nfunction getItemDeep({ collection, id, options }) {\n const { idField } = { ...defaultOptions, ...options };\n const itemIndex = collection.findIndex(fItem => fItem[idField] === id);\n\n // get item with nested children\n const item = collection[itemIndex];\n const children = item?.hasChildren\n ? compose(utils.getChildren({ index: itemIndex }))(collection) || []\n : [];\n\n return { item, children };\n}\n\nexport function addToTarget(itemToAdd, collection) {\n return (state, { idField }) => {\n const items = collection || state.preparedItems;\n\n const { item, children } = getItemDeep({\n collection: items,\n id: itemToAdd[idField],\n });\n\n return {\n ...state,\n movedItems: [...state.movedItems, item],\n targetItems: [...state.targetItems, item, ...children],\n };\n };\n}\n\n// todo: optimize this\nexport function removeFromTarget(itemToRemove) {\n return (state, { idField }) => {\n let targetItems = cloneDeep(state.targetItems);\n\n const itemIndex = targetItems.findIndex(\n fItem => fItem.id === itemToRemove.id,\n );\n\n const item = targetItems[itemIndex];\n const children = item?.hasChildren\n ? compose(\n filterMovedItems(state.movedItems),\n utils.getChildren({ index: itemIndex }),\n )(targetItems) || []\n : [];\n\n targetItems.splice(itemIndex, 1);\n if (item?.hasChildren && children.length) {\n const childrenHash = hashArray(children, 'id');\n targetItems = targetItems.filter(i => !childrenHash[i.id]);\n }\n\n return {\n ...state,\n movedItems: state.movedItems.filter(\n mItem => mItem[idField] !== itemToRemove[idField],\n ),\n targetItems,\n };\n };\n}\n\nexport function resetCheckedItems() {\n return state => ({\n ...state,\n checkedItems: [],\n });\n}\nexport function resetMovedItems() {\n return state => ({\n ...state,\n movedItems: [],\n targetItems: [],\n });\n}\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,10 +17,14 @@ import {
|
|
|
17
17
|
import { SearchState } from "./SearchState";
|
|
18
18
|
import { ShuttleState } from "./ShuttleState";
|
|
19
19
|
function filterItemsByTerm(items, term) {
|
|
20
|
-
return items.filter(
|
|
20
|
+
return items.filter(
|
|
21
|
+
(item) => item.name.toLowerCase().indexOf(String(term).toLowerCase()) !== -1 || String(item.id).indexOf(String(term).toLowerCase()) !== -1
|
|
22
|
+
);
|
|
21
23
|
}
|
|
22
24
|
function ShuttleContainer({ items = [], children }) {
|
|
23
|
-
const { state: shuttleState, ...handlers } = useContext(
|
|
25
|
+
const { state: shuttleState, ...handlers } = useContext(
|
|
26
|
+
ShuttleState.Context
|
|
27
|
+
);
|
|
24
28
|
const { state: searchState } = useContext(SearchState.Context);
|
|
25
29
|
const {
|
|
26
30
|
movedItems,
|
|
@@ -36,10 +40,23 @@ function ShuttleContainer({ items = [], children }) {
|
|
|
36
40
|
moveItem,
|
|
37
41
|
navigate
|
|
38
42
|
} = { ...shuttleState, ...searchState, ...handlers };
|
|
39
|
-
const sourceItems = useMemo(
|
|
43
|
+
const sourceItems = useMemo(
|
|
44
|
+
() => compose(
|
|
45
|
+
(items2) => items2.filter((item) => !movedItems[item.id]),
|
|
46
|
+
(items2) => searchTerm && searching ? filterItemsByTerm(items2, searchTerm) : items2,
|
|
47
|
+
(items2) => filterItemsByHierarchy(items2, getActiveIdFromHierarchy(hierarchy).id),
|
|
48
|
+
(items2) => prepareItems(items2)
|
|
49
|
+
)(items),
|
|
50
|
+
[items, searchTerm, searching, hierarchy, movedItems]
|
|
51
|
+
);
|
|
40
52
|
const targetItems = useMemo(() => {
|
|
41
53
|
const hierarchyId = getActiveIdFromHierarchy(hierarchyDest).id;
|
|
42
|
-
return compose(
|
|
54
|
+
return compose(
|
|
55
|
+
(items2) => sortBy(items2, ["name"]),
|
|
56
|
+
(items2) => hierarchyId ? filterItemsByHierarchy(items2, hierarchyId).filter(
|
|
57
|
+
(item) => !movedItems[item.id]
|
|
58
|
+
) : uniqBy(values(movedItems), "id")
|
|
59
|
+
)(items);
|
|
43
60
|
}, [items, searching, hierarchyDest, movedItems]);
|
|
44
61
|
return isFunction(children) && children({
|
|
45
62
|
checkedItems,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ShuttleContainer.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-shadow */\nimport { useContext, useMemo } from 'react';\nimport {\n isFunction,\n compose,\n uniqBy,\n values,\n sortBy,\n} from '@elliemae/ds-utilities';\nimport { withProviders } from './withProviders';\nimport {\n prepareItems,\n getActiveIdFromHierarchy,\n filterItemsByHierarchy,\n getItemsById,\n} from './helper';\nimport { SearchState } from './SearchState';\nimport { ShuttleState } from './ShuttleState';\n\nfunction filterItemsByTerm(items, term) {\n return items.filter(\n item =>\n item.name.toLowerCase().indexOf(String(term).toLowerCase()) !== -1 ||\n String(item.id).indexOf(String(term).toLowerCase()) !== -1,\n );\n}\n\nfunction ShuttleContainer({ items = [], children }) {\n const { state: shuttleState, ...handlers } = useContext(\n ShuttleState.Context,\n );\n const { state: searchState } = useContext(SearchState.Context);\n const {\n movedItems,\n hierarchy,\n hierarchyDest,\n checkedItems,\n searchTerm,\n searching,\n toggleItemSelection,\n resetCheckedItems,\n resetMovedItems,\n moveCheckedItems,\n moveItem,\n navigate,\n } = { ...shuttleState, ...searchState, ...handlers };\n\n const sourceItems = useMemo(\n () =>\n compose(\n items => items.filter(item => !movedItems[item.id]),\n items =>\n searchTerm && searching\n ? filterItemsByTerm(items, searchTerm)\n : items,\n items =>\n filterItemsByHierarchy(items, getActiveIdFromHierarchy(hierarchy).id),\n items => prepareItems(items),\n )(items),\n [items, searchTerm, searching, hierarchy, movedItems],\n );\n\n const targetItems = useMemo(() => {\n const hierarchyId = getActiveIdFromHierarchy(hierarchyDest).id;\n return compose(\n items => sortBy(items, ['name']),\n items =>\n hierarchyId\n ? filterItemsByHierarchy(items, hierarchyId).filter(\n item => !movedItems[item.id],\n )\n : uniqBy(values(movedItems), 'id'),\n )(items);\n }, [items, searching, hierarchyDest, movedItems]);\n\n return (\n isFunction(children) &&\n children({\n checkedItems,\n hierarchy,\n hierarchyDest,\n onCheckItem: toggleItemSelection,\n onClearCheckedItems: resetCheckedItems,\n onClearMovedItems: resetMovedItems,\n onMoveCheckedItems: () =>\n moveCheckedItems(getItemsById(checkedItems, items)),\n onMoveItemToSource: item => moveItem(item, false),\n onMoveItemToTarget: item => moveItem(item, true),\n onNavigateOnSourceTo: item => navigate(item, false),\n onNavigateOnTargetTo: item => navigate(item, true),\n sourceItems,\n targetItems,\n })\n );\n}\n\nexport default withProviders(ShuttleContainer);\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,YAAY,eAAe;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAE7B,SAAS,kBAAkB,OAAO,MAAM;AACtC,SAAO,MAAM;AAAA,IACX,UACE,KAAK,KAAK,YAAY,EAAE,QAAQ,OAAO,IAAI,EAAE,YAAY,CAAC,MAAM,MAChE,OAAO,KAAK,EAAE,EAAE,QAAQ,OAAO,IAAI,EAAE,YAAY,CAAC,MAAM;AAAA,EAC5D;AACF;AAEA,SAAS,iBAAiB,EAAE,QAAQ,CAAC,GAAG,SAAS,GAAG;AAClD,QAAM,EAAE,OAAO,iBAAiB,SAAS,IAAI;AAAA,IAC3C,aAAa;AAAA,EACf;AACA,QAAM,EAAE,OAAO,YAAY,IAAI,WAAW,YAAY,OAAO;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,EAAE,GAAG,cAAc,GAAG,aAAa,GAAG,SAAS;AAEnD,QAAM,cAAc;AAAA,IAClB,MACE;AAAA,MACE,CAAAA,WAASA,OAAM,OAAO,UAAQ,CAAC,WAAW,KAAK,GAAG;AAAA,MAClD,CAAAA,WACE,cAAc,YACV,kBAAkBA,QAAO,UAAU,IACnCA;AAAA,MACN,CAAAA,WACE,uBAAuBA,QAAO,yBAAyB,SAAS,EAAE,EAAE;AAAA,MACtE,CAAAA,WAAS,aAAaA,MAAK;AAAA,IAC7B,EAAE,KAAK;AAAA,IACT,CAAC,OAAO,YAAY,WAAW,WAAW,UAAU;AAAA,EACtD;AAEA,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,cAAc,yBAAyB,aAAa,EAAE;AAC5D,WAAO;AAAA,MACL,CAAAA,WAAS,OAAOA,QAAO,CAAC,MAAM,CAAC;AAAA,MAC/B,CAAAA,WACE,cACI,uBAAuBA,QAAO,WAAW,EAAE;AAAA,QACzC,UAAQ,CAAC,WAAW,KAAK;AAAA,MAC3B,IACA,OAAO,OAAO,UAAU,GAAG,IAAI;AAAA,IACvC,EAAE,KAAK;AAAA,EACT,GAAG,CAAC,OAAO,WAAW,eAAe,UAAU,CAAC;AAEhD,SACE,WAAW,QAAQ,KACnB,SAAS;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,oBAAoB,MAClB,iBAAiB,aAAa,cAAc,KAAK,CAAC;AAAA,IACpD,oBAAoB,UAAQ,SAAS,MAAM,KAAK;AAAA,IAChD,oBAAoB,UAAQ,SAAS,MAAM,IAAI;AAAA,IAC/C,sBAAsB,UAAQ,SAAS,MAAM,KAAK;AAAA,IAClD,sBAAsB,UAAQ,SAAS,MAAM,IAAI;AAAA,IACjD;AAAA,IACA;AAAA,EACF,CAAC;AAEL;AAEA,IAAO,2BAAQ,cAAc,gBAAgB;",
|
|
6
|
+
"names": ["items"]
|
|
7
7
|
}
|
package/dist/esm/ShuttleImpl.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Component } from "react";
|
|
3
4
|
import { compose, arrayMove } from "@elliemae/ds-utilities";
|
|
4
5
|
import { withProviders } from "./withProviders";
|
|
5
6
|
import {
|
|
@@ -49,9 +50,12 @@ class ShuttleImpl extends Component {
|
|
|
49
50
|
this.resetMovedItems = () => {
|
|
50
51
|
const { selectedItems, onRemoveAllFromTarget } = this.props;
|
|
51
52
|
if (!selectedItems) {
|
|
52
|
-
this.setState(
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
this.setState(
|
|
54
|
+
pipe([navigateTo({ id: null }, true), resetMovedItems()]),
|
|
55
|
+
() => {
|
|
56
|
+
this.handleChange();
|
|
57
|
+
}
|
|
58
|
+
);
|
|
55
59
|
} else {
|
|
56
60
|
this.setState(pipe([navigateTo({ id: null }, true)]));
|
|
57
61
|
}
|
|
@@ -82,7 +86,9 @@ class ShuttleImpl extends Component {
|
|
|
82
86
|
const { onAddCheckedItems, selectedItems, nonSelectedItems } = this.props;
|
|
83
87
|
const { checkedItems, preparedItems } = this.state;
|
|
84
88
|
const isControlledV2 = !!selectedItems && !!nonSelectedItems;
|
|
85
|
-
const checked = isControlledV2 ? nonSelectedItems.filter(
|
|
89
|
+
const checked = isControlledV2 ? nonSelectedItems.filter(
|
|
90
|
+
(item) => checkedItems.some((check) => check === item)
|
|
91
|
+
) : checkedItems;
|
|
86
92
|
const items = getItemsById(checked, preparedItems);
|
|
87
93
|
const actions = !selectedItems ? items.map((item) => addToTarget(item)) : [];
|
|
88
94
|
this.setState(pipe([...actions, resetCheckedItems()]), () => {
|
|
@@ -95,8 +101,12 @@ class ShuttleImpl extends Component {
|
|
|
95
101
|
const { targetItems, hierarchyDest, movedItems } = this.state;
|
|
96
102
|
const hierarchyId = getActiveIdFromHierarchy(hierarchyDest).id;
|
|
97
103
|
const collection = !hierarchyId ? movedItems : targetItems;
|
|
98
|
-
const oldIndex = collection.findIndex(
|
|
99
|
-
|
|
104
|
+
const oldIndex = collection.findIndex(
|
|
105
|
+
(tItem) => tItem[idField] === sourceItem[idField]
|
|
106
|
+
);
|
|
107
|
+
const newIndex = collection.findIndex(
|
|
108
|
+
(tItem) => tItem[idField] === targetItem[idField]
|
|
109
|
+
);
|
|
100
110
|
const sortedMovedItems = !hierarchyId ? arrayMove(movedItems, oldIndex, newIndex) : movedItems;
|
|
101
111
|
const sortedItems = hierarchyId ? arrayMove(targetItems, oldIndex, newIndex) : targetItems;
|
|
102
112
|
this.setState({
|
|
@@ -139,22 +149,52 @@ class ShuttleImpl extends Component {
|
|
|
139
149
|
const handleControlledSourceItms = () => {
|
|
140
150
|
const { id } = getActiveIdFromHierarchy(hierarchy);
|
|
141
151
|
if (id) {
|
|
142
|
-
return filterBySearch(
|
|
152
|
+
return filterBySearch(
|
|
153
|
+
searchTerm,
|
|
154
|
+
searching
|
|
155
|
+
)(
|
|
156
|
+
getChildrenFromParent(id)(
|
|
157
|
+
nonSelectedItems.map((it) => items.find((itt) => itt.id === it))
|
|
158
|
+
)
|
|
159
|
+
);
|
|
143
160
|
}
|
|
144
|
-
return filterBySearch(
|
|
161
|
+
return filterBySearch(
|
|
162
|
+
searchTerm,
|
|
163
|
+
searching
|
|
164
|
+
)(
|
|
165
|
+
items.filter(
|
|
166
|
+
(it) => nonSelectedItems.some(
|
|
167
|
+
(itt) => itt === it.id && !nonSelectedItems.some((ittt) => ittt === it.parent)
|
|
168
|
+
)
|
|
169
|
+
)
|
|
170
|
+
);
|
|
145
171
|
};
|
|
146
172
|
let composedSourceItems;
|
|
147
173
|
if (nonSelectedItems) {
|
|
148
174
|
composedSourceItems = handleControlledSourceItms();
|
|
149
175
|
} else {
|
|
150
|
-
composedSourceItems = compose(
|
|
176
|
+
composedSourceItems = compose(
|
|
177
|
+
filterBySearch(searchTerm, searching),
|
|
178
|
+
filterMovedItems(movedItems),
|
|
179
|
+
getChildrenFromParent(getActiveIdFromHierarchy(hierarchy).id)
|
|
180
|
+
)(items);
|
|
151
181
|
}
|
|
152
182
|
const handleControlledTargetItms = () => {
|
|
153
183
|
const { id } = getActiveIdFromHierarchy(hierarchyDest);
|
|
154
184
|
if (id) {
|
|
155
|
-
return getChildrenFromParent(
|
|
185
|
+
return getChildrenFromParent(
|
|
186
|
+
getActiveIdFromHierarchy(hierarchyDest).id
|
|
187
|
+
)(
|
|
188
|
+
this.props.selectedItems.map(
|
|
189
|
+
(it) => items.find((itt) => itt.id === it)
|
|
190
|
+
)
|
|
191
|
+
);
|
|
156
192
|
}
|
|
157
|
-
return targetItems.filter(
|
|
193
|
+
return targetItems.filter(
|
|
194
|
+
(it) => this.props.selectedItems.some(
|
|
195
|
+
(itt) => itt === it.id && !this.props.selectedItems.some((ittt) => ittt === it.parent)
|
|
196
|
+
)
|
|
197
|
+
);
|
|
158
198
|
};
|
|
159
199
|
let composedTargetItems;
|
|
160
200
|
if (nonSelectedItems) {
|
|
@@ -162,10 +202,13 @@ class ShuttleImpl extends Component {
|
|
|
162
202
|
} else {
|
|
163
203
|
composedTargetItems = compose((tItems) => {
|
|
164
204
|
const hierarchyId = getActiveIdFromHierarchy(hierarchyDest).id;
|
|
165
|
-
return hierarchyId ? compose(
|
|
205
|
+
return hierarchyId ? compose(
|
|
206
|
+
filterMovedItems(movedItems),
|
|
207
|
+
getChildrenFromParent(hierarchyId)
|
|
208
|
+
)(tItems) : movedItems;
|
|
166
209
|
})(targetItems);
|
|
167
210
|
}
|
|
168
|
-
return /* @__PURE__ */
|
|
211
|
+
return /* @__PURE__ */ jsx(ShuttleRenderer, {
|
|
169
212
|
...rest,
|
|
170
213
|
moreItemsLoading,
|
|
171
214
|
checkedItems,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ShuttleImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/static-property-placement */\n/* eslint-disable react/prop-types */\n/* eslint-disable indent */\n/* eslint-disable import/extensions,react/no-unused-state,no-shadow,max-lines */\nimport React, { Component } from 'react';\nimport { compose, arrayMove } from '@elliemae/ds-utilities';\nimport { withProviders } from './withProviders';\nimport {\n addToTarget,\n navigateTo,\n resetCheckedItems,\n resetMovedItems,\n toggleItemSelection,\n removeFromTarget,\n} from './Shuttle.actions';\nimport {\n getActiveIdFromHierarchy,\n filterBySearch,\n getItemsById,\n pipe,\n getChildrenFromParent,\n filterMovedItems,\n} from './helper';\nimport { ShuttleRenderer } from './ShuttleRenderer';\nimport { SearchState } from './SearchState';\nimport { updateShuttleStateFromProps } from './updateShuttleStateFromProps';\n\nclass ShuttleImpl extends Component {\n static contextType = SearchState.Context;\n\n constructor(props) {\n super(props);\n this.state = {\n prevProps: {},\n preparedItems: [],\n checkedItems: [],\n // left breadcrumb\n hierarchy: [{ name: props.sourceRootTitle, id: null }],\n // right breadcrumb\n hierarchyDest: [{ name: props.targetRootTitle, id: null }],\n\n movedItems: [],\n sourceItems: [],\n targetItems: [],\n };\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n return updateShuttleStateFromProps(nextProps, prevState);\n }\n\n componentDidMount() {\n const { setGetStatus } = this.props;\n setGetStatus(this.getState);\n }\n\n getState = () => {\n const { movedItems } = this.state;\n return Object.keys(movedItems);\n };\n\n handleChange = () => {\n const { onChange } = this.props;\n const { movedItems } = this.state;\n onChange(Object.keys(movedItems));\n }\n\n navigate = (item, dest, direction) => {\n const { onDrillDown, onDrillDownTarget } = this.props;\n\n if (!dest) onDrillDown(item, direction);\n if (dest) onDrillDownTarget(item, direction);\n\n const { reset: resetSearchState } = this.context;\n resetSearchState();\n\n this.setState(pipe([navigateTo(item, dest), resetCheckedItems()]));\n }\n\n resetCheckedItems = () => {\n this.setState(resetCheckedItems());\n }\n\n resetMovedItems = () => {\n const { selectedItems, onRemoveAllFromTarget } = this.props;\n if (!selectedItems) {\n this.setState(\n pipe([navigateTo({ id: null }, true), resetMovedItems()]),\n () => {\n this.handleChange();\n },\n );\n } else {\n this.setState(pipe([navigateTo({ id: null }, true)]));\n }\n onRemoveAllFromTarget();\n }\n\n addToTarget = (item) => {\n const { selectedItems, onAddToTarget } = this.props;\n if (!selectedItems) {\n this.setState(pipe([addToTarget(item), resetCheckedItems()]), () => {\n this.handleChange();\n });\n }\n onAddToTarget(item);\n }\n\n removeFromTarget = (item) => {\n const { selectedItems, onRemoveFromTarget } = this.props;\n if (!selectedItems) {\n this.setState(pipe([removeFromTarget(item)]), () => {\n this.handleChange();\n });\n }\n onRemoveFromTarget(item);\n }\n\n toggleItemSelection = (item) => {\n this.setState(toggleItemSelection(item.id));\n }\n\n moveCheckedItems = () => {\n const { onAddCheckedItems, selectedItems, nonSelectedItems } = this.props;\n const { checkedItems, preparedItems } = this.state;\n const isControlledV2 = !!selectedItems && !!nonSelectedItems;\n const checked = isControlledV2\n ? nonSelectedItems.filter((item) =>\n checkedItems.some((check) => check === item),\n )\n : checkedItems;\n const items = getItemsById(checked, preparedItems);\n const actions = !selectedItems\n ? items.map((item) => addToTarget(item))\n : [];\n this.setState(pipe([...actions, resetCheckedItems()]), () => {\n this.handleChange();\n });\n onAddCheckedItems(items);\n }\n\n handleTargetSortEnd = ({ sourceItem, targetItem }) => {\n const { idField, onTargetSortEnd } = this.props;\n const { targetItems, hierarchyDest, movedItems } = this.state;\n\n const hierarchyId = getActiveIdFromHierarchy(hierarchyDest).id;\n\n const collection = !hierarchyId ? movedItems : targetItems;\n\n const oldIndex = collection.findIndex(\n (tItem) => tItem[idField] === sourceItem[idField],\n );\n const newIndex = collection.findIndex(\n (tItem) => tItem[idField] === targetItem[idField],\n );\n\n const sortedMovedItems = !hierarchyId\n ? arrayMove(movedItems, oldIndex, newIndex)\n : movedItems;\n const sortedItems = hierarchyId\n ? arrayMove(targetItems, oldIndex, newIndex)\n : targetItems;\n\n this.setState({\n targetItems: sortedItems,\n movedItems: sortedMovedItems,\n });\n onTargetSortEnd({ sourceItem, targetItem });\n }\n\n render() {\n const { idField, nonSelectedItems, moreItemsLoading, ...rest } = this.props;\n const {\n hierarchy,\n hierarchyDest,\n checkedItems,\n movedItems,\n preparedItems: items,\n targetItems,\n } = this.state;\n const {\n state: { searchTerm, searching },\n } = this.context;\n\n const handleControlledSourceItms = () => {\n const { id } = getActiveIdFromHierarchy(hierarchy);\n if (id) {\n return filterBySearch(\n searchTerm,\n searching,\n )(\n getChildrenFromParent(id)(\n nonSelectedItems.map((it) => items.find((itt) => itt.id === it)),\n ),\n );\n }\n\n return filterBySearch(\n searchTerm,\n searching,\n )(\n items.filter((it) =>\n nonSelectedItems.some(\n (itt) =>\n itt === it.id &&\n !nonSelectedItems.some((ittt) => ittt === it.parent),\n ),\n ),\n );\n };\n\n let composedSourceItems;\n\n // controlled V2 TODO make it default controlled behavior\n if (nonSelectedItems) {\n composedSourceItems = handleControlledSourceItms();\n } else {\n composedSourceItems = compose(\n filterBySearch(searchTerm, searching),\n filterMovedItems(movedItems),\n getChildrenFromParent(getActiveIdFromHierarchy(hierarchy).id),\n )(items);\n }\n\n const handleControlledTargetItms = () => {\n const { id } = getActiveIdFromHierarchy(hierarchyDest);\n if (id) {\n return getChildrenFromParent(\n getActiveIdFromHierarchy(hierarchyDest).id,\n )(\n this.props.selectedItems.map((it) =>\n items.find((itt) => itt.id === it),\n ),\n );\n }\n\n return targetItems.filter((it) =>\n this.props.selectedItems.some(\n (itt) =>\n itt === it.id &&\n !this.props.selectedItems.some((ittt) => ittt === it.parent),\n ),\n );\n };\n\n let composedTargetItems;\n\n // controlled V2 TODO make it default controlled behavior\n if (nonSelectedItems) {\n composedTargetItems = handleControlledTargetItms();\n } else {\n composedTargetItems = compose((tItems) => {\n const hierarchyId = getActiveIdFromHierarchy(hierarchyDest).id;\n return hierarchyId\n ? compose(\n filterMovedItems(movedItems),\n getChildrenFromParent(hierarchyId),\n )(tItems)\n : movedItems;\n })(targetItems);\n }\n\n return (\n <ShuttleRenderer\n {...rest}\n moreItemsLoading={moreItemsLoading}\n checkedItems={checkedItems}\n hierarchy={hierarchy}\n hierarchyDest={hierarchyDest}\n onCheckItem={this.toggleItemSelection}\n onClearCheckedItems={this.resetCheckedItems}\n onClearMovedItems={this.resetMovedItems}\n onItemCheck={this.toggleItemSelection}\n onMoveCheckedItems={this.moveCheckedItems}\n onMoveItemToSource={(item) => this.removeFromTarget(item, false)}\n onMoveItemToTarget={(item) => this.addToTarget(item, true)}\n onNavigateOnSourceTo={(item, direction) =>\n this.navigate(item, false, direction)\n }\n onNavigateOnTargetTo={(item, direction) =>\n this.navigate(item, true, direction)\n }\n onSourceSortEnd={() => null}\n onTargetSortEnd={this.handleTargetSortEnd}\n sourceItems={composedSourceItems}\n targetItems={composedTargetItems}\n />\n );\n }\n}\n\nconst ShuttleImplHoc = withProviders(ShuttleImpl);\nexport { ShuttleImplHoc as ShuttleImpl };\nexport default ShuttleImplHoc;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback, useContext } from "react";
|
|
3
4
|
import { ShuttleSource } from "./components/ShuttleSource";
|
|
4
5
|
import { ShuttleTarget } from "./components/ShuttleTarget";
|
|
5
6
|
import { ShuttleContainer } from "./classedComponents";
|
|
@@ -42,70 +43,82 @@ function ShuttleRenderer({
|
|
|
42
43
|
hasNextPage = false,
|
|
43
44
|
...otherProps
|
|
44
45
|
}) {
|
|
45
|
-
const { setIsMoving, setIsDrillingDown, setIsMovingBack, reset } = useContext(
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
const { setIsMoving, setIsDrillingDown, setIsMovingBack, reset } = useContext(
|
|
47
|
+
AnimationState.Context
|
|
48
|
+
);
|
|
49
|
+
const removeAnimationState = useCallback(
|
|
50
|
+
() => setTimeout(() => reset(), 500)
|
|
51
|
+
);
|
|
52
|
+
return /* @__PURE__ */ jsxs(ShuttleContainer, {
|
|
48
53
|
"data-testid": "em-ds-shuttle",
|
|
49
|
-
...containerProps
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
54
|
+
...containerProps,
|
|
55
|
+
children: [
|
|
56
|
+
/* @__PURE__ */ jsx(ShuttleSource, {
|
|
57
|
+
...otherProps,
|
|
58
|
+
checkedItems,
|
|
59
|
+
composeSourceItemProps,
|
|
60
|
+
emptyMessage: sourceEmptyMessage,
|
|
61
|
+
hierarchy,
|
|
62
|
+
items: sourceItems,
|
|
63
|
+
onCheckItem,
|
|
64
|
+
onClearCheckedItems,
|
|
65
|
+
onMoveCheckedItems: (item) => {
|
|
66
|
+
setIsMoving(true);
|
|
67
|
+
onMoveCheckedItems(item);
|
|
68
|
+
},
|
|
69
|
+
onMoveItem: (item) => {
|
|
70
|
+
setIsMoving(true);
|
|
71
|
+
onMoveItemToTarget(item);
|
|
72
|
+
removeAnimationState();
|
|
73
|
+
},
|
|
74
|
+
onNavigateTo: (item, direction = "down") => {
|
|
75
|
+
const indexInHierarchy = hierarchy.findIndex(
|
|
76
|
+
(hItem) => hItem.id === item.id
|
|
77
|
+
);
|
|
78
|
+
setIsDrillingDown(indexInHierarchy === -1);
|
|
79
|
+
onNavigateOnSourceTo(item, direction);
|
|
80
|
+
},
|
|
81
|
+
onSearch,
|
|
82
|
+
onSearchClose,
|
|
83
|
+
onSearchOpen,
|
|
84
|
+
onSortEnd: onSourceSortEnd,
|
|
85
|
+
onToggleSearch,
|
|
86
|
+
searching,
|
|
87
|
+
sourceSortable,
|
|
88
|
+
loading: loadingSource,
|
|
89
|
+
onGetMoreItems,
|
|
90
|
+
moreItemsLoading,
|
|
91
|
+
hasNextPage
|
|
92
|
+
}),
|
|
93
|
+
/* @__PURE__ */ jsx(ShuttleTarget, {
|
|
94
|
+
...otherProps,
|
|
95
|
+
composeTargetItemProps,
|
|
96
|
+
emptyMessage: targetEmptyMessage,
|
|
97
|
+
hierarchy: hierarchyDest,
|
|
98
|
+
items: targetItems,
|
|
99
|
+
onClearMovedItems: () => {
|
|
100
|
+
setIsMovingBack(true);
|
|
101
|
+
removeAnimationState();
|
|
102
|
+
onClearMovedItems();
|
|
103
|
+
},
|
|
104
|
+
onMoveItem: (item) => {
|
|
105
|
+
setIsMovingBack(true);
|
|
106
|
+
removeAnimationState();
|
|
107
|
+
onMoveItemToSource(item);
|
|
108
|
+
},
|
|
109
|
+
onNavigateTo: (item, direction = "down") => {
|
|
110
|
+
const indexInHierarchy = hierarchyDest.findIndex(
|
|
111
|
+
(hItem) => hItem.id === item.id
|
|
112
|
+
);
|
|
113
|
+
setIsDrillingDown(indexInHierarchy === -1);
|
|
114
|
+
onNavigateOnTargetTo(item, direction);
|
|
115
|
+
},
|
|
116
|
+
onSortEnd: onTargetSortEnd,
|
|
117
|
+
targetSortable,
|
|
118
|
+
loading: loadingTarget
|
|
119
|
+
})
|
|
120
|
+
]
|
|
121
|
+
});
|
|
109
122
|
}
|
|
110
123
|
var ShuttleRenderer_default = ShuttleRenderer;
|
|
111
124
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ShuttleRenderer.tsx"],
|
|
4
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;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAG/B,MAAM,OAAO,MAAM;AAAC;AACpB,SAAS,gBAAgB;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,CAAC;AAAA,EACb,gBAAgB,CAAC;AAAA,EACjB,eAAe,CAAC;AAAA,EAChB,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AAAA,EACf;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,EAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,cAAc;AAAA,KACX;AACL,GAAG;AACD,QAAM,EAAE,aAAa,mBAAmB,iBAAiB,MAAM,IAAI;AAAA,IACjE,eAAe;AAAA,EACjB;AAEA,QAAM,uBAAuB;AAAA,IAAY,MACvC,WAAW,MAAM,MAAM,GAAG,GAAG;AAAA,EAC/B;AAEA,SACE,qBAAC;AAAA,IAAiB,eAAY;AAAA,IAAiB,GAAG;AAAA,IAChD;AAAA,0BAAC;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,oBAAoB,CAAC,SAAS;AAC5B,sBAAY,IAAI;AAChB,6BAAmB,IAAI;AAAA,QACzB;AAAA,QACA,YAAY,CAAC,SAAS;AACpB,sBAAY,IAAI;AAChB,6BAAmB,IAAI;AACvB,+BAAqB;AAAA,QACvB;AAAA,QACA,cAAc,CAAC,MAAM,YAAY,WAAW;AAC1C,gBAAM,mBAAmB,UAAU;AAAA,YACjC,CAAC,UAAU,MAAM,OAAO,KAAK;AAAA,UAC/B;AACA,4BAAkB,qBAAqB,EAAE;AACzC,+BAAqB,MAAM,SAAS;AAAA,QACtC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,OACF;AAAA,MACA,oBAAC;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,cAAc;AAAA,QACd,WAAW;AAAA,QACX,OAAO;AAAA,QACP,mBAAmB,MAAM;AACvB,0BAAgB,IAAI;AACpB,+BAAqB;AACrB,4BAAkB;AAAA,QACpB;AAAA,QACA,YAAY,CAAC,SAAS;AACpB,0BAAgB,IAAI;AACpB,+BAAqB;AACrB,6BAAmB,IAAI;AAAA,QACzB;AAAA,QACA,cAAc,CAAC,MAAM,YAAY,WAAW;AAC1C,gBAAM,mBAAmB,cAAc;AAAA,YACrC,CAAC,UAAU,MAAM,OAAO,KAAK;AAAA,UAC/B;AACA,4BAAkB,qBAAqB,EAAE;AACzC,+BAAqB,MAAM,SAAS;AAAA,QACtC;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA,SAAS;AAAA,OACX;AAAA;AAAA,GACF;AAEJ;AAGA,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/ShuttleState.js
CHANGED
|
@@ -17,13 +17,17 @@ function useShuttleState() {
|
|
|
17
17
|
setState(pipe([actions.resetMovedItems(), ...pipeActions]));
|
|
18
18
|
}
|
|
19
19
|
function navigate(item, dest) {
|
|
20
|
-
setState(
|
|
20
|
+
setState(
|
|
21
|
+
pipe([actions.navigateTo(item, dest), actions.resetCheckedItems()])
|
|
22
|
+
);
|
|
21
23
|
}
|
|
22
24
|
function resetCheckedItems() {
|
|
23
25
|
setState(actions.resetCheckedItems());
|
|
24
26
|
}
|
|
25
27
|
function resetMovedItems() {
|
|
26
|
-
setState(
|
|
28
|
+
setState(
|
|
29
|
+
pipe([actions.navigateTo({ id: null }, true), actions.resetMovedItems()])
|
|
30
|
+
);
|
|
27
31
|
}
|
|
28
32
|
function moveItem(item, dest) {
|
|
29
33
|
setState(pipe([actions.moveItem(item, dest), actions.resetCheckedItems()]));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ShuttleState.tsx"],
|
|
4
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;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAC5B,SAAS,cAAc,YAAY;AACnC,YAAY,aAAa;AAEzB,SAAS,kBAAkB;AACzB,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS;AAAA,IAC/C,cAAc,CAAC;AAAA,IACf,YAAY,CAAC;AAAA,IACb,WAAW,CAAC,EAAE,MAAM,YAAY,IAAI,KAAK,CAAC;AAAA,IAC1C,eAAe,CAAC,EAAE,MAAM,eAAe,IAAI,KAAK,CAAC;AAAA,EACnD,CAAC;AAED,QAAM,WAAW,WAAS,gBAAgB,MAAM,YAAY,CAAC;AAE7D,WAAS,cAAc,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG;AAChD,UAAM,cAAc,aAAa,UAAU,KAAK;AAChD,UAAM,cAAc,YAAY,IAAI,UAAQ,QAAQ,SAAS,MAAM,IAAI,CAAC;AACxE,aAAS,KAAK,CAAC,QAAQ,gBAAgB,GAAG,GAAG,WAAW,CAAC,CAAC;AAAA,EAC5D;AAEA,WAAS,SAAS,MAAM,MAAM;AAC5B;AAAA,MACE,KAAK,CAAC,QAAQ,WAAW,MAAM,IAAI,GAAG,QAAQ,kBAAkB,CAAC,CAAC;AAAA,IACpE;AAAA,EACF;AAEA,WAAS,oBAAoB;AAC3B,aAAS,QAAQ,kBAAkB,CAAC;AAAA,EACtC;AAEA,WAAS,kBAAkB;AACzB;AAAA,MACE,KAAK,CAAC,QAAQ,WAAW,EAAE,IAAI,KAAK,GAAG,IAAI,GAAG,QAAQ,gBAAgB,CAAC,CAAC;AAAA,IAC1E;AAAA,EACF;AAEA,WAAS,SAAS,MAAM,MAAM;AAC5B,aAAS,KAAK,CAAC,QAAQ,SAAS,MAAM,IAAI,GAAG,QAAQ,kBAAkB,CAAC,CAAC,CAAC;AAAA,EAC5E;AAEA,WAAS,oBAAoB,MAAM;AACjC,aAAS,QAAQ,oBAAoB,KAAK,EAAE,CAAC;AAAA,EAC/C;AAEA,WAAS,iBAAiB,OAAO,OAAO,MAAM;AAC5C,UAAM,cAAc,MAAM,IAAI,UAAQ,SAAS,MAAM,IAAI,CAAC;AAC1D,aAAS,KAAK,CAAC,GAAG,aAAa,kBAAkB,CAAC,CAAC,CAAC;AAAA,EACtD;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,qBAAqB,gBAAgB,iBAAiB,WAAS,CAAC,MAAM,KAAK,CAAC;AAElF,IAAO,uBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/animation/animationConfig.tsx"],
|
|
4
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;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,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,qBAAqB;AAAA,IACxC,IAAI,EAAE,WAAW,eAAe,sBAAsB;AAAA,EACxD;AAAA,EACA,WAAW;AAAA,IACT,MAAM,EAAE,WAAW,qBAAqB;AAAA,IACxC,IAAI,EAAE,WAAW,eAAe,CAAC,sBAAsB;AAAA,EACzD;AAAA,EACA,UAAU,mBAAiB;AAAA,IACzB,QAAQ,EAAE,UAAU,sBAAsB;AAAA,IAC1C,OAAO,EAAE,SAAS,GAAG,WAAW,eAAe,WAAW;AAAA,IAC1D,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW,eACT,eAAe,CAAC,eAAe;AAAA,IAEnC;AAAA,IACA,OAAO;AAAA,MACL,WAAW,eACT,eAAe,CAAC,eAAe;AAAA,IAEnC;AAAA,EACF;AAAA,EACA,UAAU,qBAAmB;AAAA,IAC3B,QAAQ,EAAE,UAAU,sBAAsB;AAAA,IAC1C,OAAO,EAAE,SAAS,GAAG,WAAW,qBAAqB;AAAA,IACrD,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW,mBACT,iBAAiB,eAAe,CAAC;AAAA,IAErC;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WAAW,iBACT,iBAAiB,CAAC,eAAe;AAAA,IAErC;AAAA,EACF;AAAA,EACA,YAAY,OAAO;AAAA,IACjB,QAAQ,EAAE,UAAU,mBAAmB;AAAA,IACvC,OAAO,EAAE,SAAS,GAAG,WAAW,eAAe,WAAW;AAAA,IAC1D,MAAM,EAAE,SAAS,GAAG,WAAW,eAAe,0BAA0B;AAAA,IACxE,OAAO,EAAE,SAAS,GAAG,WAAW,eAAe,wBAAwB;AAAA,EACzE;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/classedComponents.tsx"],
|
|
4
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;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAG7B,MAAM,YAAY;AAClB,MAAM,kBAAkB,GAAG;AAC3B,MAAM,gBAAgB,GAAG;AACzB,MAAM,kBAAkB,GAAG;AAEpB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,SAAS;AAG3D,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,GAAG,mBAAmB;AAGtE,MAAM,gBAAgB,kBAAkB,KAAK,EAAE,eAAe;AAC9D,MAAM,0BAA0B,kBAAkB,iBAAiB,EAAE,iBAAiB,YAAY;AAClG,MAAM,4BAA4B,kBAAkB,QAAQ,EAAE,iBAAiB,eAAe;AAG9F,MAAM,cAAc,kBAAkB,KAAK,EAAE,eAAe,MAAM,CAAC,EAAE,UAAU,OAAO;AAAA,EAC3F,cAAc;AAChB,EAAE;AAEK,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,eAAe,SAAS,CAAC,EAAE,KAAK,OAAO,EAAE,KAAK,EAAE;AAClG,MAAM,WAAW,kBAAkB,YAAY,EAAE,eAAe,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAAA,EAC5G;AAAA,EACA;AACF,EAAE;AACK,MAAM,eAAe,kBAAkB,MAAM,EAAE,eAAe,eAAe;AAC7E,MAAM,cAAc,kBAAkB,KAAK,EAAE,eAAe,cAAc;AAG1E,MAAM,gBAAgB,kBAAkB,KAAK,EAAE,eAAe;AAC9D,MAAM,uBAAuB,kBAAkB,KAAK,EAAE,iBAAiB,SAAS;AAChF,MAAM,uBAAuB,kBAAkB,MAAM,EAAE,iBAAiB,SAAS;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indicator";
|
|
4
4
|
import { styled } from "@elliemae/ds-system";
|
|
5
5
|
const Wrapper = styled.div`
|
|
@@ -9,12 +9,13 @@ const Wrapper = styled.div`
|
|
|
9
9
|
width: 100%;
|
|
10
10
|
height: 100%;
|
|
11
11
|
`;
|
|
12
|
-
const LoadingIndicator = () => /* @__PURE__ */
|
|
13
|
-
"data-testid": "shuttle__loading-indicator"
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
})
|
|
12
|
+
const LoadingIndicator = () => /* @__PURE__ */ jsx(Wrapper, {
|
|
13
|
+
"data-testid": "shuttle__loading-indicator",
|
|
14
|
+
children: /* @__PURE__ */ jsx(DSCircularProgressIndicator, {
|
|
15
|
+
size: "xl",
|
|
16
|
+
showLabel: true
|
|
17
|
+
})
|
|
18
|
+
});
|
|
18
19
|
var LoadingIndicator_default = LoadingIndicator;
|
|
19
20
|
export {
|
|
20
21
|
LoadingIndicator,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/LoadingIndicator.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { styled } from '@elliemae/ds-system';\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n`;\n\nconst LoadingIndicator = () => (\n <Wrapper data-testid=\"shuttle__loading-indicator\">\n <DSCircularProgressIndicator size=\"xl\" showLabel />\n </Wrapper>\n);\n\nexport { LoadingIndicator };\nexport default LoadingIndicator;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,mCAAmC;AAC5C,SAAS,cAAc;AAEvB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,mBAAmB,MACvB,oBAAC;AAAA,EAAQ,eAAY;AAAA,EACnB,8BAAC;AAAA,IAA4B,MAAK;AAAA,IAAK,WAAS;AAAA,GAAC;AAAA,CACnD;AAIF,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|