react-dnd-mouse-backend/docs/main.85f208740978715ff675.bundle.js

A lightweight attempt for solving the whole HTML5 DnD - svg tags compability issue

(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{277:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(2),__webpack_require__(5),__webpack_require__(7),__webpack_require__(274),__webpack_require__(16);var _style,react=__webpack_require__(0),react_default=__webpack_require__.n(react),update=__webpack_require__(35),update_default=__webpack_require__.n(update),ItemTypes=(__webpack_require__(11),__webpack_require__(30),__webpack_require__(14),__webpack_require__(9)),lib=__webpack_require__(6);function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null==arguments[i]?{}:arguments[i],ownKeys=Object.keys(source);"function"==typeof Object.getOwnPropertySymbols&&(ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))),ownKeys.forEach(function(key){_defineProperty(target,key,source[key])})}return target}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}var style=(_defineProperty(_style={position:"absolute",border:"1px dashed gray",backgroundColor:"white",padding:"4px",cursor:"move",zIndex:1},"cursor","pointer"),_defineProperty(_style,"userSelect","none"),_style),Source=react_default.a.createClass({displayName:"Source",propTypes:{connectDragSource:react.PropTypes.func.isRequired,isDragging:react.PropTypes.bool.isRequired,id:react.PropTypes.any.isRequired,left:react.PropTypes.number.isRequired,top:react.PropTypes.number.isRequired,hideSourceOnDrag:react.PropTypes.bool.isRequired,children:react.PropTypes.node},render:function(){var _this$props=this.props,hideSourceOnDrag=_this$props.hideSourceOnDrag,left=_this$props.left,top=_this$props.top,connectDragSource=_this$props.connectDragSource,isDragging=_this$props.isDragging,children=_this$props.children;return isDragging&&hideSourceOnDrag?null:connectDragSource(react_default.a.createElement("div",{style:_objectSpread({},style,{left:left,top:top})},children))}}),NestedTargets_Source=Object(lib.DragSource)(ItemTypes.a.BOX,{beginDrag:function(props){return{id:props.id,left:props.left,top:props.top}}},function(connect,monitor){return{connectDragSource:connect.dragSource(),isDragging:monitor.isDragging()}})(Source);Source.__docgenInfo={description:"",methods:[],props:{connectDragSource:{type:{name:"func"},required:!0,description:""},isDragging:{type:{name:"bool"},required:!0,description:""},id:{type:{name:"any"},required:!0,description:""},left:{type:{name:"number"},required:!0,description:""},top:{type:{name:"number"},required:!0,description:""},hideSourceOnDrag:{type:{name:"bool"},required:!0,description:""},children:{type:{name:"node"},required:!1,description:""}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/NestedTargets/Source.js"]={name:"Source",docgenInfo:Source.__docgenInfo,path:"src/NestedTargets/Source.js"});var Sources=react_default.a.createClass({displayName:"Sources",render:function(){var _this$props=this.props,hideSourceOnDrag=_this$props.hideSourceOnDrag,boxes=_this$props.boxes;return react_default.a.createElement("div",null,Object.keys(boxes).map(function(key){var _boxes$key=boxes[key],left=_boxes$key.left,top=_boxes$key.top,title=_boxes$key.title;return react_default.a.createElement(NestedTargets_Source,{key:key,id:key,left:left,top:top,hideSourceOnDrag:hideSourceOnDrag},title)}))}}),NestedTargets_Sources=Sources;Sources.__docgenInfo={description:"",methods:[]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/NestedTargets/Sources.js"]={name:"Sources",docgenInfo:Sources.__docgenInfo,path:"src/NestedTargets/Sources.js"});__webpack_require__(203);function Target_objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null==arguments[i]?{}:arguments[i],ownKeys=Object.keys(source);"function"==typeof Object.getOwnPropertySymbols&&(ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))),ownKeys.forEach(function(key){Target_defineProperty(target,key,source[key])})}return target}function Target_defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}var styles={position:"absolute",border:"1px solid #ccc",flex:1},boxTarget={drop:function(props,monitor,component){if(console.log(monitor.didDrop()),!monitor.didDrop()){var item=monitor.getItem(),delta=monitor.getDifferenceFromInitialOffset(),left=Math.round(item.left+delta.x),top=Math.round(item.top+delta.y);component.moveBox(item.id,left,top)}}},Target=react_default.a.createClass({displayName:"Target",moveBox:function(id,left,top){this.props.moveBox(id,left,top,this.props.id)},render:function(){var _this$props=this.props,connectDropTarget=_this$props.connectDropTarget,left=_this$props.left,top=_this$props.top,id=_this$props.id,size=_this$props.size;return connectDropTarget(react_default.a.createElement("div",{style:Target_objectSpread({},styles,{left:left,top:top,width:size,height:size})},id))}});Target.propTypes={connectDropTarget:react.PropTypes.func.isRequired};var NestedTargets_Target=Object(lib.DropTarget)(ItemTypes.a.BOX,boxTarget,function(connect){return{connectDropTarget:connect.dropTarget()}})(Target);function _extends(){return(_extends=Object.assign||function(target){for(var source,i=1;i<arguments.length;i++)for(var key in source=arguments[i])Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);return target}).apply(this,arguments)}Target.__docgenInfo={description:"",methods:[{name:"moveBox",docblock:null,modifiers:[],params:[{name:"id",type:null},{name:"left",type:null},{name:"top",type:null}],returns:null}]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/NestedTargets/Target.js"]={name:"Target",docgenInfo:Target.__docgenInfo,path:"src/NestedTargets/Target.js"});var Targets=react_default.a.createClass({displayName:"Targets",render:function(){var _this$props=this.props,moveBox=_this$props.moveBox,_isOccupied=_this$props.isOccupied;return react_default.a.createElement("div",null,[{left:60,top:60,size:180,id:"2"},{left:30,top:30,size:240,id:"1"},{left:90,top:90,size:120,id:"3"},{left:120,top:120,size:60,id:"4"},{left:170,top:40,size:80,id:"5"}].map(function(target){return react_default.a.createElement(NestedTargets_Target,_extends({moveBox:moveBox,key:target.id},target,{isOccupied:function(){return _isOccupied(target.id)}}))}))}}),NestedTargets_Targets=Targets;Targets.__docgenInfo={description:"",methods:[]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/NestedTargets/Targets.js"]={name:"Targets",docgenInfo:Targets.__docgenInfo,path:"src/NestedTargets/Targets.js"});var DragAroundNaive=react_default.a.createClass({displayName:"DragAroundNaive",getInitialState:function(){return{boxes:{a:{top:50,left:10,title:"0"},b:{top:180,left:10,title:"0"},c:{top:90,left:10,title:"0"},d:{top:230,left:10,title:"0"},e:{top:140,left:10,title:"0"}}}},moveBox:function(id,left,top,title){var obj,key,value;this.setState(update_default()(this.state,{boxes:(obj={},key=id,value={$merge:{left:left,top:top,title:title}},key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj)}))},isOccupied:function(id){return 1<=Object.values(this.state.boxes).filter(function(box){return box.title===id}).length},render:function(){var boxes=this.state.boxes;return react_default.a.createElement("div",{style:{flex:1}},react_default.a.createElement("div",{style:{display:"flex",flexDirection:"column"}},react_default.a.createElement("h3",null,"Nested Drop Targets"),react_default.a.createElement("div",{style:{position:"relative",width:"400px",height:"300px",display:"flex"}},react_default.a.createElement("div",{style:{width:"100px"}},react_default.a.createElement(NestedTargets_Sources,{hideSourceOnDrag:!0,boxes:boxes})),react_default.a.createElement("div",{style:{position:"relative",width:"300px",height:"300px",border:"1px solid black"}},react_default.a.createElement(NestedTargets_Targets,{moveBox:this.moveBox,isOccupied:this.isOccupied})))))}});__webpack_exports__.a=DragAroundNaive;DragAroundNaive.__docgenInfo={description:"",methods:[{name:"moveBox",docblock:null,modifiers:[],params:[{name:"id",type:null},{name:"left",type:null},{name:"top",type:null},{name:"title",type:null}],returns:null},{name:"isOccupied",docblock:null,modifiers:[],params:[{name:"id",type:null}],returns:null}]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/NestedTargets/index.js"]={name:"DragAroundNaive",docgenInfo:DragAroundNaive.__docgenInfo,path:"src/NestedTargets/index.js"})},278:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(2),__webpack_require__(5),__webpack_require__(7),__webpack_require__(274),__webpack_require__(16);var _style,react=__webpack_require__(0),react_default=__webpack_require__.n(react),update=__webpack_require__(35),update_default=__webpack_require__.n(update),ItemTypes=(__webpack_require__(11),__webpack_require__(30),__webpack_require__(14),__webpack_require__(9)),lib=__webpack_require__(6);function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null==arguments[i]?{}:arguments[i],ownKeys=Object.keys(source);"function"==typeof Object.getOwnPropertySymbols&&(ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))),ownKeys.forEach(function(key){_defineProperty(target,key,source[key])})}return target}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}var style=(_defineProperty(_style={position:"absolute",border:"1px dashed gray",backgroundColor:"white",padding:"4px",cursor:"move",zIndex:1},"cursor","pointer"),_defineProperty(_style,"userSelect","none"),_style),Source=react_default.a.createClass({displayName:"Source",propTypes:{connectDragSource:react.PropTypes.func.isRequired,isDragging:react.PropTypes.bool.isRequired,id:react.PropTypes.any.isRequired,left:react.PropTypes.number.isRequired,top:react.PropTypes.number.isRequired,hideSourceOnDrag:react.PropTypes.bool.isRequired,children:react.PropTypes.node},render:function(){var _this$props=this.props,hideSourceOnDrag=_this$props.hideSourceOnDrag,left=_this$props.left,top=_this$props.top,connectDragSource=_this$props.connectDragSource,isDragging=_this$props.isDragging,children=_this$props.children;return isDragging&&hideSourceOnDrag?null:connectDragSource(react_default.a.createElement("div",{style:_objectSpread({},style,{left:left,top:top})},children))}}),MultipleTargets_Source=Object(lib.DragSource)(ItemTypes.a.BOX,{beginDrag:function(props){return{id:props.id,left:props.left,top:props.top}}},function(connect,monitor){return{connectDragSource:connect.dragSource(),isDragging:monitor.isDragging()}})(Source);Source.__docgenInfo={description:"",methods:[],props:{connectDragSource:{type:{name:"func"},required:!0,description:""},isDragging:{type:{name:"bool"},required:!0,description:""},id:{type:{name:"any"},required:!0,description:""},left:{type:{name:"number"},required:!0,description:""},top:{type:{name:"number"},required:!0,description:""},hideSourceOnDrag:{type:{name:"bool"},required:!0,description:""},children:{type:{name:"node"},required:!1,description:""}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/MultipleTargets/Source.js"]={name:"Source",docgenInfo:Source.__docgenInfo,path:"src/MultipleTargets/Source.js"});var Sources=react_default.a.createClass({displayName:"Sources",render:function(){var _this$props=this.props,hideSourceOnDrag=_this$props.hideSourceOnDrag,boxes=_this$props.boxes;return react_default.a.createElement("div",null,Object.keys(boxes).map(function(key){var _boxes$key=boxes[key],left=_boxes$key.left,top=_boxes$key.top,title=_boxes$key.title;return react_default.a.createElement(MultipleTargets_Source,{key:key,id:key,left:left,top:top,hideSourceOnDrag:hideSourceOnDrag},title)}))}}),MultipleTargets_Sources=Sources;function Target_objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null==arguments[i]?{}:arguments[i],ownKeys=Object.keys(source);"function"==typeof Object.getOwnPropertySymbols&&(ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))),ownKeys.forEach(function(key){Target_defineProperty(target,key,source[key])})}return target}function Target_defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Sources.__docgenInfo={description:"",methods:[]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/MultipleTargets/Sources.js"]={name:"Sources",docgenInfo:Sources.__docgenInfo,path:"src/MultipleTargets/Sources.js"});var styles={position:"absolute",width:80,height:80,border:"1px solid #ccc",flex:1},boxTarget={drop:function(props,monitor,component){var item=monitor.getItem(),delta=monitor.getDifferenceFromInitialOffset(),left=Math.round(item.left+delta.x),top=Math.round(item.top+delta.y);component.moveBox(item.id,left,top)}},Target=react_default.a.createClass({displayName:"Target",moveBox:function(id,left,top){return this.props.isOccupied()?void setTimeout(function(){alert("This box is occupied !")},0):void this.props.moveBox(id,left,top,this.props.id)},render:function(){var _this$props=this.props,connectDropTarget=_this$props.connectDropTarget,left=_this$props.left,top=_this$props.top;return connectDropTarget(react_default.a.createElement("div",{style:Target_objectSpread({},styles,{left:left,top:top})}))}});Target.propTypes={connectDropTarget:react.PropTypes.func.isRequired};var MultipleTargets_Target=Object(lib.DropTarget)(ItemTypes.a.BOX,boxTarget,function(connect){return{connectDropTarget:connect.dropTarget()}})(Target);Target.__docgenInfo={description:"",methods:[{name:"moveBox",docblock:null,modifiers:[],params:[{name:"id",type:null},{name:"left",type:null},{name:"top",type:null}],returns:null}]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/MultipleTargets/Target.js"]={name:"Target",docgenInfo:Target.__docgenInfo,path:"src/MultipleTargets/Target.js"});var Targets=react_default.a.createClass({displayName:"Targets",render:function(){var _this$props=this.props,moveBox=_this$props.moveBox,_isOccupied=_this$props.isOccupied;return react_default.a.createElement("div",null,[{left:10,top:10,id:"1"},{left:10,top:205,id:"2"},{left:205,top:205,id:"3"},{left:205,top:10,id:"4"}].map(function(target){return react_default.a.createElement(MultipleTargets_Target,{moveBox:moveBox,key:target.id,left:target.left,top:target.top,id:target.id,isOccupied:function(){return _isOccupied(target.id)}})}))}}),MultipleTargets_Targets=Targets;Targets.__docgenInfo={description:"",methods:[]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/MultipleTargets/Targets.js"]={name:"Targets",docgenInfo:Targets.__docgenInfo,path:"src/MultipleTargets/Targets.js"});var DragAroundNaive=react_default.a.createClass({displayName:"DragAroundNaive",getInitialState:function(){return{boxes:{a:{top:50,left:140,title:"0"},b:{top:180,left:20,title:"0"},c:{top:90,left:40,title:"0"},d:{top:230,left:160,title:"0"},e:{top:140,left:150,title:"0"}}}},moveBox:function(id,left,top,title){var obj,key,value;this.setState(update_default()(this.state,{boxes:(obj={},key=id,value={$merge:{left:left,top:top,title:title}},key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj)}))},isOccupied:function(id){return 1<=Object.values(this.state.boxes).filter(function(box){return box.title===id}).length},render:function(){var boxes=this.state.boxes;return react_default.a.createElement("div",{style:{flex:1}},react_default.a.createElement("div",{style:{display:"flex",flexDirection:"column"}},react_default.a.createElement("h3",null,"Multiple Drop Targets"),react_default.a.createElement("div",{style:{position:"relative",width:"300px",height:"300px",border:"1px solid black"}},react_default.a.createElement(MultipleTargets_Sources,{hideSourceOnDrag:!0,boxes:boxes}),react_default.a.createElement(MultipleTargets_Targets,{moveBox:this.moveBox,isOccupied:this.isOccupied}))))}});__webpack_exports__.a=DragAroundNaive;DragAroundNaive.__docgenInfo={description:"",methods:[{name:"moveBox",docblock:null,modifiers:[],params:[{name:"id",type:null},{name:"left",type:null},{name:"top",type:null},{name:"title",type:null}],returns:null},{name:"isOccupied",docblock:null,modifiers:[],params:[{name:"id",type:null}],returns:null}]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/MultipleTargets/index.js"]={name:"DragAroundNaive",docgenInfo:DragAroundNaive.__docgenInfo,path:"src/MultipleTargets/index.js"})},279:function(module,__webpack_exports__,__webpack_require__){"use strict";var react=__webpack_require__(0),react_default=__webpack_require__.n(react),lib=__webpack_require__(6),defaultStyle=function(item,currentOffset){return{left:currentOffset.x,top:currentOffset.y,position:"fixed"}},DragPreview=react_default.a.createClass({displayName:"DragPreview",render:function(){var _this$props=this.props,isDragging=_this$props.isDragging,currentOffset=_this$props.currentOffset,item=_this$props.item;return isDragging&&currentOffset&&item.withDragPreview?react_default.a.createElement("svg",{style:defaultStyle(0,currentOffset)},react_default.a.createElement("circle",{cx:14,cy:14,r:12,fill:item.color,stroke:"black",strokeWidth:2})):null}}),WithDragPreview_DragPreview=Object(lib.DragLayer)(function(monitor){return{item:monitor.getItem(),itemType:monitor.getItemType(),currentOffset:monitor.getSourceClientOffset(),isDragging:monitor.isDragging()}})(DragPreview);DragPreview.__docgenInfo={description:"",methods:[]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/WithDragPreview/DragPreview.js"]={name:"DragPreview",docgenInfo:DragPreview.__docgenInfo,path:"src/WithDragPreview/DragPreview.js"});__webpack_require__(2),__webpack_require__(5),__webpack_require__(7),__webpack_require__(11),__webpack_require__(30);var update=__webpack_require__(35),update_default=__webpack_require__.n(update),ItemTypes=__webpack_require__(9),rand0To255=function(){return Math.floor(256*Math.random())},Source=react_default.a.createClass({displayName:"Source",getInitialState:function(){return{color:"rgb(".concat(rand0To255(),", ").concat(rand0To255(),", ").concat(rand0To255(),")")}},propTypes:{connectDragSource:react.PropTypes.func.isRequired,isDragging:react.PropTypes.bool.isRequired,id:react.PropTypes.any.isRequired,left:react.PropTypes.number.isRequired,top:react.PropTypes.number.isRequired,hideSourceOnDrag:react.PropTypes.bool.isRequired,children:react.PropTypes.node},render:function(){var _this$props=this.props,hideSourceOnDrag=_this$props.hideSourceOnDrag,left=_this$props.left,top=_this$props.top,connectDragSource=_this$props.connectDragSource;return _this$props.isDragging&&hideSourceOnDrag?null:connectDragSource(react_default.a.createElement("circle",{cx:left,cy:top,r:12,fill:this.state.color,stroke:"black",strokeWidth:2}))}}),WithDragPreview_Source=Object(lib.DragSource)(ItemTypes.a.CSV,{beginDrag:function(props,monitor,component){return{id:props.id,left:props.left,top:props.top,color:component.state.color,withDragPreview:!0}}},function(_connect,monitor){return{connectDragSource:_connect.dragSource(),isDragging:monitor.isDragging()}})(Source);Source.__docgenInfo={description:"",methods:[],props:{connectDragSource:{type:{name:"func"},required:!0,description:""},isDragging:{type:{name:"bool"},required:!0,description:""},id:{type:{name:"any"},required:!0,description:""},left:{type:{name:"number"},required:!0,description:""},top:{type:{name:"number"},required:!0,description:""},hideSourceOnDrag:{type:{name:"bool"},required:!0,description:""},children:{type:{name:"node"},required:!1,description:""}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/WithDragPreview/Source.js"]={name:"Source",docgenInfo:Source.__docgenInfo,path:"src/WithDragPreview/Source.js"});var styles={width:300,height:300,border:"1px solid black",position:"relative",flex:1},boxTarget={drop:function(props,monitor,component){var item=monitor.getItem(),delta=monitor.getDifferenceFromInitialOffset(),left=Math.round(item.left+delta.x),top=Math.round(item.top+delta.y);component.moveBox(item.id,left,top)}},Target=react_default.a.createClass({displayName:"Target",getInitialState:function(){return{circles:{a:{top:20,left:80},b:{top:180,left:20},c:{top:130,left:250}}}},moveBox:function(id,left,top){var obj,key,value;this.setState(update_default()(this.state,{circles:(obj={},key=id,value={$merge:{left:left,top:top}},key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj)}))},render:function(){var _this$props=this.props,hideSourceOnDrag=_this$props.hideSourceOnDrag,connectDropTarget=_this$props.connectDropTarget,circles=this.state.circles;return connectDropTarget(react_default.a.createElement("div",{style:styles},react_default.a.createElement("svg",{style:{width:"100%",height:"100%"}},Object.keys(circles).map(function(key){var _circles$key=circles[key],left=_circles$key.left,top=_circles$key.top;return react_default.a.createElement(WithDragPreview_Source,{key:key,id:key,left:left,top:top,hideSourceOnDrag:hideSourceOnDrag})}))))}});Target.propTypes={hideSourceOnDrag:react.PropTypes.bool.isRequired,connectDropTarget:react.PropTypes.func.isRequired};var WithDragPreview_Target=Object(lib.DropTarget)(ItemTypes.a.CSV,boxTarget,function(connect,monitor){return{connectDropTarget:connect.dropTarget(),isOver:monitor.isOver()}})(Target);Target.__docgenInfo={description:"",methods:[{name:"moveBox",docblock:null,modifiers:[],params:[{name:"id",type:null},{name:"left",type:null},{name:"top",type:null}],returns:null}]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/WithDragPreview/Target.js"]={name:"Target",docgenInfo:Target.__docgenInfo,path:"src/WithDragPreview/Target.js"});var DragAroundCSV=react_default.a.createClass({displayName:"DragAroundCSV",render:function(){return react_default.a.createElement("div",{style:{flex:1}},react_default.a.createElement("div",{style:{display:"flex",flexDirection:"column"}},react_default.a.createElement("h3",null,"Custom Drag Preview"),react_default.a.createElement(WithDragPreview_Target,{hideSourceOnDrag:!0}),react_default.a.createElement(WithDragPreview_DragPreview,null)))}});__webpack_exports__.a=DragAroundCSV;DragAroundCSV.__docgenInfo={description:"",methods:[]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/WithDragPreview/index.js"]={name:"DragAroundCSV",docgenInfo:DragAroundCSV.__docgenInfo,path:"src/WithDragPreview/index.js"})},280:function(module,__webpack_exports__,__webpack_require__){"use strict";var react=__webpack_require__(0),react_default=__webpack_require__.n(react),update=(__webpack_require__(2),__webpack_require__(5),__webpack_require__(7),__webpack_require__(11),__webpack_require__(30),__webpack_require__(35)),update_default=__webpack_require__.n(update),ItemTypes=__webpack_require__(9),lib=__webpack_require__(6),rand0To255=function(){return Math.floor(256*Math.random())},Source=react_default.a.createClass({displayName:"Source",propTypes:{connectDragSource:react.PropTypes.func.isRequired,isDragging:react.PropTypes.bool.isRequired,id:react.PropTypes.any.isRequired,left:react.PropTypes.number.isRequired,top:react.PropTypes.number.isRequired,hideSourceOnDrag:react.PropTypes.bool.isRequired,children:react.PropTypes.node},render:function(){var _this$props=this.props,hideSourceOnDrag=_this$props.hideSourceOnDrag,left=_this$props.left,top=_this$props.top,connectDragSource=_this$props.connectDragSource;return _this$props.isDragging&&hideSourceOnDrag?null:connectDragSource(react_default.a.createElement("circle",{cx:left,cy:top,r:12,fill:"rgb(".concat(rand0To255(),", ").concat(rand0To255(),", ").concat(rand0To255(),")"),stroke:"black",strokeWidth:2}))}}),CSV_Source=Object(lib.DragSource)(ItemTypes.a.CSV,{beginDrag:function(props){return{id:props.id,left:props.left,top:props.top}}},function(_connect,monitor){return{connectDragSource:_connect.dragSource(),isDragging:monitor.isDragging()}})(Source);Source.__docgenInfo={description:"",methods:[],props:{connectDragSource:{type:{name:"func"},required:!0,description:""},isDragging:{type:{name:"bool"},required:!0,description:""},id:{type:{name:"any"},required:!0,description:""},left:{type:{name:"number"},required:!0,description:""},top:{type:{name:"number"},required:!0,description:""},hideSourceOnDrag:{type:{name:"bool"},required:!0,description:""},children:{type:{name:"node"},required:!1,description:""}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/CSV/Source.js"]={name:"Source",docgenInfo:Source.__docgenInfo,path:"src/CSV/Source.js"});var styles={width:300,height:300,border:"1px solid black",position:"relative",flex:1},boxTarget={drop:function(props,monitor,component){var item=monitor.getItem(),delta=monitor.getDifferenceFromInitialOffset(),left=Math.round(item.left+delta.x),top=Math.round(item.top+delta.y);component.moveBox(item.id,left,top)}},Target=react_default.a.createClass({displayName:"Target",getInitialState:function(){return{circles:{a:{top:20,left:80},b:{top:180,left:20},c:{top:130,left:250}}}},moveBox:function(id,left,top){var obj,key,value;this.setState(update_default()(this.state,{circles:(obj={},key=id,value={$merge:{left:left,top:top}},key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj)}))},render:function(){var _this$props=this.props,hideSourceOnDrag=_this$props.hideSourceOnDrag,connectDropTarget=_this$props.connectDropTarget,circles=this.state.circles;return connectDropTarget(react_default.a.createElement("div",{style:styles},react_default.a.createElement("svg",{style:{width:"100%",height:"100%"}},Object.keys(circles).map(function(key){var _circles$key=circles[key],left=_circles$key.left,top=_circles$key.top;return react_default.a.createElement(CSV_Source,{key:key,id:key,left:left,top:top,hideSourceOnDrag:hideSourceOnDrag})}))))}});Target.propTypes={hideSourceOnDrag:react.PropTypes.bool.isRequired,connectDropTarget:react.PropTypes.func.isRequired};var CSV_Target=Object(lib.DropTarget)(ItemTypes.a.CSV,boxTarget,function(connect,monitor){return{connectDropTarget:connect.dropTarget(),isOver:monitor.isOver()}})(Target);Target.__docgenInfo={description:"",methods:[{name:"moveBox",docblock:null,modifiers:[],params:[{name:"id",type:null},{name:"left",type:null},{name:"top",type:null}],returns:null}]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/CSV/Target.js"]={name:"Target",docgenInfo:Target.__docgenInfo,path:"src/CSV/Target.js"});var DragAroundCSV=react_default.a.createClass({displayName:"DragAroundCSV",getInitialState:function(){return{hideSourceOnDrag:!0}},handleHideSourceClick:function(){this.setState({hideSourceOnDrag:!this.state.hideSourceOnDrag})},render:function(){var hideSourceOnDrag=this.state.hideSourceOnDrag;return react_default.a.createElement("div",{style:{flex:1}},react_default.a.createElement("div",{style:{display:"flex",flexDirection:"column"}},react_default.a.createElement("h3",null,"CSV Elements"),react_default.a.createElement(CSV_Target,{hideSourceOnDrag:hideSourceOnDrag}),react_default.a.createElement("p",null,react_default.a.createElement("label",null,react_default.a.createElement("input",{type:"checkbox",checked:hideSourceOnDrag,onChange:this.handleHideSourceClick}),react_default.a.createElement("small",null,"Hide source while dragging")))))}});__webpack_exports__.a=DragAroundCSV;DragAroundCSV.__docgenInfo={description:"",methods:[{name:"handleHideSourceClick",docblock:null,modifiers:[],params:[],returns:null}]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/CSV/index.js"]={name:"DragAroundCSV",docgenInfo:DragAroundCSV.__docgenInfo,path:"src/CSV/index.js"})},281:function(module,__webpack_exports__,__webpack_require__){"use strict";var react=__webpack_require__(0),react_default=__webpack_require__.n(react),update=(__webpack_require__(2),__webpack_require__(5),__webpack_require__(7),__webpack_require__(11),__webpack_require__(30),__webpack_require__(35)),update_default=__webpack_require__.n(update),ItemTypes=__webpack_require__(9),lib=(__webpack_require__(14),__webpack_require__(16),__webpack_require__(6));function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null==arguments[i]?{}:arguments[i],ownKeys=Object.keys(source);"function"==typeof Object.getOwnPropertySymbols&&(ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))),ownKeys.forEach(function(key){_defineProperty(target,key,source[key])})}return target}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}var style={position:"absolute",border:"1px dashed gray",backgroundColor:"white",padding:"0.5rem 1rem",cursor:"move"},Source=react_default.a.createClass({displayName:"Source",propTypes:{connectDragSource:react.PropTypes.func.isRequired,isDragging:react.PropTypes.bool.isRequired,id:react.PropTypes.any.isRequired,left:react.PropTypes.number.isRequired,top:react.PropTypes.number.isRequired,hideSourceOnDrag:react.PropTypes.bool.isRequired,children:react.PropTypes.node},render:function(){var _this$props=this.props,hideSourceOnDrag=_this$props.hideSourceOnDrag,left=_this$props.left,top=_this$props.top,connectDragSource=_this$props.connectDragSource,isDragging=_this$props.isDragging,children=_this$props.children;return isDragging&&hideSourceOnDrag?null:connectDragSource(react_default.a.createElement("div",{style:_objectSpread({},style,{left:left,top:top})},children))}}),NormalDiv_Source=Object(lib.DragSource)(ItemTypes.a.BOX,{beginDrag:function(props){return{id:props.id,left:props.left,top:props.top}}},function(connect,monitor){return{connectDragSource:connect.dragSource(),isDragging:monitor.isDragging()}})(Source);Source.__docgenInfo={description:"",methods:[],props:{connectDragSource:{type:{name:"func"},required:!0,description:""},isDragging:{type:{name:"bool"},required:!0,description:""},id:{type:{name:"any"},required:!0,description:""},left:{type:{name:"number"},required:!0,description:""},top:{type:{name:"number"},required:!0,description:""},hideSourceOnDrag:{type:{name:"bool"},required:!0,description:""},children:{type:{name:"node"},required:!1,description:""}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/NormalDiv/Source.js"]={name:"Source",docgenInfo:Source.__docgenInfo,path:"src/NormalDiv/Source.js"});var styles={width:300,height:300,border:"1px solid black",position:"relative",flex:1},boxTarget={drop:function(props,monitor,component){var item=monitor.getItem(),delta=monitor.getDifferenceFromInitialOffset(),left=Math.round(item.left+delta.x),top=Math.round(item.top+delta.y);component.moveBox(item.id,left,top)}},Target=react_default.a.createClass({displayName:"Target",getInitialState:function(){return{boxes:{a:{top:20,left:80,title:"Drag me around"},b:{top:180,left:20,title:"Drag me too"}}}},moveBox:function(id,left,top){var obj,key,value;this.setState(update_default()(this.state,{boxes:(obj={},key=id,value={$merge:{left:left,top:top}},key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj)}))},render:function(){var _this$props=this.props,hideSourceOnDrag=_this$props.hideSourceOnDrag,connectDropTarget=_this$props.connectDropTarget,boxes=this.state.boxes;return connectDropTarget(react_default.a.createElement("div",{style:styles},Object.keys(boxes).map(function(key){var _boxes$key=boxes[key],left=_boxes$key.left,top=_boxes$key.top,title=_boxes$key.title;return react_default.a.createElement(NormalDiv_Source,{key:key,id:key,left:left,top:top,hideSourceOnDrag:hideSourceOnDrag},title)})))}});Target.propTypes={hideSourceOnDrag:react.PropTypes.bool.isRequired,connectDropTarget:react.PropTypes.func.isRequired};var NormalDiv_Target=Object(lib.DropTarget)(ItemTypes.a.BOX,boxTarget,function(connect){return{connectDropTarget:connect.dropTarget()}})(Target);Target.__docgenInfo={description:"",methods:[{name:"moveBox",docblock:null,modifiers:[],params:[{name:"id",type:null},{name:"left",type:null},{name:"top",type:null}],returns:null}]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/NormalDiv/Target.js"]={name:"Target",docgenInfo:Target.__docgenInfo,path:"src/NormalDiv/Target.js"});var DragAroundNaive=react_default.a.createClass({displayName:"DragAroundNaive",render:function(){return react_default.a.createElement("div",{style:{flex:1}},react_default.a.createElement("div",{style:{display:"flex",flexDirection:"column"}},react_default.a.createElement("h3",null,"Normal Div"),react_default.a.createElement(NormalDiv_Target,{hideSourceOnDrag:!0})))}});__webpack_exports__.a=DragAroundNaive;DragAroundNaive.__docgenInfo={description:"",methods:[]},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/NormalDiv/index.js"]={name:"DragAroundNaive",docgenInfo:DragAroundNaive.__docgenInfo,path:"src/NormalDiv/index.js"})},282:function(module,exports,__webpack_require__){__webpack_require__(283),__webpack_require__(363),module.exports=__webpack_require__(364)},364:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(7),__webpack_require__(5),__webpack_require__(14);var _storybook_addon_options__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(275),_storybook_react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(56);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_4__.addDecorator)(Object(_storybook_addon_options__WEBPACK_IMPORTED_MODULE_3__.withOptions)({showAddonPanel:!1}));var req=__webpack_require__(542);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_4__.configure)(function(){req.keys().forEach(function(filename){return req(filename)})},module)}.call(this,__webpack_require__(193)(module))},542:function(module,exports,__webpack_require__){var map={"./index.stories.js":543};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=542},543:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),react_dnd__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(6),react_dnd_mouse_backend__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(276),react_dnd_mouse_backend__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(react_dnd_mouse_backend__WEBPACK_IMPORTED_MODULE_2__),_storybook_react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(56),_src_CSV__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(280),_src_NormalDiv__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(281),_src_MultipleTargets__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(278),_src_WithDragPreview__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(279),_src_NestedTargets__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(277),withDnDContext=function(Component){return Object(react_dnd__WEBPACK_IMPORTED_MODULE_1__.DragDropContext)(react_dnd_mouse_backend__WEBPACK_IMPORTED_MODULE_2___default.a)(Component)},CSVStory=withDnDContext(_src_CSV__WEBPACK_IMPORTED_MODULE_4__.a),NormalDivStory=withDnDContext(_src_NormalDiv__WEBPACK_IMPORTED_MODULE_5__.a),MultipleTargetsStory=withDnDContext(_src_MultipleTargets__WEBPACK_IMPORTED_MODULE_6__.a),WithDragPreviewStory=withDnDContext(_src_WithDragPreview__WEBPACK_IMPORTED_MODULE_7__.a),NestedTargetsStory=withDnDContext(_src_NestedTargets__WEBPACK_IMPORTED_MODULE_8__.a);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_3__.storiesOf)("Basic",module).add("CSV",function(){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(CSVStory,null)}).add("Normal Div",function(){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(NormalDivStory,null)}),Object(_storybook_react__WEBPACK_IMPORTED_MODULE_3__.storiesOf)("With Drag Preview",module).add("Custom Drag Preview",function(){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(WithDragPreviewStory,null)}),Object(_storybook_react__WEBPACK_IMPORTED_MODULE_3__.storiesOf)("Advanced",module).add("Multiple Targets",function(){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(MultipleTargetsStory,null)}).add("Nested / Overlapping Targets",function(){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(NestedTargetsStory,null)})}.call(this,__webpack_require__(193)(module))},9:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_exports__.a={BOX:"box",CSV:"csv"}}},[[282,1,2]]]);
//# sourceMappingURL=main.85f208740978715ff675.bundle.js.map