material-react-table 0.21.0 → 0.22.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/body/MRT_TableBody.d.ts +3 -2
- package/dist/body/MRT_TableBodyCell.d.ts +3 -2
- package/dist/body/MRT_TableBodyRow.d.ts +3 -2
- package/dist/buttons/MRT_GrabHandleButton.d.ts +3 -2
- package/dist/head/MRT_TableHead.d.ts +4 -2
- package/dist/head/MRT_TableHeadCell.d.ts +4 -6
- package/dist/head/MRT_TableHeadRow.d.ts +4 -2
- package/dist/material-react-table.cjs.development.js +177 -4409
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +141 -136
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts +3 -1
- package/package.json +1 -3
- package/src/body/MRT_TableBody.tsx +9 -3
- package/src/body/MRT_TableBodyCell.tsx +15 -17
- package/src/body/MRT_TableBodyRow.tsx +10 -3
- package/src/buttons/MRT_GrabHandleButton.tsx +12 -5
- package/src/head/MRT_TableHead.tsx +11 -3
- package/src/head/MRT_TableHeadCell.tsx +49 -20
- package/src/head/MRT_TableHeadRow.tsx +25 -20
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +6 -1
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +54 -27
- package/src/table/MRT_Table.tsx +17 -4
- package/src/table/MRT_TableContainer.tsx +1 -1
- package/src/table/MRT_TablePaper.tsx +21 -25
- package/dist/head/MRT_DraggableTableHeadCell.d.ts +0 -8
- package/src/head/MRT_DraggableTableHeadCell.tsx +0 -43
@@ -9,8 +9,8 @@ var React__default = _interopDefault(React);
|
|
9
9
|
var iconsMaterial = require('@mui/icons-material');
|
10
10
|
var reactTable = require('@tanstack/react-table');
|
11
11
|
var material = require('@mui/material');
|
12
|
-
var jsxRuntime = require('react/jsx-runtime');
|
13
12
|
var matchSorterUtils = require('@tanstack/match-sorter-utils');
|
13
|
+
var reactVirtual = require('react-virtual');
|
14
14
|
|
15
15
|
function _extends() {
|
16
16
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
@@ -369,2782 +369,6 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
369
369
|
}));
|
370
370
|
};
|
371
371
|
|
372
|
-
/**
|
373
|
-
* Create the React Context
|
374
|
-
*/ const DndContext = React.createContext({
|
375
|
-
dragDropManager: undefined
|
376
|
-
});
|
377
|
-
|
378
|
-
// Inlined version of the `symbol-observable` polyfill
|
379
|
-
var $$observable = (function () {
|
380
|
-
return typeof Symbol === 'function' && Symbol.observable || '@@observable';
|
381
|
-
})();
|
382
|
-
|
383
|
-
/**
|
384
|
-
* These are private action types reserved by Redux.
|
385
|
-
* For any unknown actions, you must return the current state.
|
386
|
-
* If the current state is undefined, you must return the initial state.
|
387
|
-
* Do not reference these action types directly in your code.
|
388
|
-
*/
|
389
|
-
var randomString = function randomString() {
|
390
|
-
return Math.random().toString(36).substring(7).split('').join('.');
|
391
|
-
};
|
392
|
-
|
393
|
-
var ActionTypes = {
|
394
|
-
INIT: "@@redux/INIT" + randomString(),
|
395
|
-
REPLACE: "@@redux/REPLACE" + randomString(),
|
396
|
-
PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
|
397
|
-
return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
|
398
|
-
}
|
399
|
-
};
|
400
|
-
|
401
|
-
/**
|
402
|
-
* @param {any} obj The object to inspect.
|
403
|
-
* @returns {boolean} True if the argument appears to be a plain object.
|
404
|
-
*/
|
405
|
-
function isPlainObject(obj) {
|
406
|
-
if (typeof obj !== 'object' || obj === null) return false;
|
407
|
-
var proto = obj;
|
408
|
-
|
409
|
-
while (Object.getPrototypeOf(proto) !== null) {
|
410
|
-
proto = Object.getPrototypeOf(proto);
|
411
|
-
}
|
412
|
-
|
413
|
-
return Object.getPrototypeOf(obj) === proto;
|
414
|
-
}
|
415
|
-
|
416
|
-
// Inlined / shortened version of `kindOf` from https://github.com/jonschlinkert/kind-of
|
417
|
-
function miniKindOf(val) {
|
418
|
-
if (val === void 0) return 'undefined';
|
419
|
-
if (val === null) return 'null';
|
420
|
-
var type = typeof val;
|
421
|
-
|
422
|
-
switch (type) {
|
423
|
-
case 'boolean':
|
424
|
-
case 'string':
|
425
|
-
case 'number':
|
426
|
-
case 'symbol':
|
427
|
-
case 'function':
|
428
|
-
{
|
429
|
-
return type;
|
430
|
-
}
|
431
|
-
}
|
432
|
-
|
433
|
-
if (Array.isArray(val)) return 'array';
|
434
|
-
if (isDate(val)) return 'date';
|
435
|
-
if (isError(val)) return 'error';
|
436
|
-
var constructorName = ctorName(val);
|
437
|
-
|
438
|
-
switch (constructorName) {
|
439
|
-
case 'Symbol':
|
440
|
-
case 'Promise':
|
441
|
-
case 'WeakMap':
|
442
|
-
case 'WeakSet':
|
443
|
-
case 'Map':
|
444
|
-
case 'Set':
|
445
|
-
return constructorName;
|
446
|
-
} // other
|
447
|
-
|
448
|
-
|
449
|
-
return type.slice(8, -1).toLowerCase().replace(/\s/g, '');
|
450
|
-
}
|
451
|
-
|
452
|
-
function ctorName(val) {
|
453
|
-
return typeof val.constructor === 'function' ? val.constructor.name : null;
|
454
|
-
}
|
455
|
-
|
456
|
-
function isError(val) {
|
457
|
-
return val instanceof Error || typeof val.message === 'string' && val.constructor && typeof val.constructor.stackTraceLimit === 'number';
|
458
|
-
}
|
459
|
-
|
460
|
-
function isDate(val) {
|
461
|
-
if (val instanceof Date) return true;
|
462
|
-
return typeof val.toDateString === 'function' && typeof val.getDate === 'function' && typeof val.setDate === 'function';
|
463
|
-
}
|
464
|
-
|
465
|
-
function kindOf(val) {
|
466
|
-
var typeOfVal = typeof val;
|
467
|
-
|
468
|
-
{
|
469
|
-
typeOfVal = miniKindOf(val);
|
470
|
-
}
|
471
|
-
|
472
|
-
return typeOfVal;
|
473
|
-
}
|
474
|
-
|
475
|
-
/**
|
476
|
-
* @deprecated
|
477
|
-
*
|
478
|
-
* **We recommend using the `configureStore` method
|
479
|
-
* of the `@reduxjs/toolkit` package**, which replaces `createStore`.
|
480
|
-
*
|
481
|
-
* Redux Toolkit is our recommended approach for writing Redux logic today,
|
482
|
-
* including store setup, reducers, data fetching, and more.
|
483
|
-
*
|
484
|
-
* **For more details, please read this Redux docs page:**
|
485
|
-
* **https://redux.js.org/introduction/why-rtk-is-redux-today**
|
486
|
-
*
|
487
|
-
* `configureStore` from Redux Toolkit is an improved version of `createStore` that
|
488
|
-
* simplifies setup and helps avoid common bugs.
|
489
|
-
*
|
490
|
-
* You should not be using the `redux` core package by itself today, except for learning purposes.
|
491
|
-
* The `createStore` method from the core `redux` package will not be removed, but we encourage
|
492
|
-
* all users to migrate to using Redux Toolkit for all Redux code.
|
493
|
-
*
|
494
|
-
* If you want to use `createStore` without this visual deprecation warning, use
|
495
|
-
* the `legacy_createStore` import instead:
|
496
|
-
*
|
497
|
-
* `import { legacy_createStore as createStore} from 'redux'`
|
498
|
-
*
|
499
|
-
*/
|
500
|
-
|
501
|
-
function createStore(reducer, preloadedState, enhancer) {
|
502
|
-
var _ref2;
|
503
|
-
|
504
|
-
if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {
|
505
|
-
throw new Error( 'It looks like you are passing several store enhancers to ' + 'createStore(). This is not supported. Instead, compose them ' + 'together to a single function. See https://redux.js.org/tutorials/fundamentals/part-4-store#creating-a-store-with-enhancers for an example.');
|
506
|
-
}
|
507
|
-
|
508
|
-
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
|
509
|
-
enhancer = preloadedState;
|
510
|
-
preloadedState = undefined;
|
511
|
-
}
|
512
|
-
|
513
|
-
if (typeof enhancer !== 'undefined') {
|
514
|
-
if (typeof enhancer !== 'function') {
|
515
|
-
throw new Error( "Expected the enhancer to be a function. Instead, received: '" + kindOf(enhancer) + "'");
|
516
|
-
}
|
517
|
-
|
518
|
-
return enhancer(createStore)(reducer, preloadedState);
|
519
|
-
}
|
520
|
-
|
521
|
-
if (typeof reducer !== 'function') {
|
522
|
-
throw new Error( "Expected the root reducer to be a function. Instead, received: '" + kindOf(reducer) + "'");
|
523
|
-
}
|
524
|
-
|
525
|
-
var currentReducer = reducer;
|
526
|
-
var currentState = preloadedState;
|
527
|
-
var currentListeners = [];
|
528
|
-
var nextListeners = currentListeners;
|
529
|
-
var isDispatching = false;
|
530
|
-
/**
|
531
|
-
* This makes a shallow copy of currentListeners so we can use
|
532
|
-
* nextListeners as a temporary list while dispatching.
|
533
|
-
*
|
534
|
-
* This prevents any bugs around consumers calling
|
535
|
-
* subscribe/unsubscribe in the middle of a dispatch.
|
536
|
-
*/
|
537
|
-
|
538
|
-
function ensureCanMutateNextListeners() {
|
539
|
-
if (nextListeners === currentListeners) {
|
540
|
-
nextListeners = currentListeners.slice();
|
541
|
-
}
|
542
|
-
}
|
543
|
-
/**
|
544
|
-
* Reads the state tree managed by the store.
|
545
|
-
*
|
546
|
-
* @returns {any} The current state tree of your application.
|
547
|
-
*/
|
548
|
-
|
549
|
-
|
550
|
-
function getState() {
|
551
|
-
if (isDispatching) {
|
552
|
-
throw new Error( 'You may not call store.getState() while the reducer is executing. ' + 'The reducer has already received the state as an argument. ' + 'Pass it down from the top reducer instead of reading it from the store.');
|
553
|
-
}
|
554
|
-
|
555
|
-
return currentState;
|
556
|
-
}
|
557
|
-
/**
|
558
|
-
* Adds a change listener. It will be called any time an action is dispatched,
|
559
|
-
* and some part of the state tree may potentially have changed. You may then
|
560
|
-
* call `getState()` to read the current state tree inside the callback.
|
561
|
-
*
|
562
|
-
* You may call `dispatch()` from a change listener, with the following
|
563
|
-
* caveats:
|
564
|
-
*
|
565
|
-
* 1. The subscriptions are snapshotted just before every `dispatch()` call.
|
566
|
-
* If you subscribe or unsubscribe while the listeners are being invoked, this
|
567
|
-
* will not have any effect on the `dispatch()` that is currently in progress.
|
568
|
-
* However, the next `dispatch()` call, whether nested or not, will use a more
|
569
|
-
* recent snapshot of the subscription list.
|
570
|
-
*
|
571
|
-
* 2. The listener should not expect to see all state changes, as the state
|
572
|
-
* might have been updated multiple times during a nested `dispatch()` before
|
573
|
-
* the listener is called. It is, however, guaranteed that all subscribers
|
574
|
-
* registered before the `dispatch()` started will be called with the latest
|
575
|
-
* state by the time it exits.
|
576
|
-
*
|
577
|
-
* @param {Function} listener A callback to be invoked on every dispatch.
|
578
|
-
* @returns {Function} A function to remove this change listener.
|
579
|
-
*/
|
580
|
-
|
581
|
-
|
582
|
-
function subscribe(listener) {
|
583
|
-
if (typeof listener !== 'function') {
|
584
|
-
throw new Error( "Expected the listener to be a function. Instead, received: '" + kindOf(listener) + "'");
|
585
|
-
}
|
586
|
-
|
587
|
-
if (isDispatching) {
|
588
|
-
throw new Error( 'You may not call store.subscribe() while the reducer is executing. ' + 'If you would like to be notified after the store has been updated, subscribe from a ' + 'component and invoke store.getState() in the callback to access the latest state. ' + 'See https://redux.js.org/api/store#subscribelistener for more details.');
|
589
|
-
}
|
590
|
-
|
591
|
-
var isSubscribed = true;
|
592
|
-
ensureCanMutateNextListeners();
|
593
|
-
nextListeners.push(listener);
|
594
|
-
return function unsubscribe() {
|
595
|
-
if (!isSubscribed) {
|
596
|
-
return;
|
597
|
-
}
|
598
|
-
|
599
|
-
if (isDispatching) {
|
600
|
-
throw new Error( 'You may not unsubscribe from a store listener while the reducer is executing. ' + 'See https://redux.js.org/api/store#subscribelistener for more details.');
|
601
|
-
}
|
602
|
-
|
603
|
-
isSubscribed = false;
|
604
|
-
ensureCanMutateNextListeners();
|
605
|
-
var index = nextListeners.indexOf(listener);
|
606
|
-
nextListeners.splice(index, 1);
|
607
|
-
currentListeners = null;
|
608
|
-
};
|
609
|
-
}
|
610
|
-
/**
|
611
|
-
* Dispatches an action. It is the only way to trigger a state change.
|
612
|
-
*
|
613
|
-
* The `reducer` function, used to create the store, will be called with the
|
614
|
-
* current state tree and the given `action`. Its return value will
|
615
|
-
* be considered the **next** state of the tree, and the change listeners
|
616
|
-
* will be notified.
|
617
|
-
*
|
618
|
-
* The base implementation only supports plain object actions. If you want to
|
619
|
-
* dispatch a Promise, an Observable, a thunk, or something else, you need to
|
620
|
-
* wrap your store creating function into the corresponding middleware. For
|
621
|
-
* example, see the documentation for the `redux-thunk` package. Even the
|
622
|
-
* middleware will eventually dispatch plain object actions using this method.
|
623
|
-
*
|
624
|
-
* @param {Object} action A plain object representing “what changed”. It is
|
625
|
-
* a good idea to keep actions serializable so you can record and replay user
|
626
|
-
* sessions, or use the time travelling `redux-devtools`. An action must have
|
627
|
-
* a `type` property which may not be `undefined`. It is a good idea to use
|
628
|
-
* string constants for action types.
|
629
|
-
*
|
630
|
-
* @returns {Object} For convenience, the same action object you dispatched.
|
631
|
-
*
|
632
|
-
* Note that, if you use a custom middleware, it may wrap `dispatch()` to
|
633
|
-
* return something else (for example, a Promise you can await).
|
634
|
-
*/
|
635
|
-
|
636
|
-
|
637
|
-
function dispatch(action) {
|
638
|
-
if (!isPlainObject(action)) {
|
639
|
-
throw new Error( "Actions must be plain objects. Instead, the actual type was: '" + kindOf(action) + "'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples.");
|
640
|
-
}
|
641
|
-
|
642
|
-
if (typeof action.type === 'undefined') {
|
643
|
-
throw new Error( 'Actions may not have an undefined "type" property. You may have misspelled an action type string constant.');
|
644
|
-
}
|
645
|
-
|
646
|
-
if (isDispatching) {
|
647
|
-
throw new Error( 'Reducers may not dispatch actions.');
|
648
|
-
}
|
649
|
-
|
650
|
-
try {
|
651
|
-
isDispatching = true;
|
652
|
-
currentState = currentReducer(currentState, action);
|
653
|
-
} finally {
|
654
|
-
isDispatching = false;
|
655
|
-
}
|
656
|
-
|
657
|
-
var listeners = currentListeners = nextListeners;
|
658
|
-
|
659
|
-
for (var i = 0; i < listeners.length; i++) {
|
660
|
-
var listener = listeners[i];
|
661
|
-
listener();
|
662
|
-
}
|
663
|
-
|
664
|
-
return action;
|
665
|
-
}
|
666
|
-
/**
|
667
|
-
* Replaces the reducer currently used by the store to calculate the state.
|
668
|
-
*
|
669
|
-
* You might need this if your app implements code splitting and you want to
|
670
|
-
* load some of the reducers dynamically. You might also need this if you
|
671
|
-
* implement a hot reloading mechanism for Redux.
|
672
|
-
*
|
673
|
-
* @param {Function} nextReducer The reducer for the store to use instead.
|
674
|
-
* @returns {void}
|
675
|
-
*/
|
676
|
-
|
677
|
-
|
678
|
-
function replaceReducer(nextReducer) {
|
679
|
-
if (typeof nextReducer !== 'function') {
|
680
|
-
throw new Error( "Expected the nextReducer to be a function. Instead, received: '" + kindOf(nextReducer));
|
681
|
-
}
|
682
|
-
|
683
|
-
currentReducer = nextReducer; // This action has a similiar effect to ActionTypes.INIT.
|
684
|
-
// Any reducers that existed in both the new and old rootReducer
|
685
|
-
// will receive the previous state. This effectively populates
|
686
|
-
// the new state tree with any relevant data from the old one.
|
687
|
-
|
688
|
-
dispatch({
|
689
|
-
type: ActionTypes.REPLACE
|
690
|
-
});
|
691
|
-
}
|
692
|
-
/**
|
693
|
-
* Interoperability point for observable/reactive libraries.
|
694
|
-
* @returns {observable} A minimal observable of state changes.
|
695
|
-
* For more information, see the observable proposal:
|
696
|
-
* https://github.com/tc39/proposal-observable
|
697
|
-
*/
|
698
|
-
|
699
|
-
|
700
|
-
function observable() {
|
701
|
-
var _ref;
|
702
|
-
|
703
|
-
var outerSubscribe = subscribe;
|
704
|
-
return _ref = {
|
705
|
-
/**
|
706
|
-
* The minimal observable subscription method.
|
707
|
-
* @param {Object} observer Any object that can be used as an observer.
|
708
|
-
* The observer object should have a `next` method.
|
709
|
-
* @returns {subscription} An object with an `unsubscribe` method that can
|
710
|
-
* be used to unsubscribe the observable from the store, and prevent further
|
711
|
-
* emission of values from the observable.
|
712
|
-
*/
|
713
|
-
subscribe: function subscribe(observer) {
|
714
|
-
if (typeof observer !== 'object' || observer === null) {
|
715
|
-
throw new Error( "Expected the observer to be an object. Instead, received: '" + kindOf(observer) + "'");
|
716
|
-
}
|
717
|
-
|
718
|
-
function observeState() {
|
719
|
-
if (observer.next) {
|
720
|
-
observer.next(getState());
|
721
|
-
}
|
722
|
-
}
|
723
|
-
|
724
|
-
observeState();
|
725
|
-
var unsubscribe = outerSubscribe(observeState);
|
726
|
-
return {
|
727
|
-
unsubscribe: unsubscribe
|
728
|
-
};
|
729
|
-
}
|
730
|
-
}, _ref[$$observable] = function () {
|
731
|
-
return this;
|
732
|
-
}, _ref;
|
733
|
-
} // When a store is created, an "INIT" action is dispatched so that every
|
734
|
-
// reducer returns their initial state. This effectively populates
|
735
|
-
// the initial state tree.
|
736
|
-
|
737
|
-
|
738
|
-
dispatch({
|
739
|
-
type: ActionTypes.INIT
|
740
|
-
});
|
741
|
-
return _ref2 = {
|
742
|
-
dispatch: dispatch,
|
743
|
-
subscribe: subscribe,
|
744
|
-
getState: getState,
|
745
|
-
replaceReducer: replaceReducer
|
746
|
-
}, _ref2[$$observable] = observable, _ref2;
|
747
|
-
}
|
748
|
-
|
749
|
-
/**
|
750
|
-
* Prints a warning in the console if it exists.
|
751
|
-
*
|
752
|
-
* @param {String} message The warning message.
|
753
|
-
* @returns {void}
|
754
|
-
*/
|
755
|
-
function warning(message) {
|
756
|
-
/* eslint-disable no-console */
|
757
|
-
if (typeof console !== 'undefined' && typeof console.error === 'function') {
|
758
|
-
console.error(message);
|
759
|
-
}
|
760
|
-
/* eslint-enable no-console */
|
761
|
-
|
762
|
-
|
763
|
-
try {
|
764
|
-
// This error was thrown as a convenience so that if you enable
|
765
|
-
// "break on all exceptions" in your console,
|
766
|
-
// it would pause the execution at this line.
|
767
|
-
throw new Error(message);
|
768
|
-
} catch (e) {} // eslint-disable-line no-empty
|
769
|
-
|
770
|
-
}
|
771
|
-
|
772
|
-
/*
|
773
|
-
* This is a dummy function to check if the function name has been altered by minification.
|
774
|
-
* If the function has been minified and NODE_ENV !== 'production', warn the user.
|
775
|
-
*/
|
776
|
-
|
777
|
-
function isCrushed() {}
|
778
|
-
|
779
|
-
if ( typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
|
780
|
-
warning('You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');
|
781
|
-
}
|
782
|
-
|
783
|
-
/**
|
784
|
-
* Use invariant() to assert state which your program assumes to be true.
|
785
|
-
*
|
786
|
-
* Provide sprintf-style format (only %s is supported) and arguments
|
787
|
-
* to provide information about what broke and what you were
|
788
|
-
* expecting.
|
789
|
-
*
|
790
|
-
* The invariant message will be stripped in production, but the invariant
|
791
|
-
* will remain to ensure logic does not differ in production.
|
792
|
-
*/ function invariant(condition, format, ...args) {
|
793
|
-
if (isProduction()) {
|
794
|
-
if (format === undefined) {
|
795
|
-
throw new Error('invariant requires an error message argument');
|
796
|
-
}
|
797
|
-
}
|
798
|
-
if (!condition) {
|
799
|
-
let error;
|
800
|
-
if (format === undefined) {
|
801
|
-
error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
|
802
|
-
} else {
|
803
|
-
let argIndex = 0;
|
804
|
-
error = new Error(format.replace(/%s/g, function() {
|
805
|
-
return args[argIndex++];
|
806
|
-
}));
|
807
|
-
error.name = 'Invariant Violation';
|
808
|
-
}
|
809
|
-
error.framesToPop = 1 // we don't care about invariant's own frame
|
810
|
-
;
|
811
|
-
throw error;
|
812
|
-
}
|
813
|
-
}
|
814
|
-
function isProduction() {
|
815
|
-
return typeof process !== 'undefined' && process.env['NODE_ENV'] === 'production';
|
816
|
-
}
|
817
|
-
|
818
|
-
// cheap lodash replacements
|
819
|
-
/**
|
820
|
-
* drop-in replacement for _.get
|
821
|
-
* @param obj
|
822
|
-
* @param path
|
823
|
-
* @param defaultValue
|
824
|
-
*/ function get(obj, path, defaultValue) {
|
825
|
-
return path.split('.').reduce((a, c)=>a && a[c] ? a[c] : defaultValue || null
|
826
|
-
, obj);
|
827
|
-
}
|
828
|
-
/**
|
829
|
-
* drop-in replacement for _.without
|
830
|
-
*/ function without(items, item) {
|
831
|
-
return items.filter((i)=>i !== item
|
832
|
-
);
|
833
|
-
}
|
834
|
-
/**
|
835
|
-
* drop-in replacement for _.isString
|
836
|
-
* @param input
|
837
|
-
*/ function isObject(input) {
|
838
|
-
return typeof input === 'object';
|
839
|
-
}
|
840
|
-
/**
|
841
|
-
* replacement for _.xor
|
842
|
-
* @param itemsA
|
843
|
-
* @param itemsB
|
844
|
-
*/ function xor(itemsA, itemsB) {
|
845
|
-
const map = new Map();
|
846
|
-
const insertItem = (item)=>{
|
847
|
-
map.set(item, map.has(item) ? map.get(item) + 1 : 1);
|
848
|
-
};
|
849
|
-
itemsA.forEach(insertItem);
|
850
|
-
itemsB.forEach(insertItem);
|
851
|
-
const result = [];
|
852
|
-
map.forEach((count, key)=>{
|
853
|
-
if (count === 1) {
|
854
|
-
result.push(key);
|
855
|
-
}
|
856
|
-
});
|
857
|
-
return result;
|
858
|
-
}
|
859
|
-
/**
|
860
|
-
* replacement for _.intersection
|
861
|
-
* @param itemsA
|
862
|
-
* @param itemsB
|
863
|
-
*/ function intersection(itemsA, itemsB) {
|
864
|
-
return itemsA.filter((t)=>itemsB.indexOf(t) > -1
|
865
|
-
);
|
866
|
-
}
|
867
|
-
|
868
|
-
const INIT_COORDS = 'dnd-core/INIT_COORDS';
|
869
|
-
const BEGIN_DRAG = 'dnd-core/BEGIN_DRAG';
|
870
|
-
const PUBLISH_DRAG_SOURCE = 'dnd-core/PUBLISH_DRAG_SOURCE';
|
871
|
-
const HOVER = 'dnd-core/HOVER';
|
872
|
-
const DROP = 'dnd-core/DROP';
|
873
|
-
const END_DRAG = 'dnd-core/END_DRAG';
|
874
|
-
|
875
|
-
function setClientOffset(clientOffset, sourceClientOffset) {
|
876
|
-
return {
|
877
|
-
type: INIT_COORDS,
|
878
|
-
payload: {
|
879
|
-
sourceClientOffset: sourceClientOffset || null,
|
880
|
-
clientOffset: clientOffset || null
|
881
|
-
}
|
882
|
-
};
|
883
|
-
}
|
884
|
-
|
885
|
-
const ResetCoordinatesAction = {
|
886
|
-
type: INIT_COORDS,
|
887
|
-
payload: {
|
888
|
-
clientOffset: null,
|
889
|
-
sourceClientOffset: null
|
890
|
-
}
|
891
|
-
};
|
892
|
-
function createBeginDrag(manager) {
|
893
|
-
return function beginDrag(sourceIds = [], options = {
|
894
|
-
publishSource: true
|
895
|
-
}) {
|
896
|
-
const { publishSource =true , clientOffset , getSourceClientOffset , } = options;
|
897
|
-
const monitor = manager.getMonitor();
|
898
|
-
const registry = manager.getRegistry();
|
899
|
-
// Initialize the coordinates using the client offset
|
900
|
-
manager.dispatch(setClientOffset(clientOffset));
|
901
|
-
verifyInvariants(sourceIds, monitor, registry);
|
902
|
-
// Get the draggable source
|
903
|
-
const sourceId = getDraggableSource(sourceIds, monitor);
|
904
|
-
if (sourceId == null) {
|
905
|
-
manager.dispatch(ResetCoordinatesAction);
|
906
|
-
return;
|
907
|
-
}
|
908
|
-
// Get the source client offset
|
909
|
-
let sourceClientOffset = null;
|
910
|
-
if (clientOffset) {
|
911
|
-
if (!getSourceClientOffset) {
|
912
|
-
throw new Error('getSourceClientOffset must be defined');
|
913
|
-
}
|
914
|
-
verifyGetSourceClientOffsetIsFunction(getSourceClientOffset);
|
915
|
-
sourceClientOffset = getSourceClientOffset(sourceId);
|
916
|
-
}
|
917
|
-
// Initialize the full coordinates
|
918
|
-
manager.dispatch(setClientOffset(clientOffset, sourceClientOffset));
|
919
|
-
const source = registry.getSource(sourceId);
|
920
|
-
const item = source.beginDrag(monitor, sourceId);
|
921
|
-
// If source.beginDrag returns null, this is an indicator to cancel the drag
|
922
|
-
if (item == null) {
|
923
|
-
return undefined;
|
924
|
-
}
|
925
|
-
verifyItemIsObject(item);
|
926
|
-
registry.pinSource(sourceId);
|
927
|
-
const itemType = registry.getSourceType(sourceId);
|
928
|
-
return {
|
929
|
-
type: BEGIN_DRAG,
|
930
|
-
payload: {
|
931
|
-
itemType,
|
932
|
-
item,
|
933
|
-
sourceId,
|
934
|
-
clientOffset: clientOffset || null,
|
935
|
-
sourceClientOffset: sourceClientOffset || null,
|
936
|
-
isSourcePublic: !!publishSource
|
937
|
-
}
|
938
|
-
};
|
939
|
-
};
|
940
|
-
}
|
941
|
-
function verifyInvariants(sourceIds, monitor, registry) {
|
942
|
-
invariant(!monitor.isDragging(), 'Cannot call beginDrag while dragging.');
|
943
|
-
sourceIds.forEach(function(sourceId) {
|
944
|
-
invariant(registry.getSource(sourceId), 'Expected sourceIds to be registered.');
|
945
|
-
});
|
946
|
-
}
|
947
|
-
function verifyGetSourceClientOffsetIsFunction(getSourceClientOffset) {
|
948
|
-
invariant(typeof getSourceClientOffset === 'function', 'When clientOffset is provided, getSourceClientOffset must be a function.');
|
949
|
-
}
|
950
|
-
function verifyItemIsObject(item) {
|
951
|
-
invariant(isObject(item), 'Item must be an object.');
|
952
|
-
}
|
953
|
-
function getDraggableSource(sourceIds, monitor) {
|
954
|
-
let sourceId = null;
|
955
|
-
for(let i = sourceIds.length - 1; i >= 0; i--){
|
956
|
-
if (monitor.canDragSource(sourceIds[i])) {
|
957
|
-
sourceId = sourceIds[i];
|
958
|
-
break;
|
959
|
-
}
|
960
|
-
}
|
961
|
-
return sourceId;
|
962
|
-
}
|
963
|
-
|
964
|
-
function _defineProperty(obj, key, value) {
|
965
|
-
if (key in obj) {
|
966
|
-
Object.defineProperty(obj, key, {
|
967
|
-
value: value,
|
968
|
-
enumerable: true,
|
969
|
-
configurable: true,
|
970
|
-
writable: true
|
971
|
-
});
|
972
|
-
} else {
|
973
|
-
obj[key] = value;
|
974
|
-
}
|
975
|
-
return obj;
|
976
|
-
}
|
977
|
-
function _objectSpread(target) {
|
978
|
-
for(var i = 1; i < arguments.length; i++){
|
979
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
980
|
-
var ownKeys = Object.keys(source);
|
981
|
-
if (typeof Object.getOwnPropertySymbols === 'function') {
|
982
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
983
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
984
|
-
}));
|
985
|
-
}
|
986
|
-
ownKeys.forEach(function(key) {
|
987
|
-
_defineProperty(target, key, source[key]);
|
988
|
-
});
|
989
|
-
}
|
990
|
-
return target;
|
991
|
-
}
|
992
|
-
function createDrop(manager) {
|
993
|
-
return function drop(options = {}) {
|
994
|
-
const monitor = manager.getMonitor();
|
995
|
-
const registry = manager.getRegistry();
|
996
|
-
verifyInvariants$1(monitor);
|
997
|
-
const targetIds = getDroppableTargets(monitor);
|
998
|
-
// Multiple actions are dispatched here, which is why this doesn't return an action
|
999
|
-
targetIds.forEach((targetId, index)=>{
|
1000
|
-
const dropResult = determineDropResult(targetId, index, registry, monitor);
|
1001
|
-
const action = {
|
1002
|
-
type: DROP,
|
1003
|
-
payload: {
|
1004
|
-
dropResult: _objectSpread({}, options, dropResult)
|
1005
|
-
}
|
1006
|
-
};
|
1007
|
-
manager.dispatch(action);
|
1008
|
-
});
|
1009
|
-
};
|
1010
|
-
}
|
1011
|
-
function verifyInvariants$1(monitor) {
|
1012
|
-
invariant(monitor.isDragging(), 'Cannot call drop while not dragging.');
|
1013
|
-
invariant(!monitor.didDrop(), 'Cannot call drop twice during one drag operation.');
|
1014
|
-
}
|
1015
|
-
function determineDropResult(targetId, index, registry, monitor) {
|
1016
|
-
const target = registry.getTarget(targetId);
|
1017
|
-
let dropResult = target ? target.drop(monitor, targetId) : undefined;
|
1018
|
-
verifyDropResultType(dropResult);
|
1019
|
-
if (typeof dropResult === 'undefined') {
|
1020
|
-
dropResult = index === 0 ? {} : monitor.getDropResult();
|
1021
|
-
}
|
1022
|
-
return dropResult;
|
1023
|
-
}
|
1024
|
-
function verifyDropResultType(dropResult) {
|
1025
|
-
invariant(typeof dropResult === 'undefined' || isObject(dropResult), 'Drop result must either be an object or undefined.');
|
1026
|
-
}
|
1027
|
-
function getDroppableTargets(monitor) {
|
1028
|
-
const targetIds = monitor.getTargetIds().filter(monitor.canDropOnTarget, monitor);
|
1029
|
-
targetIds.reverse();
|
1030
|
-
return targetIds;
|
1031
|
-
}
|
1032
|
-
|
1033
|
-
function createEndDrag(manager) {
|
1034
|
-
return function endDrag() {
|
1035
|
-
const monitor = manager.getMonitor();
|
1036
|
-
const registry = manager.getRegistry();
|
1037
|
-
verifyIsDragging(monitor);
|
1038
|
-
const sourceId = monitor.getSourceId();
|
1039
|
-
if (sourceId != null) {
|
1040
|
-
const source = registry.getSource(sourceId, true);
|
1041
|
-
source.endDrag(monitor, sourceId);
|
1042
|
-
registry.unpinSource();
|
1043
|
-
}
|
1044
|
-
return {
|
1045
|
-
type: END_DRAG
|
1046
|
-
};
|
1047
|
-
};
|
1048
|
-
}
|
1049
|
-
function verifyIsDragging(monitor) {
|
1050
|
-
invariant(monitor.isDragging(), 'Cannot call endDrag while not dragging.');
|
1051
|
-
}
|
1052
|
-
|
1053
|
-
function matchesType(targetType, draggedItemType) {
|
1054
|
-
if (draggedItemType === null) {
|
1055
|
-
return targetType === null;
|
1056
|
-
}
|
1057
|
-
return Array.isArray(targetType) ? targetType.some((t)=>t === draggedItemType
|
1058
|
-
) : targetType === draggedItemType;
|
1059
|
-
}
|
1060
|
-
|
1061
|
-
function createHover(manager) {
|
1062
|
-
return function hover(targetIdsArg, { clientOffset } = {}) {
|
1063
|
-
verifyTargetIdsIsArray(targetIdsArg);
|
1064
|
-
const targetIds = targetIdsArg.slice(0);
|
1065
|
-
const monitor = manager.getMonitor();
|
1066
|
-
const registry = manager.getRegistry();
|
1067
|
-
const draggedItemType = monitor.getItemType();
|
1068
|
-
removeNonMatchingTargetIds(targetIds, registry, draggedItemType);
|
1069
|
-
checkInvariants(targetIds, monitor, registry);
|
1070
|
-
hoverAllTargets(targetIds, monitor, registry);
|
1071
|
-
return {
|
1072
|
-
type: HOVER,
|
1073
|
-
payload: {
|
1074
|
-
targetIds,
|
1075
|
-
clientOffset: clientOffset || null
|
1076
|
-
}
|
1077
|
-
};
|
1078
|
-
};
|
1079
|
-
}
|
1080
|
-
function verifyTargetIdsIsArray(targetIdsArg) {
|
1081
|
-
invariant(Array.isArray(targetIdsArg), 'Expected targetIds to be an array.');
|
1082
|
-
}
|
1083
|
-
function checkInvariants(targetIds, monitor, registry) {
|
1084
|
-
invariant(monitor.isDragging(), 'Cannot call hover while not dragging.');
|
1085
|
-
invariant(!monitor.didDrop(), 'Cannot call hover after drop.');
|
1086
|
-
for(let i = 0; i < targetIds.length; i++){
|
1087
|
-
const targetId = targetIds[i];
|
1088
|
-
invariant(targetIds.lastIndexOf(targetId) === i, 'Expected targetIds to be unique in the passed array.');
|
1089
|
-
const target = registry.getTarget(targetId);
|
1090
|
-
invariant(target, 'Expected targetIds to be registered.');
|
1091
|
-
}
|
1092
|
-
}
|
1093
|
-
function removeNonMatchingTargetIds(targetIds, registry, draggedItemType) {
|
1094
|
-
// Remove those targetIds that don't match the targetType. This
|
1095
|
-
// fixes shallow isOver which would only be non-shallow because of
|
1096
|
-
// non-matching targets.
|
1097
|
-
for(let i = targetIds.length - 1; i >= 0; i--){
|
1098
|
-
const targetId = targetIds[i];
|
1099
|
-
const targetType = registry.getTargetType(targetId);
|
1100
|
-
if (!matchesType(targetType, draggedItemType)) {
|
1101
|
-
targetIds.splice(i, 1);
|
1102
|
-
}
|
1103
|
-
}
|
1104
|
-
}
|
1105
|
-
function hoverAllTargets(targetIds, monitor, registry) {
|
1106
|
-
// Finally call hover on all matching targets.
|
1107
|
-
targetIds.forEach(function(targetId) {
|
1108
|
-
const target = registry.getTarget(targetId);
|
1109
|
-
target.hover(monitor, targetId);
|
1110
|
-
});
|
1111
|
-
}
|
1112
|
-
|
1113
|
-
function createPublishDragSource(manager) {
|
1114
|
-
return function publishDragSource() {
|
1115
|
-
const monitor = manager.getMonitor();
|
1116
|
-
if (monitor.isDragging()) {
|
1117
|
-
return {
|
1118
|
-
type: PUBLISH_DRAG_SOURCE
|
1119
|
-
};
|
1120
|
-
}
|
1121
|
-
return;
|
1122
|
-
};
|
1123
|
-
}
|
1124
|
-
|
1125
|
-
function createDragDropActions(manager) {
|
1126
|
-
return {
|
1127
|
-
beginDrag: createBeginDrag(manager),
|
1128
|
-
publishDragSource: createPublishDragSource(manager),
|
1129
|
-
hover: createHover(manager),
|
1130
|
-
drop: createDrop(manager),
|
1131
|
-
endDrag: createEndDrag(manager)
|
1132
|
-
};
|
1133
|
-
}
|
1134
|
-
|
1135
|
-
class DragDropManagerImpl {
|
1136
|
-
receiveBackend(backend) {
|
1137
|
-
this.backend = backend;
|
1138
|
-
}
|
1139
|
-
getMonitor() {
|
1140
|
-
return this.monitor;
|
1141
|
-
}
|
1142
|
-
getBackend() {
|
1143
|
-
return this.backend;
|
1144
|
-
}
|
1145
|
-
getRegistry() {
|
1146
|
-
return this.monitor.registry;
|
1147
|
-
}
|
1148
|
-
getActions() {
|
1149
|
-
/* eslint-disable-next-line @typescript-eslint/no-this-alias */ const manager = this;
|
1150
|
-
const { dispatch } = this.store;
|
1151
|
-
function bindActionCreator(actionCreator) {
|
1152
|
-
return (...args)=>{
|
1153
|
-
const action = actionCreator.apply(manager, args);
|
1154
|
-
if (typeof action !== 'undefined') {
|
1155
|
-
dispatch(action);
|
1156
|
-
}
|
1157
|
-
};
|
1158
|
-
}
|
1159
|
-
const actions = createDragDropActions(this);
|
1160
|
-
return Object.keys(actions).reduce((boundActions, key)=>{
|
1161
|
-
const action = actions[key];
|
1162
|
-
boundActions[key] = bindActionCreator(action);
|
1163
|
-
return boundActions;
|
1164
|
-
}, {});
|
1165
|
-
}
|
1166
|
-
dispatch(action) {
|
1167
|
-
this.store.dispatch(action);
|
1168
|
-
}
|
1169
|
-
constructor(store, monitor){
|
1170
|
-
this.isSetUp = false;
|
1171
|
-
this.handleRefCountChange = ()=>{
|
1172
|
-
const shouldSetUp = this.store.getState().refCount > 0;
|
1173
|
-
if (this.backend) {
|
1174
|
-
if (shouldSetUp && !this.isSetUp) {
|
1175
|
-
this.backend.setup();
|
1176
|
-
this.isSetUp = true;
|
1177
|
-
} else if (!shouldSetUp && this.isSetUp) {
|
1178
|
-
this.backend.teardown();
|
1179
|
-
this.isSetUp = false;
|
1180
|
-
}
|
1181
|
-
}
|
1182
|
-
};
|
1183
|
-
this.store = store;
|
1184
|
-
this.monitor = monitor;
|
1185
|
-
store.subscribe(this.handleRefCountChange);
|
1186
|
-
}
|
1187
|
-
}
|
1188
|
-
|
1189
|
-
/**
|
1190
|
-
* Coordinate addition
|
1191
|
-
* @param a The first coordinate
|
1192
|
-
* @param b The second coordinate
|
1193
|
-
*/ function add(a, b) {
|
1194
|
-
return {
|
1195
|
-
x: a.x + b.x,
|
1196
|
-
y: a.y + b.y
|
1197
|
-
};
|
1198
|
-
}
|
1199
|
-
/**
|
1200
|
-
* Coordinate subtraction
|
1201
|
-
* @param a The first coordinate
|
1202
|
-
* @param b The second coordinate
|
1203
|
-
*/ function subtract(a, b) {
|
1204
|
-
return {
|
1205
|
-
x: a.x - b.x,
|
1206
|
-
y: a.y - b.y
|
1207
|
-
};
|
1208
|
-
}
|
1209
|
-
/**
|
1210
|
-
* Returns the cartesian distance of the drag source component's position, based on its position
|
1211
|
-
* at the time when the current drag operation has started, and the movement difference.
|
1212
|
-
*
|
1213
|
-
* Returns null if no item is being dragged.
|
1214
|
-
*
|
1215
|
-
* @param state The offset state to compute from
|
1216
|
-
*/ function getSourceClientOffset(state) {
|
1217
|
-
const { clientOffset , initialClientOffset , initialSourceClientOffset } = state;
|
1218
|
-
if (!clientOffset || !initialClientOffset || !initialSourceClientOffset) {
|
1219
|
-
return null;
|
1220
|
-
}
|
1221
|
-
return subtract(add(clientOffset, initialSourceClientOffset), initialClientOffset);
|
1222
|
-
}
|
1223
|
-
/**
|
1224
|
-
* Determines the x,y offset between the client offset and the initial client offset
|
1225
|
-
*
|
1226
|
-
* @param state The offset state to compute from
|
1227
|
-
*/ function getDifferenceFromInitialOffset(state) {
|
1228
|
-
const { clientOffset , initialClientOffset } = state;
|
1229
|
-
if (!clientOffset || !initialClientOffset) {
|
1230
|
-
return null;
|
1231
|
-
}
|
1232
|
-
return subtract(clientOffset, initialClientOffset);
|
1233
|
-
}
|
1234
|
-
|
1235
|
-
const NONE = [];
|
1236
|
-
const ALL = [];
|
1237
|
-
NONE.__IS_NONE__ = true;
|
1238
|
-
ALL.__IS_ALL__ = true;
|
1239
|
-
/**
|
1240
|
-
* Determines if the given handler IDs are dirty or not.
|
1241
|
-
*
|
1242
|
-
* @param dirtyIds The set of dirty handler ids
|
1243
|
-
* @param handlerIds The set of handler ids to check
|
1244
|
-
*/ function areDirty(dirtyIds, handlerIds) {
|
1245
|
-
if (dirtyIds === NONE) {
|
1246
|
-
return false;
|
1247
|
-
}
|
1248
|
-
if (dirtyIds === ALL || typeof handlerIds === 'undefined') {
|
1249
|
-
return true;
|
1250
|
-
}
|
1251
|
-
const commonIds = intersection(handlerIds, dirtyIds);
|
1252
|
-
return commonIds.length > 0;
|
1253
|
-
}
|
1254
|
-
|
1255
|
-
class DragDropMonitorImpl {
|
1256
|
-
subscribeToStateChange(listener, options = {}) {
|
1257
|
-
const { handlerIds } = options;
|
1258
|
-
invariant(typeof listener === 'function', 'listener must be a function.');
|
1259
|
-
invariant(typeof handlerIds === 'undefined' || Array.isArray(handlerIds), 'handlerIds, when specified, must be an array of strings.');
|
1260
|
-
let prevStateId = this.store.getState().stateId;
|
1261
|
-
const handleChange = ()=>{
|
1262
|
-
const state = this.store.getState();
|
1263
|
-
const currentStateId = state.stateId;
|
1264
|
-
try {
|
1265
|
-
const canSkipListener = currentStateId === prevStateId || currentStateId === prevStateId + 1 && !areDirty(state.dirtyHandlerIds, handlerIds);
|
1266
|
-
if (!canSkipListener) {
|
1267
|
-
listener();
|
1268
|
-
}
|
1269
|
-
} finally{
|
1270
|
-
prevStateId = currentStateId;
|
1271
|
-
}
|
1272
|
-
};
|
1273
|
-
return this.store.subscribe(handleChange);
|
1274
|
-
}
|
1275
|
-
subscribeToOffsetChange(listener) {
|
1276
|
-
invariant(typeof listener === 'function', 'listener must be a function.');
|
1277
|
-
let previousState = this.store.getState().dragOffset;
|
1278
|
-
const handleChange = ()=>{
|
1279
|
-
const nextState = this.store.getState().dragOffset;
|
1280
|
-
if (nextState === previousState) {
|
1281
|
-
return;
|
1282
|
-
}
|
1283
|
-
previousState = nextState;
|
1284
|
-
listener();
|
1285
|
-
};
|
1286
|
-
return this.store.subscribe(handleChange);
|
1287
|
-
}
|
1288
|
-
canDragSource(sourceId) {
|
1289
|
-
if (!sourceId) {
|
1290
|
-
return false;
|
1291
|
-
}
|
1292
|
-
const source = this.registry.getSource(sourceId);
|
1293
|
-
invariant(source, `Expected to find a valid source. sourceId=${sourceId}`);
|
1294
|
-
if (this.isDragging()) {
|
1295
|
-
return false;
|
1296
|
-
}
|
1297
|
-
return source.canDrag(this, sourceId);
|
1298
|
-
}
|
1299
|
-
canDropOnTarget(targetId) {
|
1300
|
-
// undefined on initial render
|
1301
|
-
if (!targetId) {
|
1302
|
-
return false;
|
1303
|
-
}
|
1304
|
-
const target = this.registry.getTarget(targetId);
|
1305
|
-
invariant(target, `Expected to find a valid target. targetId=${targetId}`);
|
1306
|
-
if (!this.isDragging() || this.didDrop()) {
|
1307
|
-
return false;
|
1308
|
-
}
|
1309
|
-
const targetType = this.registry.getTargetType(targetId);
|
1310
|
-
const draggedItemType = this.getItemType();
|
1311
|
-
return matchesType(targetType, draggedItemType) && target.canDrop(this, targetId);
|
1312
|
-
}
|
1313
|
-
isDragging() {
|
1314
|
-
return Boolean(this.getItemType());
|
1315
|
-
}
|
1316
|
-
isDraggingSource(sourceId) {
|
1317
|
-
// undefined on initial render
|
1318
|
-
if (!sourceId) {
|
1319
|
-
return false;
|
1320
|
-
}
|
1321
|
-
const source = this.registry.getSource(sourceId, true);
|
1322
|
-
invariant(source, `Expected to find a valid source. sourceId=${sourceId}`);
|
1323
|
-
if (!this.isDragging() || !this.isSourcePublic()) {
|
1324
|
-
return false;
|
1325
|
-
}
|
1326
|
-
const sourceType = this.registry.getSourceType(sourceId);
|
1327
|
-
const draggedItemType = this.getItemType();
|
1328
|
-
if (sourceType !== draggedItemType) {
|
1329
|
-
return false;
|
1330
|
-
}
|
1331
|
-
return source.isDragging(this, sourceId);
|
1332
|
-
}
|
1333
|
-
isOverTarget(targetId, options = {
|
1334
|
-
shallow: false
|
1335
|
-
}) {
|
1336
|
-
// undefined on initial render
|
1337
|
-
if (!targetId) {
|
1338
|
-
return false;
|
1339
|
-
}
|
1340
|
-
const { shallow } = options;
|
1341
|
-
if (!this.isDragging()) {
|
1342
|
-
return false;
|
1343
|
-
}
|
1344
|
-
const targetType = this.registry.getTargetType(targetId);
|
1345
|
-
const draggedItemType = this.getItemType();
|
1346
|
-
if (draggedItemType && !matchesType(targetType, draggedItemType)) {
|
1347
|
-
return false;
|
1348
|
-
}
|
1349
|
-
const targetIds = this.getTargetIds();
|
1350
|
-
if (!targetIds.length) {
|
1351
|
-
return false;
|
1352
|
-
}
|
1353
|
-
const index = targetIds.indexOf(targetId);
|
1354
|
-
if (shallow) {
|
1355
|
-
return index === targetIds.length - 1;
|
1356
|
-
} else {
|
1357
|
-
return index > -1;
|
1358
|
-
}
|
1359
|
-
}
|
1360
|
-
getItemType() {
|
1361
|
-
return this.store.getState().dragOperation.itemType;
|
1362
|
-
}
|
1363
|
-
getItem() {
|
1364
|
-
return this.store.getState().dragOperation.item;
|
1365
|
-
}
|
1366
|
-
getSourceId() {
|
1367
|
-
return this.store.getState().dragOperation.sourceId;
|
1368
|
-
}
|
1369
|
-
getTargetIds() {
|
1370
|
-
return this.store.getState().dragOperation.targetIds;
|
1371
|
-
}
|
1372
|
-
getDropResult() {
|
1373
|
-
return this.store.getState().dragOperation.dropResult;
|
1374
|
-
}
|
1375
|
-
didDrop() {
|
1376
|
-
return this.store.getState().dragOperation.didDrop;
|
1377
|
-
}
|
1378
|
-
isSourcePublic() {
|
1379
|
-
return Boolean(this.store.getState().dragOperation.isSourcePublic);
|
1380
|
-
}
|
1381
|
-
getInitialClientOffset() {
|
1382
|
-
return this.store.getState().dragOffset.initialClientOffset;
|
1383
|
-
}
|
1384
|
-
getInitialSourceClientOffset() {
|
1385
|
-
return this.store.getState().dragOffset.initialSourceClientOffset;
|
1386
|
-
}
|
1387
|
-
getClientOffset() {
|
1388
|
-
return this.store.getState().dragOffset.clientOffset;
|
1389
|
-
}
|
1390
|
-
getSourceClientOffset() {
|
1391
|
-
return getSourceClientOffset(this.store.getState().dragOffset);
|
1392
|
-
}
|
1393
|
-
getDifferenceFromInitialOffset() {
|
1394
|
-
return getDifferenceFromInitialOffset(this.store.getState().dragOffset);
|
1395
|
-
}
|
1396
|
-
constructor(store, registry){
|
1397
|
-
this.store = store;
|
1398
|
-
this.registry = registry;
|
1399
|
-
}
|
1400
|
-
}
|
1401
|
-
|
1402
|
-
// Safari 6 and 6.1 for desktop, iPad, and iPhone are the only browsers that
|
1403
|
-
// have WebKitMutationObserver but not un-prefixed MutationObserver.
|
1404
|
-
// Must use `global` or `self` instead of `window` to work in both frames and web
|
1405
|
-
// workers. `global` is a provision of Browserify, Mr, Mrs, or Mop.
|
1406
|
-
/* globals self */ const scope = typeof global !== 'undefined' ? global : self;
|
1407
|
-
const BrowserMutationObserver = scope.MutationObserver || scope.WebKitMutationObserver;
|
1408
|
-
function makeRequestCallFromTimer(callback) {
|
1409
|
-
return function requestCall() {
|
1410
|
-
// We dispatch a timeout with a specified delay of 0 for engines that
|
1411
|
-
// can reliably accommodate that request. This will usually be snapped
|
1412
|
-
// to a 4 milisecond delay, but once we're flushing, there's no delay
|
1413
|
-
// between events.
|
1414
|
-
const timeoutHandle = setTimeout(handleTimer, 0);
|
1415
|
-
// However, since this timer gets frequently dropped in Firefox
|
1416
|
-
// workers, we enlist an interval handle that will try to fire
|
1417
|
-
// an event 20 times per second until it succeeds.
|
1418
|
-
const intervalHandle = setInterval(handleTimer, 50);
|
1419
|
-
function handleTimer() {
|
1420
|
-
// Whichever timer succeeds will cancel both timers and
|
1421
|
-
// execute the callback.
|
1422
|
-
clearTimeout(timeoutHandle);
|
1423
|
-
clearInterval(intervalHandle);
|
1424
|
-
callback();
|
1425
|
-
}
|
1426
|
-
};
|
1427
|
-
}
|
1428
|
-
// To request a high priority event, we induce a mutation observer by toggling
|
1429
|
-
// the text of a text node between "1" and "-1".
|
1430
|
-
function makeRequestCallFromMutationObserver(callback) {
|
1431
|
-
let toggle = 1;
|
1432
|
-
const observer = new BrowserMutationObserver(callback);
|
1433
|
-
const node = document.createTextNode('');
|
1434
|
-
observer.observe(node, {
|
1435
|
-
characterData: true
|
1436
|
-
});
|
1437
|
-
return function requestCall() {
|
1438
|
-
toggle = -toggle;
|
1439
|
-
node.data = toggle;
|
1440
|
-
};
|
1441
|
-
}
|
1442
|
-
const makeRequestCall = typeof BrowserMutationObserver === 'function' ? // reliably everywhere they are implemented.
|
1443
|
-
// They are implemented in all modern browsers.
|
1444
|
-
//
|
1445
|
-
// - Android 4-4.3
|
1446
|
-
// - Chrome 26-34
|
1447
|
-
// - Firefox 14-29
|
1448
|
-
// - Internet Explorer 11
|
1449
|
-
// - iPad Safari 6-7.1
|
1450
|
-
// - iPhone Safari 7-7.1
|
1451
|
-
// - Safari 6-7
|
1452
|
-
makeRequestCallFromMutationObserver : // task queue, are implemented in Internet Explorer 10, Safari 5.0-1, and Opera
|
1453
|
-
// 11-12, and in web workers in many engines.
|
1454
|
-
// Although message channels yield to any queued rendering and IO tasks, they
|
1455
|
-
// would be better than imposing the 4ms delay of timers.
|
1456
|
-
// However, they do not work reliably in Internet Explorer or Safari.
|
1457
|
-
// Internet Explorer 10 is the only browser that has setImmediate but does
|
1458
|
-
// not have MutationObservers.
|
1459
|
-
// Although setImmediate yields to the browser's renderer, it would be
|
1460
|
-
// preferrable to falling back to setTimeout since it does not have
|
1461
|
-
// the minimum 4ms penalty.
|
1462
|
-
// Unfortunately there appears to be a bug in Internet Explorer 10 Mobile (and
|
1463
|
-
// Desktop to a lesser extent) that renders both setImmediate and
|
1464
|
-
// MessageChannel useless for the purposes of ASAP.
|
1465
|
-
// https://github.com/kriskowal/q/issues/396
|
1466
|
-
// Timers are implemented universally.
|
1467
|
-
// We fall back to timers in workers in most engines, and in foreground
|
1468
|
-
// contexts in the following browsers.
|
1469
|
-
// However, note that even this simple case requires nuances to operate in a
|
1470
|
-
// broad spectrum of browsers.
|
1471
|
-
//
|
1472
|
-
// - Firefox 3-13
|
1473
|
-
// - Internet Explorer 6-9
|
1474
|
-
// - iPad Safari 4.3
|
1475
|
-
// - Lynx 2.8.7
|
1476
|
-
makeRequestCallFromTimer;
|
1477
|
-
|
1478
|
-
class AsapQueue {
|
1479
|
-
// Use the fastest means possible to execute a task in its own turn, with
|
1480
|
-
// priority over other events including IO, animation, reflow, and redraw
|
1481
|
-
// events in browsers.
|
1482
|
-
//
|
1483
|
-
// An exception thrown by a task will permanently interrupt the processing of
|
1484
|
-
// subsequent tasks. The higher level `asap` function ensures that if an
|
1485
|
-
// exception is thrown by a task, that the task queue will continue flushing as
|
1486
|
-
// soon as possible, but if you use `rawAsap` directly, you are responsible to
|
1487
|
-
// either ensure that no exceptions are thrown from your task, or to manually
|
1488
|
-
// call `rawAsap.requestFlush` if an exception is thrown.
|
1489
|
-
enqueueTask(task) {
|
1490
|
-
const { queue: q , requestFlush } = this;
|
1491
|
-
if (!q.length) {
|
1492
|
-
requestFlush();
|
1493
|
-
this.flushing = true;
|
1494
|
-
}
|
1495
|
-
// Equivalent to push, but avoids a function call.
|
1496
|
-
q[q.length] = task;
|
1497
|
-
}
|
1498
|
-
constructor(){
|
1499
|
-
this.queue = [];
|
1500
|
-
// We queue errors to ensure they are thrown in right order (FIFO).
|
1501
|
-
// Array-as-queue is good enough here, since we are just dealing with exceptions.
|
1502
|
-
this.pendingErrors = [];
|
1503
|
-
// Once a flush has been requested, no further calls to `requestFlush` are
|
1504
|
-
// necessary until the next `flush` completes.
|
1505
|
-
// @ts-ignore
|
1506
|
-
this.flushing = false;
|
1507
|
-
// The position of the next task to execute in the task queue. This is
|
1508
|
-
// preserved between calls to `flush` so that it can be resumed if
|
1509
|
-
// a task throws an exception.
|
1510
|
-
this.index = 0;
|
1511
|
-
// If a task schedules additional tasks recursively, the task queue can grow
|
1512
|
-
// unbounded. To prevent memory exhaustion, the task queue will periodically
|
1513
|
-
// truncate already-completed tasks.
|
1514
|
-
this.capacity = 1024;
|
1515
|
-
// The flush function processes all tasks that have been scheduled with
|
1516
|
-
// `rawAsap` unless and until one of those tasks throws an exception.
|
1517
|
-
// If a task throws an exception, `flush` ensures that its state will remain
|
1518
|
-
// consistent and will resume where it left off when called again.
|
1519
|
-
// However, `flush` does not make any arrangements to be called again if an
|
1520
|
-
// exception is thrown.
|
1521
|
-
this.flush = ()=>{
|
1522
|
-
const { queue: q } = this;
|
1523
|
-
while(this.index < q.length){
|
1524
|
-
const currentIndex = this.index;
|
1525
|
-
// Advance the index before calling the task. This ensures that we will
|
1526
|
-
// begin flushing on the next task the task throws an error.
|
1527
|
-
this.index++;
|
1528
|
-
q[currentIndex].call();
|
1529
|
-
// Prevent leaking memory for long chains of recursive calls to `asap`.
|
1530
|
-
// If we call `asap` within tasks scheduled by `asap`, the queue will
|
1531
|
-
// grow, but to avoid an O(n) walk for every task we execute, we don't
|
1532
|
-
// shift tasks off the queue after they have been executed.
|
1533
|
-
// Instead, we periodically shift 1024 tasks off the queue.
|
1534
|
-
if (this.index > this.capacity) {
|
1535
|
-
// Manually shift all values starting at the index back to the
|
1536
|
-
// beginning of the queue.
|
1537
|
-
for(let scan = 0, newLength = q.length - this.index; scan < newLength; scan++){
|
1538
|
-
q[scan] = q[scan + this.index];
|
1539
|
-
}
|
1540
|
-
q.length -= this.index;
|
1541
|
-
this.index = 0;
|
1542
|
-
}
|
1543
|
-
}
|
1544
|
-
q.length = 0;
|
1545
|
-
this.index = 0;
|
1546
|
-
this.flushing = false;
|
1547
|
-
};
|
1548
|
-
// In a web browser, exceptions are not fatal. However, to avoid
|
1549
|
-
// slowing down the queue of pending tasks, we rethrow the error in a
|
1550
|
-
// lower priority turn.
|
1551
|
-
this.registerPendingError = (err)=>{
|
1552
|
-
this.pendingErrors.push(err);
|
1553
|
-
this.requestErrorThrow();
|
1554
|
-
};
|
1555
|
-
// `requestFlush` requests that the high priority event queue be flushed as
|
1556
|
-
// soon as possible.
|
1557
|
-
// This is useful to prevent an error thrown in a task from stalling the event
|
1558
|
-
// queue if the exception handled by Node.js’s
|
1559
|
-
// `process.on("uncaughtException")` or by a domain.
|
1560
|
-
// `requestFlush` is implemented using a strategy based on data collected from
|
1561
|
-
// every available SauceLabs Selenium web driver worker at time of writing.
|
1562
|
-
// https://docs.google.com/spreadsheets/d/1mG-5UYGup5qxGdEMWkhP6BWCz053NUb2E1QoUTU16uA/edit#gid=783724593
|
1563
|
-
this.requestFlush = makeRequestCall(this.flush);
|
1564
|
-
this.requestErrorThrow = makeRequestCallFromTimer(()=>{
|
1565
|
-
// Throw first error
|
1566
|
-
if (this.pendingErrors.length) {
|
1567
|
-
throw this.pendingErrors.shift();
|
1568
|
-
}
|
1569
|
-
});
|
1570
|
-
}
|
1571
|
-
} // The message channel technique was discovered by Malte Ubl and was the
|
1572
|
-
// original foundation for this library.
|
1573
|
-
// http://www.nonblocking.io/2011/06/windownexttick.html
|
1574
|
-
// Safari 6.0.5 (at least) intermittently fails to create message ports on a
|
1575
|
-
// page's first load. Thankfully, this version of Safari supports
|
1576
|
-
// MutationObservers, so we don't need to fall back in that case.
|
1577
|
-
// function makeRequestCallFromMessageChannel(callback) {
|
1578
|
-
// var channel = new MessageChannel();
|
1579
|
-
// channel.port1.onmessage = callback;
|
1580
|
-
// return function requestCall() {
|
1581
|
-
// channel.port2.postMessage(0);
|
1582
|
-
// };
|
1583
|
-
// }
|
1584
|
-
// For reasons explained above, we are also unable to use `setImmediate`
|
1585
|
-
// under any circumstances.
|
1586
|
-
// Even if we were, there is another bug in Internet Explorer 10.
|
1587
|
-
// It is not sufficient to assign `setImmediate` to `requestFlush` because
|
1588
|
-
// `setImmediate` must be called *by name* and therefore must be wrapped in a
|
1589
|
-
// closure.
|
1590
|
-
// Never forget.
|
1591
|
-
// function makeRequestCallFromSetImmediate(callback) {
|
1592
|
-
// return function requestCall() {
|
1593
|
-
// setImmediate(callback);
|
1594
|
-
// };
|
1595
|
-
// }
|
1596
|
-
// Safari 6.0 has a problem where timers will get lost while the user is
|
1597
|
-
// scrolling. This problem does not impact ASAP because Safari 6.0 supports
|
1598
|
-
// mutation observers, so that implementation is used instead.
|
1599
|
-
// However, if we ever elect to use timers in Safari, the prevalent work-around
|
1600
|
-
// is to add a scroll event listener that calls for a flush.
|
1601
|
-
// `setTimeout` does not call the passed callback if the delay is less than
|
1602
|
-
// approximately 7 in web workers in Firefox 8 through 18, and sometimes not
|
1603
|
-
// even then.
|
1604
|
-
// This is for `asap.js` only.
|
1605
|
-
// Its name will be periodically randomized to break any code that depends on
|
1606
|
-
// // its existence.
|
1607
|
-
// rawAsap.makeRequestCallFromTimer = makeRequestCallFromTimer
|
1608
|
-
// ASAP was originally a nextTick shim included in Q. This was factored out
|
1609
|
-
// into this ASAP package. It was later adapted to RSVP which made further
|
1610
|
-
// amendments. These decisions, particularly to marginalize MessageChannel and
|
1611
|
-
// to capture the MutationObserver implementation in a closure, were integrated
|
1612
|
-
// back into ASAP proper.
|
1613
|
-
// https://github.com/tildeio/rsvp.js/blob/cddf7232546a9cf858524b75cde6f9edf72620a7/lib/rsvp/asap.js
|
1614
|
-
|
1615
|
-
// `call`, just like a function.
|
1616
|
-
class RawTask {
|
1617
|
-
call() {
|
1618
|
-
try {
|
1619
|
-
this.task && this.task();
|
1620
|
-
} catch (error) {
|
1621
|
-
this.onError(error);
|
1622
|
-
} finally{
|
1623
|
-
this.task = null;
|
1624
|
-
this.release(this);
|
1625
|
-
}
|
1626
|
-
}
|
1627
|
-
constructor(onError, release){
|
1628
|
-
this.onError = onError;
|
1629
|
-
this.release = release;
|
1630
|
-
this.task = null;
|
1631
|
-
}
|
1632
|
-
}
|
1633
|
-
|
1634
|
-
class TaskFactory {
|
1635
|
-
create(task) {
|
1636
|
-
const tasks = this.freeTasks;
|
1637
|
-
const t1 = tasks.length ? tasks.pop() : new RawTask(this.onError, (t)=>tasks[tasks.length] = t
|
1638
|
-
);
|
1639
|
-
t1.task = task;
|
1640
|
-
return t1;
|
1641
|
-
}
|
1642
|
-
constructor(onError){
|
1643
|
-
this.onError = onError;
|
1644
|
-
this.freeTasks = [];
|
1645
|
-
}
|
1646
|
-
}
|
1647
|
-
|
1648
|
-
const asapQueue = new AsapQueue();
|
1649
|
-
const taskFactory = new TaskFactory(asapQueue.registerPendingError);
|
1650
|
-
/**
|
1651
|
-
* Calls a task as soon as possible after returning, in its own event, with priority
|
1652
|
-
* over other events like animation, reflow, and repaint. An error thrown from an
|
1653
|
-
* event will not interrupt, nor even substantially slow down the processing of
|
1654
|
-
* other events, but will be rather postponed to a lower priority event.
|
1655
|
-
* @param {{call}} task A callable object, typically a function that takes no
|
1656
|
-
* arguments.
|
1657
|
-
*/ function asap(task) {
|
1658
|
-
asapQueue.enqueueTask(taskFactory.create(task));
|
1659
|
-
}
|
1660
|
-
|
1661
|
-
const ADD_SOURCE = 'dnd-core/ADD_SOURCE';
|
1662
|
-
const ADD_TARGET = 'dnd-core/ADD_TARGET';
|
1663
|
-
const REMOVE_SOURCE = 'dnd-core/REMOVE_SOURCE';
|
1664
|
-
const REMOVE_TARGET = 'dnd-core/REMOVE_TARGET';
|
1665
|
-
function addSource(sourceId) {
|
1666
|
-
return {
|
1667
|
-
type: ADD_SOURCE,
|
1668
|
-
payload: {
|
1669
|
-
sourceId
|
1670
|
-
}
|
1671
|
-
};
|
1672
|
-
}
|
1673
|
-
function addTarget(targetId) {
|
1674
|
-
return {
|
1675
|
-
type: ADD_TARGET,
|
1676
|
-
payload: {
|
1677
|
-
targetId
|
1678
|
-
}
|
1679
|
-
};
|
1680
|
-
}
|
1681
|
-
function removeSource(sourceId) {
|
1682
|
-
return {
|
1683
|
-
type: REMOVE_SOURCE,
|
1684
|
-
payload: {
|
1685
|
-
sourceId
|
1686
|
-
}
|
1687
|
-
};
|
1688
|
-
}
|
1689
|
-
function removeTarget(targetId) {
|
1690
|
-
return {
|
1691
|
-
type: REMOVE_TARGET,
|
1692
|
-
payload: {
|
1693
|
-
targetId
|
1694
|
-
}
|
1695
|
-
};
|
1696
|
-
}
|
1697
|
-
|
1698
|
-
function validateSourceContract(source) {
|
1699
|
-
invariant(typeof source.canDrag === 'function', 'Expected canDrag to be a function.');
|
1700
|
-
invariant(typeof source.beginDrag === 'function', 'Expected beginDrag to be a function.');
|
1701
|
-
invariant(typeof source.endDrag === 'function', 'Expected endDrag to be a function.');
|
1702
|
-
}
|
1703
|
-
function validateTargetContract(target) {
|
1704
|
-
invariant(typeof target.canDrop === 'function', 'Expected canDrop to be a function.');
|
1705
|
-
invariant(typeof target.hover === 'function', 'Expected hover to be a function.');
|
1706
|
-
invariant(typeof target.drop === 'function', 'Expected beginDrag to be a function.');
|
1707
|
-
}
|
1708
|
-
function validateType(type, allowArray) {
|
1709
|
-
if (allowArray && Array.isArray(type)) {
|
1710
|
-
type.forEach((t)=>validateType(t, false)
|
1711
|
-
);
|
1712
|
-
return;
|
1713
|
-
}
|
1714
|
-
invariant(typeof type === 'string' || typeof type === 'symbol', allowArray ? 'Type can only be a string, a symbol, or an array of either.' : 'Type can only be a string or a symbol.');
|
1715
|
-
}
|
1716
|
-
|
1717
|
-
var HandlerRole;
|
1718
|
-
(function(HandlerRole) {
|
1719
|
-
HandlerRole["SOURCE"] = "SOURCE";
|
1720
|
-
HandlerRole["TARGET"] = "TARGET";
|
1721
|
-
})(HandlerRole || (HandlerRole = {}));
|
1722
|
-
|
1723
|
-
let nextUniqueId = 0;
|
1724
|
-
function getNextUniqueId() {
|
1725
|
-
return nextUniqueId++;
|
1726
|
-
}
|
1727
|
-
|
1728
|
-
function getNextHandlerId(role) {
|
1729
|
-
const id = getNextUniqueId().toString();
|
1730
|
-
switch(role){
|
1731
|
-
case HandlerRole.SOURCE:
|
1732
|
-
return `S${id}`;
|
1733
|
-
case HandlerRole.TARGET:
|
1734
|
-
return `T${id}`;
|
1735
|
-
default:
|
1736
|
-
throw new Error(`Unknown Handler Role: ${role}`);
|
1737
|
-
}
|
1738
|
-
}
|
1739
|
-
function parseRoleFromHandlerId(handlerId) {
|
1740
|
-
switch(handlerId[0]){
|
1741
|
-
case 'S':
|
1742
|
-
return HandlerRole.SOURCE;
|
1743
|
-
case 'T':
|
1744
|
-
return HandlerRole.TARGET;
|
1745
|
-
default:
|
1746
|
-
throw new Error(`Cannot parse handler ID: ${handlerId}`);
|
1747
|
-
}
|
1748
|
-
}
|
1749
|
-
function mapContainsValue(map, searchValue) {
|
1750
|
-
const entries = map.entries();
|
1751
|
-
let isDone = false;
|
1752
|
-
do {
|
1753
|
-
const { done , value: [, value] , } = entries.next();
|
1754
|
-
if (value === searchValue) {
|
1755
|
-
return true;
|
1756
|
-
}
|
1757
|
-
isDone = !!done;
|
1758
|
-
}while (!isDone)
|
1759
|
-
return false;
|
1760
|
-
}
|
1761
|
-
class HandlerRegistryImpl {
|
1762
|
-
addSource(type, source) {
|
1763
|
-
validateType(type);
|
1764
|
-
validateSourceContract(source);
|
1765
|
-
const sourceId = this.addHandler(HandlerRole.SOURCE, type, source);
|
1766
|
-
this.store.dispatch(addSource(sourceId));
|
1767
|
-
return sourceId;
|
1768
|
-
}
|
1769
|
-
addTarget(type, target) {
|
1770
|
-
validateType(type, true);
|
1771
|
-
validateTargetContract(target);
|
1772
|
-
const targetId = this.addHandler(HandlerRole.TARGET, type, target);
|
1773
|
-
this.store.dispatch(addTarget(targetId));
|
1774
|
-
return targetId;
|
1775
|
-
}
|
1776
|
-
containsHandler(handler) {
|
1777
|
-
return mapContainsValue(this.dragSources, handler) || mapContainsValue(this.dropTargets, handler);
|
1778
|
-
}
|
1779
|
-
getSource(sourceId, includePinned = false) {
|
1780
|
-
invariant(this.isSourceId(sourceId), 'Expected a valid source ID.');
|
1781
|
-
const isPinned = includePinned && sourceId === this.pinnedSourceId;
|
1782
|
-
const source = isPinned ? this.pinnedSource : this.dragSources.get(sourceId);
|
1783
|
-
return source;
|
1784
|
-
}
|
1785
|
-
getTarget(targetId) {
|
1786
|
-
invariant(this.isTargetId(targetId), 'Expected a valid target ID.');
|
1787
|
-
return this.dropTargets.get(targetId);
|
1788
|
-
}
|
1789
|
-
getSourceType(sourceId) {
|
1790
|
-
invariant(this.isSourceId(sourceId), 'Expected a valid source ID.');
|
1791
|
-
return this.types.get(sourceId);
|
1792
|
-
}
|
1793
|
-
getTargetType(targetId) {
|
1794
|
-
invariant(this.isTargetId(targetId), 'Expected a valid target ID.');
|
1795
|
-
return this.types.get(targetId);
|
1796
|
-
}
|
1797
|
-
isSourceId(handlerId) {
|
1798
|
-
const role = parseRoleFromHandlerId(handlerId);
|
1799
|
-
return role === HandlerRole.SOURCE;
|
1800
|
-
}
|
1801
|
-
isTargetId(handlerId) {
|
1802
|
-
const role = parseRoleFromHandlerId(handlerId);
|
1803
|
-
return role === HandlerRole.TARGET;
|
1804
|
-
}
|
1805
|
-
removeSource(sourceId) {
|
1806
|
-
invariant(this.getSource(sourceId), 'Expected an existing source.');
|
1807
|
-
this.store.dispatch(removeSource(sourceId));
|
1808
|
-
asap(()=>{
|
1809
|
-
this.dragSources.delete(sourceId);
|
1810
|
-
this.types.delete(sourceId);
|
1811
|
-
});
|
1812
|
-
}
|
1813
|
-
removeTarget(targetId) {
|
1814
|
-
invariant(this.getTarget(targetId), 'Expected an existing target.');
|
1815
|
-
this.store.dispatch(removeTarget(targetId));
|
1816
|
-
this.dropTargets.delete(targetId);
|
1817
|
-
this.types.delete(targetId);
|
1818
|
-
}
|
1819
|
-
pinSource(sourceId) {
|
1820
|
-
const source = this.getSource(sourceId);
|
1821
|
-
invariant(source, 'Expected an existing source.');
|
1822
|
-
this.pinnedSourceId = sourceId;
|
1823
|
-
this.pinnedSource = source;
|
1824
|
-
}
|
1825
|
-
unpinSource() {
|
1826
|
-
invariant(this.pinnedSource, 'No source is pinned at the time.');
|
1827
|
-
this.pinnedSourceId = null;
|
1828
|
-
this.pinnedSource = null;
|
1829
|
-
}
|
1830
|
-
addHandler(role, type, handler) {
|
1831
|
-
const id = getNextHandlerId(role);
|
1832
|
-
this.types.set(id, type);
|
1833
|
-
if (role === HandlerRole.SOURCE) {
|
1834
|
-
this.dragSources.set(id, handler);
|
1835
|
-
} else if (role === HandlerRole.TARGET) {
|
1836
|
-
this.dropTargets.set(id, handler);
|
1837
|
-
}
|
1838
|
-
return id;
|
1839
|
-
}
|
1840
|
-
constructor(store){
|
1841
|
-
this.types = new Map();
|
1842
|
-
this.dragSources = new Map();
|
1843
|
-
this.dropTargets = new Map();
|
1844
|
-
this.pinnedSourceId = null;
|
1845
|
-
this.pinnedSource = null;
|
1846
|
-
this.store = store;
|
1847
|
-
}
|
1848
|
-
}
|
1849
|
-
|
1850
|
-
const strictEquality = (a, b)=>a === b
|
1851
|
-
;
|
1852
|
-
/**
|
1853
|
-
* Determine if two cartesian coordinate offsets are equal
|
1854
|
-
* @param offsetA
|
1855
|
-
* @param offsetB
|
1856
|
-
*/ function areCoordsEqual(offsetA, offsetB) {
|
1857
|
-
if (!offsetA && !offsetB) {
|
1858
|
-
return true;
|
1859
|
-
} else if (!offsetA || !offsetB) {
|
1860
|
-
return false;
|
1861
|
-
} else {
|
1862
|
-
return offsetA.x === offsetB.x && offsetA.y === offsetB.y;
|
1863
|
-
}
|
1864
|
-
}
|
1865
|
-
/**
|
1866
|
-
* Determines if two arrays of items are equal
|
1867
|
-
* @param a The first array of items
|
1868
|
-
* @param b The second array of items
|
1869
|
-
*/ function areArraysEqual(a, b, isEqual = strictEquality) {
|
1870
|
-
if (a.length !== b.length) {
|
1871
|
-
return false;
|
1872
|
-
}
|
1873
|
-
for(let i = 0; i < a.length; ++i){
|
1874
|
-
if (!isEqual(a[i], b[i])) {
|
1875
|
-
return false;
|
1876
|
-
}
|
1877
|
-
}
|
1878
|
-
return true;
|
1879
|
-
}
|
1880
|
-
|
1881
|
-
function reduce(// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
1882
|
-
_state = NONE, action) {
|
1883
|
-
switch(action.type){
|
1884
|
-
case HOVER:
|
1885
|
-
break;
|
1886
|
-
case ADD_SOURCE:
|
1887
|
-
case ADD_TARGET:
|
1888
|
-
case REMOVE_TARGET:
|
1889
|
-
case REMOVE_SOURCE:
|
1890
|
-
return NONE;
|
1891
|
-
case BEGIN_DRAG:
|
1892
|
-
case PUBLISH_DRAG_SOURCE:
|
1893
|
-
case END_DRAG:
|
1894
|
-
case DROP:
|
1895
|
-
default:
|
1896
|
-
return ALL;
|
1897
|
-
}
|
1898
|
-
const { targetIds =[] , prevTargetIds =[] } = action.payload;
|
1899
|
-
const result = xor(targetIds, prevTargetIds);
|
1900
|
-
const didChange = result.length > 0 || !areArraysEqual(targetIds, prevTargetIds);
|
1901
|
-
if (!didChange) {
|
1902
|
-
return NONE;
|
1903
|
-
}
|
1904
|
-
// Check the target ids at the innermost position. If they are valid, add them
|
1905
|
-
// to the result
|
1906
|
-
const prevInnermostTargetId = prevTargetIds[prevTargetIds.length - 1];
|
1907
|
-
const innermostTargetId = targetIds[targetIds.length - 1];
|
1908
|
-
if (prevInnermostTargetId !== innermostTargetId) {
|
1909
|
-
if (prevInnermostTargetId) {
|
1910
|
-
result.push(prevInnermostTargetId);
|
1911
|
-
}
|
1912
|
-
if (innermostTargetId) {
|
1913
|
-
result.push(innermostTargetId);
|
1914
|
-
}
|
1915
|
-
}
|
1916
|
-
return result;
|
1917
|
-
}
|
1918
|
-
|
1919
|
-
function _defineProperty$1(obj, key, value) {
|
1920
|
-
if (key in obj) {
|
1921
|
-
Object.defineProperty(obj, key, {
|
1922
|
-
value: value,
|
1923
|
-
enumerable: true,
|
1924
|
-
configurable: true,
|
1925
|
-
writable: true
|
1926
|
-
});
|
1927
|
-
} else {
|
1928
|
-
obj[key] = value;
|
1929
|
-
}
|
1930
|
-
return obj;
|
1931
|
-
}
|
1932
|
-
function _objectSpread$1(target) {
|
1933
|
-
for(var i = 1; i < arguments.length; i++){
|
1934
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
1935
|
-
var ownKeys = Object.keys(source);
|
1936
|
-
if (typeof Object.getOwnPropertySymbols === 'function') {
|
1937
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
1938
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
1939
|
-
}));
|
1940
|
-
}
|
1941
|
-
ownKeys.forEach(function(key) {
|
1942
|
-
_defineProperty$1(target, key, source[key]);
|
1943
|
-
});
|
1944
|
-
}
|
1945
|
-
return target;
|
1946
|
-
}
|
1947
|
-
const initialState = {
|
1948
|
-
initialSourceClientOffset: null,
|
1949
|
-
initialClientOffset: null,
|
1950
|
-
clientOffset: null
|
1951
|
-
};
|
1952
|
-
function reduce$1(state = initialState, action) {
|
1953
|
-
const { payload } = action;
|
1954
|
-
switch(action.type){
|
1955
|
-
case INIT_COORDS:
|
1956
|
-
case BEGIN_DRAG:
|
1957
|
-
return {
|
1958
|
-
initialSourceClientOffset: payload.sourceClientOffset,
|
1959
|
-
initialClientOffset: payload.clientOffset,
|
1960
|
-
clientOffset: payload.clientOffset
|
1961
|
-
};
|
1962
|
-
case HOVER:
|
1963
|
-
if (areCoordsEqual(state.clientOffset, payload.clientOffset)) {
|
1964
|
-
return state;
|
1965
|
-
}
|
1966
|
-
return _objectSpread$1({}, state, {
|
1967
|
-
clientOffset: payload.clientOffset
|
1968
|
-
});
|
1969
|
-
case END_DRAG:
|
1970
|
-
case DROP:
|
1971
|
-
return initialState;
|
1972
|
-
default:
|
1973
|
-
return state;
|
1974
|
-
}
|
1975
|
-
}
|
1976
|
-
|
1977
|
-
function _defineProperty$2(obj, key, value) {
|
1978
|
-
if (key in obj) {
|
1979
|
-
Object.defineProperty(obj, key, {
|
1980
|
-
value: value,
|
1981
|
-
enumerable: true,
|
1982
|
-
configurable: true,
|
1983
|
-
writable: true
|
1984
|
-
});
|
1985
|
-
} else {
|
1986
|
-
obj[key] = value;
|
1987
|
-
}
|
1988
|
-
return obj;
|
1989
|
-
}
|
1990
|
-
function _objectSpread$2(target) {
|
1991
|
-
for(var i = 1; i < arguments.length; i++){
|
1992
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
1993
|
-
var ownKeys = Object.keys(source);
|
1994
|
-
if (typeof Object.getOwnPropertySymbols === 'function') {
|
1995
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
1996
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
1997
|
-
}));
|
1998
|
-
}
|
1999
|
-
ownKeys.forEach(function(key) {
|
2000
|
-
_defineProperty$2(target, key, source[key]);
|
2001
|
-
});
|
2002
|
-
}
|
2003
|
-
return target;
|
2004
|
-
}
|
2005
|
-
const initialState$1 = {
|
2006
|
-
itemType: null,
|
2007
|
-
item: null,
|
2008
|
-
sourceId: null,
|
2009
|
-
targetIds: [],
|
2010
|
-
dropResult: null,
|
2011
|
-
didDrop: false,
|
2012
|
-
isSourcePublic: null
|
2013
|
-
};
|
2014
|
-
function reduce$2(state = initialState$1, action) {
|
2015
|
-
const { payload } = action;
|
2016
|
-
switch(action.type){
|
2017
|
-
case BEGIN_DRAG:
|
2018
|
-
return _objectSpread$2({}, state, {
|
2019
|
-
itemType: payload.itemType,
|
2020
|
-
item: payload.item,
|
2021
|
-
sourceId: payload.sourceId,
|
2022
|
-
isSourcePublic: payload.isSourcePublic,
|
2023
|
-
dropResult: null,
|
2024
|
-
didDrop: false
|
2025
|
-
});
|
2026
|
-
case PUBLISH_DRAG_SOURCE:
|
2027
|
-
return _objectSpread$2({}, state, {
|
2028
|
-
isSourcePublic: true
|
2029
|
-
});
|
2030
|
-
case HOVER:
|
2031
|
-
return _objectSpread$2({}, state, {
|
2032
|
-
targetIds: payload.targetIds
|
2033
|
-
});
|
2034
|
-
case REMOVE_TARGET:
|
2035
|
-
if (state.targetIds.indexOf(payload.targetId) === -1) {
|
2036
|
-
return state;
|
2037
|
-
}
|
2038
|
-
return _objectSpread$2({}, state, {
|
2039
|
-
targetIds: without(state.targetIds, payload.targetId)
|
2040
|
-
});
|
2041
|
-
case DROP:
|
2042
|
-
return _objectSpread$2({}, state, {
|
2043
|
-
dropResult: payload.dropResult,
|
2044
|
-
didDrop: true,
|
2045
|
-
targetIds: []
|
2046
|
-
});
|
2047
|
-
case END_DRAG:
|
2048
|
-
return _objectSpread$2({}, state, {
|
2049
|
-
itemType: null,
|
2050
|
-
item: null,
|
2051
|
-
sourceId: null,
|
2052
|
-
dropResult: null,
|
2053
|
-
didDrop: false,
|
2054
|
-
isSourcePublic: null,
|
2055
|
-
targetIds: []
|
2056
|
-
});
|
2057
|
-
default:
|
2058
|
-
return state;
|
2059
|
-
}
|
2060
|
-
}
|
2061
|
-
|
2062
|
-
function reduce$3(state = 0, action) {
|
2063
|
-
switch(action.type){
|
2064
|
-
case ADD_SOURCE:
|
2065
|
-
case ADD_TARGET:
|
2066
|
-
return state + 1;
|
2067
|
-
case REMOVE_SOURCE:
|
2068
|
-
case REMOVE_TARGET:
|
2069
|
-
return state - 1;
|
2070
|
-
default:
|
2071
|
-
return state;
|
2072
|
-
}
|
2073
|
-
}
|
2074
|
-
|
2075
|
-
function reduce$4(state = 0) {
|
2076
|
-
return state + 1;
|
2077
|
-
}
|
2078
|
-
|
2079
|
-
function _defineProperty$3(obj, key, value) {
|
2080
|
-
if (key in obj) {
|
2081
|
-
Object.defineProperty(obj, key, {
|
2082
|
-
value: value,
|
2083
|
-
enumerable: true,
|
2084
|
-
configurable: true,
|
2085
|
-
writable: true
|
2086
|
-
});
|
2087
|
-
} else {
|
2088
|
-
obj[key] = value;
|
2089
|
-
}
|
2090
|
-
return obj;
|
2091
|
-
}
|
2092
|
-
function _objectSpread$3(target) {
|
2093
|
-
for(var i = 1; i < arguments.length; i++){
|
2094
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
2095
|
-
var ownKeys = Object.keys(source);
|
2096
|
-
if (typeof Object.getOwnPropertySymbols === 'function') {
|
2097
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
2098
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
2099
|
-
}));
|
2100
|
-
}
|
2101
|
-
ownKeys.forEach(function(key) {
|
2102
|
-
_defineProperty$3(target, key, source[key]);
|
2103
|
-
});
|
2104
|
-
}
|
2105
|
-
return target;
|
2106
|
-
}
|
2107
|
-
function reduce$5(state = {}, action) {
|
2108
|
-
return {
|
2109
|
-
dirtyHandlerIds: reduce(state.dirtyHandlerIds, {
|
2110
|
-
type: action.type,
|
2111
|
-
payload: _objectSpread$3({}, action.payload, {
|
2112
|
-
prevTargetIds: get(state, 'dragOperation.targetIds', [])
|
2113
|
-
})
|
2114
|
-
}),
|
2115
|
-
dragOffset: reduce$1(state.dragOffset, action),
|
2116
|
-
refCount: reduce$3(state.refCount, action),
|
2117
|
-
dragOperation: reduce$2(state.dragOperation, action),
|
2118
|
-
stateId: reduce$4(state.stateId)
|
2119
|
-
};
|
2120
|
-
}
|
2121
|
-
|
2122
|
-
function createDragDropManager(backendFactory, globalContext = undefined, backendOptions = {}, debugMode = false) {
|
2123
|
-
const store = makeStoreInstance(debugMode);
|
2124
|
-
const monitor = new DragDropMonitorImpl(store, new HandlerRegistryImpl(store));
|
2125
|
-
const manager = new DragDropManagerImpl(store, monitor);
|
2126
|
-
const backend = backendFactory(manager, globalContext, backendOptions);
|
2127
|
-
manager.receiveBackend(backend);
|
2128
|
-
return manager;
|
2129
|
-
}
|
2130
|
-
function makeStoreInstance(debugMode) {
|
2131
|
-
// TODO: if we ever make a react-native version of this,
|
2132
|
-
// we'll need to consider how to pull off dev-tooling
|
2133
|
-
const reduxDevTools = typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__;
|
2134
|
-
return createStore(reduce$5, debugMode && reduxDevTools && reduxDevTools({
|
2135
|
-
name: 'dnd-core',
|
2136
|
-
instanceId: 'dnd-core'
|
2137
|
-
}));
|
2138
|
-
}
|
2139
|
-
|
2140
|
-
function _objectWithoutProperties(source, excluded) {
|
2141
|
-
if (source == null) return {};
|
2142
|
-
var target = _objectWithoutPropertiesLoose$1(source, excluded);
|
2143
|
-
var key, i;
|
2144
|
-
if (Object.getOwnPropertySymbols) {
|
2145
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
2146
|
-
for(i = 0; i < sourceSymbolKeys.length; i++){
|
2147
|
-
key = sourceSymbolKeys[i];
|
2148
|
-
if (excluded.indexOf(key) >= 0) continue;
|
2149
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
2150
|
-
target[key] = source[key];
|
2151
|
-
}
|
2152
|
-
}
|
2153
|
-
return target;
|
2154
|
-
}
|
2155
|
-
function _objectWithoutPropertiesLoose$1(source, excluded) {
|
2156
|
-
if (source == null) return {};
|
2157
|
-
var target = {};
|
2158
|
-
var sourceKeys = Object.keys(source);
|
2159
|
-
var key, i;
|
2160
|
-
for(i = 0; i < sourceKeys.length; i++){
|
2161
|
-
key = sourceKeys[i];
|
2162
|
-
if (excluded.indexOf(key) >= 0) continue;
|
2163
|
-
target[key] = source[key];
|
2164
|
-
}
|
2165
|
-
return target;
|
2166
|
-
}
|
2167
|
-
let refCount = 0;
|
2168
|
-
const INSTANCE_SYM = Symbol.for('__REACT_DND_CONTEXT_INSTANCE__');
|
2169
|
-
var DndProvider = /*#__PURE__*/ React.memo(function DndProvider(_param) {
|
2170
|
-
var { children } = _param, props = _objectWithoutProperties(_param, [
|
2171
|
-
"children"
|
2172
|
-
]);
|
2173
|
-
const [manager, isGlobalInstance] = getDndContextValue(props) // memoized from props
|
2174
|
-
;
|
2175
|
-
/**
|
2176
|
-
* If the global context was used to store the DND context
|
2177
|
-
* then where theres no more references to it we should
|
2178
|
-
* clean it up to avoid memory leaks
|
2179
|
-
*/ React.useEffect(()=>{
|
2180
|
-
if (isGlobalInstance) {
|
2181
|
-
const context = getGlobalContext();
|
2182
|
-
++refCount;
|
2183
|
-
return ()=>{
|
2184
|
-
if (--refCount === 0) {
|
2185
|
-
context[INSTANCE_SYM] = null;
|
2186
|
-
}
|
2187
|
-
};
|
2188
|
-
}
|
2189
|
-
return;
|
2190
|
-
}, []);
|
2191
|
-
return /*#__PURE__*/ jsxRuntime.jsx(DndContext.Provider, {
|
2192
|
-
value: manager,
|
2193
|
-
children: children
|
2194
|
-
});
|
2195
|
-
});
|
2196
|
-
function getDndContextValue(props) {
|
2197
|
-
if ('manager' in props) {
|
2198
|
-
const manager = {
|
2199
|
-
dragDropManager: props.manager
|
2200
|
-
};
|
2201
|
-
return [
|
2202
|
-
manager,
|
2203
|
-
false
|
2204
|
-
];
|
2205
|
-
}
|
2206
|
-
const manager = createSingletonDndContext(props.backend, props.context, props.options, props.debugMode);
|
2207
|
-
const isGlobalInstance = !props.context;
|
2208
|
-
return [
|
2209
|
-
manager,
|
2210
|
-
isGlobalInstance
|
2211
|
-
];
|
2212
|
-
}
|
2213
|
-
function createSingletonDndContext(backend, context = getGlobalContext(), options, debugMode) {
|
2214
|
-
const ctx = context;
|
2215
|
-
if (!ctx[INSTANCE_SYM]) {
|
2216
|
-
ctx[INSTANCE_SYM] = {
|
2217
|
-
dragDropManager: createDragDropManager(backend, context, options, debugMode)
|
2218
|
-
};
|
2219
|
-
}
|
2220
|
-
return ctx[INSTANCE_SYM];
|
2221
|
-
}
|
2222
|
-
function getGlobalContext() {
|
2223
|
-
return typeof global !== 'undefined' ? global : window;
|
2224
|
-
}
|
2225
|
-
|
2226
|
-
// do not edit .js files directly - edit src/index.jst
|
2227
|
-
|
2228
|
-
|
2229
|
-
|
2230
|
-
var fastDeepEqual = function equal(a, b) {
|
2231
|
-
if (a === b) return true;
|
2232
|
-
|
2233
|
-
if (a && b && typeof a == 'object' && typeof b == 'object') {
|
2234
|
-
if (a.constructor !== b.constructor) return false;
|
2235
|
-
|
2236
|
-
var length, i, keys;
|
2237
|
-
if (Array.isArray(a)) {
|
2238
|
-
length = a.length;
|
2239
|
-
if (length != b.length) return false;
|
2240
|
-
for (i = length; i-- !== 0;)
|
2241
|
-
if (!equal(a[i], b[i])) return false;
|
2242
|
-
return true;
|
2243
|
-
}
|
2244
|
-
|
2245
|
-
|
2246
|
-
|
2247
|
-
if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
|
2248
|
-
if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
|
2249
|
-
if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
|
2250
|
-
|
2251
|
-
keys = Object.keys(a);
|
2252
|
-
length = keys.length;
|
2253
|
-
if (length !== Object.keys(b).length) return false;
|
2254
|
-
|
2255
|
-
for (i = length; i-- !== 0;)
|
2256
|
-
if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
|
2257
|
-
|
2258
|
-
for (i = length; i-- !== 0;) {
|
2259
|
-
var key = keys[i];
|
2260
|
-
|
2261
|
-
if (!equal(a[key], b[key])) return false;
|
2262
|
-
}
|
2263
|
-
|
2264
|
-
return true;
|
2265
|
-
}
|
2266
|
-
|
2267
|
-
// true if both NaN, false otherwise
|
2268
|
-
return a!==a && b!==b;
|
2269
|
-
};
|
2270
|
-
|
2271
|
-
// suppress the useLayoutEffect warning on server side.
|
2272
|
-
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
2273
|
-
|
2274
|
-
/**
|
2275
|
-
*
|
2276
|
-
* @param monitor The monitor to collect state from
|
2277
|
-
* @param collect The collecting function
|
2278
|
-
* @param onUpdate A method to invoke when updates occur
|
2279
|
-
*/ function useCollector(monitor, collect, onUpdate) {
|
2280
|
-
const [collected, setCollected] = React.useState(()=>collect(monitor)
|
2281
|
-
);
|
2282
|
-
const updateCollected = React.useCallback(()=>{
|
2283
|
-
const nextValue = collect(monitor);
|
2284
|
-
// This needs to be a deep-equality check because some monitor-collected values
|
2285
|
-
// include XYCoord objects that may be equivalent, but do not have instance equality.
|
2286
|
-
if (!fastDeepEqual(collected, nextValue)) {
|
2287
|
-
setCollected(nextValue);
|
2288
|
-
if (onUpdate) {
|
2289
|
-
onUpdate();
|
2290
|
-
}
|
2291
|
-
}
|
2292
|
-
}, [
|
2293
|
-
collected,
|
2294
|
-
monitor,
|
2295
|
-
onUpdate
|
2296
|
-
]);
|
2297
|
-
// update the collected properties after react renders.
|
2298
|
-
// Note that the "Dustbin Stress Test" fails if this is not
|
2299
|
-
// done when the component updates
|
2300
|
-
useIsomorphicLayoutEffect(updateCollected);
|
2301
|
-
return [
|
2302
|
-
collected,
|
2303
|
-
updateCollected
|
2304
|
-
];
|
2305
|
-
}
|
2306
|
-
|
2307
|
-
function useMonitorOutput(monitor, collect, onCollect) {
|
2308
|
-
const [collected, updateCollected] = useCollector(monitor, collect, onCollect);
|
2309
|
-
useIsomorphicLayoutEffect(function subscribeToMonitorStateChange() {
|
2310
|
-
const handlerId = monitor.getHandlerId();
|
2311
|
-
if (handlerId == null) {
|
2312
|
-
return;
|
2313
|
-
}
|
2314
|
-
return monitor.subscribeToStateChange(updateCollected, {
|
2315
|
-
handlerIds: [
|
2316
|
-
handlerId
|
2317
|
-
]
|
2318
|
-
});
|
2319
|
-
}, [
|
2320
|
-
monitor,
|
2321
|
-
updateCollected
|
2322
|
-
]);
|
2323
|
-
return collected;
|
2324
|
-
}
|
2325
|
-
|
2326
|
-
function useCollectedProps(collector, monitor, connector) {
|
2327
|
-
return useMonitorOutput(monitor, collector || (()=>({})
|
2328
|
-
), ()=>connector.reconnect()
|
2329
|
-
);
|
2330
|
-
}
|
2331
|
-
|
2332
|
-
function useOptionalFactory(arg, deps) {
|
2333
|
-
const memoDeps = [
|
2334
|
-
...deps || []
|
2335
|
-
];
|
2336
|
-
if (deps == null && typeof arg !== 'function') {
|
2337
|
-
memoDeps.push(arg);
|
2338
|
-
}
|
2339
|
-
return React.useMemo(()=>{
|
2340
|
-
return typeof arg === 'function' ? arg() : arg;
|
2341
|
-
}, memoDeps);
|
2342
|
-
}
|
2343
|
-
|
2344
|
-
function useConnectDragSource(connector) {
|
2345
|
-
return React.useMemo(()=>connector.hooks.dragSource()
|
2346
|
-
, [
|
2347
|
-
connector
|
2348
|
-
]);
|
2349
|
-
}
|
2350
|
-
function useConnectDragPreview(connector) {
|
2351
|
-
return React.useMemo(()=>connector.hooks.dragPreview()
|
2352
|
-
, [
|
2353
|
-
connector
|
2354
|
-
]);
|
2355
|
-
}
|
2356
|
-
|
2357
|
-
let isCallingCanDrag = false;
|
2358
|
-
let isCallingIsDragging = false;
|
2359
|
-
class DragSourceMonitorImpl {
|
2360
|
-
receiveHandlerId(sourceId) {
|
2361
|
-
this.sourceId = sourceId;
|
2362
|
-
}
|
2363
|
-
getHandlerId() {
|
2364
|
-
return this.sourceId;
|
2365
|
-
}
|
2366
|
-
canDrag() {
|
2367
|
-
invariant(!isCallingCanDrag, 'You may not call monitor.canDrag() inside your canDrag() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
|
2368
|
-
try {
|
2369
|
-
isCallingCanDrag = true;
|
2370
|
-
return this.internalMonitor.canDragSource(this.sourceId);
|
2371
|
-
} finally{
|
2372
|
-
isCallingCanDrag = false;
|
2373
|
-
}
|
2374
|
-
}
|
2375
|
-
isDragging() {
|
2376
|
-
if (!this.sourceId) {
|
2377
|
-
return false;
|
2378
|
-
}
|
2379
|
-
invariant(!isCallingIsDragging, 'You may not call monitor.isDragging() inside your isDragging() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
|
2380
|
-
try {
|
2381
|
-
isCallingIsDragging = true;
|
2382
|
-
return this.internalMonitor.isDraggingSource(this.sourceId);
|
2383
|
-
} finally{
|
2384
|
-
isCallingIsDragging = false;
|
2385
|
-
}
|
2386
|
-
}
|
2387
|
-
subscribeToStateChange(listener, options) {
|
2388
|
-
return this.internalMonitor.subscribeToStateChange(listener, options);
|
2389
|
-
}
|
2390
|
-
isDraggingSource(sourceId) {
|
2391
|
-
return this.internalMonitor.isDraggingSource(sourceId);
|
2392
|
-
}
|
2393
|
-
isOverTarget(targetId, options) {
|
2394
|
-
return this.internalMonitor.isOverTarget(targetId, options);
|
2395
|
-
}
|
2396
|
-
getTargetIds() {
|
2397
|
-
return this.internalMonitor.getTargetIds();
|
2398
|
-
}
|
2399
|
-
isSourcePublic() {
|
2400
|
-
return this.internalMonitor.isSourcePublic();
|
2401
|
-
}
|
2402
|
-
getSourceId() {
|
2403
|
-
return this.internalMonitor.getSourceId();
|
2404
|
-
}
|
2405
|
-
subscribeToOffsetChange(listener) {
|
2406
|
-
return this.internalMonitor.subscribeToOffsetChange(listener);
|
2407
|
-
}
|
2408
|
-
canDragSource(sourceId) {
|
2409
|
-
return this.internalMonitor.canDragSource(sourceId);
|
2410
|
-
}
|
2411
|
-
canDropOnTarget(targetId) {
|
2412
|
-
return this.internalMonitor.canDropOnTarget(targetId);
|
2413
|
-
}
|
2414
|
-
getItemType() {
|
2415
|
-
return this.internalMonitor.getItemType();
|
2416
|
-
}
|
2417
|
-
getItem() {
|
2418
|
-
return this.internalMonitor.getItem();
|
2419
|
-
}
|
2420
|
-
getDropResult() {
|
2421
|
-
return this.internalMonitor.getDropResult();
|
2422
|
-
}
|
2423
|
-
didDrop() {
|
2424
|
-
return this.internalMonitor.didDrop();
|
2425
|
-
}
|
2426
|
-
getInitialClientOffset() {
|
2427
|
-
return this.internalMonitor.getInitialClientOffset();
|
2428
|
-
}
|
2429
|
-
getInitialSourceClientOffset() {
|
2430
|
-
return this.internalMonitor.getInitialSourceClientOffset();
|
2431
|
-
}
|
2432
|
-
getSourceClientOffset() {
|
2433
|
-
return this.internalMonitor.getSourceClientOffset();
|
2434
|
-
}
|
2435
|
-
getClientOffset() {
|
2436
|
-
return this.internalMonitor.getClientOffset();
|
2437
|
-
}
|
2438
|
-
getDifferenceFromInitialOffset() {
|
2439
|
-
return this.internalMonitor.getDifferenceFromInitialOffset();
|
2440
|
-
}
|
2441
|
-
constructor(manager){
|
2442
|
-
this.sourceId = null;
|
2443
|
-
this.internalMonitor = manager.getMonitor();
|
2444
|
-
}
|
2445
|
-
}
|
2446
|
-
|
2447
|
-
let isCallingCanDrop = false;
|
2448
|
-
class DropTargetMonitorImpl {
|
2449
|
-
receiveHandlerId(targetId) {
|
2450
|
-
this.targetId = targetId;
|
2451
|
-
}
|
2452
|
-
getHandlerId() {
|
2453
|
-
return this.targetId;
|
2454
|
-
}
|
2455
|
-
subscribeToStateChange(listener, options) {
|
2456
|
-
return this.internalMonitor.subscribeToStateChange(listener, options);
|
2457
|
-
}
|
2458
|
-
canDrop() {
|
2459
|
-
// Cut out early if the target id has not been set. This should prevent errors
|
2460
|
-
// where the user has an older version of dnd-core like in
|
2461
|
-
// https://github.com/react-dnd/react-dnd/issues/1310
|
2462
|
-
if (!this.targetId) {
|
2463
|
-
return false;
|
2464
|
-
}
|
2465
|
-
invariant(!isCallingCanDrop, 'You may not call monitor.canDrop() inside your canDrop() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor');
|
2466
|
-
try {
|
2467
|
-
isCallingCanDrop = true;
|
2468
|
-
return this.internalMonitor.canDropOnTarget(this.targetId);
|
2469
|
-
} finally{
|
2470
|
-
isCallingCanDrop = false;
|
2471
|
-
}
|
2472
|
-
}
|
2473
|
-
isOver(options) {
|
2474
|
-
if (!this.targetId) {
|
2475
|
-
return false;
|
2476
|
-
}
|
2477
|
-
return this.internalMonitor.isOverTarget(this.targetId, options);
|
2478
|
-
}
|
2479
|
-
getItemType() {
|
2480
|
-
return this.internalMonitor.getItemType();
|
2481
|
-
}
|
2482
|
-
getItem() {
|
2483
|
-
return this.internalMonitor.getItem();
|
2484
|
-
}
|
2485
|
-
getDropResult() {
|
2486
|
-
return this.internalMonitor.getDropResult();
|
2487
|
-
}
|
2488
|
-
didDrop() {
|
2489
|
-
return this.internalMonitor.didDrop();
|
2490
|
-
}
|
2491
|
-
getInitialClientOffset() {
|
2492
|
-
return this.internalMonitor.getInitialClientOffset();
|
2493
|
-
}
|
2494
|
-
getInitialSourceClientOffset() {
|
2495
|
-
return this.internalMonitor.getInitialSourceClientOffset();
|
2496
|
-
}
|
2497
|
-
getSourceClientOffset() {
|
2498
|
-
return this.internalMonitor.getSourceClientOffset();
|
2499
|
-
}
|
2500
|
-
getClientOffset() {
|
2501
|
-
return this.internalMonitor.getClientOffset();
|
2502
|
-
}
|
2503
|
-
getDifferenceFromInitialOffset() {
|
2504
|
-
return this.internalMonitor.getDifferenceFromInitialOffset();
|
2505
|
-
}
|
2506
|
-
constructor(manager){
|
2507
|
-
this.targetId = null;
|
2508
|
-
this.internalMonitor = manager.getMonitor();
|
2509
|
-
}
|
2510
|
-
}
|
2511
|
-
|
2512
|
-
function registerTarget(type, target, manager) {
|
2513
|
-
const registry = manager.getRegistry();
|
2514
|
-
const targetId = registry.addTarget(type, target);
|
2515
|
-
return [
|
2516
|
-
targetId,
|
2517
|
-
()=>registry.removeTarget(targetId)
|
2518
|
-
];
|
2519
|
-
}
|
2520
|
-
function registerSource(type, source, manager) {
|
2521
|
-
const registry = manager.getRegistry();
|
2522
|
-
const sourceId = registry.addSource(type, source);
|
2523
|
-
return [
|
2524
|
-
sourceId,
|
2525
|
-
()=>registry.removeSource(sourceId)
|
2526
|
-
];
|
2527
|
-
}
|
2528
|
-
|
2529
|
-
function shallowEqual(objA, objB, compare, compareContext) {
|
2530
|
-
let compareResult = compare ? compare.call(compareContext, objA, objB) : void 0;
|
2531
|
-
if (compareResult !== void 0) {
|
2532
|
-
return !!compareResult;
|
2533
|
-
}
|
2534
|
-
if (objA === objB) {
|
2535
|
-
return true;
|
2536
|
-
}
|
2537
|
-
if (typeof objA !== 'object' || !objA || typeof objB !== 'object' || !objB) {
|
2538
|
-
return false;
|
2539
|
-
}
|
2540
|
-
const keysA = Object.keys(objA);
|
2541
|
-
const keysB = Object.keys(objB);
|
2542
|
-
if (keysA.length !== keysB.length) {
|
2543
|
-
return false;
|
2544
|
-
}
|
2545
|
-
const bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
|
2546
|
-
// Test for A's keys different from B.
|
2547
|
-
for(let idx = 0; idx < keysA.length; idx++){
|
2548
|
-
const key = keysA[idx];
|
2549
|
-
if (!bHasOwnProperty(key)) {
|
2550
|
-
return false;
|
2551
|
-
}
|
2552
|
-
const valueA = objA[key];
|
2553
|
-
const valueB = objB[key];
|
2554
|
-
compareResult = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
|
2555
|
-
if (compareResult === false || compareResult === void 0 && valueA !== valueB) {
|
2556
|
-
return false;
|
2557
|
-
}
|
2558
|
-
}
|
2559
|
-
return true;
|
2560
|
-
}
|
2561
|
-
|
2562
|
-
function isRef(obj) {
|
2563
|
-
return(// eslint-disable-next-line no-prototype-builtins
|
2564
|
-
obj !== null && typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, 'current'));
|
2565
|
-
}
|
2566
|
-
|
2567
|
-
function throwIfCompositeComponentElement(element) {
|
2568
|
-
// Custom components can no longer be wrapped directly in React DnD 2.0
|
2569
|
-
// so that we don't need to depend on findDOMNode() from react-dom.
|
2570
|
-
if (typeof element.type === 'string') {
|
2571
|
-
return;
|
2572
|
-
}
|
2573
|
-
const displayName = element.type.displayName || element.type.name || 'the component';
|
2574
|
-
throw new Error('Only native element nodes can now be passed to React DnD connectors.' + `You can either wrap ${displayName} into a <div>, or turn it into a ` + 'drag source or a drop target itself.');
|
2575
|
-
}
|
2576
|
-
function wrapHookToRecognizeElement(hook) {
|
2577
|
-
return (elementOrNode = null, options = null)=>{
|
2578
|
-
// When passed a node, call the hook straight away.
|
2579
|
-
if (!React.isValidElement(elementOrNode)) {
|
2580
|
-
const node = elementOrNode;
|
2581
|
-
hook(node, options);
|
2582
|
-
// return the node so it can be chained (e.g. when within callback refs
|
2583
|
-
// <div ref={node => connectDragSource(connectDropTarget(node))}/>
|
2584
|
-
return node;
|
2585
|
-
}
|
2586
|
-
// If passed a ReactElement, clone it and attach this function as a ref.
|
2587
|
-
// This helps us achieve a neat API where user doesn't even know that refs
|
2588
|
-
// are being used under the hood.
|
2589
|
-
const element = elementOrNode;
|
2590
|
-
throwIfCompositeComponentElement(element);
|
2591
|
-
// When no options are passed, use the hook directly
|
2592
|
-
const ref = options ? (node)=>hook(node, options)
|
2593
|
-
: hook;
|
2594
|
-
return cloneWithRef(element, ref);
|
2595
|
-
};
|
2596
|
-
}
|
2597
|
-
function wrapConnectorHooks(hooks) {
|
2598
|
-
const wrappedHooks = {};
|
2599
|
-
Object.keys(hooks).forEach((key)=>{
|
2600
|
-
const hook = hooks[key];
|
2601
|
-
// ref objects should be passed straight through without wrapping
|
2602
|
-
if (key.endsWith('Ref')) {
|
2603
|
-
wrappedHooks[key] = hooks[key];
|
2604
|
-
} else {
|
2605
|
-
const wrappedHook = wrapHookToRecognizeElement(hook);
|
2606
|
-
wrappedHooks[key] = ()=>wrappedHook
|
2607
|
-
;
|
2608
|
-
}
|
2609
|
-
});
|
2610
|
-
return wrappedHooks;
|
2611
|
-
}
|
2612
|
-
function setRef(ref, node) {
|
2613
|
-
if (typeof ref === 'function') {
|
2614
|
-
ref(node);
|
2615
|
-
} else {
|
2616
|
-
ref.current = node;
|
2617
|
-
}
|
2618
|
-
}
|
2619
|
-
function cloneWithRef(element, newRef) {
|
2620
|
-
const previousRef = element.ref;
|
2621
|
-
invariant(typeof previousRef !== 'string', 'Cannot connect React DnD to an element with an existing string ref. ' + 'Please convert it to use a callback ref instead, or wrap it into a <span> or <div>. ' + 'Read more: https://reactjs.org/docs/refs-and-the-dom.html#callback-refs');
|
2622
|
-
if (!previousRef) {
|
2623
|
-
// When there is no ref on the element, use the new ref directly
|
2624
|
-
return React.cloneElement(element, {
|
2625
|
-
ref: newRef
|
2626
|
-
});
|
2627
|
-
} else {
|
2628
|
-
return React.cloneElement(element, {
|
2629
|
-
ref: (node)=>{
|
2630
|
-
setRef(previousRef, node);
|
2631
|
-
setRef(newRef, node);
|
2632
|
-
}
|
2633
|
-
});
|
2634
|
-
}
|
2635
|
-
}
|
2636
|
-
|
2637
|
-
class SourceConnector {
|
2638
|
-
receiveHandlerId(newHandlerId) {
|
2639
|
-
if (this.handlerId === newHandlerId) {
|
2640
|
-
return;
|
2641
|
-
}
|
2642
|
-
this.handlerId = newHandlerId;
|
2643
|
-
this.reconnect();
|
2644
|
-
}
|
2645
|
-
get connectTarget() {
|
2646
|
-
return this.dragSource;
|
2647
|
-
}
|
2648
|
-
get dragSourceOptions() {
|
2649
|
-
return this.dragSourceOptionsInternal;
|
2650
|
-
}
|
2651
|
-
set dragSourceOptions(options) {
|
2652
|
-
this.dragSourceOptionsInternal = options;
|
2653
|
-
}
|
2654
|
-
get dragPreviewOptions() {
|
2655
|
-
return this.dragPreviewOptionsInternal;
|
2656
|
-
}
|
2657
|
-
set dragPreviewOptions(options) {
|
2658
|
-
this.dragPreviewOptionsInternal = options;
|
2659
|
-
}
|
2660
|
-
reconnect() {
|
2661
|
-
const didChange = this.reconnectDragSource();
|
2662
|
-
this.reconnectDragPreview(didChange);
|
2663
|
-
}
|
2664
|
-
reconnectDragSource() {
|
2665
|
-
const dragSource = this.dragSource;
|
2666
|
-
// if nothing has changed then don't resubscribe
|
2667
|
-
const didChange = this.didHandlerIdChange() || this.didConnectedDragSourceChange() || this.didDragSourceOptionsChange();
|
2668
|
-
if (didChange) {
|
2669
|
-
this.disconnectDragSource();
|
2670
|
-
}
|
2671
|
-
if (!this.handlerId) {
|
2672
|
-
return didChange;
|
2673
|
-
}
|
2674
|
-
if (!dragSource) {
|
2675
|
-
this.lastConnectedDragSource = dragSource;
|
2676
|
-
return didChange;
|
2677
|
-
}
|
2678
|
-
if (didChange) {
|
2679
|
-
this.lastConnectedHandlerId = this.handlerId;
|
2680
|
-
this.lastConnectedDragSource = dragSource;
|
2681
|
-
this.lastConnectedDragSourceOptions = this.dragSourceOptions;
|
2682
|
-
this.dragSourceUnsubscribe = this.backend.connectDragSource(this.handlerId, dragSource, this.dragSourceOptions);
|
2683
|
-
}
|
2684
|
-
return didChange;
|
2685
|
-
}
|
2686
|
-
reconnectDragPreview(forceDidChange = false) {
|
2687
|
-
const dragPreview = this.dragPreview;
|
2688
|
-
// if nothing has changed then don't resubscribe
|
2689
|
-
const didChange = forceDidChange || this.didHandlerIdChange() || this.didConnectedDragPreviewChange() || this.didDragPreviewOptionsChange();
|
2690
|
-
if (didChange) {
|
2691
|
-
this.disconnectDragPreview();
|
2692
|
-
}
|
2693
|
-
if (!this.handlerId) {
|
2694
|
-
return;
|
2695
|
-
}
|
2696
|
-
if (!dragPreview) {
|
2697
|
-
this.lastConnectedDragPreview = dragPreview;
|
2698
|
-
return;
|
2699
|
-
}
|
2700
|
-
if (didChange) {
|
2701
|
-
this.lastConnectedHandlerId = this.handlerId;
|
2702
|
-
this.lastConnectedDragPreview = dragPreview;
|
2703
|
-
this.lastConnectedDragPreviewOptions = this.dragPreviewOptions;
|
2704
|
-
this.dragPreviewUnsubscribe = this.backend.connectDragPreview(this.handlerId, dragPreview, this.dragPreviewOptions);
|
2705
|
-
}
|
2706
|
-
}
|
2707
|
-
didHandlerIdChange() {
|
2708
|
-
return this.lastConnectedHandlerId !== this.handlerId;
|
2709
|
-
}
|
2710
|
-
didConnectedDragSourceChange() {
|
2711
|
-
return this.lastConnectedDragSource !== this.dragSource;
|
2712
|
-
}
|
2713
|
-
didConnectedDragPreviewChange() {
|
2714
|
-
return this.lastConnectedDragPreview !== this.dragPreview;
|
2715
|
-
}
|
2716
|
-
didDragSourceOptionsChange() {
|
2717
|
-
return !shallowEqual(this.lastConnectedDragSourceOptions, this.dragSourceOptions);
|
2718
|
-
}
|
2719
|
-
didDragPreviewOptionsChange() {
|
2720
|
-
return !shallowEqual(this.lastConnectedDragPreviewOptions, this.dragPreviewOptions);
|
2721
|
-
}
|
2722
|
-
disconnectDragSource() {
|
2723
|
-
if (this.dragSourceUnsubscribe) {
|
2724
|
-
this.dragSourceUnsubscribe();
|
2725
|
-
this.dragSourceUnsubscribe = undefined;
|
2726
|
-
}
|
2727
|
-
}
|
2728
|
-
disconnectDragPreview() {
|
2729
|
-
if (this.dragPreviewUnsubscribe) {
|
2730
|
-
this.dragPreviewUnsubscribe();
|
2731
|
-
this.dragPreviewUnsubscribe = undefined;
|
2732
|
-
this.dragPreviewNode = null;
|
2733
|
-
this.dragPreviewRef = null;
|
2734
|
-
}
|
2735
|
-
}
|
2736
|
-
get dragSource() {
|
2737
|
-
return this.dragSourceNode || this.dragSourceRef && this.dragSourceRef.current;
|
2738
|
-
}
|
2739
|
-
get dragPreview() {
|
2740
|
-
return this.dragPreviewNode || this.dragPreviewRef && this.dragPreviewRef.current;
|
2741
|
-
}
|
2742
|
-
clearDragSource() {
|
2743
|
-
this.dragSourceNode = null;
|
2744
|
-
this.dragSourceRef = null;
|
2745
|
-
}
|
2746
|
-
clearDragPreview() {
|
2747
|
-
this.dragPreviewNode = null;
|
2748
|
-
this.dragPreviewRef = null;
|
2749
|
-
}
|
2750
|
-
constructor(backend){
|
2751
|
-
this.hooks = wrapConnectorHooks({
|
2752
|
-
dragSource: (node, options)=>{
|
2753
|
-
this.clearDragSource();
|
2754
|
-
this.dragSourceOptions = options || null;
|
2755
|
-
if (isRef(node)) {
|
2756
|
-
this.dragSourceRef = node;
|
2757
|
-
} else {
|
2758
|
-
this.dragSourceNode = node;
|
2759
|
-
}
|
2760
|
-
this.reconnectDragSource();
|
2761
|
-
},
|
2762
|
-
dragPreview: (node, options)=>{
|
2763
|
-
this.clearDragPreview();
|
2764
|
-
this.dragPreviewOptions = options || null;
|
2765
|
-
if (isRef(node)) {
|
2766
|
-
this.dragPreviewRef = node;
|
2767
|
-
} else {
|
2768
|
-
this.dragPreviewNode = node;
|
2769
|
-
}
|
2770
|
-
this.reconnectDragPreview();
|
2771
|
-
}
|
2772
|
-
});
|
2773
|
-
this.handlerId = null;
|
2774
|
-
// The drop target may either be attached via ref or connect function
|
2775
|
-
this.dragSourceRef = null;
|
2776
|
-
this.dragSourceOptionsInternal = null;
|
2777
|
-
// The drag preview may either be attached via ref or connect function
|
2778
|
-
this.dragPreviewRef = null;
|
2779
|
-
this.dragPreviewOptionsInternal = null;
|
2780
|
-
this.lastConnectedHandlerId = null;
|
2781
|
-
this.lastConnectedDragSource = null;
|
2782
|
-
this.lastConnectedDragSourceOptions = null;
|
2783
|
-
this.lastConnectedDragPreview = null;
|
2784
|
-
this.lastConnectedDragPreviewOptions = null;
|
2785
|
-
this.backend = backend;
|
2786
|
-
}
|
2787
|
-
}
|
2788
|
-
|
2789
|
-
class TargetConnector {
|
2790
|
-
get connectTarget() {
|
2791
|
-
return this.dropTarget;
|
2792
|
-
}
|
2793
|
-
reconnect() {
|
2794
|
-
// if nothing has changed then don't resubscribe
|
2795
|
-
const didChange = this.didHandlerIdChange() || this.didDropTargetChange() || this.didOptionsChange();
|
2796
|
-
if (didChange) {
|
2797
|
-
this.disconnectDropTarget();
|
2798
|
-
}
|
2799
|
-
const dropTarget = this.dropTarget;
|
2800
|
-
if (!this.handlerId) {
|
2801
|
-
return;
|
2802
|
-
}
|
2803
|
-
if (!dropTarget) {
|
2804
|
-
this.lastConnectedDropTarget = dropTarget;
|
2805
|
-
return;
|
2806
|
-
}
|
2807
|
-
if (didChange) {
|
2808
|
-
this.lastConnectedHandlerId = this.handlerId;
|
2809
|
-
this.lastConnectedDropTarget = dropTarget;
|
2810
|
-
this.lastConnectedDropTargetOptions = this.dropTargetOptions;
|
2811
|
-
this.unsubscribeDropTarget = this.backend.connectDropTarget(this.handlerId, dropTarget, this.dropTargetOptions);
|
2812
|
-
}
|
2813
|
-
}
|
2814
|
-
receiveHandlerId(newHandlerId) {
|
2815
|
-
if (newHandlerId === this.handlerId) {
|
2816
|
-
return;
|
2817
|
-
}
|
2818
|
-
this.handlerId = newHandlerId;
|
2819
|
-
this.reconnect();
|
2820
|
-
}
|
2821
|
-
get dropTargetOptions() {
|
2822
|
-
return this.dropTargetOptionsInternal;
|
2823
|
-
}
|
2824
|
-
set dropTargetOptions(options) {
|
2825
|
-
this.dropTargetOptionsInternal = options;
|
2826
|
-
}
|
2827
|
-
didHandlerIdChange() {
|
2828
|
-
return this.lastConnectedHandlerId !== this.handlerId;
|
2829
|
-
}
|
2830
|
-
didDropTargetChange() {
|
2831
|
-
return this.lastConnectedDropTarget !== this.dropTarget;
|
2832
|
-
}
|
2833
|
-
didOptionsChange() {
|
2834
|
-
return !shallowEqual(this.lastConnectedDropTargetOptions, this.dropTargetOptions);
|
2835
|
-
}
|
2836
|
-
disconnectDropTarget() {
|
2837
|
-
if (this.unsubscribeDropTarget) {
|
2838
|
-
this.unsubscribeDropTarget();
|
2839
|
-
this.unsubscribeDropTarget = undefined;
|
2840
|
-
}
|
2841
|
-
}
|
2842
|
-
get dropTarget() {
|
2843
|
-
return this.dropTargetNode || this.dropTargetRef && this.dropTargetRef.current;
|
2844
|
-
}
|
2845
|
-
clearDropTarget() {
|
2846
|
-
this.dropTargetRef = null;
|
2847
|
-
this.dropTargetNode = null;
|
2848
|
-
}
|
2849
|
-
constructor(backend){
|
2850
|
-
this.hooks = wrapConnectorHooks({
|
2851
|
-
dropTarget: (node, options)=>{
|
2852
|
-
this.clearDropTarget();
|
2853
|
-
this.dropTargetOptions = options;
|
2854
|
-
if (isRef(node)) {
|
2855
|
-
this.dropTargetRef = node;
|
2856
|
-
} else {
|
2857
|
-
this.dropTargetNode = node;
|
2858
|
-
}
|
2859
|
-
this.reconnect();
|
2860
|
-
}
|
2861
|
-
});
|
2862
|
-
this.handlerId = null;
|
2863
|
-
// The drop target may either be attached via ref or connect function
|
2864
|
-
this.dropTargetRef = null;
|
2865
|
-
this.dropTargetOptionsInternal = null;
|
2866
|
-
this.lastConnectedHandlerId = null;
|
2867
|
-
this.lastConnectedDropTarget = null;
|
2868
|
-
this.lastConnectedDropTargetOptions = null;
|
2869
|
-
this.backend = backend;
|
2870
|
-
}
|
2871
|
-
}
|
2872
|
-
|
2873
|
-
/**
|
2874
|
-
* A hook to retrieve the DragDropManager from Context
|
2875
|
-
*/ function useDragDropManager() {
|
2876
|
-
const { dragDropManager } = React.useContext(DndContext);
|
2877
|
-
invariant(dragDropManager != null, 'Expected drag drop context');
|
2878
|
-
return dragDropManager;
|
2879
|
-
}
|
2880
|
-
|
2881
|
-
function useDragSourceConnector(dragSourceOptions, dragPreviewOptions) {
|
2882
|
-
const manager = useDragDropManager();
|
2883
|
-
const connector = React.useMemo(()=>new SourceConnector(manager.getBackend())
|
2884
|
-
, [
|
2885
|
-
manager
|
2886
|
-
]);
|
2887
|
-
useIsomorphicLayoutEffect(()=>{
|
2888
|
-
connector.dragSourceOptions = dragSourceOptions || null;
|
2889
|
-
connector.reconnect();
|
2890
|
-
return ()=>connector.disconnectDragSource()
|
2891
|
-
;
|
2892
|
-
}, [
|
2893
|
-
connector,
|
2894
|
-
dragSourceOptions
|
2895
|
-
]);
|
2896
|
-
useIsomorphicLayoutEffect(()=>{
|
2897
|
-
connector.dragPreviewOptions = dragPreviewOptions || null;
|
2898
|
-
connector.reconnect();
|
2899
|
-
return ()=>connector.disconnectDragPreview()
|
2900
|
-
;
|
2901
|
-
}, [
|
2902
|
-
connector,
|
2903
|
-
dragPreviewOptions
|
2904
|
-
]);
|
2905
|
-
return connector;
|
2906
|
-
}
|
2907
|
-
|
2908
|
-
function useDragSourceMonitor() {
|
2909
|
-
const manager = useDragDropManager();
|
2910
|
-
return React.useMemo(()=>new DragSourceMonitorImpl(manager)
|
2911
|
-
, [
|
2912
|
-
manager
|
2913
|
-
]);
|
2914
|
-
}
|
2915
|
-
|
2916
|
-
class DragSourceImpl {
|
2917
|
-
beginDrag() {
|
2918
|
-
const spec = this.spec;
|
2919
|
-
const monitor = this.monitor;
|
2920
|
-
let result = null;
|
2921
|
-
if (typeof spec.item === 'object') {
|
2922
|
-
result = spec.item;
|
2923
|
-
} else if (typeof spec.item === 'function') {
|
2924
|
-
result = spec.item(monitor);
|
2925
|
-
} else {
|
2926
|
-
result = {};
|
2927
|
-
}
|
2928
|
-
return result !== null && result !== void 0 ? result : null;
|
2929
|
-
}
|
2930
|
-
canDrag() {
|
2931
|
-
const spec = this.spec;
|
2932
|
-
const monitor = this.monitor;
|
2933
|
-
if (typeof spec.canDrag === 'boolean') {
|
2934
|
-
return spec.canDrag;
|
2935
|
-
} else if (typeof spec.canDrag === 'function') {
|
2936
|
-
return spec.canDrag(monitor);
|
2937
|
-
} else {
|
2938
|
-
return true;
|
2939
|
-
}
|
2940
|
-
}
|
2941
|
-
isDragging(globalMonitor, target) {
|
2942
|
-
const spec = this.spec;
|
2943
|
-
const monitor = this.monitor;
|
2944
|
-
const { isDragging } = spec;
|
2945
|
-
return isDragging ? isDragging(monitor) : target === globalMonitor.getSourceId();
|
2946
|
-
}
|
2947
|
-
endDrag() {
|
2948
|
-
const spec = this.spec;
|
2949
|
-
const monitor = this.monitor;
|
2950
|
-
const connector = this.connector;
|
2951
|
-
const { end } = spec;
|
2952
|
-
if (end) {
|
2953
|
-
end(monitor.getItem(), monitor);
|
2954
|
-
}
|
2955
|
-
connector.reconnect();
|
2956
|
-
}
|
2957
|
-
constructor(spec, monitor, connector){
|
2958
|
-
this.spec = spec;
|
2959
|
-
this.monitor = monitor;
|
2960
|
-
this.connector = connector;
|
2961
|
-
}
|
2962
|
-
}
|
2963
|
-
|
2964
|
-
function useDragSource(spec, monitor, connector) {
|
2965
|
-
const handler = React.useMemo(()=>new DragSourceImpl(spec, monitor, connector)
|
2966
|
-
, [
|
2967
|
-
monitor,
|
2968
|
-
connector
|
2969
|
-
]);
|
2970
|
-
React.useEffect(()=>{
|
2971
|
-
handler.spec = spec;
|
2972
|
-
}, [
|
2973
|
-
spec
|
2974
|
-
]);
|
2975
|
-
return handler;
|
2976
|
-
}
|
2977
|
-
|
2978
|
-
function useDragType(spec) {
|
2979
|
-
return React.useMemo(()=>{
|
2980
|
-
const result = spec.type;
|
2981
|
-
invariant(result != null, 'spec.type must be defined');
|
2982
|
-
return result;
|
2983
|
-
}, [
|
2984
|
-
spec
|
2985
|
-
]);
|
2986
|
-
}
|
2987
|
-
|
2988
|
-
function useRegisteredDragSource(spec, monitor, connector) {
|
2989
|
-
const manager = useDragDropManager();
|
2990
|
-
const handler = useDragSource(spec, monitor, connector);
|
2991
|
-
const itemType = useDragType(spec);
|
2992
|
-
useIsomorphicLayoutEffect(function registerDragSource() {
|
2993
|
-
if (itemType != null) {
|
2994
|
-
const [handlerId, unregister] = registerSource(itemType, handler, manager);
|
2995
|
-
monitor.receiveHandlerId(handlerId);
|
2996
|
-
connector.receiveHandlerId(handlerId);
|
2997
|
-
return unregister;
|
2998
|
-
}
|
2999
|
-
return;
|
3000
|
-
}, [
|
3001
|
-
manager,
|
3002
|
-
monitor,
|
3003
|
-
connector,
|
3004
|
-
handler,
|
3005
|
-
itemType
|
3006
|
-
]);
|
3007
|
-
}
|
3008
|
-
|
3009
|
-
/**
|
3010
|
-
* useDragSource hook
|
3011
|
-
* @param sourceSpec The drag source specification (object or function, function preferred)
|
3012
|
-
* @param deps The memoization deps array to use when evaluating spec changes
|
3013
|
-
*/ function useDrag(specArg, deps) {
|
3014
|
-
const spec = useOptionalFactory(specArg, deps);
|
3015
|
-
invariant(!spec.begin, `useDrag::spec.begin was deprecated in v14. Replace spec.begin() with spec.item(). (see more here - https://react-dnd.github.io/react-dnd/docs/api/use-drag)`);
|
3016
|
-
const monitor = useDragSourceMonitor();
|
3017
|
-
const connector = useDragSourceConnector(spec.options, spec.previewOptions);
|
3018
|
-
useRegisteredDragSource(spec, monitor, connector);
|
3019
|
-
return [
|
3020
|
-
useCollectedProps(spec.collect, monitor, connector),
|
3021
|
-
useConnectDragSource(connector),
|
3022
|
-
useConnectDragPreview(connector),
|
3023
|
-
];
|
3024
|
-
}
|
3025
|
-
|
3026
|
-
function useConnectDropTarget(connector) {
|
3027
|
-
return React.useMemo(()=>connector.hooks.dropTarget()
|
3028
|
-
, [
|
3029
|
-
connector
|
3030
|
-
]);
|
3031
|
-
}
|
3032
|
-
|
3033
|
-
function useDropTargetConnector(options) {
|
3034
|
-
const manager = useDragDropManager();
|
3035
|
-
const connector = React.useMemo(()=>new TargetConnector(manager.getBackend())
|
3036
|
-
, [
|
3037
|
-
manager
|
3038
|
-
]);
|
3039
|
-
useIsomorphicLayoutEffect(()=>{
|
3040
|
-
connector.dropTargetOptions = options || null;
|
3041
|
-
connector.reconnect();
|
3042
|
-
return ()=>connector.disconnectDropTarget()
|
3043
|
-
;
|
3044
|
-
}, [
|
3045
|
-
options
|
3046
|
-
]);
|
3047
|
-
return connector;
|
3048
|
-
}
|
3049
|
-
|
3050
|
-
function useDropTargetMonitor() {
|
3051
|
-
const manager = useDragDropManager();
|
3052
|
-
return React.useMemo(()=>new DropTargetMonitorImpl(manager)
|
3053
|
-
, [
|
3054
|
-
manager
|
3055
|
-
]);
|
3056
|
-
}
|
3057
|
-
|
3058
|
-
/**
|
3059
|
-
* Internal utility hook to get an array-version of spec.accept.
|
3060
|
-
* The main utility here is that we aren't creating a new array on every render if a non-array spec.accept is passed in.
|
3061
|
-
* @param spec
|
3062
|
-
*/ function useAccept(spec) {
|
3063
|
-
const { accept } = spec;
|
3064
|
-
return React.useMemo(()=>{
|
3065
|
-
invariant(spec.accept != null, 'accept must be defined');
|
3066
|
-
return Array.isArray(accept) ? accept : [
|
3067
|
-
accept
|
3068
|
-
];
|
3069
|
-
}, [
|
3070
|
-
accept
|
3071
|
-
]);
|
3072
|
-
}
|
3073
|
-
|
3074
|
-
class DropTargetImpl {
|
3075
|
-
canDrop() {
|
3076
|
-
const spec = this.spec;
|
3077
|
-
const monitor = this.monitor;
|
3078
|
-
return spec.canDrop ? spec.canDrop(monitor.getItem(), monitor) : true;
|
3079
|
-
}
|
3080
|
-
hover() {
|
3081
|
-
const spec = this.spec;
|
3082
|
-
const monitor = this.monitor;
|
3083
|
-
if (spec.hover) {
|
3084
|
-
spec.hover(monitor.getItem(), monitor);
|
3085
|
-
}
|
3086
|
-
}
|
3087
|
-
drop() {
|
3088
|
-
const spec = this.spec;
|
3089
|
-
const monitor = this.monitor;
|
3090
|
-
if (spec.drop) {
|
3091
|
-
return spec.drop(monitor.getItem(), monitor);
|
3092
|
-
}
|
3093
|
-
return;
|
3094
|
-
}
|
3095
|
-
constructor(spec, monitor){
|
3096
|
-
this.spec = spec;
|
3097
|
-
this.monitor = monitor;
|
3098
|
-
}
|
3099
|
-
}
|
3100
|
-
|
3101
|
-
function useDropTarget(spec, monitor) {
|
3102
|
-
const dropTarget = React.useMemo(()=>new DropTargetImpl(spec, monitor)
|
3103
|
-
, [
|
3104
|
-
monitor
|
3105
|
-
]);
|
3106
|
-
React.useEffect(()=>{
|
3107
|
-
dropTarget.spec = spec;
|
3108
|
-
}, [
|
3109
|
-
spec
|
3110
|
-
]);
|
3111
|
-
return dropTarget;
|
3112
|
-
}
|
3113
|
-
|
3114
|
-
function useRegisteredDropTarget(spec, monitor, connector) {
|
3115
|
-
const manager = useDragDropManager();
|
3116
|
-
const dropTarget = useDropTarget(spec, monitor);
|
3117
|
-
const accept = useAccept(spec);
|
3118
|
-
useIsomorphicLayoutEffect(function registerDropTarget() {
|
3119
|
-
const [handlerId, unregister] = registerTarget(accept, dropTarget, manager);
|
3120
|
-
monitor.receiveHandlerId(handlerId);
|
3121
|
-
connector.receiveHandlerId(handlerId);
|
3122
|
-
return unregister;
|
3123
|
-
}, [
|
3124
|
-
manager,
|
3125
|
-
monitor,
|
3126
|
-
dropTarget,
|
3127
|
-
connector,
|
3128
|
-
accept.map((a)=>a.toString()
|
3129
|
-
).join('|'),
|
3130
|
-
]);
|
3131
|
-
}
|
3132
|
-
|
3133
|
-
/**
|
3134
|
-
* useDropTarget Hook
|
3135
|
-
* @param spec The drop target specification (object or function, function preferred)
|
3136
|
-
* @param deps The memoization deps array to use when evaluating spec changes
|
3137
|
-
*/ function useDrop(specArg, deps) {
|
3138
|
-
const spec = useOptionalFactory(specArg, deps);
|
3139
|
-
const monitor = useDropTargetMonitor();
|
3140
|
-
const connector = useDropTargetConnector(spec.options);
|
3141
|
-
useRegisteredDropTarget(spec, monitor, connector);
|
3142
|
-
return [
|
3143
|
-
useCollectedProps(spec.collect, monitor, connector),
|
3144
|
-
useConnectDropTarget(connector),
|
3145
|
-
];
|
3146
|
-
}
|
3147
|
-
|
3148
372
|
var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
|
3149
373
|
var column = _ref.column,
|
3150
374
|
table = _ref.table;
|
@@ -3196,8 +420,10 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
|
|
3196
420
|
})))));
|
3197
421
|
};
|
3198
422
|
|
3199
|
-
var MRT_GrabHandleButton =
|
3200
|
-
var
|
423
|
+
var MRT_GrabHandleButton = function MRT_GrabHandleButton(_ref) {
|
424
|
+
var handleDragStart = _ref.handleDragStart,
|
425
|
+
handleDragEnd = _ref.handleDragEnd,
|
426
|
+
table = _ref.table;
|
3201
427
|
var _table$options = table.options,
|
3202
428
|
DragHandleIcon = _table$options.icons.DragHandleIcon,
|
3203
429
|
localization = _table$options.localization;
|
@@ -3209,7 +435,9 @@ var MRT_GrabHandleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
3209
435
|
title: localization.grab
|
3210
436
|
}, React__default.createElement(material.IconButton, {
|
3211
437
|
disableRipple: true,
|
3212
|
-
|
438
|
+
draggable: "true",
|
439
|
+
onDragStart: handleDragStart,
|
440
|
+
onDragEnd: handleDragEnd,
|
3213
441
|
size: "small",
|
3214
442
|
sx: {
|
3215
443
|
cursor: 'grab',
|
@@ -3226,7 +454,7 @@ var MRT_GrabHandleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
3226
454
|
}
|
3227
455
|
}
|
3228
456
|
}, React__default.createElement(DragHandleIcon, null)));
|
3229
|
-
}
|
457
|
+
};
|
3230
458
|
|
3231
459
|
var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
|
3232
460
|
var itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
|
@@ -3445,6 +673,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
|
|
3445
673
|
var _column$columns2;
|
3446
674
|
|
3447
675
|
var allColumns = _ref.allColumns,
|
676
|
+
currentHoveredColumn = _ref.currentHoveredColumn,
|
677
|
+
setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
3448
678
|
column = _ref.column,
|
3449
679
|
isSubMenu = _ref.isSubMenu,
|
3450
680
|
table = _ref.table;
|
@@ -3461,30 +691,6 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
|
|
3461
691
|
|
3462
692
|
var columnDef = column.columnDef;
|
3463
693
|
var columnDefType = columnDef.columnDefType;
|
3464
|
-
|
3465
|
-
var _useDrop = useDrop({
|
3466
|
-
accept: 'column',
|
3467
|
-
drop: function drop(movingColumn) {
|
3468
|
-
var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
|
3469
|
-
setColumnOrder(newColumnOrder);
|
3470
|
-
}
|
3471
|
-
}),
|
3472
|
-
dropRef = _useDrop[1];
|
3473
|
-
|
3474
|
-
var _useDrag = useDrag({
|
3475
|
-
collect: function collect(monitor) {
|
3476
|
-
return {
|
3477
|
-
isDragging: monitor.isDragging()
|
3478
|
-
};
|
3479
|
-
},
|
3480
|
-
item: function item() {
|
3481
|
-
return column;
|
3482
|
-
},
|
3483
|
-
type: 'column'
|
3484
|
-
}),
|
3485
|
-
dragRef = _useDrag[1],
|
3486
|
-
previewRef = _useDrag[2];
|
3487
|
-
|
3488
694
|
var switchChecked = columnDefType !== 'group' && column.getIsVisible() || columnDefType === 'group' && column.getLeafColumns().some(function (col) {
|
3489
695
|
return col.getIsVisible();
|
3490
696
|
});
|
@@ -3501,32 +707,64 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
|
|
3501
707
|
}
|
3502
708
|
};
|
3503
709
|
|
710
|
+
var menuItemRef = React__default.useRef(null);
|
711
|
+
|
712
|
+
var _useState = React.useState(false),
|
713
|
+
isDragging = _useState[0],
|
714
|
+
setIsDragging = _useState[1];
|
715
|
+
|
716
|
+
var handleDragStart = function handleDragStart(e) {
|
717
|
+
setIsDragging(true);
|
718
|
+
e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
|
719
|
+
};
|
720
|
+
|
721
|
+
var handleDragEnd = function handleDragEnd(_e) {
|
722
|
+
setIsDragging(false);
|
723
|
+
setCurrentHoveredColumn(null);
|
724
|
+
|
725
|
+
if (currentHoveredColumn) {
|
726
|
+
setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
|
727
|
+
}
|
728
|
+
};
|
729
|
+
|
730
|
+
var handleDragEnter = function handleDragEnter(_e) {
|
731
|
+
if (!isDragging) {
|
732
|
+
setCurrentHoveredColumn(column);
|
733
|
+
}
|
734
|
+
};
|
735
|
+
|
3504
736
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
|
3505
|
-
|
3506
|
-
|
3507
|
-
|
3508
|
-
|
3509
|
-
|
3510
|
-
|
3511
|
-
|
737
|
+
disableRipple: enableColumnOrdering,
|
738
|
+
ref: menuItemRef,
|
739
|
+
onDragEnter: handleDragEnter,
|
740
|
+
sx: function sx(theme) {
|
741
|
+
return {
|
742
|
+
alignItems: 'center',
|
743
|
+
justifyContent: 'flex-start',
|
744
|
+
my: 0,
|
745
|
+
opacity: isDragging ? 0.5 : 1,
|
746
|
+
outline: isDragging ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : 'none',
|
747
|
+
pl: (column.depth + 0.5) * 2 + "rem",
|
748
|
+
py: '6px'
|
749
|
+
};
|
3512
750
|
}
|
3513
751
|
}, React__default.createElement(material.Box, {
|
3514
|
-
ref: previewRef,
|
3515
752
|
sx: {
|
3516
753
|
display: 'flex',
|
3517
754
|
flexWrap: 'nowrap',
|
3518
755
|
gap: '8px'
|
3519
756
|
}
|
3520
|
-
}, columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
|
757
|
+
}, !isSubMenu && columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
|
3521
758
|
return col.columnDef.columnDefType === 'group';
|
3522
759
|
}) && (columnDef.enableColumnOrdering !== false ? React__default.createElement(MRT_GrabHandleButton, {
|
3523
|
-
|
760
|
+
handleDragEnd: handleDragEnd,
|
761
|
+
handleDragStart: handleDragStart,
|
3524
762
|
table: table
|
3525
763
|
}) : React__default.createElement(material.Box, {
|
3526
764
|
sx: {
|
3527
765
|
width: '28px'
|
3528
766
|
}
|
3529
|
-
})),
|
767
|
+
})), !isSubMenu && enablePinning && (column.getCanPin() ? React__default.createElement(MRT_ColumnPinningButtons, {
|
3530
768
|
column: column,
|
3531
769
|
table: table
|
3532
770
|
}) : React__default.createElement(material.Box, {
|
@@ -3561,9 +799,11 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
|
|
3561
799
|
}, columnDef.header))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
|
3562
800
|
return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
|
3563
801
|
allColumns: allColumns,
|
3564
|
-
key: i + "-" + c.id,
|
3565
802
|
column: c,
|
803
|
+
currentHoveredColumn: currentHoveredColumn,
|
3566
804
|
isSubMenu: isSubMenu,
|
805
|
+
key: i + "-" + c.id,
|
806
|
+
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
3567
807
|
table: table
|
3568
808
|
});
|
3569
809
|
}));
|
@@ -3617,6 +857,11 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
3617
857
|
|
3618
858
|
return columns;
|
3619
859
|
}, [columnOrder, columnPinning, getAllColumns(), getCenterLeafColumns(), getLeftLeafColumns(), getRightLeafColumns()]);
|
860
|
+
|
861
|
+
var _useState = React.useState(null),
|
862
|
+
currentHoveredColumn = _useState[0],
|
863
|
+
setCurrentHoveredColumn = _useState[1];
|
864
|
+
|
3620
865
|
return React__default.createElement(material.Menu, {
|
3621
866
|
anchorEl: anchorEl,
|
3622
867
|
open: !!anchorEl,
|
@@ -3654,8 +899,10 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
3654
899
|
return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
|
3655
900
|
allColumns: allColumns,
|
3656
901
|
column: column,
|
902
|
+
currentHoveredColumn: currentHoveredColumn,
|
3657
903
|
isSubMenu: isSubMenu,
|
3658
904
|
key: index + "-" + column.id,
|
905
|
+
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
3659
906
|
table: table
|
3660
907
|
});
|
3661
908
|
}));
|
@@ -4117,1012 +1364,41 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
4117
1364
|
|
4118
1365
|
var handleSelectChange = function handleSelectChange(event) {
|
4119
1366
|
if (selectAll) {
|
4120
|
-
if (selectAllMode === 'all') {
|
4121
|
-
table.getToggleAllRowsSelectedHandler()(event);
|
4122
|
-
} else if (selectAllMode === 'page') {
|
4123
|
-
table.getToggleAllPageRowsSelectedHandler()(event);
|
4124
|
-
}
|
4125
|
-
} else if (row) {
|
4126
|
-
row == null ? void 0 : row.getToggleSelectedHandler()(event);
|
4127
|
-
}
|
4128
|
-
};
|
4129
|
-
|
4130
|
-
var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
|
4131
|
-
table: table
|
4132
|
-
}) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
|
4133
|
-
row: row,
|
4134
|
-
table: table
|
4135
|
-
}) : muiSelectCheckboxProps;
|
4136
|
-
return React__default.createElement(material.Tooltip, {
|
4137
|
-
arrow: true,
|
4138
|
-
enterDelay: 1000,
|
4139
|
-
enterNextDelay: 1000,
|
4140
|
-
title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
|
4141
|
-
}, React__default.createElement(material.Checkbox, Object.assign({
|
4142
|
-
checked: selectAll ? table.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
|
4143
|
-
indeterminate: selectAll ? table.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
|
4144
|
-
inputProps: {
|
4145
|
-
'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
|
4146
|
-
},
|
4147
|
-
onChange: handleSelectChange,
|
4148
|
-
size: density === 'compact' ? 'small' : 'medium'
|
4149
|
-
}, checkboxProps, {
|
4150
|
-
sx: _extends({
|
4151
|
-
height: density === 'compact' ? '1.75rem' : '2.25rem',
|
4152
|
-
width: density === 'compact' ? '1.75rem' : '2.25rem'
|
4153
|
-
}, checkboxProps == null ? void 0 : checkboxProps.sx)
|
4154
|
-
})));
|
4155
|
-
};
|
4156
|
-
|
4157
|
-
// cheap lodash replacements
|
4158
|
-
function memoize(fn) {
|
4159
|
-
let result = null;
|
4160
|
-
const memoized = ()=>{
|
4161
|
-
if (result == null) {
|
4162
|
-
result = fn();
|
4163
|
-
}
|
4164
|
-
return result;
|
4165
|
-
};
|
4166
|
-
return memoized;
|
4167
|
-
}
|
4168
|
-
/**
|
4169
|
-
* drop-in replacement for _.without
|
4170
|
-
*/ function without$1(items, item) {
|
4171
|
-
return items.filter((i)=>i !== item
|
4172
|
-
);
|
4173
|
-
}
|
4174
|
-
function union(itemsA, itemsB) {
|
4175
|
-
const set = new Set();
|
4176
|
-
const insertItem = (item)=>set.add(item)
|
4177
|
-
;
|
4178
|
-
itemsA.forEach(insertItem);
|
4179
|
-
itemsB.forEach(insertItem);
|
4180
|
-
const result = [];
|
4181
|
-
set.forEach((key)=>result.push(key)
|
4182
|
-
);
|
4183
|
-
return result;
|
4184
|
-
}
|
4185
|
-
|
4186
|
-
class EnterLeaveCounter {
|
4187
|
-
enter(enteringNode) {
|
4188
|
-
const previousLength = this.entered.length;
|
4189
|
-
const isNodeEntered = (node)=>this.isNodeInDocument(node) && (!node.contains || node.contains(enteringNode))
|
4190
|
-
;
|
4191
|
-
this.entered = union(this.entered.filter(isNodeEntered), [
|
4192
|
-
enteringNode
|
4193
|
-
]);
|
4194
|
-
return previousLength === 0 && this.entered.length > 0;
|
4195
|
-
}
|
4196
|
-
leave(leavingNode) {
|
4197
|
-
const previousLength = this.entered.length;
|
4198
|
-
this.entered = without$1(this.entered.filter(this.isNodeInDocument), leavingNode);
|
4199
|
-
return previousLength > 0 && this.entered.length === 0;
|
4200
|
-
}
|
4201
|
-
reset() {
|
4202
|
-
this.entered = [];
|
4203
|
-
}
|
4204
|
-
constructor(isNodeInDocument){
|
4205
|
-
this.entered = [];
|
4206
|
-
this.isNodeInDocument = isNodeInDocument;
|
4207
|
-
}
|
4208
|
-
}
|
4209
|
-
|
4210
|
-
class NativeDragSource {
|
4211
|
-
initializeExposedProperties() {
|
4212
|
-
Object.keys(this.config.exposeProperties).forEach((property)=>{
|
4213
|
-
Object.defineProperty(this.item, property, {
|
4214
|
-
configurable: true,
|
4215
|
-
enumerable: true,
|
4216
|
-
get () {
|
4217
|
-
// eslint-disable-next-line no-console
|
4218
|
-
console.warn(`Browser doesn't allow reading "${property}" until the drop event.`);
|
4219
|
-
return null;
|
4220
|
-
}
|
4221
|
-
});
|
4222
|
-
});
|
4223
|
-
}
|
4224
|
-
loadDataTransfer(dataTransfer) {
|
4225
|
-
if (dataTransfer) {
|
4226
|
-
const newProperties = {};
|
4227
|
-
Object.keys(this.config.exposeProperties).forEach((property)=>{
|
4228
|
-
const propertyFn = this.config.exposeProperties[property];
|
4229
|
-
if (propertyFn != null) {
|
4230
|
-
newProperties[property] = {
|
4231
|
-
value: propertyFn(dataTransfer, this.config.matchesTypes),
|
4232
|
-
configurable: true,
|
4233
|
-
enumerable: true
|
4234
|
-
};
|
4235
|
-
}
|
4236
|
-
});
|
4237
|
-
Object.defineProperties(this.item, newProperties);
|
4238
|
-
}
|
4239
|
-
}
|
4240
|
-
canDrag() {
|
4241
|
-
return true;
|
4242
|
-
}
|
4243
|
-
beginDrag() {
|
4244
|
-
return this.item;
|
4245
|
-
}
|
4246
|
-
isDragging(monitor, handle) {
|
4247
|
-
return handle === monitor.getSourceId();
|
4248
|
-
}
|
4249
|
-
endDrag() {
|
4250
|
-
// empty
|
4251
|
-
}
|
4252
|
-
constructor(config){
|
4253
|
-
this.config = config;
|
4254
|
-
this.item = {};
|
4255
|
-
this.initializeExposedProperties();
|
4256
|
-
}
|
4257
|
-
}
|
4258
|
-
|
4259
|
-
const FILE = '__NATIVE_FILE__';
|
4260
|
-
const URL = '__NATIVE_URL__';
|
4261
|
-
const TEXT = '__NATIVE_TEXT__';
|
4262
|
-
const HTML = '__NATIVE_HTML__';
|
4263
|
-
|
4264
|
-
var NativeTypes = {
|
4265
|
-
__proto__: null,
|
4266
|
-
FILE: FILE,
|
4267
|
-
URL: URL,
|
4268
|
-
TEXT: TEXT,
|
4269
|
-
HTML: HTML
|
4270
|
-
};
|
4271
|
-
|
4272
|
-
function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
|
4273
|
-
const result = typesToTry.reduce((resultSoFar, typeToTry)=>resultSoFar || dataTransfer.getData(typeToTry)
|
4274
|
-
, '');
|
4275
|
-
return result != null ? result : defaultValue;
|
4276
|
-
}
|
4277
|
-
|
4278
|
-
const nativeTypesConfig = {
|
4279
|
-
[FILE]: {
|
4280
|
-
exposeProperties: {
|
4281
|
-
files: (dataTransfer)=>Array.prototype.slice.call(dataTransfer.files)
|
4282
|
-
,
|
4283
|
-
items: (dataTransfer)=>dataTransfer.items
|
4284
|
-
,
|
4285
|
-
dataTransfer: (dataTransfer)=>dataTransfer
|
4286
|
-
},
|
4287
|
-
matchesTypes: [
|
4288
|
-
'Files'
|
4289
|
-
]
|
4290
|
-
},
|
4291
|
-
[HTML]: {
|
4292
|
-
exposeProperties: {
|
4293
|
-
html: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '')
|
4294
|
-
,
|
4295
|
-
dataTransfer: (dataTransfer)=>dataTransfer
|
4296
|
-
},
|
4297
|
-
matchesTypes: [
|
4298
|
-
'Html',
|
4299
|
-
'text/html'
|
4300
|
-
]
|
4301
|
-
},
|
4302
|
-
[URL]: {
|
4303
|
-
exposeProperties: {
|
4304
|
-
urls: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n')
|
4305
|
-
,
|
4306
|
-
dataTransfer: (dataTransfer)=>dataTransfer
|
4307
|
-
},
|
4308
|
-
matchesTypes: [
|
4309
|
-
'Url',
|
4310
|
-
'text/uri-list'
|
4311
|
-
]
|
4312
|
-
},
|
4313
|
-
[TEXT]: {
|
4314
|
-
exposeProperties: {
|
4315
|
-
text: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '')
|
4316
|
-
,
|
4317
|
-
dataTransfer: (dataTransfer)=>dataTransfer
|
4318
|
-
},
|
4319
|
-
matchesTypes: [
|
4320
|
-
'Text',
|
4321
|
-
'text/plain'
|
4322
|
-
]
|
4323
|
-
}
|
4324
|
-
};
|
4325
|
-
|
4326
|
-
function createNativeDragSource(type, dataTransfer) {
|
4327
|
-
const config = nativeTypesConfig[type];
|
4328
|
-
if (!config) {
|
4329
|
-
throw new Error(`native type ${type} has no configuration`);
|
4330
|
-
}
|
4331
|
-
const result = new NativeDragSource(config);
|
4332
|
-
result.loadDataTransfer(dataTransfer);
|
4333
|
-
return result;
|
4334
|
-
}
|
4335
|
-
function matchNativeItemType(dataTransfer) {
|
4336
|
-
if (!dataTransfer) {
|
4337
|
-
return null;
|
4338
|
-
}
|
4339
|
-
const dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || []);
|
4340
|
-
return Object.keys(nativeTypesConfig).filter((nativeItemType)=>{
|
4341
|
-
const typeConfig = nativeTypesConfig[nativeItemType];
|
4342
|
-
if (!(typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.matchesTypes)) {
|
4343
|
-
return false;
|
4344
|
-
}
|
4345
|
-
return typeConfig.matchesTypes.some((t)=>dataTransferTypes.indexOf(t) > -1
|
4346
|
-
);
|
4347
|
-
})[0] || null;
|
4348
|
-
}
|
4349
|
-
|
4350
|
-
const isFirefox = memoize(()=>/firefox/i.test(navigator.userAgent)
|
4351
|
-
);
|
4352
|
-
const isSafari = memoize(()=>Boolean(window.safari)
|
4353
|
-
);
|
4354
|
-
|
4355
|
-
class MonotonicInterpolant {
|
4356
|
-
interpolate(x) {
|
4357
|
-
const { xs , ys , c1s , c2s , c3s } = this;
|
4358
|
-
// The rightmost point in the dataset should give an exact result
|
4359
|
-
let i = xs.length - 1;
|
4360
|
-
if (x === xs[i]) {
|
4361
|
-
return ys[i];
|
4362
|
-
}
|
4363
|
-
// Search for the interval x is in, returning the corresponding y if x is one of the original xs
|
4364
|
-
let low = 0;
|
4365
|
-
let high = c3s.length - 1;
|
4366
|
-
let mid;
|
4367
|
-
while(low <= high){
|
4368
|
-
mid = Math.floor(0.5 * (low + high));
|
4369
|
-
const xHere = xs[mid];
|
4370
|
-
if (xHere < x) {
|
4371
|
-
low = mid + 1;
|
4372
|
-
} else if (xHere > x) {
|
4373
|
-
high = mid - 1;
|
4374
|
-
} else {
|
4375
|
-
return ys[mid];
|
4376
|
-
}
|
4377
|
-
}
|
4378
|
-
i = Math.max(0, high);
|
4379
|
-
// Interpolate
|
4380
|
-
const diff = x - xs[i];
|
4381
|
-
const diffSq = diff * diff;
|
4382
|
-
return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
|
4383
|
-
}
|
4384
|
-
constructor(xs, ys){
|
4385
|
-
const { length } = xs;
|
4386
|
-
const dxs = [];
|
4387
|
-
const ms = [];
|
4388
|
-
let dx;
|
4389
|
-
let dy;
|
4390
|
-
for(let i1 = 0; i1 < length - 1; i1++){
|
4391
|
-
dx = xs[i1 + 1] - xs[i1];
|
4392
|
-
dy = ys[i1 + 1] - ys[i1];
|
4393
|
-
dxs.push(dx);
|
4394
|
-
ms.push(dy / dx);
|
4395
|
-
}
|
4396
|
-
// Get degree-1 coefficients
|
4397
|
-
const c1s = [
|
4398
|
-
ms[0]
|
4399
|
-
];
|
4400
|
-
for(let i2 = 0; i2 < dxs.length - 1; i2++){
|
4401
|
-
const m2 = ms[i2];
|
4402
|
-
const mNext = ms[i2 + 1];
|
4403
|
-
if (m2 * mNext <= 0) {
|
4404
|
-
c1s.push(0);
|
4405
|
-
} else {
|
4406
|
-
dx = dxs[i2];
|
4407
|
-
const dxNext = dxs[i2 + 1];
|
4408
|
-
const common = dx + dxNext;
|
4409
|
-
c1s.push(3 * common / ((common + dxNext) / m2 + (common + dx) / mNext));
|
4410
|
-
}
|
4411
|
-
}
|
4412
|
-
c1s.push(ms[ms.length - 1]);
|
4413
|
-
// Get degree-2 and degree-3 coefficients
|
4414
|
-
const c2s = [];
|
4415
|
-
const c3s = [];
|
4416
|
-
let m;
|
4417
|
-
for(let i3 = 0; i3 < c1s.length - 1; i3++){
|
4418
|
-
m = ms[i3];
|
4419
|
-
const c1 = c1s[i3];
|
4420
|
-
const invDx = 1 / dxs[i3];
|
4421
|
-
const common = c1 + c1s[i3 + 1] - m - m;
|
4422
|
-
c2s.push((m - c1 - common) * invDx);
|
4423
|
-
c3s.push(common * invDx * invDx);
|
4424
|
-
}
|
4425
|
-
this.xs = xs;
|
4426
|
-
this.ys = ys;
|
4427
|
-
this.c1s = c1s;
|
4428
|
-
this.c2s = c2s;
|
4429
|
-
this.c3s = c3s;
|
4430
|
-
}
|
4431
|
-
}
|
4432
|
-
|
4433
|
-
const ELEMENT_NODE = 1;
|
4434
|
-
function getNodeClientOffset(node) {
|
4435
|
-
const el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
|
4436
|
-
if (!el) {
|
4437
|
-
return null;
|
4438
|
-
}
|
4439
|
-
const { top , left } = el.getBoundingClientRect();
|
4440
|
-
return {
|
4441
|
-
x: left,
|
4442
|
-
y: top
|
4443
|
-
};
|
4444
|
-
}
|
4445
|
-
function getEventClientOffset(e) {
|
4446
|
-
return {
|
4447
|
-
x: e.clientX,
|
4448
|
-
y: e.clientY
|
4449
|
-
};
|
4450
|
-
}
|
4451
|
-
function isImageNode(node) {
|
4452
|
-
var ref;
|
4453
|
-
return node.nodeName === 'IMG' && (isFirefox() || !((ref = document.documentElement) === null || ref === void 0 ? void 0 : ref.contains(node)));
|
4454
|
-
}
|
4455
|
-
function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
|
4456
|
-
let dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
|
4457
|
-
let dragPreviewHeight = isImage ? dragPreview.height : sourceHeight;
|
4458
|
-
// Work around @2x coordinate discrepancies in browsers
|
4459
|
-
if (isSafari() && isImage) {
|
4460
|
-
dragPreviewHeight /= window.devicePixelRatio;
|
4461
|
-
dragPreviewWidth /= window.devicePixelRatio;
|
4462
|
-
}
|
4463
|
-
return {
|
4464
|
-
dragPreviewWidth,
|
4465
|
-
dragPreviewHeight
|
4466
|
-
};
|
4467
|
-
}
|
4468
|
-
function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) {
|
4469
|
-
// The browsers will use the image intrinsic size under different conditions.
|
4470
|
-
// Firefox only cares if it's an image, but WebKit also wants it to be detached.
|
4471
|
-
const isImage = isImageNode(dragPreview);
|
4472
|
-
const dragPreviewNode = isImage ? sourceNode : dragPreview;
|
4473
|
-
const dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
|
4474
|
-
const offsetFromDragPreview = {
|
4475
|
-
x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
|
4476
|
-
y: clientOffset.y - dragPreviewNodeOffsetFromClient.y
|
4477
|
-
};
|
4478
|
-
const { offsetWidth: sourceWidth , offsetHeight: sourceHeight } = sourceNode;
|
4479
|
-
const { anchorX , anchorY } = anchorPoint;
|
4480
|
-
const { dragPreviewWidth , dragPreviewHeight } = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight);
|
4481
|
-
const calculateYOffset = ()=>{
|
4482
|
-
const interpolantY = new MonotonicInterpolant([
|
4483
|
-
0,
|
4484
|
-
0.5,
|
4485
|
-
1
|
4486
|
-
], [
|
4487
|
-
// Dock to the top
|
4488
|
-
offsetFromDragPreview.y,
|
4489
|
-
// Align at the center
|
4490
|
-
(offsetFromDragPreview.y / sourceHeight) * dragPreviewHeight,
|
4491
|
-
// Dock to the bottom
|
4492
|
-
offsetFromDragPreview.y + dragPreviewHeight - sourceHeight,
|
4493
|
-
]);
|
4494
|
-
let y = interpolantY.interpolate(anchorY);
|
4495
|
-
// Work around Safari 8 positioning bug
|
4496
|
-
if (isSafari() && isImage) {
|
4497
|
-
// We'll have to wait for @3x to see if this is entirely correct
|
4498
|
-
y += (window.devicePixelRatio - 1) * dragPreviewHeight;
|
4499
|
-
}
|
4500
|
-
return y;
|
4501
|
-
};
|
4502
|
-
const calculateXOffset = ()=>{
|
4503
|
-
// Interpolate coordinates depending on anchor point
|
4504
|
-
// If you know a simpler way to do this, let me know
|
4505
|
-
const interpolantX = new MonotonicInterpolant([
|
4506
|
-
0,
|
4507
|
-
0.5,
|
4508
|
-
1
|
4509
|
-
], [
|
4510
|
-
// Dock to the left
|
4511
|
-
offsetFromDragPreview.x,
|
4512
|
-
// Align at the center
|
4513
|
-
(offsetFromDragPreview.x / sourceWidth) * dragPreviewWidth,
|
4514
|
-
// Dock to the right
|
4515
|
-
offsetFromDragPreview.x + dragPreviewWidth - sourceWidth,
|
4516
|
-
]);
|
4517
|
-
return interpolantX.interpolate(anchorX);
|
4518
|
-
};
|
4519
|
-
// Force offsets if specified in the options.
|
4520
|
-
const { offsetX , offsetY } = offsetPoint;
|
4521
|
-
const isManualOffsetX = offsetX === 0 || offsetX;
|
4522
|
-
const isManualOffsetY = offsetY === 0 || offsetY;
|
4523
|
-
return {
|
4524
|
-
x: isManualOffsetX ? offsetX : calculateXOffset(),
|
4525
|
-
y: isManualOffsetY ? offsetY : calculateYOffset()
|
4526
|
-
};
|
4527
|
-
}
|
4528
|
-
|
4529
|
-
class OptionsReader {
|
4530
|
-
get window() {
|
4531
|
-
if (this.globalContext) {
|
4532
|
-
return this.globalContext;
|
4533
|
-
} else if (typeof window !== 'undefined') {
|
4534
|
-
return window;
|
4535
|
-
}
|
4536
|
-
return undefined;
|
4537
|
-
}
|
4538
|
-
get document() {
|
4539
|
-
var ref;
|
4540
|
-
if ((ref = this.globalContext) === null || ref === void 0 ? void 0 : ref.document) {
|
4541
|
-
return this.globalContext.document;
|
4542
|
-
} else if (this.window) {
|
4543
|
-
return this.window.document;
|
4544
|
-
} else {
|
4545
|
-
return undefined;
|
4546
|
-
}
|
4547
|
-
}
|
4548
|
-
get rootElement() {
|
4549
|
-
var ref;
|
4550
|
-
return ((ref = this.optionsArgs) === null || ref === void 0 ? void 0 : ref.rootElement) || this.window;
|
4551
|
-
}
|
4552
|
-
constructor(globalContext, options){
|
4553
|
-
this.ownerDocument = null;
|
4554
|
-
this.globalContext = globalContext;
|
4555
|
-
this.optionsArgs = options;
|
4556
|
-
}
|
4557
|
-
}
|
4558
|
-
|
4559
|
-
function _defineProperty$4(obj, key, value) {
|
4560
|
-
if (key in obj) {
|
4561
|
-
Object.defineProperty(obj, key, {
|
4562
|
-
value: value,
|
4563
|
-
enumerable: true,
|
4564
|
-
configurable: true,
|
4565
|
-
writable: true
|
4566
|
-
});
|
4567
|
-
} else {
|
4568
|
-
obj[key] = value;
|
4569
|
-
}
|
4570
|
-
return obj;
|
4571
|
-
}
|
4572
|
-
function _objectSpread$4(target) {
|
4573
|
-
for(var i = 1; i < arguments.length; i++){
|
4574
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
4575
|
-
var ownKeys = Object.keys(source);
|
4576
|
-
if (typeof Object.getOwnPropertySymbols === 'function') {
|
4577
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
4578
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
4579
|
-
}));
|
4580
|
-
}
|
4581
|
-
ownKeys.forEach(function(key) {
|
4582
|
-
_defineProperty$4(target, key, source[key]);
|
4583
|
-
});
|
4584
|
-
}
|
4585
|
-
return target;
|
4586
|
-
}
|
4587
|
-
class HTML5BackendImpl {
|
4588
|
-
/**
|
4589
|
-
* Generate profiling statistics for the HTML5Backend.
|
4590
|
-
*/ profile() {
|
4591
|
-
var ref, ref1;
|
4592
|
-
return {
|
4593
|
-
sourcePreviewNodes: this.sourcePreviewNodes.size,
|
4594
|
-
sourcePreviewNodeOptions: this.sourcePreviewNodeOptions.size,
|
4595
|
-
sourceNodeOptions: this.sourceNodeOptions.size,
|
4596
|
-
sourceNodes: this.sourceNodes.size,
|
4597
|
-
dragStartSourceIds: ((ref = this.dragStartSourceIds) === null || ref === void 0 ? void 0 : ref.length) || 0,
|
4598
|
-
dropTargetIds: this.dropTargetIds.length,
|
4599
|
-
dragEnterTargetIds: this.dragEnterTargetIds.length,
|
4600
|
-
dragOverTargetIds: ((ref1 = this.dragOverTargetIds) === null || ref1 === void 0 ? void 0 : ref1.length) || 0
|
4601
|
-
};
|
4602
|
-
}
|
4603
|
-
// public for test
|
4604
|
-
get window() {
|
4605
|
-
return this.options.window;
|
4606
|
-
}
|
4607
|
-
get document() {
|
4608
|
-
return this.options.document;
|
4609
|
-
}
|
4610
|
-
/**
|
4611
|
-
* Get the root element to use for event subscriptions
|
4612
|
-
*/ get rootElement() {
|
4613
|
-
return this.options.rootElement;
|
4614
|
-
}
|
4615
|
-
setup() {
|
4616
|
-
const root = this.rootElement;
|
4617
|
-
if (root === undefined) {
|
4618
|
-
return;
|
4619
|
-
}
|
4620
|
-
if (root.__isReactDndBackendSetUp) {
|
4621
|
-
throw new Error('Cannot have two HTML5 backends at the same time.');
|
4622
|
-
}
|
4623
|
-
root.__isReactDndBackendSetUp = true;
|
4624
|
-
this.addEventListeners(root);
|
4625
|
-
}
|
4626
|
-
teardown() {
|
4627
|
-
const root = this.rootElement;
|
4628
|
-
if (root === undefined) {
|
4629
|
-
return;
|
4630
|
-
}
|
4631
|
-
root.__isReactDndBackendSetUp = false;
|
4632
|
-
this.removeEventListeners(this.rootElement);
|
4633
|
-
this.clearCurrentDragSourceNode();
|
4634
|
-
if (this.asyncEndDragFrameId) {
|
4635
|
-
var ref;
|
4636
|
-
(ref = this.window) === null || ref === void 0 ? void 0 : ref.cancelAnimationFrame(this.asyncEndDragFrameId);
|
4637
|
-
}
|
4638
|
-
}
|
4639
|
-
connectDragPreview(sourceId, node, options) {
|
4640
|
-
this.sourcePreviewNodeOptions.set(sourceId, options);
|
4641
|
-
this.sourcePreviewNodes.set(sourceId, node);
|
4642
|
-
return ()=>{
|
4643
|
-
this.sourcePreviewNodes.delete(sourceId);
|
4644
|
-
this.sourcePreviewNodeOptions.delete(sourceId);
|
4645
|
-
};
|
4646
|
-
}
|
4647
|
-
connectDragSource(sourceId, node, options) {
|
4648
|
-
this.sourceNodes.set(sourceId, node);
|
4649
|
-
this.sourceNodeOptions.set(sourceId, options);
|
4650
|
-
const handleDragStart = (e)=>this.handleDragStart(e, sourceId)
|
4651
|
-
;
|
4652
|
-
const handleSelectStart = (e)=>this.handleSelectStart(e)
|
4653
|
-
;
|
4654
|
-
node.setAttribute('draggable', 'true');
|
4655
|
-
node.addEventListener('dragstart', handleDragStart);
|
4656
|
-
node.addEventListener('selectstart', handleSelectStart);
|
4657
|
-
return ()=>{
|
4658
|
-
this.sourceNodes.delete(sourceId);
|
4659
|
-
this.sourceNodeOptions.delete(sourceId);
|
4660
|
-
node.removeEventListener('dragstart', handleDragStart);
|
4661
|
-
node.removeEventListener('selectstart', handleSelectStart);
|
4662
|
-
node.setAttribute('draggable', 'false');
|
4663
|
-
};
|
4664
|
-
}
|
4665
|
-
connectDropTarget(targetId, node) {
|
4666
|
-
const handleDragEnter = (e)=>this.handleDragEnter(e, targetId)
|
4667
|
-
;
|
4668
|
-
const handleDragOver = (e)=>this.handleDragOver(e, targetId)
|
4669
|
-
;
|
4670
|
-
const handleDrop = (e)=>this.handleDrop(e, targetId)
|
4671
|
-
;
|
4672
|
-
node.addEventListener('dragenter', handleDragEnter);
|
4673
|
-
node.addEventListener('dragover', handleDragOver);
|
4674
|
-
node.addEventListener('drop', handleDrop);
|
4675
|
-
return ()=>{
|
4676
|
-
node.removeEventListener('dragenter', handleDragEnter);
|
4677
|
-
node.removeEventListener('dragover', handleDragOver);
|
4678
|
-
node.removeEventListener('drop', handleDrop);
|
4679
|
-
};
|
4680
|
-
}
|
4681
|
-
addEventListeners(target) {
|
4682
|
-
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
|
4683
|
-
if (!target.addEventListener) {
|
4684
|
-
return;
|
4685
|
-
}
|
4686
|
-
target.addEventListener('dragstart', this.handleTopDragStart);
|
4687
|
-
target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
|
4688
|
-
target.addEventListener('dragend', this.handleTopDragEndCapture, true);
|
4689
|
-
target.addEventListener('dragenter', this.handleTopDragEnter);
|
4690
|
-
target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
|
4691
|
-
target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
|
4692
|
-
target.addEventListener('dragover', this.handleTopDragOver);
|
4693
|
-
target.addEventListener('dragover', this.handleTopDragOverCapture, true);
|
4694
|
-
target.addEventListener('drop', this.handleTopDrop);
|
4695
|
-
target.addEventListener('drop', this.handleTopDropCapture, true);
|
4696
|
-
}
|
4697
|
-
removeEventListeners(target) {
|
4698
|
-
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
|
4699
|
-
if (!target.removeEventListener) {
|
4700
|
-
return;
|
4701
|
-
}
|
4702
|
-
target.removeEventListener('dragstart', this.handleTopDragStart);
|
4703
|
-
target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
|
4704
|
-
target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
|
4705
|
-
target.removeEventListener('dragenter', this.handleTopDragEnter);
|
4706
|
-
target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
|
4707
|
-
target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
|
4708
|
-
target.removeEventListener('dragover', this.handleTopDragOver);
|
4709
|
-
target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
|
4710
|
-
target.removeEventListener('drop', this.handleTopDrop);
|
4711
|
-
target.removeEventListener('drop', this.handleTopDropCapture, true);
|
4712
|
-
}
|
4713
|
-
getCurrentSourceNodeOptions() {
|
4714
|
-
const sourceId = this.monitor.getSourceId();
|
4715
|
-
const sourceNodeOptions = this.sourceNodeOptions.get(sourceId);
|
4716
|
-
return _objectSpread$4({
|
4717
|
-
dropEffect: this.altKeyPressed ? 'copy' : 'move'
|
4718
|
-
}, sourceNodeOptions || {});
|
4719
|
-
}
|
4720
|
-
getCurrentDropEffect() {
|
4721
|
-
if (this.isDraggingNativeItem()) {
|
4722
|
-
// It makes more sense to default to 'copy' for native resources
|
4723
|
-
return 'copy';
|
4724
|
-
}
|
4725
|
-
return this.getCurrentSourceNodeOptions().dropEffect;
|
4726
|
-
}
|
4727
|
-
getCurrentSourcePreviewNodeOptions() {
|
4728
|
-
const sourceId = this.monitor.getSourceId();
|
4729
|
-
const sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId);
|
4730
|
-
return _objectSpread$4({
|
4731
|
-
anchorX: 0.5,
|
4732
|
-
anchorY: 0.5,
|
4733
|
-
captureDraggingState: false
|
4734
|
-
}, sourcePreviewNodeOptions || {});
|
4735
|
-
}
|
4736
|
-
isDraggingNativeItem() {
|
4737
|
-
const itemType = this.monitor.getItemType();
|
4738
|
-
return Object.keys(NativeTypes).some((key)=>NativeTypes[key] === itemType
|
4739
|
-
);
|
4740
|
-
}
|
4741
|
-
beginDragNativeItem(type, dataTransfer) {
|
4742
|
-
this.clearCurrentDragSourceNode();
|
4743
|
-
this.currentNativeSource = createNativeDragSource(type, dataTransfer);
|
4744
|
-
this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
|
4745
|
-
this.actions.beginDrag([
|
4746
|
-
this.currentNativeHandle
|
4747
|
-
]);
|
4748
|
-
}
|
4749
|
-
setCurrentDragSourceNode(node) {
|
4750
|
-
this.clearCurrentDragSourceNode();
|
4751
|
-
this.currentDragSourceNode = node;
|
4752
|
-
// A timeout of > 0 is necessary to resolve Firefox issue referenced
|
4753
|
-
// See:
|
4754
|
-
// * https://github.com/react-dnd/react-dnd/pull/928
|
4755
|
-
// * https://github.com/react-dnd/react-dnd/issues/869
|
4756
|
-
const MOUSE_MOVE_TIMEOUT = 1000;
|
4757
|
-
// Receiving a mouse event in the middle of a dragging operation
|
4758
|
-
// means it has ended and the drag source node disappeared from DOM,
|
4759
|
-
// so the browser didn't dispatch the dragend event.
|
4760
|
-
//
|
4761
|
-
// We need to wait before we start listening for mousemove events.
|
4762
|
-
// This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event
|
4763
|
-
// immediately in some browsers.
|
4764
|
-
//
|
4765
|
-
// See:
|
4766
|
-
// * https://github.com/react-dnd/react-dnd/pull/928
|
4767
|
-
// * https://github.com/react-dnd/react-dnd/issues/869
|
4768
|
-
//
|
4769
|
-
this.mouseMoveTimeoutTimer = setTimeout(()=>{
|
4770
|
-
var ref;
|
4771
|
-
return (ref = this.rootElement) === null || ref === void 0 ? void 0 : ref.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
|
4772
|
-
}, MOUSE_MOVE_TIMEOUT);
|
4773
|
-
}
|
4774
|
-
clearCurrentDragSourceNode() {
|
4775
|
-
if (this.currentDragSourceNode) {
|
4776
|
-
this.currentDragSourceNode = null;
|
4777
|
-
if (this.rootElement) {
|
4778
|
-
var ref;
|
4779
|
-
(ref = this.window) === null || ref === void 0 ? void 0 : ref.clearTimeout(this.mouseMoveTimeoutTimer || undefined);
|
4780
|
-
this.rootElement.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
|
4781
|
-
}
|
4782
|
-
this.mouseMoveTimeoutTimer = null;
|
4783
|
-
return true;
|
4784
|
-
}
|
4785
|
-
return false;
|
4786
|
-
}
|
4787
|
-
handleDragStart(e, sourceId) {
|
4788
|
-
if (e.defaultPrevented) {
|
4789
|
-
return;
|
4790
|
-
}
|
4791
|
-
if (!this.dragStartSourceIds) {
|
4792
|
-
this.dragStartSourceIds = [];
|
4793
|
-
}
|
4794
|
-
this.dragStartSourceIds.unshift(sourceId);
|
4795
|
-
}
|
4796
|
-
handleDragEnter(_e, targetId) {
|
4797
|
-
this.dragEnterTargetIds.unshift(targetId);
|
4798
|
-
}
|
4799
|
-
handleDragOver(_e, targetId) {
|
4800
|
-
if (this.dragOverTargetIds === null) {
|
4801
|
-
this.dragOverTargetIds = [];
|
4802
|
-
}
|
4803
|
-
this.dragOverTargetIds.unshift(targetId);
|
4804
|
-
}
|
4805
|
-
handleDrop(_e, targetId) {
|
4806
|
-
this.dropTargetIds.unshift(targetId);
|
4807
|
-
}
|
4808
|
-
constructor(manager, globalContext, options){
|
4809
|
-
this.sourcePreviewNodes = new Map();
|
4810
|
-
this.sourcePreviewNodeOptions = new Map();
|
4811
|
-
this.sourceNodes = new Map();
|
4812
|
-
this.sourceNodeOptions = new Map();
|
4813
|
-
this.dragStartSourceIds = null;
|
4814
|
-
this.dropTargetIds = [];
|
4815
|
-
this.dragEnterTargetIds = [];
|
4816
|
-
this.currentNativeSource = null;
|
4817
|
-
this.currentNativeHandle = null;
|
4818
|
-
this.currentDragSourceNode = null;
|
4819
|
-
this.altKeyPressed = false;
|
4820
|
-
this.mouseMoveTimeoutTimer = null;
|
4821
|
-
this.asyncEndDragFrameId = null;
|
4822
|
-
this.dragOverTargetIds = null;
|
4823
|
-
this.lastClientOffset = null;
|
4824
|
-
this.hoverRafId = null;
|
4825
|
-
this.getSourceClientOffset = (sourceId)=>{
|
4826
|
-
const source = this.sourceNodes.get(sourceId);
|
4827
|
-
return source && getNodeClientOffset(source) || null;
|
4828
|
-
};
|
4829
|
-
this.endDragNativeItem = ()=>{
|
4830
|
-
if (!this.isDraggingNativeItem()) {
|
4831
|
-
return;
|
4832
|
-
}
|
4833
|
-
this.actions.endDrag();
|
4834
|
-
if (this.currentNativeHandle) {
|
4835
|
-
this.registry.removeSource(this.currentNativeHandle);
|
4836
|
-
}
|
4837
|
-
this.currentNativeHandle = null;
|
4838
|
-
this.currentNativeSource = null;
|
4839
|
-
};
|
4840
|
-
this.isNodeInDocument = (node)=>{
|
4841
|
-
// Check the node either in the main document or in the current context
|
4842
|
-
return Boolean(node && this.document && this.document.body && this.document.body.contains(node));
|
4843
|
-
};
|
4844
|
-
this.endDragIfSourceWasRemovedFromDOM = ()=>{
|
4845
|
-
const node = this.currentDragSourceNode;
|
4846
|
-
if (node == null || this.isNodeInDocument(node)) {
|
4847
|
-
return;
|
4848
|
-
}
|
4849
|
-
if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
|
4850
|
-
this.actions.endDrag();
|
4851
|
-
}
|
4852
|
-
this.cancelHover();
|
4853
|
-
};
|
4854
|
-
this.scheduleHover = (dragOverTargetIds)=>{
|
4855
|
-
if (this.hoverRafId === null && typeof requestAnimationFrame !== 'undefined') {
|
4856
|
-
this.hoverRafId = requestAnimationFrame(()=>{
|
4857
|
-
if (this.monitor.isDragging()) {
|
4858
|
-
this.actions.hover(dragOverTargetIds || [], {
|
4859
|
-
clientOffset: this.lastClientOffset
|
4860
|
-
});
|
4861
|
-
}
|
4862
|
-
this.hoverRafId = null;
|
4863
|
-
});
|
4864
|
-
}
|
4865
|
-
};
|
4866
|
-
this.cancelHover = ()=>{
|
4867
|
-
if (this.hoverRafId !== null && typeof cancelAnimationFrame !== 'undefined') {
|
4868
|
-
cancelAnimationFrame(this.hoverRafId);
|
4869
|
-
this.hoverRafId = null;
|
4870
|
-
}
|
4871
|
-
};
|
4872
|
-
this.handleTopDragStartCapture = ()=>{
|
4873
|
-
this.clearCurrentDragSourceNode();
|
4874
|
-
this.dragStartSourceIds = [];
|
4875
|
-
};
|
4876
|
-
this.handleTopDragStart = (e)=>{
|
4877
|
-
if (e.defaultPrevented) {
|
4878
|
-
return;
|
4879
|
-
}
|
4880
|
-
const { dragStartSourceIds } = this;
|
4881
|
-
this.dragStartSourceIds = null;
|
4882
|
-
const clientOffset = getEventClientOffset(e);
|
4883
|
-
// Avoid crashing if we missed a drop event or our previous drag died
|
4884
|
-
if (this.monitor.isDragging()) {
|
4885
|
-
this.actions.endDrag();
|
4886
|
-
this.cancelHover();
|
4887
|
-
}
|
4888
|
-
// Don't publish the source just yet (see why below)
|
4889
|
-
this.actions.beginDrag(dragStartSourceIds || [], {
|
4890
|
-
publishSource: false,
|
4891
|
-
getSourceClientOffset: this.getSourceClientOffset,
|
4892
|
-
clientOffset
|
4893
|
-
});
|
4894
|
-
const { dataTransfer } = e;
|
4895
|
-
const nativeType = matchNativeItemType(dataTransfer);
|
4896
|
-
if (this.monitor.isDragging()) {
|
4897
|
-
if (dataTransfer && typeof dataTransfer.setDragImage === 'function') {
|
4898
|
-
// Use custom drag image if user specifies it.
|
4899
|
-
// If child drag source refuses drag but parent agrees,
|
4900
|
-
// use parent's node as drag image. Neither works in IE though.
|
4901
|
-
const sourceId = this.monitor.getSourceId();
|
4902
|
-
const sourceNode = this.sourceNodes.get(sourceId);
|
4903
|
-
const dragPreview = this.sourcePreviewNodes.get(sourceId) || sourceNode;
|
4904
|
-
if (dragPreview) {
|
4905
|
-
const { anchorX , anchorY , offsetX , offsetY } = this.getCurrentSourcePreviewNodeOptions();
|
4906
|
-
const anchorPoint = {
|
4907
|
-
anchorX,
|
4908
|
-
anchorY
|
4909
|
-
};
|
4910
|
-
const offsetPoint = {
|
4911
|
-
offsetX,
|
4912
|
-
offsetY
|
4913
|
-
};
|
4914
|
-
const dragPreviewOffset = getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint);
|
4915
|
-
dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
|
4916
|
-
}
|
4917
|
-
}
|
4918
|
-
try {
|
4919
|
-
// Firefox won't drag without setting data
|
4920
|
-
dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.setData('application/json', {});
|
4921
|
-
} catch (err) {
|
4922
|
-
// IE doesn't support MIME types in setData
|
4923
|
-
}
|
4924
|
-
// Store drag source node so we can check whether
|
4925
|
-
// it is removed from DOM and trigger endDrag manually.
|
4926
|
-
this.setCurrentDragSourceNode(e.target);
|
4927
|
-
// Now we are ready to publish the drag source.. or are we not?
|
4928
|
-
const { captureDraggingState } = this.getCurrentSourcePreviewNodeOptions();
|
4929
|
-
if (!captureDraggingState) {
|
4930
|
-
// Usually we want to publish it in the next tick so that browser
|
4931
|
-
// is able to screenshot the current (not yet dragging) state.
|
4932
|
-
//
|
4933
|
-
// It also neatly avoids a situation where render() returns null
|
4934
|
-
// in the same tick for the source element, and browser freaks out.
|
4935
|
-
setTimeout(()=>this.actions.publishDragSource()
|
4936
|
-
, 0);
|
4937
|
-
} else {
|
4938
|
-
// In some cases the user may want to override this behavior, e.g.
|
4939
|
-
// to work around IE not supporting custom drag previews.
|
4940
|
-
//
|
4941
|
-
// When using a custom drag layer, the only way to prevent
|
4942
|
-
// the default drag preview from drawing in IE is to screenshot
|
4943
|
-
// the dragging state in which the node itself has zero opacity
|
4944
|
-
// and height. In this case, though, returning null from render()
|
4945
|
-
// will abruptly end the dragging, which is not obvious.
|
4946
|
-
//
|
4947
|
-
// This is the reason such behavior is strictly opt-in.
|
4948
|
-
this.actions.publishDragSource();
|
4949
|
-
}
|
4950
|
-
} else if (nativeType) {
|
4951
|
-
// A native item (such as URL) dragged from inside the document
|
4952
|
-
this.beginDragNativeItem(nativeType);
|
4953
|
-
} else if (dataTransfer && !dataTransfer.types && (e.target && !e.target.hasAttribute || !e.target.hasAttribute('draggable'))) {
|
4954
|
-
// Looks like a Safari bug: dataTransfer.types is null, but there was no draggable.
|
4955
|
-
// Just let it drag. It's a native type (URL or text) and will be picked up in
|
4956
|
-
// dragenter handler.
|
4957
|
-
return;
|
4958
|
-
} else {
|
4959
|
-
// If by this time no drag source reacted, tell browser not to drag.
|
4960
|
-
e.preventDefault();
|
4961
|
-
}
|
4962
|
-
};
|
4963
|
-
this.handleTopDragEndCapture = ()=>{
|
4964
|
-
if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
|
4965
|
-
// Firefox can dispatch this event in an infinite loop
|
4966
|
-
// if dragend handler does something like showing an alert.
|
4967
|
-
// Only proceed if we have not handled it already.
|
4968
|
-
this.actions.endDrag();
|
4969
|
-
}
|
4970
|
-
this.cancelHover();
|
4971
|
-
};
|
4972
|
-
this.handleTopDragEnterCapture = (e)=>{
|
4973
|
-
this.dragEnterTargetIds = [];
|
4974
|
-
if (this.isDraggingNativeItem()) {
|
4975
|
-
var ref;
|
4976
|
-
(ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
|
4977
|
-
}
|
4978
|
-
const isFirstEnter = this.enterLeaveCounter.enter(e.target);
|
4979
|
-
if (!isFirstEnter || this.monitor.isDragging()) {
|
4980
|
-
return;
|
4981
|
-
}
|
4982
|
-
const { dataTransfer } = e;
|
4983
|
-
const nativeType = matchNativeItemType(dataTransfer);
|
4984
|
-
if (nativeType) {
|
4985
|
-
// A native item (such as file or URL) dragged from outside the document
|
4986
|
-
this.beginDragNativeItem(nativeType, dataTransfer);
|
4987
|
-
}
|
4988
|
-
};
|
4989
|
-
this.handleTopDragEnter = (e)=>{
|
4990
|
-
const { dragEnterTargetIds } = this;
|
4991
|
-
this.dragEnterTargetIds = [];
|
4992
|
-
if (!this.monitor.isDragging()) {
|
4993
|
-
// This is probably a native item type we don't understand.
|
4994
|
-
return;
|
4995
|
-
}
|
4996
|
-
this.altKeyPressed = e.altKey;
|
4997
|
-
// If the target changes position as the result of `dragenter`, `dragover` might still
|
4998
|
-
// get dispatched despite target being no longer there. The easy solution is to check
|
4999
|
-
// whether there actually is a target before firing `hover`.
|
5000
|
-
if (dragEnterTargetIds.length > 0) {
|
5001
|
-
this.actions.hover(dragEnterTargetIds, {
|
5002
|
-
clientOffset: getEventClientOffset(e)
|
5003
|
-
});
|
5004
|
-
}
|
5005
|
-
const canDrop = dragEnterTargetIds.some((targetId)=>this.monitor.canDropOnTarget(targetId)
|
5006
|
-
);
|
5007
|
-
if (canDrop) {
|
5008
|
-
// IE requires this to fire dragover events
|
5009
|
-
e.preventDefault();
|
5010
|
-
if (e.dataTransfer) {
|
5011
|
-
e.dataTransfer.dropEffect = this.getCurrentDropEffect();
|
5012
|
-
}
|
5013
|
-
}
|
5014
|
-
};
|
5015
|
-
this.handleTopDragOverCapture = (e)=>{
|
5016
|
-
this.dragOverTargetIds = [];
|
5017
|
-
if (this.isDraggingNativeItem()) {
|
5018
|
-
var ref;
|
5019
|
-
(ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
|
5020
|
-
}
|
5021
|
-
};
|
5022
|
-
this.handleTopDragOver = (e)=>{
|
5023
|
-
const { dragOverTargetIds } = this;
|
5024
|
-
this.dragOverTargetIds = [];
|
5025
|
-
if (!this.monitor.isDragging()) {
|
5026
|
-
// This is probably a native item type we don't understand.
|
5027
|
-
// Prevent default "drop and blow away the whole document" action.
|
5028
|
-
e.preventDefault();
|
5029
|
-
if (e.dataTransfer) {
|
5030
|
-
e.dataTransfer.dropEffect = 'none';
|
5031
|
-
}
|
5032
|
-
return;
|
5033
|
-
}
|
5034
|
-
this.altKeyPressed = e.altKey;
|
5035
|
-
this.lastClientOffset = getEventClientOffset(e);
|
5036
|
-
this.scheduleHover(dragOverTargetIds);
|
5037
|
-
const canDrop = (dragOverTargetIds || []).some((targetId)=>this.monitor.canDropOnTarget(targetId)
|
5038
|
-
);
|
5039
|
-
if (canDrop) {
|
5040
|
-
// Show user-specified drop effect.
|
5041
|
-
e.preventDefault();
|
5042
|
-
if (e.dataTransfer) {
|
5043
|
-
e.dataTransfer.dropEffect = this.getCurrentDropEffect();
|
5044
|
-
}
|
5045
|
-
} else if (this.isDraggingNativeItem()) {
|
5046
|
-
// Don't show a nice cursor but still prevent default
|
5047
|
-
// "drop and blow away the whole document" action.
|
5048
|
-
e.preventDefault();
|
5049
|
-
} else {
|
5050
|
-
e.preventDefault();
|
5051
|
-
if (e.dataTransfer) {
|
5052
|
-
e.dataTransfer.dropEffect = 'none';
|
5053
|
-
}
|
5054
|
-
}
|
5055
|
-
};
|
5056
|
-
this.handleTopDragLeaveCapture = (e)=>{
|
5057
|
-
if (this.isDraggingNativeItem()) {
|
5058
|
-
e.preventDefault();
|
5059
|
-
}
|
5060
|
-
const isLastLeave = this.enterLeaveCounter.leave(e.target);
|
5061
|
-
if (!isLastLeave) {
|
5062
|
-
return;
|
5063
|
-
}
|
5064
|
-
if (this.isDraggingNativeItem()) {
|
5065
|
-
setTimeout(()=>this.endDragNativeItem()
|
5066
|
-
, 0);
|
5067
|
-
}
|
5068
|
-
this.cancelHover();
|
5069
|
-
};
|
5070
|
-
this.handleTopDropCapture = (e)=>{
|
5071
|
-
this.dropTargetIds = [];
|
5072
|
-
if (this.isDraggingNativeItem()) {
|
5073
|
-
var ref;
|
5074
|
-
e.preventDefault();
|
5075
|
-
(ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
|
5076
|
-
} else if (matchNativeItemType(e.dataTransfer)) {
|
5077
|
-
// Dragging some elements, like <a> and <img> may still behave like a native drag event,
|
5078
|
-
// even if the current drag event matches a user-defined type.
|
5079
|
-
// Stop the default behavior when we're not expecting a native item to be dropped.
|
5080
|
-
e.preventDefault();
|
5081
|
-
}
|
5082
|
-
this.enterLeaveCounter.reset();
|
5083
|
-
};
|
5084
|
-
this.handleTopDrop = (e)=>{
|
5085
|
-
const { dropTargetIds } = this;
|
5086
|
-
this.dropTargetIds = [];
|
5087
|
-
this.actions.hover(dropTargetIds, {
|
5088
|
-
clientOffset: getEventClientOffset(e)
|
5089
|
-
});
|
5090
|
-
this.actions.drop({
|
5091
|
-
dropEffect: this.getCurrentDropEffect()
|
5092
|
-
});
|
5093
|
-
if (this.isDraggingNativeItem()) {
|
5094
|
-
this.endDragNativeItem();
|
5095
|
-
} else if (this.monitor.isDragging()) {
|
5096
|
-
this.actions.endDrag();
|
5097
|
-
}
|
5098
|
-
this.cancelHover();
|
5099
|
-
};
|
5100
|
-
this.handleSelectStart = (e)=>{
|
5101
|
-
const target = e.target;
|
5102
|
-
// Only IE requires us to explicitly say
|
5103
|
-
// we want drag drop operation to start
|
5104
|
-
if (typeof target.dragDrop !== 'function') {
|
5105
|
-
return;
|
5106
|
-
}
|
5107
|
-
// Inputs and textareas should be selectable
|
5108
|
-
if (target.tagName === 'INPUT' || target.tagName === 'SELECT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
|
5109
|
-
return;
|
5110
|
-
}
|
5111
|
-
// For other targets, ask IE
|
5112
|
-
// to enable drag and drop
|
5113
|
-
e.preventDefault();
|
5114
|
-
target.dragDrop();
|
5115
|
-
};
|
5116
|
-
this.options = new OptionsReader(globalContext, options);
|
5117
|
-
this.actions = manager.getActions();
|
5118
|
-
this.monitor = manager.getMonitor();
|
5119
|
-
this.registry = manager.getRegistry();
|
5120
|
-
this.enterLeaveCounter = new EnterLeaveCounter(this.isNodeInDocument);
|
1367
|
+
if (selectAllMode === 'all') {
|
1368
|
+
table.getToggleAllRowsSelectedHandler()(event);
|
1369
|
+
} else if (selectAllMode === 'page') {
|
1370
|
+
table.getToggleAllPageRowsSelectedHandler()(event);
|
1371
|
+
}
|
1372
|
+
} else if (row) {
|
1373
|
+
row == null ? void 0 : row.getToggleSelectedHandler()(event);
|
5121
1374
|
}
|
5122
|
-
}
|
1375
|
+
};
|
5123
1376
|
|
5124
|
-
|
5125
|
-
|
1377
|
+
var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
|
1378
|
+
table: table
|
1379
|
+
}) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
|
1380
|
+
row: row,
|
1381
|
+
table: table
|
1382
|
+
}) : muiSelectCheckboxProps;
|
1383
|
+
return React__default.createElement(material.Tooltip, {
|
1384
|
+
arrow: true,
|
1385
|
+
enterDelay: 1000,
|
1386
|
+
enterNextDelay: 1000,
|
1387
|
+
title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
|
1388
|
+
}, React__default.createElement(material.Checkbox, Object.assign({
|
1389
|
+
checked: selectAll ? table.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
|
1390
|
+
indeterminate: selectAll ? table.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
|
1391
|
+
inputProps: {
|
1392
|
+
'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
|
1393
|
+
},
|
1394
|
+
onChange: handleSelectChange,
|
1395
|
+
size: density === 'compact' ? 'small' : 'medium'
|
1396
|
+
}, checkboxProps, {
|
1397
|
+
sx: _extends({
|
1398
|
+
height: density === 'compact' ? '1.75rem' : '2.25rem',
|
1399
|
+
width: density === 'compact' ? '1.75rem' : '2.25rem'
|
1400
|
+
}, checkboxProps == null ? void 0 : checkboxProps.sx)
|
1401
|
+
})));
|
5126
1402
|
};
|
5127
1403
|
|
5128
1404
|
var _excluded = ["table"];
|
@@ -6148,12 +2424,10 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
|
|
6148
2424
|
var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
6149
2425
|
var _ref2, _columnDef$header$len, _columnDef$header;
|
6150
2426
|
|
6151
|
-
var
|
6152
|
-
|
2427
|
+
var currentHoveredColumn = _ref.currentHoveredColumn,
|
2428
|
+
setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
6153
2429
|
header = _ref.header,
|
6154
|
-
table = _ref.table
|
6155
|
-
isDragging = _ref.isDragging,
|
6156
|
-
previewRef = _ref.previewRef;
|
2430
|
+
table = _ref.table;
|
6157
2431
|
var getState = table.getState,
|
6158
2432
|
_table$options = table.options,
|
6159
2433
|
enableColumnActions = _table$options.enableColumnActions,
|
@@ -6161,11 +2435,12 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
6161
2435
|
enableColumnResizing = _table$options.enableColumnResizing,
|
6162
2436
|
enableGrouping = _table$options.enableGrouping,
|
6163
2437
|
enableMultiSort = _table$options.enableMultiSort,
|
6164
|
-
muiTableHeadCellProps = _table$options.muiTableHeadCellProps
|
2438
|
+
muiTableHeadCellProps = _table$options.muiTableHeadCellProps,
|
2439
|
+
setColumnOrder = table.setColumnOrder;
|
6165
2440
|
|
6166
2441
|
var _getState = getState(),
|
6167
|
-
|
6168
|
-
|
2442
|
+
columnOrder = _getState.columnOrder,
|
2443
|
+
density = _getState.density;
|
6169
2444
|
|
6170
2445
|
var column = header.column;
|
6171
2446
|
var columnDef = column.columnDef;
|
@@ -6198,30 +2473,56 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
6198
2473
|
return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
|
6199
2474
|
};
|
6200
2475
|
|
2476
|
+
var tableHeadCellRef = React__default.useRef(null);
|
2477
|
+
|
2478
|
+
var _useState = React.useState(false),
|
2479
|
+
isDragging = _useState[0],
|
2480
|
+
setIsDragging = _useState[1];
|
2481
|
+
|
2482
|
+
var handleDragStart = function handleDragStart(e) {
|
2483
|
+
setIsDragging(true);
|
2484
|
+
e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
|
2485
|
+
};
|
2486
|
+
|
2487
|
+
var handleDragEnd = function handleDragEnd(_e) {
|
2488
|
+
setIsDragging(false);
|
2489
|
+
setCurrentHoveredColumn(null);
|
2490
|
+
|
2491
|
+
if (currentHoveredColumn) {
|
2492
|
+
setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
|
2493
|
+
}
|
2494
|
+
};
|
2495
|
+
|
2496
|
+
var handleDragEnter = function handleDragEnter(_e) {
|
2497
|
+
setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
|
2498
|
+
};
|
2499
|
+
|
6201
2500
|
return React__default.createElement(material.TableCell, Object.assign({
|
6202
2501
|
align: columnDefType === 'group' ? 'center' : 'left',
|
6203
|
-
colSpan: header.colSpan
|
2502
|
+
colSpan: header.colSpan,
|
2503
|
+
onDragEnter: handleDragEnter,
|
2504
|
+
ref: tableHeadCellRef
|
6204
2505
|
}, tableCellProps, {
|
6205
|
-
ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
|
6206
2506
|
sx: function sx(theme) {
|
6207
2507
|
var _columnDef$minSize;
|
6208
2508
|
|
6209
2509
|
return _extends({
|
6210
2510
|
backgroundColor: column.getIsPinned() && columnDefType !== 'group' ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
|
6211
2511
|
backgroundImage: 'inherit',
|
2512
|
+
border: isDragging ? "2px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined,
|
6212
2513
|
boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : undefined,
|
6213
2514
|
fontWeight: 'bold',
|
6214
|
-
height: '100%',
|
6215
2515
|
left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
|
6216
2516
|
overflow: 'visible',
|
2517
|
+
opacity: isDragging ? 0.5 : 1,
|
6217
2518
|
p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
|
6218
2519
|
pb: columnDefType === 'display' ? 0 : undefined,
|
6219
2520
|
position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
|
6220
|
-
pt: columnDefType
|
2521
|
+
pt: columnDefType === 'group' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
|
6221
2522
|
right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
|
6222
2523
|
transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
|
6223
2524
|
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
6224
|
-
verticalAlign:
|
2525
|
+
verticalAlign: 'text-top',
|
6225
2526
|
zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
|
6226
2527
|
}, tableCellProps == null ? void 0 : tableCellProps.sx, {
|
6227
2528
|
maxWidth: "min(" + column.getSize() + "px, fit-content)",
|
@@ -6230,7 +2531,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
6230
2531
|
});
|
6231
2532
|
}
|
6232
2533
|
}), header.isPlaceholder ? null : columnDefType === 'display' ? headerElement : React__default.createElement(material.Box, {
|
6233
|
-
ref: previewRef,
|
6234
2534
|
sx: {
|
6235
2535
|
alignItems: 'flex-start',
|
6236
2536
|
display: 'flex',
|
@@ -6259,7 +2559,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
6259
2559
|
whiteSpace: 'nowrap'
|
6260
2560
|
}
|
6261
2561
|
}, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React__default.createElement(MRT_GrabHandleButton, {
|
6262
|
-
|
2562
|
+
handleDragStart: handleDragStart,
|
2563
|
+
handleDragEnd: handleDragEnd,
|
6263
2564
|
table: table
|
6264
2565
|
}), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React__default.createElement(MRT_TableHeadCellColumnActionsButton, {
|
6265
2566
|
header: header,
|
@@ -6273,58 +2574,12 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
6273
2574
|
}));
|
6274
2575
|
};
|
6275
2576
|
|
6276
|
-
var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
|
6277
|
-
var header = _ref.header,
|
6278
|
-
table = _ref.table;
|
6279
|
-
var getState = table.getState,
|
6280
|
-
setColumnOrder = table.setColumnOrder;
|
6281
|
-
|
6282
|
-
var _getState = getState(),
|
6283
|
-
columnOrder = _getState.columnOrder;
|
6284
|
-
|
6285
|
-
var column = header.column;
|
6286
|
-
|
6287
|
-
var _useDrop = useDrop({
|
6288
|
-
accept: 'column',
|
6289
|
-
drop: function drop(movingColumn) {
|
6290
|
-
var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
|
6291
|
-
setColumnOrder(newColumnOrder);
|
6292
|
-
}
|
6293
|
-
}),
|
6294
|
-
dropRef = _useDrop[1];
|
6295
|
-
|
6296
|
-
var _useDrag = useDrag({
|
6297
|
-
collect: function collect(monitor) {
|
6298
|
-
return {
|
6299
|
-
isDragging: monitor.isDragging()
|
6300
|
-
};
|
6301
|
-
},
|
6302
|
-
item: function item() {
|
6303
|
-
return column;
|
6304
|
-
},
|
6305
|
-
type: 'column'
|
6306
|
-
}),
|
6307
|
-
isDragging = _useDrag[0].isDragging,
|
6308
|
-
dragRef = _useDrag[1],
|
6309
|
-
previewRef = _useDrag[2];
|
6310
|
-
|
6311
|
-
return React__default.createElement(MRT_TableHeadCell, {
|
6312
|
-
dragRef: dragRef,
|
6313
|
-
dropRef: dropRef,
|
6314
|
-
header: header,
|
6315
|
-
isDragging: isDragging,
|
6316
|
-
previewRef: previewRef,
|
6317
|
-
table: table
|
6318
|
-
});
|
6319
|
-
};
|
6320
|
-
|
6321
2577
|
var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
6322
|
-
var
|
2578
|
+
var currentHoveredColumn = _ref.currentHoveredColumn,
|
2579
|
+
setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
2580
|
+
headerGroup = _ref.headerGroup,
|
6323
2581
|
table = _ref.table;
|
6324
|
-
var
|
6325
|
-
enableColumnOrdering = _table$options.enableColumnOrdering,
|
6326
|
-
enableGrouping = _table$options.enableGrouping,
|
6327
|
-
muiTableHeadRowProps = _table$options.muiTableHeadRowProps;
|
2582
|
+
var muiTableHeadRowProps = table.options.muiTableHeadRowProps;
|
6328
2583
|
var tableRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
|
6329
2584
|
headerGroup: headerGroup,
|
6330
2585
|
table: table
|
@@ -6337,11 +2592,9 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
6337
2592
|
}, tableRowProps == null ? void 0 : tableRowProps.sx);
|
6338
2593
|
}
|
6339
2594
|
}), headerGroup.headers.map(function (header, index) {
|
6340
|
-
return
|
6341
|
-
|
6342
|
-
|
6343
|
-
table: table
|
6344
|
-
}) : React__default.createElement(MRT_TableHeadCell, {
|
2595
|
+
return React__default.createElement(MRT_TableHeadCell, {
|
2596
|
+
currentHoveredColumn: currentHoveredColumn,
|
2597
|
+
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
6345
2598
|
header: header,
|
6346
2599
|
key: header.id || index,
|
6347
2600
|
table: table
|
@@ -6350,7 +2603,9 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
6350
2603
|
};
|
6351
2604
|
|
6352
2605
|
var MRT_TableHead = function MRT_TableHead(_ref) {
|
6353
|
-
var
|
2606
|
+
var currentHoveredColumn = _ref.currentHoveredColumn,
|
2607
|
+
setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
2608
|
+
table = _ref.table;
|
6354
2609
|
var getHeaderGroups = table.getHeaderGroups,
|
6355
2610
|
muiTableHeadProps = table.options.muiTableHeadProps;
|
6356
2611
|
var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps({
|
@@ -6358,6 +2613,8 @@ var MRT_TableHead = function MRT_TableHead(_ref) {
|
|
6358
2613
|
}) : muiTableHeadProps;
|
6359
2614
|
return React__default.createElement(material.TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map(function (headerGroup) {
|
6360
2615
|
return React__default.createElement(MRT_TableHeadRow, {
|
2616
|
+
currentHoveredColumn: currentHoveredColumn,
|
2617
|
+
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
6361
2618
|
headerGroup: headerGroup,
|
6362
2619
|
key: headerGroup.id,
|
6363
2620
|
table: table
|
@@ -6365,498 +2622,6 @@ var MRT_TableHead = function MRT_TableHead(_ref) {
|
|
6365
2622
|
}));
|
6366
2623
|
};
|
6367
2624
|
|
6368
|
-
function _extends$1() {
|
6369
|
-
_extends$1 = Object.assign || function (target) {
|
6370
|
-
for (var i = 1; i < arguments.length; i++) {
|
6371
|
-
var source = arguments[i];
|
6372
|
-
|
6373
|
-
for (var key in source) {
|
6374
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
6375
|
-
target[key] = source[key];
|
6376
|
-
}
|
6377
|
-
}
|
6378
|
-
}
|
6379
|
-
|
6380
|
-
return target;
|
6381
|
-
};
|
6382
|
-
|
6383
|
-
return _extends$1.apply(this, arguments);
|
6384
|
-
}
|
6385
|
-
|
6386
|
-
function _objectWithoutPropertiesLoose$2(source, excluded) {
|
6387
|
-
if (source == null) return {};
|
6388
|
-
var target = {};
|
6389
|
-
var sourceKeys = Object.keys(source);
|
6390
|
-
var key, i;
|
6391
|
-
|
6392
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
6393
|
-
key = sourceKeys[i];
|
6394
|
-
if (excluded.indexOf(key) >= 0) continue;
|
6395
|
-
target[key] = source[key];
|
6396
|
-
}
|
6397
|
-
|
6398
|
-
return target;
|
6399
|
-
}
|
6400
|
-
|
6401
|
-
var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
|
6402
|
-
|
6403
|
-
var rectChanged = function rectChanged(a, b) {
|
6404
|
-
if (a === void 0) {
|
6405
|
-
a = {};
|
6406
|
-
}
|
6407
|
-
|
6408
|
-
if (b === void 0) {
|
6409
|
-
b = {};
|
6410
|
-
}
|
6411
|
-
|
6412
|
-
return props.some(function (prop) {
|
6413
|
-
return a[prop] !== b[prop];
|
6414
|
-
});
|
6415
|
-
};
|
6416
|
-
|
6417
|
-
var observedNodes = /*#__PURE__*/new Map();
|
6418
|
-
var rafId;
|
6419
|
-
|
6420
|
-
var run = function run() {
|
6421
|
-
var changedStates = [];
|
6422
|
-
observedNodes.forEach(function (state, node) {
|
6423
|
-
var newRect = node.getBoundingClientRect();
|
6424
|
-
|
6425
|
-
if (rectChanged(newRect, state.rect)) {
|
6426
|
-
state.rect = newRect;
|
6427
|
-
changedStates.push(state);
|
6428
|
-
}
|
6429
|
-
});
|
6430
|
-
changedStates.forEach(function (state) {
|
6431
|
-
state.callbacks.forEach(function (cb) {
|
6432
|
-
return cb(state.rect);
|
6433
|
-
});
|
6434
|
-
});
|
6435
|
-
rafId = window.requestAnimationFrame(run);
|
6436
|
-
};
|
6437
|
-
|
6438
|
-
function observeRect(node, cb) {
|
6439
|
-
return {
|
6440
|
-
observe: function observe() {
|
6441
|
-
var wasEmpty = observedNodes.size === 0;
|
6442
|
-
|
6443
|
-
if (observedNodes.has(node)) {
|
6444
|
-
observedNodes.get(node).callbacks.push(cb);
|
6445
|
-
} else {
|
6446
|
-
observedNodes.set(node, {
|
6447
|
-
rect: undefined,
|
6448
|
-
hasRectChanged: false,
|
6449
|
-
callbacks: [cb]
|
6450
|
-
});
|
6451
|
-
}
|
6452
|
-
|
6453
|
-
if (wasEmpty) run();
|
6454
|
-
},
|
6455
|
-
unobserve: function unobserve() {
|
6456
|
-
var state = observedNodes.get(node);
|
6457
|
-
|
6458
|
-
if (state) {
|
6459
|
-
// Remove the callback
|
6460
|
-
var index = state.callbacks.indexOf(cb);
|
6461
|
-
if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
|
6462
|
-
|
6463
|
-
if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
|
6464
|
-
|
6465
|
-
if (!observedNodes.size) cancelAnimationFrame(rafId);
|
6466
|
-
}
|
6467
|
-
}
|
6468
|
-
};
|
6469
|
-
}
|
6470
|
-
|
6471
|
-
var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
|
6472
|
-
|
6473
|
-
function useRect(nodeRef, initialRect) {
|
6474
|
-
if (initialRect === void 0) {
|
6475
|
-
initialRect = {
|
6476
|
-
width: 0,
|
6477
|
-
height: 0
|
6478
|
-
};
|
6479
|
-
}
|
6480
|
-
|
6481
|
-
var _React$useState = React__default.useState(nodeRef.current),
|
6482
|
-
element = _React$useState[0],
|
6483
|
-
setElement = _React$useState[1];
|
6484
|
-
|
6485
|
-
var _React$useReducer = React__default.useReducer(rectReducer, initialRect),
|
6486
|
-
rect = _React$useReducer[0],
|
6487
|
-
dispatch = _React$useReducer[1];
|
6488
|
-
|
6489
|
-
var initialRectSet = React__default.useRef(false);
|
6490
|
-
useIsomorphicLayoutEffect$1(function () {
|
6491
|
-
if (nodeRef.current !== element) {
|
6492
|
-
setElement(nodeRef.current);
|
6493
|
-
}
|
6494
|
-
});
|
6495
|
-
useIsomorphicLayoutEffect$1(function () {
|
6496
|
-
if (element && !initialRectSet.current) {
|
6497
|
-
initialRectSet.current = true;
|
6498
|
-
|
6499
|
-
var _rect = element.getBoundingClientRect();
|
6500
|
-
|
6501
|
-
dispatch({
|
6502
|
-
rect: _rect
|
6503
|
-
});
|
6504
|
-
}
|
6505
|
-
}, [element]);
|
6506
|
-
React__default.useEffect(function () {
|
6507
|
-
if (!element) {
|
6508
|
-
return;
|
6509
|
-
}
|
6510
|
-
|
6511
|
-
var observer = observeRect(element, function (rect) {
|
6512
|
-
dispatch({
|
6513
|
-
rect: rect
|
6514
|
-
});
|
6515
|
-
});
|
6516
|
-
observer.observe();
|
6517
|
-
return function () {
|
6518
|
-
observer.unobserve();
|
6519
|
-
};
|
6520
|
-
}, [element]);
|
6521
|
-
return rect;
|
6522
|
-
}
|
6523
|
-
|
6524
|
-
function rectReducer(state, action) {
|
6525
|
-
var rect = action.rect;
|
6526
|
-
|
6527
|
-
if (state.height !== rect.height || state.width !== rect.width) {
|
6528
|
-
return rect;
|
6529
|
-
}
|
6530
|
-
|
6531
|
-
return state;
|
6532
|
-
}
|
6533
|
-
|
6534
|
-
var defaultEstimateSize = function defaultEstimateSize() {
|
6535
|
-
return 50;
|
6536
|
-
};
|
6537
|
-
|
6538
|
-
var defaultKeyExtractor = function defaultKeyExtractor(index) {
|
6539
|
-
return index;
|
6540
|
-
};
|
6541
|
-
|
6542
|
-
var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
|
6543
|
-
var key = horizontal ? 'offsetWidth' : 'offsetHeight';
|
6544
|
-
return el[key];
|
6545
|
-
};
|
6546
|
-
|
6547
|
-
var defaultRangeExtractor = function defaultRangeExtractor(range) {
|
6548
|
-
var start = Math.max(range.start - range.overscan, 0);
|
6549
|
-
var end = Math.min(range.end + range.overscan, range.size - 1);
|
6550
|
-
var arr = [];
|
6551
|
-
|
6552
|
-
for (var i = start; i <= end; i++) {
|
6553
|
-
arr.push(i);
|
6554
|
-
}
|
6555
|
-
|
6556
|
-
return arr;
|
6557
|
-
};
|
6558
|
-
function useVirtual(_ref) {
|
6559
|
-
var _measurements;
|
6560
|
-
|
6561
|
-
var _ref$size = _ref.size,
|
6562
|
-
size = _ref$size === void 0 ? 0 : _ref$size,
|
6563
|
-
_ref$estimateSize = _ref.estimateSize,
|
6564
|
-
estimateSize = _ref$estimateSize === void 0 ? defaultEstimateSize : _ref$estimateSize,
|
6565
|
-
_ref$overscan = _ref.overscan,
|
6566
|
-
overscan = _ref$overscan === void 0 ? 1 : _ref$overscan,
|
6567
|
-
_ref$paddingStart = _ref.paddingStart,
|
6568
|
-
paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
|
6569
|
-
_ref$paddingEnd = _ref.paddingEnd,
|
6570
|
-
paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
|
6571
|
-
parentRef = _ref.parentRef,
|
6572
|
-
horizontal = _ref.horizontal,
|
6573
|
-
scrollToFn = _ref.scrollToFn,
|
6574
|
-
useObserver = _ref.useObserver,
|
6575
|
-
initialRect = _ref.initialRect,
|
6576
|
-
onScrollElement = _ref.onScrollElement,
|
6577
|
-
scrollOffsetFn = _ref.scrollOffsetFn,
|
6578
|
-
_ref$keyExtractor = _ref.keyExtractor,
|
6579
|
-
keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
|
6580
|
-
_ref$measureSize = _ref.measureSize,
|
6581
|
-
measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize,
|
6582
|
-
_ref$rangeExtractor = _ref.rangeExtractor,
|
6583
|
-
rangeExtractor = _ref$rangeExtractor === void 0 ? defaultRangeExtractor : _ref$rangeExtractor;
|
6584
|
-
var sizeKey = horizontal ? 'width' : 'height';
|
6585
|
-
var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
|
6586
|
-
var latestRef = React__default.useRef({
|
6587
|
-
scrollOffset: 0,
|
6588
|
-
measurements: []
|
6589
|
-
});
|
6590
|
-
|
6591
|
-
var _React$useState = React__default.useState(0),
|
6592
|
-
scrollOffset = _React$useState[0],
|
6593
|
-
setScrollOffset = _React$useState[1];
|
6594
|
-
|
6595
|
-
latestRef.current.scrollOffset = scrollOffset;
|
6596
|
-
var useMeasureParent = useObserver || useRect;
|
6597
|
-
|
6598
|
-
var _useMeasureParent = useMeasureParent(parentRef, initialRect),
|
6599
|
-
outerSize = _useMeasureParent[sizeKey];
|
6600
|
-
|
6601
|
-
latestRef.current.outerSize = outerSize;
|
6602
|
-
var defaultScrollToFn = React__default.useCallback(function (offset) {
|
6603
|
-
if (parentRef.current) {
|
6604
|
-
parentRef.current[scrollKey] = offset;
|
6605
|
-
}
|
6606
|
-
}, [parentRef, scrollKey]);
|
6607
|
-
var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
|
6608
|
-
scrollToFn = React__default.useCallback(function (offset) {
|
6609
|
-
resolvedScrollToFn(offset, defaultScrollToFn);
|
6610
|
-
}, [defaultScrollToFn, resolvedScrollToFn]);
|
6611
|
-
|
6612
|
-
var _React$useState2 = React__default.useState({}),
|
6613
|
-
measuredCache = _React$useState2[0],
|
6614
|
-
setMeasuredCache = _React$useState2[1];
|
6615
|
-
|
6616
|
-
var measure = React__default.useCallback(function () {
|
6617
|
-
return setMeasuredCache({});
|
6618
|
-
}, []);
|
6619
|
-
var pendingMeasuredCacheIndexesRef = React__default.useRef([]);
|
6620
|
-
var measurements = React__default.useMemo(function () {
|
6621
|
-
var min = pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min.apply(Math, pendingMeasuredCacheIndexesRef.current) : 0;
|
6622
|
-
pendingMeasuredCacheIndexesRef.current = [];
|
6623
|
-
var measurements = latestRef.current.measurements.slice(0, min);
|
6624
|
-
|
6625
|
-
for (var i = min; i < size; i++) {
|
6626
|
-
var key = keyExtractor(i);
|
6627
|
-
var measuredSize = measuredCache[key];
|
6628
|
-
|
6629
|
-
var _start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
|
6630
|
-
|
6631
|
-
var _size = typeof measuredSize === 'number' ? measuredSize : estimateSize(i);
|
6632
|
-
|
6633
|
-
var _end = _start + _size;
|
6634
|
-
|
6635
|
-
measurements[i] = {
|
6636
|
-
index: i,
|
6637
|
-
start: _start,
|
6638
|
-
size: _size,
|
6639
|
-
end: _end,
|
6640
|
-
key: key
|
6641
|
-
};
|
6642
|
-
}
|
6643
|
-
|
6644
|
-
return measurements;
|
6645
|
-
}, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
|
6646
|
-
var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || paddingStart) + paddingEnd;
|
6647
|
-
latestRef.current.measurements = measurements;
|
6648
|
-
latestRef.current.totalSize = totalSize;
|
6649
|
-
var element = onScrollElement ? onScrollElement.current : parentRef.current;
|
6650
|
-
var scrollOffsetFnRef = React__default.useRef(scrollOffsetFn);
|
6651
|
-
scrollOffsetFnRef.current = scrollOffsetFn;
|
6652
|
-
useIsomorphicLayoutEffect$1(function () {
|
6653
|
-
if (!element) {
|
6654
|
-
setScrollOffset(0);
|
6655
|
-
return;
|
6656
|
-
}
|
6657
|
-
|
6658
|
-
var onScroll = function onScroll(event) {
|
6659
|
-
var offset = scrollOffsetFnRef.current ? scrollOffsetFnRef.current(event) : element[scrollKey];
|
6660
|
-
setScrollOffset(offset);
|
6661
|
-
};
|
6662
|
-
|
6663
|
-
onScroll();
|
6664
|
-
element.addEventListener('scroll', onScroll, {
|
6665
|
-
capture: false,
|
6666
|
-
passive: true
|
6667
|
-
});
|
6668
|
-
return function () {
|
6669
|
-
element.removeEventListener('scroll', onScroll);
|
6670
|
-
};
|
6671
|
-
}, [element, scrollKey]);
|
6672
|
-
|
6673
|
-
var _calculateRange = calculateRange(latestRef.current),
|
6674
|
-
start = _calculateRange.start,
|
6675
|
-
end = _calculateRange.end;
|
6676
|
-
|
6677
|
-
var indexes = React__default.useMemo(function () {
|
6678
|
-
return rangeExtractor({
|
6679
|
-
start: start,
|
6680
|
-
end: end,
|
6681
|
-
overscan: overscan,
|
6682
|
-
size: measurements.length
|
6683
|
-
});
|
6684
|
-
}, [start, end, overscan, measurements.length, rangeExtractor]);
|
6685
|
-
var measureSizeRef = React__default.useRef(measureSize);
|
6686
|
-
measureSizeRef.current = measureSize;
|
6687
|
-
var virtualItems = React__default.useMemo(function () {
|
6688
|
-
var virtualItems = [];
|
6689
|
-
|
6690
|
-
var _loop = function _loop(k, len) {
|
6691
|
-
var i = indexes[k];
|
6692
|
-
var measurement = measurements[i];
|
6693
|
-
|
6694
|
-
var item = _extends$1(_extends$1({}, measurement), {}, {
|
6695
|
-
measureRef: function measureRef(el) {
|
6696
|
-
if (el) {
|
6697
|
-
var measuredSize = measureSizeRef.current(el, horizontal);
|
6698
|
-
|
6699
|
-
if (measuredSize !== item.size) {
|
6700
|
-
var _scrollOffset = latestRef.current.scrollOffset;
|
6701
|
-
|
6702
|
-
if (item.start < _scrollOffset) {
|
6703
|
-
defaultScrollToFn(_scrollOffset + (measuredSize - item.size));
|
6704
|
-
}
|
6705
|
-
|
6706
|
-
pendingMeasuredCacheIndexesRef.current.push(i);
|
6707
|
-
setMeasuredCache(function (old) {
|
6708
|
-
var _extends2;
|
6709
|
-
|
6710
|
-
return _extends$1(_extends$1({}, old), {}, (_extends2 = {}, _extends2[item.key] = measuredSize, _extends2));
|
6711
|
-
});
|
6712
|
-
}
|
6713
|
-
}
|
6714
|
-
}
|
6715
|
-
});
|
6716
|
-
|
6717
|
-
virtualItems.push(item);
|
6718
|
-
};
|
6719
|
-
|
6720
|
-
for (var k = 0, len = indexes.length; k < len; k++) {
|
6721
|
-
_loop(k);
|
6722
|
-
}
|
6723
|
-
|
6724
|
-
return virtualItems;
|
6725
|
-
}, [indexes, defaultScrollToFn, horizontal, measurements]);
|
6726
|
-
var mountedRef = React__default.useRef(false);
|
6727
|
-
useIsomorphicLayoutEffect$1(function () {
|
6728
|
-
if (mountedRef.current) {
|
6729
|
-
setMeasuredCache({});
|
6730
|
-
}
|
6731
|
-
|
6732
|
-
mountedRef.current = true;
|
6733
|
-
}, [estimateSize]);
|
6734
|
-
var scrollToOffset = React__default.useCallback(function (toOffset, _temp) {
|
6735
|
-
var _ref2 = _temp === void 0 ? {} : _temp,
|
6736
|
-
_ref2$align = _ref2.align,
|
6737
|
-
align = _ref2$align === void 0 ? 'start' : _ref2$align;
|
6738
|
-
|
6739
|
-
var _latestRef$current = latestRef.current,
|
6740
|
-
scrollOffset = _latestRef$current.scrollOffset,
|
6741
|
-
outerSize = _latestRef$current.outerSize;
|
6742
|
-
|
6743
|
-
if (align === 'auto') {
|
6744
|
-
if (toOffset <= scrollOffset) {
|
6745
|
-
align = 'start';
|
6746
|
-
} else if (toOffset >= scrollOffset + outerSize) {
|
6747
|
-
align = 'end';
|
6748
|
-
} else {
|
6749
|
-
align = 'start';
|
6750
|
-
}
|
6751
|
-
}
|
6752
|
-
|
6753
|
-
if (align === 'start') {
|
6754
|
-
scrollToFn(toOffset);
|
6755
|
-
} else if (align === 'end') {
|
6756
|
-
scrollToFn(toOffset - outerSize);
|
6757
|
-
} else if (align === 'center') {
|
6758
|
-
scrollToFn(toOffset - outerSize / 2);
|
6759
|
-
}
|
6760
|
-
}, [scrollToFn]);
|
6761
|
-
var tryScrollToIndex = React__default.useCallback(function (index, _temp2) {
|
6762
|
-
var _ref3 = _temp2 === void 0 ? {} : _temp2,
|
6763
|
-
_ref3$align = _ref3.align,
|
6764
|
-
align = _ref3$align === void 0 ? 'auto' : _ref3$align,
|
6765
|
-
rest = _objectWithoutPropertiesLoose$2(_ref3, ["align"]);
|
6766
|
-
|
6767
|
-
var _latestRef$current2 = latestRef.current,
|
6768
|
-
measurements = _latestRef$current2.measurements,
|
6769
|
-
scrollOffset = _latestRef$current2.scrollOffset,
|
6770
|
-
outerSize = _latestRef$current2.outerSize;
|
6771
|
-
var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
|
6772
|
-
|
6773
|
-
if (!measurement) {
|
6774
|
-
return;
|
6775
|
-
}
|
6776
|
-
|
6777
|
-
if (align === 'auto') {
|
6778
|
-
if (measurement.end >= scrollOffset + outerSize) {
|
6779
|
-
align = 'end';
|
6780
|
-
} else if (measurement.start <= scrollOffset) {
|
6781
|
-
align = 'start';
|
6782
|
-
} else {
|
6783
|
-
return;
|
6784
|
-
}
|
6785
|
-
}
|
6786
|
-
|
6787
|
-
var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
|
6788
|
-
scrollToOffset(toOffset, _extends$1({
|
6789
|
-
align: align
|
6790
|
-
}, rest));
|
6791
|
-
}, [scrollToOffset, size]);
|
6792
|
-
var scrollToIndex = React__default.useCallback(function () {
|
6793
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
6794
|
-
args[_key] = arguments[_key];
|
6795
|
-
}
|
6796
|
-
|
6797
|
-
// We do a double request here because of
|
6798
|
-
// dynamic sizes which can cause offset shift
|
6799
|
-
// and end up in the wrong spot. Unfortunately,
|
6800
|
-
// we can't know about those dynamic sizes until
|
6801
|
-
// we try and render them. So double down!
|
6802
|
-
tryScrollToIndex.apply(void 0, args);
|
6803
|
-
requestAnimationFrame(function () {
|
6804
|
-
tryScrollToIndex.apply(void 0, args);
|
6805
|
-
});
|
6806
|
-
}, [tryScrollToIndex]);
|
6807
|
-
return {
|
6808
|
-
virtualItems: virtualItems,
|
6809
|
-
totalSize: totalSize,
|
6810
|
-
scrollToOffset: scrollToOffset,
|
6811
|
-
scrollToIndex: scrollToIndex,
|
6812
|
-
measure: measure
|
6813
|
-
};
|
6814
|
-
}
|
6815
|
-
|
6816
|
-
var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
|
6817
|
-
while (low <= high) {
|
6818
|
-
var middle = (low + high) / 2 | 0;
|
6819
|
-
var currentValue = getCurrentValue(middle);
|
6820
|
-
|
6821
|
-
if (currentValue < value) {
|
6822
|
-
low = middle + 1;
|
6823
|
-
} else if (currentValue > value) {
|
6824
|
-
high = middle - 1;
|
6825
|
-
} else {
|
6826
|
-
return middle;
|
6827
|
-
}
|
6828
|
-
}
|
6829
|
-
|
6830
|
-
if (low > 0) {
|
6831
|
-
return low - 1;
|
6832
|
-
} else {
|
6833
|
-
return 0;
|
6834
|
-
}
|
6835
|
-
};
|
6836
|
-
|
6837
|
-
function calculateRange(_ref4) {
|
6838
|
-
var measurements = _ref4.measurements,
|
6839
|
-
outerSize = _ref4.outerSize,
|
6840
|
-
scrollOffset = _ref4.scrollOffset;
|
6841
|
-
var size = measurements.length - 1;
|
6842
|
-
|
6843
|
-
var getOffset = function getOffset(index) {
|
6844
|
-
return measurements[index].start;
|
6845
|
-
};
|
6846
|
-
|
6847
|
-
var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
|
6848
|
-
var end = start;
|
6849
|
-
|
6850
|
-
while (end < size && measurements[end].end < scrollOffset + outerSize) {
|
6851
|
-
end++;
|
6852
|
-
}
|
6853
|
-
|
6854
|
-
return {
|
6855
|
-
start: start,
|
6856
|
-
end: end
|
6857
|
-
};
|
6858
|
-
}
|
6859
|
-
|
6860
2625
|
var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
|
6861
2626
|
var cell = _ref.cell,
|
6862
2627
|
table = _ref.table;
|
@@ -7013,23 +2778,21 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
7013
2778
|
var cell = _ref.cell,
|
7014
2779
|
enableHover = _ref.enableHover,
|
7015
2780
|
rowIndex = _ref.rowIndex,
|
2781
|
+
setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
7016
2782
|
table = _ref.table;
|
7017
2783
|
var getState = table.getState,
|
7018
2784
|
_table$options = table.options,
|
7019
2785
|
editingMode = _table$options.editingMode,
|
7020
2786
|
enableClickToCopy = _table$options.enableClickToCopy,
|
7021
|
-
enableColumnOrdering = _table$options.enableColumnOrdering,
|
7022
2787
|
enableEditing = _table$options.enableEditing,
|
7023
2788
|
enableRowNumbers = _table$options.enableRowNumbers,
|
7024
2789
|
muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
|
7025
2790
|
muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
|
7026
2791
|
rowNumberMode = _table$options.rowNumberMode,
|
7027
2792
|
tableId = _table$options.tableId,
|
7028
|
-
setColumnOrder = table.setColumnOrder,
|
7029
2793
|
setCurrentEditingCell = table.setCurrentEditingCell;
|
7030
2794
|
|
7031
2795
|
var _getState = getState(),
|
7032
|
-
columnOrder = _getState.columnOrder,
|
7033
2796
|
currentEditingCell = _getState.currentEditingCell,
|
7034
2797
|
currentEditingRow = _getState.currentEditingRow,
|
7035
2798
|
density = _getState.density,
|
@@ -7040,16 +2803,6 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
7040
2803
|
row = cell.row;
|
7041
2804
|
var columnDef = column.columnDef;
|
7042
2805
|
var columnDefType = columnDef.columnDefType;
|
7043
|
-
|
7044
|
-
var _useDrop = useDrop({
|
7045
|
-
accept: 'column',
|
7046
|
-
drop: function drop(movingColumn) {
|
7047
|
-
var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
|
7048
|
-
setColumnOrder(newColumnOrder);
|
7049
|
-
}
|
7050
|
-
}),
|
7051
|
-
dropRef = _useDrop[1];
|
7052
|
-
|
7053
2806
|
var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
|
7054
2807
|
cell: cell,
|
7055
2808
|
table: table
|
@@ -7093,10 +2846,14 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
7093
2846
|
return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
|
7094
2847
|
};
|
7095
2848
|
|
2849
|
+
var handleDragEnter = function handleDragEnter(_e) {
|
2850
|
+
setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
|
2851
|
+
};
|
2852
|
+
|
7096
2853
|
return React__default.createElement(material.TableCell, Object.assign({
|
7097
|
-
onDoubleClick: handleDoubleClick
|
2854
|
+
onDoubleClick: handleDoubleClick,
|
2855
|
+
onDragEnter: handleDragEnter
|
7098
2856
|
}, tableCellProps, {
|
7099
|
-
ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
|
7100
2857
|
sx: function sx(theme) {
|
7101
2858
|
var _columnDef$minSize;
|
7102
2859
|
|
@@ -7184,6 +2941,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
7184
2941
|
|
7185
2942
|
var row = _ref.row,
|
7186
2943
|
rowIndex = _ref.rowIndex,
|
2944
|
+
setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
7187
2945
|
table = _ref.table;
|
7188
2946
|
var getIsSomeColumnsPinned = table.getIsSomeColumnsPinned,
|
7189
2947
|
_table$options = table.options,
|
@@ -7212,6 +2970,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
7212
2970
|
key: cell.id,
|
7213
2971
|
enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
|
7214
2972
|
rowIndex: rowIndex,
|
2973
|
+
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
7215
2974
|
table: table
|
7216
2975
|
});
|
7217
2976
|
})), renderDetailPanel && !row.getIsGrouped() && React__default.createElement(MRT_TableDetailPanel, {
|
@@ -7221,7 +2980,8 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
7221
2980
|
};
|
7222
2981
|
|
7223
2982
|
var MRT_TableBody = function MRT_TableBody(_ref) {
|
7224
|
-
var
|
2983
|
+
var setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
2984
|
+
table = _ref.table,
|
7225
2985
|
tableContainerRef = _ref.tableContainerRef;
|
7226
2986
|
var getRowModel = table.getRowModel,
|
7227
2987
|
getPrePaginationRowModel = table.getPrePaginationRowModel,
|
@@ -7262,7 +3022,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
|
|
7262
3022
|
|
7263
3023
|
return enablePagination ? getRowModel().rows : getPrePaginationRowModel().rows;
|
7264
3024
|
}, [enableGlobalFilterRankedResults, enableGlobalFilterRankedResults && globalFilter || !enablePagination ? getPrePaginationRowModel().rows : getRowModel().rows, globalFilter]);
|
7265
|
-
var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
|
3025
|
+
var rowVirtualizer = enableRowVirtualization ? reactVirtual.useVirtual(_extends({
|
7266
3026
|
// estimateSize: () => (density === 'compact' ? 25 : 50),
|
7267
3027
|
overscan: density === 'compact' ? 30 : 10,
|
7268
3028
|
parentRef: tableContainerRef,
|
@@ -7287,6 +3047,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
|
|
7287
3047
|
key: row.id,
|
7288
3048
|
row: row,
|
7289
3049
|
rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex,
|
3050
|
+
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
7290
3051
|
table: table
|
7291
3052
|
});
|
7292
3053
|
}), enableRowVirtualization && paddingBottom > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
|
@@ -7404,6 +3165,11 @@ var MRT_Table = function MRT_Table(_ref) {
|
|
7404
3165
|
var tableProps = muiTableProps instanceof Function ? muiTableProps({
|
7405
3166
|
table: table
|
7406
3167
|
}) : muiTableProps;
|
3168
|
+
|
3169
|
+
var _useState = React.useState(null),
|
3170
|
+
currentHoveredColumn = _useState[0],
|
3171
|
+
setCurrentHoveredColumn = _useState[1];
|
3172
|
+
|
7407
3173
|
return React__default.createElement(material.Table, Object.assign({
|
7408
3174
|
stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
|
7409
3175
|
}, tableProps, {
|
@@ -7411,8 +3177,11 @@ var MRT_Table = function MRT_Table(_ref) {
|
|
7411
3177
|
tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
|
7412
3178
|
}, tableProps == null ? void 0 : tableProps.sx)
|
7413
3179
|
}), enableTableHead && React__default.createElement(MRT_TableHead, {
|
3180
|
+
currentHoveredColumn: currentHoveredColumn,
|
3181
|
+
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
7414
3182
|
table: table
|
7415
3183
|
}), React__default.createElement(MRT_TableBody, {
|
3184
|
+
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
7416
3185
|
tableContainerRef: tableContainerRef,
|
7417
3186
|
table: table
|
7418
3187
|
}), enableTableFooter && React__default.createElement(MRT_TableFooter, {
|
@@ -7420,7 +3189,7 @@ var MRT_Table = function MRT_Table(_ref) {
|
|
7420
3189
|
}));
|
7421
3190
|
};
|
7422
3191
|
|
7423
|
-
var useIsomorphicLayoutEffect
|
3192
|
+
var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
7424
3193
|
var MRT_TableContainer = function MRT_TableContainer(_ref) {
|
7425
3194
|
var table = _ref.table;
|
7426
3195
|
var getState = table.getState,
|
@@ -7440,7 +3209,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
|
|
7440
3209
|
var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps({
|
7441
3210
|
table: table
|
7442
3211
|
}) : muiTableContainerProps;
|
7443
|
-
useIsomorphicLayoutEffect
|
3212
|
+
useIsomorphicLayoutEffect(function () {
|
7444
3213
|
var _document$getElementB, _document, _document$getElementB2, _document$getElementB3, _document2, _document2$getElement;
|
7445
3214
|
|
7446
3215
|
var topToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB = (_document = document) == null ? void 0 : (_document$getElementB2 = _document.getElementById("mrt-" + tableId + "-toolbar-top")) == null ? void 0 : _document$getElementB2.offsetHeight) != null ? _document$getElementB : 0 : 0;
|
@@ -7448,8 +3217,9 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
|
|
7448
3217
|
setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
|
7449
3218
|
});
|
7450
3219
|
var tableContainerRef = React__default.useRef(null);
|
7451
|
-
return React__default.createElement(material.TableContainer, Object.assign({
|
7452
|
-
ref: tableContainerRef
|
3220
|
+
return React__default.createElement(material.TableContainer, Object.assign({
|
3221
|
+
ref: tableContainerRef
|
3222
|
+
}, tableContainerProps, {
|
7453
3223
|
sx: _extends({
|
7454
3224
|
maxWidth: '100%',
|
7455
3225
|
maxHeight: enableStickyHeader || enableRowVirtualization ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 9999px)" : undefined,
|
@@ -7487,9 +3257,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
|
|
7487
3257
|
var tablePaperProps = muiTablePaperProps instanceof Function ? muiTablePaperProps({
|
7488
3258
|
table: table
|
7489
3259
|
}) : muiTablePaperProps;
|
7490
|
-
return React__default.createElement(
|
7491
|
-
backend: HTML5Backend
|
7492
|
-
}, React__default.createElement(material.Paper, Object.assign({
|
3260
|
+
return React__default.createElement(material.Paper, Object.assign({
|
7493
3261
|
elevation: 2
|
7494
3262
|
}, tablePaperProps, {
|
7495
3263
|
sx: _extends({
|
@@ -7509,7 +3277,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
|
|
7509
3277
|
table: table
|
7510
3278
|
}), enableToolbarBottom && React__default.createElement(MRT_ToolbarBottom, {
|
7511
3279
|
table: table
|
7512
|
-
}))
|
3280
|
+
}));
|
7513
3281
|
};
|
7514
3282
|
|
7515
3283
|
var MRT_TableRoot = function MRT_TableRoot(props) {
|