Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-draggable

Package Overview
Dependencies
Maintainers
2
Versions
79
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-draggable - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

2

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

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

# Changelog
### 1.1.0 (Nov 14, 2015)
- Move `grid` into `<DraggableCore>` directly. It will continue to work on `<Draggable>`.
- Development fixes.
### 1.0.2 (Nov 7, 2015)

@@ -4,0 +9,0 @@

@@ -167,17 +167,2 @@ (function webpackUniversalModuleDefinition(root, factory) {

// Snap to grid if prop has been provided
if (Array.isArray(_this.props.grid)) {
newState.lastX = (_this.state.lastX || newState.clientX) + coreEvent.position.deltaX;
newState.lastY = (_this.state.lastY || newState.clientY) + coreEvent.position.deltaY;
// Eslint bug, it thinks newState.clientY is undefined
/*eslint no-undef:0*/
var _snapToGrid = (0, _utilsPositionFns.snapToGrid)(_this.props.grid, newState.lastX, newState.lastY);
var _snapToGrid2 = _slicedToArray(_snapToGrid, 2);
newState.clientX = _snapToGrid2[0];
newState.clientY = _snapToGrid2[1];
}
// Keep within bounds.

@@ -317,21 +302,2 @@ if (_this.props.bounds) {

/**
* `grid` specifies the x and y that dragging should snap to.
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return (
* <Draggable grid={[25, 25]}>
* <div>I snap to a 25 x 25 grid</div>
* </Draggable>
* );
* }
* });
* ```
*/
grid: _react.PropTypes.arrayOf(_react.PropTypes.number),
/**
* `start` specifies the x and y that the dragged item should start at

@@ -390,3 +356,2 @@ *

bounds: false,
grid: null,
start: { x: 0, y: 0 },

@@ -880,2 +845,4 @@ zIndex: NaN

var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

@@ -1016,2 +983,18 @@

// Snap to grid if prop has been provided
if (Array.isArray(_this.props.grid)) {
var deltaX = clientX - _this.state.lastX,
deltaY = clientY - _this.state.lastY;
var _snapToGrid = (0, _utilsPositionFns.snapToGrid)(_this.props.grid, deltaX, deltaY);
var _snapToGrid2 = _slicedToArray(_snapToGrid, 2);
deltaX = _snapToGrid2[0];
deltaY = _snapToGrid2[1];
if (!deltaX && !deltaY) return; // skip useless drag
clientX = _this.state.lastX + deltaX, clientY = _this.state.lastY + deltaY;
}
var coreEvent = (0, _utilsDomFns.createCoreEvent)(_this, clientX, clientY);

@@ -1177,2 +1160,21 @@

/**
* `grid` specifies the x and y that dragging should snap to.
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return (
* <Draggable grid={[25, 25]}>
* <div>I snap to a 25 x 25 grid</div>
* </Draggable>
* );
* }
* });
* ```
*/
grid: _react.PropTypes.arrayOf(_react.PropTypes.number),
/**
* `handle` specifies a selector to be used as the handle that initiates drag.

@@ -1305,2 +1307,3 @@ *

handle: null,
grid: null,
transform: null,

@@ -1307,0 +1310,0 @@ onStart: function onStart() {},

@@ -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;return void 0===getter?void 0:getter.call(receiver)}var parent=Object.getPrototypeOf(object);if(null===parent)return void 0;_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 shouldUpdate=_this.props.onDrag(e,(0,_utilsDomFns.createUIEvent)(_this,coreEvent));if(shouldUpdate===!1)return!1;var newState={clientX:_this.state.clientX+coreEvent.position.deltaX,clientY:_this.state.clientY+coreEvent.position.deltaY};if(Array.isArray(_this.props.grid)){newState.lastX=(_this.state.lastX||newState.clientX)+coreEvent.position.deltaX,newState.lastY=(_this.state.lastY||newState.clientY)+coreEvent.position.deltaY;var _snapToGrid=(0,_utilsPositionFns.snapToGrid)(_this.props.grid,newState.lastX,newState.lastY),_snapToGrid2=_slicedToArray(_snapToGrid,2);newState.clientX=_snapToGrid2[0],newState.clientY=_snapToGrid2[1]}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])]),grid:_react.PropTypes.arrayOf(_react.PropTypes.number),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,grid:null,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){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 createTransform(position,isSVG){return isSVG?createSVGTransform(position):createCSSTransform(position)}function createCSSTransform(_ref){var x=_ref.x,y=_ref.y;return function(){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(){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:{top:coreEvent.position.clientY,left:coreEvent.position.clientX},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)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 _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;return void 0===getter?void 0:getter.call(receiver)}var parent=Object.getPrototypeOf(object);if(null===parent)return void 0;_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,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.deltaX=x-s.scrollX,coreEvent.deltaY=y-s.scrollY,_this.setState({lastX:s.lastX+coreEvent.deltaX,lastY:s.lastY+coreEvent.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),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,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,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;return void 0===getter?void 0:getter.call(receiver)}var parent=Object.getPrototypeOf(object);if(null===parent)return void 0;_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 shouldUpdate=_this.props.onDrag(e,(0,_utilsDomFns.createUIEvent)(_this,coreEvent));if(shouldUpdate===!1)return!1;var newState={clientX:_this.state.clientX+coreEvent.position.deltaX,clientY:_this.state.clientY+coreEvent.position.deltaY};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){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 createTransform(position,isSVG){return isSVG?createSVGTransform(position):createCSSTransform(position)}function createCSSTransform(_ref){var x=_ref.x,y=_ref.y;return function(){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(){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:{top:coreEvent.position.clientY,left:coreEvent.position.clientX},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)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;return void 0===getter?void 0:getter.call(receiver)}var parent=Object.getPrototypeOf(object);if(null===parent)return void 0;_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.deltaX=x-s.scrollX,coreEvent.deltaY=y-s.scrollY,_this.setState({lastX:s.lastX+coreEvent.deltaX,lastY:s.lastY+coreEvent.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),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
{
"name": "react-draggable",
"version": "1.0.2",
"version": "1.1.0",
"description": "React draggable component",

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

@@ -188,3 +188,2 @@ # React-Draggable [![Build Status](https://travis-ci.org/mzabriskie/react-draggable.svg?branch=master)](https://travis-ci.org/mzabriskie/react-draggable)

* `bounds`
* `grid`
* `start`

@@ -196,12 +195,15 @@ * `zIndex`

```js
{
node: Node
position:
{
// lastX + deltaX === clientX
deltaX: number, deltaY: number,
lastX: number, lastY: number,
clientX: number, clientY: number
(
event: Event,
ui:{
node: Node
position:
{
// lastX + deltaX === clientX
deltaX: number, deltaY: number,
lastX: number, lastY: number,
clientX: number, clientY: number
}
}
};
)
```

@@ -208,0 +210,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

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc