react-draggable - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

bower.json

 {
   "name": "react-draggable",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "homepage": "https://github.com/mzabriskie/react-draggable",
@@ -5,0 +5,0 @@ "authors": [

CHANGELOG.md

 # Changelog
 
+### 1.2.0 (Feb 5, 2015)
+
+- Added arbitrary boundary selector. Now you don't have to just use `'parent'`, you can select any element
+  on the page, including `'body'`.
+- Bugfix: Prevent invariant if a `<Draggable>` is unmounted while dragging.
+- Bugfix: Fix #133, where items would eagerly start dragging off the mouse cursor if you hit boundaries and
+  came back. This is due to how `<DraggableCore>` handles deltas only and does not keep state. Added new state
+  properties `slackX` and `slackY` to `<Draggable>` to handle this and restore pre-v1 behavior.
+
 ### 1.1.3 (Nov 25, 2015)
@@ -4,0 +13,0 @@

dist/react-draggable.js

@@ -137,2 +137,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	
+	      // Used for compensating for out-of-bounds drags
+	      slackX: 0, slackY: 0,
+	
 	      // Can only determine if SVG after mounting
@@ -170,2 +173,16 @@ isElementSVG: false
 	      if (_this.props.bounds) {
+	        // Save original x and y.
+	        var clientX = newState.clientX;
+	        var clientY = newState.clientY;
+	
+	        // 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.clientX += _this.state.slackX;
+	        newState.clientY += _this.state.slackY;
+	
+	        // Get bound position. This will ceil/floor the x and y within the boundaries.
+	
+	        // Recalculate slack by noting how much was shaved by the boundPosition handler.
+	
 	        var _getBoundPosition = (0, _utilsPositionFns.getBoundPosition)(_this, newState.clientX, newState.clientY);
@@ -177,2 +194,4 @@
 	        newState.clientY = _getBoundPosition2[1];
+	        newState.slackX = _this.state.slackX + (clientX - newState.clientX);
+	        newState.slackY = _this.state.slackY + (clientY - newState.clientY);
 	      }
@@ -193,3 +212,5 @@
 	      _this.setState({
-	        dragging: false
+	        dragging: false,
+	        slackX: 0,
+	        slackY: 0
 	      });
@@ -208,2 +229,7 @@ };
 	  }, {
+	    key: 'componentWillUnmount',
+	    value: function componentWillUnmount() {
+	      this.setState({ dragging: false }); // prevents invariant if unmounted while dragging
+	    }
+	  }, {
 	    key: 'render',
@@ -303,3 +329,3 @@ value: function render() {
 	        bottom: _react.PropTypes.Number
-	      }), _react.PropTypes.oneOf(['parent', false])]),
+	      }), _react.PropTypes.string, _react.PropTypes.oneOf([false])]),
 	
