@pega/cosmos-react-dnd 2.0.0-dev.9.2 → 2.0.0-rc.2

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 +26 -28
  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 +14 -14
  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 -12
  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,8 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useCallback, useState, useRef } from 'react';
3
3
  import { useElement, useAfterInitialEffect, useTriggerableLayoutEffect } from '@pega/cosmos-react-core';
4
- import Draggable from './Draggable';
5
- import Droppable from './Droppable';
4
+ import Draggable from '../Draggable';
5
+ import Droppable from '../Droppable';
6
6
  const middleYOfRect = ({ top, bottom }) => top + (bottom - top) / 2;
7
7
  const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, pullMode = 'remove', pushMode = 'insert', as: Component = 'ul', ...restProps }) => {
8
8
  const [internalItems, setInternalItems] = useState(items);
@@ -58,12 +58,12 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
58
58
  });
59
59
  }
60
60
  return insertIndex;
61
- }, [getItemRects, internalItems, itemRectsRef.current]);
61
+ }, [getItemRects, internalItems]);
62
62
  const removeById = useCallback((itemId) => {
63
63
  if (pullMode === 'remove') {
64
64
  setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));
65
65
  }
66
- }, [internalItems, pullMode]);
66
+ }, [pullMode]);
67
67
  const normalizeItems = useCallback(() => {
68
68
  setInternalItems(currentItems => currentItems.map(({ id, data, type }) => ({
69
69
  id,
@@ -72,12 +72,11 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
72
72
  })));
73
73
  }, []);
74
74
  const positionItems = useCallback((item, monitor) => {
75
- var _a;
76
75
  if (!monitor.canDrop())
77
76
  return;
78
77
  const prevIndex = internalItems.findIndex(({ id }) => id === item.id);
79
78
  if (prevIndex === -1) {
80
- (_a = item.removeFromCurrent) === null || _a === void 0 ? void 0 : _a.call(item);
79
+ item.removeFromCurrent?.();
81
80
  item.removeFromCurrent = () => {
82
81
  removeById(item.id);
83
82
  };
@@ -109,7 +108,7 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
109
108
  else
110
109
  setInternalItems(newItems);
111
110
  }
112
- }, [pushMode, getInsertIndex, internalItems, removeById]);
111
+ }, [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById]);
113
112
  const onHover = positionItems;
114
113
  const onDrop = positionItems;
115
114
  const onBegin = useCallback((itemId) => () => {
@@ -130,41 +129,40 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
130
129
  changeSource: triggerOnChange,
131
130
  changeDestination: triggerOnChange
132
131
  };
133
- }, [removeById, internalItems]);
132
+ }, [internalItems, normalizeItems, triggerOnChange, removeById]);
134
133
  const onEnd = useCallback((item, monitor) => {
135
- var _a, _b, _c, _d, _e;
136
134
  if (!item)
137
135
  return;
138
136
  if (monitor.didDrop()) {
139
- (_a = item.normalizeDestination) === null || _a === void 0 ? void 0 : _a.call(item);
137
+ item.normalizeDestination?.();
140
138
  if (item.changeSource !== item.changeDestination)
141
- (_b = item.changeSource) === null || _b === void 0 ? void 0 : _b.call(item);
142
- (_c = item.changeDestination) === null || _c === void 0 ? void 0 : _c.call(item);
139
+ item.changeSource?.();
140
+ item.changeDestination?.();
143
141
  }
144
142
  else {
145
- (_d = item.removeFromCurrent) === null || _d === void 0 ? void 0 : _d.call(item);
146
- (_e = item.returnToSource) === null || _e === void 0 ? void 0 : _e.call(item, item);
143
+ item.removeFromCurrent?.();
144
+ item.returnToSource?.(item);
147
145
  }
148
146
  }, []);
149
147
  const emptyContent = EmptyRenderer ? _jsx(EmptyRenderer, {}, void 0) : null;
150
- return (_jsx(Droppable, Object.assign({ accept: accept, onHover: onHover, onDrop: onDrop }, { children: ({ dropRef }) => {
151
- return (_jsx(Component, Object.assign({ ref: (el) => {
148
+ return (_jsx(Droppable, { accept: accept, onHover: onHover, onDrop: onDrop, children: ({ dropRef }) => {
149
+ return (_jsx(Component, { ref: (el) => {
152
150
  dropRef(el);
153
151
  setListEl(el);
154
- } }, restProps, { children: internalItems.length === 0
152
+ }, ...restProps, children: internalItems.length === 0
155
153
  ? emptyContent
156
154
  : internalItems.map(item => {
157
- return (_jsx(Draggable, Object.assign({ id: item.id, type: item.type, data: item.data, onBegin: onBegin(item.id), onEnd: onEnd }, { children: ({ dragRef, previewRef, collected }) => {
158
- return (_jsx(ItemRenderer, Object.assign({}, {
159
- ...item,
160
- dragRef,
161
- previewRef,
162
- ...collected,
163
- isDragging: collected.isDragging || !!item.removeFromCurrent
164
- }), void 0));
165
- } }), item.id));
166
- }) }), void 0));
167
- } }), void 0));
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));
168
166
  };
169
167
  export default DragDropList;
170
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, NoChildrenProp } 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, NoChildrenProp {
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,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE5E,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,CAC1D,SAAQ,MAAM,EACZ,SAAS,EACT,cAAc;IAChB,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, NoChildrenProp } 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>\n extends AsProp,\n BaseProps,\n NoChildrenProp {\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.9.2",
3
+ "version": "2.0.0-rc.2",
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.9.2",
23
+ "@pega/cosmos-react-core": "2.0.0-rc.2",
24
+ "dnd-core": "14.0.1",
24
25
  "polished": "^4.1.0",
25
26
  "react": "^16.14.0 || ^17.0.0",
26
- "react-dnd": "^10.0.2",
27
- "react-dnd-html5-backend": "^10.0.2",
27
+ "react-dnd": "^14.0.4",
28
+ "react-dnd-html5-backend": "^14.0.2",
28
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.3.7",
33
- "@storybook/addon-actions": "^6.3.7",
34
- "@storybook/addon-knobs": "^6.3.0",
35
- "@storybook/addon-storysource": "^6.3.7",
36
- "@storybook/addon-toolbars": "^6.3.7",
37
- "@storybook/addons": "^6.3.7",
38
- "@storybook/react": "^6.3.7",
39
- "@storybook/theming": "^6.3.7",
33
+ "@storybook/addon-a11y": "^6.4.8",
34
+ "@storybook/addon-actions": "^6.4.8",
35
+ "@storybook/addon-knobs": "^6.4.0",
36
+ "@storybook/addon-storysource": "^6.4.8",
37
+ "@storybook/addon-toolbars": "^6.4.8",
38
+ "@storybook/addons": "^6.4.8",
39
+ "@storybook/react": "^6.4.8",
40
+ "@storybook/theming": "^6.4.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,yNA2NjB,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 { 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> | 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"]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"DragDropManager.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDropManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAI7D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAKD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAK5D,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -1,12 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useRef } from 'react';
3
- import { DndProvider, createDndContext } from 'react-dnd';
4
- import Backend from 'react-dnd-html5-backend';
5
- // https://github.com/react-dnd/react-dnd/issues/186
6
- const Context = createDndContext(Backend);
7
- const DragDropManager = ({ children }) => {
8
- const manager = useRef(Context);
9
- return _jsx(DndProvider, Object.assign({ manager: manager.current.dragDropManager }, { children: children }), void 0);
10
- };
11
- export default DragDropManager;
12
- //# sourceMappingURL=DragDropManager.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DragDropManager.js","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDropManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,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,KAAC,WAAW,kBAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,eAAe,gBAAG,QAAQ,YAAe,CAAC;AACzF,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { 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"]}