@atlaskit/pragmatic-drag-and-drop 0.18.1 → 0.18.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.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types-ts4.5/adapter/element-adapter.d.ts +42 -0
- package/dist/types-ts4.5/adapter/file-adapter.d.ts +18 -0
- package/dist/types-ts4.5/addon/cancel-unhandled.d.ts +7 -0
- package/dist/types-ts4.5/entry-point/adapter/element.d.ts +2 -0
- package/dist/types-ts4.5/entry-point/adapter/file.d.ts +2 -0
- package/dist/types-ts4.5/entry-point/addon/cancel-unhandled.d.ts +1 -0
- package/dist/types-ts4.5/entry-point/experimental/cross-with-element-adapter.d.ts +1 -0
- package/dist/types-ts4.5/entry-point/types.d.ts +1 -0
- package/dist/types-ts4.5/entry-point/util/combine.d.ts +1 -0
- package/dist/types-ts4.5/entry-point/util/disable-native-drag-preview.d.ts +1 -0
- package/dist/types-ts4.5/entry-point/util/once.d.ts +1 -0
- package/dist/types-ts4.5/entry-point/util/reorder.d.ts +1 -0
- package/dist/types-ts4.5/entry-point/util/scroll-just-enough-into-view.d.ts +1 -0
- package/dist/types-ts4.5/entry-point/util/set-custom-native-drag-preview.d.ts +1 -0
- package/dist/types-ts4.5/experimental/cross-window-element-adapter.d.ts +17 -0
- package/dist/types-ts4.5/index.d.ts +2 -0
- package/dist/types-ts4.5/internal-types.d.ts +275 -0
- package/dist/types-ts4.5/ledger/dispatch-consumer-event.d.ts +26 -0
- package/dist/types-ts4.5/ledger/lifecycle-manager.d.ts +16 -0
- package/dist/types-ts4.5/ledger/usage-ledger.d.ts +5 -0
- package/dist/types-ts4.5/make-adapter/make-adapter.d.ts +14 -0
- package/dist/types-ts4.5/make-adapter/make-drop-target.d.ts +5 -0
- package/dist/types-ts4.5/make-adapter/make-monitor.d.ts +8 -0
- package/dist/types-ts4.5/util/add-attribute.d.ts +5 -0
- package/dist/types-ts4.5/util/combine.d.ts +3 -0
- package/dist/types-ts4.5/util/disable-native-drag-preview.d.ts +3 -0
- package/dist/types-ts4.5/util/entering-and-leaving-the-window.d.ts +6 -0
- package/dist/types-ts4.5/util/fix-post-drag-pointer-bug.d.ts +14 -0
- package/dist/types-ts4.5/util/get-input.d.ts +2 -0
- package/dist/types-ts4.5/util/once.d.ts +2 -0
- package/dist/types-ts4.5/util/reorder.d.ts +9 -0
- package/dist/types-ts4.5/util/scroll-just-enough-into-view.d.ts +7 -0
- package/dist/types-ts4.5/util/set-custom-native-drag-preview.d.ts +52 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dist/cjs/version.json
CHANGED
package/dist/es2019/version.json
CHANGED
package/dist/esm/version.json
CHANGED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { AllEvents, BaseEventPayload, CleanupFn, DropTargetEventPayloadMap, EventPayloadMap, Input, InternalDragType, MonitorCanMonitorArgs } from '../internal-types';
|
|
2
|
+
type ElementDragType = InternalDragType<'element', 'move', {
|
|
3
|
+
element: HTMLElement;
|
|
4
|
+
dragHandle: Element | null;
|
|
5
|
+
data: Record<string, unknown>;
|
|
6
|
+
}>;
|
|
7
|
+
type GetFeedbackArgs = {
|
|
8
|
+
/**
|
|
9
|
+
* The user input as a drag is trying to start (the `initial` input)
|
|
10
|
+
*/
|
|
11
|
+
input: Input;
|
|
12
|
+
/**
|
|
13
|
+
* The `draggable` element
|
|
14
|
+
*/
|
|
15
|
+
element: HTMLElement;
|
|
16
|
+
/**
|
|
17
|
+
* The `dragHandle` element for the `draggable`
|
|
18
|
+
*/
|
|
19
|
+
dragHandle: Element | null;
|
|
20
|
+
};
|
|
21
|
+
type DraggableArgs = {
|
|
22
|
+
/** The `HTMLElement` that you want to attach draggable behaviour to.
|
|
23
|
+
* `element` is our unique _key_ for a draggable.
|
|
24
|
+
* `element` is a `HTMLElement` as only a `HTMLElement`
|
|
25
|
+
* can have a "draggable" attribute
|
|
26
|
+
*/
|
|
27
|
+
element: HTMLElement;
|
|
28
|
+
/** The part of a draggable `element` that you want to use to control the dragging of the whole `element` */
|
|
29
|
+
dragHandle?: Element;
|
|
30
|
+
/** Conditionally allow a drag to occur */
|
|
31
|
+
canDrag?: (args: GetFeedbackArgs) => boolean;
|
|
32
|
+
/** Used to attach data to a drag operation. Called once just before the drag starts */
|
|
33
|
+
getInitialData?: (args: GetFeedbackArgs) => Record<string, unknown>;
|
|
34
|
+
} & Partial<AllEvents<ElementDragType>>;
|
|
35
|
+
export declare const dropTargetForElements: (args: import("../internal-types").DropTargetArgs<ElementDragType>) => CleanupFn;
|
|
36
|
+
export declare const monitorForElements: (args: import("../internal-types").MonitorArgs<ElementDragType>) => CleanupFn;
|
|
37
|
+
export declare function draggable(args: DraggableArgs): CleanupFn;
|
|
38
|
+
export type ElementEventBasePayload = BaseEventPayload<ElementDragType>;
|
|
39
|
+
export type ElementEventPayloadMap = EventPayloadMap<ElementDragType>;
|
|
40
|
+
export type ElementDropTargetEventPayloadMap = DropTargetEventPayloadMap<ElementDragType>;
|
|
41
|
+
export type ElementMonitorCanMonitorArgs = MonitorCanMonitorArgs<ElementDragType>;
|
|
42
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { BaseEventPayload, CleanupFn, DropTargetEventPayloadMap, EventPayloadMap, ExternalDragType, MonitorCanMonitorArgs } from '../internal-types';
|
|
2
|
+
type FileDragType = ExternalDragType<'file', 'copy', {
|
|
3
|
+
items: DataTransfer['items'] | null;
|
|
4
|
+
}>;
|
|
5
|
+
declare const adapter: {
|
|
6
|
+
registerUsage: () => CleanupFn;
|
|
7
|
+
dropTarget: (args: import("../internal-types").DropTargetArgs<FileDragType>) => CleanupFn;
|
|
8
|
+
monitor: (args: import("../internal-types").MonitorArgs<FileDragType>) => CleanupFn;
|
|
9
|
+
};
|
|
10
|
+
type StripEventsForDropTargets<T> = Omit<T, 'onDragStart' | 'onGenerateDragPreview'>;
|
|
11
|
+
type StripPreviewEvent<T> = Omit<T, 'onGenerateDragPreview'>;
|
|
12
|
+
export declare const dropTargetForFiles: (args: StripEventsForDropTargets<Parameters<typeof adapter.dropTarget>[0]>) => CleanupFn;
|
|
13
|
+
export declare const monitorForFiles: (args: StripPreviewEvent<Parameters<typeof adapter.monitor>[0]>) => CleanupFn;
|
|
14
|
+
export type FileDropTargetEventPayloadMap = StripEventsForDropTargets<DropTargetEventPayloadMap<FileDragType>>;
|
|
15
|
+
export type FileEventPayloadMap = StripPreviewEvent<EventPayloadMap<FileDragType>>;
|
|
16
|
+
export type FileEventBasePayload = BaseEventPayload<FileDragType>;
|
|
17
|
+
export type FileMonitorCanMonitorArgs = MonitorCanMonitorArgs<FileDragType>;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { cancelUnhandled } from '../../addon/cancel-unhandled';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { setCrossWindowData, extractCrossWindowResult, dropTargetForCrossWindowElements, monitorForCrossWindowElements, } from '../../experimental/cross-window-element-adapter';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type { DropTargetRecord, Position, SourceCanStartArgs, Input, DragLocation, DragLocationHistory, CleanupFn, } from '../internal-types';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { combine } from '../../util/combine';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { disableNativeDragPreview } from '../../util/disable-native-drag-preview';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { once } from '../../util/once';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { reorder } from '../../util/reorder';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { scrollJustEnoughIntoView } from '../../util/scroll-just-enough-into-view';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { setCustomNativeDragPreview } from '../../util/set-custom-native-drag-preview';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { CleanupFn, ExternalDragType, Serializable } from '../internal-types';
|
|
2
|
+
type CrossWindowResult = 'moved' | 'none';
|
|
3
|
+
type CrossWindowDragType = ExternalDragType<'experimental-cross-window-element', 'move', {
|
|
4
|
+
data: Serializable;
|
|
5
|
+
}>;
|
|
6
|
+
declare const adapter: {
|
|
7
|
+
registerUsage: () => CleanupFn;
|
|
8
|
+
dropTarget: (args: import("../internal-types").DropTargetArgs<CrossWindowDragType>) => CleanupFn;
|
|
9
|
+
monitor: (args: import("../internal-types").MonitorArgs<CrossWindowDragType>) => CleanupFn;
|
|
10
|
+
};
|
|
11
|
+
export declare function setCrossWindowData({ data }: {
|
|
12
|
+
data: Serializable;
|
|
13
|
+
}): void;
|
|
14
|
+
export declare function extractCrossWindowResult(): CrossWindowResult | null;
|
|
15
|
+
export declare const dropTargetForCrossWindowElements: (args: Parameters<typeof adapter.dropTarget>[0]) => CleanupFn;
|
|
16
|
+
export declare const monitorForCrossWindowElements: (args: import("../internal-types").MonitorArgs<CrossWindowDragType>) => CleanupFn;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
export type CleanupFn = () => void;
|
|
2
|
+
/**
|
|
3
|
+
* Information about a drop target
|
|
4
|
+
*/
|
|
5
|
+
export type DropTargetRecord = {
|
|
6
|
+
/**
|
|
7
|
+
* The element the drop target is attached to
|
|
8
|
+
*/
|
|
9
|
+
element: Element;
|
|
10
|
+
/**
|
|
11
|
+
* Data associated with the drop target
|
|
12
|
+
*
|
|
13
|
+
* (Collected by `getData()`)
|
|
14
|
+
*/
|
|
15
|
+
data: Record<string | symbol, unknown>;
|
|
16
|
+
/**
|
|
17
|
+
* The drop effect for the drop target
|
|
18
|
+
*
|
|
19
|
+
* (Collected by `getDropEffect()`)
|
|
20
|
+
*/
|
|
21
|
+
dropEffect: DataTransfer['dropEffect'];
|
|
22
|
+
/**
|
|
23
|
+
* Whether or not the drop target is sticky
|
|
24
|
+
*
|
|
25
|
+
* (Collected by `getIsSticky()`)
|
|
26
|
+
*/
|
|
27
|
+
sticky: boolean;
|
|
28
|
+
};
|
|
29
|
+
export type Position = {
|
|
30
|
+
x: number;
|
|
31
|
+
y: number;
|
|
32
|
+
};
|
|
33
|
+
export type Serializable = {
|
|
34
|
+
[key: string]: number | string | Serializable | Serializable[];
|
|
35
|
+
};
|
|
36
|
+
export type InternalDragType<Key extends string, DefaultDropEffect extends DataTransfer['dropEffect'], Payload extends Record<string, unknown>> = {
|
|
37
|
+
key: Key;
|
|
38
|
+
defaultDropEffect: DefaultDropEffect;
|
|
39
|
+
startedFrom: 'internal';
|
|
40
|
+
payload: Payload;
|
|
41
|
+
};
|
|
42
|
+
export type ExternalDragType<Key extends string, DefaultDropEffect extends DataTransfer['dropEffect'], Payload extends Record<string, unknown>> = {
|
|
43
|
+
key: Key;
|
|
44
|
+
startedFrom: 'external';
|
|
45
|
+
defaultDropEffect: DefaultDropEffect;
|
|
46
|
+
payload: Payload;
|
|
47
|
+
};
|
|
48
|
+
export type DragInterface<DragType extends AllDragTypes> = DragType extends ExternalDragType<string, DataTransfer['dropEffect'], Record<string, unknown>> ? // External drag types might need to refresh their source
|
|
49
|
+
Omit<DragType, 'defaultDropEffect'> & {
|
|
50
|
+
getDropPayload?: (event: DragEvent) => DragType['payload'];
|
|
51
|
+
} : Omit<DragType, 'defaultDropEffect'>;
|
|
52
|
+
export type AllDragTypes = InternalDragType<string, DataTransfer['dropEffect'], Record<string, unknown>> | ExternalDragType<string, DataTransfer['dropEffect'], Record<string, unknown>>;
|
|
53
|
+
export type SourceCanStartArgs = {
|
|
54
|
+
event: DragEvent;
|
|
55
|
+
input: Input;
|
|
56
|
+
};
|
|
57
|
+
export type AdapterAPI<DragType extends AllDragTypes> = {
|
|
58
|
+
canStart: (event: DragEvent) => boolean;
|
|
59
|
+
start: (args: {
|
|
60
|
+
event: DragEvent;
|
|
61
|
+
dragInterface: DragInterface<DragType>;
|
|
62
|
+
}) => void;
|
|
63
|
+
};
|
|
64
|
+
export type Input = {
|
|
65
|
+
altKey: boolean;
|
|
66
|
+
button: number;
|
|
67
|
+
buttons: number;
|
|
68
|
+
ctrlKey: boolean;
|
|
69
|
+
metaKey: boolean;
|
|
70
|
+
shiftKey: boolean;
|
|
71
|
+
clientX: number;
|
|
72
|
+
clientY: number;
|
|
73
|
+
pageX: number;
|
|
74
|
+
pageY: number;
|
|
75
|
+
};
|
|
76
|
+
export type DragLocation = {
|
|
77
|
+
/**
|
|
78
|
+
* A users input at a point in time
|
|
79
|
+
*/
|
|
80
|
+
input: Input;
|
|
81
|
+
/**
|
|
82
|
+
* A _bubble_ ordered (innermost upwards) list of active drop targets
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* [grandChildRecord, childRecord, parentRecord]
|
|
86
|
+
*
|
|
87
|
+
*/
|
|
88
|
+
dropTargets: DropTargetRecord[];
|
|
89
|
+
};
|
|
90
|
+
export type DragLocationHistory = {
|
|
91
|
+
/**
|
|
92
|
+
* Where the drag operation started
|
|
93
|
+
*/
|
|
94
|
+
initial: DragLocation;
|
|
95
|
+
/**
|
|
96
|
+
* Where the user currently is
|
|
97
|
+
*/
|
|
98
|
+
current: DragLocation;
|
|
99
|
+
/**
|
|
100
|
+
* Where the user was previously.
|
|
101
|
+
* `previous` points to what `current` was in the last dispatched event
|
|
102
|
+
*
|
|
103
|
+
* `previous` is particularly useful for `onDropTargetChange`
|
|
104
|
+
* (and the derived `onDragEnter` and `onDragLeave`)
|
|
105
|
+
* as you can know what the delta of the change
|
|
106
|
+
*
|
|
107
|
+
* Exception: `onGenerateDragPreview` and `onDragStart` will have the
|
|
108
|
+
* same `current` and `previous` values. This is done so that the data
|
|
109
|
+
* received in `onDragStart` feels logical
|
|
110
|
+
* (`location.previous` should be `[]` in `onDragStart`)
|
|
111
|
+
*/
|
|
112
|
+
previous: Pick<DragLocation, 'dropTargets'>;
|
|
113
|
+
};
|
|
114
|
+
/**
|
|
115
|
+
* The common data that is provided to all events
|
|
116
|
+
*/
|
|
117
|
+
export type BaseEventPayload<DragType extends AllDragTypes> = {
|
|
118
|
+
/**
|
|
119
|
+
* Location history for the drag operation
|
|
120
|
+
*/
|
|
121
|
+
location: DragLocationHistory;
|
|
122
|
+
/**
|
|
123
|
+
* Data associated with the entity that is being dragged
|
|
124
|
+
*/
|
|
125
|
+
source: DragType['payload'];
|
|
126
|
+
};
|
|
127
|
+
export type EventPayloadMap<DragType extends AllDragTypes> = {
|
|
128
|
+
/**
|
|
129
|
+
* Drag is about to start.
|
|
130
|
+
* Make changes you want to see in the drag preview
|
|
131
|
+
*
|
|
132
|
+
* _Drag previews are not generated for external drag sources (eg files)_
|
|
133
|
+
*/
|
|
134
|
+
onGenerateDragPreview: BaseEventPayload<DragType> & {
|
|
135
|
+
/**
|
|
136
|
+
* Allows you to use the native `setDragImage` function if you want
|
|
137
|
+
* Although, we recommend using alternative techniques (see element adapter docs)
|
|
138
|
+
*/
|
|
139
|
+
nativeSetDragImage: DataTransfer['setDragImage'] | null;
|
|
140
|
+
};
|
|
141
|
+
/**
|
|
142
|
+
* A drag operation has started. You can make changes to the DOM and those changes won't be reflected in your _drag preview_
|
|
143
|
+
*/
|
|
144
|
+
onDragStart: BaseEventPayload<DragType>;
|
|
145
|
+
/**
|
|
146
|
+
* A throttled update of where the the user is currently dragging. Useful if you want to create a high fidelity experience such as drawing.
|
|
147
|
+
*/
|
|
148
|
+
onDrag: BaseEventPayload<DragType>;
|
|
149
|
+
/**
|
|
150
|
+
* The `onDropTargetChange` event fires when the `dropTarget` hierarchy changes during a drag.
|
|
151
|
+
*/
|
|
152
|
+
onDropTargetChange: BaseEventPayload<DragType>;
|
|
153
|
+
/**
|
|
154
|
+
* The `onDrop` event occurs when a user has finished a drag and drop operation.
|
|
155
|
+
* The `onDrop` event will fire when the drag operation finishes, regardless of how the drag operation finished
|
|
156
|
+
* (eg due to an explicit drop, the drag being canceled, recovering from an error and so on). On the web platform
|
|
157
|
+
* we cannot distinguish between dropping on no drop targets and an explicit cancel, so we do not publish any
|
|
158
|
+
* information about _how_ the drag ended, only that it ended.
|
|
159
|
+
*
|
|
160
|
+
* The `location.current` property will accurately contain the final drop targets.
|
|
161
|
+
*/
|
|
162
|
+
onDrop: BaseEventPayload<DragType>;
|
|
163
|
+
};
|
|
164
|
+
export type AllEvents<DragType extends AllDragTypes> = {
|
|
165
|
+
[EventName in keyof EventPayloadMap<DragType>]: (args: EventPayloadMap<DragType>[EventName]) => void;
|
|
166
|
+
};
|
|
167
|
+
export type MonitorCanMonitorArgs<DragType extends AllDragTypes> = {
|
|
168
|
+
/**
|
|
169
|
+
* The users `initial` drag location
|
|
170
|
+
*/
|
|
171
|
+
initial: DragLocation;
|
|
172
|
+
/**
|
|
173
|
+
* The data associated with the entity being dragged
|
|
174
|
+
*/
|
|
175
|
+
source: DragType['payload'];
|
|
176
|
+
};
|
|
177
|
+
export type MonitorArgs<DragType extends AllDragTypes> = Partial<AllEvents<DragType>> & {
|
|
178
|
+
canMonitor?: (args: MonitorCanMonitorArgs<DragType>) => boolean;
|
|
179
|
+
};
|
|
180
|
+
export type DropTargetGetFeedbackArgs<DragType extends AllDragTypes> = {
|
|
181
|
+
/**
|
|
182
|
+
* The users _current_ input
|
|
183
|
+
*/
|
|
184
|
+
input: Input;
|
|
185
|
+
/**
|
|
186
|
+
* The data associated with the entity being dragged
|
|
187
|
+
*/
|
|
188
|
+
source: DragType['payload'];
|
|
189
|
+
/**
|
|
190
|
+
* This drop target's element
|
|
191
|
+
*/
|
|
192
|
+
element: Element;
|
|
193
|
+
};
|
|
194
|
+
export type DropTargetLocalizedData = {
|
|
195
|
+
/**
|
|
196
|
+
* A convenance pointer to this drop targets values
|
|
197
|
+
*/
|
|
198
|
+
self: DropTargetRecord;
|
|
199
|
+
};
|
|
200
|
+
/**
|
|
201
|
+
* Mapping event names to the payloads for those events
|
|
202
|
+
*/
|
|
203
|
+
export type DropTargetEventPayloadMap<DragType extends AllDragTypes> = {
|
|
204
|
+
[EventName in keyof EventPayloadMap<DragType>]: EventPayloadMap<DragType>[EventName] & DropTargetLocalizedData;
|
|
205
|
+
} & {
|
|
206
|
+
/**
|
|
207
|
+
* Derived from the `onDropTargetChange` event
|
|
208
|
+
* (`onDragEnter` is not it's own event that bubbles)
|
|
209
|
+
*
|
|
210
|
+
* `onDragEnter` is fired when _this_ drop target is entered into
|
|
211
|
+
* and not when any child drop targets change
|
|
212
|
+
*/
|
|
213
|
+
onDragEnter: EventPayloadMap<DragType>['onDropTargetChange'] & DropTargetLocalizedData;
|
|
214
|
+
/**
|
|
215
|
+
* Derived from the `onDropTargetChange` event
|
|
216
|
+
* (`onDragLeave` is not it's own event that bubbles)
|
|
217
|
+
*
|
|
218
|
+
* `onDragLeave` is fired when _this_ drop target is exited from
|
|
219
|
+
* and not when any child drop targets change
|
|
220
|
+
*/
|
|
221
|
+
onDragLeave: EventPayloadMap<DragType>['onDropTargetChange'] & DropTargetLocalizedData;
|
|
222
|
+
};
|
|
223
|
+
export type DropTargetArgs<DragType extends AllDragTypes> = {
|
|
224
|
+
/**
|
|
225
|
+
* The `element` that you want to attach drop target behaviour to.
|
|
226
|
+
* The `element` is the unique _key_ for a drop target
|
|
227
|
+
*/
|
|
228
|
+
element: Element;
|
|
229
|
+
/**
|
|
230
|
+
* A function that returns `data` you want to attach to the drop target.
|
|
231
|
+
* `getData()` is called _repeatedly_ while the user is dragging over the drop target in order to power addons
|
|
232
|
+
*/
|
|
233
|
+
getData?: (args: DropTargetGetFeedbackArgs<DragType>) => Record<string | symbol, unknown>;
|
|
234
|
+
/**
|
|
235
|
+
* Used to conditionally block dropping.
|
|
236
|
+
* By default a drop target can be dropped on.
|
|
237
|
+
*
|
|
238
|
+
* Return `false` if you want to block a drop.
|
|
239
|
+
*
|
|
240
|
+
* `canDrop()` is called _repeatedly_ while a drop target
|
|
241
|
+
* is being dragged over to allow you to dynamically
|
|
242
|
+
* change your mind as to whether a drop target can be
|
|
243
|
+
* dropped on.
|
|
244
|
+
*/
|
|
245
|
+
canDrop?: (args: DropTargetGetFeedbackArgs<DragType>) => boolean;
|
|
246
|
+
/**
|
|
247
|
+
* Optionally provide a _drop effect_ to be applied when
|
|
248
|
+
* this drop target is the innermost drop target being dragged over
|
|
249
|
+
*/
|
|
250
|
+
getDropEffect?: (args: DropTargetGetFeedbackArgs<DragType>) => DataTransfer['dropEffect'];
|
|
251
|
+
/**
|
|
252
|
+
* Return `true` if you want your drop target to hold onto
|
|
253
|
+
* selection after the user is no longer dragging over this drop target.
|
|
254
|
+
*
|
|
255
|
+
* Stickiness defaults to `false`
|
|
256
|
+
*
|
|
257
|
+
* _For more details about the stickiness algorithm please refer to the docs_
|
|
258
|
+
*/
|
|
259
|
+
getIsSticky?: (args: DropTargetGetFeedbackArgs<DragType>) => boolean;
|
|
260
|
+
} & {
|
|
261
|
+
[EventName in keyof DropTargetEventPayloadMap<DragType>]?: (args: DropTargetEventPayloadMap<DragType>[EventName]) => void;
|
|
262
|
+
};
|
|
263
|
+
export type DropTargetAPI<DragType extends AllDragTypes> = {
|
|
264
|
+
dropTargetForConsumers: (args: DropTargetArgs<DragType>) => CleanupFn;
|
|
265
|
+
dispatchEvent: <EventName extends keyof EventPayloadMap<DragType>>(args: {
|
|
266
|
+
eventName: EventName;
|
|
267
|
+
payload: EventPayloadMap<DragType>[EventName];
|
|
268
|
+
}) => void;
|
|
269
|
+
getIsOver: (args: {
|
|
270
|
+
source: DragType['payload'];
|
|
271
|
+
target: EventTarget | null;
|
|
272
|
+
input: Input;
|
|
273
|
+
current: DropTargetRecord[];
|
|
274
|
+
}) => DropTargetRecord[];
|
|
275
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { AllDragTypes, DragLocation, EventPayloadMap } from '../internal-types';
|
|
2
|
+
export declare function makeDispatch<DragType extends AllDragTypes>({ source, initial, dispatchEvent, }: {
|
|
3
|
+
source: DragType['payload'];
|
|
4
|
+
initial: DragLocation;
|
|
5
|
+
dispatchEvent: <EventName extends keyof EventPayloadMap<DragType>>(args: {
|
|
6
|
+
eventName: EventName;
|
|
7
|
+
payload: EventPayloadMap<DragType>[EventName];
|
|
8
|
+
}) => void;
|
|
9
|
+
}): {
|
|
10
|
+
start({ nativeSetDragImage, }: {
|
|
11
|
+
nativeSetDragImage: DataTransfer['setDragImage'] | null;
|
|
12
|
+
}): void;
|
|
13
|
+
dragUpdate({ current }: {
|
|
14
|
+
current: DragLocation;
|
|
15
|
+
}): void;
|
|
16
|
+
drag({ current }: {
|
|
17
|
+
current: DragLocation;
|
|
18
|
+
}): void;
|
|
19
|
+
drop({ current, updatedExternalPayload: updatedSourcePayload, }: {
|
|
20
|
+
current: DragLocation;
|
|
21
|
+
/** When dragging from an external source, we need to collect the
|
|
22
|
+
drag source information again as it is often only available during
|
|
23
|
+
the "drop" event */
|
|
24
|
+
updatedExternalPayload: DragType['payload'] | null;
|
|
25
|
+
}): void;
|
|
26
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { AllDragTypes, DragInterface, DropTargetAPI, EventPayloadMap } from '../internal-types';
|
|
2
|
+
declare function canStart(): boolean;
|
|
3
|
+
declare function start<DragType extends AllDragTypes>({ event, dragInterface, getDropTargetsOver, dispatchEvent, }: {
|
|
4
|
+
event: DragEvent;
|
|
5
|
+
dragInterface: DragInterface<DragType>;
|
|
6
|
+
getDropTargetsOver: DropTargetAPI<DragType>['getIsOver'];
|
|
7
|
+
dispatchEvent: <EventName extends keyof EventPayloadMap<DragType>>(args: {
|
|
8
|
+
eventName: EventName;
|
|
9
|
+
payload: EventPayloadMap<DragType>[EventName];
|
|
10
|
+
}) => void;
|
|
11
|
+
}): void;
|
|
12
|
+
export declare const lifecycle: {
|
|
13
|
+
canStart: typeof canStart;
|
|
14
|
+
start: typeof start;
|
|
15
|
+
};
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { AdapterAPI, AllDragTypes, CleanupFn, EventPayloadMap } from '../internal-types';
|
|
2
|
+
export declare function makeAdapter<DragType extends AllDragTypes>({ typeKey, mount, dispatchEventToSource, defaultDropEffect, }: {
|
|
3
|
+
typeKey: DragType['key'];
|
|
4
|
+
mount: (api: AdapterAPI<DragType>) => CleanupFn;
|
|
5
|
+
defaultDropEffect: DragType['defaultDropEffect'];
|
|
6
|
+
dispatchEventToSource?: <EventName extends keyof EventPayloadMap<DragType>>(args: {
|
|
7
|
+
eventName: EventName;
|
|
8
|
+
payload: EventPayloadMap<DragType>[EventName];
|
|
9
|
+
}) => void;
|
|
10
|
+
}): {
|
|
11
|
+
registerUsage: () => CleanupFn;
|
|
12
|
+
dropTarget: (args: import("../internal-types").DropTargetArgs<DragType>) => CleanupFn;
|
|
13
|
+
monitor: (args: import("../internal-types").MonitorArgs<DragType>) => CleanupFn;
|
|
14
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { AllDragTypes, DropTargetAPI } from '../internal-types';
|
|
2
|
+
export declare function makeDropTarget<DragType extends AllDragTypes>({ typeKey, defaultDropEffect, }: {
|
|
3
|
+
typeKey: DragType['key'];
|
|
4
|
+
defaultDropEffect: DataTransfer['dropEffect'];
|
|
5
|
+
}): DropTargetAPI<DragType>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { AllDragTypes, CleanupFn, EventPayloadMap, MonitorArgs } from '../internal-types';
|
|
2
|
+
export declare function makeMonitor<DragType extends AllDragTypes>(): {
|
|
3
|
+
dispatchEvent: <EventName extends keyof EventPayloadMap<DragType>>({ eventName, payload, }: {
|
|
4
|
+
eventName: EventName;
|
|
5
|
+
payload: EventPayloadMap<DragType>[EventName];
|
|
6
|
+
}) => void;
|
|
7
|
+
monitorForConsumers: (args: MonitorArgs<DragType>) => CleanupFn;
|
|
8
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { DragLocation } from '../internal-types';
|
|
2
|
+
/** 🔥🤮 Fix (Chrome, Safari and Firefox) bug where the element under where the user started dragging
|
|
3
|
+
* (on the viewport) is entered into by the browser after a drag finishes ("drop" or "dragend")
|
|
4
|
+
*
|
|
5
|
+
* @description
|
|
6
|
+
*
|
|
7
|
+
* Block pointer events on all elements except for the specific element that pointer is currently over
|
|
8
|
+
*
|
|
9
|
+
* - [Visual explanation of bug](https://twitter.com/alexandereardon/status/1633614212873465856)
|
|
10
|
+
* - [Chrome bug](https://bugs.chromium.org/p/chromium/issues/detail?id=410328)
|
|
11
|
+
*/
|
|
12
|
+
export declare function fixPostDragPointerBug({ current }: {
|
|
13
|
+
current: DragLocation;
|
|
14
|
+
}): void;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scroll an `element` just enough into view so that the element becomes totally visible.
|
|
3
|
+
* If the element is already totally visible then no scrolling will occur.
|
|
4
|
+
*/
|
|
5
|
+
export declare function scrollJustEnoughIntoView({ element, }: {
|
|
6
|
+
element: Element;
|
|
7
|
+
}): void;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { ElementEventPayloadMap } from '../adapter/element-adapter';
|
|
2
|
+
/** A function to remove the element that has been added to the `container`.
|
|
3
|
+
* @example () => ReactDOM.unmountComponentAtNode(container)
|
|
4
|
+
*/
|
|
5
|
+
type CleanupFn = () => void;
|
|
6
|
+
/** A function that will render a preview element into a `container` `HTMLElement` */
|
|
7
|
+
type RenderFn = ({ container, }: {
|
|
8
|
+
/** The `HTMLElement` that you need to render your preview element into.
|
|
9
|
+
`container` will be appended to the `document.body` and will be removed
|
|
10
|
+
after your `CleanupFn` is called
|
|
11
|
+
*/
|
|
12
|
+
container: HTMLElement;
|
|
13
|
+
}) => CleanupFn | void;
|
|
14
|
+
/** Any valid CSS string value
|
|
15
|
+
* @example `calc(var(--grid) * 2)
|
|
16
|
+
*/
|
|
17
|
+
type CSSValue = string;
|
|
18
|
+
/**
|
|
19
|
+
* Where to place the custom drag preview
|
|
20
|
+
*
|
|
21
|
+
* `type: 'center'`: Place the center of the drag preview user the users pointer
|
|
22
|
+
*
|
|
23
|
+
* `type: 'offset-from-pointer'`: Shift the drag preview away from the users pointer
|
|
24
|
+
*/
|
|
25
|
+
type Placement = {
|
|
26
|
+
type: 'center';
|
|
27
|
+
} | {
|
|
28
|
+
type: 'offset-from-pointer';
|
|
29
|
+
x: CSSValue;
|
|
30
|
+
y: CSSValue;
|
|
31
|
+
};
|
|
32
|
+
/** This function provides the ability to mount an element for it to be used as the native drag preview
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* draggable({
|
|
36
|
+
* onGenerateDragPreview: ({ nativeSetDragImage }) => {
|
|
37
|
+
* setCustomNativeDragPreview({
|
|
38
|
+
* render: ({ container }) => {
|
|
39
|
+
* ReactDOM.render(<Preview item={item} />, container);
|
|
40
|
+
* return () => ReactDOM.unmountComponentAtNode(container);
|
|
41
|
+
* },
|
|
42
|
+
* nativeSetDragImage,
|
|
43
|
+
* });
|
|
44
|
+
* },
|
|
45
|
+
* });
|
|
46
|
+
*/
|
|
47
|
+
export declare function setCustomNativeDragPreview({ render, nativeSetDragImage, placement, }: {
|
|
48
|
+
placement?: Placement;
|
|
49
|
+
render: RenderFn;
|
|
50
|
+
nativeSetDragImage: ElementEventPayloadMap['onGenerateDragPreview']['nativeSetDragImage'];
|
|
51
|
+
}): void;
|
|
52
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/pragmatic-drag-and-drop",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.2",
|
|
4
4
|
"description": "The core Pragmatic drag and drop framework, optimized for performance.",
|
|
5
5
|
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
6
6
|
"author": "Atlassian Pty Ltd",
|