@@ -819,13 +845,19 @@ /**
 	  var node = _reactDom2['default'].findDOMNode(draggable);
-	  var parent = node.parentNode;
 	
-	  if (bounds === 'parent') {
+	  if (typeof bounds === 'string') {
+	    var boundNode = undefined;
+	    if (bounds === 'parent') {
+	      boundNode = node.parentNode;
+	    } else {
+	      boundNode = document.querySelector(bounds);
+	      if (!boundNode) throw new Error('Bounds selector "' + bounds + '" could not find an element.');
+	    }
 	    var nodeStyle = window.getComputedStyle(node);
-	    var parentStyle = window.getComputedStyle(parent);
+	    var boundNodeStyle = window.getComputedStyle(boundNode);
 	    // Compute bounds. This is a pain with padding and offsets but this gets it exactly right.
 	    bounds = {
-	      left: -node.offsetLeft + (0, _shims.int)(parentStyle.paddingLeft) + (0, _shims.int)(nodeStyle.borderLeftWidth) + (0, _shims.int)(nodeStyle.marginLeft),
-	      top: -node.offsetTop + (0, _shims.int)(parentStyle.paddingTop) + (0, _shims.int)(nodeStyle.borderTopWidth) + (0, _shims.int)(nodeStyle.marginTop),
-	      right: (0, _domFns.innerWidth)(parent) - (0, _domFns.outerWidth)(node) - node.offsetLeft,
-	      bottom: (0, _domFns.innerHeight)(parent) - (0, _domFns.outerHeight)(node) - node.offsetTop
+	      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
 	    };
@@ -832,0 +864,0 @@ }

dist/react-draggable.min.js

@@ -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),module.exports.DraggableCore=__webpack_require__(10)},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 _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}}(),_get=function(_x,_x2,_x3){for(var _again=!0;_again;){var object=_x,property=_x2,receiver=_x3;_again=!1,null===object&&(object=Function.prototype);var desc=Object.getOwnPropertyDescriptor(object,property);if(void 0!==desc){if("value"in desc)return desc.value;var getter=desc.get;if(void 0===getter)return;return getter.call(receiver)}var parent=Object.getPrototypeOf(object);if(null===parent)return;_x=parent,_x2=property,_x3=receiver,_again=!0,desc=parent=void 0}},_react=__webpack_require__(2),_react2=_interopRequireDefault(_react),_reactDom=__webpack_require__(3),_reactDom2=_interopRequireDefault(_reactDom),_classnames=__webpack_require__(4),_classnames2=_interopRequireDefault(_classnames),_objectAssign=__webpack_require__(5),_objectAssign2=_interopRequireDefault(_objectAssign),_utilsDomFns=__webpack_require__(6),_utilsPositionFns=__webpack_require__(9),_utilsShims=__webpack_require__(7),_DraggableCore2=__webpack_require__(10),_DraggableCore3=_interopRequireDefault(_DraggableCore2),_utilsLog=__webpack_require__(11),_utilsLog2=_interopRequireDefault(_utilsLog),Draggable=function(_DraggableCore){function Draggable(){var _this=this;_classCallCheck(this,Draggable),_get(Object.getPrototypeOf(Draggable.prototype),"constructor",this).apply(this,arguments),this.state={dragging:!1,clientX:this.props.start.x,clientY:this.props.start.y,isElementSVG:!1},this.onDragStart=function(e,coreEvent){(0,_utilsLog2["default"])("Draggable: onDragStart: %j",coreEvent.position);var shouldStart=_this.props.onStart(e,(0,_utilsDomFns.createUIEvent)(_this,coreEvent));return shouldStart===!1?!1:void _this.setState({dragging:!0})},this.onDrag=function(e,coreEvent){if(!_this.state.dragging)return!1;(0,_utilsLog2["default"])("Draggable: onDrag: %j",coreEvent.position);var uiEvent=(0,_utilsDomFns.createUIEvent)(_this,coreEvent),shouldUpdate=_this.props.onDrag(e,uiEvent);if(shouldUpdate===!1)return!1;var newState={clientX:uiEvent.position.left,clientY:uiEvent.position.top};if(_this.props.bounds){var _getBoundPosition=(0,_utilsPositionFns.getBoundPosition)(_this,newState.clientX,newState.clientY),_getBoundPosition2=_slicedToArray(_getBoundPosition,2);newState.clientX=_getBoundPosition2[0],newState.clientY=_getBoundPosition2[1]}_this.setState(newState)},this.onDragStop=function(e,coreEvent){if(!_this.state.dragging)return!1;var shouldStop=_this.props.onStop(e,(0,_utilsDomFns.createUIEvent)(_this,coreEvent));return shouldStop===!1?!1:((0,_utilsLog2["default"])("Draggable: onDragStop: %j",coreEvent.position),void _this.setState({dragging:!1}))}}return _inherits(Draggable,_DraggableCore),_createClass(Draggable,[{key:"componentDidMount",value:function(){_reactDom2["default"].findDOMNode(this)instanceof SVGElement&&this.setState({isElementSVG:!0})}},{key:"render",value:function(){var style=void 0,svgTransform=null;style=(0,_utilsDomFns.createTransform)({x:(0,_utilsPositionFns.canDragX)(this)?this.state.clientX:this.props.start.x,y:(0,_utilsPositionFns.canDragY)(this)?this.state.clientY:this.props.start.y},this.state.isElementSVG),this.state.isElementSVG&&(svgTransform=style,style={}),this.state.dragging&&!isNaN(this.props.zIndex)&&(style.zIndex=this.props.zIndex);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(_DraggableCore3["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:(0,_objectAssign2["default"])({},this.props.children.props.style,style),transform:svgTransform}))}}],[{key:"displayName",value:"Draggable",enumerable:!0},{key:"propTypes",value:(0,_objectAssign2["default"])({},_DraggableCore3["default"].propTypes,{axis:_react.PropTypes.oneOf(["both","x","y"]),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.oneOf(["parent",!1])]),start:_react.PropTypes.shape({x:_react.PropTypes.number,y:_react.PropTypes.number}),zIndex:_react.PropTypes.number,className:_utilsShims.dontSetMe,style:_utilsShims.dontSetMe,transform:_utilsShims.dontSetMe}),enumerable:!0},{key:"defaultProps",value:(0,_objectAssign2["default"])({},_DraggableCore3["default"].defaultProps,{axis:"both",bounds:!1,start:{x:0,y:0},zIndex:NaN}),enumerable:!0}]),Draggable}(_DraggableCore3["default"]);exports["default"]=Draggable,module.exports=exports["default"]},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_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+=" "+arg;else if(Array.isArray(arg))classes+=" "+classNames.apply(null,arg);else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes+=" "+key)}}return classes.substr(1)}var hasOwn={}.hasOwnProperty;"undefined"!=typeof module&&module.exports?module.exports=classNames:(__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.call(exports,__webpack_require__,exports,module),!(void 0!==__WEBPACK_AMD_DEFINE_RESULT__&&(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)))}()},function(module,exports){"use strict";function toObject(val){if(null===val||void 0===val)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(val)}var hasOwnProperty=Object.prototype.hasOwnProperty,propIsEnumerable=Object.prototype.propertyIsEnumerable;module.exports=Object.assign||function(target,source){for(var from,symbols,to=toObject(target),s=1;s<arguments.length;s++){from=Object(arguments[s]);for(var key in from)hasOwnProperty.call(from,key)&&(to[key]=from[key]);if(Object.getOwnPropertySymbols){symbols=Object.getOwnPropertySymbols(from);for(var i=0;i<symbols.length;i++)propIsEnumerable.call(from,symbols[i])&&(to[symbols[i]]=from[symbols[i]])}}return to}},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function matchesSelector(el,selector){if(!(el instanceof Node))throw new TypeError("Value of argument 'el' violates contract, expected Node got "+(null===el?"null":el instanceof Object&&el.constructor?el.constructor.name:typeof el));if("string"!=typeof selector)throw new TypeError("Value of argument 'selector' violates contract, expected string got "+(null===selector?"null":selector instanceof Object&&selector.constructor?selector.constructor.name:typeof 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){if(null!=el&&!(el instanceof Node))throw new TypeError("Value of argument 'el' violates contract, expected null or Node got "+(null===el?"null":el instanceof Object&&el.constructor?el.constructor.name:typeof el));if("string"!=typeof event)throw new TypeError("Value of argument 'event' violates contract, expected string got "+(null===event?"null":event instanceof Object&&event.constructor?event.constructor.name:typeof event));if("function"!=typeof handler)throw new TypeError("Value of argument 'handler' violates contract, expected function got "+(null===handler?"null":handler instanceof Object&&handler.constructor?handler.constructor.name:typeof 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){if(null!=el&&!(el instanceof Node))throw new TypeError("Value of argument 'el' violates contract, expected null or Node got "+(null===el?"null":el instanceof Object&&el.constructor?el.constructor.name:typeof el));if("string"!=typeof event)throw new TypeError("Value of argument 'event' violates contract, expected string got "+(null===event?"null":event instanceof Object&&event.constructor?event.constructor.name:typeof event));if("function"!=typeof handler)throw new TypeError("Value of argument 'handler' violates contract, expected function got "+(null===handler?"null":handler instanceof Object&&handler.constructor?handler.constructor.name:typeof handler));el&&(el.detachEvent?el.detachEvent("on"+event,handler):el.removeEventListener?el.removeEventListener(event,handler,!0):el["on"+event]=null)}function outerHeight(node){if(!(node instanceof Node))throw new TypeError("Value of argument 'node' violates contract, expected Node got "+(null===node?"null":node instanceof Object&&node.constructor?node.constructor.name:typeof 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){if(!(node instanceof Node))throw new TypeError("Value of argument 'node' violates contract, expected Node got "+(null===node?"null":node instanceof Object&&node.constructor?node.constructor.name:typeof 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){if(!(node instanceof Node))throw new TypeError("Value of argument 'node' violates contract, expected Node got "+(null===node?"null":node instanceof Object&&node.constructor?node.constructor.name:typeof 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){if(!(node instanceof Node))throw new TypeError("Value of argument 'node' violates contract, expected Node got "+(null===node?"null":node instanceof Object&&node.constructor?node.constructor.name:typeof node));var width=node.clientWidth,computedStyle=window.getComputedStyle(node);return width-=(0,_shims["int"])(computedStyle.paddingLeft),width-=(0,_shims["int"])(computedStyle.paddingRight)}function createTransform(position,isSVG){if("object"!=typeof position)throw new TypeError("Value of argument 'position' violates contract, expected object got "+(null===position?"null":position instanceof Object&&position.constructor?position.constructor.name:typeof position));if(null!=isSVG&&"boolean"!=typeof isSVG)throw new TypeError("Value of argument 'isSVG' violates contract, expected null or boolean got "+(null===isSVG?"null":isSVG instanceof Object&&isSVG.constructor?isSVG.constructor.name:typeof isSVG));return isSVG?createSVGTransform(position):createCSSTransform(position)}function createCSSTransform(_ref){var x=_ref.x,y=_ref.y;return function(){if(null==={x:x,y:y}||"object"!=typeof{x:x,y:y}||"number"!=typeof{x:x,y:y}.x||"number"!=typeof{x:x,y:y}.y)throw new TypeError("Value of argument 'undefined' violates contract, expected Object with properties x and y got "+(null==={x:x,y:y}?"null":{x:x,y:y}instanceof Object&&{x:x,y:y}.constructor?{x:x,y:y}.constructor.name:typeof{x:x,y:y}));var out={transform:"translate("+x+"px,"+y+"px)"};return _getPrefix2["default"]&&(out[_getPrefix2["default"]+"Transform"]=out.transform),out}()}function createSVGTransform(_ref2){var x=_ref2.x,y=_ref2.y;return function(){if(null==={x:x,y:y}||"object"!=typeof{x:x,y:y}||"number"!=typeof{x:x,y:y}.x||"number"!=typeof{x:x,y:y}.y)throw new TypeError("Value of argument 'undefined' violates contract, expected Object with properties x and y got "+(null==={x:x,y:y}?"null":{x:x,y:y}instanceof Object&&{x:x,y:y}.constructor?{x:x,y:y}.constructor.name:typeof{x:x,y: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],touchHacks={touchAction:"none"};return(0,_objectAssign2["default"])(touchHacks,childStyle)}function createCoreEvent(draggable,clientX,clientY){var state=draggable._pendingState||draggable.state,isStart=!(0,_shims.isNum)(state.lastX);return{node:_reactDom2["default"].findDOMNode(draggable),position:isStart?{deltaX:0,deltaY:0,lastX:clientX,lastY:clientY,clientX:clientX,clientY:clientY}:{deltaX:clientX-state.lastX,deltaY:clientY-state.lastY,lastX:state.lastX,lastY:state.lastY,clientX:clientX,clientY:clientY}}}function createUIEvent(draggable,coreEvent){return{node:_reactDom2["default"].findDOMNode(draggable),position:{left:draggable.state.clientX+coreEvent.position.deltaX,top:draggable.state.clientY+coreEvent.position.deltaY},deltaX:coreEvent.position.deltaX,deltaY:coreEvent.position.deltaY}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.matchesSelector=matchesSelector,exports.addEvent=addEvent,exports.removeEvent=removeEvent,exports.outerHeight=outerHeight,exports.outerWidth=outerWidth,exports.innerHeight=innerHeight,exports.innerWidth=innerWidth,exports.createTransform=createTransform,exports.createCSSTransform=createCSSTransform,exports.createSVGTransform=createSVGTransform,exports.addUserSelectStyles=addUserSelectStyles,exports.removeUserSelectStyles=removeUserSelectStyles,exports.styleHacks=styleHacks,exports.createCoreEvent=createCoreEvent,exports.createUIEvent=createUIEvent;var _shims=__webpack_require__(7),_getPrefix=__webpack_require__(8),_getPrefix2=_interopRequireDefault(_getPrefix),_objectAssign=__webpack_require__(5),_objectAssign2=_interopRequireDefault(_objectAssign),_reactDom=__webpack_require__(3),_reactDom2=_interopRequireDefault(_reactDom),matchesSelectorFunc="",userSelectStyle=";user-select: none;";_getPrefix2["default"]&&(userSelectStyle+="-"+_getPrefix2["default"].toLowerCase()+"-user-select: 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){if(props[propName])throw new Error("Invalid prop "+propName+" passed to "+componentName+" - do not set this, set it on the child.")}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";Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=function(){if("undefined"==typeof window||"undefined"==typeof window.document)return"";var styles=window.getComputedStyle(document.documentElement,""),pre=(Array.prototype.slice.call(styles).join("").match(/-(moz|webkit|ms)-/)||""===styles.OLink&&["","o"])[1];return void 0===pre||null===pre?"":"ms"===pre?pre:void 0===pre||null===pre?"":pre.slice(0,1).toUpperCase()+pre.slice(1)}(),module.exports=exports["default"]},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function getBoundPosition(draggable,clientX,clientY){if(!draggable.props.bounds)return[clientX,clientY];var bounds=JSON.parse(JSON.stringify(draggable.props.bounds)),node=_reactDom2["default"].findDOMNode(draggable),parent=node.parentNode;if("parent"===bounds){var nodeStyle=window.getComputedStyle(node),parentStyle=window.getComputedStyle(parent);bounds={left:-node.offsetLeft+(0,_shims["int"])(parentStyle.paddingLeft)+(0,_shims["int"])(nodeStyle.borderLeftWidth)+(0,_shims["int"])(nodeStyle.marginLeft),top:-node.offsetTop+(0,_shims["int"])(parentStyle.paddingTop)+(0,_shims["int"])(nodeStyle.borderTopWidth)+(0,_shims["int"])(nodeStyle.marginTop),right:(0,_domFns.innerWidth)(parent)-(0,_domFns.outerWidth)(node)-node.offsetLeft,bottom:(0,_domFns.innerHeight)(parent)-(0,_domFns.outerHeight)(node)-node.offsetTop}}return(0,_shims.isNum)(bounds.right)&&(clientX=Math.min(clientX,bounds.right)),(0,_shims.isNum)(bounds.bottom)&&(clientY=Math.min(clientY,bounds.bottom)),(0,_shims.isNum)(bounds.left)&&(clientX=Math.max(clientX,bounds.left)),(0,_shims.isNum)(bounds.top)&&(clientY=Math.max(clientY,bounds.top)),[clientX,clientY]}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){var position=e.targetTouches&&e.targetTouches[0]||e;return{clientX:position.clientX,clientY:position.clientY}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getBoundPosition=getBoundPosition,exports.snapToGrid=snapToGrid,exports.canDragX=canDragX,exports.canDragY=canDragY,exports.getControlPosition=getControlPosition;var _shims=__webpack_require__(7),_reactDom=__webpack_require__(3),_reactDom2=_interopRequireDefault(_reactDom),_domFns=__webpack_require__(6)},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 _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}}(),_get=function(_x,_x2,_x3){for(var _again=!0;_again;){var object=_x,property=_x2,receiver=_x3;_again=!1,null===object&&(object=Function.prototype);var desc=Object.getOwnPropertyDescriptor(object,property);if(void 0!==desc){if("value"in desc)return desc.value;var getter=desc.get;if(void 0===getter)return;return getter.call(receiver)}var parent=Object.getPrototypeOf(object);if(null===parent)return;_x=parent,_x2=property,_x3=receiver,_again=!0,desc=parent=void 0}},_react=__webpack_require__(2),_react2=_interopRequireDefault(_react),_utilsDomFns=__webpack_require__(6),_utilsPositionFns=__webpack_require__(9),_utilsShims=__webpack_require__(7),_utilsLog=__webpack_require__(11),_utilsLog2=_interopRequireDefault(_utilsLog),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 _this=this;_classCallCheck(this,DraggableCore),_get(Object.getPrototypeOf(DraggableCore.prototype),"constructor",this).apply(this,arguments),this.state={dragging:!1,lastX:null,lastY:null},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||_this.props.handle&&!(0,_utilsDomFns.matchesSelector)(e.target,_this.props.handle)||_this.props.cancel&&(0,_utilsDomFns.matchesSelector)(e.target,_this.props.cancel))){e.targetTouches&&_this.setState({touchIdentifier:e.targetTouches[0].identifier}),_this.props.enableUserSelectHack&&(0,_utilsDomFns.addUserSelectStyles)();var _getControlPosition=(0,_utilsPositionFns.getControlPosition)(e),clientX=_getControlPosition.clientX,clientY=_getControlPosition.clientY,coreEvent=(0,_utilsDomFns.createCoreEvent)(_this,clientX,clientY);(0,_utilsLog2["default"])("DraggableCore: handleDragStart: %j",coreEvent.position),(0,_utilsLog2["default"])("calling",_this.props.onStart);var shouldUpdate=_this.props.onStart(e,coreEvent);shouldUpdate!==!1&&(_this.setState({dragging:!0,lastX:clientX,lastY:clientY,scrollX:document.body.scrollLeft,scrollY:document.body.scrollTop}),(0,_utilsDomFns.addEvent)(document,"scroll",_this.handleScroll),(0,_utilsDomFns.addEvent)(document,dragEventFor.move,_this.handleDrag),(0,_utilsDomFns.addEvent)(document,dragEventFor.stop,_this.handleDragStop))}},this.handleDrag=function(e){if(!e.targetTouches||e.targetTouches[0].identifier===_this.state.touchIdentifier){var _getControlPosition2=(0,_utilsPositionFns.getControlPosition)(e),clientX=_getControlPosition2.clientX,clientY=_getControlPosition2.clientY;if(Array.isArray(_this.props.grid)){var deltaX=clientX-_this.state.lastX,deltaY=clientY-_this.state.lastY,_snapToGrid=(0,_utilsPositionFns.snapToGrid)(_this.props.grid,deltaX,deltaY),_snapToGrid2=_slicedToArray(_snapToGrid,2);if(deltaX=_snapToGrid2[0],deltaY=_snapToGrid2[1],!deltaX&&!deltaY)return;clientX=_this.state.lastX+deltaX,clientY=_this.state.lastY+deltaY}var coreEvent=(0,_utilsDomFns.createCoreEvent)(_this,clientX,clientY);(0,_utilsLog2["default"])("DraggableCore: handleDrag: %j",coreEvent.position);var shouldUpdate=_this.props.onDrag(e,coreEvent);return shouldUpdate===!1?void _this.handleDragStop({}):void _this.setState({lastX:clientX,lastY:clientY})}},this.handleDragStop=function(e){if(_this.state.dragging&&(!e.changedTouches||e.changedTouches[0].identifier===_this.state.touchIdentifier)){_this.props.enableUserSelectHack&&(0,_utilsDomFns.removeUserSelectStyles)();var _getControlPosition3=(0,_utilsPositionFns.getControlPosition)(e),clientX=_getControlPosition3.clientX,clientY=_getControlPosition3.clientY,coreEvent=(0,_utilsDomFns.createCoreEvent)(_this,clientX,clientY);(0,_utilsLog2["default"])("DraggableCore: handleDragStop: %j",coreEvent.position),_this.setState({dragging:!1,lastX:null,lastY:null}),_this.props.onStop(e,coreEvent),(0,_utilsLog2["default"])("DraggableCore: Removing handlers"),(0,_utilsDomFns.removeEvent)(document,"scroll",_this.handleScroll),(0,_utilsDomFns.removeEvent)(document,dragEventFor.move,_this.handleDrag),(0,_utilsDomFns.removeEvent)(document,dragEventFor.stop,_this.handleDragStop)}},this.handleScroll=function(e){var s=_this.state,x=document.body.scrollLeft,y=document.body.scrollTop,coreEvent=(0,_utilsDomFns.createCoreEvent)(_this);coreEvent.position.deltaX=x-s.scrollX,coreEvent.position.deltaY=y-s.scrollY,_this.setState({lastX:s.lastX+coreEvent.position.deltaX,lastY:s.lastY+coreEvent.position.deltaY}),_this.props.onDrag(e,coreEvent)},this.onMouseDown=function(e){return dragEventFor===eventsFor.touch?e.preventDefault():_this.handleDragStart(e)},this.onTouchStart=function(e){return dragEventFor=eventsFor.touch,_this.handleDragStart(e)}}return _inherits(DraggableCore,_React$Component),_createClass(DraggableCore,[{key:"componentWillUnmount",value:function(){(0,_utilsDomFns.removeEvent)(document,eventsFor.mouse.move,this.handleDrag),(0,_utilsDomFns.removeEvent)(document,eventsFor.touch.move,this.handleDrag),(0,_utilsDomFns.removeEvent)(document,eventsFor.mouse.stop,this.handleDragStop),(0,_utilsDomFns.removeEvent)(document,eventsFor.touch.stop,this.handleDragStop),(0,_utilsDomFns.removeEvent)(document,"scroll",this.handleScroll),this.props.enableUserSelectHack&&(0,_utilsDomFns.removeUserSelectStyles)()}},{key:"render",value:function(){return _react2["default"].cloneElement(_react2["default"].Children.only(this.props.children),{style:(0,_utilsDomFns.styleHacks)(this.props.children.props.style),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,onMouseUp:this.handleDragStop,onTouchEnd:this.handleDragStop})}}],[{key:"displayName",value:"DraggableCore",enumerable:!0},{key:"propTypes",value:{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:_utilsShims.dontSetMe,style:_utilsShims.dontSetMe,transform:_utilsShims.dontSetMe},enumerable:!0},{key:"defaultProps",value:{allowAnyClick:!1,cancel:null,disabled:!1,enableUserSelectHack:!0,handle:null,grid:null,transform:null,onStart:function(){},onDrag:function(){},onStop:function(){},onMouseDown:function(){}},enumerable:!0}]),DraggableCore}(_react2["default"].Component);exports["default"]=DraggableCore,module.exports=exports["default"]},function(module,exports,__webpack_require__){"use strict";function log(){}Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=log,module.exports=exports["default"]}])});
+!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),module.exports.DraggableCore=__webpack_require__(10)},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 _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}}(),_get=function(_x,_x2,_x3){for(var _again=!0;_again;){var object=_x,property=_x2,receiver=_x3;_again=!1,null===object&&(object=Function.prototype);var desc=Object.getOwnPropertyDescriptor(object,property);if(void 0!==desc){if("value"in desc)return desc.value;var getter=desc.get;if(void 0===getter)return;return getter.call(receiver)}var parent=Object.getPrototypeOf(object);if(null===parent)return;_x=parent,_x2=property,_x3=receiver,_again=!0,desc=parent=void 0}},_react=__webpack_require__(2),_react2=_interopRequireDefault(_react),_reactDom=__webpack_require__(3),_reactDom2=_interopRequireDefault(_reactDom),_classnames=__webpack_require__(4),_classnames2=_interopRequireDefault(_classnames),_objectAssign=__webpack_require__(5),_objectAssign2=_interopRequireDefault(_objectAssign),_utilsDomFns=__webpack_require__(6),_utilsPositionFns=__webpack_require__(9),_utilsShims=__webpack_require__(7),_DraggableCore2=__webpack_require__(10),_DraggableCore3=_interopRequireDefault(_DraggableCore2),_utilsLog=__webpack_require__(11),_utilsLog2=_interopRequireDefault(_utilsLog),Draggable=function(_DraggableCore){function Draggable(){var _this=this;_classCallCheck(this,Draggable),_get(Object.getPrototypeOf(Draggable.prototype),"constructor",this).apply(this,arguments),this.state={dragging:!1,clientX:this.props.start.x,clientY:this.props.start.y,slackX:0,slackY:0,isElementSVG:!1},this.onDragStart=function(e,coreEvent){(0,_utilsLog2["default"])("Draggable: onDragStart: %j",coreEvent.position);var shouldStart=_this.props.onStart(e,(0,_utilsDomFns.createUIEvent)(_this,coreEvent));return shouldStart===!1?!1:void _this.setState({dragging:!0})},this.onDrag=function(e,coreEvent){if(!_this.state.dragging)return!1;(0,_utilsLog2["default"])("Draggable: onDrag: %j",coreEvent.position);var uiEvent=(0,_utilsDomFns.createUIEvent)(_this,coreEvent),shouldUpdate=_this.props.onDrag(e,uiEvent);if(shouldUpdate===!1)return!1;var newState={clientX:uiEvent.position.left,clientY:uiEvent.position.top};if(_this.props.bounds){var clientX=newState.clientX,clientY=newState.clientY;newState.clientX+=_this.state.slackX,newState.clientY+=_this.state.slackY;var _getBoundPosition=(0,_utilsPositionFns.getBoundPosition)(_this,newState.clientX,newState.clientY),_getBoundPosition2=_slicedToArray(_getBoundPosition,2);newState.clientX=_getBoundPosition2[0],newState.clientY=_getBoundPosition2[1],newState.slackX=_this.state.slackX+(clientX-newState.clientX),newState.slackY=_this.state.slackY+(clientY-newState.clientY)}_this.setState(newState)},this.onDragStop=function(e,coreEvent){if(!_this.state.dragging)return!1;var shouldStop=_this.props.onStop(e,(0,_utilsDomFns.createUIEvent)(_this,coreEvent));return shouldStop===!1?!1:((0,_utilsLog2["default"])("Draggable: onDragStop: %j",coreEvent.position),void _this.setState({dragging:!1,slackX:0,slackY:0}))}}return _inherits(Draggable,_DraggableCore),_createClass(Draggable,[{key:"componentDidMount",value:function(){_reactDom2["default"].findDOMNode(this)instanceof SVGElement&&this.setState({isElementSVG:!0})}},{key:"componentWillUnmount",value:function(){this.setState({dragging:!1})}},{key:"render",value:function(){var style=void 0,svgTransform=null;style=(0,_utilsDomFns.createTransform)({x:(0,_utilsPositionFns.canDragX)(this)?this.state.clientX:this.props.start.x,y:(0,_utilsPositionFns.canDragY)(this)?this.state.clientY:this.props.start.y},this.state.isElementSVG),this.state.isElementSVG&&(svgTransform=style,style={}),this.state.dragging&&!isNaN(this.props.zIndex)&&(style.zIndex=this.props.zIndex);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(_DraggableCore3["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:(0,_objectAssign2["default"])({},this.props.children.props.style,style),transform:svgTransform}))}}],[{key:"displayName",value:"Draggable",enumerable:!0},{key:"propTypes",value:(0,_objectAssign2["default"])({},_DraggableCore3["default"].propTypes,{axis:_react.PropTypes.oneOf(["both","x","y"]),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])]),start:_react.PropTypes.shape({x:_react.PropTypes.number,y:_react.PropTypes.number}),zIndex:_react.PropTypes.number,className:_utilsShims.dontSetMe,style:_utilsShims.dontSetMe,transform:_utilsShims.dontSetMe}),enumerable:!0},{key:"defaultProps",value:(0,_objectAssign2["default"])({},_DraggableCore3["default"].defaultProps,{axis:"both",bounds:!1,start:{x:0,y:0},zIndex:NaN}),enumerable:!0}]),Draggable}(_DraggableCore3["default"]);exports["default"]=Draggable,module.exports=exports["default"]},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_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+=" "+arg;else if(Array.isArray(arg))classes+=" "+classNames.apply(null,arg);else if("object"===argType)for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes+=" "+key)}}return classes.substr(1)}var hasOwn={}.hasOwnProperty;"undefined"!=typeof module&&module.exports?module.exports=classNames:(__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.call(exports,__webpack_require__,exports,module),!(void 0!==__WEBPACK_AMD_DEFINE_RESULT__&&(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)))}()},function(module,exports){"use strict";function toObject(val){if(null===val||void 0===val)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(val)}var hasOwnProperty=Object.prototype.hasOwnProperty,propIsEnumerable=Object.prototype.propertyIsEnumerable;module.exports=Object.assign||function(target,source){for(var from,symbols,to=toObject(target),s=1;s<arguments.length;s++){from=Object(arguments[s]);for(var key in from)hasOwnProperty.call(from,key)&&(to[key]=from[key]);if(Object.getOwnPropertySymbols){symbols=Object.getOwnPropertySymbols(from);for(var i=0;i<symbols.length;i++)propIsEnumerable.call(from,symbols[i])&&(to[symbols[i]]=from[symbols[i]])}}return to}},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function matchesSelector(el,selector){if(!(el instanceof Node))throw new TypeError("Value of argument 'el' violates contract, expected Node got "+(null===el?"null":el instanceof Object&&el.constructor?el.constructor.name:typeof el));if("string"!=typeof selector)throw new TypeError("Value of argument 'selector' violates contract, expected string got "+(null===selector?"null":selector instanceof Object&&selector.constructor?selector.constructor.name:typeof 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){if(null!=el&&!(el instanceof Node))throw new TypeError("Value of argument 'el' violates contract, expected null or Node got "+(null===el?"null":el instanceof Object&&el.constructor?el.constructor.name:typeof el));if("string"!=typeof event)throw new TypeError("Value of argument 'event' violates contract, expected string got "+(null===event?"null":event instanceof Object&&event.constructor?event.constructor.name:typeof event));if("function"!=typeof handler)throw new TypeError("Value of argument 'handler' violates contract, expected function got "+(null===handler?"null":handler instanceof Object&&handler.constructor?handler.constructor.name:typeof 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){if(null!=el&&!(el instanceof Node))throw new TypeError("Value of argument 'el' violates contract, expected null or Node got "+(null===el?"null":el instanceof Object&&el.constructor?el.constructor.name:typeof el));if("string"!=typeof event)throw new TypeError("Value of argument 'event' violates contract, expected string got "+(null===event?"null":event instanceof Object&&event.constructor?event.constructor.name:typeof event));if("function"!=typeof handler)throw new TypeError("Value of argument 'handler' violates contract, expected function got "+(null===handler?"null":handler instanceof Object&&handler.constructor?handler.constructor.name:typeof handler));el&&(el.detachEvent?el.detachEvent("on"+event,handler):el.removeEventListener?el.removeEventListener(event,handler,!0):el["on"+event]=null)}function outerHeight(node){if(!(node instanceof Node))throw new TypeError("Value of argument 'node' violates contract, expected Node got "+(null===node?"null":node instanceof Object&&node.constructor?node.constructor.name:typeof 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){if(!(node instanceof Node))throw new TypeError("Value of argument 'node' violates contract, expected Node got "+(null===node?"null":node instanceof Object&&node.constructor?node.constructor.name:typeof 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){if(!(node instanceof Node))throw new TypeError("Value of argument 'node' violates contract, expected Node got "+(null===node?"null":node instanceof Object&&node.constructor?node.constructor.name:typeof 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){if(!(node instanceof Node))throw new TypeError("Value of argument 'node' violates contract, expected Node got "+(null===node?"null":node instanceof Object&&node.constructor?node.constructor.name:typeof node));var width=node.clientWidth,computedStyle=window.getComputedStyle(node);return width-=(0,_shims["int"])(computedStyle.paddingLeft),width-=(0,_shims["int"])(computedStyle.paddingRight)}function createTransform(position,isSVG){if("object"!=typeof position)throw new TypeError("Value of argument 'position' violates contract, expected object got "+(null===position?"null":position instanceof Object&&position.constructor?position.constructor.name:typeof position));if(null!=isSVG&&"boolean"!=typeof isSVG)throw new TypeError("Value of argument 'isSVG' violates contract, expected null or boolean got "+(null===isSVG?"null":isSVG instanceof Object&&isSVG.constructor?isSVG.constructor.name:typeof isSVG));return isSVG?createSVGTransform(position):createCSSTransform(position)}function createCSSTransform(_ref){var x=_ref.x,y=_ref.y;return function(){if(null==={x:x,y:y}||"object"!=typeof{x:x,y:y}||"number"!=typeof{x:x,y:y}.x||"number"!=typeof{x:x,y:y}.y)throw new TypeError("Value of argument 'undefined' violates contract, expected Object with properties x and y got "+(null==={x:x,y:y}?"null":{x:x,y:y}instanceof Object&&{x:x,y:y}.constructor?{x:x,y:y}.constructor.name:typeof{x:x,y:y}));var out={transform:"translate("+x+"px,"+y+"px)"};return _getPrefix2["default"]&&(out[_getPrefix2["default"]+"Transform"]=out.transform),out}()}function createSVGTransform(_ref2){var x=_ref2.x,y=_ref2.y;return function(){if(null==={x:x,y:y}||"object"!=typeof{x:x,y:y}||"number"!=typeof{x:x,y:y}.x||"number"!=typeof{x:x,y:y}.y)throw new TypeError("Value of argument 'undefined' violates contract, expected Object with properties x and y got "+(null==={x:x,y:y}?"null":{x:x,y:y}instanceof Object&&{x:x,y:y}.constructor?{x:x,y:y}.constructor.name:typeof{x:x,y: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],touchHacks={touchAction:"none"};return(0,_objectAssign2["default"])(touchHacks,childStyle)}function createCoreEvent(draggable,clientX,clientY){var state=draggable._pendingState||draggable.state,isStart=!(0,_shims.isNum)(state.lastX);return{node:_reactDom2["default"].findDOMNode(draggable),position:isStart?{deltaX:0,deltaY:0,lastX:clientX,lastY:clientY,clientX:clientX,clientY:clientY}:{deltaX:clientX-state.lastX,deltaY:clientY-state.lastY,lastX:state.lastX,lastY:state.lastY,clientX:clientX,clientY:clientY}}}function createUIEvent(draggable,coreEvent){return{node:_reactDom2["default"].findDOMNode(draggable),position:{left:draggable.state.clientX+coreEvent.position.deltaX,top:draggable.state.clientY+coreEvent.position.deltaY},deltaX:coreEvent.position.deltaX,deltaY:coreEvent.position.deltaY}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.matchesSelector=matchesSelector,exports.addEvent=addEvent,exports.removeEvent=removeEvent,exports.outerHeight=outerHeight,exports.outerWidth=outerWidth,exports.innerHeight=innerHeight,exports.innerWidth=innerWidth,exports.createTransform=createTransform,exports.createCSSTransform=createCSSTransform,exports.createSVGTransform=createSVGTransform,exports.addUserSelectStyles=addUserSelectStyles,exports.removeUserSelectStyles=removeUserSelectStyles,exports.styleHacks=styleHacks,exports.createCoreEvent=createCoreEvent,exports.createUIEvent=createUIEvent;var _shims=__webpack_require__(7),_getPrefix=__webpack_require__(8),_getPrefix2=_interopRequireDefault(_getPrefix),_objectAssign=__webpack_require__(5),_objectAssign2=_interopRequireDefault(_objectAssign),_reactDom=__webpack_require__(3),_reactDom2=_interopRequireDefault(_reactDom),matchesSelectorFunc="",userSelectStyle=";user-select: none;";_getPrefix2["default"]&&(userSelectStyle+="-"+_getPrefix2["default"].toLowerCase()+"-user-select: 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){if(props[propName])throw new Error("Invalid prop "+propName+" passed to "+componentName+" - do not set this, set it on the child.")}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";Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=function(){if("undefined"==typeof window||"undefined"==typeof window.document)return"";var styles=window.getComputedStyle(document.documentElement,""),pre=(Array.prototype.slice.call(styles).join("").match(/-(moz|webkit|ms)-/)||""===styles.OLink&&["","o"])[1];return void 0===pre||null===pre?"":"ms"===pre?pre:void 0===pre||null===pre?"":pre.slice(0,1).toUpperCase()+pre.slice(1)}(),module.exports=exports["default"]},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function getBoundPosition(draggable,clientX,clientY){if(!draggable.props.bounds)return[clientX,clientY];var bounds=JSON.parse(JSON.stringify(draggable.props.bounds)),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)&&(clientX=Math.min(clientX,bounds.right)),(0,_shims.isNum)(bounds.bottom)&&(clientY=Math.min(clientY,bounds.bottom)),(0,_shims.isNum)(bounds.left)&&(clientX=Math.max(clientX,bounds.left)),(0,_shims.isNum)(bounds.top)&&(clientY=Math.max(clientY,bounds.top)),[clientX,clientY]}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){var position=e.targetTouches&&e.targetTouches[0]||e;return{clientX:position.clientX,clientY:position.clientY}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getBoundPosition=getBoundPosition,exports.snapToGrid=snapToGrid,exports.canDragX=canDragX,exports.canDragY=canDragY,exports.getControlPosition=getControlPosition;var _shims=__webpack_require__(7),_reactDom=__webpack_require__(3),_reactDom2=_interopRequireDefault(_reactDom),_domFns=__webpack_require__(6)},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 _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}}(),_get=function(_x,_x2,_x3){for(var _again=!0;_again;){var object=_x,property=_x2,receiver=_x3;_again=!1,null===object&&(object=Function.prototype);var desc=Object.getOwnPropertyDescriptor(object,property);if(void 0!==desc){if("value"in desc)return desc.value;var getter=desc.get;if(void 0===getter)return;return getter.call(receiver)}var parent=Object.getPrototypeOf(object);if(null===parent)return;_x=parent,_x2=property,_x3=receiver,_again=!0,desc=parent=void 0}},_react=__webpack_require__(2),_react2=_interopRequireDefault(_react),_utilsDomFns=__webpack_require__(6),_utilsPositionFns=__webpack_require__(9),_utilsShims=__webpack_require__(7),_utilsLog=__webpack_require__(11),_utilsLog2=_interopRequireDefault(_utilsLog),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 _this=this;_classCallCheck(this,DraggableCore),_get(Object.getPrototypeOf(DraggableCore.prototype),"constructor",this).apply(this,arguments),this.state={dragging:!1,lastX:null,lastY:null},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||_this.props.handle&&!(0,_utilsDomFns.matchesSelector)(e.target,_this.props.handle)||_this.props.cancel&&(0,_utilsDomFns.matchesSelector)(e.target,_this.props.cancel))){e.targetTouches&&_this.setState({touchIdentifier:e.targetTouches[0].identifier}),_this.props.enableUserSelectHack&&(0,_utilsDomFns.addUserSelectStyles)();var _getControlPosition=(0,_utilsPositionFns.getControlPosition)(e),clientX=_getControlPosition.clientX,clientY=_getControlPosition.clientY,coreEvent=(0,_utilsDomFns.createCoreEvent)(_this,clientX,clientY);(0,_utilsLog2["default"])("DraggableCore: handleDragStart: %j",coreEvent.position),(0,_utilsLog2["default"])("calling",_this.props.onStart);var shouldUpdate=_this.props.onStart(e,coreEvent);shouldUpdate!==!1&&(_this.setState({dragging:!0,lastX:clientX,lastY:clientY,scrollX:document.body.scrollLeft,scrollY:document.body.scrollTop}),(0,_utilsDomFns.addEvent)(document,"scroll",_this.handleScroll),(0,_utilsDomFns.addEvent)(document,dragEventFor.move,_this.handleDrag),(0,_utilsDomFns.addEvent)(document,dragEventFor.stop,_this.handleDragStop))}},this.handleDrag=function(e){if(!e.targetTouches||e.targetTouches[0].identifier===_this.state.touchIdentifier){var _getControlPosition2=(0,_utilsPositionFns.getControlPosition)(e),clientX=_getControlPosition2.clientX,clientY=_getControlPosition2.clientY;if(Array.isArray(_this.props.grid)){var deltaX=clientX-_this.state.lastX,deltaY=clientY-_this.state.lastY,_snapToGrid=(0,_utilsPositionFns.snapToGrid)(_this.props.grid,deltaX,deltaY),_snapToGrid2=_slicedToArray(_snapToGrid,2);if(deltaX=_snapToGrid2[0],deltaY=_snapToGrid2[1],!deltaX&&!deltaY)return;clientX=_this.state.lastX+deltaX,clientY=_this.state.lastY+deltaY}var coreEvent=(0,_utilsDomFns.createCoreEvent)(_this,clientX,clientY);(0,_utilsLog2["default"])("DraggableCore: handleDrag: %j",coreEvent.position);var shouldUpdate=_this.props.onDrag(e,coreEvent);return shouldUpdate===!1?void _this.handleDragStop({}):void _this.setState({lastX:clientX,lastY:clientY})}},this.handleDragStop=function(e){if(_this.state.dragging&&(!e.changedTouches||e.changedTouches[0].identifier===_this.state.touchIdentifier)){_this.props.enableUserSelectHack&&(0,_utilsDomFns.removeUserSelectStyles)();var _getControlPosition3=(0,_utilsPositionFns.getControlPosition)(e),clientX=_getControlPosition3.clientX,clientY=_getControlPosition3.clientY,coreEvent=(0,_utilsDomFns.createCoreEvent)(_this,clientX,clientY);(0,_utilsLog2["default"])("DraggableCore: handleDragStop: %j",coreEvent.position),_this.setState({dragging:!1,lastX:null,lastY:null}),_this.props.onStop(e,coreEvent),(0,_utilsLog2["default"])("DraggableCore: Removing handlers"),(0,_utilsDomFns.removeEvent)(document,"scroll",_this.handleScroll),(0,_utilsDomFns.removeEvent)(document,dragEventFor.move,_this.handleDrag),(0,_utilsDomFns.removeEvent)(document,dragEventFor.stop,_this.handleDragStop)}},this.handleScroll=function(e){var s=_this.state,x=document.body.scrollLeft,y=document.body.scrollTop,coreEvent=(0,_utilsDomFns.createCoreEvent)(_this);coreEvent.position.deltaX=x-s.scrollX,coreEvent.position.deltaY=y-s.scrollY,_this.setState({lastX:s.lastX+coreEvent.position.deltaX,lastY:s.lastY+coreEvent.position.deltaY}),_this.props.onDrag(e,coreEvent)},this.onMouseDown=function(e){return dragEventFor===eventsFor.touch?e.preventDefault():_this.handleDragStart(e)},this.onTouchStart=function(e){return dragEventFor=eventsFor.touch,_this.handleDragStart(e)}}return _inherits(DraggableCore,_React$Component),_createClass(DraggableCore,[{key:"componentWillUnmount",value:function(){(0,_utilsDomFns.removeEvent)(document,eventsFor.mouse.move,this.handleDrag),(0,_utilsDomFns.removeEvent)(document,eventsFor.touch.move,this.handleDrag),(0,_utilsDomFns.removeEvent)(document,eventsFor.mouse.stop,this.handleDragStop),(0,_utilsDomFns.removeEvent)(document,eventsFor.touch.stop,this.handleDragStop),(0,_utilsDomFns.removeEvent)(document,"scroll",this.handleScroll),this.props.enableUserSelectHack&&(0,_utilsDomFns.removeUserSelectStyles)()}},{key:"render",value:function(){return _react2["default"].cloneElement(_react2["default"].Children.only(this.props.children),{style:(0,_utilsDomFns.styleHacks)(this.props.children.props.style),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,onMouseUp:this.handleDragStop,onTouchEnd:this.handleDragStop})}}],[{key:"displayName",value:"DraggableCore",enumerable:!0},{key:"propTypes",value:{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:_utilsShims.dontSetMe,style:_utilsShims.dontSetMe,transform:_utilsShims.dontSetMe},enumerable:!0},{key:"defaultProps",value:{allowAnyClick:!1,cancel:null,disabled:!1,enableUserSelectHack:!0,handle:null,grid:null,transform:null,onStart:function(){},onDrag:function(){},onStop:function(){},onMouseDown:function(){}},enumerable:!0}]),DraggableCore}(_react2["default"].Component);exports["default"]=DraggableCore,module.exports=exports["default"]},function(module,exports,__webpack_require__){"use strict";function log(){}Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=log,module.exports=exports["default"]}])});
 //# sourceMappingURL=dist/react-draggable.min.js

package.json

 {
   "name": "react-draggable",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "React draggable component",
@@ -5,0 +5,0 @@ "main": "dist/react-draggable.js",

README.md

@@ -25,2 +25,17 @@ # React-Draggable [![Build Status](https://travis-ci.org/mzabriskie/react-draggable.svg?branch=master)](https://travis-ci.org/mzabriskie/react-draggable)
 
+### Exports
+
+The default export is `<Draggable>`. At the `.DraggableCore` property is `<DraggableCore>`. Here's how to use it:
+
+```js
+// ES6
+import Draggable from 'react-draggable'; // The default
+import {DraggableCore} from 'react-draggable'; // <DraggableCore>
+import Draggable, {DraggableCore} from 'react-draggable'; // Both at the same time
+
+// CommonJS
+let Draggable = require('react-draggable');
+let DraggableCore = Draggable.DraggableCore;
+```
+
 ## Draggable
@@ -27,0 +42,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

267207

increased by3.3%

Lines of code

1349

increased by2.2%

Number of lines in readme file

245

increased by6.52%

No dependency changes