@pega/cosmos-react-dnd 2.0.0-dev.2.0 → 2.0.0-dev.21.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.
Files changed (60) hide show
  1. package/lib/components/{DragDrop → DragDropList}/DragDropList.d.ts +1 -1
  2. package/lib/components/DragDropList/DragDropList.d.ts.map +1 -0
  3. package/lib/components/{DragDrop → DragDropList}/DragDropList.js +35 -34
  4. package/lib/components/DragDropList/DragDropList.js.map +1 -0
  5. package/lib/components/DragDropList/DragDropList.types.d.ts +34 -0
  6. package/lib/components/DragDropList/DragDropList.types.d.ts.map +1 -0
  7. package/lib/components/DragDropList/DragDropList.types.js +2 -0
  8. package/lib/components/DragDropList/DragDropList.types.js.map +1 -0
  9. package/lib/components/DragDropList/index.d.ts +3 -0
  10. package/lib/components/DragDropList/index.d.ts.map +1 -0
  11. package/lib/components/DragDropList/index.js +2 -0
  12. package/lib/components/DragDropList/index.js.map +1 -0
  13. package/lib/components/{DragDrop → DragDropManager}/DragDropManager.d.ts +0 -0
  14. package/lib/components/DragDropManager/DragDropManager.d.ts.map +1 -0
  15. package/lib/components/DragDropManager/DragDropManager.js +8 -0
  16. package/lib/components/DragDropManager/DragDropManager.js.map +1 -0
  17. package/lib/components/DragDropManager/index.d.ts +2 -0
  18. package/lib/components/DragDropManager/index.d.ts.map +1 -0
  19. package/lib/components/DragDropManager/index.js +2 -0
  20. package/lib/components/DragDropManager/index.js.map +1 -0
  21. package/lib/components/Draggable/Draggable.d.ts +28 -0
  22. package/lib/components/Draggable/Draggable.d.ts.map +1 -0
  23. package/lib/components/{DragDrop → Draggable}/Draggable.js +8 -8
  24. package/lib/components/Draggable/Draggable.js.map +1 -0
  25. package/lib/components/Draggable/index.d.ts +2 -0
  26. package/lib/components/Draggable/index.d.ts.map +1 -0
  27. package/lib/components/Draggable/index.js +2 -0
  28. package/lib/components/Draggable/index.js.map +1 -0
  29. package/lib/components/Droppable/Droppable.d.ts +23 -0
  30. package/lib/components/Droppable/Droppable.d.ts.map +1 -0
  31. package/lib/components/{DragDrop → Droppable}/Droppable.js +2 -2
  32. package/lib/components/Droppable/Droppable.js.map +1 -0
  33. package/lib/components/Droppable/index.d.ts +2 -0
  34. package/lib/components/Droppable/index.d.ts.map +1 -0
  35. package/lib/components/Droppable/index.js +2 -0
  36. package/lib/components/Droppable/index.js.map +1 -0
  37. package/lib/index.d.ts +8 -1
  38. package/lib/index.d.ts.map +1 -1
  39. package/lib/index.js +8 -1
  40. package/lib/index.js.map +1 -1
  41. package/package.json +16 -16
  42. package/lib/components/DragDrop/DragDrop.types.d.ts +0 -70
  43. package/lib/components/DragDrop/DragDrop.types.d.ts.map +0 -1
  44. package/lib/components/DragDrop/DragDrop.types.js +0 -2
  45. package/lib/components/DragDrop/DragDrop.types.js.map +0 -1
  46. package/lib/components/DragDrop/DragDropList.d.ts.map +0 -1
  47. package/lib/components/DragDrop/DragDropList.js.map +0 -1
  48. package/lib/components/DragDrop/DragDropManager.d.ts.map +0 -1
  49. package/lib/components/DragDrop/DragDropManager.js +0 -11
  50. package/lib/components/DragDrop/DragDropManager.js.map +0 -1
  51. package/lib/components/DragDrop/Draggable.d.ts +0 -5
  52. package/lib/components/DragDrop/Draggable.d.ts.map +0 -1
  53. package/lib/components/DragDrop/Draggable.js.map +0 -1
  54. package/lib/components/DragDrop/Droppable.d.ts +0 -5
  55. package/lib/components/DragDrop/Droppable.d.ts.map +0 -1
  56. package/lib/components/DragDrop/Droppable.js.map +0 -1
  57. package/lib/components/DragDrop/index.d.ts +0 -10
  58. package/lib/components/DragDrop/index.d.ts.map +0 -1
  59. package/lib/components/DragDrop/index.js +0 -5
  60. package/lib/components/DragDrop/index.js.map +0 -1
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { ForwardProps } from '@pega/cosmos-react-core';
3
- import { DragDropListProps } from './DragDrop.types';
3
+ import { DragDropListProps } from './DragDropList.types';
4
4
  declare const DragDropList: <T extends object = object>({ accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, pullMode, pushMode, as: Component, ...restProps }: DragDropListProps<T> & ForwardProps) => JSX.Element;
5
5
  export default DragDropList;
6
6
  //# sourceMappingURL=DragDropList.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAYzD,QAAA,MAAM,YAAY,yNA2NjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -1,7 +1,8 @@
1
- import React, { useCallback, useState, useRef } from 'react';
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useCallback, useState, useRef } from 'react';
2
3
  import { useElement, useAfterInitialEffect, useTriggerableLayoutEffect } from '@pega/cosmos-react-core';
3
- import Draggable from './Draggable';
4
- import Droppable from './Droppable';
4
+ import Draggable from '../Draggable';
5
+ import Droppable from '../Droppable';
5
6
  const middleYOfRect = ({ top, bottom }) => top + (bottom - top) / 2;
6
7
  const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, pullMode = 'remove', pushMode = 'insert', as: Component = 'ul', ...restProps }) => {
7
8
  const [internalItems, setInternalItems] = useState(items);
@@ -57,12 +58,12 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
57
58
  });
58
59
  }
59
60
  return insertIndex;
60
- }, [getItemRects, internalItems, itemRectsRef.current]);
61
+ }, [getItemRects, internalItems]);
61
62
  const removeById = useCallback((itemId) => {
62
63
  if (pullMode === 'remove') {
63
64
  setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));
64
65
  }
