@acvl/frontend-components 0.0.14 → 0.0.16
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/dist/cjs/index.js +35 -3305
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/src/components/v1/badges/StatusBadge/StatusBadge.d.ts +4 -1
- package/dist/cjs/types/src/components/v1/datagrids/wrappers/CreateGridWrapper.d.ts +1 -0
- package/dist/esm/index.js +36 -3306
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/src/components/v1/badges/StatusBadge/StatusBadge.d.ts +4 -1
- package/dist/esm/types/src/components/v1/datagrids/wrappers/CreateGridWrapper.d.ts +1 -0
- package/dist/index.d.ts +4 -1
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -93,6 +93,7 @@ var RefreshIcon = require('@mui/icons-material/Refresh');
|
|
|
93
93
|
var Pagination = require('@mui/material/Pagination');
|
|
94
94
|
var sortable = require('@dnd-kit/sortable');
|
|
95
95
|
var utilities = require('@dnd-kit/utilities');
|
|
96
|
+
var core$1 = require('@dnd-kit/core');
|
|
96
97
|
var modifiers = require('@dnd-kit/modifiers');
|
|
97
98
|
var CloseIcon = require('@mui/icons-material/Close');
|
|
98
99
|
var ErrorOutlineIcon = require('@mui/icons-material/ErrorOutline');
|
|
@@ -7408,7 +7409,7 @@ function memoize(fn) {
|
|
|
7408
7409
|
};
|
|
7409
7410
|
}
|
|
7410
7411
|
|
|
7411
|
-
const properties
|
|
7412
|
+
const properties = {
|
|
7412
7413
|
m: 'margin',
|
|
7413
7414
|
p: 'padding'
|
|
7414
7415
|
};
|
|
@@ -7440,7 +7441,7 @@ const getCssProperties = memoize(prop => {
|
|
|
7440
7441
|
}
|
|
7441
7442
|
}
|
|
7442
7443
|
const [a, b] = prop.split('');
|
|
7443
|
-
const property = properties
|
|
7444
|
+
const property = properties[a];
|
|
7444
7445
|
const direction = directions[b] || '';
|
|
7445
7446
|
return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
|
|
7446
7447
|
});
|
|
@@ -9487,7 +9488,7 @@ const _excluded$C = ["enableAccessibleFieldDOMStructure"],
|
|
|
9487
9488
|
_excluded6 = ["ownerState"],
|
|
9488
9489
|
_excluded7 = ["ownerState"],
|
|
9489
9490
|
_excluded8 = ["InputProps", "inputProps"];
|
|
9490
|
-
const noop$
|
|
9491
|
+
const noop$2 = () => {};
|
|
9491
9492
|
const cleanFieldResponse = _ref => {
|
|
9492
9493
|
let {
|
|
9493
9494
|
enableAccessibleFieldDOMStructure
|
|
@@ -9504,7 +9505,7 @@ const cleanFieldResponse = _ref => {
|
|
|
9504
9505
|
openPickerAriaLabel
|
|
9505
9506
|
} = fieldResponse,
|
|
9506
9507
|
other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2$6);
|
|
9507
|
-
const mergedInputProps = version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop$
|
|
9508
|
+
const mergedInputProps = version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop$2;
|
|
9508
9509
|
return {
|
|
9509
9510
|
clearable,
|
|
9510
9511
|
onClear,
|
|
@@ -9539,8 +9540,8 @@ const cleanFieldResponse = _ref => {
|
|
|
9539
9540
|
openPickerAriaLabel
|
|
9540
9541
|
} = fieldResponse,
|
|
9541
9542
|
other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3$1);
|
|
9542
|
-
const mergedInputProps = version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop$
|
|
9543
|
-
const mergedHtmlInputProps = version.major >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps(other?.slotProps?.htmlInput, inputProps) : noop$
|
|
9543
|
+
const mergedInputProps = version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop$2;
|
|
9544
|
+
const mergedHtmlInputProps = version.major >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps(other?.slotProps?.htmlInput, inputProps) : noop$2;
|
|
9544
9545
|
return {
|
|
9545
9546
|
clearable,
|
|
9546
9547
|
onClear,
|
|
@@ -11955,7 +11956,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11955
11956
|
onExited: PropTypes.func
|
|
11956
11957
|
} : {}; // Name the function so it is clearer in the documentation
|
|
11957
11958
|
|
|
11958
|
-
function noop$
|
|
11959
|
+
function noop$1() {}
|
|
11959
11960
|
|
|
11960
11961
|
Transition.defaultProps = {
|
|
11961
11962
|
in: false,
|
|
@@ -11964,12 +11965,12 @@ Transition.defaultProps = {
|
|
|
11964
11965
|
appear: false,
|
|
11965
11966
|
enter: true,
|
|
11966
11967
|
exit: true,
|
|
11967
|
-
onEnter: noop$
|
|
11968
|
-
onEntering: noop$
|
|
11969
|
-
onEntered: noop$
|
|
11970
|
-
onExit: noop$
|
|
11971
|
-
onExiting: noop$
|
|
11972
|
-
onExited: noop$
|
|
11968
|
+
onEnter: noop$1,
|
|
11969
|
+
onEntering: noop$1,
|
|
11970
|
+
onEntered: noop$1,
|
|
11971
|
+
onExit: noop$1,
|
|
11972
|
+
onExiting: noop$1,
|
|
11973
|
+
onExited: noop$1
|
|
11973
11974
|
};
|
|
11974
11975
|
Transition.UNMOUNTED = UNMOUNTED;
|
|
11975
11976
|
Transition.EXITED = EXITED;
|
|
@@ -12904,7 +12905,7 @@ const PickersDayFiller = styles.styled('div', {
|
|
|
12904
12905
|
opacity: 0,
|
|
12905
12906
|
pointerEvents: 'none'
|
|
12906
12907
|
}));
|
|
12907
|
-
const noop
|
|
12908
|
+
const noop = () => {};
|
|
12908
12909
|
const PickersDayRaw = /*#__PURE__*/React__namespace.forwardRef(function PickersDay(inProps, forwardedRef) {
|
|
12909
12910
|
const props = styles.useThemeProps({
|
|
12910
12911
|
props: inProps,
|
|
@@ -12917,11 +12918,11 @@ const PickersDayRaw = /*#__PURE__*/React__namespace.forwardRef(function PickersD
|
|
|
12917
12918
|
isAnimating,
|
|
12918
12919
|
onClick,
|
|
12919
12920
|
onDaySelect,
|
|
12920
|
-
onFocus = noop
|
|
12921
|
-
onBlur = noop
|
|
12922
|
-
onKeyDown = noop
|
|
12923
|
-
onMouseDown = noop
|
|
12924
|
-
onMouseEnter = noop
|
|
12921
|
+
onFocus = noop,
|
|
12922
|
+
onBlur = noop,
|
|
12923
|
+
onKeyDown = noop,
|
|
12924
|
+
onMouseDown = noop,
|
|
12925
|
+
onMouseEnter = noop,
|
|
12925
12926
|
children,
|
|
12926
12927
|
day,
|
|
12927
12928
|
selected,
|
|
@@ -26782,7 +26783,7 @@ const StatusBadge = (props) => {
|
|
|
26782
26783
|
}
|
|
26783
26784
|
}, [props?.severity]);
|
|
26784
26785
|
if (props)
|
|
26785
|
-
return (jsxRuntime.jsx(material.Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', border: 4, borderRadius: 1, borderColor: color[800], bgcolor: color[100], height: 1, minWidth: 100, px: 1, children: jsxRuntime.jsx(material.Typography, { fontWeight: 'bold', sx: {
|
|
26786
|
+
return (jsxRuntime.jsx(material.Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', border: 4, borderRadius: 1, borderColor: color[800], bgcolor: color[100], height: 1, minWidth: 100, px: 1, ...props.slotProps?.box, children: jsxRuntime.jsx(material.Typography, { fontWeight: 'bold', sx: {
|
|
26786
26787
|
color: color[900]
|
|
26787
26788
|
}, children: props.title }) }));
|
|
26788
26789
|
return null;
|
|
@@ -27271,7 +27272,7 @@ function CustomPagination() {
|
|
|
27271
27272
|
}
|
|
27272
27273
|
|
|
27273
27274
|
const DraggableRow = (params) => {
|
|
27274
|
-
const { attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({ id: params.rowId });
|
|
27275
|
+
const { attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({ id: params.rowId.toString() });
|
|
27275
27276
|
const style = {
|
|
27276
27277
|
transform: utilities.CSS.Transform.toString(transform),
|
|
27277
27278
|
transition
|
|
@@ -27288,3284 +27289,6 @@ const DraggableRow = (params) => {
|
|
|
27288
27289
|
} }), jsxRuntime.jsx(xDataGrid.GridRow, { ...params })] }));
|
|
27289
27290
|
};
|
|
27290
27291
|
|
|
27291
|
-
const hiddenStyles = {
|
|
27292
|
-
display: 'none'
|
|
27293
|
-
};
|
|
27294
|
-
function HiddenText(_ref) {
|
|
27295
|
-
let {
|
|
27296
|
-
id,
|
|
27297
|
-
value
|
|
27298
|
-
} = _ref;
|
|
27299
|
-
return React.createElement("div", {
|
|
27300
|
-
id: id,
|
|
27301
|
-
style: hiddenStyles
|
|
27302
|
-
}, value);
|
|
27303
|
-
}
|
|
27304
|
-
|
|
27305
|
-
function LiveRegion(_ref) {
|
|
27306
|
-
let {
|
|
27307
|
-
id,
|
|
27308
|
-
announcement,
|
|
27309
|
-
ariaLiveType = "assertive"
|
|
27310
|
-
} = _ref;
|
|
27311
|
-
// Hide element visually but keep it readable by screen readers
|
|
27312
|
-
const visuallyHidden = {
|
|
27313
|
-
position: 'fixed',
|
|
27314
|
-
top: 0,
|
|
27315
|
-
left: 0,
|
|
27316
|
-
width: 1,
|
|
27317
|
-
height: 1,
|
|
27318
|
-
margin: -1,
|
|
27319
|
-
border: 0,
|
|
27320
|
-
padding: 0,
|
|
27321
|
-
overflow: 'hidden',
|
|
27322
|
-
clip: 'rect(0 0 0 0)',
|
|
27323
|
-
clipPath: 'inset(100%)',
|
|
27324
|
-
whiteSpace: 'nowrap'
|
|
27325
|
-
};
|
|
27326
|
-
return React.createElement("div", {
|
|
27327
|
-
id: id,
|
|
27328
|
-
style: visuallyHidden,
|
|
27329
|
-
role: "status",
|
|
27330
|
-
"aria-live": ariaLiveType,
|
|
27331
|
-
"aria-atomic": true
|
|
27332
|
-
}, announcement);
|
|
27333
|
-
}
|
|
27334
|
-
|
|
27335
|
-
function useAnnouncement() {
|
|
27336
|
-
const [announcement, setAnnouncement] = React.useState('');
|
|
27337
|
-
const announce = React.useCallback(value => {
|
|
27338
|
-
if (value != null) {
|
|
27339
|
-
setAnnouncement(value);
|
|
27340
|
-
}
|
|
27341
|
-
}, []);
|
|
27342
|
-
return {
|
|
27343
|
-
announce,
|
|
27344
|
-
announcement
|
|
27345
|
-
};
|
|
27346
|
-
}
|
|
27347
|
-
|
|
27348
|
-
const DndMonitorContext = /*#__PURE__*/React.createContext(null);
|
|
27349
|
-
|
|
27350
|
-
function useDndMonitor(listener) {
|
|
27351
|
-
const registerListener = React.useContext(DndMonitorContext);
|
|
27352
|
-
React.useEffect(() => {
|
|
27353
|
-
if (!registerListener) {
|
|
27354
|
-
throw new Error('useDndMonitor must be used within a children of <DndContext>');
|
|
27355
|
-
}
|
|
27356
|
-
|
|
27357
|
-
const unsubscribe = registerListener(listener);
|
|
27358
|
-
return unsubscribe;
|
|
27359
|
-
}, [listener, registerListener]);
|
|
27360
|
-
}
|
|
27361
|
-
|
|
27362
|
-
function useDndMonitorProvider() {
|
|
27363
|
-
const [listeners] = React.useState(() => new Set());
|
|
27364
|
-
const registerListener = React.useCallback(listener => {
|
|
27365
|
-
listeners.add(listener);
|
|
27366
|
-
return () => listeners.delete(listener);
|
|
27367
|
-
}, [listeners]);
|
|
27368
|
-
const dispatch = React.useCallback(_ref => {
|
|
27369
|
-
let {
|
|
27370
|
-
type,
|
|
27371
|
-
event
|
|
27372
|
-
} = _ref;
|
|
27373
|
-
listeners.forEach(listener => {
|
|
27374
|
-
var _listener$type;
|
|
27375
|
-
|
|
27376
|
-
return (_listener$type = listener[type]) == null ? void 0 : _listener$type.call(listener, event);
|
|
27377
|
-
});
|
|
27378
|
-
}, [listeners]);
|
|
27379
|
-
return [dispatch, registerListener];
|
|
27380
|
-
}
|
|
27381
|
-
|
|
27382
|
-
const defaultScreenReaderInstructions = {
|
|
27383
|
-
draggable: "\n To pick up a draggable item, press the space bar.\n While dragging, use the arrow keys to move the item.\n Press space again to drop the item in its new position, or press escape to cancel.\n "
|
|
27384
|
-
};
|
|
27385
|
-
const defaultAnnouncements = {
|
|
27386
|
-
onDragStart(_ref) {
|
|
27387
|
-
let {
|
|
27388
|
-
active
|
|
27389
|
-
} = _ref;
|
|
27390
|
-
return "Picked up draggable item " + active.id + ".";
|
|
27391
|
-
},
|
|
27392
|
-
|
|
27393
|
-
onDragOver(_ref2) {
|
|
27394
|
-
let {
|
|
27395
|
-
active,
|
|
27396
|
-
over
|
|
27397
|
-
} = _ref2;
|
|
27398
|
-
|
|
27399
|
-
if (over) {
|
|
27400
|
-
return "Draggable item " + active.id + " was moved over droppable area " + over.id + ".";
|
|
27401
|
-
}
|
|
27402
|
-
|
|
27403
|
-
return "Draggable item " + active.id + " is no longer over a droppable area.";
|
|
27404
|
-
},
|
|
27405
|
-
|
|
27406
|
-
onDragEnd(_ref3) {
|
|
27407
|
-
let {
|
|
27408
|
-
active,
|
|
27409
|
-
over
|
|
27410
|
-
} = _ref3;
|
|
27411
|
-
|
|
27412
|
-
if (over) {
|
|
27413
|
-
return "Draggable item " + active.id + " was dropped over droppable area " + over.id;
|
|
27414
|
-
}
|
|
27415
|
-
|
|
27416
|
-
return "Draggable item " + active.id + " was dropped.";
|
|
27417
|
-
},
|
|
27418
|
-
|
|
27419
|
-
onDragCancel(_ref4) {
|
|
27420
|
-
let {
|
|
27421
|
-
active
|
|
27422
|
-
} = _ref4;
|
|
27423
|
-
return "Dragging was cancelled. Draggable item " + active.id + " was dropped.";
|
|
27424
|
-
}
|
|
27425
|
-
|
|
27426
|
-
};
|
|
27427
|
-
|
|
27428
|
-
function Accessibility(_ref) {
|
|
27429
|
-
let {
|
|
27430
|
-
announcements = defaultAnnouncements,
|
|
27431
|
-
container,
|
|
27432
|
-
hiddenTextDescribedById,
|
|
27433
|
-
screenReaderInstructions = defaultScreenReaderInstructions
|
|
27434
|
-
} = _ref;
|
|
27435
|
-
const {
|
|
27436
|
-
announce,
|
|
27437
|
-
announcement
|
|
27438
|
-
} = useAnnouncement();
|
|
27439
|
-
const liveRegionId = utilities.useUniqueId("DndLiveRegion");
|
|
27440
|
-
const [mounted, setMounted] = React.useState(false);
|
|
27441
|
-
React.useEffect(() => {
|
|
27442
|
-
setMounted(true);
|
|
27443
|
-
}, []);
|
|
27444
|
-
useDndMonitor(React.useMemo(() => ({
|
|
27445
|
-
onDragStart(_ref2) {
|
|
27446
|
-
let {
|
|
27447
|
-
active
|
|
27448
|
-
} = _ref2;
|
|
27449
|
-
announce(announcements.onDragStart({
|
|
27450
|
-
active
|
|
27451
|
-
}));
|
|
27452
|
-
},
|
|
27453
|
-
|
|
27454
|
-
onDragMove(_ref3) {
|
|
27455
|
-
let {
|
|
27456
|
-
active,
|
|
27457
|
-
over
|
|
27458
|
-
} = _ref3;
|
|
27459
|
-
|
|
27460
|
-
if (announcements.onDragMove) {
|
|
27461
|
-
announce(announcements.onDragMove({
|
|
27462
|
-
active,
|
|
27463
|
-
over
|
|
27464
|
-
}));
|
|
27465
|
-
}
|
|
27466
|
-
},
|
|
27467
|
-
|
|
27468
|
-
onDragOver(_ref4) {
|
|
27469
|
-
let {
|
|
27470
|
-
active,
|
|
27471
|
-
over
|
|
27472
|
-
} = _ref4;
|
|
27473
|
-
announce(announcements.onDragOver({
|
|
27474
|
-
active,
|
|
27475
|
-
over
|
|
27476
|
-
}));
|
|
27477
|
-
},
|
|
27478
|
-
|
|
27479
|
-
onDragEnd(_ref5) {
|
|
27480
|
-
let {
|
|
27481
|
-
active,
|
|
27482
|
-
over
|
|
27483
|
-
} = _ref5;
|
|
27484
|
-
announce(announcements.onDragEnd({
|
|
27485
|
-
active,
|
|
27486
|
-
over
|
|
27487
|
-
}));
|
|
27488
|
-
},
|
|
27489
|
-
|
|
27490
|
-
onDragCancel(_ref6) {
|
|
27491
|
-
let {
|
|
27492
|
-
active,
|
|
27493
|
-
over
|
|
27494
|
-
} = _ref6;
|
|
27495
|
-
announce(announcements.onDragCancel({
|
|
27496
|
-
active,
|
|
27497
|
-
over
|
|
27498
|
-
}));
|
|
27499
|
-
}
|
|
27500
|
-
|
|
27501
|
-
}), [announce, announcements]));
|
|
27502
|
-
|
|
27503
|
-
if (!mounted) {
|
|
27504
|
-
return null;
|
|
27505
|
-
}
|
|
27506
|
-
|
|
27507
|
-
const markup = React.createElement(React.Fragment, null, React.createElement(HiddenText, {
|
|
27508
|
-
id: hiddenTextDescribedById,
|
|
27509
|
-
value: screenReaderInstructions.draggable
|
|
27510
|
-
}), React.createElement(LiveRegion, {
|
|
27511
|
-
id: liveRegionId,
|
|
27512
|
-
announcement: announcement
|
|
27513
|
-
}));
|
|
27514
|
-
return container ? ReactDOM.createPortal(markup, container) : markup;
|
|
27515
|
-
}
|
|
27516
|
-
|
|
27517
|
-
var Action;
|
|
27518
|
-
|
|
27519
|
-
(function (Action) {
|
|
27520
|
-
Action["DragStart"] = "dragStart";
|
|
27521
|
-
Action["DragMove"] = "dragMove";
|
|
27522
|
-
Action["DragEnd"] = "dragEnd";
|
|
27523
|
-
Action["DragCancel"] = "dragCancel";
|
|
27524
|
-
Action["DragOver"] = "dragOver";
|
|
27525
|
-
Action["RegisterDroppable"] = "registerDroppable";
|
|
27526
|
-
Action["SetDroppableDisabled"] = "setDroppableDisabled";
|
|
27527
|
-
Action["UnregisterDroppable"] = "unregisterDroppable";
|
|
27528
|
-
})(Action || (Action = {}));
|
|
27529
|
-
|
|
27530
|
-
function noop() {}
|
|
27531
|
-
|
|
27532
|
-
function useSensor(sensor, options) {
|
|
27533
|
-
return React.useMemo(() => ({
|
|
27534
|
-
sensor,
|
|
27535
|
-
options: {}
|
|
27536
|
-
}), // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
27537
|
-
[sensor, options]);
|
|
27538
|
-
}
|
|
27539
|
-
|
|
27540
|
-
function useSensors() {
|
|
27541
|
-
for (var _len = arguments.length, sensors = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
27542
|
-
sensors[_key] = arguments[_key];
|
|
27543
|
-
}
|
|
27544
|
-
|
|
27545
|
-
return React.useMemo(() => [...sensors].filter(sensor => sensor != null), // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
27546
|
-
[...sensors]);
|
|
27547
|
-
}
|
|
27548
|
-
|
|
27549
|
-
const defaultCoordinates = /*#__PURE__*/Object.freeze({
|
|
27550
|
-
x: 0,
|
|
27551
|
-
y: 0
|
|
27552
|
-
});
|
|
27553
|
-
|
|
27554
|
-
/**
|
|
27555
|
-
* Returns the distance between two points
|
|
27556
|
-
*/
|
|
27557
|
-
function distanceBetween(p1, p2) {
|
|
27558
|
-
return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
|
|
27559
|
-
}
|
|
27560
|
-
|
|
27561
|
-
/**
|
|
27562
|
-
* Sort collisions from smallest to greatest value
|
|
27563
|
-
*/
|
|
27564
|
-
function sortCollisionsAsc(_ref, _ref2) {
|
|
27565
|
-
let {
|
|
27566
|
-
data: {
|
|
27567
|
-
value: a
|
|
27568
|
-
}
|
|
27569
|
-
} = _ref;
|
|
27570
|
-
let {
|
|
27571
|
-
data: {
|
|
27572
|
-
value: b
|
|
27573
|
-
}
|
|
27574
|
-
} = _ref2;
|
|
27575
|
-
return a - b;
|
|
27576
|
-
}
|
|
27577
|
-
/**
|
|
27578
|
-
* Sort collisions from greatest to smallest value
|
|
27579
|
-
*/
|
|
27580
|
-
|
|
27581
|
-
function sortCollisionsDesc(_ref3, _ref4) {
|
|
27582
|
-
let {
|
|
27583
|
-
data: {
|
|
27584
|
-
value: a
|
|
27585
|
-
}
|
|
27586
|
-
} = _ref3;
|
|
27587
|
-
let {
|
|
27588
|
-
data: {
|
|
27589
|
-
value: b
|
|
27590
|
-
}
|
|
27591
|
-
} = _ref4;
|
|
27592
|
-
return b - a;
|
|
27593
|
-
}
|
|
27594
|
-
function getFirstCollision(collisions, property) {
|
|
27595
|
-
if (!collisions || collisions.length === 0) {
|
|
27596
|
-
return null;
|
|
27597
|
-
}
|
|
27598
|
-
|
|
27599
|
-
const [firstCollision] = collisions;
|
|
27600
|
-
return firstCollision[property] ;
|
|
27601
|
-
}
|
|
27602
|
-
|
|
27603
|
-
/**
|
|
27604
|
-
* Returns the coordinates of the center of a given ClientRect
|
|
27605
|
-
*/
|
|
27606
|
-
|
|
27607
|
-
function centerOfRectangle(rect, left, top) {
|
|
27608
|
-
if (left === void 0) {
|
|
27609
|
-
left = rect.left;
|
|
27610
|
-
}
|
|
27611
|
-
|
|
27612
|
-
if (top === void 0) {
|
|
27613
|
-
top = rect.top;
|
|
27614
|
-
}
|
|
27615
|
-
|
|
27616
|
-
return {
|
|
27617
|
-
x: left + rect.width * 0.5,
|
|
27618
|
-
y: top + rect.height * 0.5
|
|
27619
|
-
};
|
|
27620
|
-
}
|
|
27621
|
-
/**
|
|
27622
|
-
* Returns the closest rectangles from an array of rectangles to the center of a given
|
|
27623
|
-
* rectangle.
|
|
27624
|
-
*/
|
|
27625
|
-
|
|
27626
|
-
|
|
27627
|
-
const closestCenter = _ref => {
|
|
27628
|
-
let {
|
|
27629
|
-
collisionRect,
|
|
27630
|
-
droppableRects,
|
|
27631
|
-
droppableContainers
|
|
27632
|
-
} = _ref;
|
|
27633
|
-
const centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);
|
|
27634
|
-
const collisions = [];
|
|
27635
|
-
|
|
27636
|
-
for (const droppableContainer of droppableContainers) {
|
|
27637
|
-
const {
|
|
27638
|
-
id
|
|
27639
|
-
} = droppableContainer;
|
|
27640
|
-
const rect = droppableRects.get(id);
|
|
27641
|
-
|
|
27642
|
-
if (rect) {
|
|
27643
|
-
const distBetween = distanceBetween(centerOfRectangle(rect), centerRect);
|
|
27644
|
-
collisions.push({
|
|
27645
|
-
id,
|
|
27646
|
-
data: {
|
|
27647
|
-
droppableContainer,
|
|
27648
|
-
value: distBetween
|
|
27649
|
-
}
|
|
27650
|
-
});
|
|
27651
|
-
}
|
|
27652
|
-
}
|
|
27653
|
-
|
|
27654
|
-
return collisions.sort(sortCollisionsAsc);
|
|
27655
|
-
};
|
|
27656
|
-
|
|
27657
|
-
/**
|
|
27658
|
-
* Returns the intersecting rectangle area between two rectangles
|
|
27659
|
-
*/
|
|
27660
|
-
|
|
27661
|
-
function getIntersectionRatio(entry, target) {
|
|
27662
|
-
const top = Math.max(target.top, entry.top);
|
|
27663
|
-
const left = Math.max(target.left, entry.left);
|
|
27664
|
-
const right = Math.min(target.left + target.width, entry.left + entry.width);
|
|
27665
|
-
const bottom = Math.min(target.top + target.height, entry.top + entry.height);
|
|
27666
|
-
const width = right - left;
|
|
27667
|
-
const height = bottom - top;
|
|
27668
|
-
|
|
27669
|
-
if (left < right && top < bottom) {
|
|
27670
|
-
const targetArea = target.width * target.height;
|
|
27671
|
-
const entryArea = entry.width * entry.height;
|
|
27672
|
-
const intersectionArea = width * height;
|
|
27673
|
-
const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
|
|
27674
|
-
return Number(intersectionRatio.toFixed(4));
|
|
27675
|
-
} // Rectangles do not overlap, or overlap has an area of zero (edge/corner overlap)
|
|
27676
|
-
|
|
27677
|
-
|
|
27678
|
-
return 0;
|
|
27679
|
-
}
|
|
27680
|
-
/**
|
|
27681
|
-
* Returns the rectangles that has the greatest intersection area with a given
|
|
27682
|
-
* rectangle in an array of rectangles.
|
|
27683
|
-
*/
|
|
27684
|
-
|
|
27685
|
-
const rectIntersection = _ref => {
|
|
27686
|
-
let {
|
|
27687
|
-
collisionRect,
|
|
27688
|
-
droppableRects,
|
|
27689
|
-
droppableContainers
|
|
27690
|
-
} = _ref;
|
|
27691
|
-
const collisions = [];
|
|
27692
|
-
|
|
27693
|
-
for (const droppableContainer of droppableContainers) {
|
|
27694
|
-
const {
|
|
27695
|
-
id
|
|
27696
|
-
} = droppableContainer;
|
|
27697
|
-
const rect = droppableRects.get(id);
|
|
27698
|
-
|
|
27699
|
-
if (rect) {
|
|
27700
|
-
const intersectionRatio = getIntersectionRatio(rect, collisionRect);
|
|
27701
|
-
|
|
27702
|
-
if (intersectionRatio > 0) {
|
|
27703
|
-
collisions.push({
|
|
27704
|
-
id,
|
|
27705
|
-
data: {
|
|
27706
|
-
droppableContainer,
|
|
27707
|
-
value: intersectionRatio
|
|
27708
|
-
}
|
|
27709
|
-
});
|
|
27710
|
-
}
|
|
27711
|
-
}
|
|
27712
|
-
}
|
|
27713
|
-
|
|
27714
|
-
return collisions.sort(sortCollisionsDesc);
|
|
27715
|
-
};
|
|
27716
|
-
|
|
27717
|
-
function adjustScale(transform, rect1, rect2) {
|
|
27718
|
-
return { ...transform,
|
|
27719
|
-
scaleX: rect1 && rect2 ? rect1.width / rect2.width : 1,
|
|
27720
|
-
scaleY: rect1 && rect2 ? rect1.height / rect2.height : 1
|
|
27721
|
-
};
|
|
27722
|
-
}
|
|
27723
|
-
|
|
27724
|
-
function getRectDelta(rect1, rect2) {
|
|
27725
|
-
return rect1 && rect2 ? {
|
|
27726
|
-
x: rect1.left - rect2.left,
|
|
27727
|
-
y: rect1.top - rect2.top
|
|
27728
|
-
} : defaultCoordinates;
|
|
27729
|
-
}
|
|
27730
|
-
|
|
27731
|
-
function createRectAdjustmentFn(modifier) {
|
|
27732
|
-
return function adjustClientRect(rect) {
|
|
27733
|
-
for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
27734
|
-
adjustments[_key - 1] = arguments[_key];
|
|
27735
|
-
}
|
|
27736
|
-
|
|
27737
|
-
return adjustments.reduce((acc, adjustment) => ({ ...acc,
|
|
27738
|
-
top: acc.top + modifier * adjustment.y,
|
|
27739
|
-
bottom: acc.bottom + modifier * adjustment.y,
|
|
27740
|
-
left: acc.left + modifier * adjustment.x,
|
|
27741
|
-
right: acc.right + modifier * adjustment.x
|
|
27742
|
-
}), { ...rect
|
|
27743
|
-
});
|
|
27744
|
-
};
|
|
27745
|
-
}
|
|
27746
|
-
const getAdjustedRect = /*#__PURE__*/createRectAdjustmentFn(1);
|
|
27747
|
-
|
|
27748
|
-
function parseTransform(transform) {
|
|
27749
|
-
if (transform.startsWith('matrix3d(')) {
|
|
27750
|
-
const transformArray = transform.slice(9, -1).split(/, /);
|
|
27751
|
-
return {
|
|
27752
|
-
x: +transformArray[12],
|
|
27753
|
-
y: +transformArray[13],
|
|
27754
|
-
scaleX: +transformArray[0],
|
|
27755
|
-
scaleY: +transformArray[5]
|
|
27756
|
-
};
|
|
27757
|
-
} else if (transform.startsWith('matrix(')) {
|
|
27758
|
-
const transformArray = transform.slice(7, -1).split(/, /);
|
|
27759
|
-
return {
|
|
27760
|
-
x: +transformArray[4],
|
|
27761
|
-
y: +transformArray[5],
|
|
27762
|
-
scaleX: +transformArray[0],
|
|
27763
|
-
scaleY: +transformArray[3]
|
|
27764
|
-
};
|
|
27765
|
-
}
|
|
27766
|
-
|
|
27767
|
-
return null;
|
|
27768
|
-
}
|
|
27769
|
-
|
|
27770
|
-
function inverseTransform(rect, transform, transformOrigin) {
|
|
27771
|
-
const parsedTransform = parseTransform(transform);
|
|
27772
|
-
|
|
27773
|
-
if (!parsedTransform) {
|
|
27774
|
-
return rect;
|
|
27775
|
-
}
|
|
27776
|
-
|
|
27777
|
-
const {
|
|
27778
|
-
scaleX,
|
|
27779
|
-
scaleY,
|
|
27780
|
-
x: translateX,
|
|
27781
|
-
y: translateY
|
|
27782
|
-
} = parsedTransform;
|
|
27783
|
-
const x = rect.left - translateX - (1 - scaleX) * parseFloat(transformOrigin);
|
|
27784
|
-
const y = rect.top - translateY - (1 - scaleY) * parseFloat(transformOrigin.slice(transformOrigin.indexOf(' ') + 1));
|
|
27785
|
-
const w = scaleX ? rect.width / scaleX : rect.width;
|
|
27786
|
-
const h = scaleY ? rect.height / scaleY : rect.height;
|
|
27787
|
-
return {
|
|
27788
|
-
width: w,
|
|
27789
|
-
height: h,
|
|
27790
|
-
top: y,
|
|
27791
|
-
right: x + w,
|
|
27792
|
-
bottom: y + h,
|
|
27793
|
-
left: x
|
|
27794
|
-
};
|
|
27795
|
-
}
|
|
27796
|
-
|
|
27797
|
-
const defaultOptions = {
|
|
27798
|
-
ignoreTransform: false
|
|
27799
|
-
};
|
|
27800
|
-
/**
|
|
27801
|
-
* Returns the bounding client rect of an element relative to the viewport.
|
|
27802
|
-
*/
|
|
27803
|
-
|
|
27804
|
-
function getClientRect(element, options) {
|
|
27805
|
-
if (options === void 0) {
|
|
27806
|
-
options = defaultOptions;
|
|
27807
|
-
}
|
|
27808
|
-
|
|
27809
|
-
let rect = element.getBoundingClientRect();
|
|
27810
|
-
|
|
27811
|
-
if (options.ignoreTransform) {
|
|
27812
|
-
const {
|
|
27813
|
-
transform,
|
|
27814
|
-
transformOrigin
|
|
27815
|
-
} = utilities.getWindow(element).getComputedStyle(element);
|
|
27816
|
-
|
|
27817
|
-
if (transform) {
|
|
27818
|
-
rect = inverseTransform(rect, transform, transformOrigin);
|
|
27819
|
-
}
|
|
27820
|
-
}
|
|
27821
|
-
|
|
27822
|
-
const {
|
|
27823
|
-
top,
|
|
27824
|
-
left,
|
|
27825
|
-
width,
|
|
27826
|
-
height,
|
|
27827
|
-
bottom,
|
|
27828
|
-
right
|
|
27829
|
-
} = rect;
|
|
27830
|
-
return {
|
|
27831
|
-
top,
|
|
27832
|
-
left,
|
|
27833
|
-
width,
|
|
27834
|
-
height,
|
|
27835
|
-
bottom,
|
|
27836
|
-
right
|
|
27837
|
-
};
|
|
27838
|
-
}
|
|
27839
|
-
/**
|
|
27840
|
-
* Returns the bounding client rect of an element relative to the viewport.
|
|
27841
|
-
*
|
|
27842
|
-
* @remarks
|
|
27843
|
-
* The ClientRect returned by this method does not take into account transforms
|
|
27844
|
-
* applied to the element it measures.
|
|
27845
|
-
*
|
|
27846
|
-
*/
|
|
27847
|
-
|
|
27848
|
-
function getTransformAgnosticClientRect(element) {
|
|
27849
|
-
return getClientRect(element, {
|
|
27850
|
-
ignoreTransform: true
|
|
27851
|
-
});
|
|
27852
|
-
}
|
|
27853
|
-
|
|
27854
|
-
function getWindowClientRect(element) {
|
|
27855
|
-
const width = element.innerWidth;
|
|
27856
|
-
const height = element.innerHeight;
|
|
27857
|
-
return {
|
|
27858
|
-
top: 0,
|
|
27859
|
-
left: 0,
|
|
27860
|
-
right: width,
|
|
27861
|
-
bottom: height,
|
|
27862
|
-
width,
|
|
27863
|
-
height
|
|
27864
|
-
};
|
|
27865
|
-
}
|
|
27866
|
-
|
|
27867
|
-
function isFixed(node, computedStyle) {
|
|
27868
|
-
if (computedStyle === void 0) {
|
|
27869
|
-
computedStyle = utilities.getWindow(node).getComputedStyle(node);
|
|
27870
|
-
}
|
|
27871
|
-
|
|
27872
|
-
return computedStyle.position === 'fixed';
|
|
27873
|
-
}
|
|
27874
|
-
|
|
27875
|
-
function isScrollable(element, computedStyle) {
|
|
27876
|
-
if (computedStyle === void 0) {
|
|
27877
|
-
computedStyle = utilities.getWindow(element).getComputedStyle(element);
|
|
27878
|
-
}
|
|
27879
|
-
|
|
27880
|
-
const overflowRegex = /(auto|scroll|overlay)/;
|
|
27881
|
-
const properties = ['overflow', 'overflowX', 'overflowY'];
|
|
27882
|
-
return properties.some(property => {
|
|
27883
|
-
const value = computedStyle[property];
|
|
27884
|
-
return typeof value === 'string' ? overflowRegex.test(value) : false;
|
|
27885
|
-
});
|
|
27886
|
-
}
|
|
27887
|
-
|
|
27888
|
-
function getScrollableAncestors(element, limit) {
|
|
27889
|
-
const scrollParents = [];
|
|
27890
|
-
|
|
27891
|
-
function findScrollableAncestors(node) {
|
|
27892
|
-
if (limit != null && scrollParents.length >= limit) {
|
|
27893
|
-
return scrollParents;
|
|
27894
|
-
}
|
|
27895
|
-
|
|
27896
|
-
if (!node) {
|
|
27897
|
-
return scrollParents;
|
|
27898
|
-
}
|
|
27899
|
-
|
|
27900
|
-
if (utilities.isDocument(node) && node.scrollingElement != null && !scrollParents.includes(node.scrollingElement)) {
|
|
27901
|
-
scrollParents.push(node.scrollingElement);
|
|
27902
|
-
return scrollParents;
|
|
27903
|
-
}
|
|
27904
|
-
|
|
27905
|
-
if (!utilities.isHTMLElement(node) || utilities.isSVGElement(node)) {
|
|
27906
|
-
return scrollParents;
|
|
27907
|
-
}
|
|
27908
|
-
|
|
27909
|
-
if (scrollParents.includes(node)) {
|
|
27910
|
-
return scrollParents;
|
|
27911
|
-
}
|
|
27912
|
-
|
|
27913
|
-
const computedStyle = utilities.getWindow(element).getComputedStyle(node);
|
|
27914
|
-
|
|
27915
|
-
if (node !== element) {
|
|
27916
|
-
if (isScrollable(node, computedStyle)) {
|
|
27917
|
-
scrollParents.push(node);
|
|
27918
|
-
}
|
|
27919
|
-
}
|
|
27920
|
-
|
|
27921
|
-
if (isFixed(node, computedStyle)) {
|
|
27922
|
-
return scrollParents;
|
|
27923
|
-
}
|
|
27924
|
-
|
|
27925
|
-
return findScrollableAncestors(node.parentNode);
|
|
27926
|
-
}
|
|
27927
|
-
|
|
27928
|
-
if (!element) {
|
|
27929
|
-
return scrollParents;
|
|
27930
|
-
}
|
|
27931
|
-
|
|
27932
|
-
return findScrollableAncestors(element);
|
|
27933
|
-
}
|
|
27934
|
-
function getFirstScrollableAncestor(node) {
|
|
27935
|
-
const [firstScrollableAncestor] = getScrollableAncestors(node, 1);
|
|
27936
|
-
return firstScrollableAncestor != null ? firstScrollableAncestor : null;
|
|
27937
|
-
}
|
|
27938
|
-
|
|
27939
|
-
function getScrollableElement(element) {
|
|
27940
|
-
if (!utilities.canUseDOM || !element) {
|
|
27941
|
-
return null;
|
|
27942
|
-
}
|
|
27943
|
-
|
|
27944
|
-
if (utilities.isWindow(element)) {
|
|
27945
|
-
return element;
|
|
27946
|
-
}
|
|
27947
|
-
|
|
27948
|
-
if (!utilities.isNode(element)) {
|
|
27949
|
-
return null;
|
|
27950
|
-
}
|
|
27951
|
-
|
|
27952
|
-
if (utilities.isDocument(element) || element === utilities.getOwnerDocument(element).scrollingElement) {
|
|
27953
|
-
return window;
|
|
27954
|
-
}
|
|
27955
|
-
|
|
27956
|
-
if (utilities.isHTMLElement(element)) {
|
|
27957
|
-
return element;
|
|
27958
|
-
}
|
|
27959
|
-
|
|
27960
|
-
return null;
|
|
27961
|
-
}
|
|
27962
|
-
|
|
27963
|
-
function getScrollXCoordinate(element) {
|
|
27964
|
-
if (utilities.isWindow(element)) {
|
|
27965
|
-
return element.scrollX;
|
|
27966
|
-
}
|
|
27967
|
-
|
|
27968
|
-
return element.scrollLeft;
|
|
27969
|
-
}
|
|
27970
|
-
function getScrollYCoordinate(element) {
|
|
27971
|
-
if (utilities.isWindow(element)) {
|
|
27972
|
-
return element.scrollY;
|
|
27973
|
-
}
|
|
27974
|
-
|
|
27975
|
-
return element.scrollTop;
|
|
27976
|
-
}
|
|
27977
|
-
function getScrollCoordinates(element) {
|
|
27978
|
-
return {
|
|
27979
|
-
x: getScrollXCoordinate(element),
|
|
27980
|
-
y: getScrollYCoordinate(element)
|
|
27981
|
-
};
|
|
27982
|
-
}
|
|
27983
|
-
|
|
27984
|
-
var Direction;
|
|
27985
|
-
|
|
27986
|
-
(function (Direction) {
|
|
27987
|
-
Direction[Direction["Forward"] = 1] = "Forward";
|
|
27988
|
-
Direction[Direction["Backward"] = -1] = "Backward";
|
|
27989
|
-
})(Direction || (Direction = {}));
|
|
27990
|
-
|
|
27991
|
-
function isDocumentScrollingElement(element) {
|
|
27992
|
-
if (!utilities.canUseDOM || !element) {
|
|
27993
|
-
return false;
|
|
27994
|
-
}
|
|
27995
|
-
|
|
27996
|
-
return element === document.scrollingElement;
|
|
27997
|
-
}
|
|
27998
|
-
|
|
27999
|
-
function getScrollPosition(scrollingContainer) {
|
|
28000
|
-
const minScroll = {
|
|
28001
|
-
x: 0,
|
|
28002
|
-
y: 0
|
|
28003
|
-
};
|
|
28004
|
-
const dimensions = isDocumentScrollingElement(scrollingContainer) ? {
|
|
28005
|
-
height: window.innerHeight,
|
|
28006
|
-
width: window.innerWidth
|
|
28007
|
-
} : {
|
|
28008
|
-
height: scrollingContainer.clientHeight,
|
|
28009
|
-
width: scrollingContainer.clientWidth
|
|
28010
|
-
};
|
|
28011
|
-
const maxScroll = {
|
|
28012
|
-
x: scrollingContainer.scrollWidth - dimensions.width,
|
|
28013
|
-
y: scrollingContainer.scrollHeight - dimensions.height
|
|
28014
|
-
};
|
|
28015
|
-
const isTop = scrollingContainer.scrollTop <= minScroll.y;
|
|
28016
|
-
const isLeft = scrollingContainer.scrollLeft <= minScroll.x;
|
|
28017
|
-
const isBottom = scrollingContainer.scrollTop >= maxScroll.y;
|
|
28018
|
-
const isRight = scrollingContainer.scrollLeft >= maxScroll.x;
|
|
28019
|
-
return {
|
|
28020
|
-
isTop,
|
|
28021
|
-
isLeft,
|
|
28022
|
-
isBottom,
|
|
28023
|
-
isRight,
|
|
28024
|
-
maxScroll,
|
|
28025
|
-
minScroll
|
|
28026
|
-
};
|
|
28027
|
-
}
|
|
28028
|
-
|
|
28029
|
-
const defaultThreshold = {
|
|
28030
|
-
x: 0.2,
|
|
28031
|
-
y: 0.2
|
|
28032
|
-
};
|
|
28033
|
-
function getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, _ref, acceleration, thresholdPercentage) {
|
|
28034
|
-
let {
|
|
28035
|
-
top,
|
|
28036
|
-
left,
|
|
28037
|
-
right,
|
|
28038
|
-
bottom
|
|
28039
|
-
} = _ref;
|
|
28040
|
-
|
|
28041
|
-
if (acceleration === void 0) {
|
|
28042
|
-
acceleration = 10;
|
|
28043
|
-
}
|
|
28044
|
-
|
|
28045
|
-
if (thresholdPercentage === void 0) {
|
|
28046
|
-
thresholdPercentage = defaultThreshold;
|
|
28047
|
-
}
|
|
28048
|
-
|
|
28049
|
-
const {
|
|
28050
|
-
isTop,
|
|
28051
|
-
isBottom,
|
|
28052
|
-
isLeft,
|
|
28053
|
-
isRight
|
|
28054
|
-
} = getScrollPosition(scrollContainer);
|
|
28055
|
-
const direction = {
|
|
28056
|
-
x: 0,
|
|
28057
|
-
y: 0
|
|
28058
|
-
};
|
|
28059
|
-
const speed = {
|
|
28060
|
-
x: 0,
|
|
28061
|
-
y: 0
|
|
28062
|
-
};
|
|
28063
|
-
const threshold = {
|
|
28064
|
-
height: scrollContainerRect.height * thresholdPercentage.y,
|
|
28065
|
-
width: scrollContainerRect.width * thresholdPercentage.x
|
|
28066
|
-
};
|
|
28067
|
-
|
|
28068
|
-
if (!isTop && top <= scrollContainerRect.top + threshold.height) {
|
|
28069
|
-
// Scroll Up
|
|
28070
|
-
direction.y = Direction.Backward;
|
|
28071
|
-
speed.y = acceleration * Math.abs((scrollContainerRect.top + threshold.height - top) / threshold.height);
|
|
28072
|
-
} else if (!isBottom && bottom >= scrollContainerRect.bottom - threshold.height) {
|
|
28073
|
-
// Scroll Down
|
|
28074
|
-
direction.y = Direction.Forward;
|
|
28075
|
-
speed.y = acceleration * Math.abs((scrollContainerRect.bottom - threshold.height - bottom) / threshold.height);
|
|
28076
|
-
}
|
|
28077
|
-
|
|
28078
|
-
if (!isRight && right >= scrollContainerRect.right - threshold.width) {
|
|
28079
|
-
// Scroll Right
|
|
28080
|
-
direction.x = Direction.Forward;
|
|
28081
|
-
speed.x = acceleration * Math.abs((scrollContainerRect.right - threshold.width - right) / threshold.width);
|
|
28082
|
-
} else if (!isLeft && left <= scrollContainerRect.left + threshold.width) {
|
|
28083
|
-
// Scroll Left
|
|
28084
|
-
direction.x = Direction.Backward;
|
|
28085
|
-
speed.x = acceleration * Math.abs((scrollContainerRect.left + threshold.width - left) / threshold.width);
|
|
28086
|
-
}
|
|
28087
|
-
|
|
28088
|
-
return {
|
|
28089
|
-
direction,
|
|
28090
|
-
speed
|
|
28091
|
-
};
|
|
28092
|
-
}
|
|
28093
|
-
|
|
28094
|
-
function getScrollElementRect(element) {
|
|
28095
|
-
if (element === document.scrollingElement) {
|
|
28096
|
-
const {
|
|
28097
|
-
innerWidth,
|
|
28098
|
-
innerHeight
|
|
28099
|
-
} = window;
|
|
28100
|
-
return {
|
|
28101
|
-
top: 0,
|
|
28102
|
-
left: 0,
|
|
28103
|
-
right: innerWidth,
|
|
28104
|
-
bottom: innerHeight,
|
|
28105
|
-
width: innerWidth,
|
|
28106
|
-
height: innerHeight
|
|
28107
|
-
};
|
|
28108
|
-
}
|
|
28109
|
-
|
|
28110
|
-
const {
|
|
28111
|
-
top,
|
|
28112
|
-
left,
|
|
28113
|
-
right,
|
|
28114
|
-
bottom
|
|
28115
|
-
} = element.getBoundingClientRect();
|
|
28116
|
-
return {
|
|
28117
|
-
top,
|
|
28118
|
-
left,
|
|
28119
|
-
right,
|
|
28120
|
-
bottom,
|
|
28121
|
-
width: element.clientWidth,
|
|
28122
|
-
height: element.clientHeight
|
|
28123
|
-
};
|
|
28124
|
-
}
|
|
28125
|
-
|
|
28126
|
-
function getScrollOffsets(scrollableAncestors) {
|
|
28127
|
-
return scrollableAncestors.reduce((acc, node) => {
|
|
28128
|
-
return utilities.add(acc, getScrollCoordinates(node));
|
|
28129
|
-
}, defaultCoordinates);
|
|
28130
|
-
}
|
|
28131
|
-
function getScrollXOffset(scrollableAncestors) {
|
|
28132
|
-
return scrollableAncestors.reduce((acc, node) => {
|
|
28133
|
-
return acc + getScrollXCoordinate(node);
|
|
28134
|
-
}, 0);
|
|
28135
|
-
}
|
|
28136
|
-
function getScrollYOffset(scrollableAncestors) {
|
|
28137
|
-
return scrollableAncestors.reduce((acc, node) => {
|
|
28138
|
-
return acc + getScrollYCoordinate(node);
|
|
28139
|
-
}, 0);
|
|
28140
|
-
}
|
|
28141
|
-
|
|
28142
|
-
function scrollIntoViewIfNeeded(element, measure) {
|
|
28143
|
-
if (measure === void 0) {
|
|
28144
|
-
measure = getClientRect;
|
|
28145
|
-
}
|
|
28146
|
-
|
|
28147
|
-
if (!element) {
|
|
28148
|
-
return;
|
|
28149
|
-
}
|
|
28150
|
-
|
|
28151
|
-
const {
|
|
28152
|
-
top,
|
|
28153
|
-
left,
|
|
28154
|
-
bottom,
|
|
28155
|
-
right
|
|
28156
|
-
} = measure(element);
|
|
28157
|
-
const firstScrollableAncestor = getFirstScrollableAncestor(element);
|
|
28158
|
-
|
|
28159
|
-
if (!firstScrollableAncestor) {
|
|
28160
|
-
return;
|
|
28161
|
-
}
|
|
28162
|
-
|
|
28163
|
-
if (bottom <= 0 || right <= 0 || top >= window.innerHeight || left >= window.innerWidth) {
|
|
28164
|
-
element.scrollIntoView({
|
|
28165
|
-
block: 'center',
|
|
28166
|
-
inline: 'center'
|
|
28167
|
-
});
|
|
28168
|
-
}
|
|
28169
|
-
}
|
|
28170
|
-
|
|
28171
|
-
const properties = [['x', ['left', 'right'], getScrollXOffset], ['y', ['top', 'bottom'], getScrollYOffset]];
|
|
28172
|
-
class Rect {
|
|
28173
|
-
constructor(rect, element) {
|
|
28174
|
-
this.rect = void 0;
|
|
28175
|
-
this.width = void 0;
|
|
28176
|
-
this.height = void 0;
|
|
28177
|
-
this.top = void 0;
|
|
28178
|
-
this.bottom = void 0;
|
|
28179
|
-
this.right = void 0;
|
|
28180
|
-
this.left = void 0;
|
|
28181
|
-
const scrollableAncestors = getScrollableAncestors(element);
|
|
28182
|
-
const scrollOffsets = getScrollOffsets(scrollableAncestors);
|
|
28183
|
-
this.rect = { ...rect
|
|
28184
|
-
};
|
|
28185
|
-
this.width = rect.width;
|
|
28186
|
-
this.height = rect.height;
|
|
28187
|
-
|
|
28188
|
-
for (const [axis, keys, getScrollOffset] of properties) {
|
|
28189
|
-
for (const key of keys) {
|
|
28190
|
-
Object.defineProperty(this, key, {
|
|
28191
|
-
get: () => {
|
|
28192
|
-
const currentOffsets = getScrollOffset(scrollableAncestors);
|
|
28193
|
-
const scrollOffsetsDeltla = scrollOffsets[axis] - currentOffsets;
|
|
28194
|
-
return this.rect[key] + scrollOffsetsDeltla;
|
|
28195
|
-
},
|
|
28196
|
-
enumerable: true
|
|
28197
|
-
});
|
|
28198
|
-
}
|
|
28199
|
-
}
|
|
28200
|
-
|
|
28201
|
-
Object.defineProperty(this, 'rect', {
|
|
28202
|
-
enumerable: false
|
|
28203
|
-
});
|
|
28204
|
-
}
|
|
28205
|
-
|
|
28206
|
-
}
|
|
28207
|
-
|
|
28208
|
-
class Listeners {
|
|
28209
|
-
constructor(target) {
|
|
28210
|
-
this.target = void 0;
|
|
28211
|
-
this.listeners = [];
|
|
28212
|
-
|
|
28213
|
-
this.removeAll = () => {
|
|
28214
|
-
this.listeners.forEach(listener => {
|
|
28215
|
-
var _this$target;
|
|
28216
|
-
|
|
28217
|
-
return (_this$target = this.target) == null ? void 0 : _this$target.removeEventListener(...listener);
|
|
28218
|
-
});
|
|
28219
|
-
};
|
|
28220
|
-
|
|
28221
|
-
this.target = target;
|
|
28222
|
-
}
|
|
28223
|
-
|
|
28224
|
-
add(eventName, handler, options) {
|
|
28225
|
-
var _this$target2;
|
|
28226
|
-
|
|
28227
|
-
(_this$target2 = this.target) == null ? void 0 : _this$target2.addEventListener(eventName, handler, options);
|
|
28228
|
-
this.listeners.push([eventName, handler, options]);
|
|
28229
|
-
}
|
|
28230
|
-
|
|
28231
|
-
}
|
|
28232
|
-
|
|
28233
|
-
function getEventListenerTarget(target) {
|
|
28234
|
-
// If the `event.target` element is removed from the document events will still be targeted
|
|
28235
|
-
// at it, and hence won't always bubble up to the window or document anymore.
|
|
28236
|
-
// If there is any risk of an element being removed while it is being dragged,
|
|
28237
|
-
// the best practice is to attach the event listeners directly to the target.
|
|
28238
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
|
|
28239
|
-
const {
|
|
28240
|
-
EventTarget
|
|
28241
|
-
} = utilities.getWindow(target);
|
|
28242
|
-
return target instanceof EventTarget ? target : utilities.getOwnerDocument(target);
|
|
28243
|
-
}
|
|
28244
|
-
|
|
28245
|
-
function hasExceededDistance(delta, measurement) {
|
|
28246
|
-
const dx = Math.abs(delta.x);
|
|
28247
|
-
const dy = Math.abs(delta.y);
|
|
28248
|
-
|
|
28249
|
-
if (typeof measurement === 'number') {
|
|
28250
|
-
return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
|
|
28251
|
-
}
|
|
28252
|
-
|
|
28253
|
-
if ('x' in measurement && 'y' in measurement) {
|
|
28254
|
-
return dx > measurement.x && dy > measurement.y;
|
|
28255
|
-
}
|
|
28256
|
-
|
|
28257
|
-
if ('x' in measurement) {
|
|
28258
|
-
return dx > measurement.x;
|
|
28259
|
-
}
|
|
28260
|
-
|
|
28261
|
-
if ('y' in measurement) {
|
|
28262
|
-
return dy > measurement.y;
|
|
28263
|
-
}
|
|
28264
|
-
|
|
28265
|
-
return false;
|
|
28266
|
-
}
|
|
28267
|
-
|
|
28268
|
-
var EventName;
|
|
28269
|
-
|
|
28270
|
-
(function (EventName) {
|
|
28271
|
-
EventName["Click"] = "click";
|
|
28272
|
-
EventName["DragStart"] = "dragstart";
|
|
28273
|
-
EventName["Keydown"] = "keydown";
|
|
28274
|
-
EventName["ContextMenu"] = "contextmenu";
|
|
28275
|
-
EventName["Resize"] = "resize";
|
|
28276
|
-
EventName["SelectionChange"] = "selectionchange";
|
|
28277
|
-
EventName["VisibilityChange"] = "visibilitychange";
|
|
28278
|
-
})(EventName || (EventName = {}));
|
|
28279
|
-
|
|
28280
|
-
function preventDefault(event) {
|
|
28281
|
-
event.preventDefault();
|
|
28282
|
-
}
|
|
28283
|
-
function stopPropagation(event) {
|
|
28284
|
-
event.stopPropagation();
|
|
28285
|
-
}
|
|
28286
|
-
|
|
28287
|
-
var KeyboardCode;
|
|
28288
|
-
|
|
28289
|
-
(function (KeyboardCode) {
|
|
28290
|
-
KeyboardCode["Space"] = "Space";
|
|
28291
|
-
KeyboardCode["Down"] = "ArrowDown";
|
|
28292
|
-
KeyboardCode["Right"] = "ArrowRight";
|
|
28293
|
-
KeyboardCode["Left"] = "ArrowLeft";
|
|
28294
|
-
KeyboardCode["Up"] = "ArrowUp";
|
|
28295
|
-
KeyboardCode["Esc"] = "Escape";
|
|
28296
|
-
KeyboardCode["Enter"] = "Enter";
|
|
28297
|
-
KeyboardCode["Tab"] = "Tab";
|
|
28298
|
-
})(KeyboardCode || (KeyboardCode = {}));
|
|
28299
|
-
|
|
28300
|
-
const defaultKeyboardCodes = {
|
|
28301
|
-
start: [KeyboardCode.Space, KeyboardCode.Enter],
|
|
28302
|
-
cancel: [KeyboardCode.Esc],
|
|
28303
|
-
end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]
|
|
28304
|
-
};
|
|
28305
|
-
const defaultKeyboardCoordinateGetter = (event, _ref) => {
|
|
28306
|
-
let {
|
|
28307
|
-
currentCoordinates
|
|
28308
|
-
} = _ref;
|
|
28309
|
-
|
|
28310
|
-
switch (event.code) {
|
|
28311
|
-
case KeyboardCode.Right:
|
|
28312
|
-
return { ...currentCoordinates,
|
|
28313
|
-
x: currentCoordinates.x + 25
|
|
28314
|
-
};
|
|
28315
|
-
|
|
28316
|
-
case KeyboardCode.Left:
|
|
28317
|
-
return { ...currentCoordinates,
|
|
28318
|
-
x: currentCoordinates.x - 25
|
|
28319
|
-
};
|
|
28320
|
-
|
|
28321
|
-
case KeyboardCode.Down:
|
|
28322
|
-
return { ...currentCoordinates,
|
|
28323
|
-
y: currentCoordinates.y + 25
|
|
28324
|
-
};
|
|
28325
|
-
|
|
28326
|
-
case KeyboardCode.Up:
|
|
28327
|
-
return { ...currentCoordinates,
|
|
28328
|
-
y: currentCoordinates.y - 25
|
|
28329
|
-
};
|
|
28330
|
-
}
|
|
28331
|
-
|
|
28332
|
-
return undefined;
|
|
28333
|
-
};
|
|
28334
|
-
|
|
28335
|
-
class KeyboardSensor {
|
|
28336
|
-
constructor(props) {
|
|
28337
|
-
this.props = void 0;
|
|
28338
|
-
this.autoScrollEnabled = false;
|
|
28339
|
-
this.referenceCoordinates = void 0;
|
|
28340
|
-
this.listeners = void 0;
|
|
28341
|
-
this.windowListeners = void 0;
|
|
28342
|
-
this.props = props;
|
|
28343
|
-
const {
|
|
28344
|
-
event: {
|
|
28345
|
-
target
|
|
28346
|
-
}
|
|
28347
|
-
} = props;
|
|
28348
|
-
this.props = props;
|
|
28349
|
-
this.listeners = new Listeners(utilities.getOwnerDocument(target));
|
|
28350
|
-
this.windowListeners = new Listeners(utilities.getWindow(target));
|
|
28351
|
-
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
28352
|
-
this.handleCancel = this.handleCancel.bind(this);
|
|
28353
|
-
this.attach();
|
|
28354
|
-
}
|
|
28355
|
-
|
|
28356
|
-
attach() {
|
|
28357
|
-
this.handleStart();
|
|
28358
|
-
this.windowListeners.add(EventName.Resize, this.handleCancel);
|
|
28359
|
-
this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
|
|
28360
|
-
setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));
|
|
28361
|
-
}
|
|
28362
|
-
|
|
28363
|
-
handleStart() {
|
|
28364
|
-
const {
|
|
28365
|
-
activeNode,
|
|
28366
|
-
onStart
|
|
28367
|
-
} = this.props;
|
|
28368
|
-
const node = activeNode.node.current;
|
|
28369
|
-
|
|
28370
|
-
if (node) {
|
|
28371
|
-
scrollIntoViewIfNeeded(node);
|
|
28372
|
-
}
|
|
28373
|
-
|
|
28374
|
-
onStart(defaultCoordinates);
|
|
28375
|
-
}
|
|
28376
|
-
|
|
28377
|
-
handleKeyDown(event) {
|
|
28378
|
-
if (utilities.isKeyboardEvent(event)) {
|
|
28379
|
-
const {
|
|
28380
|
-
active,
|
|
28381
|
-
context,
|
|
28382
|
-
options
|
|
28383
|
-
} = this.props;
|
|
28384
|
-
const {
|
|
28385
|
-
keyboardCodes = defaultKeyboardCodes,
|
|
28386
|
-
coordinateGetter = defaultKeyboardCoordinateGetter,
|
|
28387
|
-
scrollBehavior = 'smooth'
|
|
28388
|
-
} = options;
|
|
28389
|
-
const {
|
|
28390
|
-
code
|
|
28391
|
-
} = event;
|
|
28392
|
-
|
|
28393
|
-
if (keyboardCodes.end.includes(code)) {
|
|
28394
|
-
this.handleEnd(event);
|
|
28395
|
-
return;
|
|
28396
|
-
}
|
|
28397
|
-
|
|
28398
|
-
if (keyboardCodes.cancel.includes(code)) {
|
|
28399
|
-
this.handleCancel(event);
|
|
28400
|
-
return;
|
|
28401
|
-
}
|
|
28402
|
-
|
|
28403
|
-
const {
|
|
28404
|
-
collisionRect
|
|
28405
|
-
} = context.current;
|
|
28406
|
-
const currentCoordinates = collisionRect ? {
|
|
28407
|
-
x: collisionRect.left,
|
|
28408
|
-
y: collisionRect.top
|
|
28409
|
-
} : defaultCoordinates;
|
|
28410
|
-
|
|
28411
|
-
if (!this.referenceCoordinates) {
|
|
28412
|
-
this.referenceCoordinates = currentCoordinates;
|
|
28413
|
-
}
|
|
28414
|
-
|
|
28415
|
-
const newCoordinates = coordinateGetter(event, {
|
|
28416
|
-
active,
|
|
28417
|
-
context: context.current,
|
|
28418
|
-
currentCoordinates
|
|
28419
|
-
});
|
|
28420
|
-
|
|
28421
|
-
if (newCoordinates) {
|
|
28422
|
-
const coordinatesDelta = utilities.subtract(newCoordinates, currentCoordinates);
|
|
28423
|
-
const scrollDelta = {
|
|
28424
|
-
x: 0,
|
|
28425
|
-
y: 0
|
|
28426
|
-
};
|
|
28427
|
-
const {
|
|
28428
|
-
scrollableAncestors
|
|
28429
|
-
} = context.current;
|
|
28430
|
-
|
|
28431
|
-
for (const scrollContainer of scrollableAncestors) {
|
|
28432
|
-
const direction = event.code;
|
|
28433
|
-
const {
|
|
28434
|
-
isTop,
|
|
28435
|
-
isRight,
|
|
28436
|
-
isLeft,
|
|
28437
|
-
isBottom,
|
|
28438
|
-
maxScroll,
|
|
28439
|
-
minScroll
|
|
28440
|
-
} = getScrollPosition(scrollContainer);
|
|
28441
|
-
const scrollElementRect = getScrollElementRect(scrollContainer);
|
|
28442
|
-
const clampedCoordinates = {
|
|
28443
|
-
x: Math.min(direction === KeyboardCode.Right ? scrollElementRect.right - scrollElementRect.width / 2 : scrollElementRect.right, Math.max(direction === KeyboardCode.Right ? scrollElementRect.left : scrollElementRect.left + scrollElementRect.width / 2, newCoordinates.x)),
|
|
28444
|
-
y: Math.min(direction === KeyboardCode.Down ? scrollElementRect.bottom - scrollElementRect.height / 2 : scrollElementRect.bottom, Math.max(direction === KeyboardCode.Down ? scrollElementRect.top : scrollElementRect.top + scrollElementRect.height / 2, newCoordinates.y))
|
|
28445
|
-
};
|
|
28446
|
-
const canScrollX = direction === KeyboardCode.Right && !isRight || direction === KeyboardCode.Left && !isLeft;
|
|
28447
|
-
const canScrollY = direction === KeyboardCode.Down && !isBottom || direction === KeyboardCode.Up && !isTop;
|
|
28448
|
-
|
|
28449
|
-
if (canScrollX && clampedCoordinates.x !== newCoordinates.x) {
|
|
28450
|
-
const newScrollCoordinates = scrollContainer.scrollLeft + coordinatesDelta.x;
|
|
28451
|
-
const canScrollToNewCoordinates = direction === KeyboardCode.Right && newScrollCoordinates <= maxScroll.x || direction === KeyboardCode.Left && newScrollCoordinates >= minScroll.x;
|
|
28452
|
-
|
|
28453
|
-
if (canScrollToNewCoordinates && !coordinatesDelta.y) {
|
|
28454
|
-
// We don't need to update coordinates, the scroll adjustment alone will trigger
|
|
28455
|
-
// logic to auto-detect the new container we are over
|
|
28456
|
-
scrollContainer.scrollTo({
|
|
28457
|
-
left: newScrollCoordinates,
|
|
28458
|
-
behavior: scrollBehavior
|
|
28459
|
-
});
|
|
28460
|
-
return;
|
|
28461
|
-
}
|
|
28462
|
-
|
|
28463
|
-
if (canScrollToNewCoordinates) {
|
|
28464
|
-
scrollDelta.x = scrollContainer.scrollLeft - newScrollCoordinates;
|
|
28465
|
-
} else {
|
|
28466
|
-
scrollDelta.x = direction === KeyboardCode.Right ? scrollContainer.scrollLeft - maxScroll.x : scrollContainer.scrollLeft - minScroll.x;
|
|
28467
|
-
}
|
|
28468
|
-
|
|
28469
|
-
if (scrollDelta.x) {
|
|
28470
|
-
scrollContainer.scrollBy({
|
|
28471
|
-
left: -scrollDelta.x,
|
|
28472
|
-
behavior: scrollBehavior
|
|
28473
|
-
});
|
|
28474
|
-
}
|
|
28475
|
-
|
|
28476
|
-
break;
|
|
28477
|
-
} else if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {
|
|
28478
|
-
const newScrollCoordinates = scrollContainer.scrollTop + coordinatesDelta.y;
|
|
28479
|
-
const canScrollToNewCoordinates = direction === KeyboardCode.Down && newScrollCoordinates <= maxScroll.y || direction === KeyboardCode.Up && newScrollCoordinates >= minScroll.y;
|
|
28480
|
-
|
|
28481
|
-
if (canScrollToNewCoordinates && !coordinatesDelta.x) {
|
|
28482
|
-
// We don't need to update coordinates, the scroll adjustment alone will trigger
|
|
28483
|
-
// logic to auto-detect the new container we are over
|
|
28484
|
-
scrollContainer.scrollTo({
|
|
28485
|
-
top: newScrollCoordinates,
|
|
28486
|
-
behavior: scrollBehavior
|
|
28487
|
-
});
|
|
28488
|
-
return;
|
|
28489
|
-
}
|
|
28490
|
-
|
|
28491
|
-
if (canScrollToNewCoordinates) {
|
|
28492
|
-
scrollDelta.y = scrollContainer.scrollTop - newScrollCoordinates;
|
|
28493
|
-
} else {
|
|
28494
|
-
scrollDelta.y = direction === KeyboardCode.Down ? scrollContainer.scrollTop - maxScroll.y : scrollContainer.scrollTop - minScroll.y;
|
|
28495
|
-
}
|
|
28496
|
-
|
|
28497
|
-
if (scrollDelta.y) {
|
|
28498
|
-
scrollContainer.scrollBy({
|
|
28499
|
-
top: -scrollDelta.y,
|
|
28500
|
-
behavior: scrollBehavior
|
|
28501
|
-
});
|
|
28502
|
-
}
|
|
28503
|
-
|
|
28504
|
-
break;
|
|
28505
|
-
}
|
|
28506
|
-
}
|
|
28507
|
-
|
|
28508
|
-
this.handleMove(event, utilities.add(utilities.subtract(newCoordinates, this.referenceCoordinates), scrollDelta));
|
|
28509
|
-
}
|
|
28510
|
-
}
|
|
28511
|
-
}
|
|
28512
|
-
|
|
28513
|
-
handleMove(event, coordinates) {
|
|
28514
|
-
const {
|
|
28515
|
-
onMove
|
|
28516
|
-
} = this.props;
|
|
28517
|
-
event.preventDefault();
|
|
28518
|
-
onMove(coordinates);
|
|
28519
|
-
}
|
|
28520
|
-
|
|
28521
|
-
handleEnd(event) {
|
|
28522
|
-
const {
|
|
28523
|
-
onEnd
|
|
28524
|
-
} = this.props;
|
|
28525
|
-
event.preventDefault();
|
|
28526
|
-
this.detach();
|
|
28527
|
-
onEnd();
|
|
28528
|
-
}
|
|
28529
|
-
|
|
28530
|
-
handleCancel(event) {
|
|
28531
|
-
const {
|
|
28532
|
-
onCancel
|
|
28533
|
-
} = this.props;
|
|
28534
|
-
event.preventDefault();
|
|
28535
|
-
this.detach();
|
|
28536
|
-
onCancel();
|
|
28537
|
-
}
|
|
28538
|
-
|
|
28539
|
-
detach() {
|
|
28540
|
-
this.listeners.removeAll();
|
|
28541
|
-
this.windowListeners.removeAll();
|
|
28542
|
-
}
|
|
28543
|
-
|
|
28544
|
-
}
|
|
28545
|
-
KeyboardSensor.activators = [{
|
|
28546
|
-
eventName: 'onKeyDown',
|
|
28547
|
-
handler: (event, _ref, _ref2) => {
|
|
28548
|
-
let {
|
|
28549
|
-
keyboardCodes = defaultKeyboardCodes,
|
|
28550
|
-
onActivation
|
|
28551
|
-
} = _ref;
|
|
28552
|
-
let {
|
|
28553
|
-
active
|
|
28554
|
-
} = _ref2;
|
|
28555
|
-
const {
|
|
28556
|
-
code
|
|
28557
|
-
} = event.nativeEvent;
|
|
28558
|
-
|
|
28559
|
-
if (keyboardCodes.start.includes(code)) {
|
|
28560
|
-
const activator = active.activatorNode.current;
|
|
28561
|
-
|
|
28562
|
-
if (activator && event.target !== activator) {
|
|
28563
|
-
return false;
|
|
28564
|
-
}
|
|
28565
|
-
|
|
28566
|
-
event.preventDefault();
|
|
28567
|
-
onActivation == null ? void 0 : onActivation({
|
|
28568
|
-
event: event.nativeEvent
|
|
28569
|
-
});
|
|
28570
|
-
return true;
|
|
28571
|
-
}
|
|
28572
|
-
|
|
28573
|
-
return false;
|
|
28574
|
-
}
|
|
28575
|
-
}];
|
|
28576
|
-
|
|
28577
|
-
function isDistanceConstraint(constraint) {
|
|
28578
|
-
return Boolean(constraint && 'distance' in constraint);
|
|
28579
|
-
}
|
|
28580
|
-
|
|
28581
|
-
function isDelayConstraint(constraint) {
|
|
28582
|
-
return Boolean(constraint && 'delay' in constraint);
|
|
28583
|
-
}
|
|
28584
|
-
|
|
28585
|
-
class AbstractPointerSensor {
|
|
28586
|
-
constructor(props, events, listenerTarget) {
|
|
28587
|
-
var _getEventCoordinates;
|
|
28588
|
-
|
|
28589
|
-
if (listenerTarget === void 0) {
|
|
28590
|
-
listenerTarget = getEventListenerTarget(props.event.target);
|
|
28591
|
-
}
|
|
28592
|
-
|
|
28593
|
-
this.props = void 0;
|
|
28594
|
-
this.events = void 0;
|
|
28595
|
-
this.autoScrollEnabled = true;
|
|
28596
|
-
this.document = void 0;
|
|
28597
|
-
this.activated = false;
|
|
28598
|
-
this.initialCoordinates = void 0;
|
|
28599
|
-
this.timeoutId = null;
|
|
28600
|
-
this.listeners = void 0;
|
|
28601
|
-
this.documentListeners = void 0;
|
|
28602
|
-
this.windowListeners = void 0;
|
|
28603
|
-
this.props = props;
|
|
28604
|
-
this.events = events;
|
|
28605
|
-
const {
|
|
28606
|
-
event
|
|
28607
|
-
} = props;
|
|
28608
|
-
const {
|
|
28609
|
-
target
|
|
28610
|
-
} = event;
|
|
28611
|
-
this.props = props;
|
|
28612
|
-
this.events = events;
|
|
28613
|
-
this.document = utilities.getOwnerDocument(target);
|
|
28614
|
-
this.documentListeners = new Listeners(this.document);
|
|
28615
|
-
this.listeners = new Listeners(listenerTarget);
|
|
28616
|
-
this.windowListeners = new Listeners(utilities.getWindow(target));
|
|
28617
|
-
this.initialCoordinates = (_getEventCoordinates = utilities.getEventCoordinates(event)) != null ? _getEventCoordinates : defaultCoordinates;
|
|
28618
|
-
this.handleStart = this.handleStart.bind(this);
|
|
28619
|
-
this.handleMove = this.handleMove.bind(this);
|
|
28620
|
-
this.handleEnd = this.handleEnd.bind(this);
|
|
28621
|
-
this.handleCancel = this.handleCancel.bind(this);
|
|
28622
|
-
this.handleKeydown = this.handleKeydown.bind(this);
|
|
28623
|
-
this.removeTextSelection = this.removeTextSelection.bind(this);
|
|
28624
|
-
this.attach();
|
|
28625
|
-
}
|
|
28626
|
-
|
|
28627
|
-
attach() {
|
|
28628
|
-
const {
|
|
28629
|
-
events,
|
|
28630
|
-
props: {
|
|
28631
|
-
options: {
|
|
28632
|
-
activationConstraint,
|
|
28633
|
-
bypassActivationConstraint
|
|
28634
|
-
}
|
|
28635
|
-
}
|
|
28636
|
-
} = this;
|
|
28637
|
-
this.listeners.add(events.move.name, this.handleMove, {
|
|
28638
|
-
passive: false
|
|
28639
|
-
});
|
|
28640
|
-
this.listeners.add(events.end.name, this.handleEnd);
|
|
28641
|
-
|
|
28642
|
-
if (events.cancel) {
|
|
28643
|
-
this.listeners.add(events.cancel.name, this.handleCancel);
|
|
28644
|
-
}
|
|
28645
|
-
|
|
28646
|
-
this.windowListeners.add(EventName.Resize, this.handleCancel);
|
|
28647
|
-
this.windowListeners.add(EventName.DragStart, preventDefault);
|
|
28648
|
-
this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
|
|
28649
|
-
this.windowListeners.add(EventName.ContextMenu, preventDefault);
|
|
28650
|
-
this.documentListeners.add(EventName.Keydown, this.handleKeydown);
|
|
28651
|
-
|
|
28652
|
-
if (activationConstraint) {
|
|
28653
|
-
if (bypassActivationConstraint != null && bypassActivationConstraint({
|
|
28654
|
-
event: this.props.event,
|
|
28655
|
-
activeNode: this.props.activeNode,
|
|
28656
|
-
options: this.props.options
|
|
28657
|
-
})) {
|
|
28658
|
-
return this.handleStart();
|
|
28659
|
-
}
|
|
28660
|
-
|
|
28661
|
-
if (isDelayConstraint(activationConstraint)) {
|
|
28662
|
-
this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
|
|
28663
|
-
this.handlePending(activationConstraint);
|
|
28664
|
-
return;
|
|
28665
|
-
}
|
|
28666
|
-
|
|
28667
|
-
if (isDistanceConstraint(activationConstraint)) {
|
|
28668
|
-
this.handlePending(activationConstraint);
|
|
28669
|
-
return;
|
|
28670
|
-
}
|
|
28671
|
-
}
|
|
28672
|
-
|
|
28673
|
-
this.handleStart();
|
|
28674
|
-
}
|
|
28675
|
-
|
|
28676
|
-
detach() {
|
|
28677
|
-
this.listeners.removeAll();
|
|
28678
|
-
this.windowListeners.removeAll(); // Wait until the next event loop before removing document listeners
|
|
28679
|
-
// This is necessary because we listen for `click` and `selection` events on the document
|
|
28680
|
-
|
|
28681
|
-
setTimeout(this.documentListeners.removeAll, 50);
|
|
28682
|
-
|
|
28683
|
-
if (this.timeoutId !== null) {
|
|
28684
|
-
clearTimeout(this.timeoutId);
|
|
28685
|
-
this.timeoutId = null;
|
|
28686
|
-
}
|
|
28687
|
-
}
|
|
28688
|
-
|
|
28689
|
-
handlePending(constraint, offset) {
|
|
28690
|
-
const {
|
|
28691
|
-
active,
|
|
28692
|
-
onPending
|
|
28693
|
-
} = this.props;
|
|
28694
|
-
onPending(active, constraint, this.initialCoordinates, offset);
|
|
28695
|
-
}
|
|
28696
|
-
|
|
28697
|
-
handleStart() {
|
|
28698
|
-
const {
|
|
28699
|
-
initialCoordinates
|
|
28700
|
-
} = this;
|
|
28701
|
-
const {
|
|
28702
|
-
onStart
|
|
28703
|
-
} = this.props;
|
|
28704
|
-
|
|
28705
|
-
if (initialCoordinates) {
|
|
28706
|
-
this.activated = true; // Stop propagation of click events once activation constraints are met
|
|
28707
|
-
|
|
28708
|
-
this.documentListeners.add(EventName.Click, stopPropagation, {
|
|
28709
|
-
capture: true
|
|
28710
|
-
}); // Remove any text selection from the document
|
|
28711
|
-
|
|
28712
|
-
this.removeTextSelection(); // Prevent further text selection while dragging
|
|
28713
|
-
|
|
28714
|
-
this.documentListeners.add(EventName.SelectionChange, this.removeTextSelection);
|
|
28715
|
-
onStart(initialCoordinates);
|
|
28716
|
-
}
|
|
28717
|
-
}
|
|
28718
|
-
|
|
28719
|
-
handleMove(event) {
|
|
28720
|
-
var _getEventCoordinates2;
|
|
28721
|
-
|
|
28722
|
-
const {
|
|
28723
|
-
activated,
|
|
28724
|
-
initialCoordinates,
|
|
28725
|
-
props
|
|
28726
|
-
} = this;
|
|
28727
|
-
const {
|
|
28728
|
-
onMove,
|
|
28729
|
-
options: {
|
|
28730
|
-
activationConstraint
|
|
28731
|
-
}
|
|
28732
|
-
} = props;
|
|
28733
|
-
|
|
28734
|
-
if (!initialCoordinates) {
|
|
28735
|
-
return;
|
|
28736
|
-
}
|
|
28737
|
-
|
|
28738
|
-
const coordinates = (_getEventCoordinates2 = utilities.getEventCoordinates(event)) != null ? _getEventCoordinates2 : defaultCoordinates;
|
|
28739
|
-
const delta = utilities.subtract(initialCoordinates, coordinates); // Constraint validation
|
|
28740
|
-
|
|
28741
|
-
if (!activated && activationConstraint) {
|
|
28742
|
-
if (isDistanceConstraint(activationConstraint)) {
|
|
28743
|
-
if (activationConstraint.tolerance != null && hasExceededDistance(delta, activationConstraint.tolerance)) {
|
|
28744
|
-
return this.handleCancel();
|
|
28745
|
-
}
|
|
28746
|
-
|
|
28747
|
-
if (hasExceededDistance(delta, activationConstraint.distance)) {
|
|
28748
|
-
return this.handleStart();
|
|
28749
|
-
}
|
|
28750
|
-
}
|
|
28751
|
-
|
|
28752
|
-
if (isDelayConstraint(activationConstraint)) {
|
|
28753
|
-
if (hasExceededDistance(delta, activationConstraint.tolerance)) {
|
|
28754
|
-
return this.handleCancel();
|
|
28755
|
-
}
|
|
28756
|
-
}
|
|
28757
|
-
|
|
28758
|
-
this.handlePending(activationConstraint, delta);
|
|
28759
|
-
return;
|
|
28760
|
-
}
|
|
28761
|
-
|
|
28762
|
-
if (event.cancelable) {
|
|
28763
|
-
event.preventDefault();
|
|
28764
|
-
}
|
|
28765
|
-
|
|
28766
|
-
onMove(coordinates);
|
|
28767
|
-
}
|
|
28768
|
-
|
|
28769
|
-
handleEnd() {
|
|
28770
|
-
const {
|
|
28771
|
-
onAbort,
|
|
28772
|
-
onEnd
|
|
28773
|
-
} = this.props;
|
|
28774
|
-
this.detach();
|
|
28775
|
-
|
|
28776
|
-
if (!this.activated) {
|
|
28777
|
-
onAbort(this.props.active);
|
|
28778
|
-
}
|
|
28779
|
-
|
|
28780
|
-
onEnd();
|
|
28781
|
-
}
|
|
28782
|
-
|
|
28783
|
-
handleCancel() {
|
|
28784
|
-
const {
|
|
28785
|
-
onAbort,
|
|
28786
|
-
onCancel
|
|
28787
|
-
} = this.props;
|
|
28788
|
-
this.detach();
|
|
28789
|
-
|
|
28790
|
-
if (!this.activated) {
|
|
28791
|
-
onAbort(this.props.active);
|
|
28792
|
-
}
|
|
28793
|
-
|
|
28794
|
-
onCancel();
|
|
28795
|
-
}
|
|
28796
|
-
|
|
28797
|
-
handleKeydown(event) {
|
|
28798
|
-
if (event.code === KeyboardCode.Esc) {
|
|
28799
|
-
this.handleCancel();
|
|
28800
|
-
}
|
|
28801
|
-
}
|
|
28802
|
-
|
|
28803
|
-
removeTextSelection() {
|
|
28804
|
-
var _this$document$getSel;
|
|
28805
|
-
|
|
28806
|
-
(_this$document$getSel = this.document.getSelection()) == null ? void 0 : _this$document$getSel.removeAllRanges();
|
|
28807
|
-
}
|
|
28808
|
-
|
|
28809
|
-
}
|
|
28810
|
-
|
|
28811
|
-
const events = {
|
|
28812
|
-
cancel: {
|
|
28813
|
-
name: 'pointercancel'
|
|
28814
|
-
},
|
|
28815
|
-
move: {
|
|
28816
|
-
name: 'pointermove'
|
|
28817
|
-
},
|
|
28818
|
-
end: {
|
|
28819
|
-
name: 'pointerup'
|
|
28820
|
-
}
|
|
28821
|
-
};
|
|
28822
|
-
class PointerSensor extends AbstractPointerSensor {
|
|
28823
|
-
constructor(props) {
|
|
28824
|
-
const {
|
|
28825
|
-
event
|
|
28826
|
-
} = props; // Pointer events stop firing if the target is unmounted while dragging
|
|
28827
|
-
// Therefore we attach listeners to the owner document instead
|
|
28828
|
-
|
|
28829
|
-
const listenerTarget = utilities.getOwnerDocument(event.target);
|
|
28830
|
-
super(props, events, listenerTarget);
|
|
28831
|
-
}
|
|
28832
|
-
|
|
28833
|
-
}
|
|
28834
|
-
PointerSensor.activators = [{
|
|
28835
|
-
eventName: 'onPointerDown',
|
|
28836
|
-
handler: (_ref, _ref2) => {
|
|
28837
|
-
let {
|
|
28838
|
-
nativeEvent: event
|
|
28839
|
-
} = _ref;
|
|
28840
|
-
let {
|
|
28841
|
-
onActivation
|
|
28842
|
-
} = _ref2;
|
|
28843
|
-
|
|
28844
|
-
if (!event.isPrimary || event.button !== 0) {
|
|
28845
|
-
return false;
|
|
28846
|
-
}
|
|
28847
|
-
|
|
28848
|
-
onActivation == null ? void 0 : onActivation({
|
|
28849
|
-
event
|
|
28850
|
-
});
|
|
28851
|
-
return true;
|
|
28852
|
-
}
|
|
28853
|
-
}];
|
|
28854
|
-
|
|
28855
|
-
const events$1 = {
|
|
28856
|
-
move: {
|
|
28857
|
-
name: 'mousemove'
|
|
28858
|
-
},
|
|
28859
|
-
end: {
|
|
28860
|
-
name: 'mouseup'
|
|
28861
|
-
}
|
|
28862
|
-
};
|
|
28863
|
-
var MouseButton;
|
|
28864
|
-
|
|
28865
|
-
(function (MouseButton) {
|
|
28866
|
-
MouseButton[MouseButton["RightClick"] = 2] = "RightClick";
|
|
28867
|
-
})(MouseButton || (MouseButton = {}));
|
|
28868
|
-
|
|
28869
|
-
class MouseSensor extends AbstractPointerSensor {
|
|
28870
|
-
constructor(props) {
|
|
28871
|
-
super(props, events$1, utilities.getOwnerDocument(props.event.target));
|
|
28872
|
-
}
|
|
28873
|
-
|
|
28874
|
-
}
|
|
28875
|
-
MouseSensor.activators = [{
|
|
28876
|
-
eventName: 'onMouseDown',
|
|
28877
|
-
handler: (_ref, _ref2) => {
|
|
28878
|
-
let {
|
|
28879
|
-
nativeEvent: event
|
|
28880
|
-
} = _ref;
|
|
28881
|
-
let {
|
|
28882
|
-
onActivation
|
|
28883
|
-
} = _ref2;
|
|
28884
|
-
|
|
28885
|
-
if (event.button === MouseButton.RightClick) {
|
|
28886
|
-
return false;
|
|
28887
|
-
}
|
|
28888
|
-
|
|
28889
|
-
onActivation == null ? void 0 : onActivation({
|
|
28890
|
-
event
|
|
28891
|
-
});
|
|
28892
|
-
return true;
|
|
28893
|
-
}
|
|
28894
|
-
}];
|
|
28895
|
-
|
|
28896
|
-
const events$2 = {
|
|
28897
|
-
cancel: {
|
|
28898
|
-
name: 'touchcancel'
|
|
28899
|
-
},
|
|
28900
|
-
move: {
|
|
28901
|
-
name: 'touchmove'
|
|
28902
|
-
},
|
|
28903
|
-
end: {
|
|
28904
|
-
name: 'touchend'
|
|
28905
|
-
}
|
|
28906
|
-
};
|
|
28907
|
-
class TouchSensor extends AbstractPointerSensor {
|
|
28908
|
-
constructor(props) {
|
|
28909
|
-
super(props, events$2);
|
|
28910
|
-
}
|
|
28911
|
-
|
|
28912
|
-
static setup() {
|
|
28913
|
-
// Adding a non-capture and non-passive `touchmove` listener in order
|
|
28914
|
-
// to force `event.preventDefault()` calls to work in dynamically added
|
|
28915
|
-
// touchmove event handlers. This is required for iOS Safari.
|
|
28916
|
-
window.addEventListener(events$2.move.name, noop, {
|
|
28917
|
-
capture: false,
|
|
28918
|
-
passive: false
|
|
28919
|
-
});
|
|
28920
|
-
return function teardown() {
|
|
28921
|
-
window.removeEventListener(events$2.move.name, noop);
|
|
28922
|
-
}; // We create a new handler because the teardown function of another sensor
|
|
28923
|
-
// could remove our event listener if we use a referentially equal listener.
|
|
28924
|
-
|
|
28925
|
-
function noop() {}
|
|
28926
|
-
}
|
|
28927
|
-
|
|
28928
|
-
}
|
|
28929
|
-
TouchSensor.activators = [{
|
|
28930
|
-
eventName: 'onTouchStart',
|
|
28931
|
-
handler: (_ref, _ref2) => {
|
|
28932
|
-
let {
|
|
28933
|
-
nativeEvent: event
|
|
28934
|
-
} = _ref;
|
|
28935
|
-
let {
|
|
28936
|
-
onActivation
|
|
28937
|
-
} = _ref2;
|
|
28938
|
-
const {
|
|
28939
|
-
touches
|
|
28940
|
-
} = event;
|
|
28941
|
-
|
|
28942
|
-
if (touches.length > 1) {
|
|
28943
|
-
return false;
|
|
28944
|
-
}
|
|
28945
|
-
|
|
28946
|
-
onActivation == null ? void 0 : onActivation({
|
|
28947
|
-
event
|
|
28948
|
-
});
|
|
28949
|
-
return true;
|
|
28950
|
-
}
|
|
28951
|
-
}];
|
|
28952
|
-
|
|
28953
|
-
var AutoScrollActivator;
|
|
28954
|
-
|
|
28955
|
-
(function (AutoScrollActivator) {
|
|
28956
|
-
AutoScrollActivator[AutoScrollActivator["Pointer"] = 0] = "Pointer";
|
|
28957
|
-
AutoScrollActivator[AutoScrollActivator["DraggableRect"] = 1] = "DraggableRect";
|
|
28958
|
-
})(AutoScrollActivator || (AutoScrollActivator = {}));
|
|
28959
|
-
|
|
28960
|
-
var TraversalOrder;
|
|
28961
|
-
|
|
28962
|
-
(function (TraversalOrder) {
|
|
28963
|
-
TraversalOrder[TraversalOrder["TreeOrder"] = 0] = "TreeOrder";
|
|
28964
|
-
TraversalOrder[TraversalOrder["ReversedTreeOrder"] = 1] = "ReversedTreeOrder";
|
|
28965
|
-
})(TraversalOrder || (TraversalOrder = {}));
|
|
28966
|
-
|
|
28967
|
-
function useAutoScroller(_ref) {
|
|
28968
|
-
let {
|
|
28969
|
-
acceleration,
|
|
28970
|
-
activator = AutoScrollActivator.Pointer,
|
|
28971
|
-
canScroll,
|
|
28972
|
-
draggingRect,
|
|
28973
|
-
enabled,
|
|
28974
|
-
interval = 5,
|
|
28975
|
-
order = TraversalOrder.TreeOrder,
|
|
28976
|
-
pointerCoordinates,
|
|
28977
|
-
scrollableAncestors,
|
|
28978
|
-
scrollableAncestorRects,
|
|
28979
|
-
delta,
|
|
28980
|
-
threshold
|
|
28981
|
-
} = _ref;
|
|
28982
|
-
const scrollIntent = useScrollIntent({
|
|
28983
|
-
delta,
|
|
28984
|
-
disabled: !enabled
|
|
28985
|
-
});
|
|
28986
|
-
const [setAutoScrollInterval, clearAutoScrollInterval] = utilities.useInterval();
|
|
28987
|
-
const scrollSpeed = React.useRef({
|
|
28988
|
-
x: 0,
|
|
28989
|
-
y: 0
|
|
28990
|
-
});
|
|
28991
|
-
const scrollDirection = React.useRef({
|
|
28992
|
-
x: 0,
|
|
28993
|
-
y: 0
|
|
28994
|
-
});
|
|
28995
|
-
const rect = React.useMemo(() => {
|
|
28996
|
-
switch (activator) {
|
|
28997
|
-
case AutoScrollActivator.Pointer:
|
|
28998
|
-
return pointerCoordinates ? {
|
|
28999
|
-
top: pointerCoordinates.y,
|
|
29000
|
-
bottom: pointerCoordinates.y,
|
|
29001
|
-
left: pointerCoordinates.x,
|
|
29002
|
-
right: pointerCoordinates.x
|
|
29003
|
-
} : null;
|
|
29004
|
-
|
|
29005
|
-
case AutoScrollActivator.DraggableRect:
|
|
29006
|
-
return draggingRect;
|
|
29007
|
-
}
|
|
29008
|
-
}, [activator, draggingRect, pointerCoordinates]);
|
|
29009
|
-
const scrollContainerRef = React.useRef(null);
|
|
29010
|
-
const autoScroll = React.useCallback(() => {
|
|
29011
|
-
const scrollContainer = scrollContainerRef.current;
|
|
29012
|
-
|
|
29013
|
-
if (!scrollContainer) {
|
|
29014
|
-
return;
|
|
29015
|
-
}
|
|
29016
|
-
|
|
29017
|
-
const scrollLeft = scrollSpeed.current.x * scrollDirection.current.x;
|
|
29018
|
-
const scrollTop = scrollSpeed.current.y * scrollDirection.current.y;
|
|
29019
|
-
scrollContainer.scrollBy(scrollLeft, scrollTop);
|
|
29020
|
-
}, []);
|
|
29021
|
-
const sortedScrollableAncestors = React.useMemo(() => order === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order, scrollableAncestors]);
|
|
29022
|
-
React.useEffect(() => {
|
|
29023
|
-
if (!enabled || !scrollableAncestors.length || !rect) {
|
|
29024
|
-
clearAutoScrollInterval();
|
|
29025
|
-
return;
|
|
29026
|
-
}
|
|
29027
|
-
|
|
29028
|
-
for (const scrollContainer of sortedScrollableAncestors) {
|
|
29029
|
-
if ((canScroll == null ? void 0 : canScroll(scrollContainer)) === false) {
|
|
29030
|
-
continue;
|
|
29031
|
-
}
|
|
29032
|
-
|
|
29033
|
-
const index = scrollableAncestors.indexOf(scrollContainer);
|
|
29034
|
-
const scrollContainerRect = scrollableAncestorRects[index];
|
|
29035
|
-
|
|
29036
|
-
if (!scrollContainerRect) {
|
|
29037
|
-
continue;
|
|
29038
|
-
}
|
|
29039
|
-
|
|
29040
|
-
const {
|
|
29041
|
-
direction,
|
|
29042
|
-
speed
|
|
29043
|
-
} = getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, rect, acceleration, threshold);
|
|
29044
|
-
|
|
29045
|
-
for (const axis of ['x', 'y']) {
|
|
29046
|
-
if (!scrollIntent[axis][direction[axis]]) {
|
|
29047
|
-
speed[axis] = 0;
|
|
29048
|
-
direction[axis] = 0;
|
|
29049
|
-
}
|
|
29050
|
-
}
|
|
29051
|
-
|
|
29052
|
-
if (speed.x > 0 || speed.y > 0) {
|
|
29053
|
-
clearAutoScrollInterval();
|
|
29054
|
-
scrollContainerRef.current = scrollContainer;
|
|
29055
|
-
setAutoScrollInterval(autoScroll, interval);
|
|
29056
|
-
scrollSpeed.current = speed;
|
|
29057
|
-
scrollDirection.current = direction;
|
|
29058
|
-
return;
|
|
29059
|
-
}
|
|
29060
|
-
}
|
|
29061
|
-
|
|
29062
|
-
scrollSpeed.current = {
|
|
29063
|
-
x: 0,
|
|
29064
|
-
y: 0
|
|
29065
|
-
};
|
|
29066
|
-
scrollDirection.current = {
|
|
29067
|
-
x: 0,
|
|
29068
|
-
y: 0
|
|
29069
|
-
};
|
|
29070
|
-
clearAutoScrollInterval();
|
|
29071
|
-
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29072
|
-
[acceleration, autoScroll, canScroll, clearAutoScrollInterval, enabled, interval, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29073
|
-
JSON.stringify(rect), // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29074
|
-
JSON.stringify(scrollIntent), setAutoScrollInterval, scrollableAncestors, sortedScrollableAncestors, scrollableAncestorRects, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29075
|
-
JSON.stringify(threshold)]);
|
|
29076
|
-
}
|
|
29077
|
-
const defaultScrollIntent = {
|
|
29078
|
-
x: {
|
|
29079
|
-
[Direction.Backward]: false,
|
|
29080
|
-
[Direction.Forward]: false
|
|
29081
|
-
},
|
|
29082
|
-
y: {
|
|
29083
|
-
[Direction.Backward]: false,
|
|
29084
|
-
[Direction.Forward]: false
|
|
29085
|
-
}
|
|
29086
|
-
};
|
|
29087
|
-
|
|
29088
|
-
function useScrollIntent(_ref2) {
|
|
29089
|
-
let {
|
|
29090
|
-
delta,
|
|
29091
|
-
disabled
|
|
29092
|
-
} = _ref2;
|
|
29093
|
-
const previousDelta = utilities.usePrevious(delta);
|
|
29094
|
-
return utilities.useLazyMemo(previousIntent => {
|
|
29095
|
-
if (disabled || !previousDelta || !previousIntent) {
|
|
29096
|
-
// Reset scroll intent tracking when auto-scrolling is disabled
|
|
29097
|
-
return defaultScrollIntent;
|
|
29098
|
-
}
|
|
29099
|
-
|
|
29100
|
-
const direction = {
|
|
29101
|
-
x: Math.sign(delta.x - previousDelta.x),
|
|
29102
|
-
y: Math.sign(delta.y - previousDelta.y)
|
|
29103
|
-
}; // Keep track of the user intent to scroll in each direction for both axis
|
|
29104
|
-
|
|
29105
|
-
return {
|
|
29106
|
-
x: {
|
|
29107
|
-
[Direction.Backward]: previousIntent.x[Direction.Backward] || direction.x === -1,
|
|
29108
|
-
[Direction.Forward]: previousIntent.x[Direction.Forward] || direction.x === 1
|
|
29109
|
-
},
|
|
29110
|
-
y: {
|
|
29111
|
-
[Direction.Backward]: previousIntent.y[Direction.Backward] || direction.y === -1,
|
|
29112
|
-
[Direction.Forward]: previousIntent.y[Direction.Forward] || direction.y === 1
|
|
29113
|
-
}
|
|
29114
|
-
};
|
|
29115
|
-
}, [disabled, delta, previousDelta]);
|
|
29116
|
-
}
|
|
29117
|
-
|
|
29118
|
-
function useCachedNode(draggableNodes, id) {
|
|
29119
|
-
const draggableNode = id != null ? draggableNodes.get(id) : undefined;
|
|
29120
|
-
const node = draggableNode ? draggableNode.node.current : null;
|
|
29121
|
-
return utilities.useLazyMemo(cachedNode => {
|
|
29122
|
-
var _ref;
|
|
29123
|
-
|
|
29124
|
-
if (id == null) {
|
|
29125
|
-
return null;
|
|
29126
|
-
} // In some cases, the draggable node can unmount while dragging
|
|
29127
|
-
// This is the case for virtualized lists. In those situations,
|
|
29128
|
-
// we fall back to the last known value for that node.
|
|
29129
|
-
|
|
29130
|
-
|
|
29131
|
-
return (_ref = node != null ? node : cachedNode) != null ? _ref : null;
|
|
29132
|
-
}, [node, id]);
|
|
29133
|
-
}
|
|
29134
|
-
|
|
29135
|
-
function useCombineActivators(sensors, getSyntheticHandler) {
|
|
29136
|
-
return React.useMemo(() => sensors.reduce((accumulator, sensor) => {
|
|
29137
|
-
const {
|
|
29138
|
-
sensor: Sensor
|
|
29139
|
-
} = sensor;
|
|
29140
|
-
const sensorActivators = Sensor.activators.map(activator => ({
|
|
29141
|
-
eventName: activator.eventName,
|
|
29142
|
-
handler: getSyntheticHandler(activator.handler, sensor)
|
|
29143
|
-
}));
|
|
29144
|
-
return [...accumulator, ...sensorActivators];
|
|
29145
|
-
}, []), [sensors, getSyntheticHandler]);
|
|
29146
|
-
}
|
|
29147
|
-
|
|
29148
|
-
var MeasuringStrategy;
|
|
29149
|
-
|
|
29150
|
-
(function (MeasuringStrategy) {
|
|
29151
|
-
MeasuringStrategy[MeasuringStrategy["Always"] = 0] = "Always";
|
|
29152
|
-
MeasuringStrategy[MeasuringStrategy["BeforeDragging"] = 1] = "BeforeDragging";
|
|
29153
|
-
MeasuringStrategy[MeasuringStrategy["WhileDragging"] = 2] = "WhileDragging";
|
|
29154
|
-
})(MeasuringStrategy || (MeasuringStrategy = {}));
|
|
29155
|
-
|
|
29156
|
-
var MeasuringFrequency;
|
|
29157
|
-
|
|
29158
|
-
(function (MeasuringFrequency) {
|
|
29159
|
-
MeasuringFrequency["Optimized"] = "optimized";
|
|
29160
|
-
})(MeasuringFrequency || (MeasuringFrequency = {}));
|
|
29161
|
-
|
|
29162
|
-
const defaultValue = /*#__PURE__*/new Map();
|
|
29163
|
-
function useDroppableMeasuring(containers, _ref) {
|
|
29164
|
-
let {
|
|
29165
|
-
dragging,
|
|
29166
|
-
dependencies,
|
|
29167
|
-
config
|
|
29168
|
-
} = _ref;
|
|
29169
|
-
const [queue, setQueue] = React.useState(null);
|
|
29170
|
-
const {
|
|
29171
|
-
frequency,
|
|
29172
|
-
measure,
|
|
29173
|
-
strategy
|
|
29174
|
-
} = config;
|
|
29175
|
-
const containersRef = React.useRef(containers);
|
|
29176
|
-
const disabled = isDisabled();
|
|
29177
|
-
const disabledRef = utilities.useLatestValue(disabled);
|
|
29178
|
-
const measureDroppableContainers = React.useCallback(function (ids) {
|
|
29179
|
-
if (ids === void 0) {
|
|
29180
|
-
ids = [];
|
|
29181
|
-
}
|
|
29182
|
-
|
|
29183
|
-
if (disabledRef.current) {
|
|
29184
|
-
return;
|
|
29185
|
-
}
|
|
29186
|
-
|
|
29187
|
-
setQueue(value => {
|
|
29188
|
-
if (value === null) {
|
|
29189
|
-
return ids;
|
|
29190
|
-
}
|
|
29191
|
-
|
|
29192
|
-
return value.concat(ids.filter(id => !value.includes(id)));
|
|
29193
|
-
});
|
|
29194
|
-
}, [disabledRef]);
|
|
29195
|
-
const timeoutId = React.useRef(null);
|
|
29196
|
-
const droppableRects = utilities.useLazyMemo(previousValue => {
|
|
29197
|
-
if (disabled && !dragging) {
|
|
29198
|
-
return defaultValue;
|
|
29199
|
-
}
|
|
29200
|
-
|
|
29201
|
-
if (!previousValue || previousValue === defaultValue || containersRef.current !== containers || queue != null) {
|
|
29202
|
-
const map = new Map();
|
|
29203
|
-
|
|
29204
|
-
for (let container of containers) {
|
|
29205
|
-
if (!container) {
|
|
29206
|
-
continue;
|
|
29207
|
-
}
|
|
29208
|
-
|
|
29209
|
-
if (queue && queue.length > 0 && !queue.includes(container.id) && container.rect.current) {
|
|
29210
|
-
// This container does not need to be re-measured
|
|
29211
|
-
map.set(container.id, container.rect.current);
|
|
29212
|
-
continue;
|
|
29213
|
-
}
|
|
29214
|
-
|
|
29215
|
-
const node = container.node.current;
|
|
29216
|
-
const rect = node ? new Rect(measure(node), node) : null;
|
|
29217
|
-
container.rect.current = rect;
|
|
29218
|
-
|
|
29219
|
-
if (rect) {
|
|
29220
|
-
map.set(container.id, rect);
|
|
29221
|
-
}
|
|
29222
|
-
}
|
|
29223
|
-
|
|
29224
|
-
return map;
|
|
29225
|
-
}
|
|
29226
|
-
|
|
29227
|
-
return previousValue;
|
|
29228
|
-
}, [containers, queue, dragging, disabled, measure]);
|
|
29229
|
-
React.useEffect(() => {
|
|
29230
|
-
containersRef.current = containers;
|
|
29231
|
-
}, [containers]);
|
|
29232
|
-
React.useEffect(() => {
|
|
29233
|
-
if (disabled) {
|
|
29234
|
-
return;
|
|
29235
|
-
}
|
|
29236
|
-
|
|
29237
|
-
measureDroppableContainers();
|
|
29238
|
-
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29239
|
-
[dragging, disabled]);
|
|
29240
|
-
React.useEffect(() => {
|
|
29241
|
-
if (queue && queue.length > 0) {
|
|
29242
|
-
setQueue(null);
|
|
29243
|
-
}
|
|
29244
|
-
}, //eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29245
|
-
[JSON.stringify(queue)]);
|
|
29246
|
-
React.useEffect(() => {
|
|
29247
|
-
if (disabled || typeof frequency !== 'number' || timeoutId.current !== null) {
|
|
29248
|
-
return;
|
|
29249
|
-
}
|
|
29250
|
-
|
|
29251
|
-
timeoutId.current = setTimeout(() => {
|
|
29252
|
-
measureDroppableContainers();
|
|
29253
|
-
timeoutId.current = null;
|
|
29254
|
-
}, frequency);
|
|
29255
|
-
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29256
|
-
[frequency, disabled, measureDroppableContainers, ...dependencies]);
|
|
29257
|
-
return {
|
|
29258
|
-
droppableRects,
|
|
29259
|
-
measureDroppableContainers,
|
|
29260
|
-
measuringScheduled: queue != null
|
|
29261
|
-
};
|
|
29262
|
-
|
|
29263
|
-
function isDisabled() {
|
|
29264
|
-
switch (strategy) {
|
|
29265
|
-
case MeasuringStrategy.Always:
|
|
29266
|
-
return false;
|
|
29267
|
-
|
|
29268
|
-
case MeasuringStrategy.BeforeDragging:
|
|
29269
|
-
return dragging;
|
|
29270
|
-
|
|
29271
|
-
default:
|
|
29272
|
-
return !dragging;
|
|
29273
|
-
}
|
|
29274
|
-
}
|
|
29275
|
-
}
|
|
29276
|
-
|
|
29277
|
-
function useInitialValue(value, computeFn) {
|
|
29278
|
-
return utilities.useLazyMemo(previousValue => {
|
|
29279
|
-
if (!value) {
|
|
29280
|
-
return null;
|
|
29281
|
-
}
|
|
29282
|
-
|
|
29283
|
-
if (previousValue) {
|
|
29284
|
-
return previousValue;
|
|
29285
|
-
}
|
|
29286
|
-
|
|
29287
|
-
return typeof computeFn === 'function' ? computeFn(value) : value;
|
|
29288
|
-
}, [computeFn, value]);
|
|
29289
|
-
}
|
|
29290
|
-
|
|
29291
|
-
function useInitialRect(node, measure) {
|
|
29292
|
-
return useInitialValue(node, measure);
|
|
29293
|
-
}
|
|
29294
|
-
|
|
29295
|
-
/**
|
|
29296
|
-
* Returns a new MutationObserver instance.
|
|
29297
|
-
* If `MutationObserver` is undefined in the execution environment, returns `undefined`.
|
|
29298
|
-
*/
|
|
29299
|
-
|
|
29300
|
-
function useMutationObserver(_ref) {
|
|
29301
|
-
let {
|
|
29302
|
-
callback,
|
|
29303
|
-
disabled
|
|
29304
|
-
} = _ref;
|
|
29305
|
-
const handleMutations = utilities.useEvent(callback);
|
|
29306
|
-
const mutationObserver = React.useMemo(() => {
|
|
29307
|
-
if (disabled || typeof window === 'undefined' || typeof window.MutationObserver === 'undefined') {
|
|
29308
|
-
return undefined;
|
|
29309
|
-
}
|
|
29310
|
-
|
|
29311
|
-
const {
|
|
29312
|
-
MutationObserver
|
|
29313
|
-
} = window;
|
|
29314
|
-
return new MutationObserver(handleMutations);
|
|
29315
|
-
}, [handleMutations, disabled]);
|
|
29316
|
-
React.useEffect(() => {
|
|
29317
|
-
return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
|
|
29318
|
-
}, [mutationObserver]);
|
|
29319
|
-
return mutationObserver;
|
|
29320
|
-
}
|
|
29321
|
-
|
|
29322
|
-
/**
|
|
29323
|
-
* Returns a new ResizeObserver instance bound to the `onResize` callback.
|
|
29324
|
-
* If `ResizeObserver` is undefined in the execution environment, returns `undefined`.
|
|
29325
|
-
*/
|
|
29326
|
-
|
|
29327
|
-
function useResizeObserver(_ref) {
|
|
29328
|
-
let {
|
|
29329
|
-
callback,
|
|
29330
|
-
disabled
|
|
29331
|
-
} = _ref;
|
|
29332
|
-
const handleResize = utilities.useEvent(callback);
|
|
29333
|
-
const resizeObserver = React.useMemo(() => {
|
|
29334
|
-
if (disabled || typeof window === 'undefined' || typeof window.ResizeObserver === 'undefined') {
|
|
29335
|
-
return undefined;
|
|
29336
|
-
}
|
|
29337
|
-
|
|
29338
|
-
const {
|
|
29339
|
-
ResizeObserver
|
|
29340
|
-
} = window;
|
|
29341
|
-
return new ResizeObserver(handleResize);
|
|
29342
|
-
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29343
|
-
[disabled]);
|
|
29344
|
-
React.useEffect(() => {
|
|
29345
|
-
return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
29346
|
-
}, [resizeObserver]);
|
|
29347
|
-
return resizeObserver;
|
|
29348
|
-
}
|
|
29349
|
-
|
|
29350
|
-
function defaultMeasure(element) {
|
|
29351
|
-
return new Rect(getClientRect(element), element);
|
|
29352
|
-
}
|
|
29353
|
-
|
|
29354
|
-
function useRect(element, measure, fallbackRect) {
|
|
29355
|
-
if (measure === void 0) {
|
|
29356
|
-
measure = defaultMeasure;
|
|
29357
|
-
}
|
|
29358
|
-
|
|
29359
|
-
const [rect, setRect] = React.useState(null);
|
|
29360
|
-
|
|
29361
|
-
function measureRect() {
|
|
29362
|
-
setRect(currentRect => {
|
|
29363
|
-
if (!element) {
|
|
29364
|
-
return null;
|
|
29365
|
-
}
|
|
29366
|
-
|
|
29367
|
-
if (element.isConnected === false) {
|
|
29368
|
-
var _ref;
|
|
29369
|
-
|
|
29370
|
-
// Fall back to last rect we measured if the element is
|
|
29371
|
-
// no longer connected to the DOM.
|
|
29372
|
-
return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
|
|
29373
|
-
}
|
|
29374
|
-
|
|
29375
|
-
const newRect = measure(element);
|
|
29376
|
-
|
|
29377
|
-
if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
|
|
29378
|
-
return currentRect;
|
|
29379
|
-
}
|
|
29380
|
-
|
|
29381
|
-
return newRect;
|
|
29382
|
-
});
|
|
29383
|
-
}
|
|
29384
|
-
|
|
29385
|
-
const mutationObserver = useMutationObserver({
|
|
29386
|
-
callback(records) {
|
|
29387
|
-
if (!element) {
|
|
29388
|
-
return;
|
|
29389
|
-
}
|
|
29390
|
-
|
|
29391
|
-
for (const record of records) {
|
|
29392
|
-
const {
|
|
29393
|
-
type,
|
|
29394
|
-
target
|
|
29395
|
-
} = record;
|
|
29396
|
-
|
|
29397
|
-
if (type === 'childList' && target instanceof HTMLElement && target.contains(element)) {
|
|
29398
|
-
measureRect();
|
|
29399
|
-
break;
|
|
29400
|
-
}
|
|
29401
|
-
}
|
|
29402
|
-
}
|
|
29403
|
-
|
|
29404
|
-
});
|
|
29405
|
-
const resizeObserver = useResizeObserver({
|
|
29406
|
-
callback: measureRect
|
|
29407
|
-
});
|
|
29408
|
-
utilities.useIsomorphicLayoutEffect(() => {
|
|
29409
|
-
measureRect();
|
|
29410
|
-
|
|
29411
|
-
if (element) {
|
|
29412
|
-
resizeObserver == null ? void 0 : resizeObserver.observe(element);
|
|
29413
|
-
mutationObserver == null ? void 0 : mutationObserver.observe(document.body, {
|
|
29414
|
-
childList: true,
|
|
29415
|
-
subtree: true
|
|
29416
|
-
});
|
|
29417
|
-
} else {
|
|
29418
|
-
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
29419
|
-
mutationObserver == null ? void 0 : mutationObserver.disconnect();
|
|
29420
|
-
}
|
|
29421
|
-
}, [element]);
|
|
29422
|
-
return rect;
|
|
29423
|
-
}
|
|
29424
|
-
|
|
29425
|
-
function useRectDelta(rect) {
|
|
29426
|
-
const initialRect = useInitialValue(rect);
|
|
29427
|
-
return getRectDelta(rect, initialRect);
|
|
29428
|
-
}
|
|
29429
|
-
|
|
29430
|
-
const defaultValue$1 = [];
|
|
29431
|
-
function useScrollableAncestors(node) {
|
|
29432
|
-
const previousNode = React.useRef(node);
|
|
29433
|
-
const ancestors = utilities.useLazyMemo(previousValue => {
|
|
29434
|
-
if (!node) {
|
|
29435
|
-
return defaultValue$1;
|
|
29436
|
-
}
|
|
29437
|
-
|
|
29438
|
-
if (previousValue && previousValue !== defaultValue$1 && node && previousNode.current && node.parentNode === previousNode.current.parentNode) {
|
|
29439
|
-
return previousValue;
|
|
29440
|
-
}
|
|
29441
|
-
|
|
29442
|
-
return getScrollableAncestors(node);
|
|
29443
|
-
}, [node]);
|
|
29444
|
-
React.useEffect(() => {
|
|
29445
|
-
previousNode.current = node;
|
|
29446
|
-
}, [node]);
|
|
29447
|
-
return ancestors;
|
|
29448
|
-
}
|
|
29449
|
-
|
|
29450
|
-
function useScrollOffsets(elements) {
|
|
29451
|
-
const [scrollCoordinates, setScrollCoordinates] = React.useState(null);
|
|
29452
|
-
const prevElements = React.useRef(elements); // To-do: Throttle the handleScroll callback
|
|
29453
|
-
|
|
29454
|
-
const handleScroll = React.useCallback(event => {
|
|
29455
|
-
const scrollingElement = getScrollableElement(event.target);
|
|
29456
|
-
|
|
29457
|
-
if (!scrollingElement) {
|
|
29458
|
-
return;
|
|
29459
|
-
}
|
|
29460
|
-
|
|
29461
|
-
setScrollCoordinates(scrollCoordinates => {
|
|
29462
|
-
if (!scrollCoordinates) {
|
|
29463
|
-
return null;
|
|
29464
|
-
}
|
|
29465
|
-
|
|
29466
|
-
scrollCoordinates.set(scrollingElement, getScrollCoordinates(scrollingElement));
|
|
29467
|
-
return new Map(scrollCoordinates);
|
|
29468
|
-
});
|
|
29469
|
-
}, []);
|
|
29470
|
-
React.useEffect(() => {
|
|
29471
|
-
const previousElements = prevElements.current;
|
|
29472
|
-
|
|
29473
|
-
if (elements !== previousElements) {
|
|
29474
|
-
cleanup(previousElements);
|
|
29475
|
-
const entries = elements.map(element => {
|
|
29476
|
-
const scrollableElement = getScrollableElement(element);
|
|
29477
|
-
|
|
29478
|
-
if (scrollableElement) {
|
|
29479
|
-
scrollableElement.addEventListener('scroll', handleScroll, {
|
|
29480
|
-
passive: true
|
|
29481
|
-
});
|
|
29482
|
-
return [scrollableElement, getScrollCoordinates(scrollableElement)];
|
|
29483
|
-
}
|
|
29484
|
-
|
|
29485
|
-
return null;
|
|
29486
|
-
}).filter(entry => entry != null);
|
|
29487
|
-
setScrollCoordinates(entries.length ? new Map(entries) : null);
|
|
29488
|
-
prevElements.current = elements;
|
|
29489
|
-
}
|
|
29490
|
-
|
|
29491
|
-
return () => {
|
|
29492
|
-
cleanup(elements);
|
|
29493
|
-
cleanup(previousElements);
|
|
29494
|
-
};
|
|
29495
|
-
|
|
29496
|
-
function cleanup(elements) {
|
|
29497
|
-
elements.forEach(element => {
|
|
29498
|
-
const scrollableElement = getScrollableElement(element);
|
|
29499
|
-
scrollableElement == null ? void 0 : scrollableElement.removeEventListener('scroll', handleScroll);
|
|
29500
|
-
});
|
|
29501
|
-
}
|
|
29502
|
-
}, [handleScroll, elements]);
|
|
29503
|
-
return React.useMemo(() => {
|
|
29504
|
-
if (elements.length) {
|
|
29505
|
-
return scrollCoordinates ? Array.from(scrollCoordinates.values()).reduce((acc, coordinates) => utilities.add(acc, coordinates), defaultCoordinates) : getScrollOffsets(elements);
|
|
29506
|
-
}
|
|
29507
|
-
|
|
29508
|
-
return defaultCoordinates;
|
|
29509
|
-
}, [elements, scrollCoordinates]);
|
|
29510
|
-
}
|
|
29511
|
-
|
|
29512
|
-
function useScrollOffsetsDelta(scrollOffsets, dependencies) {
|
|
29513
|
-
if (dependencies === void 0) {
|
|
29514
|
-
dependencies = [];
|
|
29515
|
-
}
|
|
29516
|
-
|
|
29517
|
-
const initialScrollOffsets = React.useRef(null);
|
|
29518
|
-
React.useEffect(() => {
|
|
29519
|
-
initialScrollOffsets.current = null;
|
|
29520
|
-
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29521
|
-
dependencies);
|
|
29522
|
-
React.useEffect(() => {
|
|
29523
|
-
const hasScrollOffsets = scrollOffsets !== defaultCoordinates;
|
|
29524
|
-
|
|
29525
|
-
if (hasScrollOffsets && !initialScrollOffsets.current) {
|
|
29526
|
-
initialScrollOffsets.current = scrollOffsets;
|
|
29527
|
-
}
|
|
29528
|
-
|
|
29529
|
-
if (!hasScrollOffsets && initialScrollOffsets.current) {
|
|
29530
|
-
initialScrollOffsets.current = null;
|
|
29531
|
-
}
|
|
29532
|
-
}, [scrollOffsets]);
|
|
29533
|
-
return initialScrollOffsets.current ? utilities.subtract(scrollOffsets, initialScrollOffsets.current) : defaultCoordinates;
|
|
29534
|
-
}
|
|
29535
|
-
|
|
29536
|
-
function useSensorSetup(sensors) {
|
|
29537
|
-
React.useEffect(() => {
|
|
29538
|
-
if (!utilities.canUseDOM) {
|
|
29539
|
-
return;
|
|
29540
|
-
}
|
|
29541
|
-
|
|
29542
|
-
const teardownFns = sensors.map(_ref => {
|
|
29543
|
-
let {
|
|
29544
|
-
sensor
|
|
29545
|
-
} = _ref;
|
|
29546
|
-
return sensor.setup == null ? void 0 : sensor.setup();
|
|
29547
|
-
});
|
|
29548
|
-
return () => {
|
|
29549
|
-
for (const teardown of teardownFns) {
|
|
29550
|
-
teardown == null ? void 0 : teardown();
|
|
29551
|
-
}
|
|
29552
|
-
};
|
|
29553
|
-
}, // TO-DO: Sensors length could theoretically change which would not be a valid dependency
|
|
29554
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29555
|
-
sensors.map(_ref2 => {
|
|
29556
|
-
let {
|
|
29557
|
-
sensor
|
|
29558
|
-
} = _ref2;
|
|
29559
|
-
return sensor;
|
|
29560
|
-
}));
|
|
29561
|
-
}
|
|
29562
|
-
|
|
29563
|
-
function useWindowRect(element) {
|
|
29564
|
-
return React.useMemo(() => element ? getWindowClientRect(element) : null, [element]);
|
|
29565
|
-
}
|
|
29566
|
-
|
|
29567
|
-
const defaultValue$2 = [];
|
|
29568
|
-
function useRects(elements, measure) {
|
|
29569
|
-
if (measure === void 0) {
|
|
29570
|
-
measure = getClientRect;
|
|
29571
|
-
}
|
|
29572
|
-
|
|
29573
|
-
const [firstElement] = elements;
|
|
29574
|
-
const windowRect = useWindowRect(firstElement ? utilities.getWindow(firstElement) : null);
|
|
29575
|
-
const [rects, setRects] = React.useState(defaultValue$2);
|
|
29576
|
-
|
|
29577
|
-
function measureRects() {
|
|
29578
|
-
setRects(() => {
|
|
29579
|
-
if (!elements.length) {
|
|
29580
|
-
return defaultValue$2;
|
|
29581
|
-
}
|
|
29582
|
-
|
|
29583
|
-
return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
|
|
29584
|
-
});
|
|
29585
|
-
}
|
|
29586
|
-
|
|
29587
|
-
const resizeObserver = useResizeObserver({
|
|
29588
|
-
callback: measureRects
|
|
29589
|
-
});
|
|
29590
|
-
utilities.useIsomorphicLayoutEffect(() => {
|
|
29591
|
-
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
29592
|
-
measureRects();
|
|
29593
|
-
elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
|
|
29594
|
-
}, [elements]);
|
|
29595
|
-
return rects;
|
|
29596
|
-
}
|
|
29597
|
-
|
|
29598
|
-
function getMeasurableNode(node) {
|
|
29599
|
-
if (!node) {
|
|
29600
|
-
return null;
|
|
29601
|
-
}
|
|
29602
|
-
|
|
29603
|
-
if (node.children.length > 1) {
|
|
29604
|
-
return node;
|
|
29605
|
-
}
|
|
29606
|
-
|
|
29607
|
-
const firstChild = node.children[0];
|
|
29608
|
-
return utilities.isHTMLElement(firstChild) ? firstChild : node;
|
|
29609
|
-
}
|
|
29610
|
-
|
|
29611
|
-
function useDragOverlayMeasuring(_ref) {
|
|
29612
|
-
let {
|
|
29613
|
-
measure
|
|
29614
|
-
} = _ref;
|
|
29615
|
-
const [rect, setRect] = React.useState(null);
|
|
29616
|
-
const handleResize = React.useCallback(entries => {
|
|
29617
|
-
for (const {
|
|
29618
|
-
target
|
|
29619
|
-
} of entries) {
|
|
29620
|
-
if (utilities.isHTMLElement(target)) {
|
|
29621
|
-
setRect(rect => {
|
|
29622
|
-
const newRect = measure(target);
|
|
29623
|
-
return rect ? { ...rect,
|
|
29624
|
-
width: newRect.width,
|
|
29625
|
-
height: newRect.height
|
|
29626
|
-
} : newRect;
|
|
29627
|
-
});
|
|
29628
|
-
break;
|
|
29629
|
-
}
|
|
29630
|
-
}
|
|
29631
|
-
}, [measure]);
|
|
29632
|
-
const resizeObserver = useResizeObserver({
|
|
29633
|
-
callback: handleResize
|
|
29634
|
-
});
|
|
29635
|
-
const handleNodeChange = React.useCallback(element => {
|
|
29636
|
-
const node = getMeasurableNode(element);
|
|
29637
|
-
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
29638
|
-
|
|
29639
|
-
if (node) {
|
|
29640
|
-
resizeObserver == null ? void 0 : resizeObserver.observe(node);
|
|
29641
|
-
}
|
|
29642
|
-
|
|
29643
|
-
setRect(node ? measure(node) : null);
|
|
29644
|
-
}, [measure, resizeObserver]);
|
|
29645
|
-
const [nodeRef, setRef] = utilities.useNodeRef(handleNodeChange);
|
|
29646
|
-
return React.useMemo(() => ({
|
|
29647
|
-
nodeRef,
|
|
29648
|
-
rect,
|
|
29649
|
-
setRef
|
|
29650
|
-
}), [rect, nodeRef, setRef]);
|
|
29651
|
-
}
|
|
29652
|
-
|
|
29653
|
-
const defaultSensors = [{
|
|
29654
|
-
sensor: PointerSensor,
|
|
29655
|
-
options: {}
|
|
29656
|
-
}, {
|
|
29657
|
-
sensor: KeyboardSensor,
|
|
29658
|
-
options: {}
|
|
29659
|
-
}];
|
|
29660
|
-
const defaultData = {
|
|
29661
|
-
current: {}
|
|
29662
|
-
};
|
|
29663
|
-
const defaultMeasuringConfiguration = {
|
|
29664
|
-
draggable: {
|
|
29665
|
-
measure: getTransformAgnosticClientRect
|
|
29666
|
-
},
|
|
29667
|
-
droppable: {
|
|
29668
|
-
measure: getTransformAgnosticClientRect,
|
|
29669
|
-
strategy: MeasuringStrategy.WhileDragging,
|
|
29670
|
-
frequency: MeasuringFrequency.Optimized
|
|
29671
|
-
},
|
|
29672
|
-
dragOverlay: {
|
|
29673
|
-
measure: getClientRect
|
|
29674
|
-
}
|
|
29675
|
-
};
|
|
29676
|
-
|
|
29677
|
-
class DroppableContainersMap extends Map {
|
|
29678
|
-
get(id) {
|
|
29679
|
-
var _super$get;
|
|
29680
|
-
|
|
29681
|
-
return id != null ? (_super$get = super.get(id)) != null ? _super$get : undefined : undefined;
|
|
29682
|
-
}
|
|
29683
|
-
|
|
29684
|
-
toArray() {
|
|
29685
|
-
return Array.from(this.values());
|
|
29686
|
-
}
|
|
29687
|
-
|
|
29688
|
-
getEnabled() {
|
|
29689
|
-
return this.toArray().filter(_ref => {
|
|
29690
|
-
let {
|
|
29691
|
-
disabled
|
|
29692
|
-
} = _ref;
|
|
29693
|
-
return !disabled;
|
|
29694
|
-
});
|
|
29695
|
-
}
|
|
29696
|
-
|
|
29697
|
-
getNodeFor(id) {
|
|
29698
|
-
var _this$get$node$curren, _this$get;
|
|
29699
|
-
|
|
29700
|
-
return (_this$get$node$curren = (_this$get = this.get(id)) == null ? void 0 : _this$get.node.current) != null ? _this$get$node$curren : undefined;
|
|
29701
|
-
}
|
|
29702
|
-
|
|
29703
|
-
}
|
|
29704
|
-
|
|
29705
|
-
const defaultPublicContext = {
|
|
29706
|
-
activatorEvent: null,
|
|
29707
|
-
active: null,
|
|
29708
|
-
activeNode: null,
|
|
29709
|
-
activeNodeRect: null,
|
|
29710
|
-
collisions: null,
|
|
29711
|
-
containerNodeRect: null,
|
|
29712
|
-
draggableNodes: /*#__PURE__*/new Map(),
|
|
29713
|
-
droppableRects: /*#__PURE__*/new Map(),
|
|
29714
|
-
droppableContainers: /*#__PURE__*/new DroppableContainersMap(),
|
|
29715
|
-
over: null,
|
|
29716
|
-
dragOverlay: {
|
|
29717
|
-
nodeRef: {
|
|
29718
|
-
current: null
|
|
29719
|
-
},
|
|
29720
|
-
rect: null,
|
|
29721
|
-
setRef: noop
|
|
29722
|
-
},
|
|
29723
|
-
scrollableAncestors: [],
|
|
29724
|
-
scrollableAncestorRects: [],
|
|
29725
|
-
measuringConfiguration: defaultMeasuringConfiguration,
|
|
29726
|
-
measureDroppableContainers: noop,
|
|
29727
|
-
windowRect: null,
|
|
29728
|
-
measuringScheduled: false
|
|
29729
|
-
};
|
|
29730
|
-
const defaultInternalContext = {
|
|
29731
|
-
activatorEvent: null,
|
|
29732
|
-
activators: [],
|
|
29733
|
-
active: null,
|
|
29734
|
-
activeNodeRect: null,
|
|
29735
|
-
ariaDescribedById: {
|
|
29736
|
-
draggable: ''
|
|
29737
|
-
},
|
|
29738
|
-
dispatch: noop,
|
|
29739
|
-
draggableNodes: /*#__PURE__*/new Map(),
|
|
29740
|
-
over: null,
|
|
29741
|
-
measureDroppableContainers: noop
|
|
29742
|
-
};
|
|
29743
|
-
const InternalContext = /*#__PURE__*/React.createContext(defaultInternalContext);
|
|
29744
|
-
const PublicContext = /*#__PURE__*/React.createContext(defaultPublicContext);
|
|
29745
|
-
|
|
29746
|
-
function getInitialState() {
|
|
29747
|
-
return {
|
|
29748
|
-
draggable: {
|
|
29749
|
-
active: null,
|
|
29750
|
-
initialCoordinates: {
|
|
29751
|
-
x: 0,
|
|
29752
|
-
y: 0
|
|
29753
|
-
},
|
|
29754
|
-
nodes: new Map(),
|
|
29755
|
-
translate: {
|
|
29756
|
-
x: 0,
|
|
29757
|
-
y: 0
|
|
29758
|
-
}
|
|
29759
|
-
},
|
|
29760
|
-
droppable: {
|
|
29761
|
-
containers: new DroppableContainersMap()
|
|
29762
|
-
}
|
|
29763
|
-
};
|
|
29764
|
-
}
|
|
29765
|
-
function reducer(state, action) {
|
|
29766
|
-
switch (action.type) {
|
|
29767
|
-
case Action.DragStart:
|
|
29768
|
-
return { ...state,
|
|
29769
|
-
draggable: { ...state.draggable,
|
|
29770
|
-
initialCoordinates: action.initialCoordinates,
|
|
29771
|
-
active: action.active
|
|
29772
|
-
}
|
|
29773
|
-
};
|
|
29774
|
-
|
|
29775
|
-
case Action.DragMove:
|
|
29776
|
-
if (state.draggable.active == null) {
|
|
29777
|
-
return state;
|
|
29778
|
-
}
|
|
29779
|
-
|
|
29780
|
-
return { ...state,
|
|
29781
|
-
draggable: { ...state.draggable,
|
|
29782
|
-
translate: {
|
|
29783
|
-
x: action.coordinates.x - state.draggable.initialCoordinates.x,
|
|
29784
|
-
y: action.coordinates.y - state.draggable.initialCoordinates.y
|
|
29785
|
-
}
|
|
29786
|
-
}
|
|
29787
|
-
};
|
|
29788
|
-
|
|
29789
|
-
case Action.DragEnd:
|
|
29790
|
-
case Action.DragCancel:
|
|
29791
|
-
return { ...state,
|
|
29792
|
-
draggable: { ...state.draggable,
|
|
29793
|
-
active: null,
|
|
29794
|
-
initialCoordinates: {
|
|
29795
|
-
x: 0,
|
|
29796
|
-
y: 0
|
|
29797
|
-
},
|
|
29798
|
-
translate: {
|
|
29799
|
-
x: 0,
|
|
29800
|
-
y: 0
|
|
29801
|
-
}
|
|
29802
|
-
}
|
|
29803
|
-
};
|
|
29804
|
-
|
|
29805
|
-
case Action.RegisterDroppable:
|
|
29806
|
-
{
|
|
29807
|
-
const {
|
|
29808
|
-
element
|
|
29809
|
-
} = action;
|
|
29810
|
-
const {
|
|
29811
|
-
id
|
|
29812
|
-
} = element;
|
|
29813
|
-
const containers = new DroppableContainersMap(state.droppable.containers);
|
|
29814
|
-
containers.set(id, element);
|
|
29815
|
-
return { ...state,
|
|
29816
|
-
droppable: { ...state.droppable,
|
|
29817
|
-
containers
|
|
29818
|
-
}
|
|
29819
|
-
};
|
|
29820
|
-
}
|
|
29821
|
-
|
|
29822
|
-
case Action.SetDroppableDisabled:
|
|
29823
|
-
{
|
|
29824
|
-
const {
|
|
29825
|
-
id,
|
|
29826
|
-
key,
|
|
29827
|
-
disabled
|
|
29828
|
-
} = action;
|
|
29829
|
-
const element = state.droppable.containers.get(id);
|
|
29830
|
-
|
|
29831
|
-
if (!element || key !== element.key) {
|
|
29832
|
-
return state;
|
|
29833
|
-
}
|
|
29834
|
-
|
|
29835
|
-
const containers = new DroppableContainersMap(state.droppable.containers);
|
|
29836
|
-
containers.set(id, { ...element,
|
|
29837
|
-
disabled
|
|
29838
|
-
});
|
|
29839
|
-
return { ...state,
|
|
29840
|
-
droppable: { ...state.droppable,
|
|
29841
|
-
containers
|
|
29842
|
-
}
|
|
29843
|
-
};
|
|
29844
|
-
}
|
|
29845
|
-
|
|
29846
|
-
case Action.UnregisterDroppable:
|
|
29847
|
-
{
|
|
29848
|
-
const {
|
|
29849
|
-
id,
|
|
29850
|
-
key
|
|
29851
|
-
} = action;
|
|
29852
|
-
const element = state.droppable.containers.get(id);
|
|
29853
|
-
|
|
29854
|
-
if (!element || key !== element.key) {
|
|
29855
|
-
return state;
|
|
29856
|
-
}
|
|
29857
|
-
|
|
29858
|
-
const containers = new DroppableContainersMap(state.droppable.containers);
|
|
29859
|
-
containers.delete(id);
|
|
29860
|
-
return { ...state,
|
|
29861
|
-
droppable: { ...state.droppable,
|
|
29862
|
-
containers
|
|
29863
|
-
}
|
|
29864
|
-
};
|
|
29865
|
-
}
|
|
29866
|
-
|
|
29867
|
-
default:
|
|
29868
|
-
{
|
|
29869
|
-
return state;
|
|
29870
|
-
}
|
|
29871
|
-
}
|
|
29872
|
-
}
|
|
29873
|
-
|
|
29874
|
-
function RestoreFocus(_ref) {
|
|
29875
|
-
let {
|
|
29876
|
-
disabled
|
|
29877
|
-
} = _ref;
|
|
29878
|
-
const {
|
|
29879
|
-
active,
|
|
29880
|
-
activatorEvent,
|
|
29881
|
-
draggableNodes
|
|
29882
|
-
} = React.useContext(InternalContext);
|
|
29883
|
-
const previousActivatorEvent = utilities.usePrevious(activatorEvent);
|
|
29884
|
-
const previousActiveId = utilities.usePrevious(active == null ? void 0 : active.id); // Restore keyboard focus on the activator node
|
|
29885
|
-
|
|
29886
|
-
React.useEffect(() => {
|
|
29887
|
-
if (disabled) {
|
|
29888
|
-
return;
|
|
29889
|
-
}
|
|
29890
|
-
|
|
29891
|
-
if (!activatorEvent && previousActivatorEvent && previousActiveId != null) {
|
|
29892
|
-
if (!utilities.isKeyboardEvent(previousActivatorEvent)) {
|
|
29893
|
-
return;
|
|
29894
|
-
}
|
|
29895
|
-
|
|
29896
|
-
if (document.activeElement === previousActivatorEvent.target) {
|
|
29897
|
-
// No need to restore focus
|
|
29898
|
-
return;
|
|
29899
|
-
}
|
|
29900
|
-
|
|
29901
|
-
const draggableNode = draggableNodes.get(previousActiveId);
|
|
29902
|
-
|
|
29903
|
-
if (!draggableNode) {
|
|
29904
|
-
return;
|
|
29905
|
-
}
|
|
29906
|
-
|
|
29907
|
-
const {
|
|
29908
|
-
activatorNode,
|
|
29909
|
-
node
|
|
29910
|
-
} = draggableNode;
|
|
29911
|
-
|
|
29912
|
-
if (!activatorNode.current && !node.current) {
|
|
29913
|
-
return;
|
|
29914
|
-
}
|
|
29915
|
-
|
|
29916
|
-
requestAnimationFrame(() => {
|
|
29917
|
-
for (const element of [activatorNode.current, node.current]) {
|
|
29918
|
-
if (!element) {
|
|
29919
|
-
continue;
|
|
29920
|
-
}
|
|
29921
|
-
|
|
29922
|
-
const focusableNode = utilities.findFirstFocusableNode(element);
|
|
29923
|
-
|
|
29924
|
-
if (focusableNode) {
|
|
29925
|
-
focusableNode.focus();
|
|
29926
|
-
break;
|
|
29927
|
-
}
|
|
29928
|
-
}
|
|
29929
|
-
});
|
|
29930
|
-
}
|
|
29931
|
-
}, [activatorEvent, disabled, draggableNodes, previousActiveId, previousActivatorEvent]);
|
|
29932
|
-
return null;
|
|
29933
|
-
}
|
|
29934
|
-
|
|
29935
|
-
function applyModifiers(modifiers, _ref) {
|
|
29936
|
-
let {
|
|
29937
|
-
transform,
|
|
29938
|
-
...args
|
|
29939
|
-
} = _ref;
|
|
29940
|
-
return modifiers != null && modifiers.length ? modifiers.reduce((accumulator, modifier) => {
|
|
29941
|
-
return modifier({
|
|
29942
|
-
transform: accumulator,
|
|
29943
|
-
...args
|
|
29944
|
-
});
|
|
29945
|
-
}, transform) : transform;
|
|
29946
|
-
}
|
|
29947
|
-
|
|
29948
|
-
function useMeasuringConfiguration(config) {
|
|
29949
|
-
return React.useMemo(() => ({
|
|
29950
|
-
draggable: { ...defaultMeasuringConfiguration.draggable,
|
|
29951
|
-
...(config == null ? void 0 : config.draggable)
|
|
29952
|
-
},
|
|
29953
|
-
droppable: { ...defaultMeasuringConfiguration.droppable,
|
|
29954
|
-
...(config == null ? void 0 : config.droppable)
|
|
29955
|
-
},
|
|
29956
|
-
dragOverlay: { ...defaultMeasuringConfiguration.dragOverlay,
|
|
29957
|
-
...(config == null ? void 0 : config.dragOverlay)
|
|
29958
|
-
}
|
|
29959
|
-
}), // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29960
|
-
[config == null ? void 0 : config.draggable, config == null ? void 0 : config.droppable, config == null ? void 0 : config.dragOverlay]);
|
|
29961
|
-
}
|
|
29962
|
-
|
|
29963
|
-
function useLayoutShiftScrollCompensation(_ref) {
|
|
29964
|
-
let {
|
|
29965
|
-
activeNode,
|
|
29966
|
-
measure,
|
|
29967
|
-
initialRect,
|
|
29968
|
-
config = true
|
|
29969
|
-
} = _ref;
|
|
29970
|
-
const initialized = React.useRef(false);
|
|
29971
|
-
const {
|
|
29972
|
-
x,
|
|
29973
|
-
y
|
|
29974
|
-
} = typeof config === 'boolean' ? {
|
|
29975
|
-
x: config,
|
|
29976
|
-
y: config
|
|
29977
|
-
} : config;
|
|
29978
|
-
utilities.useIsomorphicLayoutEffect(() => {
|
|
29979
|
-
const disabled = !x && !y;
|
|
29980
|
-
|
|
29981
|
-
if (disabled || !activeNode) {
|
|
29982
|
-
initialized.current = false;
|
|
29983
|
-
return;
|
|
29984
|
-
}
|
|
29985
|
-
|
|
29986
|
-
if (initialized.current || !initialRect) {
|
|
29987
|
-
// Return early if layout shift scroll compensation was already attempted
|
|
29988
|
-
// or if there is no initialRect to compare to.
|
|
29989
|
-
return;
|
|
29990
|
-
} // Get the most up to date node ref for the active draggable
|
|
29991
|
-
|
|
29992
|
-
|
|
29993
|
-
const node = activeNode == null ? void 0 : activeNode.node.current;
|
|
29994
|
-
|
|
29995
|
-
if (!node || node.isConnected === false) {
|
|
29996
|
-
// Return early if there is no attached node ref or if the node is
|
|
29997
|
-
// disconnected from the document.
|
|
29998
|
-
return;
|
|
29999
|
-
}
|
|
30000
|
-
|
|
30001
|
-
const rect = measure(node);
|
|
30002
|
-
const rectDelta = getRectDelta(rect, initialRect);
|
|
30003
|
-
|
|
30004
|
-
if (!x) {
|
|
30005
|
-
rectDelta.x = 0;
|
|
30006
|
-
}
|
|
30007
|
-
|
|
30008
|
-
if (!y) {
|
|
30009
|
-
rectDelta.y = 0;
|
|
30010
|
-
} // Only perform layout shift scroll compensation once
|
|
30011
|
-
|
|
30012
|
-
|
|
30013
|
-
initialized.current = true;
|
|
30014
|
-
|
|
30015
|
-
if (Math.abs(rectDelta.x) > 0 || Math.abs(rectDelta.y) > 0) {
|
|
30016
|
-
const firstScrollableAncestor = getFirstScrollableAncestor(node);
|
|
30017
|
-
|
|
30018
|
-
if (firstScrollableAncestor) {
|
|
30019
|
-
firstScrollableAncestor.scrollBy({
|
|
30020
|
-
top: rectDelta.y,
|
|
30021
|
-
left: rectDelta.x
|
|
30022
|
-
});
|
|
30023
|
-
}
|
|
30024
|
-
}
|
|
30025
|
-
}, [activeNode, x, y, initialRect, measure]);
|
|
30026
|
-
}
|
|
30027
|
-
|
|
30028
|
-
const ActiveDraggableContext = /*#__PURE__*/React.createContext({ ...defaultCoordinates,
|
|
30029
|
-
scaleX: 1,
|
|
30030
|
-
scaleY: 1
|
|
30031
|
-
});
|
|
30032
|
-
var Status;
|
|
30033
|
-
|
|
30034
|
-
(function (Status) {
|
|
30035
|
-
Status[Status["Uninitialized"] = 0] = "Uninitialized";
|
|
30036
|
-
Status[Status["Initializing"] = 1] = "Initializing";
|
|
30037
|
-
Status[Status["Initialized"] = 2] = "Initialized";
|
|
30038
|
-
})(Status || (Status = {}));
|
|
30039
|
-
|
|
30040
|
-
const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
|
|
30041
|
-
var _sensorContext$curren, _dragOverlay$nodeRef$, _dragOverlay$rect, _over$rect;
|
|
30042
|
-
|
|
30043
|
-
let {
|
|
30044
|
-
id,
|
|
30045
|
-
accessibility,
|
|
30046
|
-
autoScroll = true,
|
|
30047
|
-
children,
|
|
30048
|
-
sensors = defaultSensors,
|
|
30049
|
-
collisionDetection = rectIntersection,
|
|
30050
|
-
measuring,
|
|
30051
|
-
modifiers,
|
|
30052
|
-
...props
|
|
30053
|
-
} = _ref;
|
|
30054
|
-
const store = React.useReducer(reducer, undefined, getInitialState);
|
|
30055
|
-
const [state, dispatch] = store;
|
|
30056
|
-
const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
|
|
30057
|
-
const [status, setStatus] = React.useState(Status.Uninitialized);
|
|
30058
|
-
const isInitialized = status === Status.Initialized;
|
|
30059
|
-
const {
|
|
30060
|
-
draggable: {
|
|
30061
|
-
active: activeId,
|
|
30062
|
-
nodes: draggableNodes,
|
|
30063
|
-
translate
|
|
30064
|
-
},
|
|
30065
|
-
droppable: {
|
|
30066
|
-
containers: droppableContainers
|
|
30067
|
-
}
|
|
30068
|
-
} = state;
|
|
30069
|
-
const node = activeId != null ? draggableNodes.get(activeId) : null;
|
|
30070
|
-
const activeRects = React.useRef({
|
|
30071
|
-
initial: null,
|
|
30072
|
-
translated: null
|
|
30073
|
-
});
|
|
30074
|
-
const active = React.useMemo(() => {
|
|
30075
|
-
var _node$data;
|
|
30076
|
-
|
|
30077
|
-
return activeId != null ? {
|
|
30078
|
-
id: activeId,
|
|
30079
|
-
// It's possible for the active node to unmount while dragging
|
|
30080
|
-
data: (_node$data = node == null ? void 0 : node.data) != null ? _node$data : defaultData,
|
|
30081
|
-
rect: activeRects
|
|
30082
|
-
} : null;
|
|
30083
|
-
}, [activeId, node]);
|
|
30084
|
-
const activeRef = React.useRef(null);
|
|
30085
|
-
const [activeSensor, setActiveSensor] = React.useState(null);
|
|
30086
|
-
const [activatorEvent, setActivatorEvent] = React.useState(null);
|
|
30087
|
-
const latestProps = utilities.useLatestValue(props, Object.values(props));
|
|
30088
|
-
const draggableDescribedById = utilities.useUniqueId("DndDescribedBy", id);
|
|
30089
|
-
const enabledDroppableContainers = React.useMemo(() => droppableContainers.getEnabled(), [droppableContainers]);
|
|
30090
|
-
const measuringConfiguration = useMeasuringConfiguration(measuring);
|
|
30091
|
-
const {
|
|
30092
|
-
droppableRects,
|
|
30093
|
-
measureDroppableContainers,
|
|
30094
|
-
measuringScheduled
|
|
30095
|
-
} = useDroppableMeasuring(enabledDroppableContainers, {
|
|
30096
|
-
dragging: isInitialized,
|
|
30097
|
-
dependencies: [translate.x, translate.y],
|
|
30098
|
-
config: measuringConfiguration.droppable
|
|
30099
|
-
});
|
|
30100
|
-
const activeNode = useCachedNode(draggableNodes, activeId);
|
|
30101
|
-
const activationCoordinates = React.useMemo(() => activatorEvent ? utilities.getEventCoordinates(activatorEvent) : null, [activatorEvent]);
|
|
30102
|
-
const autoScrollOptions = getAutoScrollerOptions();
|
|
30103
|
-
const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
|
|
30104
|
-
useLayoutShiftScrollCompensation({
|
|
30105
|
-
activeNode: activeId != null ? draggableNodes.get(activeId) : null,
|
|
30106
|
-
config: autoScrollOptions.layoutShiftCompensation,
|
|
30107
|
-
initialRect: initialActiveNodeRect,
|
|
30108
|
-
measure: measuringConfiguration.draggable.measure
|
|
30109
|
-
});
|
|
30110
|
-
const activeNodeRect = useRect(activeNode, measuringConfiguration.draggable.measure, initialActiveNodeRect);
|
|
30111
|
-
const containerNodeRect = useRect(activeNode ? activeNode.parentElement : null);
|
|
30112
|
-
const sensorContext = React.useRef({
|
|
30113
|
-
activatorEvent: null,
|
|
30114
|
-
active: null,
|
|
30115
|
-
activeNode,
|
|
30116
|
-
collisionRect: null,
|
|
30117
|
-
collisions: null,
|
|
30118
|
-
droppableRects,
|
|
30119
|
-
draggableNodes,
|
|
30120
|
-
draggingNode: null,
|
|
30121
|
-
draggingNodeRect: null,
|
|
30122
|
-
droppableContainers,
|
|
30123
|
-
over: null,
|
|
30124
|
-
scrollableAncestors: [],
|
|
30125
|
-
scrollAdjustedTranslate: null
|
|
30126
|
-
});
|
|
30127
|
-
const overNode = droppableContainers.getNodeFor((_sensorContext$curren = sensorContext.current.over) == null ? void 0 : _sensorContext$curren.id);
|
|
30128
|
-
const dragOverlay = useDragOverlayMeasuring({
|
|
30129
|
-
measure: measuringConfiguration.dragOverlay.measure
|
|
30130
|
-
}); // Use the rect of the drag overlay if it is mounted
|
|
30131
|
-
|
|
30132
|
-
const draggingNode = (_dragOverlay$nodeRef$ = dragOverlay.nodeRef.current) != null ? _dragOverlay$nodeRef$ : activeNode;
|
|
30133
|
-
const draggingNodeRect = isInitialized ? (_dragOverlay$rect = dragOverlay.rect) != null ? _dragOverlay$rect : activeNodeRect : null;
|
|
30134
|
-
const usesDragOverlay = Boolean(dragOverlay.nodeRef.current && dragOverlay.rect); // The delta between the previous and new position of the draggable node
|
|
30135
|
-
// is only relevant when there is no drag overlay
|
|
30136
|
-
|
|
30137
|
-
const nodeRectDelta = useRectDelta(usesDragOverlay ? null : activeNodeRect); // Get the window rect of the dragging node
|
|
30138
|
-
|
|
30139
|
-
const windowRect = useWindowRect(draggingNode ? utilities.getWindow(draggingNode) : null); // Get scrollable ancestors of the dragging node
|
|
30140
|
-
|
|
30141
|
-
const scrollableAncestors = useScrollableAncestors(isInitialized ? overNode != null ? overNode : activeNode : null);
|
|
30142
|
-
const scrollableAncestorRects = useRects(scrollableAncestors); // Apply modifiers
|
|
30143
|
-
|
|
30144
|
-
const modifiedTranslate = applyModifiers(modifiers, {
|
|
30145
|
-
transform: {
|
|
30146
|
-
x: translate.x - nodeRectDelta.x,
|
|
30147
|
-
y: translate.y - nodeRectDelta.y,
|
|
30148
|
-
scaleX: 1,
|
|
30149
|
-
scaleY: 1
|
|
30150
|
-
},
|
|
30151
|
-
activatorEvent,
|
|
30152
|
-
active,
|
|
30153
|
-
activeNodeRect,
|
|
30154
|
-
containerNodeRect,
|
|
30155
|
-
draggingNodeRect,
|
|
30156
|
-
over: sensorContext.current.over,
|
|
30157
|
-
overlayNodeRect: dragOverlay.rect,
|
|
30158
|
-
scrollableAncestors,
|
|
30159
|
-
scrollableAncestorRects,
|
|
30160
|
-
windowRect
|
|
30161
|
-
});
|
|
30162
|
-
const pointerCoordinates = activationCoordinates ? utilities.add(activationCoordinates, translate) : null;
|
|
30163
|
-
const scrollOffsets = useScrollOffsets(scrollableAncestors); // Represents the scroll delta since dragging was initiated
|
|
30164
|
-
|
|
30165
|
-
const scrollAdjustment = useScrollOffsetsDelta(scrollOffsets); // Represents the scroll delta since the last time the active node rect was measured
|
|
30166
|
-
|
|
30167
|
-
const activeNodeScrollDelta = useScrollOffsetsDelta(scrollOffsets, [activeNodeRect]);
|
|
30168
|
-
const scrollAdjustedTranslate = utilities.add(modifiedTranslate, scrollAdjustment);
|
|
30169
|
-
const collisionRect = draggingNodeRect ? getAdjustedRect(draggingNodeRect, modifiedTranslate) : null;
|
|
30170
|
-
const collisions = active && collisionRect ? collisionDetection({
|
|
30171
|
-
active,
|
|
30172
|
-
collisionRect,
|
|
30173
|
-
droppableRects,
|
|
30174
|
-
droppableContainers: enabledDroppableContainers,
|
|
30175
|
-
pointerCoordinates
|
|
30176
|
-
}) : null;
|
|
30177
|
-
const overId = getFirstCollision(collisions, 'id');
|
|
30178
|
-
const [over, setOver] = React.useState(null); // When there is no drag overlay used, we need to account for the
|
|
30179
|
-
// window scroll delta
|
|
30180
|
-
|
|
30181
|
-
const appliedTranslate = usesDragOverlay ? modifiedTranslate : utilities.add(modifiedTranslate, activeNodeScrollDelta);
|
|
30182
|
-
const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
|
|
30183
|
-
const activeSensorRef = React.useRef(null);
|
|
30184
|
-
const instantiateSensor = React.useCallback((event, _ref2) => {
|
|
30185
|
-
let {
|
|
30186
|
-
sensor: Sensor,
|
|
30187
|
-
options
|
|
30188
|
-
} = _ref2;
|
|
30189
|
-
|
|
30190
|
-
if (activeRef.current == null) {
|
|
30191
|
-
return;
|
|
30192
|
-
}
|
|
30193
|
-
|
|
30194
|
-
const activeNode = draggableNodes.get(activeRef.current);
|
|
30195
|
-
|
|
30196
|
-
if (!activeNode) {
|
|
30197
|
-
return;
|
|
30198
|
-
}
|
|
30199
|
-
|
|
30200
|
-
const activatorEvent = event.nativeEvent;
|
|
30201
|
-
const sensorInstance = new Sensor({
|
|
30202
|
-
active: activeRef.current,
|
|
30203
|
-
activeNode,
|
|
30204
|
-
event: activatorEvent,
|
|
30205
|
-
options,
|
|
30206
|
-
// Sensors need to be instantiated with refs for arguments that change over time
|
|
30207
|
-
// otherwise they are frozen in time with the stale arguments
|
|
30208
|
-
context: sensorContext,
|
|
30209
|
-
|
|
30210
|
-
onAbort(id) {
|
|
30211
|
-
const draggableNode = draggableNodes.get(id);
|
|
30212
|
-
|
|
30213
|
-
if (!draggableNode) {
|
|
30214
|
-
return;
|
|
30215
|
-
}
|
|
30216
|
-
|
|
30217
|
-
const {
|
|
30218
|
-
onDragAbort
|
|
30219
|
-
} = latestProps.current;
|
|
30220
|
-
const event = {
|
|
30221
|
-
id
|
|
30222
|
-
};
|
|
30223
|
-
onDragAbort == null ? void 0 : onDragAbort(event);
|
|
30224
|
-
dispatchMonitorEvent({
|
|
30225
|
-
type: 'onDragAbort',
|
|
30226
|
-
event
|
|
30227
|
-
});
|
|
30228
|
-
},
|
|
30229
|
-
|
|
30230
|
-
onPending(id, constraint, initialCoordinates, offset) {
|
|
30231
|
-
const draggableNode = draggableNodes.get(id);
|
|
30232
|
-
|
|
30233
|
-
if (!draggableNode) {
|
|
30234
|
-
return;
|
|
30235
|
-
}
|
|
30236
|
-
|
|
30237
|
-
const {
|
|
30238
|
-
onDragPending
|
|
30239
|
-
} = latestProps.current;
|
|
30240
|
-
const event = {
|
|
30241
|
-
id,
|
|
30242
|
-
constraint,
|
|
30243
|
-
initialCoordinates,
|
|
30244
|
-
offset
|
|
30245
|
-
};
|
|
30246
|
-
onDragPending == null ? void 0 : onDragPending(event);
|
|
30247
|
-
dispatchMonitorEvent({
|
|
30248
|
-
type: 'onDragPending',
|
|
30249
|
-
event
|
|
30250
|
-
});
|
|
30251
|
-
},
|
|
30252
|
-
|
|
30253
|
-
onStart(initialCoordinates) {
|
|
30254
|
-
const id = activeRef.current;
|
|
30255
|
-
|
|
30256
|
-
if (id == null) {
|
|
30257
|
-
return;
|
|
30258
|
-
}
|
|
30259
|
-
|
|
30260
|
-
const draggableNode = draggableNodes.get(id);
|
|
30261
|
-
|
|
30262
|
-
if (!draggableNode) {
|
|
30263
|
-
return;
|
|
30264
|
-
}
|
|
30265
|
-
|
|
30266
|
-
const {
|
|
30267
|
-
onDragStart
|
|
30268
|
-
} = latestProps.current;
|
|
30269
|
-
const event = {
|
|
30270
|
-
activatorEvent,
|
|
30271
|
-
active: {
|
|
30272
|
-
id,
|
|
30273
|
-
data: draggableNode.data,
|
|
30274
|
-
rect: activeRects
|
|
30275
|
-
}
|
|
30276
|
-
};
|
|
30277
|
-
ReactDOM.unstable_batchedUpdates(() => {
|
|
30278
|
-
onDragStart == null ? void 0 : onDragStart(event);
|
|
30279
|
-
setStatus(Status.Initializing);
|
|
30280
|
-
dispatch({
|
|
30281
|
-
type: Action.DragStart,
|
|
30282
|
-
initialCoordinates,
|
|
30283
|
-
active: id
|
|
30284
|
-
});
|
|
30285
|
-
dispatchMonitorEvent({
|
|
30286
|
-
type: 'onDragStart',
|
|
30287
|
-
event
|
|
30288
|
-
});
|
|
30289
|
-
setActiveSensor(activeSensorRef.current);
|
|
30290
|
-
setActivatorEvent(activatorEvent);
|
|
30291
|
-
});
|
|
30292
|
-
},
|
|
30293
|
-
|
|
30294
|
-
onMove(coordinates) {
|
|
30295
|
-
dispatch({
|
|
30296
|
-
type: Action.DragMove,
|
|
30297
|
-
coordinates
|
|
30298
|
-
});
|
|
30299
|
-
},
|
|
30300
|
-
|
|
30301
|
-
onEnd: createHandler(Action.DragEnd),
|
|
30302
|
-
onCancel: createHandler(Action.DragCancel)
|
|
30303
|
-
});
|
|
30304
|
-
activeSensorRef.current = sensorInstance;
|
|
30305
|
-
|
|
30306
|
-
function createHandler(type) {
|
|
30307
|
-
return async function handler() {
|
|
30308
|
-
const {
|
|
30309
|
-
active,
|
|
30310
|
-
collisions,
|
|
30311
|
-
over,
|
|
30312
|
-
scrollAdjustedTranslate
|
|
30313
|
-
} = sensorContext.current;
|
|
30314
|
-
let event = null;
|
|
30315
|
-
|
|
30316
|
-
if (active && scrollAdjustedTranslate) {
|
|
30317
|
-
const {
|
|
30318
|
-
cancelDrop
|
|
30319
|
-
} = latestProps.current;
|
|
30320
|
-
event = {
|
|
30321
|
-
activatorEvent,
|
|
30322
|
-
active: active,
|
|
30323
|
-
collisions,
|
|
30324
|
-
delta: scrollAdjustedTranslate,
|
|
30325
|
-
over
|
|
30326
|
-
};
|
|
30327
|
-
|
|
30328
|
-
if (type === Action.DragEnd && typeof cancelDrop === 'function') {
|
|
30329
|
-
const shouldCancel = await Promise.resolve(cancelDrop(event));
|
|
30330
|
-
|
|
30331
|
-
if (shouldCancel) {
|
|
30332
|
-
type = Action.DragCancel;
|
|
30333
|
-
}
|
|
30334
|
-
}
|
|
30335
|
-
}
|
|
30336
|
-
|
|
30337
|
-
activeRef.current = null;
|
|
30338
|
-
ReactDOM.unstable_batchedUpdates(() => {
|
|
30339
|
-
dispatch({
|
|
30340
|
-
type
|
|
30341
|
-
});
|
|
30342
|
-
setStatus(Status.Uninitialized);
|
|
30343
|
-
setOver(null);
|
|
30344
|
-
setActiveSensor(null);
|
|
30345
|
-
setActivatorEvent(null);
|
|
30346
|
-
activeSensorRef.current = null;
|
|
30347
|
-
const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
|
|
30348
|
-
|
|
30349
|
-
if (event) {
|
|
30350
|
-
const handler = latestProps.current[eventName];
|
|
30351
|
-
handler == null ? void 0 : handler(event);
|
|
30352
|
-
dispatchMonitorEvent({
|
|
30353
|
-
type: eventName,
|
|
30354
|
-
event
|
|
30355
|
-
});
|
|
30356
|
-
}
|
|
30357
|
-
});
|
|
30358
|
-
};
|
|
30359
|
-
}
|
|
30360
|
-
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
30361
|
-
[draggableNodes]);
|
|
30362
|
-
const bindActivatorToSensorInstantiator = React.useCallback((handler, sensor) => {
|
|
30363
|
-
return (event, active) => {
|
|
30364
|
-
const nativeEvent = event.nativeEvent;
|
|
30365
|
-
const activeDraggableNode = draggableNodes.get(active);
|
|
30366
|
-
|
|
30367
|
-
if ( // Another sensor is already instantiating
|
|
30368
|
-
activeRef.current !== null || // No active draggable
|
|
30369
|
-
!activeDraggableNode || // Event has already been captured
|
|
30370
|
-
nativeEvent.dndKit || nativeEvent.defaultPrevented) {
|
|
30371
|
-
return;
|
|
30372
|
-
}
|
|
30373
|
-
|
|
30374
|
-
const activationContext = {
|
|
30375
|
-
active: activeDraggableNode
|
|
30376
|
-
};
|
|
30377
|
-
const shouldActivate = handler(event, sensor.options, activationContext);
|
|
30378
|
-
|
|
30379
|
-
if (shouldActivate === true) {
|
|
30380
|
-
nativeEvent.dndKit = {
|
|
30381
|
-
capturedBy: sensor.sensor
|
|
30382
|
-
};
|
|
30383
|
-
activeRef.current = active;
|
|
30384
|
-
instantiateSensor(event, sensor);
|
|
30385
|
-
}
|
|
30386
|
-
};
|
|
30387
|
-
}, [draggableNodes, instantiateSensor]);
|
|
30388
|
-
const activators = useCombineActivators(sensors, bindActivatorToSensorInstantiator);
|
|
30389
|
-
useSensorSetup(sensors);
|
|
30390
|
-
utilities.useIsomorphicLayoutEffect(() => {
|
|
30391
|
-
if (activeNodeRect && status === Status.Initializing) {
|
|
30392
|
-
setStatus(Status.Initialized);
|
|
30393
|
-
}
|
|
30394
|
-
}, [activeNodeRect, status]);
|
|
30395
|
-
React.useEffect(() => {
|
|
30396
|
-
const {
|
|
30397
|
-
onDragMove
|
|
30398
|
-
} = latestProps.current;
|
|
30399
|
-
const {
|
|
30400
|
-
active,
|
|
30401
|
-
activatorEvent,
|
|
30402
|
-
collisions,
|
|
30403
|
-
over
|
|
30404
|
-
} = sensorContext.current;
|
|
30405
|
-
|
|
30406
|
-
if (!active || !activatorEvent) {
|
|
30407
|
-
return;
|
|
30408
|
-
}
|
|
30409
|
-
|
|
30410
|
-
const event = {
|
|
30411
|
-
active,
|
|
30412
|
-
activatorEvent,
|
|
30413
|
-
collisions,
|
|
30414
|
-
delta: {
|
|
30415
|
-
x: scrollAdjustedTranslate.x,
|
|
30416
|
-
y: scrollAdjustedTranslate.y
|
|
30417
|
-
},
|
|
30418
|
-
over
|
|
30419
|
-
};
|
|
30420
|
-
ReactDOM.unstable_batchedUpdates(() => {
|
|
30421
|
-
onDragMove == null ? void 0 : onDragMove(event);
|
|
30422
|
-
dispatchMonitorEvent({
|
|
30423
|
-
type: 'onDragMove',
|
|
30424
|
-
event
|
|
30425
|
-
});
|
|
30426
|
-
});
|
|
30427
|
-
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
30428
|
-
[scrollAdjustedTranslate.x, scrollAdjustedTranslate.y]);
|
|
30429
|
-
React.useEffect(() => {
|
|
30430
|
-
const {
|
|
30431
|
-
active,
|
|
30432
|
-
activatorEvent,
|
|
30433
|
-
collisions,
|
|
30434
|
-
droppableContainers,
|
|
30435
|
-
scrollAdjustedTranslate
|
|
30436
|
-
} = sensorContext.current;
|
|
30437
|
-
|
|
30438
|
-
if (!active || activeRef.current == null || !activatorEvent || !scrollAdjustedTranslate) {
|
|
30439
|
-
return;
|
|
30440
|
-
}
|
|
30441
|
-
|
|
30442
|
-
const {
|
|
30443
|
-
onDragOver
|
|
30444
|
-
} = latestProps.current;
|
|
30445
|
-
const overContainer = droppableContainers.get(overId);
|
|
30446
|
-
const over = overContainer && overContainer.rect.current ? {
|
|
30447
|
-
id: overContainer.id,
|
|
30448
|
-
rect: overContainer.rect.current,
|
|
30449
|
-
data: overContainer.data,
|
|
30450
|
-
disabled: overContainer.disabled
|
|
30451
|
-
} : null;
|
|
30452
|
-
const event = {
|
|
30453
|
-
active,
|
|
30454
|
-
activatorEvent,
|
|
30455
|
-
collisions,
|
|
30456
|
-
delta: {
|
|
30457
|
-
x: scrollAdjustedTranslate.x,
|
|
30458
|
-
y: scrollAdjustedTranslate.y
|
|
30459
|
-
},
|
|
30460
|
-
over
|
|
30461
|
-
};
|
|
30462
|
-
ReactDOM.unstable_batchedUpdates(() => {
|
|
30463
|
-
setOver(over);
|
|
30464
|
-
onDragOver == null ? void 0 : onDragOver(event);
|
|
30465
|
-
dispatchMonitorEvent({
|
|
30466
|
-
type: 'onDragOver',
|
|
30467
|
-
event
|
|
30468
|
-
});
|
|
30469
|
-
});
|
|
30470
|
-
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
30471
|
-
[overId]);
|
|
30472
|
-
utilities.useIsomorphicLayoutEffect(() => {
|
|
30473
|
-
sensorContext.current = {
|
|
30474
|
-
activatorEvent,
|
|
30475
|
-
active,
|
|
30476
|
-
activeNode,
|
|
30477
|
-
collisionRect,
|
|
30478
|
-
collisions,
|
|
30479
|
-
droppableRects,
|
|
30480
|
-
draggableNodes,
|
|
30481
|
-
draggingNode,
|
|
30482
|
-
draggingNodeRect,
|
|
30483
|
-
droppableContainers,
|
|
30484
|
-
over,
|
|
30485
|
-
scrollableAncestors,
|
|
30486
|
-
scrollAdjustedTranslate
|
|
30487
|
-
};
|
|
30488
|
-
activeRects.current = {
|
|
30489
|
-
initial: draggingNodeRect,
|
|
30490
|
-
translated: collisionRect
|
|
30491
|
-
};
|
|
30492
|
-
}, [active, activeNode, collisions, collisionRect, draggableNodes, draggingNode, draggingNodeRect, droppableRects, droppableContainers, over, scrollableAncestors, scrollAdjustedTranslate]);
|
|
30493
|
-
useAutoScroller({ ...autoScrollOptions,
|
|
30494
|
-
delta: translate,
|
|
30495
|
-
draggingRect: collisionRect,
|
|
30496
|
-
pointerCoordinates,
|
|
30497
|
-
scrollableAncestors,
|
|
30498
|
-
scrollableAncestorRects
|
|
30499
|
-
});
|
|
30500
|
-
const publicContext = React.useMemo(() => {
|
|
30501
|
-
const context = {
|
|
30502
|
-
active,
|
|
30503
|
-
activeNode,
|
|
30504
|
-
activeNodeRect,
|
|
30505
|
-
activatorEvent,
|
|
30506
|
-
collisions,
|
|
30507
|
-
containerNodeRect,
|
|
30508
|
-
dragOverlay,
|
|
30509
|
-
draggableNodes,
|
|
30510
|
-
droppableContainers,
|
|
30511
|
-
droppableRects,
|
|
30512
|
-
over,
|
|
30513
|
-
measureDroppableContainers,
|
|
30514
|
-
scrollableAncestors,
|
|
30515
|
-
scrollableAncestorRects,
|
|
30516
|
-
measuringConfiguration,
|
|
30517
|
-
measuringScheduled,
|
|
30518
|
-
windowRect
|
|
30519
|
-
};
|
|
30520
|
-
return context;
|
|
30521
|
-
}, [active, activeNode, activeNodeRect, activatorEvent, collisions, containerNodeRect, dragOverlay, draggableNodes, droppableContainers, droppableRects, over, measureDroppableContainers, scrollableAncestors, scrollableAncestorRects, measuringConfiguration, measuringScheduled, windowRect]);
|
|
30522
|
-
const internalContext = React.useMemo(() => {
|
|
30523
|
-
const context = {
|
|
30524
|
-
activatorEvent,
|
|
30525
|
-
activators,
|
|
30526
|
-
active,
|
|
30527
|
-
activeNodeRect,
|
|
30528
|
-
ariaDescribedById: {
|
|
30529
|
-
draggable: draggableDescribedById
|
|
30530
|
-
},
|
|
30531
|
-
dispatch,
|
|
30532
|
-
draggableNodes,
|
|
30533
|
-
over,
|
|
30534
|
-
measureDroppableContainers
|
|
30535
|
-
};
|
|
30536
|
-
return context;
|
|
30537
|
-
}, [activatorEvent, activators, active, activeNodeRect, dispatch, draggableDescribedById, draggableNodes, over, measureDroppableContainers]);
|
|
30538
|
-
return React.createElement(DndMonitorContext.Provider, {
|
|
30539
|
-
value: registerMonitorListener
|
|
30540
|
-
}, React.createElement(InternalContext.Provider, {
|
|
30541
|
-
value: internalContext
|
|
30542
|
-
}, React.createElement(PublicContext.Provider, {
|
|
30543
|
-
value: publicContext
|
|
30544
|
-
}, React.createElement(ActiveDraggableContext.Provider, {
|
|
30545
|
-
value: transform
|
|
30546
|
-
}, children)), React.createElement(RestoreFocus, {
|
|
30547
|
-
disabled: (accessibility == null ? void 0 : accessibility.restoreFocus) === false
|
|
30548
|
-
})), React.createElement(Accessibility, { ...accessibility,
|
|
30549
|
-
hiddenTextDescribedById: draggableDescribedById
|
|
30550
|
-
}));
|
|
30551
|
-
|
|
30552
|
-
function getAutoScrollerOptions() {
|
|
30553
|
-
const activeSensorDisablesAutoscroll = (activeSensor == null ? void 0 : activeSensor.autoScrollEnabled) === false;
|
|
30554
|
-
const autoScrollGloballyDisabled = typeof autoScroll === 'object' ? autoScroll.enabled === false : autoScroll === false;
|
|
30555
|
-
const enabled = isInitialized && !activeSensorDisablesAutoscroll && !autoScrollGloballyDisabled;
|
|
30556
|
-
|
|
30557
|
-
if (typeof autoScroll === 'object') {
|
|
30558
|
-
return { ...autoScroll,
|
|
30559
|
-
enabled
|
|
30560
|
-
};
|
|
30561
|
-
}
|
|
30562
|
-
|
|
30563
|
-
return {
|
|
30564
|
-
enabled
|
|
30565
|
-
};
|
|
30566
|
-
}
|
|
30567
|
-
});
|
|
30568
|
-
|
|
30569
27292
|
const EditGridWrapper = (props) => {
|
|
30570
27293
|
const notifications = core.useNotifications();
|
|
30571
27294
|
// ======================|| EDIT ||====================== //
|
|
@@ -30628,15 +27351,15 @@ const EditGridWrapper = (props) => {
|
|
|
30628
27351
|
const rows = React.useMemo(() => {
|
|
30629
27352
|
return rowsIterator ? Array.from(rowsIterator) : [];
|
|
30630
27353
|
}, [rowsIterator]);
|
|
30631
|
-
const sensors = useSensors(useSensor(PointerSensor));
|
|
27354
|
+
const sensors = core$1.useSensors(core$1.useSensor(core$1.PointerSensor));
|
|
30632
27355
|
const handleDragEnd = React.useCallback((event) => {
|
|
30633
27356
|
const field = props.dnd?.field;
|
|
30634
27357
|
if (!field)
|
|
30635
27358
|
return;
|
|
30636
27359
|
const { active, over } = event;
|
|
30637
27360
|
if (over) {
|
|
30638
|
-
const activeRow = rows.find((row) => row.id
|
|
30639
|
-
const overRow = rows.find((row) => row.id
|
|
27361
|
+
const activeRow = rows.find((row) => row.id == active.id);
|
|
27362
|
+
const overRow = rows.find((row) => row.id == over.id);
|
|
30640
27363
|
const mutationArgs = { ...props.dnd?.args, id: activeRow.id };
|
|
30641
27364
|
mutationArgs[field] = lodash.get(overRow, field);
|
|
30642
27365
|
editMutation(mutationArgs);
|
|
@@ -30677,11 +27400,11 @@ const EditGridWrapper = (props) => {
|
|
|
30677
27400
|
processRowUpdate: processRowUpdate,
|
|
30678
27401
|
loadingParams: [loadingMutation],
|
|
30679
27402
|
}, props.dataGridProps);
|
|
30680
|
-
const renderEditGrid = () => (jsxRuntime.jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: [
|
|
27403
|
+
const renderEditGrid = () => (jsxRuntime.jsx(core$1.DndContext, { sensors: sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, modifiers: [
|
|
30681
27404
|
modifiers.restrictToVerticalAxis,
|
|
30682
27405
|
modifiers.restrictToWindowEdges,
|
|
30683
27406
|
modifiers.restrictToParentElement
|
|
30684
|
-
], autoScroll: false, children: jsxRuntime.jsx(sortable.SortableContext, { items: rows ? rows.map((row) => row.id) : [], strategy: sortable.verticalListSortingStrategy, children: props.renderFunction({ ...props.renderFunctionProps, dataGridProps: editGridProps }) }) }));
|
|
27407
|
+
], autoScroll: false, children: jsxRuntime.jsx(sortable.SortableContext, { items: rows ? rows.map((row) => row.id.toString()) : [], strategy: sortable.verticalListSortingStrategy, children: props.renderFunction({ ...props.renderFunctionProps, dataGridProps: editGridProps }) }) }));
|
|
30685
27408
|
return renderEditGrid();
|
|
30686
27409
|
};
|
|
30687
27410
|
|
|
@@ -30863,7 +27586,7 @@ const CreateGridWrapper = (props) => {
|
|
|
30863
27586
|
handleClose();
|
|
30864
27587
|
}, disableRipple: true, children: option.title }, index));
|
|
30865
27588
|
})), jsxRuntime.jsx(MenuItem, { onClick: () => {
|
|
30866
|
-
navigate(`crear`);
|
|
27589
|
+
navigate(props.navigation ? `${props.navigation}crear` : `crear`);
|
|
30867
27590
|
handleClose();
|
|
30868
27591
|
}, disableRipple: true, children: "Manual" })] }), props.csv_upload?.enable && (jsxRuntime.jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data })), props.renderFunction({ dataGridProps: createGridProps })] }));
|
|
30869
27592
|
};
|
|
@@ -31070,6 +27793,7 @@ const Base = (props) => {
|
|
|
31070
27793
|
permission: data?.permissions?.create,
|
|
31071
27794
|
renderFunction: renderFunction,
|
|
31072
27795
|
pathname: props.pathname,
|
|
27796
|
+
navigation: props.slotProps?.navigation,
|
|
31073
27797
|
...renderProps,
|
|
31074
27798
|
...props.api.create
|
|
31075
27799
|
};
|
|
@@ -31212,6 +27936,12 @@ const DetailField = (props) => {
|
|
|
31212
27936
|
if (props.fieldData)
|
|
31213
27937
|
return lodash.map(props.fieldData, function (item) { return item.label; }).join(', ');
|
|
31214
27938
|
}
|
|
27939
|
+
else if (props.type.name == 'ControlledDate') {
|
|
27940
|
+
if (props.fieldData) {
|
|
27941
|
+
if (props.extraProps.type == 'datetime')
|
|
27942
|
+
return dayjs(props.fieldData).format('YYYY-MM-DD HH:mm');
|
|
27943
|
+
}
|
|
27944
|
+
}
|
|
31215
27945
|
else {
|
|
31216
27946
|
if (props.fieldData) {
|
|
31217
27947
|
if (props.detail_name) {
|