@pega/cosmos-react-dnd 7.0.11 → 7.1.1
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/lib/components/DragDropList/DragDropList.d.ts.map +1 -1
- package/lib/components/DragDropList/DragDropList.js +25 -28
- package/lib/components/DragDropList/DragDropList.js.map +1 -1
- package/lib/components/DragDropList/DragDropListContext.d.ts +3 -2
- package/lib/components/DragDropList/DragDropListContext.d.ts.map +1 -1
- package/lib/components/DragDropList/DragDropListContext.js +3 -1
- package/lib/components/DragDropList/DragDropListContext.js.map +1 -1
- package/lib/components/DragHandle/DragHandle.d.ts +6 -5
- package/lib/components/DragHandle/DragHandle.d.ts.map +1 -1
- package/lib/components/DragHandle/DragHandle.js +20 -7
- package/lib/components/DragHandle/DragHandle.js.map +1 -1
- package/lib/components/DragHandle/index.d.ts +1 -1
- package/lib/components/DragHandle/index.d.ts.map +1 -1
- package/lib/components/DragHandle/index.js +1 -1
- package/lib/components/DragHandle/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,yBAAyB,CAAC;AAQxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAgB9D,QAAA,MAAM,YAAY,oQA0TjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -110,6 +110,12 @@ const DragDropList = ({ testId, id: idProp, accept, items, itemRenderer: ItemRen
|
|
|
110
110
|
removeById(item.id);
|
|
111
111
|
};
|
|
112
112
|
}
|
|
113
|
+
else if (item.destinationItemsRef !== internalItemsRef) {
|
|
114
|
+
item.removeFromCurrent = () => {
|
|
115
|
+
// Reverts destination list back to values before temporary hover over list to modify position of existing item
|
|
116
|
+
setInternalItems(internalItems);
|
|
117
|
+
};
|
|
118
|
+
}
|
|
113
119
|
item.normalizeDestination = normalizeItems;
|
|
114
120
|
item.changeDestination = triggerOnChange;
|
|
115
121
|
item.destinationItemsRef = internalItemsRef;
|
|
@@ -191,38 +197,29 @@ const DragDropList = ({ testId, id: idProp, accept, items, itemRenderer: ItemRen
|
|
|
191
197
|
});
|
|
192
198
|
}, [dragToRemove, internalItems, triggerOnChange]);
|
|
193
199
|
const emptyContent = EmptyRenderer ? _jsx(EmptyRenderer, {}) : null;
|
|
194
|
-
const
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
if (direction === 'prev') {
|
|
199
|
-
if (index === 0) {
|
|
200
|
+
const contextValue = useMemo(() => ({
|
|
201
|
+
keyboardReorderItem: (itemId, direction) => {
|
|
202
|
+
const index = internalItems.findIndex(({ id }) => id === itemId);
|
|
203
|
+
if (index === -1)
|
|
200
204
|
return;
|
|
205
|
+
if (direction === 'prev' && index !== 0) {
|
|
206
|
+
triggerOnChange([
|
|
207
|
+
...internalItems.slice(0, index - 1),
|
|
208
|
+
internalItems[index],
|
|
209
|
+
internalItems[index - 1],
|
|
210
|
+
...internalItems.slice(index + 1, internalItems.length)
|
|
211
|
+
]);
|
|
201
212
|
}
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
else if (direction === 'next') {
|
|
210
|
-
if (index === currentItems.length - 1) {
|
|
211
|
-
return;
|
|
213
|
+
else if (direction === 'next' && index !== internalItems.length - 1) {
|
|
214
|
+
triggerOnChange([
|
|
215
|
+
...internalItems.slice(0, index),
|
|
216
|
+
internalItems[index + 1],
|
|
217
|
+
internalItems[index],
|
|
218
|
+
...internalItems.slice(index + 2, internalItems.length)
|
|
219
|
+
]);
|
|
212
220
|
}
|
|
213
|
-
newItems = [
|
|
214
|
-
...currentItems.slice(0, index),
|
|
215
|
-
currentItems[index + 1],
|
|
216
|
-
currentItems[index],
|
|
217
|
-
...currentItems.slice(index + 2, currentItems.length)
|
|
218
|
-
];
|
|
219
|
-
}
|
|
220
|
-
else {
|
|
221
|
-
return;
|
|
222
221
|
}
|
|
223
|
-
|
|
224
|
-
}, [internalItems, triggerOnChange]);
|
|
225
|
-
const contextValue = useMemo(() => ({ keyboardReorderItem }), [keyboardReorderItem]);
|
|
222
|
+
}), [internalItems, triggerOnChange]);
|
|
226
223
|
return (_jsx(DragDropListContext.Provider, { value: contextValue, children: _jsx(Droppable, { accept: accept, onHover: onHover, onDrop: onDrop, children: ({ dropRef }) => {
|
|
227
224
|
return (_jsx(Component, { ref: (el) => {
|
|
228
225
|
dropRef(el);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragDropList.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,oBAAoB,EACpB,MAAM,EACP,MAAM,yBAAyB,CAAC;AAGjC,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAexD,MAAM,aAAa,GAAG,CAAC,EAAE,GAAG,EAAE,MAAM,EAAW,EAAU,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;AAErF,MAAM,YAAY,GAAG,CAA4B,EAC/C,MAAM,EACN,EAAE,EAAE,MAAM,EACV,MAAM,EACN,KAAK,EACL,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,QAAQ,EACnB,QAAQ,GAAG,QAAQ,EACnB,YAAY,GAAG,KAAK,EACpB,EAAE,EAAE,SAAS,GAAG,IAAI,EACpB,GAAG,SAAS,EACwB,EAAE,EAAE;IACxC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAwB,KAAK,CAAC,CAAC;IACjF,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,eAAe,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC9D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,EAAe,CAAC;IACtD,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;IAC1B,MAAM,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IAElC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAqB,EAAE;QACtD,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QACzD,OAAO,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvC,OAAO,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,qBAAqB,CAAC,GAAG,EAAE;QACzB,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAC/C,gBAAgB,CAAC,OAAO,GAAG,aAAa,CAAC;IAEzC,MAAM,eAAe,GAAG,oBAAoB,CAC1C,WAAW,CACT,CAAC,QAA+B,EAAE,WAAoB,EAAE,EAAE;QACxD,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,IAAyB,EAAE,EAAE;QAC5B,IAAI,CAAC,OAAO,EAAE;YACZ,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;YAC/B,OAAO,IAAI,CAAC;SACb;QAED,IAAI,eAAe,CAAC,OAAO;YAAE,OAAO,eAAe,CAAC,OAAO,CAAC;QAE5D,MAAM,OAAO,GAAG;YACd,GAAG,IAAI;YACP,GAAG,OAAO,CAAC,IAAI,CAAC;YAChB,EAAE,EAAE,IAAI,CAAC,EAAE;SACZ,CAAC;QACF,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;QAClC,OAAO,OAAO,CAAC;IACjB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,MAA8B,EAAE,aAAqB,EAAE,EAAE;QACxD,MAAM,cAAc,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC3F,IAAI,cAAc,KAAK,QAAQ,EAAE;YAC/B,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;YAChE,eAAe,CAAC,OAAO,CAAC,CAAC;SAC1B;aAAM;YACL,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACzB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,eAAe,CAAC,CAClD,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,IAAsB,EAAE,OAA8C,EAAU,EAAE;QACjF,YAAY,CAAC,OAAO,GAAG,YAAY,EAAE,CAAC;QACtC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC;QAC5C,IAAI,WAAW,GAAG,CAAC,CAAC,CAAC;QACrB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;QAEtE,MAAM,QAAQ,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC;QAC3C,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ;YAAE,OAAO,WAAW,CAAC;QAEhD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,CAAC,CAAC;QACtC,MAAM,MAAM,GAAG,kBAAkB,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QAChE,MAAM,MAAM,GAAG,kBAAkB,IAAI,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAEpF,IAAI,MAAM,EAAE;YACV,WAAW,GAAG,CAAC,CAAC;SACjB;aAAM,IAAI,MAAM,EAAE;YACjB,WAAW,GAAG,SAAS,KAAK,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC;SACjF;aAAM;YACL,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;gBAChC,IAAI,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC1B,IAAI,SAAS,KAAK,CAAC;wBAAE,WAAW,GAAG,CAAC,CAAC;oBACrC,OAAO,IAAI,CAAC;iBACb;gBACD,MAAM,YAAY,GAAG,kBAAkB,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC;gBAC/D,MAAM,SAAS,GAAG,kBAAkB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBACnE,IAAI,YAAY,IAAI,SAAS,EAAE;oBAC7B,IAAI,SAAS,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,SAAS;wBAAE,WAAW,GAAG,CAAC,CAAC;;wBACnD,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;oBACzB,OAAO,IAAI,CAAC;iBACb;gBACD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;SACJ;QAED,OAAO,WAAW,CAAC;IACrB,CAAC,EACD,CAAC,YAAY,EAAE,aAAa,CAAC,CAC9B,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,MAA8B,EAAQ,EAAE;QACtE,gBAAgB,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC;IACnF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,gBAAgB,CAAC,YAAY,CAAC,EAAE,CAC9B,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACxC,EAAE;YACF,IAAI;YACJ,IAAI;SACL,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,IAAyB,EAAE,OAA0B,EAAQ,EAAE;QAC9D,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YAAE,OAAO;QAErE,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;QAEtE,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,GAAG,GAAG,EAAE;gBAC5B,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACtB,CAAC,CAAC;SACH;QAED,IAAI,CAAC,oBAAoB,GAAG,cAAc,CAAC;QAC3C,IAAI,CAAC,iBAAiB,GAAG,eAAe,CAAC;QACzC,IAAI,CAAC,mBAAmB,GAAG,gBAAgB,CAAC;QAC5C,IAAI,CAAC,oBAAoB,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;QAE5B,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,QAAQ,KAAK,QAAQ;YAAE,WAAW,GAAG,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACvE,IAAI,QAAQ,KAAK,QAAQ;YAAE,WAAW,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;QAElE,IAAI,QAA4B,CAAC;QAEjC,sDAAsD;QACtD,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;YACpB,IAAI,WAAW,KAAK,SAAS,IAAI,QAAQ,KAAK,QAAQ;gBAAE,OAAO;YAE/D,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5D,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,eAAe,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;YAEjE,IAAI,OAAO,QAAQ,KAAK,UAAU;gBAAE,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;gBACzE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;SACjC;aAAM;YACL,QAAQ,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC;YAC9B,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;YAE1D,IAAI,OAAO,QAAQ,KAAK,UAAU;gBAAE,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;gBACzE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;SACjC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,CAAC,CAC/F,CAAC;IAEF,MAAM,OAAO,GAAG,aAAa,CAAC;IAC9B,MAAM,MAAM,GAAG,aAAa,CAAC;IAE7B,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,MAA8B,EAAE,EAAE,CACjC,GAA4D,EAAE;QAC5D,MAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;QAExE,OAAO;YACL,cAAc,EAAE,CAAC,IAAsB,EAAE,EAAE;gBACzC,gBAAgB,CAAC,YAAY,CAAC,EAAE;oBAC9B,MAAM,QAAQ,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;oBAChE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;oBACvC,OAAO,QAAQ,CAAC;gBAClB,CAAC,CAAC,CAAC;gBACH,cAAc,EAAE,CAAC;YACnB,CAAC;YACD,oBAAoB,EAAE,cAAc;YACpC,YAAY;YACZ,iBAAiB,EAAE,eAAe;YAClC,mBAAmB,EAAE,gBAAgB;YACrC,oBAAoB,EAAE,IAAI,GAAG,CAAC,CAAC,eAAe,CAAC,CAAC;YAChD,QAAQ,EAAE,MAAM;YAChB,aAAa,EAAE,MAAM;SACtB,CAAC;IACJ,CAAC,EACH,CAAC,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,CAAC,CACnF,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,IAAqC,EAAE,OAA0B,EAAE,EAAE;QACpE,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,IAAI,OAAO,CAAC,OAAO,EAAE,EAAE;YACrB,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;YACrD,IAAI,WAAW,CAAC;YAChB,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC;YAC9B,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAoB,CAAC,OAAQ,CAAC;YAC5D,IAAI,QAAQ,IAAI,aAAa,IAAI,QAAQ,KAAK,aAAa,EAAE;gBAC3D,IAAI,CAAC,YAAY,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;gBAC3C,WAAW,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;aACrE;YACD,IAAI,CAAC,iBAAiB,EAAE,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;SACzD;aAAM;YACL,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;YAC3B,IAAI,YAAY,EAAE;gBAChB,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;aACnE;iBAAM;gBACL,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC;aAC7B;SACF;QACD,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE;YACvC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,YAAY,EAAE,aAAa,EAAE,eAAe,CAAC,CAC/C,CAAC;IAEF,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAE9D,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,MAA2B,EAAE,SAA0B,EAAE,EAAE;QAC1D,IAAI,QAAQ,GAAG,aAAa,CAAC;QAC7B,MAAM,YAAY,GAAG,aAAa,CAAC;QACnC,MAAM,KAAK,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;QAChE,IAAI,SAAS,KAAK,MAAM,EAAE;YACxB,IAAI,KAAK,KAAK,CAAC,EAAE;gBACf,OAAO;aACR;YACD,QAAQ,GAAG;gBACT,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;gBACnC,YAAY,CAAC,KAAK,CAAC;gBACnB,YAAY,CAAC,KAAK,GAAG,CAAC,CAAC;gBACvB,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC;aACtD,CAAC;SACH;aAAM,IAAI,SAAS,KAAK,MAAM,EAAE;YAC/B,IAAI,KAAK,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;gBACrC,OAAO;aACR;YACD,QAAQ,GAAG;gBACT,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;gBAC/B,YAAY,CAAC,KAAK,GAAG,CAAC,CAAC;gBACvB,YAAY,CAAC,KAAK,CAAC;gBACnB,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC;aACtD,CAAC;SACH;aAAM;YACL,OAAO;SACR;QAED,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,EACD,CAAC,aAAa,EAAE,eAAe,CAAC,CACjC,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,mBAAmB,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAErF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC/C,KAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YACxD,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;gBACf,OAAO,CACL,KAAC,SAAS,IACR,GAAG,EAAE,CAAC,EAAe,EAAE,EAAE;wBACvB,OAAO,CAAC,EAAE,CAAC,CAAC;wBACZ,SAAS,CAAC,EAAE,CAAC,CAAC;oBAChB,CAAC,KACG,SAAS,YAEZ,aAAa,CAAC,MAAM,KAAK,CAAC;wBACzB,CAAC,CAAC,YAAY;wBACd,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;4BACvB,OAAO,CACL,KAAC,SAAS,IAER,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,EACzB,KAAK,EAAE,KAAK,YAEX,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE;oCACtC,OAAO,CACL,KAAC,YAAY,IACX,MAAM,EAAE,MAAM,KACV,IAAI,EACR,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,KAClB,SAAS,EACb,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAC3B,CACH,CAAC;gCACJ,CAAC,IAlBI,IAAI,CAAC,EAAE,CAmBF,CACb,CAAC;wBACJ,CAAC,CAAC,GACI,CACb,CAAC;YACJ,CAAC,GACS,GACiB,CAChC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useCallback, useState, useRef, useMemo } from 'react';\nimport type { RefObject, MutableRefObject } from 'react';\nimport type { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n useElement,\n useAfterInitialEffect,\n useTriggerableEffect,\n useUID\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport Draggable from '../Draggable';\nimport type { DraggableItem } from '../Draggable';\nimport Droppable from '../Droppable';\n\nimport DragDropListContext from './DragDropListContext';\nimport type { DragDropListProps } from './DragDropList.types';\n\ninterface DragDropListItem<T extends object = object> extends DraggableItem<T> {\n removeFromCurrent?: () => void;\n returnToSource?: (item: DraggableItem<T>) => void;\n normalizeDestination?: () => void;\n changeSource?: (itemId: DraggableItem<T>['id'], destinationId: string) => void;\n changeDestination?: (items: DragDropListItem<T>[], insertIndex?: number) => void;\n destinationItemsRef?: RefObject<DragDropListItem<T>[]>;\n transformedItemCache?: Set<MutableRefObject<DraggableItem<T> | null>>;\n sourceId?: string;\n destinationId?: string;\n}\n\nconst middleYOfRect = ({ top, bottom }: DOMRect): number => top + (bottom - top) / 2;\n\nconst DragDropList = <T extends object = object>({\n testId,\n id: idProp,\n accept,\n items,\n itemRenderer: ItemRenderer,\n emptyRenderer: EmptyRenderer,\n onChange,\n onEnter,\n pullMode = 'remove',\n pushMode = 'insert',\n dragToRemove = false,\n as: Component = 'ul',\n ...restProps\n}: DragDropListProps<T> & ForwardProps) => {\n const [internalItems, setInternalItems] = useState<DragDropListItem<T>[]>(items);\n const itemRectsRef = useRef<DOMRect[] | null>(null);\n const transformedItem = useRef<DraggableItem<T> | null>(null);\n const [listEl, setListEl] = useElement<HTMLElement>();\n const uniqueId = useUID();\n const listId = idProp ?? uniqueId;\n\n const getItemRects = useCallback((): DOMRect[] | null => {\n if (!listEl || listEl.children.length === 0) return null;\n return [...listEl.children].map(itemEl => {\n return itemEl.getBoundingClientRect();\n });\n }, [listEl]);\n\n useAfterInitialEffect(() => {\n setInternalItems(items);\n }, [items]);\n\n const internalItemsRef = useRef(internalItems);\n internalItemsRef.current = internalItems;\n\n const triggerOnChange = useTriggerableEffect(\n useCallback(\n (newItems: DragDropListItem<T>[], insertIndex?: number) => {\n onChange(newItems, insertIndex);\n },\n [onChange]\n )\n );\n\n const getTransformedItem = useCallback(\n (item: DragDropListItem<T>) => {\n if (!onEnter) {\n transformedItem.current = null;\n return item;\n }\n\n if (transformedItem.current) return transformedItem.current;\n\n const newItem = {\n ...item,\n ...onEnter(item),\n id: item.id\n };\n transformedItem.current = newItem;\n return newItem;\n },\n [onEnter]\n );\n\n const changeSource = useCallback(\n (itemId: DraggableItem<T>['id'], destinationId: string) => {\n const sourcePullMode = typeof pullMode === 'function' ? pullMode(destinationId) : pullMode;\n if (sourcePullMode === 'remove') {\n const newList = internalItems.filter(({ id }) => id !== itemId);\n triggerOnChange(newList);\n } else {\n setInternalItems(items);\n }\n },\n [pullMode, items, internalItems, triggerOnChange]\n );\n\n const getInsertIndex = useCallback(\n (item: DraggableItem<T>, monitor: DropTargetMonitor | DragSourceMonitor): number => {\n itemRectsRef.current = getItemRects();\n const { current: itemRects } = itemRectsRef;\n let insertIndex = -1;\n const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n const clientXY = monitor.getClientOffset();\n if (!itemRects || !clientXY) return insertIndex;\n\n const dragPreviewRectTop = clientXY.y;\n const atHead = dragPreviewRectTop < middleYOfRect(itemRects[0]);\n const atTail = dragPreviewRectTop >= middleYOfRect(itemRects[itemRects.length - 1]);\n\n if (atHead) {\n insertIndex = 0;\n } else if (atTail) {\n insertIndex = prevIndex === itemRects.length - 1 ? prevIndex : itemRects.length;\n } else {\n itemRects.some((rect, i, rects) => {\n if (i === rects.length - 1) {\n if (prevIndex === i) insertIndex = i;\n return true;\n }\n const belowCurrent = dragPreviewRectTop >= middleYOfRect(rect);\n const aboveNext = dragPreviewRectTop < middleYOfRect(rects[i + 1]);\n if (belowCurrent && aboveNext) {\n if (prevIndex !== -1 && i >= prevIndex) insertIndex = i;\n else insertIndex = i + 1;\n return true;\n }\n return false;\n });\n }\n\n return insertIndex;\n },\n [getItemRects, internalItems]\n );\n\n const removeById = useCallback((itemId: DraggableItem<T>['id']): void => {\n setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));\n }, []);\n\n const normalizeItems = useCallback(() => {\n setInternalItems(currentItems =>\n currentItems.map(({ id, data, type }) => ({\n id,\n data,\n type\n }))\n );\n }, []);\n\n const positionItems = useCallback(\n (item: DragDropListItem<T>, monitor: DropTargetMonitor): void => {\n if (!monitor.canDrop() || !monitor.isOver({ shallow: true })) return;\n\n const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n if (prevIndex === -1) {\n item.removeFromCurrent?.();\n item.removeFromCurrent = () => {\n removeById(item.id);\n };\n }\n\n item.normalizeDestination = normalizeItems;\n item.changeDestination = triggerOnChange;\n item.destinationItemsRef = internalItemsRef;\n item.transformedItemCache?.add(transformedItem);\n item.destinationId = listId;\n\n let insertIndex = 0;\n if (pushMode === 'insert') insertIndex = getInsertIndex(item, monitor);\n if (pushMode === 'append') insertIndex = internalItems.length + 1;\n\n let newItems: DraggableItem<T>[];\n\n // Is the current being dragged is within its own list\n if (prevIndex !== -1) {\n if (insertIndex === prevIndex || pushMode !== 'insert') return;\n\n newItems = internalItems.filter(({ id }) => id !== item.id);\n newItems.splice(insertIndex, 0, transformedItem.current ?? item);\n\n if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n else setInternalItems(newItems);\n } else {\n newItems = [...internalItems];\n newItems.splice(insertIndex, 0, getTransformedItem(item));\n\n if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n else setInternalItems(newItems);\n }\n },\n [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById, listId]\n );\n\n const onHover = positionItems;\n const onDrop = positionItems;\n\n const onBegin = useCallback(\n (itemId: DraggableItem<T>['id']) =>\n (): OmitStrict<DragDropListItem<T>, keyof DraggableItem<T>> => {\n const initialIndex = internalItems.findIndex(({ id }) => id === itemId);\n\n return {\n returnToSource: (item: DraggableItem<T>) => {\n setInternalItems(currentItems => {\n const newItems = currentItems.filter(({ id }) => id !== itemId);\n newItems.splice(initialIndex, 0, item);\n return newItems;\n });\n normalizeItems();\n },\n normalizeDestination: normalizeItems,\n changeSource,\n changeDestination: triggerOnChange,\n destinationItemsRef: internalItemsRef,\n transformedItemCache: new Set([transformedItem]),\n sourceId: listId,\n destinationId: listId\n };\n },\n [internalItems, normalizeItems, triggerOnChange, changeSource, removeById, listId]\n );\n\n const onEnd = useCallback(\n (item: DragDropListItem<T> | undefined, monitor: DragSourceMonitor) => {\n if (!item) return;\n\n if (monitor.didDrop()) {\n const { id: itemId, sourceId, destinationId } = item;\n let insertIndex;\n item.normalizeDestination?.();\n const destinationItems = item.destinationItemsRef!.current!;\n if (sourceId && destinationId && sourceId !== destinationId) {\n item.changeSource?.(itemId, destinationId);\n insertIndex = destinationItems.findIndex(({ id }) => id === itemId);\n }\n item.changeDestination?.(destinationItems, insertIndex);\n } else {\n item.removeFromCurrent?.();\n if (dragToRemove) {\n triggerOnChange(internalItems.filter(({ id }) => id !== item.id));\n } else {\n item.returnToSource?.(item);\n }\n }\n item.transformedItemCache?.forEach(ref => {\n ref.current = null;\n });\n },\n [dragToRemove, internalItems, triggerOnChange]\n );\n\n const emptyContent = EmptyRenderer ? <EmptyRenderer /> : null;\n\n const keyboardReorderItem = useCallback(\n (itemId: DraggableItem['id'], direction: 'prev' | 'next') => {\n let newItems = internalItems;\n const currentItems = internalItems;\n const index = currentItems.findIndex(({ id }) => id === itemId);\n if (direction === 'prev') {\n if (index === 0) {\n return;\n }\n newItems = [\n ...currentItems.slice(0, index - 1),\n currentItems[index],\n currentItems[index - 1],\n ...currentItems.slice(index + 1, currentItems.length)\n ];\n } else if (direction === 'next') {\n if (index === currentItems.length - 1) {\n return;\n }\n newItems = [\n ...currentItems.slice(0, index),\n currentItems[index + 1],\n currentItems[index],\n ...currentItems.slice(index + 2, currentItems.length)\n ];\n } else {\n return;\n }\n\n triggerOnChange(newItems);\n },\n [internalItems, triggerOnChange]\n );\n\n const contextValue = useMemo(() => ({ keyboardReorderItem }), [keyboardReorderItem]);\n\n return (\n <DragDropListContext.Provider value={contextValue}>\n <Droppable accept={accept} onHover={onHover} onDrop={onDrop}>\n {({ dropRef }) => {\n return (\n <Component\n ref={(el: HTMLElement) => {\n dropRef(el);\n setListEl(el);\n }}\n {...restProps}\n >\n {internalItems.length === 0\n ? emptyContent\n : internalItems.map(item => {\n return (\n <Draggable\n key={item.id}\n id={item.id}\n type={item.type}\n data={item.data}\n onBegin={onBegin(item.id)}\n onEnd={onEnd}\n >\n {({ dragRef, previewRef, collected }) => {\n return (\n <ItemRenderer\n testId={testId}\n {...item}\n dragRef={dragRef}\n previewRef={previewRef}\n {...collected}\n isDragging={!!item.sourceId}\n />\n );\n }}\n </Draggable>\n );\n })}\n </Component>\n );\n }}\n </Droppable>\n </DragDropListContext.Provider>\n );\n};\n\nexport default DragDropList;\n"]}
|
|
1
|
+
{"version":3,"file":"DragDropList.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState, useRef, useMemo } from 'react';\nimport type { RefObject, MutableRefObject } from 'react';\nimport type { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n useElement,\n useAfterInitialEffect,\n useTriggerableEffect,\n useUID\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport Draggable from '../Draggable';\nimport type { DraggableItem } from '../Draggable';\nimport Droppable from '../Droppable';\n\nimport DragDropListContext from './DragDropListContext';\nimport type { DragDropListContextValue } from './DragDropListContext';\nimport type { DragDropListProps } from './DragDropList.types';\n\ninterface DragDropListItem<T extends object = object> extends DraggableItem<T> {\n removeFromCurrent?: () => void;\n returnToSource?: (item: DraggableItem<T>) => void;\n normalizeDestination?: () => void;\n changeSource?: (itemId: DraggableItem<T>['id'], destinationId: string) => void;\n changeDestination?: (items: DragDropListItem<T>[], insertIndex?: number) => void;\n destinationItemsRef?: RefObject<DragDropListItem<T>[]>;\n transformedItemCache?: Set<MutableRefObject<DraggableItem<T> | null>>;\n sourceId?: string;\n destinationId?: string;\n}\n\nconst middleYOfRect = ({ top, bottom }: DOMRect): number => top + (bottom - top) / 2;\n\nconst DragDropList = <T extends object = object>({\n testId,\n id: idProp,\n accept,\n items,\n itemRenderer: ItemRenderer,\n emptyRenderer: EmptyRenderer,\n onChange,\n onEnter,\n pullMode = 'remove',\n pushMode = 'insert',\n dragToRemove = false,\n as: Component = 'ul',\n ...restProps\n}: DragDropListProps<T> & ForwardProps) => {\n const [internalItems, setInternalItems] = useState<DragDropListItem<T>[]>(items);\n const itemRectsRef = useRef<DOMRect[] | null>(null);\n const transformedItem = useRef<DraggableItem<T> | null>(null);\n const [listEl, setListEl] = useElement<HTMLElement>();\n const uniqueId = useUID();\n const listId = idProp ?? uniqueId;\n\n const getItemRects = useCallback((): DOMRect[] | null => {\n if (!listEl || listEl.children.length === 0) return null;\n return [...listEl.children].map(itemEl => {\n return itemEl.getBoundingClientRect();\n });\n }, [listEl]);\n\n useAfterInitialEffect(() => {\n setInternalItems(items);\n }, [items]);\n\n const internalItemsRef = useRef(internalItems);\n internalItemsRef.current = internalItems;\n\n const triggerOnChange = useTriggerableEffect(\n useCallback(\n (newItems: DragDropListItem<T>[], insertIndex?: number) => {\n onChange(newItems, insertIndex);\n },\n [onChange]\n )\n );\n\n const getTransformedItem = useCallback(\n (item: DragDropListItem<T>) => {\n if (!onEnter) {\n transformedItem.current = null;\n return item;\n }\n\n if (transformedItem.current) return transformedItem.current;\n\n const newItem = {\n ...item,\n ...onEnter(item),\n id: item.id\n };\n transformedItem.current = newItem;\n return newItem;\n },\n [onEnter]\n );\n\n const changeSource = useCallback(\n (itemId: DraggableItem<T>['id'], destinationId: string) => {\n const sourcePullMode = typeof pullMode === 'function' ? pullMode(destinationId) : pullMode;\n if (sourcePullMode === 'remove') {\n const newList = internalItems.filter(({ id }) => id !== itemId);\n triggerOnChange(newList);\n } else {\n setInternalItems(items);\n }\n },\n [pullMode, items, internalItems, triggerOnChange]\n );\n\n const getInsertIndex = useCallback(\n (item: DraggableItem<T>, monitor: DropTargetMonitor | DragSourceMonitor): number => {\n itemRectsRef.current = getItemRects();\n const { current: itemRects } = itemRectsRef;\n let insertIndex = -1;\n const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n const clientXY = monitor.getClientOffset();\n if (!itemRects || !clientXY) return insertIndex;\n\n const dragPreviewRectTop = clientXY.y;\n const atHead = dragPreviewRectTop < middleYOfRect(itemRects[0]);\n const atTail = dragPreviewRectTop >= middleYOfRect(itemRects[itemRects.length - 1]);\n\n if (atHead) {\n insertIndex = 0;\n } else if (atTail) {\n insertIndex = prevIndex === itemRects.length - 1 ? prevIndex : itemRects.length;\n } else {\n itemRects.some((rect, i, rects) => {\n if (i === rects.length - 1) {\n if (prevIndex === i) insertIndex = i;\n return true;\n }\n const belowCurrent = dragPreviewRectTop >= middleYOfRect(rect);\n const aboveNext = dragPreviewRectTop < middleYOfRect(rects[i + 1]);\n if (belowCurrent && aboveNext) {\n if (prevIndex !== -1 && i >= prevIndex) insertIndex = i;\n else insertIndex = i + 1;\n return true;\n }\n return false;\n });\n }\n\n return insertIndex;\n },\n [getItemRects, internalItems]\n );\n\n const removeById = useCallback((itemId: DraggableItem<T>['id']): void => {\n setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));\n }, []);\n\n const normalizeItems = useCallback(() => {\n setInternalItems(currentItems =>\n currentItems.map(({ id, data, type }) => ({\n id,\n data,\n type\n }))\n );\n }, []);\n\n const positionItems = useCallback(\n (item: DragDropListItem<T>, monitor: DropTargetMonitor): void => {\n if (!monitor.canDrop() || !monitor.isOver({ shallow: true })) return;\n\n const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n if (prevIndex === -1) {\n item.removeFromCurrent?.();\n item.removeFromCurrent = () => {\n removeById(item.id);\n };\n } else if (item.destinationItemsRef !== internalItemsRef) {\n item.removeFromCurrent = () => {\n // Reverts destination list back to values before temporary hover over list to modify position of existing item\n setInternalItems(internalItems);\n };\n }\n\n item.normalizeDestination = normalizeItems;\n item.changeDestination = triggerOnChange;\n item.destinationItemsRef = internalItemsRef;\n item.transformedItemCache?.add(transformedItem);\n item.destinationId = listId;\n\n let insertIndex = 0;\n if (pushMode === 'insert') insertIndex = getInsertIndex(item, monitor);\n if (pushMode === 'append') insertIndex = internalItems.length + 1;\n\n let newItems: DraggableItem<T>[];\n\n // Is the current being dragged is within its own list\n if (prevIndex !== -1) {\n if (insertIndex === prevIndex || pushMode !== 'insert') return;\n\n newItems = internalItems.filter(({ id }) => id !== item.id);\n newItems.splice(insertIndex, 0, transformedItem.current ?? item);\n\n if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n else setInternalItems(newItems);\n } else {\n newItems = [...internalItems];\n newItems.splice(insertIndex, 0, getTransformedItem(item));\n\n if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n else setInternalItems(newItems);\n }\n },\n [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById, listId]\n );\n\n const onHover = positionItems;\n const onDrop = positionItems;\n\n const onBegin = useCallback(\n (itemId: DraggableItem<T>['id']) =>\n (): OmitStrict<DragDropListItem<T>, keyof DraggableItem<T>> => {\n const initialIndex = internalItems.findIndex(({ id }) => id === itemId);\n\n return {\n returnToSource: (item: DraggableItem<T>) => {\n setInternalItems(currentItems => {\n const newItems = currentItems.filter(({ id }) => id !== itemId);\n newItems.splice(initialIndex, 0, item);\n return newItems;\n });\n normalizeItems();\n },\n normalizeDestination: normalizeItems,\n changeSource,\n changeDestination: triggerOnChange,\n destinationItemsRef: internalItemsRef,\n transformedItemCache: new Set([transformedItem]),\n sourceId: listId,\n destinationId: listId\n };\n },\n [internalItems, normalizeItems, triggerOnChange, changeSource, removeById, listId]\n );\n\n const onEnd = useCallback(\n (item: DragDropListItem<T> | undefined, monitor: DragSourceMonitor) => {\n if (!item) return;\n\n if (monitor.didDrop()) {\n const { id: itemId, sourceId, destinationId } = item;\n let insertIndex;\n item.normalizeDestination?.();\n const destinationItems = item.destinationItemsRef!.current!;\n if (sourceId && destinationId && sourceId !== destinationId) {\n item.changeSource?.(itemId, destinationId);\n insertIndex = destinationItems.findIndex(({ id }) => id === itemId);\n }\n item.changeDestination?.(destinationItems, insertIndex);\n } else {\n item.removeFromCurrent?.();\n if (dragToRemove) {\n triggerOnChange(internalItems.filter(({ id }) => id !== item.id));\n } else {\n item.returnToSource?.(item);\n }\n }\n item.transformedItemCache?.forEach(ref => {\n ref.current = null;\n });\n },\n [dragToRemove, internalItems, triggerOnChange]\n );\n\n const emptyContent = EmptyRenderer ? <EmptyRenderer /> : null;\n\n const contextValue: DragDropListContextValue = useMemo(\n () => ({\n keyboardReorderItem: (itemId, direction) => {\n const index = internalItems.findIndex(({ id }) => id === itemId);\n\n if (index === -1) return;\n\n if (direction === 'prev' && index !== 0) {\n triggerOnChange([\n ...internalItems.slice(0, index - 1),\n internalItems[index],\n internalItems[index - 1],\n ...internalItems.slice(index + 1, internalItems.length)\n ]);\n } else if (direction === 'next' && index !== internalItems.length - 1) {\n triggerOnChange([\n ...internalItems.slice(0, index),\n internalItems[index + 1],\n internalItems[index],\n ...internalItems.slice(index + 2, internalItems.length)\n ]);\n }\n }\n }),\n [internalItems, triggerOnChange]\n );\n\n return (\n <DragDropListContext.Provider value={contextValue}>\n <Droppable accept={accept} onHover={onHover} onDrop={onDrop}>\n {({ dropRef }) => {\n return (\n <Component\n ref={(el: HTMLElement) => {\n dropRef(el);\n setListEl(el);\n }}\n {...restProps}\n >\n {internalItems.length === 0\n ? emptyContent\n : internalItems.map(item => {\n return (\n <Draggable\n key={item.id}\n id={item.id}\n type={item.type}\n data={item.data}\n onBegin={onBegin(item.id)}\n onEnd={onEnd}\n >\n {({ dragRef, previewRef, collected }) => {\n return (\n <ItemRenderer\n testId={testId}\n {...item}\n dragRef={dragRef}\n previewRef={previewRef}\n {...collected}\n isDragging={!!item.sourceId}\n />\n );\n }}\n </Draggable>\n );\n })}\n </Component>\n );\n }}\n </Droppable>\n </DragDropListContext.Provider>\n );\n};\n\nexport default DragDropList;\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { DraggableItem } from '../Draggable';
|
|
3
|
-
|
|
3
|
+
export interface DragDropListContextValue {
|
|
4
4
|
keyboardReorderItem: (itemId: DraggableItem['id'], direction: 'prev' | 'next') => void;
|
|
5
|
-
}
|
|
5
|
+
}
|
|
6
|
+
declare const DragDropListContext: import("react").Context<DragDropListContextValue>;
|
|
6
7
|
export default DragDropListContext;
|
|
7
8
|
//# sourceMappingURL=DragDropListContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragDropListContext.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropListContext.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,
|
|
1
|
+
{"version":3,"file":"DragDropListContext.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropListContext.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,wBAAwB;IACvC,mBAAmB,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACxF;AAED,QAAA,MAAM,mBAAmB,mDAEvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragDropListContext.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropListContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DragDropListContext.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropListContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQtC,MAAM,mBAAmB,GAAG,aAAa,CAA2B;IAClE,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC9B,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport type { DraggableItem } from '../Draggable';\n\nexport interface DragDropListContextValue {\n keyboardReorderItem: (itemId: DraggableItem['id'], direction: 'prev' | 'next') => void;\n}\n\nconst DragDropListContext = createContext<DragDropListContextValue>({\n keyboardReorderItem: () => {}\n});\n\nexport default DragDropListContext;\n"]}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type WithAttributes } from '@pega/cosmos-react-core';
|
|
2
3
|
import type { DraggableItem } from '../Draggable';
|
|
3
|
-
export interface DragHandleProps {
|
|
4
|
+
export interface DragHandleProps extends WithAttributes<'div', {
|
|
4
5
|
/** The id of the item, used to keep track of the row when reordering */
|
|
5
6
|
itemId: DraggableItem['id'];
|
|
6
7
|
/** The label or name of the actual item being dragged, used for accessibility */
|
|
7
8
|
contextualLabel?: string;
|
|
8
|
-
|
|
9
|
-
ref?: Ref<HTMLButtonElement>;
|
|
9
|
+
}> {
|
|
10
10
|
}
|
|
11
|
-
declare const
|
|
11
|
+
export declare const StyledDragHandle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
+
declare const DragHandle: import("react").ForwardRefExoticComponent<Omit<DragHandleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
13
|
export default DragHandle;
|
|
13
14
|
//# sourceMappingURL=DragHandle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":";AAUA,OAAO,EAQL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,eACf,SAAQ,cAAc,CACpB,KAAK,EACL;IACE,wEAAwE;IACxE,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,gBAAgB,qOAM5B,CAAC;AAEF,QAAA,MAAM,UAAU,yHA0Ef,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,22 +1,33 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useContext, useEffect, useState } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
import { Icon, Button, useI18n, useUID, useConsolidatedRef, HiddenText } from '@pega/cosmos-react-core';
|
|
4
5
|
import DragDropListContext from '../DragDropList/DragDropListContext';
|
|
5
|
-
const
|
|
6
|
+
export const StyledDragHandle = styled(Button) `
|
|
7
|
+
cursor: grab;
|
|
8
|
+
|
|
9
|
+
&[aria-grabbed='true'] {
|
|
10
|
+
cursor: grabbing;
|
|
11
|
+
}
|
|
12
|
+
`;
|
|
13
|
+
const DragHandle = forwardRef(function DragHandle({ itemId, contextualLabel, ...restProps }, ref) {
|
|
6
14
|
const [grabbed, setGrabbed] = useState(false);
|
|
15
|
+
const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);
|
|
7
16
|
const context = useContext(DragDropListContext);
|
|
8
17
|
const descriptionId = useUID();
|
|
9
18
|
const t = useI18n();
|
|
19
|
+
const dragHandleRef = useConsolidatedRef(ref);
|
|
10
20
|
const handleKeyDown = (e) => {
|
|
11
21
|
// Limit preventDefault and stopPropagation to these codes to not interfere with tab key behavior
|
|
12
|
-
if (
|
|
22
|
+
if (['Enter', 'Space', 'ArrowUp', 'ArrowDown'].includes(e.code)) {
|
|
13
23
|
e.preventDefault();
|
|
14
24
|
e.stopPropagation();
|
|
15
25
|
}
|
|
16
|
-
if (e.code === 'Space') {
|
|
26
|
+
if (e.code === 'Enter' || e.code === 'Space') {
|
|
17
27
|
setGrabbed(prev => !prev);
|
|
28
|
+
setKeyboardGrabbed(prev => !prev);
|
|
18
29
|
}
|
|
19
|
-
else if (grabbed
|
|
30
|
+
else if (grabbed)
|
|
20
31
|
if (e.code === 'ArrowUp') {
|
|
21
32
|
context.keyboardReorderItem(itemId, 'prev');
|
|
22
33
|
}
|
|
@@ -29,19 +40,21 @@ const DragHandle = forwardRef(({ itemId, contextualLabel }, ref) => {
|
|
|
29
40
|
return;
|
|
30
41
|
const removeGrabbed = () => {
|
|
31
42
|
setGrabbed(false);
|
|
43
|
+
setKeyboardGrabbed(false);
|
|
32
44
|
};
|
|
33
45
|
document.addEventListener('dragend', removeGrabbed);
|
|
34
46
|
return () => {
|
|
35
47
|
document.removeEventListener('dragend', removeGrabbed);
|
|
36
48
|
};
|
|
37
49
|
}, [grabbed]);
|
|
38
|
-
|
|
50
|
+
const dragText = t('drag');
|
|
51
|
+
return (_jsxs(StyledDragHandle, { ...restProps, forwardedAs: 'div', role: 'button', tabIndex: 0, label: grabbed ? undefined : dragText, "aria-label": contextualLabel ? `${dragText} - ${contextualLabel}` : dragText, "aria-describedby": descriptionId, ref: dragHandleRef, icon: true, variant: 'simple', compact: true, "aria-grabbed": grabbed, onKeyDown: handleKeyDown, onMouseDown: () => {
|
|
39
52
|
setGrabbed(true);
|
|
40
53
|
}, onMouseUp: () => {
|
|
41
54
|
setGrabbed(false);
|
|
42
55
|
}, onBlur: () => {
|
|
43
56
|
setGrabbed(false);
|
|
44
|
-
}, children: [_jsx(Icon, { name: 'drag' }), _jsx(
|
|
57
|
+
}, children: [_jsx(Icon, { name: keyboardGrabbed ? 'arrow-micro-up-down' : 'drag' }), _jsx(HiddenText, { id: descriptionId, children: t('drag_handle_description') })] }));
|
|
45
58
|
});
|
|
46
59
|
export default DragHandle;
|
|
47
60
|
//# sourceMappingURL=DragHandle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragHandle.js","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,QAAQ,
|
|
1
|
+
{"version":3,"file":"DragHandle.js","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useContext,\n useEffect,\n useState,\n type KeyboardEvent,\n type PropsWithoutRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n Icon,\n Button,\n useI18n,\n useUID,\n useConsolidatedRef,\n HiddenText,\n type RefElement,\n type WithAttributes\n} from '@pega/cosmos-react-core';\n\nimport DragDropListContext from '../DragDropList/DragDropListContext';\nimport type { DraggableItem } from '../Draggable';\n\nexport interface DragHandleProps\n extends WithAttributes<\n 'div',\n {\n /** The id of the item, used to keep track of the row when reordering */\n itemId: DraggableItem['id'];\n /** The label or name of the actual item being dragged, used for accessibility */\n contextualLabel?: string;\n }\n > {}\n\nexport const StyledDragHandle = styled(Button)`\n cursor: grab;\n\n &[aria-grabbed='true'] {\n cursor: grabbing;\n }\n`;\n\nconst DragHandle = forwardRef<RefElement<DragHandleProps>, PropsWithoutRef<DragHandleProps>>(\n function DragHandle({ itemId, contextualLabel, ...restProps }, ref) {\n const [grabbed, setGrabbed] = useState(false);\n const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);\n const context = useContext(DragDropListContext);\n const descriptionId = useUID();\n const t = useI18n();\n const dragHandleRef = useConsolidatedRef(ref);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n // Limit preventDefault and stopPropagation to these codes to not interfere with tab key behavior\n if (['Enter', 'Space', 'ArrowUp', 'ArrowDown'].includes(e.code)) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (e.code === 'Enter' || e.code === 'Space') {\n setGrabbed(prev => !prev);\n setKeyboardGrabbed(prev => !prev);\n } else if (grabbed)\n if (e.code === 'ArrowUp') {\n context.keyboardReorderItem(itemId, 'prev');\n } else if (e.code === 'ArrowDown') {\n context.keyboardReorderItem(itemId, 'next');\n }\n };\n\n useEffect(() => {\n if (!grabbed) return;\n\n const removeGrabbed = () => {\n setGrabbed(false);\n setKeyboardGrabbed(false);\n };\n\n document.addEventListener('dragend', removeGrabbed);\n\n return () => {\n document.removeEventListener('dragend', removeGrabbed);\n };\n }, [grabbed]);\n\n const dragText = t('drag');\n\n return (\n <StyledDragHandle\n {...restProps}\n forwardedAs='div'\n role='button'\n tabIndex={0}\n label={grabbed ? undefined : dragText}\n aria-label={contextualLabel ? `${dragText} - ${contextualLabel}` : dragText}\n aria-describedby={descriptionId}\n ref={dragHandleRef}\n icon\n variant='simple'\n compact\n aria-grabbed={grabbed}\n onKeyDown={handleKeyDown}\n onMouseDown={() => {\n setGrabbed(true);\n }}\n onMouseUp={() => {\n setGrabbed(false);\n }}\n onBlur={() => {\n setGrabbed(false);\n }}\n >\n <Icon name={keyboardGrabbed ? 'arrow-micro-up-down' : 'drag'} />\n <HiddenText id={descriptionId}>{t('drag_handle_description')}</HiddenText>\n </StyledDragHandle>\n );\n }\n);\n\nexport default DragHandle;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './DragHandle';
|
|
1
|
+
export { default, StyledDragHandle } from './DragHandle';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DragHandle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './DragHandle';\nexport type { DragHandleProps } from './DragHandle';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DragHandle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default, StyledDragHandle } from './DragHandle';\nexport type { DragHandleProps } from './DragHandle';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-dnd",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.1.1",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"build": "tsc -b tsconfig.build.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@pega/cosmos-react-core": "7.
|
|
22
|
+
"@pega/cosmos-react-core": "7.1.1",
|
|
23
23
|
"@types/react": "^17.0.62",
|
|
24
24
|
"@types/react-dom": "^17.0.20",
|
|
25
25
|
"@types/styled-components": "^5.1.26",
|