65
- }, [internalItems, pullMode]);
66
+ }, [pullMode]);
66
67
  const normalizeItems = useCallback(() => {
67
68
  setInternalItems(currentItems => currentItems.map(({ id, data, type }) => ({
68
69
  id,
@@ -71,12 +72,11 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
71
72
  })));
72
73
  }, []);
73
74
  const positionItems = useCallback((item, monitor) => {
74
- var _a;
75
75
  if (!monitor.canDrop())
76
76
  return;
77
77
  const prevIndex = internalItems.findIndex(({ id }) => id === item.id);
78
78
  if (prevIndex === -1) {
79
- (_a = item.removeFromCurrent) === null || _a === void 0 ? void 0 : _a.call(item);
79
+ item.removeFromCurrent?.();
80
80
  item.removeFromCurrent = () => {
81
81
  removeById(item.id);
82
82
  };
@@ -108,7 +108,7 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
108
108
  else
109
109
  setInternalItems(newItems);
110
110
  }
111
- }, [pushMode, getInsertIndex, internalItems, removeById]);
111
+ }, [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById]);
112
112
  const onHover = positionItems;
113
113
  const onDrop = positionItems;
114
114
  const onBegin = useCallback((itemId) => () => {
@@ -129,39 +129,40 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
129
129
  changeSource: triggerOnChange,
130
130
  changeDestination: triggerOnChange
131
131
  };
132
- }, [removeById, internalItems]);
132
+ }, [internalItems, normalizeItems, triggerOnChange, removeById]);
133
133
  const onEnd = useCallback((item, monitor) => {
134
- var _a, _b, _c, _d, _e;
134
+ if (!item)
135
+ return;
135
136
  if (monitor.didDrop()) {
136
- (_a = item.normalizeDestination) === null || _a === void 0 ? void 0 : _a.call(item);
137
+ item.normalizeDestination?.();
137
138
  if (item.changeSource !== item.changeDestination)
138
- (_b = item.changeSource) === null || _b === void 0 ? void 0 : _b.call(item);
139
- (_c = item.changeDestination) === null || _c === void 0 ? void 0 : _c.call(item);
139
+ item.changeSource?.();
140
+ item.changeDestination?.();
140
141
  }
141
142
  else {
142
- (_d = item.removeFromCurrent) === null || _d === void 0 ? void 0 : _d.call(item);
143
- (_e = item.returnToSource) === null || _e === void 0 ? void 0 : _e.call(item, item);
143
+ item.removeFromCurrent?.();
144
+ item.returnToSource?.(item);
144
145
  }
145
146
  }, []);
146
- const emptyContent = EmptyRenderer ? React.createElement(EmptyRenderer, null) : null;
147
- return (React.createElement(Droppable, { accept: accept, onHover: onHover, onDrop: onDrop }, ({ dropRef }) => {
148
- return (React.createElement(Component, { ref: (el) => {
149
- dropRef(el);
150
- setListEl(el);
151
- }, ...restProps }, internalItems.length === 0
152
- ? emptyContent
153
- : internalItems.map(item => {
154
- return (React.createElement(Draggable, { key: item.id, id: item.id, type: item.type, data: item.data, onBegin: onBegin(item.id), onEnd: onEnd }, ({ dragRef, previewRef, collected }) => {
155
- return (React.createElement(ItemRenderer, { ...{
156
- ...item,
157
- dragRef,
158
- previewRef,
159
- ...collected,
160
- isDragging: collected.isDragging || !!item.removeFromCurrent
161
- } }));
162
- }));
163
- })));
164
- }));
147
+ const emptyContent = EmptyRenderer ? _jsx(EmptyRenderer, {}, void 0) : null;
148
+ return (_jsx(Droppable, { accept: accept, onHover: onHover, onDrop: onDrop, children: ({ dropRef }) => {
149
+ return (_jsx(Component, { ref: (el) => {
150
+ dropRef(el);
151
+ setListEl(el);
152
+ }, ...restProps, children: internalItems.length === 0
153
+ ? emptyContent
154
+ : internalItems.map(item => {
155
+ return (_jsx(Draggable, { id: item.id, type: item.type, data: item.data, onBegin: onBegin(item.id), onEnd: onEnd, children: ({ dragRef, previewRef, collected }) => {
156
+ return (_jsx(ItemRenderer, { ...{
157
+ ...item,
158
+ dragRef,
159
+ previewRef,
160
+ ...collected,
161
+ isDragging: collected.isDragging || !!item.removeFromCurrent
162
+ } }, void 0));
163
+ } }, item.id));
164
+ }) }, void 0));
165
+ } }, void 0));
165
166
  };
166
167
  export default DragDropList;
167
168
  //# sourceMappingURL=DragDropList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DragDropList.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState, useRef } from 'react';\nimport { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n useElement,\n useAfterInitialEffect,\n useTriggerableLayoutEffect,\n ForwardProps,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport Draggable, { DraggableItem } from '../Draggable';\nimport Droppable from '../Droppable';\n\nimport { 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?: () => void;\n changeDestination?: () => void;\n}\n\nconst middleYOfRect = ({ top, bottom }: DOMRect): number => top + (bottom - top) / 2;\n\nconst DragDropList = <T extends object = object>({\n accept,\n items,\n itemRenderer: ItemRenderer,\n emptyRenderer: EmptyRenderer,\n onChange,\n pullMode = 'remove',\n pushMode = 'insert',\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 [listEl, setListEl] = useElement<HTMLElement>();\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 triggerOnChange = useTriggerableLayoutEffect(\n useCallback(() => {\n onChange(internalItems);\n }, [onChange, internalItems])\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(\n (itemId: DraggableItem<T>['id']): void => {\n if (pullMode === 'remove') {\n setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));\n }\n },\n [pullMode]\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()) 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 item.normalizeDestination = normalizeItems;\n item.changeDestination = triggerOnChange;\n }\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, 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, item);\n\n if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n else setInternalItems(newItems);\n }\n },\n [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById]\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 removeFromCurrent: () => {\n removeById(itemId);\n },\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: triggerOnChange,\n changeDestination: triggerOnChange\n };\n },\n [internalItems, normalizeItems, triggerOnChange, removeById]\n );\n\n const onEnd = useCallback((item: DragDropListItem<T> | undefined, monitor: DragSourceMonitor) => {\n if (!item) return;\n\n if (monitor.didDrop()) {\n item.normalizeDestination?.();\n if (item.changeSource !== item.changeDestination) item.changeSource?.();\n item.changeDestination?.();\n } else {\n item.removeFromCurrent?.();\n item.returnToSource?.(item);\n }\n }, []);\n\n const emptyContent = EmptyRenderer ? <EmptyRenderer /> : null;\n\n return (\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 {...{\n ...item,\n dragRef,\n previewRef,\n ...collected,\n isDragging: collected.isDragging || !!item.removeFromCurrent\n }}\n />\n );\n }}\n </Draggable>\n );\n })}\n </Component>\n );\n }}\n </Droppable>\n );\n};\n\nexport default DragDropList;\n"]}
