1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | import * as React from 'react';
|
18 |
|
19 | export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
20 |
|
21 | export interface Position {
|
22 | x: number;
|
23 | y: number;
|
24 | }
|
25 |
|
26 | export interface BoxModel {
|
27 |
|
28 | marginBox: Rect;
|
29 |
|
30 | borderBox: Rect;
|
31 |
|
32 | paddingBox: Rect;
|
33 |
|
34 | contentBox: Rect;
|
35 |
|
36 | border: Spacing;
|
37 | padding: Spacing;
|
38 | margin: Spacing;
|
39 | }
|
40 |
|
41 |
|
42 | export interface Rect {
|
43 |
|
44 | top: number;
|
45 | right: number;
|
46 | bottom: number;
|
47 | left: number;
|
48 | width: number;
|
49 | height: number;
|
50 |
|
51 | x: number;
|
52 | y: number;
|
53 |
|
54 | center: Position;
|
55 | }
|
56 |
|
57 | export interface Spacing {
|
58 | top: number;
|
59 | right: number;
|
60 | bottom: number;
|
61 | left: number;
|
62 | }
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 | export type Id = string;
|
69 | export type DraggableId = Id;
|
70 | export type DroppableId = Id;
|
71 | export type TypeId = Id;
|
72 | export type ContextId = Id;
|
73 | export type ElementId = Id;
|
74 |
|
75 | export type DroppableMode = 'standard' | 'virtual';
|
76 |
|
77 | export interface DroppableDescriptor {
|
78 | id: DroppableId;
|
79 | type: TypeId;
|
80 | mode: DroppableMode;
|
81 | }
|
82 |
|
83 | export interface DraggableDescriptor {
|
84 | id: DraggableId;
|
85 | index: number;
|
86 |
|
87 | droppableId: DroppableId;
|
88 |
|
89 |
|
90 | type: TypeId;
|
91 | }
|
92 |
|
93 | export interface DraggableOptions {
|
94 | canDragInteractiveElements: boolean;
|
95 | shouldRespectForcePress: boolean;
|
96 | isEnabled: boolean;
|
97 | }
|
98 |
|
99 | export type Direction = 'horizontal' | 'vertical';
|
100 |
|
101 | export interface VerticalAxis {
|
102 | direction: 'vertical';
|
103 | line: 'y';
|
104 | start: 'top';
|
105 | end: 'bottom';
|
106 | size: 'height';
|
107 | crossAxisLine: 'x';
|
108 | crossAxisStart: 'left';
|
109 | crossAxisEnd: 'right';
|
110 | crossAxisSize: 'width';
|
111 | }
|
112 |
|
113 | export interface HorizontalAxis {
|
114 | direction: 'horizontal';
|
115 | line: 'x';
|
116 | start: 'left';
|
117 | end: 'right';
|
118 | size: 'width';
|
119 | crossAxisLine: 'y';
|
120 | crossAxisStart: 'top';
|
121 | crossAxisEnd: 'bottom';
|
122 | crossAxisSize: 'height';
|
123 | }
|
124 |
|
125 | export type Axis = VerticalAxis | HorizontalAxis;
|
126 |
|
127 | export interface ScrollSize {
|
128 | scrollHeight: number;
|
129 | scrollWidth: number;
|
130 | }
|
131 |
|
132 | export interface ScrollDifference {
|
133 | value: Position;
|
134 |
|
135 |
|
136 |
|
137 | displacement: Position;
|
138 | }
|
139 |
|
140 | export interface ScrollDetails {
|
141 | initial: Position;
|
142 | current: Position;
|
143 |
|
144 | max: Position;
|
145 | diff: ScrollDifference;
|
146 | }
|
147 |
|
148 | export interface Placeholder {
|
149 | client: BoxModel;
|
150 | tagName: string;
|
151 | display: string;
|
152 | }
|
153 |
|
154 | export interface DraggableDimension {
|
155 | descriptor: DraggableDescriptor;
|
156 |
|
157 | placeholder: Placeholder;
|
158 |
|
159 | client: BoxModel;
|
160 |
|
161 | page: BoxModel;
|
162 |
|
163 |
|
164 | displaceBy: Position;
|
165 | }
|
166 |
|
167 | export interface Scrollable {
|
168 |
|
169 |
|
170 | pageMarginBox: Rect;
|
171 |
|
172 | frameClient: BoxModel;
|
173 | scrollSize: ScrollSize;
|
174 |
|
175 |
|
176 | shouldClipSubject: boolean;
|
177 | scroll: ScrollDetails;
|
178 | }
|
179 |
|
180 | export interface PlaceholderInSubject {
|
181 |
|
182 |
|
183 | increasedBy?: Position | undefined;
|
184 | placeholderSize: Position;
|
185 |
|
186 |
|
187 | oldFrameMaxScroll?: Position | undefined;
|
188 | }
|
189 |
|
190 | export interface DroppableSubject {
|
191 |
|
192 | page: BoxModel;
|
193 | withPlaceholder?: PlaceholderInSubject | undefined;
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 | active?: Rect | undefined;
|
201 | }
|
202 |
|
203 | export interface DroppableDimension {
|
204 | descriptor: DroppableDescriptor;
|
205 | axis: Axis;
|
206 | isEnabled: boolean;
|
207 | isCombineEnabled: boolean;
|
208 |
|
209 | client: BoxModel;
|
210 |
|
211 | isFixedOnPage: boolean;
|
212 |
|
213 | page: BoxModel;
|
214 |
|
215 | frame?: Scrollable | undefined;
|
216 |
|
217 | subject: DroppableSubject;
|
218 | }
|
219 |
|
220 | export interface DraggableLocation {
|
221 | droppableId: DroppableId;
|
222 | index: number;
|
223 | }
|
224 |
|
225 | export interface DraggableIdMap {
|
226 | [id: string]: true;
|
227 | }
|
228 |
|
229 | export interface DroppableIdMap {
|
230 | [id: string]: true;
|
231 | }
|
232 |
|
233 | export interface DraggableDimensionMap {
|
234 | [key: string]: DraggableDimension;
|
235 | }
|
236 | export interface DroppableDimensionMap {
|
237 | [key: string]: DroppableDimension;
|
238 | }
|
239 |
|
240 | export interface Displacement {
|
241 | draggableId: DraggableId;
|
242 | shouldAnimate: boolean;
|
243 | }
|
244 |
|
245 | export interface DisplacementMap {
|
246 | [key: string]: Displacement;
|
247 | }
|
248 |
|
249 | export interface DisplacedBy {
|
250 | value: number;
|
251 | point: Position;
|
252 | }
|
253 |
|
254 |
|
255 | export interface Combine {
|
256 | draggableId: DraggableId;
|
257 | droppableId: DroppableId;
|
258 | }
|
259 |
|
260 | export interface DisplacementGroups {
|
261 | all: DraggableId[];
|
262 | visible: DisplacementMap;
|
263 | invisible: DraggableIdMap;
|
264 | }
|
265 |
|
266 | export interface ReorderImpact {
|
267 | type: 'REORDER';
|
268 | destination: DraggableLocation;
|
269 | }
|
270 |
|
271 | export interface CombineImpact {
|
272 | type: 'COMBINE';
|
273 | combine: Combine;
|
274 | }
|
275 |
|
276 | export type ImpactLocation = ReorderImpact | CombineImpact;
|
277 |
|
278 | export interface Displaced {
|
279 | forwards: DisplacementGroups;
|
280 | backwards: DisplacementGroups;
|
281 | }
|
282 |
|
283 | export interface DragImpact {
|
284 | displaced: DisplacementGroups;
|
285 | displacedBy: DisplacedBy;
|
286 | at?: ImpactLocation | undefined;
|
287 | }
|
288 |
|
289 | export interface ClientPositions {
|
290 |
|
291 |
|
292 |
|
293 | selection: Position;
|
294 |
|
295 | borderBoxCenter: Position;
|
296 |
|
297 | offset: Position;
|
298 | }
|
299 |
|
300 | export interface PagePositions {
|
301 | selection: Position;
|
302 | borderBoxCenter: Position;
|
303 |
|
304 | offset: Position;
|
305 | }
|
306 |
|
307 |
|
308 |
|
309 |
|
310 | export type MovementMode = 'FLUID' | 'SNAP';
|
311 |
|
312 | export interface DragPositions {
|
313 | client: ClientPositions;
|
314 | page: PagePositions;
|
315 | }
|
316 |
|
317 | export interface DraggableRubric {
|
318 | draggableId: DraggableId;
|
319 | mode: MovementMode;
|
320 | source: DraggableLocation;
|
321 | }
|
322 |
|
323 | export interface DragStart extends BeforeCapture {
|
324 | type: TypeId;
|
325 | source: DraggableLocation;
|
326 | }
|
327 |
|
328 |
|
329 |
|
330 |
|
331 | export interface BeforeCapture {
|
332 | draggableId: DraggableId;
|
333 | mode: MovementMode;
|
334 | }
|
335 |
|
336 |
|
337 | export interface DragStart extends DraggableRubric {
|
338 | mode: MovementMode;
|
339 | }
|
340 |
|
341 | export interface DragUpdate extends DragStart {
|
342 |
|
343 | destination?: DraggableLocation | undefined;
|
344 |
|
345 | combine?: Combine | undefined;
|
346 | }
|
347 |
|
348 | export type DropReason = 'DROP' | 'CANCEL';
|
349 |
|
350 | export interface DropResult extends DragUpdate {
|
351 | reason: DropReason;
|
352 | }
|
353 |
|
354 | export interface ScrollOptions {
|
355 | shouldPublishImmediately: boolean;
|
356 | }
|
357 |
|
358 |
|
359 |
|
360 |
|
361 |
|
362 |
|
363 |
|
364 | export interface LiftRequest {
|
365 | draggableId: DraggableId;
|
366 | scrollOptions: ScrollOptions;
|
367 | }
|
368 |
|
369 | export interface Critical {
|
370 | draggable: DraggableDescriptor;
|
371 | droppable: DroppableDescriptor;
|
372 | }
|
373 |
|
374 | export interface Viewport {
|
375 |
|
376 | frame: Rect;
|
377 | scroll: ScrollDetails;
|
378 | }
|
379 |
|
380 | export interface LiftEffect {
|
381 | inVirtualList: boolean;
|
382 | effected: DraggableIdMap;
|
383 | displacedBy: DisplacedBy;
|
384 | }
|
385 |
|
386 | export interface DimensionMap {
|
387 | draggables: DraggableDimensionMap;
|
388 | droppables: DroppableDimensionMap;
|
389 | }
|
390 |
|
391 | export interface DroppablePublish {
|
392 | droppableId: DroppableId;
|
393 | scroll: Position;
|
394 | }
|
395 | export interface Published {
|
396 | additions: DraggableDimension[];
|
397 | removals: DraggableId[];
|
398 | modified: DroppablePublish[];
|
399 | }
|
400 |
|
401 | export interface CompletedDrag {
|
402 | critical: Critical;
|
403 | result: DropResult;
|
404 | impact: DragImpact;
|
405 | afterCritical: LiftEffect;
|
406 | }
|
407 |
|
408 | export interface IdleState {
|
409 | phase: 'IDLE';
|
410 | completed?: CompletedDrag | undefined;
|
411 | shouldFlush: boolean;
|
412 | }
|
413 |
|
414 | export interface DraggingState {
|
415 | phase: 'DRAGGING';
|
416 | isDragging: true;
|
417 | critical: Critical;
|
418 | movementMode: MovementMode;
|
419 | dimensions: DimensionMap;
|
420 | initial: DragPositions;
|
421 | current: DragPositions;
|
422 | impact: DragImpact;
|
423 | viewport: Viewport;
|
424 | afterCritical: LiftEffect;
|
425 | onLiftImpact: DragImpact;
|
426 |
|
427 | isWindowScrollAllowed: boolean;
|
428 |
|
429 | scrollJumpRequest?: Position | undefined;
|
430 |
|
431 | forceShouldAnimate?: boolean | undefined;
|
432 | }
|
433 |
|
434 |
|
435 |
|
436 |
|
437 |
|
438 |
|
439 | export interface CollectingState extends Omit<DraggingState, 'phase'> {
|
440 | phase: 'COLLECTING';
|
441 | }
|
442 |
|
443 |
|
444 |
|
445 |
|
446 |
|
447 | export interface DropPendingState extends Omit<DraggingState, 'phase'> {
|
448 | phase: 'DROP_PENDING';
|
449 | isWaiting: boolean;
|
450 | reason: DropReason;
|
451 | }
|
452 |
|
453 |
|
454 | export interface DropAnimatingState {
|
455 | phase: 'DROP_ANIMATING';
|
456 | completed: CompletedDrag;
|
457 | newHomeClientOffset: Position;
|
458 | dropDuration: number;
|
459 |
|
460 | dimensions: DimensionMap;
|
461 | }
|
462 |
|
463 | export type State = IdleState | DraggingState | CollectingState | DropPendingState | DropAnimatingState;
|
464 |
|
465 | export type StateWhenUpdatesAllowed = DraggingState | CollectingState;
|
466 |
|
467 | export type Announce = (message: string) => void;
|
468 |
|
469 | export type InOutAnimationMode = 'none' | 'open' | 'close';
|
470 |
|
471 | export interface ResponderProvided {
|
472 | announce: Announce;
|
473 | }
|
474 |
|
475 | export type OnBeforeCaptureResponder = (before: BeforeCapture) => void;
|
476 |
|
477 | export type OnBeforeDragStartResponder = (start: DragStart) => void;
|
478 |
|
479 | export type OnDragStartResponder = (start: DragStart, provided: ResponderProvided) => void;
|
480 |
|
481 | export type OnDragUpdateResponder = (update: DragUpdate, provided: ResponderProvided) => void;
|
482 |
|
483 | export type OnDragEndResponder = (result: DropResult, provided: ResponderProvided) => void;
|
484 |
|
485 | export interface Responders {
|
486 | onBeforeCapture?: OnBeforeCaptureResponder | undefined;
|
487 | onBeforeDragStart?: OnBeforeDragStartResponder | undefined;
|
488 | onDragStart?: OnDragStartResponder | undefined;
|
489 | onDragUpdate?: OnDragUpdateResponder | undefined;
|
490 |
|
491 | onDragEnd: OnDragEndResponder;
|
492 | }
|
493 |
|
494 | export interface StopDragOptions {
|
495 | shouldBlockNextClick: boolean;
|
496 | }
|
497 |
|
498 | export interface DragActions {
|
499 | drop: (args?: StopDragOptions) => void;
|
500 | cancel: (args?: StopDragOptions) => void;
|
501 | isActive: () => boolean;
|
502 | shouldRespectForcePress: () => boolean;
|
503 | }
|
504 |
|
505 | export interface FluidDragActions extends DragActions {
|
506 | move: (clientSelection: Position) => void;
|
507 | }
|
508 |
|
509 | export interface SnapDragActions extends DragActions {
|
510 | moveUp: () => void;
|
511 | moveDown: () => void;
|
512 | moveRight: () => void;
|
513 | moveLeft: () => void;
|
514 | }
|
515 |
|
516 | export interface PreDragActions {
|
517 |
|
518 | isActive: () => boolean;
|
519 |
|
520 | shouldRespectForcePress: () => boolean;
|
521 |
|
522 | fluidLift: (clientSelection: Position) => FluidDragActions;
|
523 | snapLift: () => SnapDragActions;
|
524 |
|
525 | abort: () => void;
|
526 | }
|
527 |
|
528 | export interface TryGetLockOptions {
|
529 | sourceEvent?: Event | undefined;
|
530 | }
|
531 |
|
532 | export type TryGetLock = (
|
533 | draggableId: DraggableId,
|
534 | forceStop?: () => void,
|
535 | options?: TryGetLockOptions,
|
536 | ) => PreDragActions | null;
|
537 |
|
538 | export interface SensorAPI {
|
539 | tryGetLock: TryGetLock;
|
540 | canGetLock: (id: DraggableId) => boolean;
|
541 | isLockClaimed: () => boolean;
|
542 | tryReleaseLock: () => void;
|
543 | findClosestDraggableId: (event: Event) => DraggableId | null;
|
544 | findOptionsForDraggable: (id: DraggableId) => DraggableOptions | null;
|
545 | }
|
546 |
|
547 | export type Sensor = (api: SensorAPI) => void;
|
548 |
|
549 |
|
550 |
|
551 |
|
552 |
|
553 | export interface DragDropContextProps {
|
554 | onBeforeCapture?(before: BeforeCapture): void;
|
555 | onBeforeDragStart?(initial: DragStart): void;
|
556 | onDragStart?(initial: DragStart, provided: ResponderProvided): void;
|
557 | onDragUpdate?(initial: DragUpdate, provided: ResponderProvided): void;
|
558 | onDragEnd(result: DropResult, provided: ResponderProvided): void;
|
559 | children: React.ReactNode | null;
|
560 | dragHandleUsageInstructions?: string | undefined;
|
561 | nonce?: string | undefined;
|
562 | enableDefaultSensors?: boolean | undefined;
|
563 | sensors?: Sensor[] | undefined;
|
564 | }
|
565 |
|
566 | export class DragDropContext extends React.Component<DragDropContextProps> { }
|
567 |
|
568 |
|
569 |
|
570 |
|
571 |
|
572 | export interface DroppableProvidedProps {
|
573 |
|
574 | 'data-rbd-droppable-context-id': string;
|
575 |
|
576 | 'data-rbd-droppable-id': DroppableId;
|
577 | }
|
578 |
|
579 | export interface DroppableProvided {
|
580 | innerRef: (element: HTMLElement | null) => any;
|
581 | placeholder?: React.ReactElement<HTMLElement> | null | undefined;
|
582 | droppableProps: DroppableProvidedProps;
|
583 | }
|
584 |
|
585 | export interface DroppableStateSnapshot {
|
586 | isDraggingOver: boolean;
|
587 | draggingOverWith?: DraggableId | undefined;
|
588 | draggingFromThisWith?: DraggableId | undefined;
|
589 | isUsingPlaceholder: boolean;
|
590 | }
|
591 |
|
592 | export interface DroppableProps {
|
593 | droppableId: DroppableId;
|
594 | type?: TypeId | undefined;
|
595 | mode?: DroppableMode | undefined;
|
596 | isDropDisabled?: boolean | undefined;
|
597 | isCombineEnabled?: boolean | undefined;
|
598 | direction?: Direction | undefined;
|
599 | ignoreContainerClipping?: boolean | undefined;
|
600 | renderClone?: DraggableChildrenFn | undefined;
|
601 | getContainerForClone?: (() => React.ReactElement<HTMLElement>) | undefined;
|
602 | children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement>;
|
603 | }
|
604 |
|
605 | export class Droppable extends React.Component<DroppableProps> { }
|
606 |
|
607 | /**
|
608 | * Draggable
|
609 | */
|
610 |
|
611 | export interface DropAnimation {
|
612 | duration: number;
|
613 | curve: string;
|
614 | moveTo: Position;
|
615 | opacity?: number | undefined;
|
616 | scale?: number | undefined;
|
617 | }
|
618 |
|
619 | export interface NotDraggingStyle {
|
620 | transform?: string | undefined;
|
621 | transition?: 'none' | undefined;
|
622 | }
|
623 |
|
624 | export interface DraggingStyle {
|
625 | position: 'fixed';
|
626 | top: number;
|
627 | left: number;
|
628 | boxSizing: 'border-box';
|
629 | width: number;
|
630 | height: number;
|
631 | transition: 'none';
|
632 | transform?: string | undefined;
|
633 | zIndex: number;
|
634 | opacity?: number | undefined;
|
635 | pointerEvents: 'none';
|
636 | }
|
637 |
|
638 | export interface DraggableProvidedDraggableProps {
|
639 | // inline style
|
640 | style?: DraggingStyle | NotDraggingStyle | undefined;
|
641 | // used for shared global styles
|
642 | 'data-rbd-draggable-context-id': string;
|
643 | 'data-rbd-draggable-id': string;
|
644 | onTransitionEnd?: React.TransitionEventHandler<any> | undefined;
|
645 | }
|
646 |
|
647 | export interface DraggableProvidedDragHandleProps {
|
648 | 'data-rbd-drag-handle-draggable-id': DraggableId;
|
649 | 'data-rbd-drag-handle-context-id': ContextId;
|
650 | 'aria-describedby': ElementId;
|
651 |
|
652 | role: string;
|
653 | tabIndex: number;
|
654 | draggable: boolean;
|
655 | onDragStart: React.DragEventHandler<any>;
|
656 | }
|
657 |
|
658 | export interface DraggableProvided {
|
659 | // will be removed after move to react 16
|
660 | innerRef: (element?: HTMLElement | null) => any;
|
661 | draggableProps: DraggableProvidedDraggableProps;
|
662 | dragHandleProps?: DraggableProvidedDragHandleProps | undefined;
|
663 | }
|
664 |
|
665 | export interface DraggableStateSnapshot {
|
666 | isDragging: boolean;
|
667 | isDropAnimating: boolean;
|
668 | dropAnimation?: DropAnimation | undefined;
|
669 | draggingOver?: DroppableId | undefined;
|
670 |
|
671 | combineWith?: DraggableId | undefined;
|
672 |
|
673 | combineTargetFor?: DraggableId | undefined;
|
674 |
|
675 | mode?: MovementMode | undefined;
|
676 | }
|
677 |
|
678 | export type DraggableChildrenFn = (
|
679 | provided: DraggableProvided,
|
680 | snapshot: DraggableStateSnapshot,
|
681 | rubric: DraggableRubric,
|
682 | ) => React.ReactElement<HTMLElement>;
|
683 |
|
684 | export interface DraggableProps {
|
685 | draggableId: DraggableId;
|
686 | index: number;
|
687 | children: DraggableChildrenFn;
|
688 | isDragDisabled?: boolean | undefined;
|
689 | disableInteractiveElementBlocking?: boolean | undefined;
|
690 | shouldRespectForcePress?: boolean | undefined;
|
691 | }
|
692 |
|
693 | export class Draggable extends React.Component<DraggableProps> { }
|
694 |
|
695 | export function resetServerContext(): void;
|
696 |
|
697 | export const useMouseSensor: Sensor;
|
698 | export const useTouchSensor: Sensor;
|
699 | export const useKeyboardSensor: Sensor;
|