react-drag-drop-container - npm Package Compare versions

Comparing version 0.0.6 to 0.0.8

bower.json

@@ -8,3 +8,3 @@ {
   "authors": [
-    "Peter Hollingsworth"
+    "Medidata"
   ],
@@ -11,0 +11,0 @@ "moduleType": [

dist/react-drag-drop-container.js

@@ -99,3 +99,3 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.DragDropContainer = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
       this.dragElem.style.zIndex = -1;
-      var target = document.elementFromPoint(x, y);
+      var target = document.elementFromPoint(x, y) || document.body;
       this.dragElem.style.zIndex = this.props.zIndex;
@@ -102,0 +102,0 @@ // prevent it from selecting itself as the target

dist/react-drag-drop-container.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.DragDropContainer=e()}}(function(){return function e(t,n,r){function o(i,s){if(!n[i]){if(!t[i]){var u="function"==typeof require&&require;if(!s&&u)return u(i,!0);if(a)return a(i,!0);var d=new Error("Cannot find module '"+i+"'");throw d.code="MODULE_NOT_FOUND",d}var h=n[i]={exports:{}};t[i][0].call(h.exports,function(e){var n=t[i][1][e];return o(n?n:e)},h,h.exports,e,t,n,r)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i<r.length;i++)o(r[i]);return o}({1:[function(e,t,n){(function(e){"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 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(n,"__esModule",{value:!0});var i=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=function(e,t,n){for(var r=!0;r;){var o=e,a=t,i=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,a);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(i)}var d=Object.getPrototypeOf(o);if(null===d)return;e=d,t=a,n=i,r=!0,s=d=void 0}},u="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,d=r(u),h=function(e){function t(e){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={clickX:0,clickY:0,left:0,top:0,clicked:!1,dragging:!1,dragged:!1},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.dragElem=null,this.currentTarget=null,this.prevTarget=null}return a(t,e),i(t,[{key:"componentDidMount",value:function(){this.props.dragGhost?this.dragElem=this.refs.drag_ghost.refs.the_ghost:this.dragElem=this.refs.drag_container}},{key:"createEvent",value:function(e,t,n){var r,o=this;"function"!=typeof window.CustomEvent?(r=document.createEvent("CustomEvent"),r.initCustomEvent(e,!0,!0,{})):r=new CustomEvent(e,{bubbles:!0,cancelable:!0});var a=JSON.stringify(this.props.dragData);return r.dataTransfer={getData:function(e){return e===o.props.dataKey?a:void 0},types:[this.props.dataKey]},r}},{key:"setCurrentTarget",value:function(e,t){this.dragElem.style.zIndex=-1;var n=document.elementFromPoint(e,t);this.dragElem.style.zIndex=this.props.zIndex,this.currentTarget=this.dragElem.contains(n)?document.body:n}},{key:"generateEnterLeaveEvents",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget!==this.prevTarget&&(this.prevTarget&&this.prevTarget.dispatchEvent(this.createEvent(this.props.dragLeaveEventName,e,t)),this.currentTarget&&this.currentTarget.dispatchEvent(this.createEvent(this.props.dragEnterEventName,e,t))),this.prevTarget=this.currentTarget}},{key:"generateDropEvent",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget.dispatchEvent(this.createEvent(this.props.dropEventName,e,t))}},{key:"handleMouseDown",value:function(e){e.preventDefault(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp),this.startDrag(e.clientX,e.clientY)}},{key:"handleTouchStart",value:function(e){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){this.setState({clicked:!0,clickX:e-this.state.left,clickY:t-this.state.top}),this.props.onStartDrag(this.props.dragData)}},{key:"handleMouseMove",value:function(e){e.preventDefault(),this.state.clicked&&this.drag(e.clientX,e.clientY)}},{key:"handleTouchMove",value:function(e){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),this.setState({dragging:!0,left:e-this.state.clickX,top:t-this.state.clickY}),this.props.onDragging(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.props.returnToBase?this.setState({left:0,top:0,dragging:!1}):this.setState({dragged:!0,dragging:!1}),this.props.onEndDrag(this.props.dragData,this.currentTarget,e,t)}},{key:"render",value:function(){var e={position:"relative"},t="";return this.props.dragGhost?t=d["default"].createElement(l,{dragging:this.state.dragging,left:this.state.left,top:this.state.top,zIndex:this.props.zIndex,ref:"drag_ghost"},this.props.dragGhost):(e.left=this.state.left,e.top=this.state.top,e.zIndex=this.state.dragging||this.state.dragged?this.props.zIndex:"inherit"),d["default"].createElement("div",{style:e,onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,ref:"drag_container"},this.props.children,t)}}]),t}(d["default"].Component);h.propTypes={onStartDrag:d["default"].PropTypes.func,onDragging:d["default"].PropTypes.func,onEndDrag:d["default"].PropTypes.func,dragData:d["default"].PropTypes.object.isRequired,dataKey:d["default"].PropTypes.string,returnToBase:d["default"].PropTypes.bool,dragGhost:d["default"].PropTypes.node,dragEnterEventName:d["default"].PropTypes.string,dragLeaveEventName:d["default"].PropTypes.string,dropEventName:d["default"].PropTypes.string,zIndex:d["default"].PropTypes.number},h.defaultProps={onStartDrag:function(){},onDragging:function(){},onEndDrag:function(){},dataKey:"data",returnToBase:!0,dragEnterEventName:"dragEnter",dragLeaveEventName:"dragLeave",dropEventName:"drop",zIndex:1e3};var l=function(e){function t(){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return a(t,e),i(t,[{key:"render",value:function(){var e={position:"absolute",zIndex:this.props.zIndex,left:this.props.left,top:this.props.top,display:this.props.dragging?"block":"none"};return d["default"].createElement("div",{style:e,ref:"the_ghost"},this.props.children)}}]),t}(d["default"].Component);n["default"]=h,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.DragDropContainer=e()}}(function(){return function e(t,n,r){function o(i,s){if(!n[i]){if(!t[i]){var u="function"==typeof require&&require;if(!s&&u)return u(i,!0);if(a)return a(i,!0);var d=new Error("Cannot find module '"+i+"'");throw d.code="MODULE_NOT_FOUND",d}var h=n[i]={exports:{}};t[i][0].call(h.exports,function(e){var n=t[i][1][e];return o(n?n:e)},h,h.exports,e,t,n,r)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i<r.length;i++)o(r[i]);return o}({1:[function(e,t,n){(function(e){"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 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(n,"__esModule",{value:!0});var i=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=function(e,t,n){for(var r=!0;r;){var o=e,a=t,i=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,a);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(i)}var d=Object.getPrototypeOf(o);if(null===d)return;e=d,t=a,n=i,r=!0,s=d=void 0}},u="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,d=r(u),h=function(e){function t(e){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={clickX:0,clickY:0,left:0,top:0,clicked:!1,dragging:!1,dragged:!1},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.dragElem=null,this.currentTarget=null,this.prevTarget=null}return a(t,e),i(t,[{key:"componentDidMount",value:function(){this.props.dragGhost?this.dragElem=this.refs.drag_ghost.refs.the_ghost:this.dragElem=this.refs.drag_container}},{key:"createEvent",value:function(e,t,n){var r,o=this;"function"!=typeof window.CustomEvent?(r=document.createEvent("CustomEvent"),r.initCustomEvent(e,!0,!0,{})):r=new CustomEvent(e,{bubbles:!0,cancelable:!0});var a=JSON.stringify(this.props.dragData);return r.dataTransfer={getData:function(e){return e===o.props.dataKey?a:void 0},types:[this.props.dataKey]},r}},{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){this.setCurrentTarget(e,t),this.currentTarget!==this.prevTarget&&(this.prevTarget&&this.prevTarget.dispatchEvent(this.createEvent(this.props.dragLeaveEventName,e,t)),this.currentTarget&&this.currentTarget.dispatchEvent(this.createEvent(this.props.dragEnterEventName,e,t))),this.prevTarget=this.currentTarget}},{key:"generateDropEvent",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget.dispatchEvent(this.createEvent(this.props.dropEventName,e,t))}},{key:"handleMouseDown",value:function(e){e.preventDefault(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp),this.startDrag(e.clientX,e.clientY)}},{key:"handleTouchStart",value:function(e){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){this.setState({clicked:!0,clickX:e-this.state.left,clickY:t-this.state.top}),this.props.onStartDrag(this.props.dragData)}},{key:"handleMouseMove",value:function(e){e.preventDefault(),this.state.clicked&&this.drag(e.clientX,e.clientY)}},{key:"handleTouchMove",value:function(e){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),this.setState({dragging:!0,left:e-this.state.clickX,top:t-this.state.clickY}),this.props.onDragging(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.props.returnToBase?this.setState({left:0,top:0,dragging:!1}):this.setState({dragged:!0,dragging:!1}),this.props.onEndDrag(this.props.dragData,this.currentTarget,e,t)}},{key:"render",value:function(){var e={position:"relative"},t="";return this.props.dragGhost?t=d["default"].createElement(l,{dragging:this.state.dragging,left:this.state.left,top:this.state.top,zIndex:this.props.zIndex,ref:"drag_ghost"},this.props.dragGhost):(e.left=this.state.left,e.top=this.state.top,e.zIndex=this.state.dragging||this.state.dragged?this.props.zIndex:"inherit"),d["default"].createElement("div",{style:e,onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,ref:"drag_container"},this.props.children,t)}}]),t}(d["default"].Component);h.propTypes={onStartDrag:d["default"].PropTypes.func,onDragging:d["default"].PropTypes.func,onEndDrag:d["default"].PropTypes.func,dragData:d["default"].PropTypes.object.isRequired,dataKey:d["default"].PropTypes.string,returnToBase:d["default"].PropTypes.bool,dragGhost:d["default"].PropTypes.node,dragEnterEventName:d["default"].PropTypes.string,dragLeaveEventName:d["default"].PropTypes.string,dropEventName:d["default"].PropTypes.string,zIndex:d["default"].PropTypes.number},h.defaultProps={onStartDrag:function(){},onDragging:function(){},onEndDrag:function(){},dataKey:"data",returnToBase:!0,dragEnterEventName:"dragEnter",dragLeaveEventName:"dragLeave",dropEventName:"drop",zIndex:1e3};var l=function(e){function t(){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return a(t,e),i(t,[{key:"render",value:function(){var e={position:"absolute",zIndex:this.props.zIndex,left:this.props.left,top:this.props.top,display:this.props.dragging?"block":"none"};return d["default"].createElement("div",{style:e,ref:"the_ghost"},this.props.children)}}]),t}(d["default"].Component);n["default"]=h,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});

lib/DragDropContainer.js

@@ -97,3 +97,3 @@ 'use strict';
       this.dragElem.style.zIndex = -1;
-      var target = document.elementFromPoint(x, y);
+      var target = document.elementFromPoint(x, y) || document.body;
       this.dragElem.style.zIndex = this.props.zIndex;
@@ -100,0 +100,0 @@ // prevent it from selecting itself as the target

package.json

 {
   "name": "react-drag-drop-container",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "DragDropContainer",
   "main": "lib/DragDropContainer.js",
-  "author": "Peter Hollingsworth",
+  "author": "Medidata",
   "homepage": "https://github.com/peterh32/react-drag-drop-container",
@@ -8,0 +8,0 @@ "repository": {

README.md

@@ -205,3 +205,3 @@ # DragDropContainer
 
-Copyright (c) 2017 Peter Hollingsworth.
+Copyright (c) 2017 Medidata.
 

src/DragDropContainer.js

@@ -66,3 +66,3 @@ import React from 'react';
     this.dragElem.style.zIndex = -1;
-    var target = document.elementFromPoint(x, y);
+    var target = document.elementFromPoint(x, y) || document.body;
     this.dragElem.style.zIndex = this.props.zIndex;
@@ -69,0 +69,0 @@ // prevent it from selecting itself as the target

No alert changes

Improved metrics

Total package byte prevSize

266130

increased by0.01%

No dependency changes