react-drag-drop-container
Advanced tools
Comparing version
@@ -8,3 +8,3 @@ import React from 'react'; | ||
<div> | ||
<h2>Demo 1: Drag in the directions indicated</h2> | ||
<h2>Demo: Drag in the directions indicated</h2> | ||
<DragDropContainer xOnly={true}><div style={styles}>↔</div></DragDropContainer> | ||
@@ -11,0 +11,0 @@ <DragDropContainer yOnly={true}><div style={styles}>↕</div></DragDropContainer> |
@@ -29,5 +29,5 @@ import React from 'react'; | ||
let styles = { | ||
padding: 10, | ||
padding: 4, | ||
borderRadius: 30, | ||
margin: 40, | ||
margin: 12, | ||
backgroundColor: (this.state.highlighted ? 'aqua' : 'transparent') | ||
@@ -77,3 +77,3 @@ }; | ||
<div> | ||
<h2>Demo 2: Drag the food to the correct animal</h2> | ||
<h2>Demo: Drag the food to the correct animal</h2> | ||
You can also drag the animal | ||
@@ -84,3 +84,3 @@ <div className="animals"> | ||
<img src="img/gorilla.png" width="100"/> | ||
I eat fruit | ||
<h5>I eat fruit</h5> | ||
</Animal> | ||
@@ -92,3 +92,3 @@ </DragDropContainer> | ||
<img src="img/puppy.png" width="100"/> | ||
I eat meat & pickles | ||
<h5>I eat meat & pickles</h5> | ||
</Animal> | ||
@@ -101,3 +101,3 @@ </DragDropContainer> | ||
<img src="img/trashcan.png" width="100"/> | ||
I eat everything | ||
<h5>I eat everything</h5> | ||
</Animal> | ||
@@ -104,0 +104,0 @@ </Animal> |
@@ -116,19 +116,23 @@ import React from 'react'; | ||
display: 'inline-block', | ||
position: 'relative', | ||
}; | ||
return ( | ||
<DropTarget | ||
onHit={this.handleDrop} | ||
targetKey={this.props.targetKey} | ||
dropData={{name: this.props.name}} | ||
> | ||
<div style={styles}> | ||
{this.state.items.map((item, index) => { | ||
return ( | ||
<BoxItem key={item.uid} uid={item.uid} kill={this.kill} index={index} swap={this.swap}> | ||
{item.label} | ||
</BoxItem> | ||
) | ||
})} | ||
</div> | ||
</DropTarget> | ||
<DragDropContainer dragHandleClassName="grab_me"> | ||
<DropTarget | ||
onHit={this.handleDrop} | ||
targetKey={this.props.targetKey} | ||
dropData={{name: this.props.name}} | ||
> | ||
<div style={styles}> | ||
<div className="grab_me" style={{position: 'absolute', bottom: 0, right: 0}}>x</div> | ||
{this.state.items.map((item, index) => { | ||
return ( | ||
<BoxItem key={item.uid} uid={item.uid} kill={this.kill} index={index} swap={this.swap}> | ||
{item.label} | ||
</BoxItem> | ||
) | ||
})} | ||
</div> | ||
</DropTarget> | ||
</DragDropContainer> | ||
); | ||
@@ -163,4 +167,4 @@ } | ||
<div> | ||
<h2>Demo 3: Drag things into boxes</h2> | ||
You can also drag between boxes and drag to re-order within boxes. | ||
<h2>Demo: Drag things into boxes</h2> | ||
You can also drag between boxes and drag to re-order within boxes, and drag the boxes using the x as a drag handle. | ||
<div className="things_to_drag"> | ||
@@ -167,0 +171,0 @@ <BoxMe targetKey="box" label="bananas" image="img/banana.png"/> |
@@ -12,7 +12,7 @@ var React = require('react'); | ||
<div> | ||
<BasicDragDemo /> | ||
<hr /> | ||
<DragFoodToAnimalsDemo/> | ||
<hr /> | ||
<DragThingsToBoxesDemo/> | ||
<hr /> | ||
<BasicDragDemo /> | ||
</div> | ||
@@ -19,0 +19,0 @@ ); |
@@ -1,2 +0,2 @@ | ||
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=18)}([function(e,t,n){"use strict";var r=n(5),o=r;e.exports=o},function(e,t,n){"use strict";function r(e){return void 0!==e.ref}function o(e){return void 0!==e.key}var i=n(4),a=n(10),s=(n(0),n(13),Object.prototype.hasOwnProperty),u=n(11),l={key:!0,ref:!0,__self:!0,__source:!0},c=function(e,t,n,r,o,i,a){var s={$$typeof:u,type:e,key:t,ref:n,props:a,_owner:i};return s};c.createElement=function(e,t,n){var i,u={},p=null,f=null;if(null!=t){r(t)&&(f=t.ref),o(t)&&(p=""+t.key),void 0===t.__self?null:t.__self,void 0===t.__source?null:t.__source;for(i in t)s.call(t,i)&&!l.hasOwnProperty(i)&&(u[i]=t[i])}var d=arguments.length-2;if(1===d)u.children=n;else if(d>1){for(var h=Array(d),y=0;y<d;y++)h[y]=arguments[y+2];u.children=h}if(e&&e.defaultProps){var g=e.defaultProps;for(i in g)void 0===u[i]&&(u[i]=g[i])}return c(e,p,f,0,0,a.current,u)},c.createFactory=function(e){var t=c.createElement.bind(null,e);return t.type=e,t},c.cloneAndReplaceKey=function(e,t){return c(e.type,t,e.ref,e._self,e._source,e._owner,e.props)},c.cloneElement=function(e,t,n){var u,p=i({},e.props),f=e.key,d=e.ref,h=(e._self,e._source,e._owner);if(null!=t){r(t)&&(d=t.ref,h=a.current),o(t)&&(f=""+t.key);var y;e.type&&e.type.defaultProps&&(y=e.type.defaultProps);for(u in t)s.call(t,u)&&!l.hasOwnProperty(u)&&(void 0===t[u]&&void 0!==y?p[u]=y[u]:p[u]=t[u])}var g=arguments.length-2;if(1===g)p.children=n;else if(g>1){for(var v=Array(g),m=0;m<g;m++)v[m]=arguments[m+2];p.children=v}return c(e.type,f,d,0,0,h,p)},c.isValidElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===u},e.exports=c},function(e,t,n){"use strict";function r(e,t,n,r,i,a,s,u){if(o(t),!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,i,a,s,u],p=0;l=new Error(t.replace(/%s/g,function(){return c[p++]})),l.name="Invariant Violation"}throw l.framesToPop=1,l}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";function r(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,r=0;r<t;r++)n+="&args[]="+encodeURIComponent(arguments[r+1]);n+=" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";var o=new Error(n);throw o.name="Invariant Violation",o.framesToPop=1,o}e.exports=r},function(e,t,n){"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}/* | ||
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=18)}([function(e,t,n){"use strict";var r=n(5),o=r;e.exports=o},function(e,t,n){"use strict";function r(e){return void 0!==e.ref}function o(e){return void 0!==e.key}var i=n(4),a=n(10),u=(n(0),n(13),Object.prototype.hasOwnProperty),s=n(11),l={key:!0,ref:!0,__self:!0,__source:!0},c=function(e,t,n,r,o,i,a){var u={$$typeof:s,type:e,key:t,ref:n,props:a,_owner:i};return u};c.createElement=function(e,t,n){var i,s={},p=null,f=null;if(null!=t){r(t)&&(f=t.ref),o(t)&&(p=""+t.key),void 0===t.__self?null:t.__self,void 0===t.__source?null:t.__source;for(i in t)u.call(t,i)&&!l.hasOwnProperty(i)&&(s[i]=t[i])}var d=arguments.length-2;if(1===d)s.children=n;else if(d>1){for(var h=Array(d),y=0;y<d;y++)h[y]=arguments[y+2];s.children=h}if(e&&e.defaultProps){var g=e.defaultProps;for(i in g)void 0===s[i]&&(s[i]=g[i])}return c(e,p,f,0,0,a.current,s)},c.createFactory=function(e){var t=c.createElement.bind(null,e);return t.type=e,t},c.cloneAndReplaceKey=function(e,t){return c(e.type,t,e.ref,e._self,e._source,e._owner,e.props)},c.cloneElement=function(e,t,n){var s,p=i({},e.props),f=e.key,d=e.ref,h=(e._self,e._source,e._owner);if(null!=t){r(t)&&(d=t.ref,h=a.current),o(t)&&(f=""+t.key);var y;e.type&&e.type.defaultProps&&(y=e.type.defaultProps);for(s in t)u.call(t,s)&&!l.hasOwnProperty(s)&&(void 0===t[s]&&void 0!==y?p[s]=y[s]:p[s]=t[s])}var g=arguments.length-2;if(1===g)p.children=n;else if(g>1){for(var v=Array(g),m=0;m<g;m++)v[m]=arguments[m+2];p.children=v}return c(e.type,f,d,0,0,h,p)},c.isValidElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===s},e.exports=c},function(e,t,n){"use strict";function r(e,t,n,r,i,a,u,s){if(o(t),!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,i,a,u,s],p=0;l=new Error(t.replace(/%s/g,function(){return c[p++]})),l.name="Invariant Violation"}throw l.framesToPop=1,l}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";function r(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,r=0;r<t;r++)n+="&args[]="+encodeURIComponent(arguments[r+1]);n+=" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";var o=new Error(n);throw o.name="Invariant Violation",o.framesToPop=1,o}e.exports=r},function(e,t,n){"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}/* | ||
object-assign | ||
@@ -6,2 +6,2 @@ (c) Sindre Sorhus | ||
*/ | ||
var o=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,s,u=r(e),l=1;l<arguments.length;l++){n=Object(arguments[l]);for(var c in n)i.call(n,c)&&(u[c]=n[c]);if(o){s=o(n);for(var p=0;p<s.length;p++)a.call(n,s[p])&&(u[s[p]]=n[s[p]])}}return u}},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t,n){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=a,this.updater=n||i}var o=n(3),i=n(8),a=(n(13),n(6));n(2),n(0);r.prototype.isReactComponent={},r.prototype.setState=function(e,t){"object"!=typeof e&&"function"!=typeof e&&null!=e&&o("85"),this.updater.enqueueSetState(this,e),t&&this.updater.enqueueCallback(this,t,"setState")},r.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this),e&&this.updater.enqueueCallback(this,e,"forceUpdate")};e.exports=r},function(e,t,n){"use strict";var r=(n(0),{isMounted:function(e){return!1},enqueueCallback:function(e,t){},enqueueForceUpdate:function(e){},enqueueReplaceState:function(e,t){},enqueueSetState:function(e,t){}});e.exports=r},function(e,t,n){"use strict";e.exports=n(21)},function(e,t,n){"use strict";var r={current:null};e.exports=r},function(e,t,n){"use strict";var r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103;e.exports=r},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t,n){"use strict";var r=!1;e.exports=r},function(e,t,n){"use strict";function r(e){var t=e&&(o&&e[o]||e[i]);if("function"==typeof t)return t}var o="function"==typeof Symbol&&Symbol.iterator,i="@@iterator";e.exports=r},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{!r&&s.return&&s.return()}finally{if(o)throw i}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=n(9),c=r(l),p=n(17),f=r(p),d=function(e){function t(e){o(this,t);var n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={clickX:0,clickY:0,left:0,top:0,initialLeftOffset:0,initialTopOffset:0,clicked:!1,dragging:!1,dragged:!1},n.handleMouseDown=n.handleMouseDown.bind(n),n.handleTouchStart=n.handleTouchStart.bind(n),n.startDrag=n.startDrag.bind(n),n.handleMouseMove=n.handleMouseMove.bind(n),n.handleTouchMove=n.handleTouchMove.bind(n),n.drag=n.drag.bind(n),n.handleMouseUp=n.handleMouseUp.bind(n),n.handleTouchEnd=n.handleTouchEnd.bind(n),n.drop=n.drop.bind(n),n.setGhostElem=n.setGhostElem.bind(n),n.checkForOffsetChanges=n.checkForOffsetChanges.bind(n),n.setDraggableFalseOnChildren=n.setDraggableFalseOnChildren.bind(n),n.dragElem=null,n.ghostElem=null,n.containerElem=null,n.currentTarget=null,n.prevTarget=null,n}return a(t,e),u(t,[{key:"componentDidMount",value:function(){if(this.dragElem=this.ghostElem||this.containerElem,this.props.dragHandleClassName)for(var e=this.containerElem.getElementsByClassName(this.props.dragHandleClassName),t=0;t<e.length;t+=1)this.addListeners(e[t]);else this.addListeners(this.containerElem)}},{key:"setGhostElem",value:function(e){this.ghostElem=e}},{key:"addListeners",value:function(e){var t=this;e.addEventListener("mousedown",function(e){t.handleMouseDown(e)},!1),e.addEventListener("touchstart",function(e){t.handleTouchStart(e)},!1)}},{key:"buildCustomEvent",value:function(e){var t=void 0;return"function"!=typeof window.CustomEvent?(t=document.createEvent("CustomEvent"),t.initCustomEvent(e,!0,!0,{})):t=new CustomEvent(e,{bubbles:!0,cancelable:!0}),Object.assign(t,{dragData:this.props.dragData,dragElem:this.dragElem,sourceElem:this.containerElem}),t}},{key:"setCurrentTarget",value:function(e,t){this.dragElem.style.zIndex=-1;var n=document.elementFromPoint(e,t)||document.body;this.dragElem.style.zIndex=this.props.zIndex,this.currentTarget=this.dragElem.contains(n)?document.body:n}},{key:"generateEnterLeaveEvents",value:function(e,t){var n=this.props.targetKey;this.setCurrentTarget(e,t),this.currentTarget!==this.prevTarget&&(this.prevTarget&&this.prevTarget.dispatchEvent(this.buildCustomEvent(n+"DragLeave")),this.currentTarget&&this.currentTarget.dispatchEvent(this.buildCustomEvent(n+"DragEnter"))),this.prevTarget=this.currentTarget}},{key:"generateDropEvent",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget.dispatchEvent(this.buildCustomEvent(this.props.targetKey+"Drop"))}},{key:"handleMouseDown",value:function(e){1!==e.buttons||this.props.noDragging||(document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp),this.startDrag(e.clientX,e.clientY))}},{key:"handleTouchStart",value:function(e){this.props.noDragging||(e.preventDefault(),document.addEventListener("touchmove",this.handleTouchMove),document.addEventListener("touchend",this.handleTouchEnd),this.startDrag(e.targetTouches[0].pageX,e.targetTouches[0].pageY))}},{key:"startDrag",value:function(e,t){document.addEventListener(this.props.targetKey+"Dropped",this.props.onDrop),this.setState({clicked:!0,clickX:e-this.state.left,clickY:t-this.state.top,initialLeftOffset:this.state.dragged?this.state.initialLeftOffset:this.containerElem.offsetLeft,initialTopOffset:this.state.dragged?this.state.initialTopOffset:this.containerElem.offsetTop}),this.props.onDragStart(this.props.dragData)}},{key:"handleMouseMove",value:function(e){this.props.noDragging||(e.preventDefault(),this.state.clicked&&this.drag(e.clientX,e.clientY))}},{key:"handleTouchMove",value:function(e){this.props.noDragging||(e.preventDefault(),this.state.clicked&&this.drag(e.targetTouches[0].pageX,e.targetTouches[0].pageY))}},{key:"drag",value:function(e,t){this.generateEnterLeaveEvents(e,t);var n=this.checkForOffsetChanges(),r=s(n,2),o=r[0],i=r[1],a={dragging:!0};this.props.yOnly||(a.left=o+e-this.state.clickX),this.props.xOnly||(a.top=i+t-this.state.clickY),this.setState(a),this.props.onDrag(this.props.dragData,this.currentTarget,e,t)}},{key:"handleMouseUp",value:function(e){this.setState({clicked:!1}),this.state.dragging&&(document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.drop(e.clientX,e.clientY))}},{key:"handleTouchEnd",value:function(e){this.setState({clicked:!1}),this.state.dragging&&(document.removeEventListener("touchmove",this.handleTouchMove),document.removeEventListener("touchend",this.handleTouchEnd),this.drop(e.changedTouches[0].pageX,e.changedTouches[0].pageY))}},{key:"drop",value:function(e,t){this.generateDropEvent(e,t),this.containerElem&&(this.props.returnToBase?this.setState({left:0,top:0,dragging:!1}):this.setState({dragged:!0,dragging:!1})),this.props.onDragEnd(this.props.dragData,this.currentTarget,e,t)}},{key:"checkForOffsetChanges",value:function(){var e=void 0,t=void 0;return this.props.customDragElement||this.props.dragClone?(e=this.state.initialLeftOffset-this.containerElem.offsetLeft,t=this.state.initialTopOffset-this.containerElem.offsetTop):(e=this.state.initialLeftOffset+this.state.left-this.containerElem.offsetLeft,t=this.state.initialTopOffset+this.state.top-this.containerElem.offsetTop),[e,t]}},{key:"setDraggableFalseOnChildren",value:function(){var e=c.default.Children.only(this.props.children);return c.default.cloneElement(e,{draggable:"false"})}},{key:"render",value:function(){var e=this,t={position:"relative",display:"inline-block"},n="";if(this.props.customDragElement||this.props.dragClone){var r=void 0;r=this.props.customDragElement?this.props.customDragElement:this.setDraggableFalseOnChildren(),n=c.default.createElement(f.default,{dragging:this.state.dragging,left:this.state.left,top:this.state.top,zIndex:this.props.zIndex,setGhostElem:this.setGhostElem},c.default.createElement("div",{style:{opacity:this.props.dragCloneOpacity,cursor:"move"}},r))}else t.left=this.state.left,t.top=this.state.top,t.zIndex=this.state.dragging||this.state.dragged?this.props.zIndex:"inherit",t.cursor=this.state.dragging?"move":"pointer";return c.default.createElement("div",{style:t,ref:function(t){e.containerElem=t}},this.setDraggableFalseOnChildren(),n)}}]),t}(c.default.Component);d.propTypes={children:c.default.PropTypes.node.isRequired,targetKey:c.default.PropTypes.string,customDragElement:c.default.PropTypes.oneOfType([c.default.PropTypes.string,c.default.PropTypes.node]),dragClone:c.default.PropTypes.bool,dragCloneOpacity:c.default.PropTypes.number,dragData:c.default.PropTypes.object,dragHandleClassName:c.default.PropTypes.string,noDragging:c.default.PropTypes.bool,onDrop:c.default.PropTypes.func,onDrag:c.default.PropTypes.func,onDragEnd:c.default.PropTypes.func,onDragStart:c.default.PropTypes.func,returnToBase:c.default.PropTypes.bool,xOnly:c.default.PropTypes.bool,yOnly:c.default.PropTypes.bool,zIndex:c.default.PropTypes.number},d.defaultProps={targetKey:"ddc",customDragElement:null,dragClone:!1,dragCloneOpacity:.9,dragData:{},dragHandleClassName:"",onDragStart:function(){},onDrag:function(){},onDragEnd:function(){},onDrop:function(){},noDragging:!1,returnToBase:!1,xOnly:!1,yOnly:!1,zIndex:1e3},t.default=d},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=n(9),u=function(e){return e&&e.__esModule?e:{default:e}}(s),l=function(e){function t(e){r(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.elem=null,n.handleDrop=n.handleDrop.bind(n),n}return i(t,e),a(t,[{key:"componentDidMount",value:function(){var e=this;this.elem.addEventListener(this.props.targetKey+"DragEnter",function(t){e.props.onDragEnter(t)},!1),this.elem.addEventListener(this.props.targetKey+"DragLeave",function(t){e.props.onDragLeave(t)},!1),this.elem.addEventListener(this.props.targetKey+"Drop",function(t){e.handleDrop(t)},!1)}},{key:"createEvent",value:function(e,t){var n=void 0;return"function"!=typeof window.CustomEvent?(n=document.createEvent("CustomEvent"),n.initCustomEvent(e,!0,!0,{})):n=new CustomEvent(e,{bubbles:!0,cancelable:!0}),Object.assign(n,t),n}},{key:"handleDrop",value:function(e){var t=this.createEvent(this.props.targetKey+"Dropped",{dropElem:this.elem,dropData:this.props.dropData});e.sourceElem.dispatchEvent(t),this.props.onHit(e)}},{key:"render",value:function(){var e=this;return u.default.createElement("span",{ref:function(t){e.elem=t}},this.props.children)}}]),t}(u.default.Component);l.propTypes={children:u.default.PropTypes.node.isRequired,targetKey:u.default.PropTypes.string,dropData:u.default.PropTypes.object,onDragEnter:u.default.PropTypes.func,onDragLeave:u.default.PropTypes.func,onHit:u.default.PropTypes.func},l.defaultProps={targetKey:"ddc",onDragEnter:function(){},onDragLeave:function(){},onHit:function(){return function(){}},dropData:{}},t.default=l},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=n(9),u=function(e){return e&&e.__esModule?e:{default:e}}(s),l=function(e){function t(){return r(this,t),o(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),a(t,[{key:"componentDidMount",value:function(){this.props.setGhostElem(this.ghostElem)}},{key:"render",value:function(){var e=this,t={position:"absolute",zIndex:this.props.zIndex,left:this.props.left,top:this.props.top,display:this.props.dragging?"block":"none"};return u.default.createElement("div",{style:t,ref:function(t){e.ghostElem=t}},this.props.children)}}]),t}(u.default.Component);l.propTypes={children:u.default.PropTypes.node.isRequired,setGhostElem:u.default.PropTypes.func.isRequired,dragging:u.default.PropTypes.bool.isRequired,left:u.default.PropTypes.number.isRequired,top:u.default.PropTypes.number.isRequired,zIndex:u.default.PropTypes.number.isRequired},t.default=l},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var o=n(15),i=r(o),a=n(16),s=r(a);e.exports={DragDropContainer:i.default,DropTarget:s.default}},function(e,t,n){"use strict";function r(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,function(e){return t[e]})}function o(e){var t={"=0":"=","=2":":"};return(""+("."===e[0]&&"$"===e[1]?e.substring(2):e.substring(1))).replace(/(=0|=2)/g,function(e){return t[e]})}var i={escape:r,unescape:o};e.exports=i},function(e,t,n){"use strict";var r=n(3),o=(n(2),function(e){var t=this;if(t.instancePool.length){var n=t.instancePool.pop();return t.call(n,e),n}return new t(e)}),i=function(e,t){var n=this;if(n.instancePool.length){var r=n.instancePool.pop();return n.call(r,e,t),r}return new n(e,t)},a=function(e,t,n){var r=this;if(r.instancePool.length){var o=r.instancePool.pop();return r.call(o,e,t,n),o}return new r(e,t,n)},s=function(e,t,n,r){var o=this;if(o.instancePool.length){var i=o.instancePool.pop();return o.call(i,e,t,n,r),i}return new o(e,t,n,r)},u=function(e){var t=this;e instanceof t||r("25"),e.destructor(),t.instancePool.length<t.poolSize&&t.instancePool.push(e)},l=o,c=function(e,t){var n=e;return n.instancePool=[],n.getPooled=t||l,n.poolSize||(n.poolSize=10),n.release=u,n},p={addPoolingTo:c,oneArgumentPooler:o,twoArgumentPooler:i,threeArgumentPooler:a,fourArgumentPooler:s};e.exports=p},function(e,t,n){"use strict";var r=n(4),o=n(22),i=n(7),a=n(27),s=n(23),u=n(24),l=n(1),c=n(25),p=n(28),f=n(29),d=(n(0),l.createElement),h=l.createFactory,y=l.cloneElement,g=r,v={Children:{map:o.map,forEach:o.forEach,count:o.count,toArray:o.toArray,only:f},Component:i,PureComponent:a,createElement:d,cloneElement:y,isValidElement:l.isValidElement,PropTypes:c,createClass:s.createClass,createFactory:h,createMixin:function(e){return e},DOM:u,version:p,__spread:g};e.exports=v},function(e,t,n){"use strict";function r(e){return(""+e).replace(E,"$&/")}function o(e,t){this.func=e,this.context=t,this.count=0}function i(e,t,n){var r=e.func,o=e.context;r.call(o,t,e.count++)}function a(e,t,n){if(null==e)return e;var r=o.getPooled(t,n);v(e,i,r),o.release(r)}function s(e,t,n,r){this.result=e,this.keyPrefix=t,this.func=n,this.context=r,this.count=0}function u(e,t,n){var o=e.result,i=e.keyPrefix,a=e.func,s=e.context,u=a.call(s,t,e.count++);Array.isArray(u)?l(u,o,n,g.thatReturnsArgument):null!=u&&(y.isValidElement(u)&&(u=y.cloneAndReplaceKey(u,i+(!u.key||t&&t.key===u.key?"":r(u.key)+"/")+n)),o.push(u))}function l(e,t,n,o,i){var a="";null!=n&&(a=r(n)+"/");var l=s.getPooled(t,a,o,i);v(e,u,l),s.release(l)}function c(e,t,n){if(null==e)return e;var r=[];return l(e,r,null,t,n),r}function p(e,t,n){return null}function f(e,t){return v(e,p,null)}function d(e){var t=[];return l(e,t,null,g.thatReturnsArgument),t}var h=n(20),y=n(1),g=n(5),v=n(30),m=h.twoArgumentPooler,b=h.fourArgumentPooler,E=/\/+/g;o.prototype.destructor=function(){this.func=null,this.context=null,this.count=0},h.addPoolingTo(o,m),s.prototype.destructor=function(){this.result=null,this.keyPrefix=null,this.func=null,this.context=null,this.count=0},h.addPoolingTo(s,b);var P={forEach:a,map:c,mapIntoWithKeyPrefixInternal:l,count:f,toArray:d};e.exports=P},function(e,t,n){"use strict";function r(e){return e}function o(e,t){var n=E.hasOwnProperty(t)?E[t]:null;D.hasOwnProperty(t)&&"OVERRIDE_BASE"!==n&&f("73",t),e&&"DEFINE_MANY"!==n&&"DEFINE_MANY_MERGED"!==n&&f("74",t)}function i(e,t){if(t){"function"==typeof t&&f("75"),y.isValidElement(t)&&f("76");var n=e.prototype,r=n.__reactAutoBindPairs;t.hasOwnProperty(m)&&P.mixins(e,t.mixins);for(var i in t)if(t.hasOwnProperty(i)&&i!==m){var a=t[i],s=n.hasOwnProperty(i);if(o(s,i),P.hasOwnProperty(i))P[i](e,a);else{var c=E.hasOwnProperty(i),p="function"==typeof a,d=p&&!c&&!s&&t.autobind!==!1;if(d)r.push(i,a),n[i]=a;else if(s){var h=E[i];(!c||"DEFINE_MANY_MERGED"!==h&&"DEFINE_MANY"!==h)&&f("77",h,i),"DEFINE_MANY_MERGED"===h?n[i]=u(n[i],a):"DEFINE_MANY"===h&&(n[i]=l(n[i],a))}else n[i]=a}}}else;}function a(e,t){if(t)for(var n in t){var r=t[n];if(t.hasOwnProperty(n)){var o=n in P;o&&f("78",n);var i=n in e;i&&f("79",n),e[n]=r}}}function s(e,t){e&&t&&"object"==typeof e&&"object"==typeof t||f("80");for(var n in t)t.hasOwnProperty(n)&&(void 0!==e[n]&&f("81",n),e[n]=t[n]);return e}function u(e,t){return function(){var n=e.apply(this,arguments),r=t.apply(this,arguments);if(null==n)return r;if(null==r)return n;var o={};return s(o,n),s(o,r),o}}function l(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}}function c(e,t){var n=t.bind(e);return n}function p(e){for(var t=e.__reactAutoBindPairs,n=0;n<t.length;n+=2){var r=t[n],o=t[n+1];e[r]=c(e,o)}}var f=n(3),d=n(4),h=n(7),y=n(1),g=(n(12),n(8)),v=n(6),m=(n(2),n(0),"mixins"),b=[],E={mixins:"DEFINE_MANY",statics:"DEFINE_MANY",propTypes:"DEFINE_MANY",contextTypes:"DEFINE_MANY",childContextTypes:"DEFINE_MANY",getDefaultProps:"DEFINE_MANY_MERGED",getInitialState:"DEFINE_MANY_MERGED",getChildContext:"DEFINE_MANY_MERGED",render:"DEFINE_ONCE",componentWillMount:"DEFINE_MANY",componentDidMount:"DEFINE_MANY",componentWillReceiveProps:"DEFINE_MANY",shouldComponentUpdate:"DEFINE_ONCE",componentWillUpdate:"DEFINE_MANY",componentDidUpdate:"DEFINE_MANY",componentWillUnmount:"DEFINE_MANY",updateComponent:"OVERRIDE_BASE"},P={displayName:function(e,t){e.displayName=t},mixins:function(e,t){if(t)for(var n=0;n<t.length;n++)i(e,t[n])},childContextTypes:function(e,t){e.childContextTypes=d({},e.childContextTypes,t)},contextTypes:function(e,t){e.contextTypes=d({},e.contextTypes,t)},getDefaultProps:function(e,t){e.getDefaultProps?e.getDefaultProps=u(e.getDefaultProps,t):e.getDefaultProps=t},propTypes:function(e,t){e.propTypes=d({},e.propTypes,t)},statics:function(e,t){a(e,t)},autobind:function(){}},D={replaceState:function(e,t){this.updater.enqueueReplaceState(this,e),t&&this.updater.enqueueCallback(this,t,"replaceState")},isMounted:function(){return this.updater.isMounted(this)}},T=function(){};d(T.prototype,h.prototype,D);var O={createClass:function(e){var t=r(function(e,n,r){this.__reactAutoBindPairs.length&&p(this),this.props=e,this.context=n,this.refs=v,this.updater=r||g,this.state=null;var o=this.getInitialState?this.getInitialState():null;("object"!=typeof o||Array.isArray(o))&&f("82",t.displayName||"ReactCompositeComponent"),this.state=o});t.prototype=new T,t.prototype.constructor=t,t.prototype.__reactAutoBindPairs=[],b.forEach(i.bind(null,t)),i(t,e),t.getDefaultProps&&(t.defaultProps=t.getDefaultProps()),t.prototype.render||f("83");for(var n in E)t.prototype[n]||(t.prototype[n]=null);return t},injection:{injectMixin:function(e){b.push(e)}}};e.exports=O},function(e,t,n){"use strict";var r=n(1),o=r.createFactory,i={a:o("a"),abbr:o("abbr"),address:o("address"),area:o("area"),article:o("article"),aside:o("aside"),audio:o("audio"),b:o("b"),base:o("base"),bdi:o("bdi"),bdo:o("bdo"),big:o("big"),blockquote:o("blockquote"),body:o("body"),br:o("br"),button:o("button"),canvas:o("canvas"),caption:o("caption"),cite:o("cite"),code:o("code"),col:o("col"),colgroup:o("colgroup"),data:o("data"),datalist:o("datalist"),dd:o("dd"),del:o("del"),details:o("details"),dfn:o("dfn"),dialog:o("dialog"),div:o("div"),dl:o("dl"),dt:o("dt"),em:o("em"),embed:o("embed"),fieldset:o("fieldset"),figcaption:o("figcaption"),figure:o("figure"),footer:o("footer"),form:o("form"),h1:o("h1"),h2:o("h2"),h3:o("h3"),h4:o("h4"),h5:o("h5"),h6:o("h6"),head:o("head"),header:o("header"),hgroup:o("hgroup"),hr:o("hr"),html:o("html"),i:o("i"),iframe:o("iframe"),img:o("img"),input:o("input"),ins:o("ins"),kbd:o("kbd"),keygen:o("keygen"),label:o("label"),legend:o("legend"),li:o("li"),link:o("link"),main:o("main"),map:o("map"),mark:o("mark"),menu:o("menu"),menuitem:o("menuitem"),meta:o("meta"),meter:o("meter"),nav:o("nav"),noscript:o("noscript"),object:o("object"),ol:o("ol"),optgroup:o("optgroup"),option:o("option"),output:o("output"),p:o("p"),param:o("param"),picture:o("picture"),pre:o("pre"),progress:o("progress"),q:o("q"),rp:o("rp"),rt:o("rt"),ruby:o("ruby"),s:o("s"),samp:o("samp"),script:o("script"),section:o("section"),select:o("select"),small:o("small"),source:o("source"),span:o("span"),strong:o("strong"),style:o("style"),sub:o("sub"),summary:o("summary"),sup:o("sup"),table:o("table"),tbody:o("tbody"),td:o("td"),textarea:o("textarea"),tfoot:o("tfoot"),th:o("th"),thead:o("thead"),time:o("time"),title:o("title"),tr:o("tr"),track:o("track"),u:o("u"),ul:o("ul"),var:o("var"),video:o("video"),wbr:o("wbr"),circle:o("circle"),clipPath:o("clipPath"),defs:o("defs"),ellipse:o("ellipse"),g:o("g"),image:o("image"),line:o("line"),linearGradient:o("linearGradient"),mask:o("mask"),path:o("path"),pattern:o("pattern"),polygon:o("polygon"),polyline:o("polyline"),radialGradient:o("radialGradient"),rect:o("rect"),stop:o("stop"),svg:o("svg"),text:o("text"),tspan:o("tspan")};e.exports=i},function(e,t,n){"use strict";function r(e,t){return e===t?0!==e||1/e==1/t:e!==e&&t!==t}function o(e){this.message=e,this.stack=""}function i(e){function t(t,n,r,i,a,s,u){i=i||T,s=s||r;if(null==n[r]){var l=b[a];return t?new o(null===n[r]?"The "+l+" `"+s+"` is marked as required in `"+i+"`, but its value is `null`.":"The "+l+" `"+s+"` is marked as required in `"+i+"`, but its value is `undefined`."):null}return e(n,r,i,a,s)}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function a(e){function t(t,n,r,i,a,s){var u=t[n];if(y(u)!==e)return new o("Invalid "+b[i]+" `"+a+"` of type `"+g(u)+"` supplied to `"+r+"`, expected `"+e+"`.");return null}return i(t)}function s(e){function t(t,n,r,i,a){if("function"!=typeof e)return new o("Property `"+a+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var s=t[n];if(!Array.isArray(s)){return new o("Invalid "+b[i]+" `"+a+"` of type `"+y(s)+"` supplied to `"+r+"`, expected an array.")}for(var u=0;u<s.length;u++){var l=e(s,u,r,i,a+"["+u+"]",E);if(l instanceof Error)return l}return null}return i(t)}function u(e){function t(t,n,r,i,a){if(!(t[n]instanceof e)){var s=b[i],u=e.name||T;return new o("Invalid "+s+" `"+a+"` of type `"+v(t[n])+"` supplied to `"+r+"`, expected instance of `"+u+"`.")}return null}return i(t)}function l(e){function t(t,n,i,a,s){for(var u=t[n],l=0;l<e.length;l++)if(r(u,e[l]))return null;return new o("Invalid "+b[a]+" `"+s+"` of value `"+u+"` supplied to `"+i+"`, expected one of "+JSON.stringify(e)+".")}return Array.isArray(e)?i(t):P.thatReturnsNull}function c(e){function t(t,n,r,i,a){if("function"!=typeof e)return new o("Property `"+a+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var s=t[n],u=y(s);if("object"!==u){return new o("Invalid "+b[i]+" `"+a+"` of type `"+u+"` supplied to `"+r+"`, expected an object.")}for(var l in s)if(s.hasOwnProperty(l)){var c=e(s,l,r,i,a+"."+l,E);if(c instanceof Error)return c}return null}return i(t)}function p(e){function t(t,n,r,i,a){for(var s=0;s<e.length;s++){if(null==(0,e[s])(t,n,r,i,a,E))return null}return new o("Invalid "+b[i]+" `"+a+"` supplied to `"+r+"`.")}return Array.isArray(e)?i(t):P.thatReturnsNull}function f(e){function t(t,n,r,i,a){var s=t[n],u=y(s);if("object"!==u){return new o("Invalid "+b[i]+" `"+a+"` of type `"+u+"` supplied to `"+r+"`, expected `object`.")}for(var l in e){var c=e[l];if(c){var p=c(s,l,r,i,a+"."+l,E);if(p)return p}}return null}return i(t)}function d(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(d);if(null===e||m.isValidElement(e))return!0;var t=D(e);if(!t)return!1;var n,r=t.call(e);if(t!==e.entries){for(;!(n=r.next()).done;)if(!d(n.value))return!1}else for(;!(n=r.next()).done;){var o=n.value;if(o&&!d(o[1]))return!1}return!0;default:return!1}}function h(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function y(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":h(t,e)?"symbol":t}function g(e){var t=y(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function v(e){return e.constructor&&e.constructor.name?e.constructor.name:T}var m=n(1),b=n(12),E=n(26),P=n(5),D=n(14),T=(n(0),"<<anonymous>>"),O={array:a("array"),bool:a("boolean"),func:a("function"),number:a("number"),object:a("object"),string:a("string"),symbol:a("symbol"),any:function(){return i(P.thatReturns(null))}(),arrayOf:s,element:function(){function e(e,t,n,r,i){var a=e[t];if(!m.isValidElement(a)){return new o("Invalid "+b[r]+" `"+i+"` of type `"+y(a)+"` supplied to `"+n+"`, expected a single ReactElement.")}return null}return i(e)}(),instanceOf:u,node:function(){function e(e,t,n,r,i){if(!d(e[t])){return new o("Invalid "+b[r]+" `"+i+"` supplied to `"+n+"`, expected a ReactNode.")}return null}return i(e)}(),objectOf:c,oneOf:l,oneOfType:p,shape:f};o.prototype=Error.prototype,e.exports=O},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=u,this.updater=n||s}function o(){}var i=n(4),a=n(7),s=n(8),u=n(6);o.prototype=a.prototype,r.prototype=new o,r.prototype.constructor=r,i(r.prototype,a.prototype),r.prototype.isPureReactComponent=!0,e.exports=r},function(e,t,n){"use strict";e.exports="15.4.2"},function(e,t,n){"use strict";function r(e){return i.isValidElement(e)||o("143"),e}var o=n(3),i=n(1);n(2);e.exports=r},function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?l.escape(e.key):t.toString(36)}function o(e,t,n,i){var f=typeof e;if("undefined"!==f&&"boolean"!==f||(e=null),null===e||"string"===f||"number"===f||"object"===f&&e.$$typeof===s)return n(i,e,""===t?c+r(e,0):t),1;var d,h,y=0,g=""===t?c:t+p;if(Array.isArray(e))for(var v=0;v<e.length;v++)d=e[v],h=g+r(d,v),y+=o(d,h,n,i);else{var m=u(e);if(m){var b,E=m.call(e);if(m!==e.entries)for(var P=0;!(b=E.next()).done;)d=b.value,h=g+r(d,P++),y+=o(d,h,n,i);else for(;!(b=E.next()).done;){var D=b.value;D&&(d=D[1],h=g+l.escape(D[0])+p+r(d,0),y+=o(d,h,n,i))}}else if("object"===f){var T="",O=String(e);a("31","[object Object]"===O?"object with keys {"+Object.keys(e).join(", ")+"}":O,T)}}return y}function i(e,t,n){return null==e?0:o(e,"",t,n)}var a=n(3),s=(n(10),n(11)),u=n(14),l=(n(2),n(19)),c=(n(0),"."),p=":";e.exports=i}])}); | ||
var o=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,u,s=r(e),l=1;l<arguments.length;l++){n=Object(arguments[l]);for(var c in n)i.call(n,c)&&(s[c]=n[c]);if(o){u=o(n);for(var p=0;p<u.length;p++)a.call(n,u[p])&&(s[u[p]]=n[u[p]])}}return s}},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t,n){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=a,this.updater=n||i}var o=n(3),i=n(8),a=(n(13),n(6));n(2),n(0);r.prototype.isReactComponent={},r.prototype.setState=function(e,t){"object"!=typeof e&&"function"!=typeof e&&null!=e&&o("85"),this.updater.enqueueSetState(this,e),t&&this.updater.enqueueCallback(this,t,"setState")},r.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this),e&&this.updater.enqueueCallback(this,e,"forceUpdate")};e.exports=r},function(e,t,n){"use strict";var r=(n(0),{isMounted:function(e){return!1},enqueueCallback:function(e,t){},enqueueForceUpdate:function(e){},enqueueReplaceState:function(e,t){},enqueueSetState:function(e,t){}});e.exports=r},function(e,t,n){"use strict";e.exports=n(21)},function(e,t,n){"use strict";var r={current:null};e.exports=r},function(e,t,n){"use strict";var r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103;e.exports=r},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t,n){"use strict";var r=!1;e.exports=r},function(e,t,n){"use strict";function r(e){var t=e&&(o&&e[o]||e[i]);if("function"==typeof t)return t}var o="function"==typeof Symbol&&Symbol.iterator,i="@@iterator";e.exports=r},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function u(e){return 1===(e.buttons||e.which||e.button)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(r=(a=u.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{!r&&u.return&&u.return()}finally{if(o)throw i}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=n(9),p=r(c),f=n(17),d=r(f),h=function(e){function t(e){o(this,t);var n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.setGhostElem=function(e){n.ghostElem=e},n.addListeners=function(e){e.addEventListener("mousedown",function(e){n.handleMouseDown(e)},!1),e.addEventListener("touchstart",function(e){n.handleTouchStart(e)},!1)},n.buildCustomEvent=function(e){var t=void 0;return"function"!=typeof window.CustomEvent?(t=document.createEvent("CustomEvent"),t.initCustomEvent(e,!0,!0,{})):t=new CustomEvent(e,{bubbles:!0,cancelable:!0}),Object.assign(t,{dragData:n.props.dragData,dragElem:n.dragElem,sourceElem:n.containerElem}),t},n.setCurrentTarget=function(e,t){n.dragElem.style.zIndex=-1;var r=document.elementFromPoint(e,t)||document.body;n.dragElem.style.zIndex=n.props.zIndex,n.currentTarget=n.dragElem.contains(r)?document.body:r},n.generateEnterLeaveEvents=function(e,t){var r=n.props.targetKey;n.setCurrentTarget(e,t),n.currentTarget!==n.prevTarget&&(n.prevTarget&&n.prevTarget.dispatchEvent(n.buildCustomEvent(r+"DragLeave")),n.currentTarget&&n.currentTarget.dispatchEvent(n.buildCustomEvent(r+"DragEnter"))),n.prevTarget=n.currentTarget},n.generateDropEvent=function(e,t){n.setCurrentTarget(e,t);var r=n.buildCustomEvent(n.props.targetKey+"Drop");n.currentTarget.dispatchEvent(r)},n.handleMouseDown=function(e){u(e)&&!n.props.noDragging&&(document.addEventListener("mousemove",n.handleMouseMove),document.addEventListener("mouseup",n.handleMouseUp),n.startDrag(e.clientX,e.clientY))},n.handleTouchStart=function(e){n.props.noDragging||(e.preventDefault(),document.addEventListener("touchmove",n.handleTouchMove),document.addEventListener("touchend",n.handleTouchEnd),n.startDrag(e.targetTouches[0].clientX,e.targetTouches[0].clientY))},n.startDrag=function(e,t){document.addEventListener(n.props.targetKey+"Dropped",n.props.onDrop),n.setState({clicked:!0,clickX:e-n.state.left,clickY:t-n.state.top,initialLeftOffset:n.state.dragged?n.state.initialLeftOffset:n.containerElem.offsetLeft,initialTopOffset:n.state.dragged?n.state.initialTopOffset:n.containerElem.offsetTop}),n.props.onDragStart(n.props.dragData)},n.handleMouseMove=function(e){n.props.noDragging||(e.preventDefault(),n.state.clicked&&n.drag(e.clientX,e.clientY))},n.handleTouchMove=function(e){n.props.noDragging||(e.preventDefault(),n.state.clicked&&n.drag(e.targetTouches[0].clientX,e.targetTouches[0].clientY))},n.drag=function(e,t){n.generateEnterLeaveEvents(e,t);var r=n.checkForOffsetChanges(),o=s(r,2),i=o[0],a=o[1],u={dragging:!0};n.props.yOnly||(u.left=i+e-n.state.clickX),n.props.xOnly||(u.top=a+t-n.state.clickY),n.setState(u),n.props.onDrag(n.props.dragData,n.currentTarget,e,t)},n.handleMouseUp=function(e){n.setState({clicked:!1}),n.state.dragging&&(document.removeEventListener("mousemove",n.handleMouseMove),document.removeEventListener("mouseup",n.handleMouseUp),n.drop(e.clientX,e.clientY))},n.handleTouchEnd=function(e){n.setState({clicked:!1}),n.state.dragging&&(document.removeEventListener("touchmove",n.handleTouchMove),document.removeEventListener("touchend",n.handleTouchEnd),n.drop(e.changedTouches[0].clientX,e.changedTouches[0].clientY))},n.drop=function(e,t){document.removeEventListener(n.props.targetKey+"Dropped",n.handleDrop),n.generateDropEvent(e,t),n.containerElem&&(n.props.returnToBase?n.setState({left:0,top:0,dragging:!1}):n.setState({dragged:!0,dragging:!1})),n.props.onDragEnd(n.props.dragData,n.currentTarget,e,t)},n.checkForOffsetChanges=function(){var e=void 0,t=void 0;return n.props.customDragElement||n.props.dragClone?(e=n.state.initialLeftOffset-n.containerElem.offsetLeft,t=n.state.initialTopOffset-n.containerElem.offsetTop):(e=n.state.initialLeftOffset+n.state.left-n.containerElem.offsetLeft,t=n.state.initialTopOffset+n.state.top-n.containerElem.offsetTop),[e,t]},n.state={clickX:0,clickY:0,left:0,top:0,initialLeftOffset:0,initialTopOffset:0,clicked:!1,dragging:!1,dragged:!1},n.dragElem=null,n.ghostElem=null,n.containerElem=null,n.currentTarget=null,n.prevTarget=null,n}return a(t,e),l(t,[{key:"componentDidMount",value:function(){this.dragElem=this.ghostElem||this.containerElem;for(var e=this.dragElem.getElementsByTagName("IMG"),t=0;t<e.length;t+=1)e[t].setAttribute("draggable","false");if(this.props.dragHandleClassName)for(var n=this.containerElem.getElementsByClassName(this.props.dragHandleClassName),r=0;r<n.length;r+=1)this.addListeners(n[r]);else this.addListeners(this.containerElem)}},{key:"render",value:function(){var e=this,t={position:"relative",display:"inline-block"},n="";if(this.props.customDragElement||this.props.dragClone){var r=void 0;r=this.props.customDragElement?this.props.customDragElement:this.props.children,n=p.default.createElement(d.default,{dragging:this.state.dragging,left:this.state.left,top:this.state.top,zIndex:this.props.zIndex,setGhostElem:this.setGhostElem},p.default.createElement("div",{style:{opacity:this.props.dragCloneOpacity,cursor:"move"}},r))}else t.left=this.state.left,t.top=this.state.top,t.zIndex=this.state.dragging||this.state.dragged?this.props.zIndex:"inherit",t.cursor=this.state.dragging?"move":"pointer";return p.default.createElement("div",{style:t,ref:function(t){e.containerElem=t}},this.props.children,n)}}]),t}(p.default.Component);h.propTypes={children:p.default.PropTypes.node.isRequired,targetKey:p.default.PropTypes.string,customDragElement:p.default.PropTypes.oneOfType([p.default.PropTypes.string,p.default.PropTypes.node]),dragClone:p.default.PropTypes.bool,dragCloneOpacity:p.default.PropTypes.number,dragData:p.default.PropTypes.object,dragHandleClassName:p.default.PropTypes.string,noDragging:p.default.PropTypes.bool,onDrop:p.default.PropTypes.func,onDrag:p.default.PropTypes.func,onDragEnd:p.default.PropTypes.func,onDragStart:p.default.PropTypes.func,returnToBase:p.default.PropTypes.bool,xOnly:p.default.PropTypes.bool,yOnly:p.default.PropTypes.bool,zIndex:p.default.PropTypes.number},h.defaultProps={targetKey:"ddc",customDragElement:null,dragClone:!1,dragCloneOpacity:.9,dragData:{},dragHandleClassName:"",onDragStart:function(){},onDrag:function(){},onDragEnd:function(){},onDrop:function(){},noDragging:!1,returnToBase:!1,xOnly:!1,yOnly:!1,zIndex:1e3},t.default=h},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=n(9),s=function(e){return e&&e.__esModule?e:{default:e}}(u),l=function(e){function t(e){r(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.elem=null,n.handleDrop=n.handleDrop.bind(n),n}return i(t,e),a(t,[{key:"componentDidMount",value:function(){var e=this;this.elem.addEventListener(this.props.targetKey+"DragEnter",function(t){e.props.onDragEnter(t)},!1),this.elem.addEventListener(this.props.targetKey+"DragLeave",function(t){e.props.onDragLeave(t)},!1),this.elem.addEventListener(this.props.targetKey+"Drop",function(t){e.handleDrop(t)},!1)}},{key:"createEvent",value:function(e,t){var n=void 0;return"function"!=typeof window.CustomEvent?(n=document.createEvent("CustomEvent"),n.initCustomEvent(e,!0,!0,{})):n=new CustomEvent(e,{bubbles:!0,cancelable:!0}),Object.assign(n,t),n}},{key:"handleDrop",value:function(e){var t=this.createEvent(this.props.targetKey+"Dropped",{dropElem:this.elem,dropData:this.props.dropData});e.sourceElem.dispatchEvent(t),this.props.onHit(e)}},{key:"render",value:function(){var e=this;return s.default.createElement("span",{ref:function(t){e.elem=t}},this.props.children)}}]),t}(s.default.Component);l.propTypes={children:s.default.PropTypes.node.isRequired,targetKey:s.default.PropTypes.string,dropData:s.default.PropTypes.object,onDragEnter:s.default.PropTypes.func,onDragLeave:s.default.PropTypes.func,onHit:s.default.PropTypes.func},l.defaultProps={targetKey:"ddc",onDragEnter:function(){},onDragLeave:function(){},onHit:function(){return function(){}},dropData:{}},t.default=l},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=n(9),s=function(e){return e&&e.__esModule?e:{default:e}}(u),l=function(e){function t(){return r(this,t),o(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),a(t,[{key:"componentDidMount",value:function(){this.props.setGhostElem(this.ghostElem)}},{key:"render",value:function(){var e=this,t={position:"absolute",zIndex:this.props.zIndex,left:this.props.left,top:this.props.top,display:this.props.dragging?"block":"none"};return s.default.createElement("div",{style:t,ref:function(t){e.ghostElem=t}},this.props.children)}}]),t}(s.default.Component);l.propTypes={children:s.default.PropTypes.node.isRequired,setGhostElem:s.default.PropTypes.func.isRequired,dragging:s.default.PropTypes.bool.isRequired,left:s.default.PropTypes.number.isRequired,top:s.default.PropTypes.number.isRequired,zIndex:s.default.PropTypes.number.isRequired},t.default=l},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var o=n(15),i=r(o),a=n(16),u=r(a);e.exports={DragDropContainer:i.default,DropTarget:u.default}},function(e,t,n){"use strict";function r(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,function(e){return t[e]})}function o(e){var t={"=0":"=","=2":":"};return(""+("."===e[0]&&"$"===e[1]?e.substring(2):e.substring(1))).replace(/(=0|=2)/g,function(e){return t[e]})}var i={escape:r,unescape:o};e.exports=i},function(e,t,n){"use strict";var r=n(3),o=(n(2),function(e){var t=this;if(t.instancePool.length){var n=t.instancePool.pop();return t.call(n,e),n}return new t(e)}),i=function(e,t){var n=this;if(n.instancePool.length){var r=n.instancePool.pop();return n.call(r,e,t),r}return new n(e,t)},a=function(e,t,n){var r=this;if(r.instancePool.length){var o=r.instancePool.pop();return r.call(o,e,t,n),o}return new r(e,t,n)},u=function(e,t,n,r){var o=this;if(o.instancePool.length){var i=o.instancePool.pop();return o.call(i,e,t,n,r),i}return new o(e,t,n,r)},s=function(e){var t=this;e instanceof t||r("25"),e.destructor(),t.instancePool.length<t.poolSize&&t.instancePool.push(e)},l=o,c=function(e,t){var n=e;return n.instancePool=[],n.getPooled=t||l,n.poolSize||(n.poolSize=10),n.release=s,n},p={addPoolingTo:c,oneArgumentPooler:o,twoArgumentPooler:i,threeArgumentPooler:a,fourArgumentPooler:u};e.exports=p},function(e,t,n){"use strict";var r=n(4),o=n(22),i=n(7),a=n(27),u=n(23),s=n(24),l=n(1),c=n(25),p=n(28),f=n(29),d=(n(0),l.createElement),h=l.createFactory,y=l.cloneElement,g=r,v={Children:{map:o.map,forEach:o.forEach,count:o.count,toArray:o.toArray,only:f},Component:i,PureComponent:a,createElement:d,cloneElement:y,isValidElement:l.isValidElement,PropTypes:c,createClass:u.createClass,createFactory:h,createMixin:function(e){return e},DOM:s,version:p,__spread:g};e.exports=v},function(e,t,n){"use strict";function r(e){return(""+e).replace(E,"$&/")}function o(e,t){this.func=e,this.context=t,this.count=0}function i(e,t,n){var r=e.func,o=e.context;r.call(o,t,e.count++)}function a(e,t,n){if(null==e)return e;var r=o.getPooled(t,n);v(e,i,r),o.release(r)}function u(e,t,n,r){this.result=e,this.keyPrefix=t,this.func=n,this.context=r,this.count=0}function s(e,t,n){var o=e.result,i=e.keyPrefix,a=e.func,u=e.context,s=a.call(u,t,e.count++);Array.isArray(s)?l(s,o,n,g.thatReturnsArgument):null!=s&&(y.isValidElement(s)&&(s=y.cloneAndReplaceKey(s,i+(!s.key||t&&t.key===s.key?"":r(s.key)+"/")+n)),o.push(s))}function l(e,t,n,o,i){var a="";null!=n&&(a=r(n)+"/");var l=u.getPooled(t,a,o,i);v(e,s,l),u.release(l)}function c(e,t,n){if(null==e)return e;var r=[];return l(e,r,null,t,n),r}function p(e,t,n){return null}function f(e,t){return v(e,p,null)}function d(e){var t=[];return l(e,t,null,g.thatReturnsArgument),t}var h=n(20),y=n(1),g=n(5),v=n(30),m=h.twoArgumentPooler,b=h.fourArgumentPooler,E=/\/+/g;o.prototype.destructor=function(){this.func=null,this.context=null,this.count=0},h.addPoolingTo(o,m),u.prototype.destructor=function(){this.result=null,this.keyPrefix=null,this.func=null,this.context=null,this.count=0},h.addPoolingTo(u,b);var P={forEach:a,map:c,mapIntoWithKeyPrefixInternal:l,count:f,toArray:d};e.exports=P},function(e,t,n){"use strict";function r(e){return e}function o(e,t){var n=E.hasOwnProperty(t)?E[t]:null;D.hasOwnProperty(t)&&"OVERRIDE_BASE"!==n&&f("73",t),e&&"DEFINE_MANY"!==n&&"DEFINE_MANY_MERGED"!==n&&f("74",t)}function i(e,t){if(t){"function"==typeof t&&f("75"),y.isValidElement(t)&&f("76");var n=e.prototype,r=n.__reactAutoBindPairs;t.hasOwnProperty(m)&&P.mixins(e,t.mixins);for(var i in t)if(t.hasOwnProperty(i)&&i!==m){var a=t[i],u=n.hasOwnProperty(i);if(o(u,i),P.hasOwnProperty(i))P[i](e,a);else{var c=E.hasOwnProperty(i),p="function"==typeof a,d=p&&!c&&!u&&t.autobind!==!1;if(d)r.push(i,a),n[i]=a;else if(u){var h=E[i];(!c||"DEFINE_MANY_MERGED"!==h&&"DEFINE_MANY"!==h)&&f("77",h,i),"DEFINE_MANY_MERGED"===h?n[i]=s(n[i],a):"DEFINE_MANY"===h&&(n[i]=l(n[i],a))}else n[i]=a}}}else;}function a(e,t){if(t)for(var n in t){var r=t[n];if(t.hasOwnProperty(n)){var o=n in P;o&&f("78",n);var i=n in e;i&&f("79",n),e[n]=r}}}function u(e,t){e&&t&&"object"==typeof e&&"object"==typeof t||f("80");for(var n in t)t.hasOwnProperty(n)&&(void 0!==e[n]&&f("81",n),e[n]=t[n]);return e}function s(e,t){return function(){var n=e.apply(this,arguments),r=t.apply(this,arguments);if(null==n)return r;if(null==r)return n;var o={};return u(o,n),u(o,r),o}}function l(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}}function c(e,t){var n=t.bind(e);return n}function p(e){for(var t=e.__reactAutoBindPairs,n=0;n<t.length;n+=2){var r=t[n],o=t[n+1];e[r]=c(e,o)}}var f=n(3),d=n(4),h=n(7),y=n(1),g=(n(12),n(8)),v=n(6),m=(n(2),n(0),"mixins"),b=[],E={mixins:"DEFINE_MANY",statics:"DEFINE_MANY",propTypes:"DEFINE_MANY",contextTypes:"DEFINE_MANY",childContextTypes:"DEFINE_MANY",getDefaultProps:"DEFINE_MANY_MERGED",getInitialState:"DEFINE_MANY_MERGED",getChildContext:"DEFINE_MANY_MERGED",render:"DEFINE_ONCE",componentWillMount:"DEFINE_MANY",componentDidMount:"DEFINE_MANY",componentWillReceiveProps:"DEFINE_MANY",shouldComponentUpdate:"DEFINE_ONCE",componentWillUpdate:"DEFINE_MANY",componentDidUpdate:"DEFINE_MANY",componentWillUnmount:"DEFINE_MANY",updateComponent:"OVERRIDE_BASE"},P={displayName:function(e,t){e.displayName=t},mixins:function(e,t){if(t)for(var n=0;n<t.length;n++)i(e,t[n])},childContextTypes:function(e,t){e.childContextTypes=d({},e.childContextTypes,t)},contextTypes:function(e,t){e.contextTypes=d({},e.contextTypes,t)},getDefaultProps:function(e,t){e.getDefaultProps?e.getDefaultProps=s(e.getDefaultProps,t):e.getDefaultProps=t},propTypes:function(e,t){e.propTypes=d({},e.propTypes,t)},statics:function(e,t){a(e,t)},autobind:function(){}},D={replaceState:function(e,t){this.updater.enqueueReplaceState(this,e),t&&this.updater.enqueueCallback(this,t,"replaceState")},isMounted:function(){return this.updater.isMounted(this)}},T=function(){};d(T.prototype,h.prototype,D);var _={createClass:function(e){var t=r(function(e,n,r){this.__reactAutoBindPairs.length&&p(this),this.props=e,this.context=n,this.refs=v,this.updater=r||g,this.state=null;var o=this.getInitialState?this.getInitialState():null;("object"!=typeof o||Array.isArray(o))&&f("82",t.displayName||"ReactCompositeComponent"),this.state=o});t.prototype=new T,t.prototype.constructor=t,t.prototype.__reactAutoBindPairs=[],b.forEach(i.bind(null,t)),i(t,e),t.getDefaultProps&&(t.defaultProps=t.getDefaultProps()),t.prototype.render||f("83");for(var n in E)t.prototype[n]||(t.prototype[n]=null);return t},injection:{injectMixin:function(e){b.push(e)}}};e.exports=_},function(e,t,n){"use strict";var r=n(1),o=r.createFactory,i={a:o("a"),abbr:o("abbr"),address:o("address"),area:o("area"),article:o("article"),aside:o("aside"),audio:o("audio"),b:o("b"),base:o("base"),bdi:o("bdi"),bdo:o("bdo"),big:o("big"),blockquote:o("blockquote"),body:o("body"),br:o("br"),button:o("button"),canvas:o("canvas"),caption:o("caption"),cite:o("cite"),code:o("code"),col:o("col"),colgroup:o("colgroup"),data:o("data"),datalist:o("datalist"),dd:o("dd"),del:o("del"),details:o("details"),dfn:o("dfn"),dialog:o("dialog"),div:o("div"),dl:o("dl"),dt:o("dt"),em:o("em"),embed:o("embed"),fieldset:o("fieldset"),figcaption:o("figcaption"),figure:o("figure"),footer:o("footer"),form:o("form"),h1:o("h1"),h2:o("h2"),h3:o("h3"),h4:o("h4"),h5:o("h5"),h6:o("h6"),head:o("head"),header:o("header"),hgroup:o("hgroup"),hr:o("hr"),html:o("html"),i:o("i"),iframe:o("iframe"),img:o("img"),input:o("input"),ins:o("ins"),kbd:o("kbd"),keygen:o("keygen"),label:o("label"),legend:o("legend"),li:o("li"),link:o("link"),main:o("main"),map:o("map"),mark:o("mark"),menu:o("menu"),menuitem:o("menuitem"),meta:o("meta"),meter:o("meter"),nav:o("nav"),noscript:o("noscript"),object:o("object"),ol:o("ol"),optgroup:o("optgroup"),option:o("option"),output:o("output"),p:o("p"),param:o("param"),picture:o("picture"),pre:o("pre"),progress:o("progress"),q:o("q"),rp:o("rp"),rt:o("rt"),ruby:o("ruby"),s:o("s"),samp:o("samp"),script:o("script"),section:o("section"),select:o("select"),small:o("small"),source:o("source"),span:o("span"),strong:o("strong"),style:o("style"),sub:o("sub"),summary:o("summary"),sup:o("sup"),table:o("table"),tbody:o("tbody"),td:o("td"),textarea:o("textarea"),tfoot:o("tfoot"),th:o("th"),thead:o("thead"),time:o("time"),title:o("title"),tr:o("tr"),track:o("track"),u:o("u"),ul:o("ul"),var:o("var"),video:o("video"),wbr:o("wbr"),circle:o("circle"),clipPath:o("clipPath"),defs:o("defs"),ellipse:o("ellipse"),g:o("g"),image:o("image"),line:o("line"),linearGradient:o("linearGradient"),mask:o("mask"),path:o("path"),pattern:o("pattern"),polygon:o("polygon"),polyline:o("polyline"),radialGradient:o("radialGradient"),rect:o("rect"),stop:o("stop"),svg:o("svg"),text:o("text"),tspan:o("tspan")};e.exports=i},function(e,t,n){"use strict";function r(e,t){return e===t?0!==e||1/e==1/t:e!==e&&t!==t}function o(e){this.message=e,this.stack=""}function i(e){function t(t,n,r,i,a,u,s){i=i||T,u=u||r;if(null==n[r]){var l=b[a];return t?new o(null===n[r]?"The "+l+" `"+u+"` is marked as required in `"+i+"`, but its value is `null`.":"The "+l+" `"+u+"` is marked as required in `"+i+"`, but its value is `undefined`."):null}return e(n,r,i,a,u)}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function a(e){function t(t,n,r,i,a,u){var s=t[n];if(y(s)!==e)return new o("Invalid "+b[i]+" `"+a+"` of type `"+g(s)+"` supplied to `"+r+"`, expected `"+e+"`.");return null}return i(t)}function u(e){function t(t,n,r,i,a){if("function"!=typeof e)return new o("Property `"+a+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var u=t[n];if(!Array.isArray(u)){return new o("Invalid "+b[i]+" `"+a+"` of type `"+y(u)+"` supplied to `"+r+"`, expected an array.")}for(var s=0;s<u.length;s++){var l=e(u,s,r,i,a+"["+s+"]",E);if(l instanceof Error)return l}return null}return i(t)}function s(e){function t(t,n,r,i,a){if(!(t[n]instanceof e)){var u=b[i],s=e.name||T;return new o("Invalid "+u+" `"+a+"` of type `"+v(t[n])+"` supplied to `"+r+"`, expected instance of `"+s+"`.")}return null}return i(t)}function l(e){function t(t,n,i,a,u){for(var s=t[n],l=0;l<e.length;l++)if(r(s,e[l]))return null;return new o("Invalid "+b[a]+" `"+u+"` of value `"+s+"` supplied to `"+i+"`, expected one of "+JSON.stringify(e)+".")}return Array.isArray(e)?i(t):P.thatReturnsNull}function c(e){function t(t,n,r,i,a){if("function"!=typeof e)return new o("Property `"+a+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var u=t[n],s=y(u);if("object"!==s){return new o("Invalid "+b[i]+" `"+a+"` of type `"+s+"` supplied to `"+r+"`, expected an object.")}for(var l in u)if(u.hasOwnProperty(l)){var c=e(u,l,r,i,a+"."+l,E);if(c instanceof Error)return c}return null}return i(t)}function p(e){function t(t,n,r,i,a){for(var u=0;u<e.length;u++){if(null==(0,e[u])(t,n,r,i,a,E))return null}return new o("Invalid "+b[i]+" `"+a+"` supplied to `"+r+"`.")}return Array.isArray(e)?i(t):P.thatReturnsNull}function f(e){function t(t,n,r,i,a){var u=t[n],s=y(u);if("object"!==s){return new o("Invalid "+b[i]+" `"+a+"` of type `"+s+"` supplied to `"+r+"`, expected `object`.")}for(var l in e){var c=e[l];if(c){var p=c(u,l,r,i,a+"."+l,E);if(p)return p}}return null}return i(t)}function d(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(d);if(null===e||m.isValidElement(e))return!0;var t=D(e);if(!t)return!1;var n,r=t.call(e);if(t!==e.entries){for(;!(n=r.next()).done;)if(!d(n.value))return!1}else for(;!(n=r.next()).done;){var o=n.value;if(o&&!d(o[1]))return!1}return!0;default:return!1}}function h(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function y(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":h(t,e)?"symbol":t}function g(e){var t=y(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function v(e){return e.constructor&&e.constructor.name?e.constructor.name:T}var m=n(1),b=n(12),E=n(26),P=n(5),D=n(14),T=(n(0),"<<anonymous>>"),_={array:a("array"),bool:a("boolean"),func:a("function"),number:a("number"),object:a("object"),string:a("string"),symbol:a("symbol"),any:function(){return i(P.thatReturns(null))}(),arrayOf:u,element:function(){function e(e,t,n,r,i){var a=e[t];if(!m.isValidElement(a)){return new o("Invalid "+b[r]+" `"+i+"` of type `"+y(a)+"` supplied to `"+n+"`, expected a single ReactElement.")}return null}return i(e)}(),instanceOf:s,node:function(){function e(e,t,n,r,i){if(!d(e[t])){return new o("Invalid "+b[r]+" `"+i+"` supplied to `"+n+"`, expected a ReactNode.")}return null}return i(e)}(),objectOf:c,oneOf:l,oneOfType:p,shape:f};o.prototype=Error.prototype,e.exports=_},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=s,this.updater=n||u}function o(){}var i=n(4),a=n(7),u=n(8),s=n(6);o.prototype=a.prototype,r.prototype=new o,r.prototype.constructor=r,i(r.prototype,a.prototype),r.prototype.isPureReactComponent=!0,e.exports=r},function(e,t,n){"use strict";e.exports="15.4.2"},function(e,t,n){"use strict";function r(e){return i.isValidElement(e)||o("143"),e}var o=n(3),i=n(1);n(2);e.exports=r},function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?l.escape(e.key):t.toString(36)}function o(e,t,n,i){var f=typeof e;if("undefined"!==f&&"boolean"!==f||(e=null),null===e||"string"===f||"number"===f||"object"===f&&e.$$typeof===u)return n(i,e,""===t?c+r(e,0):t),1;var d,h,y=0,g=""===t?c:t+p;if(Array.isArray(e))for(var v=0;v<e.length;v++)d=e[v],h=g+r(d,v),y+=o(d,h,n,i);else{var m=s(e);if(m){var b,E=m.call(e);if(m!==e.entries)for(var P=0;!(b=E.next()).done;)d=b.value,h=g+r(d,P++),y+=o(d,h,n,i);else for(;!(b=E.next()).done;){var D=b.value;D&&(d=D[1],h=g+l.escape(D[0])+p+r(d,0),y+=o(d,h,n,i))}}else if("object"===f){var T="",_=String(e);a("31","[object Object]"===_?"object with keys {"+Object.keys(e).join(", ")+"}":_,T)}}return y}function i(e,t,n){return null==e?0:o(e,"",t,n)}var a=n(3),u=(n(10),n(11)),s=n(14),l=(n(2),n(19)),c=(n(0),"."),p=":";e.exports=i}])}); |
{ | ||
"name": "react-drag-drop-container", | ||
"version": "4.0.0", | ||
"version": "4.0.1", | ||
"description": "DragDropContainer", | ||
"main": "lib/bundle.js", | ||
"author": "Peter!", | ||
"license": "UNLICENSED", | ||
"author": "Peter Hollingsworth", | ||
"license": "MIT", | ||
"bugs": { | ||
@@ -19,3 +19,3 @@ "url": "https://github.com/peterh32/react-drag-drop-container/issues" | ||
"prepublish": "npm run build", | ||
"push-demo": "echo \"PUSHING DEMO TO gh-pages\"; git subtree push --prefix public origin gh-pages", | ||
"push-demo": "echo \"PUSHING DEMO TO gh-pages\"; npm run build-demo; git subtree push --prefix public origin gh-pages", | ||
"start": "webpack-dev-server --hot --inline", | ||
@@ -37,2 +37,3 @@ "test": "echo \"Error: no test specified\" && exit 1", | ||
"babel-loader": "^6.4.1", | ||
"babel-plugin-transform-class-properties": "^6.24.1", | ||
"babel-preset-env": "^1.2.2", | ||
@@ -39,0 +40,0 @@ "babel-preset-react": "^6.23.0", |
# DragDropContainer and DropTarget | ||
**Because drag and drop should be easy.** | ||
Live demo: [peterh32.github.io/react-drag-drop-container](http://peterh32.github.io/react-drag-drop-container/) | ||
@@ -102,3 +102,3 @@ Make something draggable: | ||
npm install | ||
npm launch | ||
npm run launch | ||
``` | ||
@@ -133,3 +133,5 @@ | ||
<DragDropContainer> <span>Example</span></DragDropContainer> | ||
<DragDropContainer> | ||
<span>Example</span> | ||
</DragDropContainer> | ||
``` | ||
@@ -160,3 +162,5 @@ The element should now be draggable. | ||
<DropTarget targetKey="foo">[some element or text]</DropTarget> | ||
<DropTarget targetKey="foo"> | ||
[some element or text] | ||
</DropTarget> | ||
``` | ||
@@ -163,0 +167,0 @@ |
import React from 'react'; | ||
import DragDropGhost from './DragDropGhost'; | ||
function usesLeftButton(e) { | ||
const button = e.buttons || e.which || e.button; | ||
return button === 1; | ||
} | ||
class DragDropContainer extends React.Component { | ||
@@ -19,18 +24,2 @@ constructor(props) { | ||
this.handleMouseDown = this.handleMouseDown.bind(this); | ||
this.handleTouchStart = this.handleTouchStart.bind(this); | ||
this.startDrag = this.startDrag.bind(this); | ||
this.handleMouseMove = this.handleMouseMove.bind(this); | ||
this.handleTouchMove = this.handleTouchMove.bind(this); | ||
this.drag = this.drag.bind(this); | ||
this.handleMouseUp = this.handleMouseUp.bind(this); | ||
this.handleTouchEnd = this.handleTouchEnd.bind(this); | ||
this.drop = this.drop.bind(this); | ||
this.setGhostElem = this.setGhostElem.bind(this); | ||
this.checkForOffsetChanges = this.checkForOffsetChanges.bind(this); | ||
this.setDraggableFalseOnChildren = this.setDraggableFalseOnChildren.bind(this); | ||
// The DOM elem we're dragging, and the elements we're dragging over. | ||
@@ -46,2 +35,7 @@ this.dragElem = null; | ||
this.dragElem = this.ghostElem || this.containerElem; | ||
// set draggable attribute 'false' on any images, to prevent conflicts w browser native dragging | ||
const imgs = this.dragElem.getElementsByTagName('IMG'); | ||
for (let i = 0; i < imgs.length; i += 1) { | ||
imgs[i].setAttribute('draggable', 'false'); | ||
} | ||
// capture events | ||
@@ -60,13 +54,13 @@ if (this.props.dragHandleClassName) { | ||
setGhostElem(elem) { | ||
setGhostElem = (elem) => { | ||
// this has to run _after_ the DragGhost element renders in order to get the DOM elem for that element | ||
this.ghostElem = elem; | ||
} | ||
}; | ||
addListeners(elem) { | ||
addListeners = (elem) => { | ||
elem.addEventListener('mousedown', (e) => { this.handleMouseDown(e); }, false); | ||
elem.addEventListener('touchstart', (e) => { this.handleTouchStart(e); }, false); | ||
} | ||
}; | ||
buildCustomEvent(eventName) { | ||
buildCustomEvent = (eventName) => { | ||
let e; | ||
@@ -87,5 +81,5 @@ if (typeof window.CustomEvent !== 'function') { | ||
return e; | ||
} | ||
}; | ||
setCurrentTarget(x, y) { | ||
setCurrentTarget = (x, y) => { | ||
// drop the z-index to get this elem out of the way, figure out what we're dragging over, then reset the z index | ||
@@ -97,5 +91,5 @@ this.dragElem.style.zIndex = -1; | ||
this.currentTarget = this.dragElem.contains(target) ? document.body : target; | ||
} | ||
}; | ||
generateEnterLeaveEvents(x, y) { | ||
generateEnterLeaveEvents = (x, y) => { | ||
// generate events as we enter and leave elements while dragging | ||
@@ -109,13 +103,14 @@ const prefix = this.props.targetKey; | ||
this.prevTarget = this.currentTarget; | ||
} | ||
}; | ||
generateDropEvent(x, y) { | ||
generateDropEvent = (x, y) => { | ||
// generate a drop event in whatever we're currently dragging over | ||
this.setCurrentTarget(x, y); | ||
this.currentTarget.dispatchEvent(this.buildCustomEvent(`${this.props.targetKey}Drop`)); | ||
} | ||
const customEvent = this.buildCustomEvent(`${this.props.targetKey}Drop`); | ||
this.currentTarget.dispatchEvent(customEvent); | ||
}; | ||
// Start the Drag | ||
handleMouseDown(e) { | ||
if (e.buttons === 1 && !this.props.noDragging) { | ||
handleMouseDown = (e) => { | ||
if (usesLeftButton(e) && !this.props.noDragging) { | ||
document.addEventListener('mousemove', this.handleMouseMove); | ||
@@ -125,5 +120,5 @@ document.addEventListener('mouseup', this.handleMouseUp); | ||
} | ||
} | ||
}; | ||
handleTouchStart(e) { | ||
handleTouchStart = (e) => { | ||
if (!this.props.noDragging) { | ||
@@ -133,7 +128,7 @@ e.preventDefault(); | ||
document.addEventListener('touchend', this.handleTouchEnd); | ||
this.startDrag(e.targetTouches[0].pageX, e.targetTouches[0].pageY); | ||
this.startDrag(e.targetTouches[0].clientX, e.targetTouches[0].clientY); | ||
} | ||
} | ||
}; | ||
startDrag(x, y) { | ||
startDrag = (x, y) => { | ||
document.addEventListener(`${this.props.targetKey}Dropped`, this.props.onDrop); | ||
@@ -148,6 +143,6 @@ this.setState({ | ||
this.props.onDragStart(this.props.dragData); | ||
} | ||
}; | ||
// During Drag | ||
handleMouseMove(e) { | ||
handleMouseMove = (e) => { | ||
if (!this.props.noDragging) { | ||
@@ -159,15 +154,14 @@ e.preventDefault(); | ||
} | ||
} | ||
}; | ||
handleTouchMove(e) { | ||
handleTouchMove = (e) => { | ||
if (!this.props.noDragging) { | ||
e.preventDefault(); | ||
if (this.state.clicked) { | ||
this.drag(e.targetTouches[0].pageX, e.targetTouches[0].pageY); | ||
this.drag(e.targetTouches[0].clientX, e.targetTouches[0].clientY); | ||
} | ||
} | ||
} | ||
}; | ||
drag(x, y) { | ||
// drop the z-index, figure out what element we're dragging over, then reset the z index | ||
drag = (x, y) => { | ||
this.generateEnterLeaveEvents(x, y); | ||
@@ -180,6 +174,6 @@ const [dx, dy] = this.checkForOffsetChanges(); | ||
this.props.onDrag(this.props.dragData, this.currentTarget, x, y); | ||
} | ||
}; | ||
// Drop | ||
handleMouseUp(e) { | ||
handleMouseUp = (e) => { | ||
this.setState({ clicked: false }); | ||
@@ -191,5 +185,5 @@ if (this.state.dragging) { | ||
} | ||
} | ||
}; | ||
handleTouchEnd(e) { | ||
handleTouchEnd = (e) => { | ||
this.setState({ clicked: false }); | ||
@@ -199,8 +193,8 @@ if (this.state.dragging) { | ||
document.removeEventListener('touchend', this.handleTouchEnd); | ||
this.drop(e.changedTouches[0].pageX, e.changedTouches[0].pageY); | ||
this.drop(e.changedTouches[0].clientX, e.changedTouches[0].clientY); | ||
} | ||
} | ||
}; | ||
drop(x, y) { | ||
// document.removeEventListener(`${this.props.targetKey}Dropped`, this.handleDrop); | ||
drop = (x, y) => { | ||
document.removeEventListener(`${this.props.targetKey}Dropped`, this.handleDrop); | ||
this.generateDropEvent(x, y); | ||
@@ -215,5 +209,5 @@ if (this.containerElem) { | ||
this.props.onDragEnd(this.props.dragData, this.currentTarget, x, y); | ||
} | ||
}; | ||
checkForOffsetChanges() { | ||
checkForOffsetChanges = () => { | ||
// deltas for when the system moves, e.g. from other elements on the page that change size on dragover. | ||
@@ -230,13 +224,4 @@ let dx; | ||
return [dx, dy]; | ||
} | ||
}; | ||
setDraggableFalseOnChildren() { | ||
// because otherwise can conflict with built-in browser dragging behavior | ||
const inputReactObject = React.Children.only(this.props.children); | ||
const clonedChild = React.cloneElement(inputReactObject, { | ||
draggable: 'false', | ||
}); | ||
return clonedChild; | ||
} | ||
render() { | ||
@@ -255,3 +240,3 @@ const styles = { | ||
} else { | ||
ghostContent = this.setDraggableFalseOnChildren(); // dragging a clone | ||
ghostContent = this.props.children; // dragging a clone | ||
} | ||
@@ -278,3 +263,3 @@ | ||
<div style={styles} ref={(container) => { this.containerElem = container; }}> | ||
{this.setDraggableFalseOnChildren()} | ||
{this.props.children} | ||
{ghost} | ||
@@ -281,0 +266,0 @@ </div> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Explicitly Unlicensed Item
License(Experimental) Something was found which is explicitly marked as unlicensed.
Found 1 instance in 1 package
Misc. License Issues
License(Experimental) A package's licensing information has fine-grained problems.
Found 1 instance in 1 package
0
-100%0
-100%100
Infinity%297
1.37%3018701
-0.06%20
5.26%10202
-0.1%