@@ -0,0 +1,34 @@
1
+ import { RefCallback, ComponentType } from 'react';
2
+ import { AsProp, BaseProps } from '@pega/cosmos-react-core';
3
+ import { DraggableItem, DraggableCollectedProps } from '../Draggable';
4
+ import { DroppableProps } from '../Droppable';
5
+ export interface ItemRendererProps<T extends object = object> extends DraggableItem<T>, DraggableCollectedProps {
6
+ dragRef: RefCallback<HTMLElement>;
7
+ previewRef: RefCallback<HTMLElement>;
8
+ }
9
+ export interface DragDropListProps<T extends object = object> extends AsProp, BaseProps {
10
+ /** Type of item allowed to be dropped on this list (useful when there is multiple lists that share data). */
11
+ accept: DroppableProps['accept'];
12
+ /** Array of data objects used for the list. */
13
+ items: DraggableItem<T>[];
14
+ /**
15
+ * @default "remove"
16
+ */
17
+ pullMode?: 'clone' | 'remove';
18
+ /**
19
+ * @default "insert"
20
+ */
21
+ pushMode?: 'insert' | 'prepend' | 'append' | ((a: DraggableItem<T>, b: DraggableItem<T>) => number);
22
+ /** User defined function that should return content for the draggable element. */
23
+ itemRenderer: ComponentType<ItemRendererProps<T>>;
24
+ /**
25
+ * Enable drag handle elements for each of the list items. By default the entire element is draggable.
26
+ * @default false
27
+ */
28
+ dragHandles?: boolean;
29
+ /** User defined function(Component) that should return content for when the list is empty. */
30
+ emptyRenderer?: ComponentType;
31
+ /** Called when list data is updated. */
32
+ onChange: (items: DragDropListProps<T>['items']) => void;
33
+ }
34
+ //# sourceMappingURL=DragDropList.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DragDropList.types.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAC1D,SAAQ,aAAa,CAAC,CAAC,CAAC,EACtB,uBAAuB;IACzB,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAClC,UAAU,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,MAAM,EAAE,SAAS;IACrF,6GAA6G;IAC7G,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IACjC,+CAA+C;IAC/C,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EACL,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;IAC3D,kFAAkF;IAClF,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wCAAwC;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CAC1D"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=DragDropList.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DragDropList.types.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.types.ts"],"names":[],"mappings":"","sourcesContent":["import { RefCallback, ComponentType } from 'react';\n\nimport { AsProp, BaseProps } from '@pega/cosmos-react-core';\n\nimport { DraggableItem, DraggableCollectedProps } from '../Draggable';\nimport { DroppableProps } from '../Droppable';\n\nexport interface ItemRendererProps<T extends object = object>\n extends DraggableItem<T>,\n DraggableCollectedProps {\n dragRef: RefCallback<HTMLElement>;\n previewRef: RefCallback<HTMLElement>;\n}\n\nexport interface DragDropListProps<T extends object = object> extends AsProp, BaseProps {\n /** Type of item allowed to be dropped on this list (useful when there is multiple lists that share data). */\n accept: DroppableProps['accept'];\n /** Array of data objects used for the list. */\n items: DraggableItem<T>[];\n /**\n * @default \"remove\"\n */\n pullMode?: 'clone' | 'remove';\n /**\n * @default \"insert\"\n */\n pushMode?:\n | 'insert'\n | 'prepend'\n | 'append'\n | ((a: DraggableItem<T>, b: DraggableItem<T>) => number);\n /** User defined function that should return content for the draggable element. */\n itemRenderer: ComponentType<ItemRendererProps<T>>;\n /**\n * Enable drag handle elements for each of the list items. By default the entire element is draggable.\n * @default false\n */\n dragHandles?: boolean;\n /** User defined function(Component) that should return content for when the list is empty. */\n emptyRenderer?: ComponentType;\n /** Called when list data is updated. */\n onChange: (items: DragDropListProps<T>['items']) => void;\n}\n"]}
@@ -0,0 +1,3 @@
1
+ export { default } from './DragDropList';
2
+ export { DragDropListProps, ItemRendererProps } from './DragDropList.types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './DragDropList';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DragDropList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './DragDropList';\nexport { DragDropListProps, ItemRendererProps } from './DragDropList.types';\n"]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DragDropManager.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropManager/DragDropManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAI5D,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { DndProvider } from 'react-dnd';
3
+ import { HTML5Backend } from 'react-dnd-html5-backend';
4
+ const DragDropManager = ({ children }) => {
5
+ return _jsx(DndProvider, { backend: HTML5Backend, children: children }, void 0);
6
+ };
7
+ export default DragDropManager;
8
+ //# sourceMappingURL=DragDropManager.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DragDropManager.js","sourceRoot":"","sources":["../../../src/components/DragDropManager/DragDropManager.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAMvD,MAAM,eAAe,GAA4C,CAAC,EAChE,QAAQ,EACa,EAAE,EAAE;IACzB,OAAO,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,YAAG,QAAQ,WAAe,CAAC;AACtE,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nexport interface DragDropManagerProps {\n children: ReactNode;\n}\n\nconst DragDropManager: FunctionComponent<DragDropManagerProps> = ({\n children\n}: DragDropManagerProps) => {\n return <DndProvider backend={HTML5Backend}>{children}</DndProvider>;\n};\n\nexport default DragDropManager;\n"]}
@@ -0,0 +1,2 @@
1
+ export { default, DragDropManagerProps } from './DragDropManager';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './DragDropManager';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DragDropManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAwB,MAAM,mBAAmB,CAAC","sourcesContent":["export { default, DragDropManagerProps } from './DragDropManager';\n"]}
@@ -0,0 +1,28 @@
1
+ import { RefCallback, ReactElement } from 'react';
2
+ import { DragSourceMonitor } from 'react-dnd';
3
+ import { SourceType } from 'dnd-core';
4
+ export interface DraggableItem<T extends object = object> {
5
+ /** Draggable item id */
6
+ id: string;
7
+ /** Draggable item type */
8
+ type: SourceType;
9
+ /** Arbitrary data associated with this drag item */
10
+ data?: T;
11
+ }
12
+ export interface DraggableCollectedProps {
13
+ isDragging: boolean;
14
+ dragEl: HTMLElement | null;
15
+ }
16
+ export interface DraggableProps<T extends object = object> extends DraggableItem<T> {
17
+ onBegin?: (monitor: DragSourceMonitor) => object;
18
+ /** Called when drag item is dropped on a valid drop target */
19
+ onEnd?: (item: DraggableItem<T> | undefined, monitor: DragSourceMonitor) => void;
20
+ children: (props: {
21
+ dragRef: RefCallback<HTMLElement>;
22
+ previewRef: RefCallback<HTMLElement>;
23
+ collected: DraggableCollectedProps;
24
+ }) => ReactElement;
25
+ }
26
+ declare const Draggable: <T extends object = object>({ id, type, data, onBegin, onEnd, children }: DraggableProps<T>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
27
+ export default Draggable;
28
+ //# sourceMappingURL=Draggable.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../../src/components/Draggable/Draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAW,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACtD,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,oDAAoD;IACpD,IAAI,CAAC,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;IACjF,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,MAAM,CAAC;IACjD,8DAA8D;IAC9D,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjF,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QAClC,UAAU,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QACrC,SAAS,EAAE,uBAAuB,CAAC;KACpC,KAAK,YAAY,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,wKA+Bd,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1,16 +1,16 @@
1
1
  import { useRef } from 'react';
2
2
  import { useDrag } from 'react-dnd';
3
- const Draggable = ({ id, type, data, children, onBegin, onEnd: end }) => {
3
+ const Draggable = ({ id, type, data, onBegin, onEnd, children }) => {
4
4
  const dragElRef = useRef(null);
5
- const [collected, dragRef, previewRef] = useDrag({
6
- item: { id, type, data },
7
- collect: (monitor) => ({
5
+ const [collected, dragRef, previewRef] = useDrag(() => ({
6
+ type,
7
+ item: monitor => ({ ...onBegin?.(monitor), id, type, data }),
8
+ end: onEnd,
9
+ collect: monitor => ({
8
10
  isDragging: monitor.isDragging(),
9
11
  dragEl: dragElRef.current
10
- }),
11
- begin: onBegin ? monitor => ({ ...onBegin(monitor), id, type, data }) : undefined,
12
- end
13
- });
12
+ })
13
+ }), [id, type, data, onBegin, onEnd]);
14
14
  return children({
15
15
  dragRef: (el) => {
16
16
  dragElRef.current = el;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Draggable.js","sourceRoot":"","sources":["../../../src/components/Draggable/Draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA+C,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AA4BvD,MAAM,SAAS,GAAG,CAA4B,EAC5C,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACU,EAAE,EAAE;IACtB,MAAM,SAAS,GAAyC,MAAM,CAAc,IAAI,CAAC,CAAC;IAElF,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,UAAU,CAAC,GAAG,OAAO,CAC9C,GAAG,EAAE,CAAC,CAAC;QACL,IAAI;QACJ,IAAI,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAC5D,GAAG,EAAE,KAAK;QACV,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACnB,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;YAChC,MAAM,EAAE,SAAS,CAAC,OAAO;SAC1B,CAAC;KACH,CAAC,EACF,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CACjC,CAAC;IAEF,OAAO,QAAQ,CAAC;QACd,OAAO,EAAE,CAAC,EAAe,EAAE,EAAE;YAC3B,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC;YACvB,OAAO,CAAC,EAAE,CAAC,CAAC;QACd,CAAC;QACD,UAAU;QACV,SAAS;KACV,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useRef, MutableRefObject, RefCallback, ReactElement } from 'react';\nimport { useDrag, DragSourceMonitor } from 'react-dnd';\nimport { SourceType } from 'dnd-core';\n\nexport interface DraggableItem<T extends object = object> {\n /** Draggable item id */\n id: string;\n /** Draggable item type */\n type: SourceType;\n /** Arbitrary data associated with this drag item */\n data?: T;\n}\n\nexport interface DraggableCollectedProps {\n isDragging: boolean;\n dragEl: HTMLElement | null;\n}\n\nexport interface DraggableProps<T extends object = object> extends DraggableItem<T> {\n onBegin?: (monitor: DragSourceMonitor) => object;\n /** Called when drag item is dropped on a valid drop target */\n onEnd?: (item: DraggableItem<T> | undefined, monitor: DragSourceMonitor) => void;\n children: (props: {\n dragRef: RefCallback<HTMLElement>;\n previewRef: RefCallback<HTMLElement>;\n collected: DraggableCollectedProps;\n }) => ReactElement;\n}\n\nconst Draggable = <T extends object = object>({\n id,\n type,\n data,\n onBegin,\n onEnd,\n children\n}: DraggableProps<T>) => {\n const dragElRef: MutableRefObject<HTMLElement | null> = useRef<HTMLElement>(null);\n\n const [collected, dragRef, previewRef] = useDrag(\n () => ({\n type,\n item: monitor => ({ ...onBegin?.(monitor), id, type, data }),\n end: onEnd,\n collect: monitor => ({\n isDragging: monitor.isDragging(),\n dragEl: dragElRef.current\n })\n }),\n [id, type, data, onBegin, onEnd]\n );\n\n return children({\n dragRef: (el: HTMLElement) => {\n dragElRef.current = el;\n dragRef(el);\n },\n previewRef,\n collected\n });\n};\n\nexport default Draggable;\n"]}
@@ -0,0 +1,2 @@
1
+ export { default, DraggableProps, DraggableItem, DraggableCollectedProps } from './Draggable';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Draggable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './Draggable';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Draggable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAA0D,MAAM,aAAa,CAAC","sourcesContent":["export { default, DraggableProps, DraggableItem, DraggableCollectedProps } from './Draggable';\n"]}
@@ -0,0 +1,23 @@
1
+ import { RefCallback, ReactElement } from 'react';
2
+ import { DropTargetMonitor } from 'react-dnd';
3
+ import { TargetType } from 'dnd-core';
4
+ import { DraggableItem } from '../Draggable';
5
+ export interface DroppableProps<T extends object = object> {
6
+ /** Type of item allowed to be dropped on this drop target */
7
+ accept: TargetType;
8
+ /** Called when drop target is hovered with valid Droppable item */
9
+ onHover?: (item: DraggableItem<T>, monitor: DropTargetMonitor) => void;
10
+ /** Called when drag item is dropped on a valid drop target */
11
+ onDrop?: (item: DraggableItem<T>, monitor: DropTargetMonitor) => void;
12
+ /** Called when item is dropped on this drop target */
13
+ children: (refs: {
14
+ dropRef: RefCallback<HTMLElement>;
15
+ collected: {
16
+ canDrop: boolean;
17
+ isOver: boolean;
18
+ };
19
+ }) => ReactElement;
20
+ }
21
+ declare const Droppable: <T extends object = object>({ accept, onDrop, onHover, children }: DroppableProps<T>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
22
+ export default Droppable;
23
+ //# sourceMappingURL=Droppable.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../../../src/components/Droppable/Droppable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAW,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACvD,6DAA6D;IAC7D,MAAM,EAAE,UAAU,CAAC;IACnB,mEAAmE;IACnE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvE,8DAA8D;IAC9D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACtE,sDAAsD;IACtD,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QAClC,SAAS,EAAE;YAAE,OAAO,EAAE,OAAO,CAAC;YAAC,MAAM,EAAE,OAAO,CAAA;SAAE,CAAC;KAClD,KAAK,YAAY,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,iKAoBd,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { useDrop } from 'react-dnd';
2
2
  const Droppable = ({ accept, onDrop, onHover, children }) => {
3
- const [collected, dropRef] = useDrop({
3
+ const [collected, dropRef] = useDrop(() => ({
4
4
  accept,
5
5
  drop: onDrop,
6
6
  hover: onHover,
@@ -8,7 +8,7 @@ const Droppable = ({ accept, onDrop, onHover, children }) => {
8
8
  canDrop: monitor.canDrop(),
9
9
  isOver: monitor.isOver()
10
10
  })
11
- });
11
+ }), [accept, onDrop, onHover]);
12
12
  return children({ dropRef, collected });
13
13
  };
14
14
  export default Droppable;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Droppable.js","sourceRoot":"","sources":["../../../src/components/Droppable/Droppable.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AAmBvD,MAAM,SAAS,GAAG,CAA4B,EAC5C,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACU,EAAE,EAAE;IACtB,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;QACN,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE;YAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;SACzB,CAAC;KACH,CAAC,EACF,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAC1B,CAAC;IAEF,OAAO,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;AAC1C,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { RefCallback, ReactElement } from 'react';\nimport { useDrop, DropTargetMonitor } from 'react-dnd';\nimport { TargetType } from 'dnd-core';\n\nimport { DraggableItem } from '../Draggable';\n\nexport interface DroppableProps<T extends object = object> {\n /** Type of item allowed to be dropped on this drop target */\n accept: TargetType;\n /** Called when drop target is hovered with valid Droppable item */\n onHover?: (item: DraggableItem<T>, monitor: DropTargetMonitor) => void;\n /** Called when drag item is dropped on a valid drop target */\n onDrop?: (item: DraggableItem<T>, monitor: DropTargetMonitor) => void;\n /** Called when item is dropped on this drop target */\n children: (refs: {\n dropRef: RefCallback<HTMLElement>;\n collected: { canDrop: boolean; isOver: boolean };\n }) => ReactElement;\n}\n\nconst Droppable = <T extends object = object>({\n accept,\n onDrop,\n onHover,\n children\n}: DroppableProps<T>) => {\n const [collected, dropRef] = useDrop(\n () => ({\n accept,\n drop: onDrop,\n hover: onHover,\n collect: monitor => ({\n canDrop: monitor.canDrop(),\n isOver: monitor.isOver()\n })\n }),\n [accept, onDrop, onHover]\n );\n\n return children({ dropRef, collected });\n};\n\nexport default Droppable;\n"]}
@@ -0,0 +1,2 @@
1
+ export { default, DroppableProps } from './Droppable';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Droppable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './Droppable';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Droppable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAkB,MAAM,aAAa,CAAC","sourcesContent":["export { default, DroppableProps } from './Droppable';\n"]}
package/lib/index.d.ts CHANGED
@@ -1,2 +1,9 @@
1
- export * from './components/DragDrop';
1
+ export { default as DragDropList } from './components/DragDropList';
2
+ export * from './components/DragDropList';
3
+ export { default as DragDropManager } from './components/DragDropManager';
4
+ export * from './components/DragDropManager';
5
+ export { default as Draggable } from './components/Draggable';
6
+ export * from './components/Draggable';
7
+ export { default as Droppable } from './components/Droppable';
8
+ export * from './components/Droppable';
2
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC"}
package/lib/index.js CHANGED
@@ -1,3 +1,10 @@
1
1
  // This file is autogenerated. Any changes will be overwritten.
2
- export * from './components/DragDrop';
2
+ export { default as DragDropList } from './components/DragDropList';
3
+ export * from './components/DragDropList';
4
+ export { default as DragDropManager } from './components/DragDropManager';
5
+ export * from './components/DragDropManager';
6
+ export { default as Draggable } from './components/Draggable';
7
+ export * from './components/Draggable';
8
+ export { default as Droppable } from './components/Droppable';
9
+ export * from './components/Droppable';
3
10
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,cAAc,uBAAuB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport * from './components/DragDrop';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as DragDropList } from './components/DragDropList';\nexport * from './components/DragDropList';\nexport { default as DragDropManager } from './components/DragDropManager';\nexport * from './components/DragDropManager';\nexport { default as Draggable } from './components/Draggable';\nexport * from './components/Draggable';\nexport { default as Droppable } from './components/Droppable';\nexport * from './components/Droppable';\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-dnd",
3
- "version": "2.0.0-dev.2.0",
3
+ "version": "2.0.0-dev.21.1",
4
4
  "author": "Pegasystems",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -20,25 +20,25 @@
20
20
  "build": "tsc -b"
21
21
  },
22
22
  "dependencies": {
23
- "@pega/cosmos-react-core": "2.0.0-dev.2.0",
23
+ "@pega/cosmos-react-core": "2.0.0-dev.21.1",
24
+ "dnd-core": "14.0.1",
24
25
  "polished": "^4.1.0",
25
- "react": "^16.13.1 || ^17.0.0",
26
- "react-dnd": "^10.0.2",
27
- "react-dnd-html5-backend": "^10.0.2",
28
- "react-dom": "^16.13.1 || ^17.0.0",
26
+ "react": "^16.14.0 || ^17.0.0",
27
+ "react-dnd": "^14.0.4",
28
+ "react-dnd-html5-backend": "^14.0.2",
29
+ "react-dom": "^16.14.0 || ^17.0.0",
29
30
  "styled-components": "^5.2.0"
30
31
  },
31
32
  "devDependencies": {
32
- "@storybook/addon-a11y": "^6.2.9",
33
- "@storybook/addon-actions": "^6.2.9",
34
- "@storybook/addon-knobs": "^6.2.9",
35
- "@storybook/addon-storysource": "^6.2.9",
36
- "@storybook/addon-toolbars": "^6.2.9",
37
- "@storybook/addons": "^6.2.9",
38
- "@storybook/react": "^6.2.9",
39
- "@storybook/theming": "^6.2.9",
33
+ "@storybook/addon-a11y": "^6.3.8",
34
+ "@storybook/addon-actions": "^6.3.8",
35
+ "@storybook/addon-knobs": "^6.3.1",
36
+ "@storybook/addon-storysource": "^6.3.8",
37
+ "@storybook/addon-toolbars": "^6.3.8",
38
+ "@storybook/addons": "^6.3.8",
39
+ "@storybook/react": "^6.3.8",
40
+ "@storybook/theming": "^6.3.8",
40
41
  "enzyme": "^3.11.0",
41
- "enzyme-adapter-react-16": "^1.15.5",
42
- "typescript": "~4.3.2"
42
+ "typescript": "~4.5.2"
43
43
  }
44
44
  }
@@ -1,70 +0,0 @@
1
- import { ComponentType, ReactElement, RefCallback } from 'react';
2
- import { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';
3
- import { AsProp, BaseProps } from '@pega/cosmos-react-core';
4
- export interface DraggableItem<T extends object = object> {
5
- /** Draggable item id */
6
- id: string;
7
- /** Draggable item type */
8
- type: string | symbol;
9
- /** Arbitrary data associated with this drag item */
10
- data?: T;
11
- }
12
- export interface CollectedProps {
13
- isDragging: boolean;
14
- }
15
- export interface DraggableProps<T extends object = object> extends DraggableItem<T> {
16
- onBegin?(monitor: DragSourceMonitor): object;
17
- /** Called when drag item is dropped on a valid drop target */
18
- onEnd?(item: DraggableItem<T> | undefined, monitor: DragSourceMonitor): void;
19
- children(props: {
20
- dragRef: RefCallback<HTMLElement>;
21
- previewRef: RefCallback<HTMLElement>;
22
- collected: CollectedProps;
23
- }): ReactElement;
24
- }
25
- export interface DroppableProps<T extends object = object> {
26
- /** Type of item allowed to be dropped on this drop target */
27
- accept: DraggableProps['type'] | DraggableProps['type'][];
28
- /** Called when drop target is hovered with valid Droppable item */
29
- onHover?(item: DraggableItem<T>, monitor: DropTargetMonitor): void;
30
- /** Called when drag item is dropped on a valid drop target */
31
- onDrop?(item: DraggableItem<T>, monitor: DropTargetMonitor): void;
32
- /** Called when item is dropped on this drop target */
33
- children(refs: {
34
- dropRef: RefCallback<HTMLElement>;
35
- collected: {
36
- canDrop: boolean;
37
- isOver: boolean;
38
- };
39
- }): ReactElement;
40
- }
41
- export interface ItemRendererProps<T extends object = object> extends DraggableItem<T>, CollectedProps {
42
- dragRef: RefCallback<HTMLElement>;
43
- previewRef: RefCallback<HTMLElement>;
44
- }
45
- export interface DragDropListProps<T extends object = object> extends AsProp, BaseProps {
46
- /** Type of item allowed to be dropped on this list (useful when there is multiple lists that share data). */
47
- accept: DroppableProps['accept'];
48
- /** Array of data objects used for the list. */
49
- items: DraggableItem<T>[];
50
- /**
51
- * @default "remove"
52
- */
53
- pullMode?: 'clone' | 'remove';
54
- /**
55
- * @default "insert"
56
- */
57
- pushMode?: 'insert' | 'prepend' | 'append' | ((a: DraggableItem<T>, b: DraggableItem<T>) => number);
58
- /** User defined function that should return content for the draggable element. */
59
- itemRenderer: ComponentType<ItemRendererProps<T>>;
60
- /**
61
- * Enable drag handle elements for each of the list items. By default the entire element is draggable.
62
- * @default false
63
- */
64
- dragHandles?: boolean;
65
- /** User defined function(Component) that should return content for when the list is empty. */
66
- emptyRenderer?: ComponentType;
67
- /** Called when list data is updated. */
68
- onChange(items: DragDropListProps<T>['items']): void;
69
- }
70
- //# sourceMappingURL=DragDrop.types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DragDrop.types.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDrop.types.ts"],"names":[],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=DragDrop.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DragDrop.types.js","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDrop.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, ReactElement, RefCallback } from 'react';\nimport { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport { AsProp, BaseProps } from '@pega/cosmos-react-core';\n\nexport interface DraggableItem<T extends object = object> {\n /** Draggable item id */\n id: string;\n /** Draggable item type */\n type: string | symbol;\n /** Arbitrary data associated with this drag item */\n data?: T;\n}\n\nexport interface CollectedProps {\n isDragging: boolean;\n}\n\nexport interface DraggableProps<T extends object = object> extends DraggableItem<T> {\n onBegin?(monitor: DragSourceMonitor): object;\n /** Called when drag item is dropped on a valid drop target */\n onEnd?(item: DraggableItem<T> | undefined, monitor: DragSourceMonitor): void;\n children(props: {\n dragRef: RefCallback<HTMLElement>;\n previewRef: RefCallback<HTMLElement>;\n collected: CollectedProps;\n }): ReactElement;\n}\n\nexport interface DroppableProps<T extends object = object> {\n /** Type of item allowed to be dropped on this drop target */\n accept: DraggableProps['type'] | DraggableProps['type'][];\n /** Called when drop target is hovered with valid Droppable item */\n onHover?(item: DraggableItem<T>, monitor: DropTargetMonitor): void;\n /** Called when drag item is dropped on a valid drop target */\n onDrop?(item: DraggableItem<T>, monitor: DropTargetMonitor): void;\n /** Called when item is dropped on this drop target */\n children(refs: {\n dropRef: RefCallback<HTMLElement>;\n collected: { canDrop: boolean; isOver: boolean };\n }): ReactElement;\n}\n\nexport interface ItemRendererProps<T extends object = object>\n extends DraggableItem<T>,\n CollectedProps {\n dragRef: RefCallback<HTMLElement>;\n previewRef: RefCallback<HTMLElement>;\n}\n\nexport interface DragDropListProps<T extends object = object> extends AsProp, BaseProps {\n /** Type of item allowed to be dropped on this list (useful when there is multiple lists that share data). */\n accept: DroppableProps['accept'];\n /** Array of data objects used for the list. */\n items: DraggableItem<T>[];\n /**\n * @default \"remove\"\n */\n pullMode?: 'clone' | 'remove';\n /**\n * @default \"insert\"\n */\n pushMode?:\n | 'insert'\n | 'prepend'\n | 'append'\n | ((a: DraggableItem<T>, b: DraggableItem<T>) => number);\n /** User defined function that should return content for the draggable element. */\n itemRenderer: ComponentType<ItemRendererProps<T>>;\n /**\n * Enable drag handle elements for each of the list items. By default the entire element is draggable.\n * @default false\n */\n dragHandles?: boolean;\n /** User defined function(Component) that should return content for when the list is empty. */\n emptyRenderer?: ComponentType;\n /** Called when list data is updated. */\n onChange(items: DragDropListProps<T>['items']): void;\n}\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDropList.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,iBAAiB,EAAiB,MAAM,kBAAkB,CAAC;AAYpE,QAAA,MAAM,YAAY,yNAyNjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"DragDropList.js","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useState, useRef } from 'react';\nimport { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n useElement,\n useAfterInitialEffect,\n useTriggerableLayoutEffect,\n ForwardProps,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport Draggable from './Draggable';\nimport Droppable from './Droppable';\nimport { DragDropListProps, DraggableItem } from './DragDrop.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?(): void;\n changeDestination?(): void;\n}\n\nconst middleYOfRect = ({ top, bottom }: DOMRect): number => top + (bottom - top) / 2;\n\nconst DragDropList = <T extends object = object>({\n accept,\n items,\n itemRenderer: ItemRenderer,\n emptyRenderer: EmptyRenderer,\n onChange,\n pullMode = 'remove',\n pushMode = 'insert',\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 [listEl, setListEl] = useElement<HTMLElement>();\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 triggerOnChange = useTriggerableLayoutEffect(\n useCallback(() => {\n onChange(internalItems);\n }, [onChange, internalItems])\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, itemRectsRef.current]\n );\n\n const removeById = useCallback(\n (itemId: DraggableItem<T>['id']): void => {\n if (pullMode === 'remove') {\n setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));\n }\n },\n [internalItems, pullMode]\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()) 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 item.normalizeDestination = normalizeItems;\n item.changeDestination = triggerOnChange;\n }\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, 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, item);\n\n if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n else setInternalItems(newItems);\n }\n },\n [pushMode, getInsertIndex, internalItems, removeById]\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 removeFromCurrent: () => {\n removeById(itemId);\n },\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: triggerOnChange,\n changeDestination: triggerOnChange\n };\n },\n [removeById, internalItems]\n );\n\n const onEnd = useCallback((item: DragDropListItem<T>, monitor: DragSourceMonitor) => {\n if (monitor.didDrop()) {\n item.normalizeDestination?.();\n if (item.changeSource !== item.changeDestination) item.changeSource?.();\n item.changeDestination?.();\n } else {\n item.removeFromCurrent?.();\n item.returnToSource?.(item);\n }\n }, []);\n\n const emptyContent = EmptyRenderer ? <EmptyRenderer /> : null;\n\n return (\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 {...{\n ...item,\n dragRef,\n previewRef,\n ...collected,\n isDragging: collected.isDragging || !!item.removeFromCurrent\n }}\n />\n );\n }}\n </Draggable>\n );\n })}\n </Component>\n );\n }}\n </Droppable>\n );\n};\n\nexport default DragDropList;\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"DragDropManager.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDropManager.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAIpE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAKD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAK5D,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -1,11 +0,0 @@
1
- import React, { useRef } from 'react';
2
- import { DndProvider, createDndContext } from 'react-dnd';
3
- import Backend from 'react-dnd-html5-backend';
4
- // https://github.com/react-dnd/react-dnd/issues/186
5
- const Context = createDndContext(Backend);
6
- const DragDropManager = ({ children }) => {
7
- const manager = useRef(Context);
8
- return React.createElement(DndProvider, { manager: manager.current.dragDropManager }, children);
9
- };
10
- export default DragDropManager;
11
- //# sourceMappingURL=DragDropManager.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DragDropManager.js","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDropManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgC,MAAM,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAM9C,oDAAoD;AACpD,MAAM,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAE1C,MAAM,eAAe,GAA4C,CAAC,EAChE,QAAQ,EACa,EAAE,EAAE;IACzB,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,OAAO,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,eAAe,IAAG,QAAQ,CAAe,CAAC;AACzF,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React, { FunctionComponent, ReactNode, useRef } from 'react';\nimport { DndProvider, createDndContext } from 'react-dnd';\nimport Backend from 'react-dnd-html5-backend';\n\nexport interface DragDropManagerProps {\n children: ReactNode;\n}\n\n// https://github.com/react-dnd/react-dnd/issues/186\nconst Context = createDndContext(Backend);\n\nconst DragDropManager: FunctionComponent<DragDropManagerProps> = ({\n children\n}: DragDropManagerProps) => {\n const manager = useRef(Context);\n return <DndProvider manager={manager.current.dragDropManager}>{children}</DndProvider>;\n};\n\nexport default DragDropManager;\n"]}
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- import { DraggableProps } from './DragDrop.types';
3
- declare const Draggable: <T extends object = object>({ id, type, data, children, onBegin, onEnd: end }: DraggableProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
4
- export default Draggable;
5
- //# sourceMappingURL=Draggable.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/Draggable.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,SAAS,6LA4Bd,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Draggable.js","sourceRoot":"","sources":["../../../src/components/DragDrop/Draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AAIvD,MAAM,SAAS,GAAG,CAA4B,EAC5C,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,KAAK,EAAE,GAAG,EACQ,EAAE,EAAE;IACtB,MAAM,SAAS,GAAyC,MAAM,CAAc,IAAI,CAAC,CAAC;IAElF,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,UAAU,CAAC,GAAG,OAAO,CAAC;QAC/C,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;QACxB,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACxC,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;YAChC,MAAM,EAAE,SAAS,CAAC,OAAO;SAC1B,CAAC;QACF,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;QACjF,GAAG;KACJ,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC;QACd,OAAO,EAAE,CAAC,EAAe,EAAE,EAAE;YAC3B,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC;YACvB,OAAO,CAAC,EAAE,CAAC,CAAC;QACd,CAAC;QACD,UAAU;QACV,SAAS;KACV,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useRef, MutableRefObject } from 'react';\nimport { useDrag, DragSourceMonitor } from 'react-dnd';\n\nimport { DraggableProps } from './DragDrop.types';\n\nconst Draggable = <T extends object = object>({\n id,\n type,\n data,\n children,\n onBegin,\n onEnd: end\n}: DraggableProps<T>) => {\n const dragElRef: MutableRefObject<HTMLElement | null> = useRef<HTMLElement>(null);\n\n const [collected, dragRef, previewRef] = useDrag({\n item: { id, type, data },\n collect: (monitor: DragSourceMonitor) => ({\n isDragging: monitor.isDragging(),\n dragEl: dragElRef.current\n }),\n begin: onBegin ? monitor => ({ ...onBegin(monitor), id, type, data }) : undefined,\n end\n });\n\n return children({\n dragRef: (el: HTMLElement) => {\n dragElRef.current = el;\n dragRef(el);\n },\n previewRef,\n collected\n });\n};\n\nexport default Draggable;\n"]}
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- import { DroppableProps } from './DragDrop.types';
3
- declare const Droppable: <T extends object = object>({ accept, onDrop, onHover, children }: DroppableProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
4
- export default Droppable;
5
- //# sourceMappingURL=Droppable.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/Droppable.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,SAAS,iLAiBd,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Droppable.js","sourceRoot":"","sources":["../../../src/components/DragDrop/Droppable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIpC,MAAM,SAAS,GAAG,CAA4B,EAC5C,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACU,EAAE,EAAE;IACtB,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC;QACnC,MAAM;QACN,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE;YAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;SACzB,CAAC;KACH,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;AAC1C,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useDrop } from 'react-dnd';\n\nimport { DroppableProps } from './DragDrop.types';\n\nconst Droppable = <T extends object = object>({\n accept,\n onDrop,\n onHover,\n children\n}: DroppableProps<T>) => {\n const [collected, dropRef] = useDrop({\n accept,\n drop: onDrop,\n hover: onHover,\n collect: monitor => ({\n canDrop: monitor.canDrop(),\n isOver: monitor.isOver()\n })\n });\n\n return children({ dropRef, collected });\n};\n\nexport default Droppable;\n"]}
@@ -1,10 +0,0 @@
1
- export { default as DragDropManager } from './DragDropManager';
2
- export { default as Draggable } from './Draggable';
3
- export { default as Droppable } from './Droppable';
4
- export { default as DragDropList } from './DragDropList';
5
- export { DragDropManagerProps } from './DragDropManager';
6
- export { DraggableProps } from './DragDrop.types';
7
- export { DroppableProps } from './DragDrop.types';
8
- export { DragDropListProps } from './DragDrop.types';
9
- export { DraggableItem } from './DragDrop.types';
10
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}
@@ -1,5 +0,0 @@
1
- export { default as DragDropManager } from './DragDropManager';
2
- export { default as Draggable } from './Draggable';
3
- export { default as Droppable } from './Droppable';
4
- export { default as DragDropList } from './DragDropList';
5
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DragDrop/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as DragDropManager } from './DragDropManager';\nexport { default as Draggable } from './Draggable';\nexport { default as Droppable } from './Droppable';\nexport { default as DragDropList } from './DragDropList';\nexport { DragDropManagerProps } from './DragDropManager';\nexport { DraggableProps } from './DragDrop.types';\nexport { DroppableProps } from './DragDrop.types';\nexport { DragDropListProps } from './DragDrop.types';\nexport { DraggableItem } from './DragDrop.types';\n"]}