(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(require("react"), require("react-dom")); else if(typeof define === 'function' && define.amd) define(["react", "react-dom"], factory); else if(typeof exports === 'object') exports["ReactDraggable"] = factory(require("react"), require("react-dom")); else root["ReactDraggable"] = factory(root["React"], root["ReactDOM"]); })(self, function(__WEBPACK_EXTERNAL_MODULE__359__, __WEBPACK_EXTERNAL_MODULE__318__) { return /******/ (function() { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ 404: /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; // ESM COMPAT FLAG __webpack_require__.r(__webpack_exports__); // EXPORTS __webpack_require__.d(__webpack_exports__, { "DraggableCore": function() { return /* reexport */ DraggableCore; }, "default": function() { return /* binding */ Draggable; } }); // EXTERNAL MODULE: external {"commonjs":"react","commonjs2":"react","amd":"react","root":"React"} var external_commonjs_react_commonjs2_react_amd_react_root_React_ = __webpack_require__(359); // EXTERNAL MODULE: ./node_modules/prop-types/index.js var prop_types = __webpack_require__(697); var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types); // EXTERNAL MODULE: external {"commonjs":"react-dom","commonjs2":"react-dom","amd":"react-dom","root":"ReactDOM"} var external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_ = __webpack_require__(318); var external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_); ;// CONCATENATED MODULE: ./node_modules/clsx/dist/clsx.m.js function toVal(mix) { var k, y, str=''; if (typeof mix === 'string' || typeof mix === 'number') { str += mix; } else if (typeof mix === 'object') { if (Array.isArray(mix)) { for (k=0; k < mix.length; k++) { if (mix[k]) { if (y = toVal(mix[k])) { str && (str += ' '); str += y; } } } } else { for (k in mix) { if (mix[k]) { str && (str += ' '); str += k; } } } } return str; } /* harmony default export */ function clsx_m() { var i=0, tmp, x, str=''; while (i < arguments.length) { if (tmp = arguments[i++]) { if (x = toVal(tmp)) { str && (str += ' '); str += x } } } return str; } ;// CONCATENATED MODULE: ./lib/utils/shims.js // @credits https://gist.github.com/rogozhnikoff/a43cfed27c41e4e68cdc function findInArray(array /*: Array | TouchList*/ , callback /*: Function*/ ) /*: any*/ { for (var i = 0, length = array.length; i < length; i++) { if (callback.apply(callback, [array[i], i, array])) return array[i]; } } function isFunction(func /*: any*/ ) /*: boolean %checks*/ { // $FlowIgnore[method-unbinding] return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]'; } function isNum(num /*: any*/ ) /*: boolean %checks*/ { return typeof num === 'number' && !isNaN(num); } function shims_int(a /*: string*/ ) /*: number*/ { return parseInt(a, 10); } function dontSetMe(props /*: Object*/ , propName /*: string*/ , componentName /*: string*/ ) /*: ?Error*/ { if (props[propName]) { return new Error("Invalid prop ".concat(propName, " passed to ").concat(componentName, " - do not set this, set it on the child.")); } } ;// CONCATENATED MODULE: ./lib/utils/getPrefix.js var prefixes = ['Moz', 'Webkit', 'O', 'ms']; function getPrefix() /*: string*/ { var _window$document, _window$document$docu; var prop /*: string*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transform'; // Ensure we're running in an environment where there is actually a global // `window` obj if (typeof window === 'undefined') return ''; // If we're in a pseudo-browser server-side environment, this access // path may not exist, so bail out if it doesn't. var style = (_window$document = window.document) === null || _window$document === void 0 ? void 0 : (_window$document$docu = _window$document.documentElement) === null || _window$document$docu === void 0 ? void 0 : _window$document$docu.style; if (!style) return ''; if (prop in style) return ''; for (var i = 0; i < prefixes.length; i++) { if (browserPrefixToKey(prop, prefixes[i]) in style) return prefixes[i]; } return ''; } function browserPrefixToKey(prop /*: string*/ , prefix /*: string*/ ) /*: string*/ { return prefix ? "".concat(prefix).concat(kebabToTitleCase(prop)) : prop; } function browserPrefixToStyle(prop /*: string*/ , prefix /*: string*/ ) /*: string*/ { return prefix ? "-".concat(prefix.toLowerCase(), "-").concat(prop) : prop; } function kebabToTitleCase(str /*: string*/ ) /*: string*/ { var out = ''; var shouldCapitalize = true; for (var i = 0; i < str.length; i++) { if (shouldCapitalize) { out += str[i].toUpperCase(); shouldCapitalize = false; } else if (str[i] === '-') { shouldCapitalize = true; } else { out += str[i]; } } return out; } // Default export is the prefix itself, like 'Moz', 'Webkit', etc // Note that you may have to re-test for certain things; for instance, Chrome 50 // can handle unprefixed `transform`, but not unprefixed `user-select` /* harmony default export */ var utils_getPrefix = (getPrefix()); ;// CONCATENATED MODULE: ./lib/utils/domFns.js function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /*:: import type {ControlPosition, PositionOffsetControlPosition, MouseTouchEvent} from './types';*/ var matchesSelectorFunc = ''; function matchesSelector(el /*: Node*/ , selector /*: string*/ ) /*: boolean*/ { if (!matchesSelectorFunc) { matchesSelectorFunc = findInArray(['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'], function (method) { // $FlowIgnore: Doesn't think elements are indexable return isFunction(el[method]); }); } // Might not be found entirely (not an Element?) - in that case, bail // $FlowIgnore: Doesn't think elements are indexable if (!isFunction(el[matchesSelectorFunc])) return false; // $FlowIgnore: Doesn't think elements are indexable return el[matchesSelectorFunc](selector); } // Works up the tree to the draggable itself attempting to match selector. function matchesSelectorAndParentsTo(el /*: Node*/ , selector /*: string*/ , baseNode /*: Node*/ ) /*: boolean*/ { var node = el; do { if (matchesSelector(node, selector)) return true; if (node === baseNode) return false; node = node.parentNode; } while (node); return false; } function addEvent(el /*: ?Node*/ , event /*: string*/ , handler /*: Function*/ , inputOptions /*: Object*/ ) /*: void*/ { if (!el) return; var options = _objectSpread({ capture: true }, inputOptions); // $FlowIgnore[method-unbinding] if (el.addEventListener) { el.addEventListener(event, handler, options); } else if (el.attachEvent) { el.attachEvent('on' + event, handler); } else { // $FlowIgnore: Doesn't think elements are indexable el['on' + event] = handler; } } function removeEvent(el /*: ?Node*/ , event /*: string*/ , handler /*: Function*/ , inputOptions /*: Object*/ ) /*: void*/ { if (!el) return; var options = _objectSpread({ capture: true }, inputOptions); // $FlowIgnore[method-unbinding] if (el.removeEventListener) { el.removeEventListener(event, handler, options); } else if (el.detachEvent) { el.detachEvent('on' + event, handler); } else { // $FlowIgnore: Doesn't think elements are indexable el['on' + event] = null; } } function domFns_outerHeight(node /*: HTMLElement*/ ) /*: number*/ { // This is deliberately excluding margin for our calculations, since we are using // offsetTop which is including margin. See getBoundPosition var height = node.clientHeight; var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node); height += shims_int(computedStyle.borderTopWidth); height += shims_int(computedStyle.borderBottomWidth); return height; } function domFns_outerWidth(node /*: HTMLElement*/ ) /*: number*/ { // This is deliberately excluding margin for our calculations, since we are using // offsetLeft which is including margin. See getBoundPosition var width = node.clientWidth; var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node); width += shims_int(computedStyle.borderLeftWidth); width += shims_int(computedStyle.borderRightWidth); return width; } function domFns_innerHeight(node /*: HTMLElement*/ ) /*: number*/ { var height = node.clientHeight; var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node); height -= shims_int(computedStyle.paddingTop); height -= shims_int(computedStyle.paddingBottom); return height; } function domFns_innerWidth(node /*: HTMLElement*/ ) /*: number*/ { var width = node.clientWidth; var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node); width -= shims_int(computedStyle.paddingLeft); width -= shims_int(computedStyle.paddingRight); return width; } /*:: interface EventWithOffset { clientX: number, clientY: number }*/ // Get from offsetParent function offsetXYFromParent(evt /*: EventWithOffset*/ , offsetParent /*: HTMLElement*/ , scale /*: number*/ ) /*: ControlPosition*/ { var isBody = offsetParent === offsetParent.ownerDocument.body; var offsetParentRect = isBody ? { left: 0, top: 0 } : offsetParent.getBoundingClientRect(); var x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale; var y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale; return { x: x, y: y }; } function createCSSTransform(controlPos /*: ControlPosition*/ , positionOffset /*: PositionOffsetControlPosition*/ ) /*: Object*/ { var translation = getTranslation(controlPos, positionOffset, 'px'); return _defineProperty({}, browserPrefixToKey('transform', utils_getPrefix), translation); } function createSVGTransform(controlPos /*: ControlPosition*/ , positionOffset /*: PositionOffsetControlPosition*/ ) /*: string*/ { var translation = getTranslation(controlPos, positionOffset, ''); return translation; } function getTranslation(_ref2, positionOffset /*: PositionOffsetControlPosition*/ , unitSuffix /*: string*/ ) /*: string*/ { var x = _ref2.x, y = _ref2.y; var translation = "translate(".concat(x).concat(unitSuffix, ",").concat(y).concat(unitSuffix, ")"); if (positionOffset) { var defaultX = "".concat(typeof positionOffset.x === 'string' ? positionOffset.x : positionOffset.x + unitSuffix); var defaultY = "".concat(typeof positionOffset.y === 'string' ? positionOffset.y : positionOffset.y + unitSuffix); translation = "translate(".concat(defaultX, ", ").concat(defaultY, ")") + translation; } return translation; } function getTouch(e /*: MouseTouchEvent*/ , identifier /*: number*/ ) /*: ?{clientX: number, clientY: number}*/ { return e.targetTouches && findInArray(e.targetTouches, function (t) { return identifier === t.identifier; }) || e.changedTouches && findInArray(e.changedTouches, function (t) { return identifier === t.identifier; }); } function getTouchIdentifier(e /*: MouseTouchEvent*/ ) /*: ?number*/ { if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier; if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier; } // User-select Hacks: // // Useful for preventing blue highlights all over everything when dragging. // Note we're passing `document` b/c we could be iframed function addUserSelectStyles(doc /*: ?Document*/ ) { if (!doc) return; var styleEl = doc.getElementById('react-draggable-style-el'); if (!styleEl) { styleEl = doc.createElement('style'); styleEl.type = 'text/css'; styleEl.id = 'react-draggable-style-el'; styleEl.innerHTML = '.react-draggable-transparent-selection *::-moz-selection {all: inherit;}\n'; styleEl.innerHTML += '.react-draggable-transparent-selection *::selection {all: inherit;}\n'; doc.getElementsByTagName('head')[0].appendChild(styleEl); } if (doc.body) addClassName(doc.body, 'react-draggable-transparent-selection'); } function removeUserSelectStyles(doc /*: ?Document*/ ) { if (!doc) return; try { if (doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection'); // $FlowIgnore: IE if (doc.selection) { // $FlowIgnore: IE doc.selection.empty(); } else { // Remove selection caused by scroll, unless it's a focused input // (we use doc.defaultView in case we're in an iframe) var selection = (doc.defaultView || window).getSelection(); if (selection && selection.type !== 'Caret') { selection.removeAllRanges(); } } } catch (e) {// probably IE } } function addClassName(el /*: HTMLElement*/ , className /*: string*/ ) { if (el.classList) { el.classList.add(className); } else { if (!el.className.match(new RegExp("(?:^|\\s)".concat(className, "(?!\\S)")))) { el.className += " ".concat(className); } } } function removeClassName(el /*: HTMLElement*/ , className /*: string*/ ) { if (el.classList) { el.classList.remove(className); } else { el.className = el.className.replace(new RegExp("(?:^|\\s)".concat(className, "(?!\\S)"), 'g'), ''); } } ;// CONCATENATED MODULE: ./lib/utils/positionFns.js /*:: import type Draggable from '../Draggable';*/ /*:: import type {Bounds, ControlPosition, DraggableData, MouseTouchEvent} from './types';*/ /*:: import type DraggableCore from '../DraggableCore';*/ function getBoundPosition(draggable /*: Draggable*/ , x /*: number*/ , y /*: number*/ ) /*: [number, number]*/ { // If no bounds, short-circuit and move on if (!draggable.props.bounds) return [x, y]; // Clone new bounds var bounds = draggable.props.bounds; bounds = typeof bounds === 'string' ? bounds : cloneBounds(bounds); var node = findDOMNode(draggable); if (typeof bounds === 'string') { var ownerDocument = node.ownerDocument; var ownerWindow = ownerDocument.defaultView; var boundNode; if (bounds === 'parent') { boundNode = node.parentNode; } else { boundNode = ownerDocument.querySelector(bounds); } if (!(boundNode instanceof ownerWindow.HTMLElement)) { throw new Error('Bounds selector "' + bounds + '" could not find an element.'); } var boundNodeEl /*: HTMLElement*/ = boundNode; // for Flow, can't seem to refine correctly var nodeStyle = ownerWindow.getComputedStyle(node); var boundNodeStyle = ownerWindow.getComputedStyle(boundNodeEl); // Compute bounds. This is a pain with padding and offsets but this gets it exactly right. bounds = { left: -node.offsetLeft + shims_int(boundNodeStyle.paddingLeft) + shims_int(nodeStyle.marginLeft), top: -node.offsetTop + shims_int(boundNodeStyle.paddingTop) + shims_int(nodeStyle.marginTop), right: domFns_innerWidth(boundNodeEl) - domFns_outerWidth(node) - node.offsetLeft + shims_int(boundNodeStyle.paddingRight) - shims_int(nodeStyle.marginRight), bottom: domFns_innerHeight(boundNodeEl) - domFns_outerHeight(node) - node.offsetTop + shims_int(boundNodeStyle.paddingBottom) - shims_int(nodeStyle.marginBottom) }; } // Keep x and y below right and bottom limits... if (isNum(bounds.right)) x = Math.min(x, bounds.right); if (isNum(bounds.bottom)) y = Math.min(y, bounds.bottom); // But above left and top limits. if (isNum(bounds.left)) x = Math.max(x, bounds.left); if (isNum(bounds.top)) y = Math.max(y, bounds.top); return [x, y]; } function snapToGrid(grid /*: [number, number]*/ , pendingX /*: number*/ , pendingY /*: number*/ ) /*: [number, number]*/ { var x = Math.round(pendingX / grid[0]) * grid[0]; var y = Math.round(pendingY / grid[1]) * grid[1]; return [x, y]; } function canDragX(draggable /*: Draggable*/ ) /*: boolean*/ { return draggable.props.axis === 'both' || draggable.props.axis === 'x'; } function canDragY(draggable /*: Draggable*/ ) /*: boolean*/ { return draggable.props.axis === 'both' || draggable.props.axis === 'y'; } // Get {x, y} positions from event. function getControlPosition(e /*: MouseTouchEvent*/ , touchIdentifier /*: ?number*/ , draggableCore /*: DraggableCore*/ ) /*: ?ControlPosition*/ { var touchObj = typeof touchIdentifier === 'number' ? getTouch(e, touchIdentifier) : null; if (typeof touchIdentifier === 'number' && !touchObj) return null; // not the right touch var node = findDOMNode(draggableCore); // User can provide an offsetParent if desired. var offsetParent = draggableCore.props.offsetParent || node.offsetParent || node.ownerDocument.body; return offsetXYFromParent(touchObj || e, offsetParent, draggableCore.props.scale); } // Create an data object exposed by 's events function createCoreData(draggable /*: DraggableCore*/ , x /*: number*/ , y /*: number*/ ) /*: DraggableData*/ { var state = draggable.state; var isStart = !isNum(state.lastX); var node = findDOMNode(draggable); if (isStart) { // If this is our first move, use the x and y as last coords. return { node: node, deltaX: 0, deltaY: 0, lastX: x, lastY: y, x: x, y: y }; } else { // Otherwise calculate proper values. return { node: node, deltaX: x - state.lastX, deltaY: y - state.lastY, lastX: state.lastX, lastY: state.lastY, x: x, y: y }; } } // Create an data exposed by 's events function createDraggableData(draggable /*: Draggable*/ , coreData /*: DraggableData*/ ) /*: DraggableData*/ { var scale = draggable.props.scale; return { node: coreData.node, x: draggable.state.x + coreData.deltaX / scale, y: draggable.state.y + coreData.deltaY / scale, deltaX: coreData.deltaX / scale, deltaY: coreData.deltaY / scale, lastX: draggable.state.x, lastY: draggable.state.y }; } // A lot faster than stringify/parse function cloneBounds(bounds /*: Bounds*/ ) /*: Bounds*/ { return { left: bounds.left, top: bounds.top, right: bounds.right, bottom: bounds.bottom }; } function findDOMNode(draggable /*: Draggable | DraggableCore*/ ) /*: HTMLElement*/ { var node = draggable.findDOMNode(); if (!node) { throw new Error(': Unmounted during event!'); } // $FlowIgnore we can't assert on HTMLElement due to tests... FIXME return node; } ;// CONCATENATED MODULE: ./lib/utils/log.js /*eslint no-console:0*/ function log() { var _console; if (false) {} } ;// CONCATENATED MODULE: ./lib/DraggableCore.js function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function DraggableCore_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /*:: import type {EventHandler, MouseTouchEvent} from './utils/types';*/ /*:: import type {Element as ReactElement} from 'react';*/ // Simple abstraction for dragging events names. var eventsFor = { touch: { start: 'touchstart', move: 'touchmove', stop: 'touchend' }, mouse: { start: 'mousedown', move: 'mousemove', stop: 'mouseup' } }; // Default to mouse events. var dragEventFor = eventsFor.mouse; /*:: type DraggableCoreState = { dragging: boolean, lastX: number, lastY: number, touchIdentifier: ?number };*/ /*:: export type DraggableData = { node: HTMLElement, x: number, y: number, deltaX: number, deltaY: number, lastX: number, lastY: number, };*/ /*:: export type DraggableEventHandler = (e: MouseEvent, data: DraggableData) => void | false;*/ /*:: export type ControlPosition = {x: number, y: number};*/ /*:: export type PositionOffsetControlPosition = {x: number|string, y: number|string};*/ /*:: export type DraggableCoreDefaultProps = { allowAnyClick: boolean, disabled: boolean, enableUserSelectHack: boolean, onStart: DraggableEventHandler, onDrag: DraggableEventHandler, onStop: DraggableEventHandler, onMouseDown: (e: MouseEvent) => void, scale: number, };*/ /*:: export type DraggableCoreProps = { ...DraggableCoreDefaultProps, cancel: string, children: ReactElement, offsetParent: HTMLElement, grid: [number, number], handle: string, nodeRef?: ?React.ElementRef, };*/ // // Define . // // is for advanced usage of . It maintains minimal internal state so it can // work well with libraries that require more control over the element. // var DraggableCore = /*#__PURE__*/function (_React$Component) { _inherits(DraggableCore, _React$Component); var _super = _createSuper(DraggableCore); function DraggableCore() { var _this; _classCallCheck(this, DraggableCore); for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _super.call.apply(_super, [this].concat(args)); DraggableCore_defineProperty(_assertThisInitialized(_this), "state", { dragging: false, // Used while dragging to determine deltas. lastX: NaN, lastY: NaN, touchIdentifier: null }); DraggableCore_defineProperty(_assertThisInitialized(_this), "mounted", false); DraggableCore_defineProperty(_assertThisInitialized(_this), "handleDragStart", function (e) { // Make it possible to attach event handlers on top of this one. _this.props.onMouseDown(e); // Only accept left-clicks. if (!_this.props.allowAnyClick && typeof e.button === 'number' && e.button !== 0) return false; // Get nodes. Be sure to grab relative document (could be iframed) var thisNode = _this.findDOMNode(); if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) { throw new Error(' not mounted on DragStart!'); } var ownerDocument = thisNode.ownerDocument; // Short circuit if handle or cancel prop was provided and selector doesn't match. if (_this.props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || _this.props.handle && !matchesSelectorAndParentsTo(e.target, _this.props.handle, thisNode) || _this.props.cancel && matchesSelectorAndParentsTo(e.target, _this.props.cancel, thisNode)) { return; } // Prevent scrolling on mobile devices, like ipad/iphone. // Important that this is after handle/cancel. if (e.type === 'touchstart') e.preventDefault(); // Set touch identifier in component state if this is a touch event. This allows us to // distinguish between individual touches on multitouch screens by identifying which // touchpoint was set to this element. var touchIdentifier = getTouchIdentifier(e); _this.setState({ touchIdentifier: touchIdentifier }); // Get the current drag point from the event. This is used as the offset. var position = getControlPosition(e, touchIdentifier, _assertThisInitialized(_this)); if (position == null) return; // not possible but satisfies flow var x = position.x, y = position.y; // Create an event object with all the data parents need to make a decision here. var coreEvent = createCoreData(_assertThisInitialized(_this), x, y); log('DraggableCore: handleDragStart: %j', coreEvent); // Call event handler. If it returns explicit false, cancel. log('calling', _this.props.onStart); var shouldUpdate = _this.props.onStart(e, coreEvent); if (shouldUpdate === false || _this.mounted === false) return; // Add a style to the body to disable user-select. This prevents text from // being selected all over the page. if (_this.props.enableUserSelectHack) addUserSelectStyles(ownerDocument); // Initiate dragging. Set the current x and y as offsets // so we know how much we've moved during the drag. This allows us // to drag elements around even if they have been moved, without issue. _this.setState({ dragging: true, lastX: x, lastY: y }); // Add events to the document directly so we catch when the user's mouse/touch moves outside of // this element. We use different events depending on whether or not we have detected that this // is a touch-capable device. addEvent(ownerDocument, dragEventFor.move, _this.handleDrag); addEvent(ownerDocument, dragEventFor.stop, _this.handleDragStop); }); DraggableCore_defineProperty(_assertThisInitialized(_this), "handleDrag", function (e) { // Get the current drag point from the event. This is used as the offset. var position = getControlPosition(e, _this.state.touchIdentifier, _assertThisInitialized(_this)); if (position == null) return; var x = position.x, y = position.y; // Snap to grid if prop has been provided if (Array.isArray(_this.props.grid)) { var deltaX = x - _this.state.lastX, deltaY = y - _this.state.lastY; var _snapToGrid = snapToGrid(_this.props.grid, deltaX, deltaY); var _snapToGrid2 = _slicedToArray(_snapToGrid, 2); deltaX = _snapToGrid2[0]; deltaY = _snapToGrid2[1]; if (!deltaX && !deltaY) return; // skip useless drag x = _this.state.lastX + deltaX, y = _this.state.lastY + deltaY; } var coreEvent = createCoreData(_assertThisInitialized(_this), x, y); log('DraggableCore: handleDrag: %j', coreEvent); // Call event handler. If it returns explicit false, trigger end. var shouldUpdate = _this.props.onDrag(e, coreEvent); if (shouldUpdate === false || _this.mounted === false) { try { // $FlowIgnore _this.handleDragStop(new MouseEvent('mouseup')); } catch (err) { // Old browsers var event = ((document.createEvent('MouseEvents') /*: any*/ ) /*: MouseTouchEvent*/ ); // I see why this insanity was deprecated // $FlowIgnore event.initMouseEvent('mouseup', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); _this.handleDragStop(event); } return; } _this.setState({ lastX: x, lastY: y }); }); DraggableCore_defineProperty(_assertThisInitialized(_this), "handleDragStop", function (e) { if (!_this.state.dragging) return; var position = getControlPosition(e, _this.state.touchIdentifier, _assertThisInitialized(_this)); if (position == null) return; var x = position.x, y = position.y; // Snap to grid if prop has been provided if (Array.isArray(_this.props.grid)) { var deltaX = x - _this.state.lastX || 0; var deltaY = y - _this.state.lastY || 0; var _snapToGrid3 = snapToGrid(_this.props.grid, deltaX, deltaY); var _snapToGrid4 = _slicedToArray(_snapToGrid3, 2); deltaX = _snapToGrid4[0]; deltaY = _snapToGrid4[1]; x = _this.state.lastX + deltaX, y = _this.state.lastY + deltaY; } var coreEvent = createCoreData(_assertThisInitialized(_this), x, y); // Call event handler var shouldContinue = _this.props.onStop(e, coreEvent); if (shouldContinue === false || _this.mounted === false) return false; var thisNode = _this.findDOMNode(); if (thisNode) { // Remove user-select hack if (_this.props.enableUserSelectHack) removeUserSelectStyles(thisNode.ownerDocument); } log('DraggableCore: handleDragStop: %j', coreEvent); // Reset the el. _this.setState({ dragging: false, lastX: NaN, lastY: NaN }); if (thisNode) { // Remove event handlers log('DraggableCore: Removing handlers'); removeEvent(thisNode.ownerDocument, dragEventFor.move, _this.handleDrag); removeEvent(thisNode.ownerDocument, dragEventFor.stop, _this.handleDragStop); } }); DraggableCore_defineProperty(_assertThisInitialized(_this), "onMouseDown", function (e) { dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse return _this.handleDragStart(e); }); DraggableCore_defineProperty(_assertThisInitialized(_this), "onMouseUp", function (e) { dragEventFor = eventsFor.mouse; return _this.handleDragStop(e); }); DraggableCore_defineProperty(_assertThisInitialized(_this), "onTouchStart", function (e) { // We're on a touch device now, so change the event handlers dragEventFor = eventsFor.touch; return _this.handleDragStart(e); }); DraggableCore_defineProperty(_assertThisInitialized(_this), "onTouchEnd", function (e) { // We're on a touch device now, so change the event handlers dragEventFor = eventsFor.touch; return _this.handleDragStop(e); }); return _this; } _createClass(DraggableCore, [{ key: "componentDidMount", value: function componentDidMount() { this.mounted = true; // Touch handlers must be added with {passive: false} to be cancelable. // https://developers.google.com/web/updates/2017/01/scrolling-intervention var thisNode = this.findDOMNode(); if (thisNode) { addEvent(thisNode, eventsFor.touch.start, this.onTouchStart, { passive: false }); } } }, { key: "componentWillUnmount", value: function componentWillUnmount() { this.mounted = false; // Remove any leftover event handlers. Remove both touch and mouse handlers in case // some browser quirk caused a touch event to fire during a mouse move, or vice versa. var thisNode = this.findDOMNode(); if (thisNode) { var ownerDocument = thisNode.ownerDocument; removeEvent(ownerDocument, eventsFor.mouse.move, this.handleDrag); removeEvent(ownerDocument, eventsFor.touch.move, this.handleDrag); removeEvent(ownerDocument, eventsFor.mouse.stop, this.handleDragStop); removeEvent(ownerDocument, eventsFor.touch.stop, this.handleDragStop); removeEvent(thisNode, eventsFor.touch.start, this.onTouchStart, { passive: false }); if (this.props.enableUserSelectHack) removeUserSelectStyles(ownerDocument); } } // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find // the underlying DOM node ourselves. See the README for more information. }, { key: "findDOMNode", value: function findDOMNode() /*: ?HTMLElement*/ { var _this$props, _this$props2, _this$props2$nodeRef; return (_this$props = this.props) !== null && _this$props !== void 0 && _this$props.nodeRef ? (_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$nodeRef = _this$props2.nodeRef) === null || _this$props2$nodeRef === void 0 ? void 0 : _this$props2$nodeRef.current : external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_default().findDOMNode(this); } }, { key: "render", value: function render() /*: React.Element*/ { // Reuse the child provided // This makes it flexible to use whatever element is wanted (div, ul, etc) return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.cloneElement(external_commonjs_react_commonjs2_react_amd_react_root_React_.Children.only(this.props.children), { // Note: mouseMove handler is attached to document so it will still function // when the user drags quickly and leaves the bounds of the element. onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp, // onTouchStart is added on `componentDidMount` so they can be added with // {passive: false}, which allows it to cancel. See // https://developers.google.com/web/updates/2017/01/scrolling-intervention onTouchEnd: this.onTouchEnd }); } }]); return DraggableCore; }(external_commonjs_react_commonjs2_react_amd_react_root_React_.Component); DraggableCore_defineProperty(DraggableCore, "displayName", 'DraggableCore'); DraggableCore_defineProperty(DraggableCore, "propTypes", { /** * `allowAnyClick` allows dragging using any mouse button. * By default, we only accept the left button. * * Defaults to `false`. */ allowAnyClick: (prop_types_default()).bool, /** * `disabled`, if true, stops the from dragging. All handlers, * with the exception of `onMouseDown`, will not fire. */ disabled: (prop_types_default()).bool, /** * By default, we add 'user-select:none' attributes to the document body * to prevent ugly text selection during drag. If this is causing problems * for your app, set this to `false`. */ enableUserSelectHack: (prop_types_default()).bool, /** * `offsetParent`, if set, uses the passed DOM node to compute drag offsets * instead of using the parent node. */ offsetParent: function offsetParent(props /*: DraggableCoreProps*/ , propName /*: $Keys*/ ) { if (props[propName] && props[propName].nodeType !== 1) { throw new Error('Draggable\'s offsetParent must be a DOM Node.'); } }, /** * `grid` specifies the x and y that dragging should snap to. */ grid: prop_types_default().arrayOf((prop_types_default()).number), /** * `handle` specifies a selector to be used as the handle that initiates drag. * * Example: * * ```jsx * let App = React.createClass({ * render: function () { * return ( * *
*
Click me to drag
*
This is some other content
*
*
* ); * } * }); * ``` */ handle: (prop_types_default()).string, /** * `cancel` specifies a selector to be used to prevent drag initialization. * * Example: * * ```jsx * let App = React.createClass({ * render: function () { * return( * *
*
You can't drag from here
*
Dragging here works fine
*
*
* ); * } * }); * ``` */ cancel: (prop_types_default()).string, /* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated. * Unfortunately, in order for to work properly, we need raw access * to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef` * as in this example: * * function MyComponent() { * const nodeRef = React.useRef(null); * return ( * *
Example Target
*
* ); * } * * This can be used for arbitrarily nested components, so long as the ref ends up * pointing to the actual child DOM node and not a custom component. */ nodeRef: (prop_types_default()).object, /** * Called when dragging starts. * If this function returns the boolean false, dragging will be canceled. */ onStart: (prop_types_default()).func, /** * Called while dragging. * If this function returns the boolean false, dragging will be canceled. */ onDrag: (prop_types_default()).func, /** * Called when dragging stops. * If this function returns the boolean false, the drag will remain active. */ onStop: (prop_types_default()).func, /** * A workaround option which can be passed if onMouseDown needs to be accessed, * since it'll always be blocked (as there is internal use of onMouseDown) */ onMouseDown: (prop_types_default()).func, /** * `scale`, if set, applies scaling while dragging an element */ scale: (prop_types_default()).number, /** * These properties should be defined on the child, not here. */ className: dontSetMe, style: dontSetMe, transform: dontSetMe }); DraggableCore_defineProperty(DraggableCore, "defaultProps", { allowAnyClick: false, // by default only accept left click disabled: false, enableUserSelectHack: true, onStart: function onStart() {}, onDrag: function onDrag() {}, onStop: function onStop() {}, onMouseDown: function onMouseDown() {}, scale: 1 }); ;// CONCATENATED MODULE: ./lib/Draggable.js function Draggable_typeof(obj) { "@babel/helpers - typeof"; return Draggable_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, Draggable_typeof(obj); } var _excluded = ["axis", "bounds", "children", "defaultPosition", "defaultClassName", "defaultClassNameDragging", "defaultClassNameDragged", "position", "positionOffset", "scale"]; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function Draggable_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function Draggable_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? Draggable_ownKeys(Object(source), !0).forEach(function (key) { Draggable_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : Draggable_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function Draggable_slicedToArray(arr, i) { return Draggable_arrayWithHoles(arr) || Draggable_iterableToArrayLimit(arr, i) || Draggable_unsupportedIterableToArray(arr, i) || Draggable_nonIterableRest(); } function Draggable_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function Draggable_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return Draggable_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return Draggable_arrayLikeToArray(o, minLen); } function Draggable_arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } function Draggable_iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function Draggable_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function Draggable_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function Draggable_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function Draggable_createClass(Constructor, protoProps, staticProps) { if (protoProps) Draggable_defineProperties(Constructor.prototype, protoProps); if (staticProps) Draggable_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } function Draggable_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) Draggable_setPrototypeOf(subClass, superClass); } function Draggable_setPrototypeOf(o, p) { Draggable_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Draggable_setPrototypeOf(o, p); } function Draggable_createSuper(Derived) { var hasNativeReflectConstruct = Draggable_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = Draggable_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = Draggable_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return Draggable_possibleConstructorReturn(this, result); }; } function Draggable_possibleConstructorReturn(self, call) { if (call && (Draggable_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return Draggable_assertThisInitialized(self); } function Draggable_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function Draggable_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } function Draggable_getPrototypeOf(o) { Draggable_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return Draggable_getPrototypeOf(o); } function Draggable_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /*:: import type {ControlPosition, PositionOffsetControlPosition, DraggableCoreProps, DraggableCoreDefaultProps} from './DraggableCore';*/ /*:: import type {Bounds, DraggableEventHandler} from './utils/types';*/ /*:: import type {Element as ReactElement} from 'react';*/ /*:: type DraggableState = { dragging: boolean, dragged: boolean, x: number, y: number, slackX: number, slackY: number, isElementSVG: boolean, prevPropsPosition: ?ControlPosition, };*/ /*:: export type DraggableDefaultProps = { ...DraggableCoreDefaultProps, axis: 'both' | 'x' | 'y' | 'none', bounds: Bounds | string | false, defaultClassName: string, defaultClassNameDragging: string, defaultClassNameDragged: string, defaultPosition: ControlPosition, scale: number, };*/ /*:: export type DraggableProps = { ...DraggableCoreProps, ...DraggableDefaultProps, positionOffset: PositionOffsetControlPosition, position: ControlPosition, };*/ // // Define // var Draggable = /*#__PURE__*/function (_React$Component) { Draggable_inherits(Draggable, _React$Component); var _super = Draggable_createSuper(Draggable); function Draggable(props /*: DraggableProps*/ ) { var _this; Draggable_classCallCheck(this, Draggable); _this = _super.call(this, props); Draggable_defineProperty(Draggable_assertThisInitialized(_this), "onDragStart", function (e, coreData) { log('Draggable: onDragStart: %j', coreData); // Short-circuit if user's callback killed it. var shouldStart = _this.props.onStart(e, createDraggableData(Draggable_assertThisInitialized(_this), coreData)); // Kills start event on core as well, so move handlers are never bound. if (shouldStart === false) return false; _this.setState({ dragging: true, dragged: true }); }); Draggable_defineProperty(Draggable_assertThisInitialized(_this), "onDrag", function (e, coreData) { if (!_this.state.dragging) return false; log('Draggable: onDrag: %j', coreData); var uiData = createDraggableData(Draggable_assertThisInitialized(_this), coreData); var newState /*: $Shape*/ = { x: uiData.x, y: uiData.y }; // Keep within bounds. if (_this.props.bounds) { // Save original x and y. var x = newState.x, y = newState.y; // Add slack to the values used to calculate bound position. This will ensure that if // we start removing slack, the element won't react to it right away until it's been // completely removed. newState.x += _this.state.slackX; newState.y += _this.state.slackY; // Get bound position. This will ceil/floor the x and y within the boundaries. var _getBoundPosition = getBoundPosition(Draggable_assertThisInitialized(_this), newState.x, newState.y), _getBoundPosition2 = Draggable_slicedToArray(_getBoundPosition, 2), newStateX = _getBoundPosition2[0], newStateY = _getBoundPosition2[1]; newState.x = newStateX; newState.y = newStateY; // Recalculate slack by noting how much was shaved by the boundPosition handler. newState.slackX = _this.state.slackX + (x - newState.x); newState.slackY = _this.state.slackY + (y - newState.y); // Update the event we fire to reflect what really happened after bounds took effect. uiData.x = newState.x; uiData.y = newState.y; uiData.deltaX = newState.x - _this.state.x; uiData.deltaY = newState.y - _this.state.y; } // Short-circuit if user's callback killed it. var shouldUpdate = _this.props.onDrag(e, uiData); if (shouldUpdate === false) return false; _this.setState(newState); }); Draggable_defineProperty(Draggable_assertThisInitialized(_this), "onDragStop", function (e, coreData) { if (!_this.state.dragging) return false; // Short-circuit if user's callback killed it. var shouldContinue = _this.props.onStop(e, createDraggableData(Draggable_assertThisInitialized(_this), coreData)); if (shouldContinue === false) return false; log('Draggable: onDragStop: %j', coreData); var newState /*: $Shape*/ = { dragging: false, slackX: 0, slackY: 0 }; // If this is a controlled component, the result of this operation will be to // revert back to the old position. We expect a handler on `onDragStop`, at the least. var controlled = Boolean(_this.props.position); if (controlled) { var _this$props$position = _this.props.position, x = _this$props$position.x, y = _this$props$position.y; newState.x = x; newState.y = y; } _this.setState(newState); }); _this.state = { // Whether or not we are currently dragging. dragging: false, // Whether or not we have been dragged before. dragged: false, // Current transform x and y. x: props.position ? props.position.x : props.defaultPosition.x, y: props.position ? props.position.y : props.defaultPosition.y, prevPropsPosition: Draggable_objectSpread({}, props.position), // Used for compensating for out-of-bounds drags slackX: 0, slackY: 0, // Can only determine if SVG after mounting isElementSVG: false }; if (props.position && !(props.onDrag || props.onStop)) { // eslint-disable-next-line no-console console.warn('A `position` was applied to this , without drag handlers. This will make this ' + 'component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the ' + '`position` of this element.'); } return _this; } Draggable_createClass(Draggable, [{ key: "componentDidMount", value: function componentDidMount() { // Check to see if the element passed is an instanceof SVGElement if (typeof window.SVGElement !== 'undefined' && this.findDOMNode() instanceof window.SVGElement) { this.setState({ isElementSVG: true }); } } }, { key: "componentWillUnmount", value: function componentWillUnmount() { this.setState({ dragging: false }); // prevents invariant if unmounted while dragging } // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find // the underlying DOM node ourselves. See the README for more information. }, { key: "findDOMNode", value: function findDOMNode() /*: ?HTMLElement*/ { var _this$props$nodeRef$c, _this$props, _this$props$nodeRef; return (_this$props$nodeRef$c = (_this$props = this.props) === null || _this$props === void 0 ? void 0 : (_this$props$nodeRef = _this$props.nodeRef) === null || _this$props$nodeRef === void 0 ? void 0 : _this$props$nodeRef.current) !== null && _this$props$nodeRef$c !== void 0 ? _this$props$nodeRef$c : external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_default().findDOMNode(this); } }, { key: "render", value: function render() /*: ReactElement*/ { var _clsx; var _this$props2 = this.props, axis = _this$props2.axis, bounds = _this$props2.bounds, children = _this$props2.children, defaultPosition = _this$props2.defaultPosition, defaultClassName = _this$props2.defaultClassName, defaultClassNameDragging = _this$props2.defaultClassNameDragging, defaultClassNameDragged = _this$props2.defaultClassNameDragged, position = _this$props2.position, positionOffset = _this$props2.positionOffset, scale = _this$props2.scale, draggableCoreProps = _objectWithoutProperties(_this$props2, _excluded); var style = {}; var svgTransform = null; // If this is controlled, we don't want to move it - unless it's dragging. var controlled = Boolean(position); var draggable = !controlled || this.state.dragging; var validPosition = position || defaultPosition; var transformOpts = { // Set left if horizontal drag is enabled x: canDragX(this) && draggable ? this.state.x : validPosition.x, // Set top if vertical drag is enabled y: canDragY(this) && draggable ? this.state.y : validPosition.y }; // If this element was SVG, we use the `transform` attribute. if (this.state.isElementSVG) { svgTransform = createSVGTransform(transformOpts, positionOffset); } else { // Add a CSS transform to move the element around. This allows us to move the element around // without worrying about whether or not it is relatively or absolutely positioned. // If the item you are dragging already has a transform set, wrap it in a so // has a clean slate. style = createCSSTransform(transformOpts, positionOffset); } // Mark with class while dragging var className = clsx_m(children.props.className || '', defaultClassName, (_clsx = {}, Draggable_defineProperty(_clsx, defaultClassNameDragging, this.state.dragging), Draggable_defineProperty(_clsx, defaultClassNameDragged, this.state.dragged), _clsx)); // Reuse the child provided // This makes it flexible to use whatever element is wanted (div, ul, etc) return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(DraggableCore, _extends({}, draggableCoreProps, { onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop }), /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.cloneElement(external_commonjs_react_commonjs2_react_amd_react_root_React_.Children.only(children), { className: className, style: Draggable_objectSpread(Draggable_objectSpread({}, children.props.style), style), transform: svgTransform })); } }], [{ key: "getDerivedStateFromProps", value: // React 16.3+ // Arity (props, state) function getDerivedStateFromProps(_ref, _ref2) /*: ?$Shape*/ { var position = _ref.position; var prevPropsPosition = _ref2.prevPropsPosition; // Set x/y if a new position is provided in props that is different than the previous. if (position && (!prevPropsPosition || position.x !== prevPropsPosition.x || position.y !== prevPropsPosition.y)) { log('Draggable: getDerivedStateFromProps %j', { position: position, prevPropsPosition: prevPropsPosition }); return { x: position.x, y: position.y, prevPropsPosition: Draggable_objectSpread({}, position) }; } return null; } }]); return Draggable; }(external_commonjs_react_commonjs2_react_amd_react_root_React_.Component); Draggable_defineProperty(Draggable, "displayName", 'Draggable'); Draggable_defineProperty(Draggable, "propTypes", Draggable_objectSpread(Draggable_objectSpread({}, DraggableCore.propTypes), {}, { /** * `axis` determines which axis the draggable can move. * * Note that all callbacks will still return data as normal. This only * controls flushing to the DOM. * * 'both' allows movement horizontally and vertically. * 'x' limits movement to horizontal axis. * 'y' limits movement to vertical axis. * 'none' limits all movement. * * Defaults to 'both'. */ axis: prop_types_default().oneOf(['both', 'x', 'y', 'none']), /** * `bounds` determines the range of movement available to the element. * Available values are: * * 'parent' restricts movement within the Draggable's parent node. * * Alternatively, pass an object with the following properties, all of which are optional: * * {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND} * * All values are in px. * * Example: * * ```jsx * let App = React.createClass({ * render: function () { * return ( * *
Content
*
* ); * } * }); * ``` */ bounds: prop_types_default().oneOfType([prop_types_default().shape({ left: (prop_types_default()).number, right: (prop_types_default()).number, top: (prop_types_default()).number, bottom: (prop_types_default()).number }), (prop_types_default()).string, prop_types_default().oneOf([false])]), defaultClassName: (prop_types_default()).string, defaultClassNameDragging: (prop_types_default()).string, defaultClassNameDragged: (prop_types_default()).string, /** * `defaultPosition` specifies the x and y that the dragged item should start at * * Example: * * ```jsx * let App = React.createClass({ * render: function () { * return ( * *
I start with transformX: 25px and transformY: 25px;
*
* ); * } * }); * ``` */ defaultPosition: prop_types_default().shape({ x: (prop_types_default()).number, y: (prop_types_default()).number }), positionOffset: prop_types_default().shape({ x: prop_types_default().oneOfType([(prop_types_default()).number, (prop_types_default()).string]), y: prop_types_default().oneOfType([(prop_types_default()).number, (prop_types_default()).string]) }), /** * `position`, if present, defines the current position of the element. * * This is similar to how form elements in React work - if no `position` is supplied, the component * is uncontrolled. * * Example: * * ```jsx * let App = React.createClass({ * render: function () { * return ( * *
I start with transformX: 25px and transformY: 25px;
*
* ); * } * }); * ``` */ position: prop_types_default().shape({ x: (prop_types_default()).number, y: (prop_types_default()).number }), /** * These properties should be defined on the child, not here. */ className: dontSetMe, style: dontSetMe, transform: dontSetMe })); Draggable_defineProperty(Draggable, "defaultProps", Draggable_objectSpread(Draggable_objectSpread({}, DraggableCore.defaultProps), {}, { axis: 'both', bounds: false, defaultClassName: 'react-draggable', defaultClassNameDragging: 'react-draggable-dragging', defaultClassNameDragged: 'react-draggable-dragged', defaultPosition: { x: 0, y: 0 }, scale: 1 })); /***/ }), /***/ 16: /***/ (function(module, __unused_webpack_exports, __webpack_require__) { var _require = __webpack_require__(404), Draggable = _require.default, DraggableCore = _require.DraggableCore; // Previous versions of this lib exported as the root export. As to no-// them, or TypeScript, we export *both* as the root and as 'default'. // See https://github.com/mzabriskie/react-draggable/pull/254 // and https://github.com/mzabriskie/react-draggable/issues/266 module.exports = Draggable; module.exports["default"] = Draggable; module.exports.DraggableCore = DraggableCore; /***/ }), /***/ 703: /***/ (function(module, __unused_webpack_exports, __webpack_require__) { "use strict"; /** * Copyright (c) 2013-present, Facebook, Inc. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var ReactPropTypesSecret = __webpack_require__(414); function emptyFunction() {} function emptyFunctionWithReset() {} emptyFunctionWithReset.resetWarningCache = emptyFunction; module.exports = function() { function shim(props, propName, componentName, location, propFullName, secret) { if (secret === ReactPropTypesSecret) { // It is still safe when called from React. return; } var err = new Error( 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use PropTypes.checkPropTypes() to call them. ' + 'Read more at http://fb.me/use-check-prop-types' ); err.name = 'Invariant Violation'; throw err; }; shim.isRequired = shim; function getShim() { return shim; }; // Important! // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. var ReactPropTypes = { array: shim, bigint: shim, bool: shim, func: shim, number: shim, object: shim, string: shim, symbol: shim, any: shim, arrayOf: getShim, element: shim, elementType: shim, instanceOf: getShim, node: shim, objectOf: getShim, oneOf: getShim, oneOfType: getShim, shape: getShim, exact: getShim, checkPropTypes: emptyFunctionWithReset, resetWarningCache: emptyFunction }; ReactPropTypes.PropTypes = ReactPropTypes; return ReactPropTypes; }; /***/ }), /***/ 697: /***/ (function(module, __unused_webpack_exports, __webpack_require__) { /** * Copyright (c) 2013-present, Facebook, Inc. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ if (false) { var throwOnDirectAccess, ReactIs; } else { // By explicitly using `prop-types` you are opting into new production behavior. // http://fb.me/prop-types-in-prod module.exports = __webpack_require__(703)(); } /***/ }), /***/ 414: /***/ (function(module) { "use strict"; /** * Copyright (c) 2013-present, Facebook, Inc. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; module.exports = ReactPropTypesSecret; /***/ }), /***/ 359: /***/ (function(module) { "use strict"; module.exports = __WEBPACK_EXTERNAL_MODULE__359__; /***/ }), /***/ 318: /***/ (function(module) { "use strict"; module.exports = __WEBPACK_EXTERNAL_MODULE__318__; /***/ }) /******/ }); /************************************************************************/ /******/ // The module cache /******/ var __webpack_module_cache__ = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ var cachedModule = __webpack_module_cache__[moduleId]; /******/ if (cachedModule !== undefined) { /******/ return cachedModule.exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = __webpack_module_cache__[moduleId] = { /******/ // no module.id needed /******/ // no module.loaded needed /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /************************************************************************/ /******/ /* webpack/runtime/compat get default export */ /******/ !function() { /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function() { return module['default']; } : /******/ function() { return module; }; /******/ __webpack_require__.d(getter, { a: getter }); /******/ return getter; /******/ }; /******/ }(); /******/ /******/ /* webpack/runtime/define property getters */ /******/ !function() { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = function(exports, definition) { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ }; /******/ }(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ !function() { /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } /******/ }(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ !function() { /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ }(); /******/ /************************************************************************/ /******/ /******/ // startup /******/ // Load entry module and return exports /******/ // This entry module is referenced by other modules so it can't be inlined /******/ var __webpack_exports__ = __webpack_require__(16); /******/ /******/ return __webpack_exports__; /******/ })() ; }); //# sourceMappingURL=react-draggable.min.js.map