Socket
Socket
Sign inDemoInstall

react-draggable

Package Overview
Dependencies
1
Maintainers
2
Versions
79
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.0.0-beta3 to 2.0.0

2

bower.json
{
"name": "react-draggable",
"version": "2.0.0-beta3",
"version": "2.0.0",
"homepage": "https://github.com/mzabriskie/react-draggable",

@@ -5,0 +5,0 @@ "authors": [

# Changelog
### 2.0.0
- This is a breaking change. See the changes below in the beta releases.
- Note the changes to event callbacks and `position` / `defaultPosition`.
- Changes from 2.0.0-beta3:
- Small bugfixes for Flow 0.24 compatibility.
- Don't assume `global.SVGElement`. Fixes JSDOM & [#123](https://github.com/mzabriskie/react-draggable/issues/123).
### 2.0.0-beta3 (Apr 19, 2016)

@@ -13,3 +21,3 @@

on drag stop. Attach an `onStop` or `onDrag` handler to synchronize state.
- A warning has been added informing users of this. If you make `<Draggable>` controlled but no callback
- A warning has been added informing users of this. If you make `<Draggable>` controlled but attach no callback
handlers, a warning will be printed.

@@ -16,0 +24,0 @@

@@ -66,3 +66,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

'use strict';
/* WEBPACK VAR INJECTION */(function(global) {'use strict';

@@ -263,3 +263,3 @@ Object.defineProperty(exports, "__esModule", {

// Check to see if the element passed is an instanceof SVGElement
if (_reactDom2.default.findDOMNode(this) instanceof SVGElement) {
if (typeof global.SVGElement !== 'undefined' && _reactDom2.default.findDOMNode(this) instanceof global.SVGElement) {
this.setState({ isElementSVG: true });

@@ -446,2 +446,3 @@ }

exports.default = Draggable;
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))

@@ -1029,6 +1030,2 @@ /***/ },

// Add a style to the body to disable user-select. This prevents text from
// being selected all over the page.
if (_this.props.enableUserSelectHack) (0, _domFns.addUserSelectStyles)();
// Get the current drag point from the event. This is used as the offset.

@@ -1052,2 +1049,6 @@

// Add a style to the body to disable user-select. This prevents text from
// being selected all over the page.
if (_this.props.enableUserSelectHack) (0, _domFns.addUserSelectStyles)();
// Initiate dragging. Set the current x and y as offsets

@@ -1054,0 +1055,0 @@ // so we know how much we've moved during the drag. This allows us

@@ -1,2 +0,2 @@

!function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],factory):"object"==typeof exports?exports.ReactDraggable=factory(require("react"),require("react-dom")):root.ReactDraggable=factory(root.React,root.ReactDOM)}(this,function(__WEBPACK_EXTERNAL_MODULE_2__,__WEBPACK_EXTERNAL_MODULE_3__){return function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:!1};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.p="",__webpack_require__(0)}([function(module,exports,__webpack_require__){"use strict";module.exports=__webpack_require__(1)["default"],module.exports.DraggableCore=__webpack_require__(9)["default"]},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(self,call){if(!self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!call||"object"!=typeof call&&"function"!=typeof call?self:call}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:!1,writable:!0,configurable:!0}}),superClass&&(Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_slicedToArray=function(){function sliceIterator(arr,i){var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{!_n&&_i["return"]&&_i["return"]()}finally{if(_d)throw _e}}return _arr}return function(arr,i){if(Array.isArray(arr))return arr;if(Symbol.iterator in Object(arr))return sliceIterator(arr,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),_createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}(),_react=__webpack_require__(2),_react2=_interopRequireDefault(_react),_reactDom=__webpack_require__(3),_reactDom2=_interopRequireDefault(_reactDom),_classnames=__webpack_require__(4),_classnames2=_interopRequireDefault(_classnames),_domFns=__webpack_require__(5),_positionFns=__webpack_require__(8),_shims=__webpack_require__(6),_DraggableCore=__webpack_require__(9),_DraggableCore2=_interopRequireDefault(_DraggableCore),_log=__webpack_require__(10),_log2=_interopRequireDefault(_log),Draggable=function(_React$Component){function Draggable(){var _Object$getPrototypeO,_temp,_this,_ret;_classCallCheck(this,Draggable);for(var _len=arguments.length,args=Array(_len),_key=0;_len>_key;_key++)args[_key]=arguments[_key];return _temp=_this=_possibleConstructorReturn(this,(_Object$getPrototypeO=Object.getPrototypeOf(Draggable)).call.apply(_Object$getPrototypeO,[this].concat(args))),_this.state={dragging:!1,dragged:!1,x:_this.props.position?_this.props.position.x:_this.props.defaultPosition.x,y:_this.props.position?_this.props.position.y:_this.props.defaultPosition.y,slackX:0,slackY:0,isElementSVG:!1},_this.onDragStart=function(e,coreData){(0,_log2["default"])("Draggable: onDragStart: %j",coreData);var shouldStart=_this.props.onStart(e,(0,_positionFns.createDraggableData)(_this,coreData));return shouldStart===!1?!1:void _this.setState({dragging:!0,dragged:!0})},_this.onDrag=function(e,coreData){if(!_this.state.dragging)return!1;(0,_log2["default"])("Draggable: onDrag: %j",coreData);var uiData=(0,_positionFns.createDraggableData)(_this,coreData),newState={x:uiData.x,y:uiData.y};if(_this.props.bounds){var _x=newState.x,_y=newState.y;newState.x+=_this.state.slackX,newState.y+=_this.state.slackY;var _getBoundPosition=(0,_positionFns.getBoundPosition)(_this,newState.x,newState.y),_getBoundPosition2=_slicedToArray(_getBoundPosition,2);newState.x=_getBoundPosition2[0],newState.y=_getBoundPosition2[1],newState.slackX=_this.state.slackX+(_x-newState.x),newState.slackY=_this.state.slackY+(_y-newState.y),uiData.x=_x,uiData.y=_y,uiData.deltaX=newState.x-_this.state.x,uiData.deltaY=newState.y-_this.state.y}var shouldUpdate=_this.props.onDrag(e,uiData);return shouldUpdate===!1?!1:void _this.setState(newState)},_this.onDragStop=function(e,coreData){if(!_this.state.dragging)return!1;var shouldStop=_this.props.onStop(e,(0,_positionFns.createDraggableData)(_this,coreData));if(shouldStop===!1)return!1;(0,_log2["default"])("Draggable: onDragStop: %j",coreData);var newState={dragging:!1,slackX:0,slackY:0},controlled=Boolean(_this.props.position);if(controlled){var _this$props$position=_this.props.position,_x2=_this$props$position.x,_y2=_this$props$position.y;newState.x=_x2,newState.y=_y2}_this.setState(newState)},_ret=_temp,_possibleConstructorReturn(_this,_ret)}return _inherits(Draggable,_React$Component),_createClass(Draggable,[{key:"componentWillMount",value:function(){!this.props.position||this.props.onDrag||this.props.onStop||console.warn("A `position` was applied to this <Draggable>, 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.")}},{key:"componentDidMount",value:function(){_reactDom2["default"].findDOMNode(this)instanceof SVGElement&&this.setState({isElementSVG:!0})}},{key:"componentWillReceiveProps",value:function(nextProps){!nextProps.position||this.props.position&&nextProps.position.x===this.props.position.x&&nextProps.position.y===this.props.position.y||this.setState({x:nextProps.position.x,y:nextProps.position.y})}},{key:"componentWillUnmount",value:function(){this.setState({dragging:!1})}},{key:"render",value:function(){var style={},svgTransform=null,controlled=Boolean(this.props.position),draggable=!controlled||this.state.dragging,position=this.props.position||this.props.defaultPosition,transformOpts={x:(0,_positionFns.canDragX)(this)&&draggable?this.state.x:position.x,y:(0,_positionFns.canDragY)(this)&&draggable?this.state.y:position.y};this.state.isElementSVG?svgTransform=(0,_domFns.createSVGTransform)(transformOpts):style=(0,_domFns.createCSSTransform)(transformOpts);var className=(0,_classnames2["default"])(this.props.children.props.className||"","react-draggable",{"react-draggable-dragging":this.state.dragging,"react-draggable-dragged":this.state.dragged});return _react2["default"].createElement(_DraggableCore2["default"],_extends({},this.props,{onStart:this.onDragStart,onDrag:this.onDrag,onStop:this.onDragStop}),_react2["default"].cloneElement(_react2["default"].Children.only(this.props.children),{className:className,style:_extends({},this.props.children.props.style,style),transform:svgTransform}))}}]),Draggable}(_react2["default"].Component);Draggable.displayName="Draggable",Draggable.propTypes=_extends({},_DraggableCore2["default"].propTypes,{axis:_react.PropTypes.oneOf(["both","x","y","none"]),bounds:_react.PropTypes.oneOfType([_react.PropTypes.shape({left:_react.PropTypes.number,right:_react.PropTypes.number,top:_react.PropTypes.number,bottom:_react.PropTypes.number}),_react.PropTypes.string,_react.PropTypes.oneOf([!1])]),defaultPosition:_react.PropTypes.shape({x:_react.PropTypes.number,y:_react.PropTypes.number}),position:_react.PropTypes.shape({x:_react.PropTypes.number,y:_react.PropTypes.number}),className:_shims.dontSetMe,style:_shims.dontSetMe,transform:_shims.dontSetMe}),Draggable.defaultProps=_extends({},_DraggableCore2["default"].defaultProps,{axis:"both",bounds:!1,defaultPosition:{x:0,y:0},position:null}),exports["default"]=Draggable},function(module,exports){module.exports=__WEBPACK_EXTERNAL_MODULE_2__},function(module,exports){module.exports=__WEBPACK_EXTERNAL_MODULE_3__},function(module,exports,__webpack_require__){var __WEBPACK_AMD_DEFINE_ARRAY__,__WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg))classes.push(classNames.apply(null,arg));else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}var hasOwn={}.hasOwnProperty;"undefined"!=typeof module&&module.exports?module.exports=classNames:(__WEBPACK_AMD_DEFINE_ARRAY__=[],__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports,__WEBPACK_AMD_DEFINE_ARRAY__),!(void 0!==__WEBPACK_AMD_DEFINE_RESULT__&&(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)))}()},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function matchesSelector(el,selector){return matchesSelectorFunc||(matchesSelectorFunc=(0,_shims.findInArray)(["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"],function(method){return(0,_shims.isFunction)(el[method])})),el[matchesSelectorFunc].call(el,selector)}function addEvent(el,event,handler){el&&(el.attachEvent?el.attachEvent("on"+event,handler):el.addEventListener?el.addEventListener(event,handler,!0):el["on"+event]=handler)}function removeEvent(el,event,handler){el&&(el.detachEvent?el.detachEvent("on"+event,handler):el.removeEventListener?el.removeEventListener(event,handler,!0):el["on"+event]=null)}function outerHeight(node){var height=node.clientHeight,computedStyle=window.getComputedStyle(node);return height+=(0,_shims["int"])(computedStyle.borderTopWidth),height+=(0,_shims["int"])(computedStyle.borderBottomWidth)}function outerWidth(node){var width=node.clientWidth,computedStyle=window.getComputedStyle(node);return width+=(0,_shims["int"])(computedStyle.borderLeftWidth),width+=(0,_shims["int"])(computedStyle.borderRightWidth)}function innerHeight(node){var height=node.clientHeight,computedStyle=window.getComputedStyle(node);return height-=(0,_shims["int"])(computedStyle.paddingTop),height-=(0,_shims["int"])(computedStyle.paddingBottom)}function innerWidth(node){var width=node.clientWidth,computedStyle=window.getComputedStyle(node);return width-=(0,_shims["int"])(computedStyle.paddingLeft),width-=(0,_shims["int"])(computedStyle.paddingRight)}function offsetXYFromParentOf(e,node){var evt=e.targetTouches?e.targetTouches[0]:e,offsetParent=node.offsetParent||document.body,offsetParentRect=node.offsetParent===document.body?{left:0,top:0}:offsetParent.getBoundingClientRect(),x=evt.clientX+offsetParent.scrollLeft-offsetParentRect.left,y=evt.clientY+offsetParent.scrollTop-offsetParentRect.top;return{x:x,y:y}}function createCSSTransform(_ref){var x=_ref.x,y=_ref.y;return _defineProperty({},(0,_getPrefix.browserPrefixToKey)("transform",_getPrefix2["default"]),"translate("+x+"px,"+y+"px)")}function createSVGTransform(_ref3){var x=_ref3.x,y=_ref3.y;return"translate("+x+","+y+")"}function addUserSelectStyles(){var style=document.body.getAttribute("style")||"";document.body.setAttribute("style",style+userSelectStyle)}function removeUserSelectStyles(){var style=document.body.getAttribute("style")||"";document.body.setAttribute("style",style.replace(userSelectStyle,""))}function styleHacks(){var childStyle=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];return _extends({touchAction:"none"},childStyle)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target};exports.matchesSelector=matchesSelector,exports.addEvent=addEvent,exports.removeEvent=removeEvent,exports.outerHeight=outerHeight,exports.outerWidth=outerWidth,exports.innerHeight=innerHeight,exports.innerWidth=innerWidth,exports.offsetXYFromParentOf=offsetXYFromParentOf,exports.createCSSTransform=createCSSTransform,exports.createSVGTransform=createSVGTransform,exports.addUserSelectStyles=addUserSelectStyles,exports.removeUserSelectStyles=removeUserSelectStyles,exports.styleHacks=styleHacks;var _shims=__webpack_require__(6),_getPrefix=__webpack_require__(7),_getPrefix2=_interopRequireDefault(_getPrefix),matchesSelectorFunc="",userSelectPrefix=(0,_getPrefix.getPrefix)("user-select"),userSelect=(0,_getPrefix.browserPrefixToStyle)("user-select",userSelectPrefix),userSelectStyle=";"+userSelect+": none;"},function(module,exports){"use strict";function findInArray(array,callback){for(var i=0,length=array.length;length>i;i++)if(callback.apply(callback,[array[i],i,array]))return array[i]}function isFunction(func){return"function"==typeof func||"[object Function]"===Object.prototype.toString.call(func)}function isNum(num){return"number"==typeof num&&!isNaN(num)}function int(a){return parseInt(a,10)}function dontSetMe(props,propName,componentName){return props[propName]?new Error("Invalid prop "+propName+" passed to "+componentName+" - do not set this, set it on the child."):void 0}Object.defineProperty(exports,"__esModule",{value:!0}),exports.findInArray=findInArray,exports.isFunction=isFunction,exports.isNum=isNum,exports["int"]=int,exports.dontSetMe=dontSetMe},function(module,exports){"use strict";function getPrefix(){var prop=arguments.length<=0||void 0===arguments[0]?"transform":arguments[0];if("undefined"==typeof window||"undefined"==typeof window.document)return"";var style=window.document.documentElement.style;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,prefix){return prefix?""+prefix+kebabToTitleCase(prop):prop}function browserPrefixToStyle(prop,prefix){return prefix?"-"+prefix.toLowerCase()+"-"+prop:prop}function kebabToTitleCase(str){for(var out="",shouldCapitalize=!0,i=0;i<str.length;i++)shouldCapitalize?(out+=str[i].toUpperCase(),shouldCapitalize=!1):"-"===str[i]?shouldCapitalize=!0:out+=str[i];return out}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getPrefix=getPrefix,exports.browserPrefixToKey=browserPrefixToKey,exports.browserPrefixToStyle=browserPrefixToStyle;var prefixes=["Moz","Webkit","O","ms"];exports["default"]=getPrefix()},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function getBoundPosition(draggable,x,y){if(!draggable.props.bounds)return[x,y];var bounds=draggable.props.bounds;bounds="string"==typeof bounds?bounds:cloneBounds(bounds);var node=_reactDom2["default"].findDOMNode(draggable);if("string"==typeof bounds){var boundNode=void 0;if("parent"===bounds)boundNode=node.parentNode;else if(boundNode=document.querySelector(bounds),!boundNode)throw new Error('Bounds selector "'+bounds+'" could not find an element.');var nodeStyle=window.getComputedStyle(node),boundNodeStyle=window.getComputedStyle(boundNode);bounds={left:-node.offsetLeft+(0,_shims["int"])(boundNodeStyle.paddingLeft)+(0,_shims["int"])(nodeStyle.borderLeftWidth)+(0,_shims["int"])(nodeStyle.marginLeft),top:-node.offsetTop+(0,_shims["int"])(boundNodeStyle.paddingTop)+(0,_shims["int"])(nodeStyle.borderTopWidth)+(0,_shims["int"])(nodeStyle.marginTop),right:(0,_domFns.innerWidth)(boundNode)-(0,_domFns.outerWidth)(node)-node.offsetLeft,bottom:(0,_domFns.innerHeight)(boundNode)-(0,_domFns.outerHeight)(node)-node.offsetTop}}return(0,_shims.isNum)(bounds.right)&&(x=Math.min(x,bounds.right)),(0,_shims.isNum)(bounds.bottom)&&(y=Math.min(y,bounds.bottom)),(0,_shims.isNum)(bounds.left)&&(x=Math.max(x,bounds.left)),(0,_shims.isNum)(bounds.top)&&(y=Math.max(y,bounds.top)),[x,y]}function snapToGrid(grid,pendingX,pendingY){var x=Math.round(pendingX/grid[0])*grid[0],y=Math.round(pendingY/grid[1])*grid[1];return[x,y]}function canDragX(draggable){return"both"===draggable.props.axis||"x"===draggable.props.axis}function canDragY(draggable){return"both"===draggable.props.axis||"y"===draggable.props.axis}function getControlPosition(e,draggableCore){return(0,_domFns.offsetXYFromParentOf)(e,_reactDom2["default"].findDOMNode(draggableCore))}function createCoreData(draggable,x,y){var state=draggable._pendingState||draggable.state,isStart=!(0,_shims.isNum)(state.lastX);return isStart?{node:_reactDom2["default"].findDOMNode(this),deltaX:0,deltaY:0,lastX:x,lastY:y,x:x,y:y}:{node:_reactDom2["default"].findDOMNode(this),deltaX:x-state.lastX,deltaY:y-state.lastY,lastX:state.lastX,lastY:state.lastY,x:x,y:y}}function createDraggableData(draggable,coreData){return{node:coreData.node,x:draggable.state.x+coreData.deltaX,y:draggable.state.y+coreData.deltaY,deltaX:coreData.deltaX,deltaY:coreData.deltaY,lastX:draggable.state.x,lastY:draggable.state.y}}function cloneBounds(bounds){return{left:bounds.left,top:bounds.top,right:bounds.right,bottom:bounds.bottom}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getBoundPosition=getBoundPosition,exports.snapToGrid=snapToGrid,exports.canDragX=canDragX,exports.canDragY=canDragY,exports.getControlPosition=getControlPosition,exports.createCoreData=createCoreData,exports.createDraggableData=createDraggableData;var _shims=__webpack_require__(6),_reactDom=__webpack_require__(3),_reactDom2=_interopRequireDefault(_reactDom),_domFns=__webpack_require__(5)},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(self,call){if(!self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!call||"object"!=typeof call&&"function"!=typeof call?self:call}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:!1,writable:!0,configurable:!0}}),superClass&&(Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass)}Object.defineProperty(exports,"__esModule",{value:!0});var _slicedToArray=function(){function sliceIterator(arr,i){var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{!_n&&_i["return"]&&_i["return"]()}finally{if(_d)throw _e}}return _arr}return function(arr,i){if(Array.isArray(arr))return arr;if(Symbol.iterator in Object(arr))return sliceIterator(arr,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),_createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}(),_react=__webpack_require__(2),_react2=_interopRequireDefault(_react),_domFns=__webpack_require__(5),_positionFns=__webpack_require__(8),_shims=__webpack_require__(6),_log=__webpack_require__(10),_log2=_interopRequireDefault(_log),eventsFor={touch:{start:"touchstart",move:"touchmove",stop:"touchend"},mouse:{start:"mousedown",move:"mousemove",stop:"mouseup"}},dragEventFor=eventsFor.mouse,DraggableCore=function(_React$Component){function DraggableCore(){var _Object$getPrototypeO,_temp,_this,_ret;_classCallCheck(this,DraggableCore);for(var _len=arguments.length,args=Array(_len),_key=0;_len>_key;_key++)args[_key]=arguments[_key];return _temp=_this=_possibleConstructorReturn(this,(_Object$getPrototypeO=Object.getPrototypeOf(DraggableCore)).call.apply(_Object$getPrototypeO,[this].concat(args))),_this.state={dragging:!1,lastX:NaN,lastY:NaN,touchIdentifier:NaN},_this.handleDragStart=function(e){if(_this.props.onMouseDown(e),!_this.props.allowAnyClick&&"number"==typeof e.button&&0!==e.button)return!1;if(!(_this.props.disabled||!(e.target instanceof Node)||_this.props.handle&&!(0,_domFns.matchesSelector)(e.target,_this.props.handle)||_this.props.cancel&&(0,_domFns.matchesSelector)(e.target,_this.props.cancel))){e.targetTouches&&_this.setState({touchIdentifier:e.targetTouches[0].identifier}),_this.props.enableUserSelectHack&&(0,_domFns.addUserSelectStyles)();var _getControlPosition=(0,_positionFns.getControlPosition)(e,_this),x=_getControlPosition.x,y=_getControlPosition.y,coreEvent=(0,_positionFns.createCoreData)(_this,x,y);(0,_log2["default"])("DraggableCore: handleDragStart: %j",coreEvent),(0,_log2["default"])("calling",_this.props.onStart);var shouldUpdate=_this.props.onStart(e,coreEvent);shouldUpdate!==!1&&(_this.setState({dragging:!0,lastX:x,lastY:y}),(0,_domFns.addEvent)(document,dragEventFor.move,_this.handleDrag),(0,_domFns.addEvent)(document,dragEventFor.stop,_this.handleDragStop))}},_this.handleDrag=function(e){if(!e.targetTouches||e.targetTouches[0].identifier===_this.state.touchIdentifier){var _getControlPosition2=(0,_positionFns.getControlPosition)(e,_this),x=_getControlPosition2.x,y=_getControlPosition2.y;if(Array.isArray(_this.props.grid)){var deltaX=x-_this.state.lastX,deltaY=y-_this.state.lastY,_snapToGrid=(0,_positionFns.snapToGrid)(_this.props.grid,deltaX,deltaY),_snapToGrid2=_slicedToArray(_snapToGrid,2);if(deltaX=_snapToGrid2[0],deltaY=_snapToGrid2[1],!deltaX&&!deltaY)return;x=_this.state.lastX+deltaX,y=_this.state.lastY+deltaY}var coreEvent=(0,_positionFns.createCoreData)(_this,x,y);(0,_log2["default"])("DraggableCore: handleDrag: %j",coreEvent);var shouldUpdate=_this.props.onDrag(e,coreEvent);return shouldUpdate===!1?void _this.handleDragStop(new MouseEvent):void _this.setState({lastX:x,lastY:y})}},_this.handleDragStop=function(e){if(_this.state.dragging&&(!e.changedTouches||e.changedTouches[0].identifier===_this.state.touchIdentifier)){_this.props.enableUserSelectHack&&(0,_domFns.removeUserSelectStyles)();var _getControlPosition3=(0,_positionFns.getControlPosition)(e,_this),x=_getControlPosition3.x,y=_getControlPosition3.y,coreEvent=(0,_positionFns.createCoreData)(_this,x,y);(0,_log2["default"])("DraggableCore: handleDragStop: %j",coreEvent),_this.setState({dragging:!1,lastX:NaN,lastY:NaN}),_this.props.onStop(e,coreEvent),(0,_log2["default"])("DraggableCore: Removing handlers"),(0,_domFns.removeEvent)(document,dragEventFor.move,_this.handleDrag),(0,_domFns.removeEvent)(document,dragEventFor.stop,_this.handleDragStop)}},_this.onMouseDown=function(e){return dragEventFor=eventsFor.mouse,_this.handleDragStart(e)},_this.onMouseUp=function(e){return dragEventFor=eventsFor.mouse,_this.handleDragStop(e)},_this.onTouchStart=function(e){return dragEventFor=eventsFor.touch,_this.handleDragStart(e)},_this.onTouchEnd=function(e){return dragEventFor=eventsFor.touch,_this.handleDragStop(e)},_ret=_temp,_possibleConstructorReturn(_this,_ret)}return _inherits(DraggableCore,_React$Component),_createClass(DraggableCore,[{key:"componentWillUnmount",value:function(){(0,_domFns.removeEvent)(document,eventsFor.mouse.move,this.handleDrag),(0,_domFns.removeEvent)(document,eventsFor.touch.move,this.handleDrag),(0,_domFns.removeEvent)(document,eventsFor.mouse.stop,this.handleDragStop),(0,_domFns.removeEvent)(document,eventsFor.touch.stop,this.handleDragStop),this.props.enableUserSelectHack&&(0,_domFns.removeUserSelectStyles)()}},{key:"render",value:function(){return _react2["default"].cloneElement(_react2["default"].Children.only(this.props.children),{style:(0,_domFns.styleHacks)(this.props.children.props.style),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,onMouseUp:this.onMouseUp,onTouchEnd:this.onTouchEnd})}}]),DraggableCore}(_react2["default"].Component);DraggableCore.displayName="DraggableCore",DraggableCore.propTypes={allowAnyClick:_react.PropTypes.bool,disabled:_react.PropTypes.bool,enableUserSelectHack:_react.PropTypes.bool,grid:_react.PropTypes.arrayOf(_react.PropTypes.number),handle:_react.PropTypes.string,cancel:_react.PropTypes.string,onStart:_react.PropTypes.func,onDrag:_react.PropTypes.func,onStop:_react.PropTypes.func,onMouseDown:_react.PropTypes.func,className:_shims.dontSetMe,style:_shims.dontSetMe,transform:_shims.dontSetMe},DraggableCore.defaultProps={allowAnyClick:!1,cancel:null,disabled:!1,enableUserSelectHack:!0,handle:null,grid:null,transform:null,onStart:function(){},onDrag:function(){},onStop:function(){},onMouseDown:function(){}},exports["default"]=DraggableCore},function(module,exports,__webpack_require__){"use strict";function log(){}Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=log}])});
!function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],factory):"object"==typeof exports?exports.ReactDraggable=factory(require("react"),require("react-dom")):root.ReactDraggable=factory(root.React,root.ReactDOM)}(this,function(__WEBPACK_EXTERNAL_MODULE_2__,__WEBPACK_EXTERNAL_MODULE_3__){return function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:!1};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.p="",__webpack_require__(0)}([function(module,exports,__webpack_require__){"use strict";module.exports=__webpack_require__(1)["default"],module.exports.DraggableCore=__webpack_require__(9)["default"]},function(module,exports,__webpack_require__){(function(global){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(self,call){if(!self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!call||"object"!=typeof call&&"function"!=typeof call?self:call}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:!1,writable:!0,configurable:!0}}),superClass&&(Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_slicedToArray=function(){function sliceIterator(arr,i){var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{!_n&&_i["return"]&&_i["return"]()}finally{if(_d)throw _e}}return _arr}return function(arr,i){if(Array.isArray(arr))return arr;if(Symbol.iterator in Object(arr))return sliceIterator(arr,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),_createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}(),_react=__webpack_require__(2),_react2=_interopRequireDefault(_react),_reactDom=__webpack_require__(3),_reactDom2=_interopRequireDefault(_reactDom),_classnames=__webpack_require__(4),_classnames2=_interopRequireDefault(_classnames),_domFns=__webpack_require__(5),_positionFns=__webpack_require__(8),_shims=__webpack_require__(6),_DraggableCore=__webpack_require__(9),_DraggableCore2=_interopRequireDefault(_DraggableCore),_log=__webpack_require__(10),_log2=_interopRequireDefault(_log),Draggable=function(_React$Component){function Draggable(){var _Object$getPrototypeO,_temp,_this,_ret;_classCallCheck(this,Draggable);for(var _len=arguments.length,args=Array(_len),_key=0;_len>_key;_key++)args[_key]=arguments[_key];return _temp=_this=_possibleConstructorReturn(this,(_Object$getPrototypeO=Object.getPrototypeOf(Draggable)).call.apply(_Object$getPrototypeO,[this].concat(args))),_this.state={dragging:!1,dragged:!1,x:_this.props.position?_this.props.position.x:_this.props.defaultPosition.x,y:_this.props.position?_this.props.position.y:_this.props.defaultPosition.y,slackX:0,slackY:0,isElementSVG:!1},_this.onDragStart=function(e,coreData){(0,_log2["default"])("Draggable: onDragStart: %j",coreData);var shouldStart=_this.props.onStart(e,(0,_positionFns.createDraggableData)(_this,coreData));return shouldStart===!1?!1:void _this.setState({dragging:!0,dragged:!0})},_this.onDrag=function(e,coreData){if(!_this.state.dragging)return!1;(0,_log2["default"])("Draggable: onDrag: %j",coreData);var uiData=(0,_positionFns.createDraggableData)(_this,coreData),newState={x:uiData.x,y:uiData.y};if(_this.props.bounds){var _x=newState.x,_y=newState.y;newState.x+=_this.state.slackX,newState.y+=_this.state.slackY;var _getBoundPosition=(0,_positionFns.getBoundPosition)(_this,newState.x,newState.y),_getBoundPosition2=_slicedToArray(_getBoundPosition,2);newState.x=_getBoundPosition2[0],newState.y=_getBoundPosition2[1],newState.slackX=_this.state.slackX+(_x-newState.x),newState.slackY=_this.state.slackY+(_y-newState.y),uiData.x=_x,uiData.y=_y,uiData.deltaX=newState.x-_this.state.x,uiData.deltaY=newState.y-_this.state.y}var shouldUpdate=_this.props.onDrag(e,uiData);return shouldUpdate===!1?!1:void _this.setState(newState)},_this.onDragStop=function(e,coreData){if(!_this.state.dragging)return!1;var shouldStop=_this.props.onStop(e,(0,_positionFns.createDraggableData)(_this,coreData));if(shouldStop===!1)return!1;(0,_log2["default"])("Draggable: onDragStop: %j",coreData);var newState={dragging:!1,slackX:0,slackY:0},controlled=Boolean(_this.props.position);if(controlled){var _this$props$position=_this.props.position,_x2=_this$props$position.x,_y2=_this$props$position.y;newState.x=_x2,newState.y=_y2}_this.setState(newState)},_ret=_temp,_possibleConstructorReturn(_this,_ret)}return _inherits(Draggable,_React$Component),_createClass(Draggable,[{key:"componentWillMount",value:function(){!this.props.position||this.props.onDrag||this.props.onStop||console.warn("A `position` was applied to this <Draggable>, 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.")}},{key:"componentDidMount",value:function(){"undefined"!=typeof global.SVGElement&&_reactDom2["default"].findDOMNode(this)instanceof global.SVGElement&&this.setState({isElementSVG:!0})}},{key:"componentWillReceiveProps",value:function(nextProps){!nextProps.position||this.props.position&&nextProps.position.x===this.props.position.x&&nextProps.position.y===this.props.position.y||this.setState({x:nextProps.position.x,y:nextProps.position.y})}},{key:"componentWillUnmount",value:function(){this.setState({dragging:!1})}},{key:"render",value:function(){var style={},svgTransform=null,controlled=Boolean(this.props.position),draggable=!controlled||this.state.dragging,position=this.props.position||this.props.defaultPosition,transformOpts={x:(0,_positionFns.canDragX)(this)&&draggable?this.state.x:position.x,y:(0,_positionFns.canDragY)(this)&&draggable?this.state.y:position.y};this.state.isElementSVG?svgTransform=(0,_domFns.createSVGTransform)(transformOpts):style=(0,_domFns.createCSSTransform)(transformOpts);var className=(0,_classnames2["default"])(this.props.children.props.className||"","react-draggable",{"react-draggable-dragging":this.state.dragging,"react-draggable-dragged":this.state.dragged});return _react2["default"].createElement(_DraggableCore2["default"],_extends({},this.props,{onStart:this.onDragStart,onDrag:this.onDrag,onStop:this.onDragStop}),_react2["default"].cloneElement(_react2["default"].Children.only(this.props.children),{className:className,style:_extends({},this.props.children.props.style,style),transform:svgTransform}))}}]),Draggable}(_react2["default"].Component);Draggable.displayName="Draggable",Draggable.propTypes=_extends({},_DraggableCore2["default"].propTypes,{axis:_react.PropTypes.oneOf(["both","x","y","none"]),bounds:_react.PropTypes.oneOfType([_react.PropTypes.shape({left:_react.PropTypes.number,right:_react.PropTypes.number,top:_react.PropTypes.number,bottom:_react.PropTypes.number}),_react.PropTypes.string,_react.PropTypes.oneOf([!1])]),defaultPosition:_react.PropTypes.shape({x:_react.PropTypes.number,y:_react.PropTypes.number}),position:_react.PropTypes.shape({x:_react.PropTypes.number,y:_react.PropTypes.number}),className:_shims.dontSetMe,style:_shims.dontSetMe,transform:_shims.dontSetMe}),Draggable.defaultProps=_extends({},_DraggableCore2["default"].defaultProps,{axis:"both",bounds:!1,defaultPosition:{x:0,y:0},position:null}),exports["default"]=Draggable}).call(exports,function(){return this}())},function(module,exports){module.exports=__WEBPACK_EXTERNAL_MODULE_2__},function(module,exports){module.exports=__WEBPACK_EXTERNAL_MODULE_3__},function(module,exports,__webpack_require__){var __WEBPACK_AMD_DEFINE_ARRAY__,__WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg))classes.push(classNames.apply(null,arg));else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}return classes.join(" ")}var hasOwn={}.hasOwnProperty;"undefined"!=typeof module&&module.exports?module.exports=classNames:(__WEBPACK_AMD_DEFINE_ARRAY__=[],__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports,__WEBPACK_AMD_DEFINE_ARRAY__),!(void 0!==__WEBPACK_AMD_DEFINE_RESULT__&&(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)))}()},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function matchesSelector(el,selector){return matchesSelectorFunc||(matchesSelectorFunc=(0,_shims.findInArray)(["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"],function(method){return(0,_shims.isFunction)(el[method])})),el[matchesSelectorFunc].call(el,selector)}function addEvent(el,event,handler){el&&(el.attachEvent?el.attachEvent("on"+event,handler):el.addEventListener?el.addEventListener(event,handler,!0):el["on"+event]=handler)}function removeEvent(el,event,handler){el&&(el.detachEvent?el.detachEvent("on"+event,handler):el.removeEventListener?el.removeEventListener(event,handler,!0):el["on"+event]=null)}function outerHeight(node){var height=node.clientHeight,computedStyle=window.getComputedStyle(node);return height+=(0,_shims["int"])(computedStyle.borderTopWidth),height+=(0,_shims["int"])(computedStyle.borderBottomWidth)}function outerWidth(node){var width=node.clientWidth,computedStyle=window.getComputedStyle(node);return width+=(0,_shims["int"])(computedStyle.borderLeftWidth),width+=(0,_shims["int"])(computedStyle.borderRightWidth)}function innerHeight(node){var height=node.clientHeight,computedStyle=window.getComputedStyle(node);return height-=(0,_shims["int"])(computedStyle.paddingTop),height-=(0,_shims["int"])(computedStyle.paddingBottom)}function innerWidth(node){var width=node.clientWidth,computedStyle=window.getComputedStyle(node);return width-=(0,_shims["int"])(computedStyle.paddingLeft),width-=(0,_shims["int"])(computedStyle.paddingRight)}function offsetXYFromParentOf(e,node){var evt=e.targetTouches?e.targetTouches[0]:e,offsetParent=node.offsetParent||document.body,offsetParentRect=node.offsetParent===document.body?{left:0,top:0}:offsetParent.getBoundingClientRect(),x=evt.clientX+offsetParent.scrollLeft-offsetParentRect.left,y=evt.clientY+offsetParent.scrollTop-offsetParentRect.top;return{x:x,y:y}}function createCSSTransform(_ref){var x=_ref.x,y=_ref.y;return _defineProperty({},(0,_getPrefix.browserPrefixToKey)("transform",_getPrefix2["default"]),"translate("+x+"px,"+y+"px)")}function createSVGTransform(_ref3){var x=_ref3.x,y=_ref3.y;return"translate("+x+","+y+")"}function addUserSelectStyles(){var style=document.body.getAttribute("style")||"";document.body.setAttribute("style",style+userSelectStyle)}function removeUserSelectStyles(){var style=document.body.getAttribute("style")||"";document.body.setAttribute("style",style.replace(userSelectStyle,""))}function styleHacks(){var childStyle=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];return _extends({touchAction:"none"},childStyle)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target};exports.matchesSelector=matchesSelector,exports.addEvent=addEvent,exports.removeEvent=removeEvent,exports.outerHeight=outerHeight,exports.outerWidth=outerWidth,exports.innerHeight=innerHeight,exports.innerWidth=innerWidth,exports.offsetXYFromParentOf=offsetXYFromParentOf,exports.createCSSTransform=createCSSTransform,exports.createSVGTransform=createSVGTransform,exports.addUserSelectStyles=addUserSelectStyles,exports.removeUserSelectStyles=removeUserSelectStyles,exports.styleHacks=styleHacks;var _shims=__webpack_require__(6),_getPrefix=__webpack_require__(7),_getPrefix2=_interopRequireDefault(_getPrefix),matchesSelectorFunc="",userSelectPrefix=(0,_getPrefix.getPrefix)("user-select"),userSelect=(0,_getPrefix.browserPrefixToStyle)("user-select",userSelectPrefix),userSelectStyle=";"+userSelect+": none;"},function(module,exports){"use strict";function findInArray(array,callback){for(var i=0,length=array.length;length>i;i++)if(callback.apply(callback,[array[i],i,array]))return array[i]}function isFunction(func){return"function"==typeof func||"[object Function]"===Object.prototype.toString.call(func)}function isNum(num){return"number"==typeof num&&!isNaN(num)}function int(a){return parseInt(a,10)}function dontSetMe(props,propName,componentName){return props[propName]?new Error("Invalid prop "+propName+" passed to "+componentName+" - do not set this, set it on the child."):void 0}Object.defineProperty(exports,"__esModule",{value:!0}),exports.findInArray=findInArray,exports.isFunction=isFunction,exports.isNum=isNum,exports["int"]=int,exports.dontSetMe=dontSetMe},function(module,exports){"use strict";function getPrefix(){var prop=arguments.length<=0||void 0===arguments[0]?"transform":arguments[0];if("undefined"==typeof window||"undefined"==typeof window.document)return"";var style=window.document.documentElement.style;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,prefix){return prefix?""+prefix+kebabToTitleCase(prop):prop}function browserPrefixToStyle(prop,prefix){return prefix?"-"+prefix.toLowerCase()+"-"+prop:prop}function kebabToTitleCase(str){for(var out="",shouldCapitalize=!0,i=0;i<str.length;i++)shouldCapitalize?(out+=str[i].toUpperCase(),shouldCapitalize=!1):"-"===str[i]?shouldCapitalize=!0:out+=str[i];return out}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getPrefix=getPrefix,exports.browserPrefixToKey=browserPrefixToKey,exports.browserPrefixToStyle=browserPrefixToStyle;var prefixes=["Moz","Webkit","O","ms"];exports["default"]=getPrefix()},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function getBoundPosition(draggable,x,y){if(!draggable.props.bounds)return[x,y];var bounds=draggable.props.bounds;bounds="string"==typeof bounds?bounds:cloneBounds(bounds);var node=_reactDom2["default"].findDOMNode(draggable);if("string"==typeof bounds){var boundNode=void 0;if("parent"===bounds)boundNode=node.parentNode;else if(boundNode=document.querySelector(bounds),!boundNode)throw new Error('Bounds selector "'+bounds+'" could not find an element.');var nodeStyle=window.getComputedStyle(node),boundNodeStyle=window.getComputedStyle(boundNode);bounds={left:-node.offsetLeft+(0,_shims["int"])(boundNodeStyle.paddingLeft)+(0,_shims["int"])(nodeStyle.borderLeftWidth)+(0,_shims["int"])(nodeStyle.marginLeft),top:-node.offsetTop+(0,_shims["int"])(boundNodeStyle.paddingTop)+(0,_shims["int"])(nodeStyle.borderTopWidth)+(0,_shims["int"])(nodeStyle.marginTop),right:(0,_domFns.innerWidth)(boundNode)-(0,_domFns.outerWidth)(node)-node.offsetLeft,bottom:(0,_domFns.innerHeight)(boundNode)-(0,_domFns.outerHeight)(node)-node.offsetTop}}return(0,_shims.isNum)(bounds.right)&&(x=Math.min(x,bounds.right)),(0,_shims.isNum)(bounds.bottom)&&(y=Math.min(y,bounds.bottom)),(0,_shims.isNum)(bounds.left)&&(x=Math.max(x,bounds.left)),(0,_shims.isNum)(bounds.top)&&(y=Math.max(y,bounds.top)),[x,y]}function snapToGrid(grid,pendingX,pendingY){var x=Math.round(pendingX/grid[0])*grid[0],y=Math.round(pendingY/grid[1])*grid[1];return[x,y]}function canDragX(draggable){return"both"===draggable.props.axis||"x"===draggable.props.axis}function canDragY(draggable){return"both"===draggable.props.axis||"y"===draggable.props.axis}function getControlPosition(e,draggableCore){return(0,_domFns.offsetXYFromParentOf)(e,_reactDom2["default"].findDOMNode(draggableCore))}function createCoreData(draggable,x,y){var state=draggable._pendingState||draggable.state,isStart=!(0,_shims.isNum)(state.lastX);return isStart?{node:_reactDom2["default"].findDOMNode(this),deltaX:0,deltaY:0,lastX:x,lastY:y,x:x,y:y}:{node:_reactDom2["default"].findDOMNode(this),deltaX:x-state.lastX,deltaY:y-state.lastY,lastX:state.lastX,lastY:state.lastY,x:x,y:y}}function createDraggableData(draggable,coreData){return{node:coreData.node,x:draggable.state.x+coreData.deltaX,y:draggable.state.y+coreData.deltaY,deltaX:coreData.deltaX,deltaY:coreData.deltaY,lastX:draggable.state.x,lastY:draggable.state.y}}function cloneBounds(bounds){return{left:bounds.left,top:bounds.top,right:bounds.right,bottom:bounds.bottom}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getBoundPosition=getBoundPosition,exports.snapToGrid=snapToGrid,exports.canDragX=canDragX,exports.canDragY=canDragY,exports.getControlPosition=getControlPosition,exports.createCoreData=createCoreData,exports.createDraggableData=createDraggableData;var _shims=__webpack_require__(6),_reactDom=__webpack_require__(3),_reactDom2=_interopRequireDefault(_reactDom),_domFns=__webpack_require__(5)},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(self,call){if(!self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!call||"object"!=typeof call&&"function"!=typeof call?self:call}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:!1,writable:!0,configurable:!0}}),superClass&&(Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass)}Object.defineProperty(exports,"__esModule",{value:!0});var _slicedToArray=function(){function sliceIterator(arr,i){var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{!_n&&_i["return"]&&_i["return"]()}finally{if(_d)throw _e}}return _arr}return function(arr,i){if(Array.isArray(arr))return arr;if(Symbol.iterator in Object(arr))return sliceIterator(arr,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),_createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}(),_react=__webpack_require__(2),_react2=_interopRequireDefault(_react),_domFns=__webpack_require__(5),_positionFns=__webpack_require__(8),_shims=__webpack_require__(6),_log=__webpack_require__(10),_log2=_interopRequireDefault(_log),eventsFor={touch:{start:"touchstart",move:"touchmove",stop:"touchend"},mouse:{start:"mousedown",move:"mousemove",stop:"mouseup"}},dragEventFor=eventsFor.mouse,DraggableCore=function(_React$Component){function DraggableCore(){var _Object$getPrototypeO,_temp,_this,_ret;_classCallCheck(this,DraggableCore);for(var _len=arguments.length,args=Array(_len),_key=0;_len>_key;_key++)args[_key]=arguments[_key];return _temp=_this=_possibleConstructorReturn(this,(_Object$getPrototypeO=Object.getPrototypeOf(DraggableCore)).call.apply(_Object$getPrototypeO,[this].concat(args))),_this.state={dragging:!1,lastX:NaN,lastY:NaN,touchIdentifier:NaN},_this.handleDragStart=function(e){if(_this.props.onMouseDown(e),!_this.props.allowAnyClick&&"number"==typeof e.button&&0!==e.button)return!1;if(!(_this.props.disabled||!(e.target instanceof Node)||_this.props.handle&&!(0,_domFns.matchesSelector)(e.target,_this.props.handle)||_this.props.cancel&&(0,_domFns.matchesSelector)(e.target,_this.props.cancel))){e.targetTouches&&_this.setState({touchIdentifier:e.targetTouches[0].identifier});var _getControlPosition=(0,_positionFns.getControlPosition)(e,_this),x=_getControlPosition.x,y=_getControlPosition.y,coreEvent=(0,_positionFns.createCoreData)(_this,x,y);(0,_log2["default"])("DraggableCore: handleDragStart: %j",coreEvent),(0,_log2["default"])("calling",_this.props.onStart);var shouldUpdate=_this.props.onStart(e,coreEvent);shouldUpdate!==!1&&(_this.props.enableUserSelectHack&&(0,_domFns.addUserSelectStyles)(),_this.setState({dragging:!0,lastX:x,lastY:y}),(0,_domFns.addEvent)(document,dragEventFor.move,_this.handleDrag),(0,_domFns.addEvent)(document,dragEventFor.stop,_this.handleDragStop))}},_this.handleDrag=function(e){if(!e.targetTouches||e.targetTouches[0].identifier===_this.state.touchIdentifier){var _getControlPosition2=(0,_positionFns.getControlPosition)(e,_this),x=_getControlPosition2.x,y=_getControlPosition2.y;if(Array.isArray(_this.props.grid)){var deltaX=x-_this.state.lastX,deltaY=y-_this.state.lastY,_snapToGrid=(0,_positionFns.snapToGrid)(_this.props.grid,deltaX,deltaY),_snapToGrid2=_slicedToArray(_snapToGrid,2);if(deltaX=_snapToGrid2[0],deltaY=_snapToGrid2[1],!deltaX&&!deltaY)return;x=_this.state.lastX+deltaX,y=_this.state.lastY+deltaY}var coreEvent=(0,_positionFns.createCoreData)(_this,x,y);(0,_log2["default"])("DraggableCore: handleDrag: %j",coreEvent);var shouldUpdate=_this.props.onDrag(e,coreEvent);return shouldUpdate===!1?void _this.handleDragStop(new MouseEvent):void _this.setState({lastX:x,lastY:y})}},_this.handleDragStop=function(e){if(_this.state.dragging&&(!e.changedTouches||e.changedTouches[0].identifier===_this.state.touchIdentifier)){_this.props.enableUserSelectHack&&(0,_domFns.removeUserSelectStyles)();var _getControlPosition3=(0,_positionFns.getControlPosition)(e,_this),x=_getControlPosition3.x,y=_getControlPosition3.y,coreEvent=(0,_positionFns.createCoreData)(_this,x,y);(0,_log2["default"])("DraggableCore: handleDragStop: %j",coreEvent),_this.setState({dragging:!1,lastX:NaN,lastY:NaN}),_this.props.onStop(e,coreEvent),(0,_log2["default"])("DraggableCore: Removing handlers"),(0,_domFns.removeEvent)(document,dragEventFor.move,_this.handleDrag),(0,_domFns.removeEvent)(document,dragEventFor.stop,_this.handleDragStop)}},_this.onMouseDown=function(e){return dragEventFor=eventsFor.mouse,_this.handleDragStart(e)},_this.onMouseUp=function(e){return dragEventFor=eventsFor.mouse,_this.handleDragStop(e)},_this.onTouchStart=function(e){return dragEventFor=eventsFor.touch,_this.handleDragStart(e)},_this.onTouchEnd=function(e){return dragEventFor=eventsFor.touch,_this.handleDragStop(e)},_ret=_temp,_possibleConstructorReturn(_this,_ret)}return _inherits(DraggableCore,_React$Component),_createClass(DraggableCore,[{key:"componentWillUnmount",value:function(){(0,_domFns.removeEvent)(document,eventsFor.mouse.move,this.handleDrag),(0,_domFns.removeEvent)(document,eventsFor.touch.move,this.handleDrag),(0,_domFns.removeEvent)(document,eventsFor.mouse.stop,this.handleDragStop),(0,_domFns.removeEvent)(document,eventsFor.touch.stop,this.handleDragStop),this.props.enableUserSelectHack&&(0,_domFns.removeUserSelectStyles)()}},{key:"render",value:function(){return _react2["default"].cloneElement(_react2["default"].Children.only(this.props.children),{style:(0,_domFns.styleHacks)(this.props.children.props.style),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,onMouseUp:this.onMouseUp,onTouchEnd:this.onTouchEnd})}}]),DraggableCore}(_react2["default"].Component);DraggableCore.displayName="DraggableCore",DraggableCore.propTypes={allowAnyClick:_react.PropTypes.bool,disabled:_react.PropTypes.bool,enableUserSelectHack:_react.PropTypes.bool,grid:_react.PropTypes.arrayOf(_react.PropTypes.number),handle:_react.PropTypes.string,cancel:_react.PropTypes.string,onStart:_react.PropTypes.func,onDrag:_react.PropTypes.func,onStop:_react.PropTypes.func,onMouseDown:_react.PropTypes.func,className:_shims.dontSetMe,style:_shims.dontSetMe,transform:_shims.dontSetMe},DraggableCore.defaultProps={allowAnyClick:!1,cancel:null,disabled:!1,enableUserSelectHack:!0,handle:null,grid:null,transform:null,onStart:function(){},onDrag:function(){},onStop:function(){},onMouseDown:function(){}},exports["default"]=DraggableCore},function(module,exports,__webpack_require__){"use strict";function log(){}Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=log}])});
//# sourceMappingURL=dist/react-draggable.min.js
{
"name": "react-draggable",
"version": "2.0.0-beta3",
"version": "2.0.0",
"description": "React draggable component",

@@ -5,0 +5,0 @@ "main": "dist/react-draggable.js",

@@ -221,3 +221,3 @@ # React-Draggable [![Build Status](https://travis-ci.org/mzabriskie/react-draggable.svg?branch=master)](https://travis-ci.org/mzabriskie/react-draggable) [![npm downloads](https://img.shields.io/npm/dt/react-draggable.svg?maxAge=2592000)]()

If the prop `position: {x: number, y: number}` is defined, the `<Draggable>` will ignore its internal state and use
the provided position instead. Altneratively, you can seed the position using `defaultPosition`. Technically, since
the provided position instead. Alternatively, you can seed the position using `defaultPosition`. Technically, since
`<Draggable>` works only on position deltas, you could also seed the initial position using CSS `top/left`.

@@ -224,0 +224,0 @@

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc