1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
6 |
|
7 | var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
|
8 | var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
|
9 | var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
|
10 | var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
|
11 | var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
|
12 | var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
|
13 | var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
|
14 | var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
|
15 | var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
|
16 | var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
|
17 | var React = require('react');
|
18 | var PropTypes = _interopDefault(require('prop-types'));
|
19 | var reactDom = require('react-dom');
|
20 | var invariant = _interopDefault(require('invariant'));
|
21 |
|
22 | var Manager = function () {
|
23 | function Manager() {
|
24 | _classCallCheck(this, Manager);
|
25 |
|
26 | _defineProperty(this, "refs", {});
|
27 | }
|
28 |
|
29 | _createClass(Manager, [{
|
30 | key: "add",
|
31 | value: function add(collection, ref) {
|
32 | if (!this.refs[collection]) {
|
33 | this.refs[collection] = [];
|
34 | }
|
35 |
|
36 | this.refs[collection].push(ref);
|
37 | }
|
38 | }, {
|
39 | key: "remove",
|
40 | value: function remove(collection, ref) {
|
41 | var index = this.getIndex(collection, ref);
|
42 |
|
43 | if (index !== -1) {
|
44 | this.refs[collection].splice(index, 1);
|
45 | }
|
46 | }
|
47 | }, {
|
48 | key: "isActive",
|
49 | value: function isActive() {
|
50 | return this.active;
|
51 | }
|
52 | }, {
|
53 | key: "getActive",
|
54 | value: function getActive() {
|
55 | var _this = this;
|
56 |
|
57 | return this.refs[this.active.collection].find(function (_ref) {
|
58 | var node = _ref.node;
|
59 | return node.sortableInfo.index == _this.active.index;
|
60 | });
|
61 | }
|
62 | }, {
|
63 | key: "getIndex",
|
64 | value: function getIndex(collection, ref) {
|
65 | return this.refs[collection].indexOf(ref);
|
66 | }
|
67 | }, {
|
68 | key: "getOrderedRefs",
|
69 | value: function getOrderedRefs() {
|
70 | var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection;
|
71 | return this.refs[collection].sort(sortByIndex);
|
72 | }
|
73 | }]);
|
74 |
|
75 | return Manager;
|
76 | }();
|
77 |
|
78 | function sortByIndex(_ref2, _ref3) {
|
79 | var index1 = _ref2.node.sortableInfo.index;
|
80 | var index2 = _ref3.node.sortableInfo.index;
|
81 | return index1 - index2;
|
82 | }
|
83 |
|
84 | function arrayMove(array, from, to) {
|
85 | array = array.slice();
|
86 | array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
|
87 | return array;
|
88 | }
|
89 | function omit(obj) {
|
90 | for (var _len = arguments.length, keysToOmit = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
91 | keysToOmit[_key - 1] = arguments[_key];
|
92 | }
|
93 |
|
94 | return Object.keys(obj).reduce(function (acc, key) {
|
95 | if (keysToOmit.indexOf(key) === -1) {
|
96 | acc[key] = obj[key];
|
97 | }
|
98 |
|
99 | return acc;
|
100 | }, {});
|
101 | }
|
102 | var events = {
|
103 | start: ['touchstart', 'mousedown'],
|
104 | move: ['touchmove', 'mousemove'],
|
105 | end: ['touchend', 'touchcancel', 'mouseup']
|
106 | };
|
107 | var vendorPrefix = function () {
|
108 | if (typeof window === 'undefined' || typeof document === 'undefined') {
|
109 | return '';
|
110 | }
|
111 |
|
112 | var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe'];
|
113 | var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1];
|
114 |
|
115 | switch (pre) {
|
116 | case 'ms':
|
117 | return 'ms';
|
118 |
|
119 | default:
|
120 | return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : '';
|
121 | }
|
122 | }();
|
123 | function closest(el, fn) {
|
124 | while (el) {
|
125 | if (fn(el)) {
|
126 | return el;
|
127 | }
|
128 |
|
129 | el = el.parentNode;
|
130 | }
|
131 |
|
132 | return null;
|
133 | }
|
134 | function limit(min, max, value) {
|
135 | return Math.max(min, Math.min(value, max));
|
136 | }
|
137 |
|
138 | function getPixelValue(stringValue) {
|
139 | if (stringValue.substr(-2) === 'px') {
|
140 | return parseFloat(stringValue);
|
141 | }
|
142 |
|
143 | return 0;
|
144 | }
|
145 |
|
146 | function getElementMargin(element) {
|
147 | var style = window.getComputedStyle(element);
|
148 | return {
|
149 | top: getPixelValue(style.marginTop),
|
150 | right: getPixelValue(style.marginRight),
|
151 | bottom: getPixelValue(style.marginBottom),
|
152 | left: getPixelValue(style.marginLeft)
|
153 | };
|
154 | }
|
155 | function provideDisplayName(prefix, Component) {
|
156 | var componentName = Component.displayName || Component.name;
|
157 | return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix;
|
158 | }
|
159 | function getPosition(event) {
|
160 | if (event.touches && event.touches.length) {
|
161 | return {
|
162 | x: event.touches[0].pageX,
|
163 | y: event.touches[0].pageY
|
164 | };
|
165 | } else if (event.changedTouches && event.changedTouches.length) {
|
166 | return {
|
167 | x: event.changedTouches[0].pageX,
|
168 | y: event.changedTouches[0].pageY
|
169 | };
|
170 | } else {
|
171 | return {
|
172 | x: event.pageX,
|
173 | y: event.pageY
|
174 | };
|
175 | }
|
176 | }
|
177 | function isTouchEvent(event) {
|
178 | return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length;
|
179 | }
|
180 | function getEdgeOffset(node, parent) {
|
181 | var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
|
182 | top: 0,
|
183 | left: 0
|
184 | };
|
185 |
|
186 | if (!node) {
|
187 | return undefined;
|
188 | }
|
189 |
|
190 | var nodeOffset = {
|
191 | top: offset.top + node.offsetTop,
|
192 | left: offset.left + node.offsetLeft
|
193 | };
|
194 |
|
195 | if (node.parentNode === parent) {
|
196 | return nodeOffset;
|
197 | }
|
198 |
|
199 | return getEdgeOffset(node.parentNode, parent, nodeOffset);
|
200 | }
|
201 | function getLockPixelOffset(_ref) {
|
202 | var lockOffset = _ref.lockOffset,
|
203 | width = _ref.width,
|
204 | height = _ref.height;
|
205 | var offsetX = lockOffset;
|
206 | var offsetY = lockOffset;
|
207 | var unit = 'px';
|
208 |
|
209 | if (typeof lockOffset === 'string') {
|
210 | var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset);
|
211 | invariant(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset);
|
212 | offsetX = parseFloat(lockOffset);
|
213 | offsetY = parseFloat(lockOffset);
|
214 | unit = match[1];
|
215 | }
|
216 |
|
217 | invariant(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset);
|
218 |
|
219 | if (unit === '%') {
|
220 | offsetX = offsetX * width / 100;
|
221 | offsetY = offsetY * height / 100;
|
222 | }
|
223 |
|
224 | return {
|
225 | x: offsetX,
|
226 | y: offsetY
|
227 | };
|
228 | }
|
229 |
|
230 | function _finallyRethrows(body, finalizer) {
|
231 | try {
|
232 | var result = body();
|
233 | } catch (e) {
|
234 | return finalizer(true, e);
|
235 | }
|
236 |
|
237 | if (result && result.then) {
|
238 | return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
|
239 | }
|
240 |
|
241 | return finalizer(false, value);
|
242 | }
|
243 | function sortableContainer(WrappedComponent) {
|
244 | var _class, _temp;
|
245 |
|
246 | var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
247 | withRef: false
|
248 | };
|
249 | return _temp = _class = function (_React$Component) {
|
250 | _inherits(WithSortableContainer, _React$Component);
|
251 |
|
252 | function WithSortableContainer(props) {
|
253 | var _this;
|
254 |
|
255 | _classCallCheck(this, WithSortableContainer);
|
256 |
|
257 | _this = _possibleConstructorReturn(this, _getPrototypeOf(WithSortableContainer).call(this, props));
|
258 |
|
259 | _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleStart", function (event) {
|
260 | var _this$props = _this.props,
|
261 | distance = _this$props.distance,
|
262 | shouldCancelStart = _this$props.shouldCancelStart;
|
263 |
|
264 | if (event.button === 2 || shouldCancelStart(event)) {
|
265 | return;
|
266 | }
|
267 |
|
268 | _this._touched = true;
|
269 | _this._pos = getPosition(event);
|
270 | var node = closest(event.target, function (el) {
|
271 | return el.sortableInfo != null;
|
272 | });
|
273 |
|
274 | if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) {
|
275 | var useDragHandle = _this.props.useDragHandle;
|
276 | var _node$sortableInfo = node.sortableInfo,
|
277 | index = _node$sortableInfo.index,
|
278 | collection = _node$sortableInfo.collection;
|
279 |
|
280 | if (useDragHandle && !closest(event.target, function (el) {
|
281 | return el.sortableHandle != null;
|
282 | })) {
|
283 | return;
|
284 | }
|
285 |
|
286 | _this.manager.active = {
|
287 | index: index,
|
288 | collection: collection
|
289 | };
|
290 |
|
291 | if (!isTouchEvent(event) && event.target.tagName.toLowerCase() === 'a') {
|
292 | event.preventDefault();
|
293 | }
|
294 |
|
295 | if (!distance) {
|
296 | if (_this.props.pressDelay === 0) {
|
297 | _this.handlePress(event);
|
298 | } else {
|
299 | _this.pressTimer = setTimeout(function () {
|
300 | return _this.handlePress(event);
|
301 | }, _this.props.pressDelay);
|
302 | }
|
303 | }
|
304 | }
|
305 | });
|
306 |
|
307 | _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "nodeIsChild", function (node) {
|
308 | return node.sortableInfo.manager === _this.manager;
|
309 | });
|
310 |
|
311 | _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMove", function (event) {
|
312 | var _this$props2 = _this.props,
|
313 | distance = _this$props2.distance,
|
314 | pressThreshold = _this$props2.pressThreshold;
|
315 |
|
316 | if (!_this.state.sorting && _this._touched && !_this._awaitingUpdateBeforeSortStart) {
|
317 | var position = getPosition(event);
|
318 | var delta = {
|
319 | x: _this._pos.x - position.x,
|
320 | y: _this._pos.y - position.y
|
321 | };
|
322 | var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y);
|
323 | _this.delta = delta;
|
324 |
|
325 | if (!distance && (!pressThreshold || pressThreshold && combinedDelta >= pressThreshold)) {
|
326 | clearTimeout(_this.cancelTimer);
|
327 | _this.cancelTimer = setTimeout(_this.cancel, 0);
|
328 | } else if (distance && combinedDelta >= distance && _this.manager.isActive()) {
|
329 | _this.handlePress(event);
|
330 | }
|
331 | }
|
332 | });
|
333 |
|
334 | _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleEnd", function () {
|
335 | _this._touched = false;
|
336 |
|
337 | _this.cancel();
|
338 | });
|
339 |
|
340 | _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cancel", function () {
|
341 | var distance = _this.props.distance;
|
342 | var sorting = _this.state.sorting;
|
343 |
|
344 | if (!sorting) {
|
345 | if (!distance) {
|
346 | clearTimeout(_this.pressTimer);
|
347 | }
|
348 |
|
349 | _this.manager.active = null;
|
350 | }
|
351 | });
|
352 |
|
353 | _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handlePress", function (event) {
|
354 | try {
|
355 | var active = _this.manager.getActive();
|
356 |
|
357 | var _temp6 = function () {
|
358 | if (active) {
|
359 | var _temp7 = function _temp7() {
|
360 | var margin = getElementMargin(_node);
|
361 |
|
362 | var containerBoundingRect = _this.container.getBoundingClientRect();
|
363 |
|
364 | var dimensions = _getHelperDimensions({
|
365 | index: _index,
|
366 | node: _node,
|
367 | collection: _collection
|
368 | });
|
369 |
|
370 | _this.node = _node;
|
371 | _this.margin = margin;
|
372 | _this.width = dimensions.width;
|
373 | _this.height = dimensions.height;
|
374 | _this.marginOffset = {
|
375 | x: _this.margin.left + _this.margin.right,
|
376 | y: Math.max(_this.margin.top, _this.margin.bottom)
|
377 | };
|
378 | _this.boundingClientRect = _node.getBoundingClientRect();
|
379 | _this.containerBoundingRect = containerBoundingRect;
|
380 | _this.index = _index;
|
381 | _this.newIndex = _index;
|
382 | _this.axis = {
|
383 | x: _axis.indexOf('x') >= 0,
|
384 | y: _axis.indexOf('y') >= 0
|
385 | };
|
386 | _this.offsetEdge = getEdgeOffset(_node, _this.container);
|
387 | _this.initialOffset = getPosition(event);
|
388 | _this.initialScroll = {
|
389 | top: _this.container.scrollTop,
|
390 | left: _this.container.scrollLeft
|
391 | };
|
392 | _this.initialWindowScroll = {
|
393 | top: window.pageYOffset,
|
394 | left: window.pageXOffset
|
395 | };
|
396 |
|
397 | var fields = _node.querySelectorAll('input, textarea, select');
|
398 |
|
399 | var clonedNode = _node.cloneNode(true);
|
400 |
|
401 | var clonedFields = _toConsumableArray(clonedNode.querySelectorAll('input, textarea, select'));
|
402 |
|
403 | clonedFields.forEach(function (field, i) {
|
404 | if (field.type !== 'file' && fields[_index]) {
|
405 | field.value = fields[i].value;
|
406 | }
|
407 | });
|
408 | _this.helper = _this.helperContainer.appendChild(clonedNode);
|
409 | _this.helper.style.position = 'fixed';
|
410 | _this.helper.style.top = "".concat(_this.boundingClientRect.top - margin.top, "px");
|
411 | _this.helper.style.left = "".concat(_this.boundingClientRect.left - margin.left, "px");
|
412 | _this.helper.style.width = "".concat(_this.width, "px");
|
413 | _this.helper.style.height = "".concat(_this.height, "px");
|
414 | _this.helper.style.boxSizing = 'border-box';
|
415 | _this.helper.style.pointerEvents = 'none';
|
416 |
|
417 | if (_hideSortableGhost) {
|
418 | _this.sortableGhost = _node;
|
419 | _node.style.visibility = 'hidden';
|
420 | _node.style.opacity = 0;
|
421 | }
|
422 |
|
423 | _this.minTranslate = {};
|
424 | _this.maxTranslate = {};
|
425 |
|
426 | if (_this.axis.x) {
|
427 | _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
|
428 | _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2;
|
429 | }
|
430 |
|
431 | if (_this.axis.y) {
|
432 | _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2;
|
433 | _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2;
|
434 | }
|
435 |
|
436 | if (_helperClass) {
|
437 | var _this$helper$classLis;
|
438 |
|
439 | (_this$helper$classLis = _this.helper.classList).add.apply(_this$helper$classLis, _toConsumableArray(_helperClass.split(' ')));
|
440 | }
|
441 |
|
442 | _this.listenerNode = event.touches ? _node : _this.contentWindow;
|
443 | events.move.forEach(function (eventName) {
|
444 | return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false);
|
445 | });
|
446 | events.end.forEach(function (eventName) {
|
447 | return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false);
|
448 | });
|
449 |
|
450 | _this.setState({
|
451 | sorting: true,
|
452 | sortingIndex: _index
|
453 | });
|
454 |
|
455 | if (_onSortStart) {
|
456 | _onSortStart({
|
457 | node: _node,
|
458 | index: _index,
|
459 | collection: _collection
|
460 | }, event);
|
461 | }
|
462 | };
|
463 |
|
464 | var _this$props3 = _this.props,
|
465 | _axis = _this$props3.axis,
|
466 | _getHelperDimensions = _this$props3.getHelperDimensions,
|
467 | _helperClass = _this$props3.helperClass,
|
468 | _hideSortableGhost = _this$props3.hideSortableGhost,
|
469 | updateBeforeSortStart = _this$props3.updateBeforeSortStart,
|
470 | _onSortStart = _this$props3.onSortStart,
|
471 | _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer;
|
472 | var _node = active.node,
|
473 | _collection = active.collection;
|
474 | var _index = _node.sortableInfo.index;
|
475 |
|
476 | var _temp8 = function () {
|
477 | if (typeof updateBeforeSortStart === 'function') {
|
478 | _this._awaitingUpdateBeforeSortStart = true;
|
479 |
|
480 | var _temp9 = _finallyRethrows(function () {
|
481 | return Promise.resolve(updateBeforeSortStart({
|
482 | node: _node,
|
483 | index: _index,
|
484 | collection: _collection
|
485 | }, event)).then(function () {});
|
486 | }, function (_wasThrown, _result) {
|
487 | _this._awaitingUpdateBeforeSortStart = false;
|
488 | if (_wasThrown) throw _result;
|
489 | return _result;
|
490 | });
|
491 |
|
492 | if (_temp9 && _temp9.then) return _temp9.then(function () {});
|
493 | }
|
494 | }();
|
495 |
|
496 | return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8);
|
497 | }
|
498 | }();
|
499 |
|
500 | return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
|
501 | } catch (e) {
|
502 | return Promise.reject(e);
|
503 | }
|
504 | });
|
505 |
|
506 | _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleSortMove", function (event) {
|
507 | var onSortMove = _this.props.onSortMove;
|
508 | event.preventDefault();
|
509 |
|
510 | _this.updatePosition(event);
|
511 |
|
512 | _this.animateNodes();
|
513 |
|
514 | _this.autoscroll();
|
515 |
|
516 | if (onSortMove) {
|
517 | onSortMove(event);
|
518 | }
|
519 | });
|
520 |
|
521 | _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleSortEnd", function (event) {
|
522 | var _this$props4 = _this.props,
|
523 | hideSortableGhost = _this$props4.hideSortableGhost,
|
524 | onSortEnd = _this$props4.onSortEnd;
|
525 | var collection = _this.manager.active.collection;
|
526 |
|
527 | if (_this.listenerNode) {
|
528 | events.move.forEach(function (eventName) {
|
529 | return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove);
|
530 | });
|
531 | events.end.forEach(function (eventName) {
|
532 | return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd);
|
533 | });
|
534 | }
|
535 |
|
536 | _this.helper.parentNode.removeChild(_this.helper);
|
537 |
|
538 | if (hideSortableGhost && _this.sortableGhost) {
|
539 | _this.sortableGhost.style.visibility = '';
|
540 | _this.sortableGhost.style.opacity = '';
|
541 | }
|
542 |
|
543 | var nodes = _this.manager.refs[collection];
|
544 |
|
545 | for (var i = 0, len = nodes.length; i < len; i++) {
|
546 | var _node2 = nodes[i];
|
547 | var el = _node2.node;
|
548 | _node2.edgeOffset = null;
|
549 | el.style["".concat(vendorPrefix, "Transform")] = '';
|
550 | el.style["".concat(vendorPrefix, "TransitionDuration")] = '';
|
551 | }
|
552 |
|
553 | clearInterval(_this.autoscrollInterval);
|
554 | _this.autoscrollInterval = null;
|
555 | _this.manager.active = null;
|
556 |
|
557 | _this.setState({
|
558 | sorting: false,
|
559 | sortingIndex: null
|
560 | });
|
561 |
|
562 | if (typeof onSortEnd === 'function') {
|
563 | onSortEnd({
|
564 | oldIndex: _this.index,
|
565 | newIndex: _this.newIndex,
|
566 | collection: collection
|
567 | }, event);
|
568 | }
|
569 |
|
570 | _this._touched = false;
|
571 | });
|
572 |
|
573 | _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "autoscroll", function () {
|
574 | var disableAutoscroll = _this.props.disableAutoscroll;
|
575 |
|
576 | if (disableAutoscroll) {
|
577 | return;
|
578 | }
|
579 |
|
580 | var translate = _this.translate;
|
581 | var direction = {
|
582 | x: 0,
|
583 | y: 0
|
584 | };
|
585 | var speed = {
|
586 | x: 1,
|
587 | y: 1
|
588 | };
|
589 | var acceleration = {
|
590 | x: 10,
|
591 | y: 10
|
592 | };
|
593 | var _this$scrollContainer = _this.scrollContainer,
|
594 | scrollTop = _this$scrollContainer.scrollTop,
|
595 | scrollLeft = _this$scrollContainer.scrollLeft,
|
596 | scrollHeight = _this$scrollContainer.scrollHeight,
|
597 | scrollWidth = _this$scrollContainer.scrollWidth,
|
598 | clientHeight = _this$scrollContainer.clientHeight,
|
599 | clientWidth = _this$scrollContainer.clientWidth;
|
600 | var isTop = scrollTop === 0;
|
601 | var isBottom = scrollHeight - scrollTop - clientHeight === 0;
|
602 | var isLeft = scrollLeft === 0;
|
603 | var isRight = scrollWidth - scrollLeft - clientWidth === 0;
|
604 |
|
605 | if (translate.y >= _this.maxTranslate.y - _this.height / 2 && !isBottom) {
|
606 | direction.y = 1;
|
607 | speed.y = acceleration.y * Math.abs((_this.maxTranslate.y - _this.height / 2 - translate.y) / _this.height);
|
608 | } else if (translate.x >= _this.maxTranslate.x - _this.width / 2 && !isRight) {
|
609 | direction.x = 1;
|
610 | speed.x = acceleration.x * Math.abs((_this.maxTranslate.x - _this.width / 2 - translate.x) / _this.width);
|
611 | } else if (translate.y <= _this.minTranslate.y + _this.height / 2 && !isTop) {
|
612 | direction.y = -1;
|
613 | speed.y = acceleration.y * Math.abs((translate.y - _this.height / 2 - _this.minTranslate.y) / _this.height);
|
614 | } else if (translate.x <= _this.minTranslate.x + _this.width / 2 && !isLeft) {
|
615 | direction.x = -1;
|
616 | speed.x = acceleration.x * Math.abs((translate.x - _this.width / 2 - _this.minTranslate.x) / _this.width);
|
617 | }
|
618 |
|
619 | if (_this.autoscrollInterval) {
|
620 | clearInterval(_this.autoscrollInterval);
|
621 | _this.autoscrollInterval = null;
|
622 | _this.isAutoScrolling = false;
|
623 | }
|
624 |
|
625 | if (direction.x !== 0 || direction.y !== 0) {
|
626 | _this.autoscrollInterval = setInterval(function () {
|
627 | _this.isAutoScrolling = true;
|
628 | var offset = {
|
629 | left: speed.x * direction.x,
|
630 | top: speed.y * direction.y
|
631 | };
|
632 | _this.scrollContainer.scrollTop += offset.top;
|
633 | _this.scrollContainer.scrollLeft += offset.left;
|
634 | _this.translate.x += offset.left;
|
635 | _this.translate.y += offset.top;
|
636 |
|
637 | _this.animateNodes();
|
638 | }, 5);
|
639 | }
|
640 | });
|
641 |
|
642 | _this.manager = new Manager();
|
643 | _this.events = {
|
644 | start: _this.handleStart,
|
645 | move: _this.handleMove,
|
646 | end: _this.handleEnd
|
647 | };
|
648 | invariant(!(props.distance && props.pressDelay), 'Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time.');
|
649 | _this.state = {};
|
650 | return _this;
|
651 | }
|
652 |
|
653 | _createClass(WithSortableContainer, [{
|
654 | key: "getChildContext",
|
655 | value: function getChildContext() {
|
656 | return {
|
657 | manager: this.manager
|
658 | };
|
659 | }
|
660 | }, {
|
661 | key: "componentDidMount",
|
662 | value: function componentDidMount() {
|
663 | var _this2 = this;
|
664 |
|
665 | var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer;
|
666 | var container = this.getContainer();
|
667 | Promise.resolve(container).then(function (containerNode) {
|
668 | _this2.container = containerNode;
|
669 | _this2.document = _this2.container.ownerDocument || document;
|
670 | var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window;
|
671 | _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow;
|
672 | _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : _this2.container;
|
673 |
|
674 | var _loop = function _loop(key) {
|
675 | if (_this2.events.hasOwnProperty(key)) {
|
676 | events[key].forEach(function (eventName) {
|
677 | return _this2.container.addEventListener(eventName, _this2.events[key], false);
|
678 | });
|
679 | }
|
680 | };
|
681 |
|
682 | for (var key in _this2.events) {
|
683 | _loop(key);
|
684 | }
|
685 | });
|
686 | }
|
687 | }, {
|
688 | key: "componentWillUnmount",
|
689 | value: function componentWillUnmount() {
|
690 | var _this3 = this;
|
691 |
|
692 | if (this.container) {
|
693 | var _loop2 = function _loop2(key) {
|
694 | if (_this3.events.hasOwnProperty(key)) {
|
695 | events[key].forEach(function (eventName) {
|
696 | return _this3.container.removeEventListener(eventName, _this3.events[key]);
|
697 | });
|
698 | }
|
699 | };
|
700 |
|
701 | for (var key in this.events) {
|
702 | _loop2(key);
|
703 | }
|
704 | }
|
705 | }
|
706 | }, {
|
707 | key: "getLockPixelOffsets",
|
708 | value: function getLockPixelOffsets() {
|
709 | var width = this.width,
|
710 | height = this.height;
|
711 | var lockOffset = this.props.lockOffset;
|
712 | var offsets = Array.isArray(lockOffset) ? lockOffset : [lockOffset, lockOffset];
|
713 | invariant(offsets.length === 2, 'lockOffset prop of SortableContainer should be a single ' + 'value or an array of exactly two values. Given %s', lockOffset);
|
714 |
|
715 | var _offsets = _slicedToArray(offsets, 2),
|
716 | minLockOffset = _offsets[0],
|
717 | maxLockOffset = _offsets[1];
|
718 |
|
719 | return [getLockPixelOffset({
|
720 | lockOffset: minLockOffset,
|
721 | width: width,
|
722 | height: height
|
723 | }), getLockPixelOffset({
|
724 | lockOffset: maxLockOffset,
|
725 | width: width,
|
726 | height: height
|
727 | })];
|
728 | }
|
729 | }, {
|
730 | key: "updatePosition",
|
731 | value: function updatePosition(event) {
|
732 | var _this$props5 = this.props,
|
733 | lockAxis = _this$props5.lockAxis,
|
734 | lockToContainerEdges = _this$props5.lockToContainerEdges;
|
735 | var offset = getPosition(event);
|
736 | var translate = {
|
737 | x: offset.x - this.initialOffset.x,
|
738 | y: offset.y - this.initialOffset.y
|
739 | };
|
740 | translate.y -= window.pageYOffset - this.initialWindowScroll.top;
|
741 | translate.x -= window.pageXOffset - this.initialWindowScroll.left;
|
742 | this.translate = translate;
|
743 |
|
744 | if (lockToContainerEdges) {
|
745 | var _this$getLockPixelOff = this.getLockPixelOffsets(),
|
746 | _this$getLockPixelOff2 = _slicedToArray(_this$getLockPixelOff, 2),
|
747 | minLockOffset = _this$getLockPixelOff2[0],
|
748 | maxLockOffset = _this$getLockPixelOff2[1];
|
749 |
|
750 | var minOffset = {
|
751 | x: this.width / 2 - minLockOffset.x,
|
752 | y: this.height / 2 - minLockOffset.y
|
753 | };
|
754 | var maxOffset = {
|
755 | x: this.width / 2 - maxLockOffset.x,
|
756 | y: this.height / 2 - maxLockOffset.y
|
757 | };
|
758 | translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x);
|
759 | translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y);
|
760 | }
|
761 |
|
762 | if (lockAxis === 'x') {
|
763 | translate.y = 0;
|
764 | } else if (lockAxis === 'y') {
|
765 | translate.x = 0;
|
766 | }
|
767 |
|
768 | this.helper.style["".concat(vendorPrefix, "Transform")] = "translate3d(".concat(translate.x, "px,").concat(translate.y, "px, 0)");
|
769 | }
|
770 | }, {
|
771 | key: "animateNodes",
|
772 | value: function animateNodes() {
|
773 | var _this$props6 = this.props,
|
774 | transitionDuration = _this$props6.transitionDuration,
|
775 | hideSortableGhost = _this$props6.hideSortableGhost,
|
776 | onSortOver = _this$props6.onSortOver;
|
777 | var nodes = this.manager.getOrderedRefs();
|
778 | var containerScrollDelta = {
|
779 | left: this.container.scrollLeft - this.initialScroll.left,
|
780 | top: this.container.scrollTop - this.initialScroll.top
|
781 | };
|
782 | var sortingOffset = {
|
783 | left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left,
|
784 | top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top
|
785 | };
|
786 | var windowScrollDelta = {
|
787 | top: window.pageYOffset - this.initialWindowScroll.top,
|
788 | left: window.pageXOffset - this.initialWindowScroll.left
|
789 | };
|
790 | var prevIndex = this.newIndex;
|
791 | this.newIndex = null;
|
792 |
|
793 | for (var i = 0, len = nodes.length; i < len; i++) {
|
794 | var _node3 = nodes[i].node;
|
795 | var _index2 = _node3.sortableInfo.index;
|
796 | var width = _node3.offsetWidth;
|
797 | var height = _node3.offsetHeight;
|
798 | var offset = {
|
799 | width: this.width > width ? width / 2 : this.width / 2,
|
800 | height: this.height > height ? height / 2 : this.height / 2
|
801 | };
|
802 | var translate = {
|
803 | x: 0,
|
804 | y: 0
|
805 | };
|
806 | var edgeOffset = nodes[i].edgeOffset;
|
807 |
|
808 | if (!edgeOffset) {
|
809 | edgeOffset = getEdgeOffset(_node3, this.container);
|
810 | nodes[i].edgeOffset = edgeOffset;
|
811 | }
|
812 |
|
813 | var nextNode = i < nodes.length - 1 && nodes[i + 1];
|
814 | var prevNode = i > 0 && nodes[i - 1];
|
815 |
|
816 | if (nextNode && !nextNode.edgeOffset) {
|
817 | nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container);
|
818 | }
|
819 |
|
820 | if (_index2 === this.index) {
|
821 | if (hideSortableGhost) {
|
822 | this.sortableGhost = _node3;
|
823 | _node3.style.visibility = 'hidden';
|
824 | _node3.style.opacity = 0;
|
825 | }
|
826 |
|
827 | continue;
|
828 | }
|
829 |
|
830 | if (transitionDuration) {
|
831 | _node3.style["".concat(vendorPrefix, "TransitionDuration")] = "".concat(transitionDuration, "ms");
|
832 | }
|
833 |
|
834 | if (this.axis.x) {
|
835 | if (this.axis.y) {
|
836 | if (_index2 < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
|
837 | translate.x = this.width + this.marginOffset.x;
|
838 |
|
839 | if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) {
|
840 | if (nextNode) {
|
841 | translate.x = nextNode.edgeOffset.left - edgeOffset.left;
|
842 | translate.y = nextNode.edgeOffset.top - edgeOffset.top;
|
843 | }
|
844 | }
|
845 |
|
846 | if (this.newIndex === null) {
|
847 | this.newIndex = _index2;
|
848 | }
|
849 | } else if (_index2 > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
|
850 | translate.x = -(this.width + this.marginOffset.x);
|
851 |
|
852 | if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) {
|
853 | if (prevNode) {
|
854 | translate.x = prevNode.edgeOffset.left - edgeOffset.left;
|
855 | translate.y = prevNode.edgeOffset.top - edgeOffset.top;
|
856 | }
|
857 | }
|
858 |
|
859 | this.newIndex = _index2;
|
860 | }
|
861 | } else {
|
862 | if (_index2 > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
|
863 | translate.x = -(this.width + this.marginOffset.x);
|
864 | this.newIndex = _index2;
|
865 | } else if (_index2 < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
|
866 | translate.x = this.width + this.marginOffset.x;
|
867 |
|
868 | if (this.newIndex == null) {
|
869 | this.newIndex = _index2;
|
870 | }
|
871 | }
|
872 | }
|
873 | } else if (this.axis.y) {
|
874 | if (_index2 > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
|
875 | translate.y = -(this.height + this.marginOffset.y);
|
876 | this.newIndex = _index2;
|
877 | } else if (_index2 < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
|
878 | translate.y = this.height + this.marginOffset.y;
|
879 |
|
880 | if (this.newIndex == null) {
|
881 | this.newIndex = _index2;
|
882 | }
|
883 | }
|
884 | }
|
885 |
|
886 | _node3.style["".concat(vendorPrefix, "Transform")] = "translate3d(".concat(translate.x, "px,").concat(translate.y, "px,0)");
|
887 | }
|
888 |
|
889 | if (this.newIndex == null) {
|
890 | this.newIndex = this.index;
|
891 | }
|
892 |
|
893 | if (onSortOver && this.newIndex !== prevIndex) {
|
894 | onSortOver({
|
895 | newIndex: this.newIndex,
|
896 | oldIndex: prevIndex,
|
897 | index: this.index,
|
898 | collection: this.manager.active.collection
|
899 | });
|
900 | }
|
901 | }
|
902 | }, {
|
903 | key: "getWrappedInstance",
|
904 | value: function getWrappedInstance() {
|
905 | invariant(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableContainer() call');
|
906 | return this.refs.wrappedInstance;
|
907 | }
|
908 | }, {
|
909 | key: "getContainer",
|
910 | value: function getContainer() {
|
911 | var getContainer = this.props.getContainer;
|
912 |
|
913 | if (typeof getContainer !== 'function') {
|
914 | return reactDom.findDOMNode(this);
|
915 | }
|
916 |
|
917 | return getContainer(config.withRef ? this.getWrappedInstance() : undefined);
|
918 | }
|
919 | }, {
|
920 | key: "render",
|
921 | value: function render() {
|
922 | var ref = config.withRef ? 'wrappedInstance' : null;
|
923 | return React.createElement(WrappedComponent, _extends({
|
924 | ref: ref
|
925 | }, omit(this.props, 'contentWindow', 'useWindowAsScrollContainer', 'distance', 'helperClass', 'hideSortableGhost', 'transitionDuration', 'useDragHandle', 'pressDelay', 'pressThreshold', 'shouldCancelStart', 'updateBeforeSortStart', 'onSortStart', 'onSortMove', 'onSortEnd', 'axis', 'lockAxis', 'lockOffset', 'lockToContainerEdges', 'getContainer', 'getHelperDimensions', 'helperContainer')));
|
926 | }
|
927 | }, {
|
928 | key: "helperContainer",
|
929 | get: function get() {
|
930 | var helperContainer = this.props.helperContainer;
|
931 |
|
932 | if (typeof helperContainer === 'function') {
|
933 | return helperContainer();
|
934 | }
|
935 |
|
936 | return this.props.helperContainer || this.document.body;
|
937 | }
|
938 | }]);
|
939 |
|
940 | return WithSortableContainer;
|
941 | }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", {
|
942 | axis: 'y',
|
943 | transitionDuration: 300,
|
944 | pressDelay: 0,
|
945 | pressThreshold: 5,
|
946 | distance: 0,
|
947 | useWindowAsScrollContainer: false,
|
948 | hideSortableGhost: true,
|
949 | shouldCancelStart: function shouldCancelStart(event) {
|
950 | var disabledElements = ['input', 'textarea', 'select', 'option', 'button'];
|
951 |
|
952 | if (disabledElements.indexOf(event.target.tagName.toLowerCase()) !== -1) {
|
953 | return true;
|
954 | }
|
955 |
|
956 | return false;
|
957 | },
|
958 | lockToContainerEdges: false,
|
959 | lockOffset: '50%',
|
960 | getHelperDimensions: function getHelperDimensions(_ref) {
|
961 | var node = _ref.node;
|
962 | return {
|
963 | width: node.offsetWidth,
|
964 | height: node.offsetHeight
|
965 | };
|
966 | },
|
967 | disableAutoscroll: false
|
968 | }), _defineProperty(_class, "propTypes", {
|
969 | axis: PropTypes.oneOf(['x', 'y', 'xy']),
|
970 | distance: PropTypes.number,
|
971 | lockAxis: PropTypes.string,
|
972 | helperClass: PropTypes.string,
|
973 | transitionDuration: PropTypes.number,
|
974 | contentWindow: PropTypes.any,
|
975 | updateBeforeSortStart: PropTypes.func,
|
976 | onSortStart: PropTypes.func,
|
977 | onSortMove: PropTypes.func,
|
978 | onSortOver: PropTypes.func,
|
979 | onSortEnd: PropTypes.func,
|
980 | shouldCancelStart: PropTypes.func,
|
981 | pressDelay: PropTypes.number,
|
982 | pressThreshold: PropTypes.number,
|
983 | useDragHandle: PropTypes.bool,
|
984 | useWindowAsScrollContainer: PropTypes.bool,
|
985 | hideSortableGhost: PropTypes.bool,
|
986 | lockToContainerEdges: PropTypes.bool,
|
987 | lockOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
|
988 | getContainer: PropTypes.func,
|
989 | getHelperDimensions: PropTypes.func,
|
990 | helperContainer: PropTypes.oneOfType([PropTypes.func, typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement)]),
|
991 | disableAutoscroll: PropTypes.bool
|
992 | }), _defineProperty(_class, "childContextTypes", {
|
993 | manager: PropTypes.object.isRequired
|
994 | }), _temp;
|
995 | }
|
996 |
|
997 | function sortableElement(WrappedComponent) {
|
998 | var _class, _temp;
|
999 |
|
1000 | var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
1001 | withRef: false
|
1002 | };
|
1003 | return _temp = _class = function (_React$Component) {
|
1004 | _inherits(WithSortableElement, _React$Component);
|
1005 |
|
1006 | function WithSortableElement() {
|
1007 | _classCallCheck(this, WithSortableElement);
|
1008 |
|
1009 | return _possibleConstructorReturn(this, _getPrototypeOf(WithSortableElement).apply(this, arguments));
|
1010 | }
|
1011 |
|
1012 | _createClass(WithSortableElement, [{
|
1013 | key: "componentDidMount",
|
1014 | value: function componentDidMount() {
|
1015 | var _this$props = this.props,
|
1016 | collection = _this$props.collection,
|
1017 | disabled = _this$props.disabled,
|
1018 | index = _this$props.index;
|
1019 |
|
1020 | if (!disabled) {
|
1021 | this.setDraggable(collection, index);
|
1022 | }
|
1023 | }
|
1024 | }, {
|
1025 | key: "componentWillReceiveProps",
|
1026 | value: function componentWillReceiveProps(nextProps) {
|
1027 | if (this.props.index !== nextProps.index && this.node) {
|
1028 | this.node.sortableInfo.index = nextProps.index;
|
1029 | }
|
1030 |
|
1031 | if (this.props.disabled !== nextProps.disabled) {
|
1032 | var collection = nextProps.collection,
|
1033 | disabled = nextProps.disabled,
|
1034 | index = nextProps.index;
|
1035 |
|
1036 | if (disabled) {
|
1037 | this.removeDraggable(collection);
|
1038 | } else {
|
1039 | this.setDraggable(collection, index);
|
1040 | }
|
1041 | } else if (this.props.collection !== nextProps.collection) {
|
1042 | this.removeDraggable(this.props.collection);
|
1043 | this.setDraggable(nextProps.collection, nextProps.index);
|
1044 | }
|
1045 | }
|
1046 | }, {
|
1047 | key: "componentWillUnmount",
|
1048 | value: function componentWillUnmount() {
|
1049 | var _this$props2 = this.props,
|
1050 | collection = _this$props2.collection,
|
1051 | disabled = _this$props2.disabled;
|
1052 |
|
1053 | if (!disabled) {
|
1054 | this.removeDraggable(collection);
|
1055 | }
|
1056 | }
|
1057 | }, {
|
1058 | key: "setDraggable",
|
1059 | value: function setDraggable(collection, index) {
|
1060 | var node = reactDom.findDOMNode(this);
|
1061 | node.sortableInfo = {
|
1062 | index: index,
|
1063 | collection: collection,
|
1064 | manager: this.context.manager
|
1065 | };
|
1066 | this.node = node;
|
1067 | this.ref = {
|
1068 | node: node
|
1069 | };
|
1070 | this.context.manager.add(collection, this.ref);
|
1071 | }
|
1072 | }, {
|
1073 | key: "removeDraggable",
|
1074 | value: function removeDraggable(collection) {
|
1075 | this.context.manager.remove(collection, this.ref);
|
1076 | }
|
1077 | }, {
|
1078 | key: "getWrappedInstance",
|
1079 | value: function getWrappedInstance() {
|
1080 | invariant(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableElement() call');
|
1081 | return this.refs.wrappedInstance;
|
1082 | }
|
1083 | }, {
|
1084 | key: "render",
|
1085 | value: function render() {
|
1086 | var ref = config.withRef ? 'wrappedInstance' : null;
|
1087 | return React.createElement(WrappedComponent, _extends({
|
1088 | ref: ref
|
1089 | }, omit(this.props, 'collection', 'disabled', 'index')));
|
1090 | }
|
1091 | }]);
|
1092 |
|
1093 | return WithSortableElement;
|
1094 | }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", {
|
1095 | manager: PropTypes.object.isRequired
|
1096 | }), _defineProperty(_class, "propTypes", {
|
1097 | index: PropTypes.number.isRequired,
|
1098 | collection: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
1099 | disabled: PropTypes.bool
|
1100 | }), _defineProperty(_class, "defaultProps", {
|
1101 | collection: 0
|
1102 | }), _temp;
|
1103 | }
|
1104 |
|
1105 | function sortableHandle(WrappedComponent) {
|
1106 | var _class, _temp;
|
1107 |
|
1108 | var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
1109 | withRef: false
|
1110 | };
|
1111 | return _temp = _class = function (_React$Component) {
|
1112 | _inherits(WithSortableHandle, _React$Component);
|
1113 |
|
1114 | function WithSortableHandle() {
|
1115 | _classCallCheck(this, WithSortableHandle);
|
1116 |
|
1117 | return _possibleConstructorReturn(this, _getPrototypeOf(WithSortableHandle).apply(this, arguments));
|
1118 | }
|
1119 |
|
1120 | _createClass(WithSortableHandle, [{
|
1121 | key: "componentDidMount",
|
1122 | value: function componentDidMount() {
|
1123 | var node = reactDom.findDOMNode(this);
|
1124 | node.sortableHandle = true;
|
1125 | }
|
1126 | }, {
|
1127 | key: "getWrappedInstance",
|
1128 | value: function getWrappedInstance() {
|
1129 | invariant(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call');
|
1130 | return this.refs.wrappedInstance;
|
1131 | }
|
1132 | }, {
|
1133 | key: "render",
|
1134 | value: function render() {
|
1135 | var ref = config.withRef ? 'wrappedInstance' : null;
|
1136 | return React.createElement(WrappedComponent, _extends({
|
1137 | ref: ref
|
1138 | }, this.props));
|
1139 | }
|
1140 | }]);
|
1141 |
|
1142 | return WithSortableHandle;
|
1143 | }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableHandle', WrappedComponent)), _temp;
|
1144 | }
|
1145 |
|
1146 | exports.SortableContainer = sortableContainer;
|
1147 | exports.sortableContainer = sortableContainer;
|
1148 | exports.SortableElement = sortableElement;
|
1149 | exports.sortableElement = sortableElement;
|
1150 | exports.SortableHandle = sortableHandle;
|
1151 | exports.sortableHandle = sortableHandle;
|
1152 | exports.arrayMove = arrayMove;
|