react-ant-dragger
Version:
Component-based drag and drop for React.js
3 lines (2 loc) • 12.4 kB
JavaScript
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("prop-types"),require("react-dnd"),require("react-dom"),require("react-dnd-html5-backend")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","react-dnd","react-dom","react-dnd-html5-backend"],r):r(e.AntDragger={},e.React,e.PropTypes,e.ReactDnD,e.ReactDOM,e.ReactDnDHTML5Backend)}(this,function(e,r,t,n,o,a){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r,t=t&&t.hasOwnProperty("default")?t.default:t,o=o&&o.hasOwnProperty("default")?o.default:o,a=a&&a.hasOwnProperty("default")?a.default:a;var i,c,p=(function(e,r){Object.defineProperty(r,"__esModule",{value:!0}),r.default=function(e,r){if(e===r)return!0;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=Object.prototype.hasOwnProperty,a=0;a<t.length;a+=1){if(!o.call(r,t[a])||e[t[a]]!==r[t[a]])return!1;var i=e[t[a]],c=r[t[a]];if(i!==c)return!1}return!0}}(i={exports:{}},i.exports),i.exports),s=(c=p)&&c.__esModule&&Object.prototype.hasOwnProperty.call(c,"default")?c.default:c,g=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},d=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),f=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},l=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},h=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},y=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},v=function(e){function t(){return g(this,t),y(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return l(t,e),d(t,[{key:"getChildContext",value:function(){return{dragSourceCreator:this.props.connectDragSource,dragCursor:this.props.dragCursor,dragHandlerType:this.props.dragHandlerType}}},{key:"componentDidMount",value:function(){var e=this.props,r=e.children,t=e.dragToken,n=e.draggerPreview,o=e.connectDragPreview;if(n&&"function"==typeof n){var a=n(t(),r.props);"function"==typeof a?a(o):"function"==typeof a.then?a.then(o):o(a)}}},{key:"componentDidUpdate",value:function(e,r){var t=this.props,n=t.dragToken,o=t.dispatcher,a=t.isOver,i=t.item,c=e.isOver;!c&&a?o("ENTER",{source:i&&i.$source,target:n(),props:this.props,component:this}):!a&&c&&o("LEAVE",{source:i&&i.$source,target:n(),props:this.props,component:this})}},{key:"render",value:function(){var e=this.props,t=e.children,n=(e.dispatcher,e.dragToken,e.dragCursor),o=e.draggingHint,a=e.dragHandlerType,i=e.wrapTag,c=e.wrapStyle,p=e.wrapClassName,s=e.draggerPreview,g=e.connectDragSource,d=e.connectDropTarget,f=e.connectDragPreview,l=e.isDragging,y=(e.isOver,e.item,e.itemType,e.differenceFromInitialOffset),v=(e.initialClientOffset,e.initialSourceClientOffset,e.clientOffset,e.sourceClientOffset,h(e,["children","dispatcher","dragToken","dragCursor","draggingHint","dragHandlerType","wrapTag","wrapStyle","wrapClassName","draggerPreview","connectDragSource","connectDropTarget","connectDragPreview","isDragging","isOver","item","itemType","differenceFromInitialOffset","initialClientOffset","initialSourceClientOffset","clientOffset","sourceClientOffset"])),D=p;"string"!=typeof D&&"function"==typeof D.join&&(D=D.join(" "));var O=u({cursor:"default"!==a?"auto":n},c),m=u({className:D,style:O},v),T=t;if("string"!=typeof T&&(T=r.Children.only(T)),l&&"function"==typeof o&&null!==y){var C=o(m,T);C&&(m=C)}return T="string"!=typeof T.type?r.createElement(i,m,T):r.cloneElement(T,u({},T.props,m,{style:u({},T.props.style,m.style)})),s||(T=f(T)),"default"===a&&(T=g(T)),d(T)}}]),t}(r.Component);v.childContextTypes={dragSourceCreator:t.func,dragCursor:t.string,dragHandlerType:t.string};var D=function(e){function t(e,r){g(this,t);var n=y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,r));return n.dragSource={beginDrag:n.dispatchBeginDragEvent.bind(n),endDrag:n.dispatchEndDragEvent.bind(n),canDrag:n.dispatchCanDragEvent.bind(n)},n.dropTarget={hover:n.dispatchHoverEvent.bind(n),drop:n.dispatchDropEvent.bind(n),canDrop:n.dispatchCanDropEvent.bind(n)},n.cachedWrapped=void 0,n}return l(t,e),d(t,[{key:"componentWillUnmount",value:function(){this.cachedWrapped=void 0}},{key:"dispatchBeginDragEvent",value:function(e,r,t){var n=this.props.dragToken(),o=this.context.dispatcher("BEGIN_DRAG",{source:n,props:e,component:t});return void 0===o&&(o={}),void 0===o.dragToken&&(o.dragToken=n),o.$target=o.$source=o.dragToken,o}},{key:"dispatchEndDragEvent",value:function(e,r,t){var n=r.getItem(),o=n.$target,a=n.$source;this.context.dispatcher("END_DRAG",{target:o,source:a,props:e,component:t})}},{key:"dispatchCanDragEvent",value:function(e,r){var t=this.props.dragToken(),n=this.context.dispatcher("CAN_DRAG",{source:t,props:e});return void 0===n&&(n=!0),n}},{key:"dispatchHoverEvent",value:function(e,r,t){var n=t.props.dragToken(),o=r.getItem().$source;if(!s(n,o)||n!==o){r.getItem().$target=n;var a=this.context.dispatcher("HOVER",{target:n,source:o,props:e,component:t});return a&&a.constructor===n.constructor&&(r.getItem().$target=a),a}}},{key:"dispatchDropEvent",value:function(e,r,t){var n=r.getItem(),o=n.$target,a=n.$source;return this.context.dispatcher("DROP",{target:o,source:a,props:e,component:t})}},{key:"dispatchCanDropEvent",value:function(e,r){var t=r.getItem(),n=t.$target,o=t.$source,a=this.context.dispatcher("CAN_DROP",{target:n,source:o,props:e});return void 0===a&&(a=!0),a}},{key:"render",value:function(){var e=this.props,t=e.children,o=e.dragToken,a=e.dragCursor,i=e.draggingHint,c=e.wrapTag,p=e.wrapStyle,s=e.wrapClassName,g=h(e,["children","dragToken","dragCursor","draggingHint","wrapTag","wrapStyle","wrapClassName"]),d=this.context,f=d.dispatcher,l=d.draggerType,y=d.draggerPreview;this.cachedWrapped||(this.cachedWrapped=n.DragSource(l,this.dragSource,function(e,r){return{connectDragSource:e.dragSource(),connectDragPreview:e.dragPreview(),isDragging:r.isDragging(),initialClientOffset:r.getInitialClientOffset(),initialSourceClientOffset:r.getInitialSourceClientOffset()}})(n.DropTarget(l,this.dropTarget,function(e,r){return{connectDropTarget:e.dropTarget(),isOver:r.isOver({shallow:!0}),item:r.getItem(),itemType:r.getItemType(),differenceFromInitialOffset:r.getDifferenceFromInitialOffset(),clientOffset:r.getClientOffset(),sourceClientOffset:r.getSourceClientOffset()}})(v)));var D=this.cachedWrapped,O={dragCursor:a,draggingHint:i,wrapTag:c,wrapStyle:p,wrapClassName:s,draggerPreview:y,dragToken:o,dispatcher:f};return r.createElement(D,u({},O,g),t)}}]),t}(r.Component);D.contextTypes={dispatcher:t.func,draggerType:t.string,dragDropManager:t.object,draggerPreview:t.func},D.propTypes={dragToken:t.func.isRequired,draggingHint:t.func,dragHandlerType:t.oneOf(["default","handler"]),dragCursor:t.oneOf(["default","move","pointer"]),wrapTag:t.string,wrapStyle:t.object,wrapClassName:t.oneOfType([t.arrayOf(t.string),t.string])},D.defaultProps={wrapTag:"div",dragCursor:"default",dragHandlerType:"default",wrapStyle:{},wrapClassName:""};var O,m=function(e){return function(r,t){return e(r,t)}},T=(f(O={},"BEGIN_DRAG","onDragStart"),f(O,"END_DRAG","onDragEnd"),f(O,"HOVER","onDragging"),f(O,"ENTER","onDragEnter"),f(O,"LEAVE","onDragLeave"),f(O,"DROP","onDrop"),f(O,"CAN_DRAG","canDrag"),f(O,"CAN_DROP","canDrop"),O),C=function(){},b=function(e){function t(e,r){g(this,t);var n=y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,r));return n.notifyHandler=n.notifyHandler.bind(n),n.dispatcher=m(n.notifyHandler),n}return l(t,e),d(t,[{key:"getChildContext",value:function(){return{dispatcher:this.dispatcher,draggerType:this.props.draggerType,draggerPreview:this.props.draggerPreview}}},{key:"notifyHandler",value:function(e,r){var t=r.target,n=r.source,o=r.props,a=r.component,i=this.props[T[e]];return"CAN_DROP"!==e||i||(i=this.props.canDrag),i||console.warn("Unknown event type",e),i&&i(function(e,r){return function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n={source:e,target:r},o={item:t.item,itemType:t.itemType,isDragging:t.isDragging,isOver:t.isOver,differenceFromInitialOffset:t.differenceFromInitialOffset,initialClientOffset:t.initialClientOffset,initialSourceClientOffset:t.initialSourceClientOffset,clientOffset:t.clientOffset,sourceClientOffset:t.sourceClientOffset};return u({},n,o)}}(n,t)(o),o,a)}},{key:"render",value:function(){return(0,this.props.connectDropTarget)(r.Children.only(this.props.children))}}]),t}(r.Component);b.propTypes={onDragStart:t.func,onDragEnd:t.func,onDrop:t.func,onDragging:t.func,onDragEnter:t.func,onDragLeave:t.func,canDrag:t.func,canDrop:t.func,draggerType:t.string,draggerPreview:t.func},b.defaultProps={onDragStart:C,onDragEnd:C,onDrop:C,onDragging:C,onDragEnter:C,onDragLeave:C,canDrag:function(){return!0},canDrop:void 0,draggerType:"__dragger__",draggerPreview:void 0},b.childContextTypes={dispatcher:t.func,draggerType:t.string,draggerPreview:t.func},b.contextTypes={dragDropManager:t.object};var w=function(e){function t(e){g(this,t);var r=y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));if(r.dropTarget={hover:r.handleContainerHover.bind(r)},r.edgeWidth=r.props.edgeWidth,"number"==typeof r.edgeWidth){var n=r.edgeWidth;r.edgeWidth={left:n,top:n,right:n,bottom:n}}return r.cachedWrapped=void 0,r}return l(t,e),d(t,[{key:"componentWillUnmount",value:function(){this.cachedWrapped=void 0}},{key:"componentDidMount",value:function(){this.refreshBoundingRect()}},{key:"componentDidUpdate",value:function(){this.refreshBoundingRect()}},{key:"handleContainerHover",value:function(e,r,t){var n=r.getClientOffset(),o=n.x,a=n.y,i=this.containerBoundingRect,c=i.left,p=i.top,s=i.right,g=i.bottom,d=this.edgeWidth,f={left:c+d.left,top:p+d.top,right:s-d.right,bottom:g-d.bottom},u={left:o<=f.left,top:a<=f.top,right:o>=f.right,bottom:a>=f.bottom};(u.left||u.top||u.right||u.bottom)&&this.props.onDragEdge({strike:u,client:{x:o,y:a},edge:f,itemType:r.getItemType(),initialClientOffset:r.getInitialClientOffset(),initialSourceClientOffset:r.getInitialSourceClientOffset(),clientOffset:r.getClientOffset(),sourceClientOffset:r.getSourceClientOffset(),differenceFromInitialOffset:r.getDifferenceFromInitialOffset()},e,t)}},{key:"refreshBoundingRect",value:function(){var e=this;setTimeout(function(){var r=o.findDOMNode(e);e.containerBoundingRect=r.getBoundingClientRect()},0)}},{key:"render",value:function(){this.cachedWrapped||(this.cachedWrapped=n.DropTarget(this.props.draggerType,this.dropTarget,function(e,r){return{connectDropTarget:e.dropTarget()}})(b));var e=this.cachedWrapped;return r.createElement(e,this.props,this.props.children)}}]),t}(r.Component);w.propTypes={onDragEdge:t.func,edgeWidth:t.oneOfType([t.number,t.object]),draggerType:t.string},w.defaultProps={onDragEdge:C,edgeWidth:20,draggerType:"__dragger__"};var _=n.DragDropContext(a),E=function(e){function t(){return g(this,t),y(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return l(t,e),d(t,[{key:"render",value:function(){var e=this.context,t=e.dragSourceCreator,n=e.dragHandlerType,o=e.dragCursor,a=u({cursor:o},this.props.style),i=this.props.className,c=this.props.children;if("handler"===n){var p=this.props.wrapTag;c=t(r.createElement(p,{className:i,style:a},c))}return c}}]),t}(r.Component);E.contextTypes={dragSourceCreator:t.func,dragHandlerType:t.string,dragCursor:t.string},E.propTypes={wrapTag:t.string},E.defaultProps={wrapTag:"div"};var P=D,k=w,S=_,x=E,H={Draggable:P,Dragger:k,DraggerContext:S,DraggerHandler:x};e.Draggable=P,e.Dragger=k,e.DraggerContext=S,e.DraggerHandler=x,e.default=H,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ant-dragger.min.js.map