reactjs-popup - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

package.json

 {
   "name": "reactjs-popup",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React Popup Component",
@@ -9,3 +9,4 @@ "main": "reactjsPopup.es.js",
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
@@ -12,0 +13,0 @@ "repository": {

reactjs-popup.dev.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
-	typeof define === 'function' && define.amd ? define(['react'], factory) :
-	(global['reactjs-popup'] = factory(global.React));
-}(this, (function (React) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('react-dom')) :
+	typeof define === 'function' && define.amd ? define(['react', 'react-dom'], factory) :
+	(global['reactjs-popup'] = factory(global.React,global.reactDom));
+}(this, (function (React,reactDom) { 'use strict';
 
@@ -29,3 +29,4 @@ React = React && React.hasOwnProperty('default') ? React['default'] : React;
   var margin = arrow ? 8 : 0;
-  var totalMargin = margin + offset;
+  var MarginX = margin + offset.offsetX;
+  var MarginY = margin + offset.offsetY;
   var args = position.split(" ");
@@ -46,3 +47,3 @@ // the step N 1 : center the popup content => ok
     case "top":
-      top -= height / 2 + triggerBounding.height / 2 + totalMargin;
+      top -= height / 2 + triggerBounding.height / 2 + MarginY;
       transform = "rotate(45deg)";
@@ -53,3 +54,3 @@ arrowTop = "100%";
     case "bottom":
-      top += height / 2 + triggerBounding.height / 2 + totalMargin;
+      top += height / 2 + triggerBounding.height / 2 + MarginY;
       transform = "rotate(225deg)";
@@ -59,3 +60,3 @@ arrowLeft = "50%";
     case "left":
-      left -= width / 2 + triggerBounding.width / 2 + totalMargin;
+      left -= width / 2 + triggerBounding.width / 2 + MarginX;
       transform = " rotate(-45deg)";
@@ -66,3 +67,3 @@ arrowLeft = "100%";
     case "right":
-      left += width / 2 + triggerBounding.width / 2 + totalMargin;
+      left += width / 2 + triggerBounding.width / 2 + MarginX;
       transform = "rotate(135deg)";
@@ -220,3 +221,4 @@ arrowTop = "50%";
           position = _this$props.position,
-          offset = _this$props.offset;
+          offsetX = _this$props.offsetX,
+          offsetY = _this$props.offsetY;
 
@@ -227,3 +229,6 @@ if (modal) return;
       var content = _this.ContentEl.getBoundingClientRect();
-      var cords = calculatePosition(trigger, content, position, arrow, offset);
+      var cords = calculatePosition(trigger, content, position, arrow, {
+        offsetX: offsetX,
+        offsetY: offsetY
+      });
       _this.ContentEl.style.top = cords.top - helper.top + "px";
@@ -238,3 +243,3 @@ _this.ContentEl.style.left = cords.left - helper.left + "px";
       }
-      if (_this.TriggerEl.style.position == "static" || _this.TriggerEl.style.position == "") _this.TriggerEl.style.position = "relative";
+      if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
     };
@@ -272,3 +277,2 @@
 
-      triggerProps.ref = _this.setTriggerRef;
       var onAsArray = Array.isArray(on) ? on : [on];
@@ -330,3 +334,14 @@ for (var i = 0, len = onAsArray.length; i < len; i++) {
     value: function componentDidMount() {
-      if (this.props.defaultOpen) this.setPosition();
+      var _this2 = this;
+
+      var _props = this.props,
+          closeOnEscape = _props.closeOnEscape,
+          defaultOpen = _props.defaultOpen;
+
+      if (defaultOpen) this.setPosition();
+      if (closeOnEscape) {
+        window.addEventListener("keyup", function (e) {
+          if (e.key === "Escape") _this2.closePopup();
+        });
+      }
     }
@@ -341,6 +356,6 @@ }, {
     value: function render() {
-      var _props = this.props,
-          modal = _props.modal,
-          overlayStyle = _props.overlayStyle,
-          closeOnDocumentClick = _props.closeOnDocumentClick;
+      var _props2 = this.props,
+          modal = _props2.modal,
+          overlayStyle = _props2.overlayStyle,
+          closeOnDocumentClick = _props2.closeOnDocumentClick;
 
@@ -361,3 +376,7 @@ var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
         modal && this.renderContent()
-      ), this.state.isOpen && !modal && this.renderContent(), this.renderTrigger()];
+      ), this.state.isOpen && !modal && this.renderContent(), React.createElement(
+        Ref,
+        { innerRef: this.setTriggerRef, key: "R" },
+        this.renderTrigger()
+      )];
     }
@@ -380,2 +399,3 @@ }]);
   closeOnDocumentClick: false,
+  closeOnEscape: true,
   defaultOpen: false,
@@ -391,3 +411,4 @@ on: ["click"],
   arrow: true,
-  offset: 0,
+  offsetX: 0,
+  offsetY: 0,
   mouseEnterDelay: 100,
@@ -407,3 +428,4 @@ mouseLeaveDelay: 100
     lockScroll: PropTypes.bool,
-    offset: PropTypes.number,
+    offsetX: PropTypes.number,
+    offsetY: PropTypes.number,
     mouseEnterDelay: PropTypes.number,
@@ -420,2 +442,30 @@ mouseLeaveDelay: PropTypes.number,
 
+var Ref = function (_React$Component2) {
+  _inherits(Ref, _React$Component2);
+
+  function Ref(props) {
+    _classCallCheck(this, Ref);
+
+    return _possibleConstructorReturn(this, (Ref.__proto__ || Object.getPrototypeOf(Ref)).call(this, props));
+  }
+
+  _createClass(Ref, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var innerRef = this.props.innerRef;
+
+      if (innerRef) innerRef(reactDom.findDOMNode(this));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+
+      return React.Children.only(children);
+    }
+  }]);
+
+  return Ref;
+}(React.Component);
+
 return Popup;
@@ -422,0 +472,0 @@

reactjs-popup.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
-	typeof define === 'function' && define.amd ? define(['react'], factory) :
-	(global['reactjs-popup'] = factory(global.React));
-}(this, (function (React) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('react-dom')) :
+	typeof define === 'function' && define.amd ? define(['react', 'react-dom'], factory) :
+	(global['reactjs-popup'] = factory(global.React,global.reactDom));
+}(this, (function (React,reactDom) { 'use strict';
 
@@ -29,3 +29,4 @@ React = React && React.hasOwnProperty('default') ? React['default'] : React;
   var margin = arrow ? 8 : 0;
-  var totalMargin = margin + offset;
+  var MarginX = margin + offset.offsetX;
+  var MarginY = margin + offset.offsetY;
   var args = position.split(" ");
@@ -46,3 +47,3 @@ // the step N 1 : center the popup content => ok
     case "top":
-      top -= height / 2 + triggerBounding.height / 2 + totalMargin;
+      top -= height / 2 + triggerBounding.height / 2 + MarginY;
       transform = "rotate(45deg)";
@@ -53,3 +54,3 @@ arrowTop = "100%";
     case "bottom":
-      top += height / 2 + triggerBounding.height / 2 + totalMargin;
+      top += height / 2 + triggerBounding.height / 2 + MarginY;
       transform = "rotate(225deg)";
@@ -59,3 +60,3 @@ arrowLeft = "50%";
     case "left":
-      left -= width / 2 + triggerBounding.width / 2 + totalMargin;
+      left -= width / 2 + triggerBounding.width / 2 + MarginX;
       transform = " rotate(-45deg)";
@@ -66,3 +67,3 @@ arrowLeft = "100%";
     case "right":
-      left += width / 2 + triggerBounding.width / 2 + totalMargin;
+      left += width / 2 + triggerBounding.width / 2 + MarginX;
       transform = "rotate(135deg)";
@@ -220,3 +221,4 @@ arrowTop = "50%";
           position = _this$props.position,
-          offset = _this$props.offset;
+          offsetX = _this$props.offsetX,
+          offsetY = _this$props.offsetY;
 
@@ -227,3 +229,6 @@ if (modal) return;
       var content = _this.ContentEl.getBoundingClientRect();
-      var cords = calculatePosition(trigger, content, position, arrow, offset);
+      var cords = calculatePosition(trigger, content, position, arrow, {
+        offsetX: offsetX,
+        offsetY: offsetY
+      });
       _this.ContentEl.style.top = cords.top - helper.top + "px";
@@ -238,3 +243,3 @@ _this.ContentEl.style.left = cords.left - helper.left + "px";
       }
-      if (_this.TriggerEl.style.position == "static" || _this.TriggerEl.style.position == "") _this.TriggerEl.style.position = "relative";
+      if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
     };
@@ -272,3 +277,2 @@
 
-      triggerProps.ref = _this.setTriggerRef;
       var onAsArray = Array.isArray(on) ? on : [on];
@@ -330,3 +334,14 @@ for (var i = 0, len = onAsArray.length; i < len; i++) {
     value: function componentDidMount() {
-      if (this.props.defaultOpen) this.setPosition();
+      var _this2 = this;
+
+      var _props = this.props,
+          closeOnEscape = _props.closeOnEscape,
+          defaultOpen = _props.defaultOpen;
+
+      if (defaultOpen) this.setPosition();
+      if (closeOnEscape) {
+        window.addEventListener("keyup", function (e) {
+          if (e.key === "Escape") _this2.closePopup();
+        });
+      }
     }
@@ -341,6 +356,6 @@ }, {
     value: function render() {
-      var _props = this.props,
-          modal = _props.modal,
-          overlayStyle = _props.overlayStyle,
-          closeOnDocumentClick = _props.closeOnDocumentClick;
+      var _props2 = this.props,
+          modal = _props2.modal,
+          overlayStyle = _props2.overlayStyle,
+          closeOnDocumentClick = _props2.closeOnDocumentClick;
 
@@ -361,3 +376,7 @@ var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
         modal && this.renderContent()
-      ), this.state.isOpen && !modal && this.renderContent(), this.renderTrigger()];
+      ), this.state.isOpen && !modal && this.renderContent(), React.createElement(
+        Ref,
+        { innerRef: this.setTriggerRef, key: "R" },
+        this.renderTrigger()
+      )];
     }
@@ -380,2 +399,3 @@ }]);
   closeOnDocumentClick: false,
+  closeOnEscape: true,
   defaultOpen: false,
@@ -391,3 +411,4 @@ on: ["click"],
   arrow: true,
-  offset: 0,
+  offsetX: 0,
+  offsetY: 0,
   mouseEnterDelay: 100,
@@ -407,3 +428,4 @@ mouseLeaveDelay: 100
     lockScroll: PropTypes.bool,
-    offset: PropTypes.number,
+    offsetX: PropTypes.number,
+    offsetY: PropTypes.number,
     mouseEnterDelay: PropTypes.number,
@@ -420,2 +442,30 @@ mouseLeaveDelay: PropTypes.number,
 
+var Ref = function (_React$Component2) {
+  _inherits(Ref, _React$Component2);
+
+  function Ref(props) {
+    _classCallCheck(this, Ref);
+
+    return _possibleConstructorReturn(this, (Ref.__proto__ || Object.getPrototypeOf(Ref)).call(this, props));
+  }
+
+  _createClass(Ref, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var innerRef = this.props.innerRef;
+
+      if (innerRef) innerRef(reactDom.findDOMNode(this));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+
+      return React.Children.only(children);
+    }
+  }]);
+
+  return Ref;
+}(React.Component);
+
 return Popup;
@@ -422,0 +472,0 @@

reactjs-popup.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e["reactjs-popup"]=t(e.React)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var t={popupContent:{tooltip:{position:"absolute",zIndex:"2",width:"200px",background:"rgb(255, 255, 255)",border:"1px solid rgb(187, 187, 187)",boxShadow:"rgba(0, 0, 0, 0.2) 0px 1px 3px",padding:"5px"},modal:{position:"relative",background:"rgb(255, 255, 255)",width:"50%",margin:"auto",border:"1px solid rgb(187, 187, 187)",padding:"5px"}},popupArrow:{height:"10px",width:"10px",position:"absolute",background:"rgb(255, 255, 255)",transform:"rotate(45deg)",margin:"-5px",zIndex:"-1",boxShadow:"rgba(0, 0, 0, 0.2) 1px 1px 1px"},overlay:{tooltip:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0"},modal:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0",background:"rgba(0, 0, 0,0.5)",display:"flex",zIndex:"999"}}},o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},n=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}();var r=function(r){!function(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)}(i,e.Component);function i(n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);var r=function(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}(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,n));return r.state={isOpen:r.props.defaultOpen},r.lockScroll=function(){r.props.modal&&r.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")},r.resetScroll=function(){r.props.modal&&r.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="auto")},r.togglePopup=function(){r.state.isOpen?r.closePopup():r.openPopup()},r.openPopup=function(){r.state.isOpen||r.setState({isOpen:!0},function(){r.setPosition(),r.props.onOpen(),r.lockScroll()})},r.closePopup=function(){r.state.isOpen&&r.setState({isOpen:!1},function(){r.props.onClose(),r.resetScroll()})},r.onMouseEnter=function(){clearTimeout(r.timeOut);var e=r.props.mouseEnterDelay;r.timeOut=setTimeout(function(){return r.openPopup()},e)},r.onMouseLeave=function(){clearTimeout(r.timeOut);var e=r.props.mouseLeaveDelay;r.timeOut=setTimeout(function(){return r.closePopup()},e)},r.setPosition=function(){var e=r.props,t=e.modal,o=e.arrow,n=e.position,i=e.offset;if(!t){var s=r.HelperEl.getBoundingClientRect(),p=function(e,t,o,n,r){var i=(n?8:0)+r,s=o.split(" "),p=e.top+e.height/2,l=e.left+e.width/2,a=t.height,u=t.width,c=p-a/2,f=l-u/2,d="",g="0%",m="0%";switch(s[0]){case"top":c-=a/2+e.height/2+i,d="rotate(45deg)",g="100%",m="50%";break;case"bottom":c+=a/2+e.height/2+i,d="rotate(225deg)",m="50%";break;case"left":f-=u/2+e.width/2+i,d=" rotate(-45deg)",m="100%",g="50%";break;case"right":f+=u/2+e.width/2+i,d="rotate(135deg)",g="50%"}switch(s[1]){case"top":c=e.top,g=e.height/2+"px";break;case"bottom":c=e.top-a+e.height,g=a-e.height/2+"px";break;case"left":f=e.left,m=e.width/2+"px";break;case"right":f=e.left-u+e.width,m=u-e.width/2+"px"}return{top:c,left:f,transform:d,arrowLeft:m,arrowTop:g}}(r.TriggerEl.getBoundingClientRect(),r.ContentEl.getBoundingClientRect(),n,o,i);r.ContentEl.style.top=p.top-s.top+"px",r.ContentEl.style.left=p.left-s.left+"px",o&&(r.ArrowEl.style.transform=p.transform,r.ArrowEl.style["-ms-transform"]=p.transform,r.ArrowEl.style["-webkit-transform"]=p.transform,r.ArrowEl.style.top=p.arrowTop,r.ArrowEl.style.left=p.arrowLeft),"static"!=r.TriggerEl.style.position&&""!=r.TriggerEl.style.position||(r.TriggerEl.style.position="relative")}},r.addWarperAction=function(){var e=r.props,o=e.contentStyle,n=e.className,i=e.modal,s=e.on,p=i?t.popupContent.modal:t.popupContent.tooltip,l={className:"popup-content "+n,style:Object.assign({},p,o),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&s.includes("hover")&&(l.onMouseEnter=r.onMouseEnter,l.onMouseLeave=r.onMouseLeave),l},r.renderTrigger=function(){var t={key:"T"},o=r.props,n=o.on,i=o.trigger;t.ref=r.setTriggerRef;for(var s=Array.isArray(n)?n:[n],p=0,l=s.length;p<l;p++)switch(s[p]){case"click":t.onClick=r.togglePopup;break;case"hover":t.onMouseEnter=r.onMouseEnter,t.onMouseLeave=r.onMouseLeave;case"focus":t.onFocus=r.onMouseEnter}return"function"==typeof i?e.cloneElement(i(r.state.isOpen),t):e.cloneElement(i,t)},r.renderContent=function(){var n=r.props,i=n.arrow,s=n.modal,p=n.arrowStyle;return e.createElement("div",o({},r.addWarperAction(),{key:"C"}),i&&!s&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},t.popupArrow,p)}),"function"==typeof r.props.children?r.props.children(r.closePopup,r.state.isOpen):r.props.children)},r.setTriggerRef=function(e){return r.TriggerEl=e},r.setContentRef=function(e){return r.ContentEl=e},r.setArrowRef=function(e){return r.ArrowEl=e},r.setHelperRef=function(e){return r.HelperEl=e},r.timeOut=0,r}return n(i,[{key:"componentDidMount",value:function(){this.props.defaultOpen&&this.setPosition()}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeOut)}},{key:"render",value:function(){var o=this.props,n=o.modal,r=o.overlayStyle,i=o.closeOnDocumentClick,s=n?t.overlay.modal:t.overlay.tooltip;return[e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),this.state.isOpen&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},s,r),onClick:i?this.closePopup:void 0},n&&this.renderContent()),this.state.isOpen&&!n&&this.renderContent(),this.renderTrigger()]}}]),i}();return r.defaultProps={children:function(){return e.createElement("span",null," Your Content Here !!")},onOpen:function(){},onClose:function(){},closeOnDocumentClick:!1,defaultOpen:!1,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!0,arrow:!0,offset:0,mouseEnterDelay:100,mouseLeaveDelay:100},r});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):e["reactjs-popup"]=t(e.React,e.reactDom)}(this,function(e,t){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var o={popupContent:{tooltip:{position:"absolute",zIndex:"2",width:"200px",background:"rgb(255, 255, 255)",border:"1px solid rgb(187, 187, 187)",boxShadow:"rgba(0, 0, 0, 0.2) 0px 1px 3px",padding:"5px"},modal:{position:"relative",background:"rgb(255, 255, 255)",width:"50%",margin:"auto",border:"1px solid rgb(187, 187, 187)",padding:"5px"}},popupArrow:{height:"10px",width:"10px",position:"absolute",background:"rgb(255, 255, 255)",transform:"rotate(45deg)",margin:"-5px",zIndex:"-1",boxShadow:"rgba(0, 0, 0, 0.2) 1px 1px 1px"},overlay:{tooltip:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0"},modal:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0",background:"rgba(0, 0, 0,0.5)",display:"flex",zIndex:"999"}}},n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},r=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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 p(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)}var l=function(t){p(l,e.Component);function l(t){i(this,l);var r=s(this,(l.__proto__||Object.getPrototypeOf(l)).call(this,t));return r.state={isOpen:r.props.defaultOpen},r.lockScroll=function(){r.props.modal&&r.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")},r.resetScroll=function(){r.props.modal&&r.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="auto")},r.togglePopup=function(){r.state.isOpen?r.closePopup():r.openPopup()},r.openPopup=function(){r.state.isOpen||r.setState({isOpen:!0},function(){r.setPosition(),r.props.onOpen(),r.lockScroll()})},r.closePopup=function(){r.state.isOpen&&r.setState({isOpen:!1},function(){r.props.onClose(),r.resetScroll()})},r.onMouseEnter=function(){clearTimeout(r.timeOut);var e=r.props.mouseEnterDelay;r.timeOut=setTimeout(function(){return r.openPopup()},e)},r.onMouseLeave=function(){clearTimeout(r.timeOut);var e=r.props.mouseLeaveDelay;r.timeOut=setTimeout(function(){return r.closePopup()},e)},r.setPosition=function(){var e=r.props,t=e.modal,o=e.arrow,n=e.position,i=e.offsetX,s=e.offsetY;if(!t){var p=r.HelperEl.getBoundingClientRect(),l=function(e,t,o,n,r){var i=n?8:0,s=i+r.offsetX,p=i+r.offsetY,l=o.split(" "),a=e.top+e.height/2,u=e.left+e.width/2,c=t.height,f=t.width,d=a-c/2,g=u-f/2,m="",h="0%",y="0%";switch(l[0]){case"top":d-=c/2+e.height/2+p,m="rotate(45deg)",h="100%",y="50%";break;case"bottom":d+=c/2+e.height/2+p,m="rotate(225deg)",y="50%";break;case"left":g-=f/2+e.width/2+s,m=" rotate(-45deg)",y="100%",h="50%";break;case"right":g+=f/2+e.width/2+s,m="rotate(135deg)",h="50%"}switch(l[1]){case"top":d=e.top,h=e.height/2+"px";break;case"bottom":d=e.top-c+e.height,h=c-e.height/2+"px";break;case"left":g=e.left,y=e.width/2+"px";break;case"right":g=e.left-f+e.width,y=f-e.width/2+"px"}return{top:d,left:g,transform:m,arrowLeft:y,arrowTop:h}}(r.TriggerEl.getBoundingClientRect(),r.ContentEl.getBoundingClientRect(),n,o,{offsetX:i,offsetY:s});r.ContentEl.style.top=l.top-p.top+"px",r.ContentEl.style.left=l.left-p.left+"px",o&&(r.ArrowEl.style.transform=l.transform,r.ArrowEl.style["-ms-transform"]=l.transform,r.ArrowEl.style["-webkit-transform"]=l.transform,r.ArrowEl.style.top=l.arrowTop,r.ArrowEl.style.left=l.arrowLeft),"static"!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")||(r.TriggerEl.style.position="relative")}},r.addWarperAction=function(){var e=r.props,t=e.contentStyle,n=e.className,i=e.modal,s=e.on,p=i?o.popupContent.modal:o.popupContent.tooltip,l={className:"popup-content "+n,style:Object.assign({},p,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&s.includes("hover")&&(l.onMouseEnter=r.onMouseEnter,l.onMouseLeave=r.onMouseLeave),l},r.renderTrigger=function(){for(var t={key:"T"},o=r.props,n=o.on,i=o.trigger,s=Array.isArray(n)?n:[n],p=0,l=s.length;p<l;p++)switch(s[p]){case"click":t.onClick=r.togglePopup;break;case"hover":t.onMouseEnter=r.onMouseEnter,t.onMouseLeave=r.onMouseLeave;case"focus":t.onFocus=r.onMouseEnter}return"function"==typeof i?e.cloneElement(i(r.state.isOpen),t):e.cloneElement(i,t)},r.renderContent=function(){var t=r.props,i=t.arrow,s=t.modal,p=t.arrowStyle;return e.createElement("div",n({},r.addWarperAction(),{key:"C"}),i&&!s&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},o.popupArrow,p)}),"function"==typeof r.props.children?r.props.children(r.closePopup,r.state.isOpen):r.props.children)},r.setTriggerRef=function(e){return r.TriggerEl=e},r.setContentRef=function(e){return r.ContentEl=e},r.setArrowRef=function(e){return r.ArrowEl=e},r.setHelperRef=function(e){return r.HelperEl=e},r.timeOut=0,r}return r(l,[{key:"componentDidMount",value:function(){var e=this,t=this.props,o=t.closeOnEscape;t.defaultOpen&&this.setPosition(),o&&window.addEventListener("keyup",function(t){"Escape"===t.key&&e.closePopup()})}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeOut)}},{key:"render",value:function(){var t=this.props,n=t.modal,r=t.overlayStyle,i=t.closeOnDocumentClick,s=n?o.overlay.modal:o.overlay.tooltip;return[e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),this.state.isOpen&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},s,r),onClick:i?this.closePopup:void 0},n&&this.renderContent()),this.state.isOpen&&!n&&this.renderContent(),e.createElement(a,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}]),l}();l.defaultProps={children:function(){return e.createElement("span",null," Your Content Here !!")},onOpen:function(){},onClose:function(){},closeOnDocumentClick:!1,closeOnEscape:!0,defaultOpen:!1,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!0,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100};var a=function(o){p(n,e.Component);function n(e){return i(this,n),s(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e))}return r(n,[{key:"componentDidMount",value:function(){var e=this.props.innerRef;e&&e(t.findDOMNode(this))}},{key:"render",value:function(){var t=this.props.children;return e.Children.only(t)}}]),n}();return l});

reactjsPopup.browser.js

@@ -6,2 +6,3 @@ 'use strict';
 var React = _interopDefault(require('react'));
+var reactDom = require('react-dom');
 
@@ -28,3 +29,4 @@ /* Algo to calculate position
   var margin = arrow ? 8 : 0;
-  var totalMargin = margin + offset;
+  var MarginX = margin + offset.offsetX;
+  var MarginY = margin + offset.offsetY;
   var args = position.split(" ");
@@ -45,3 +47,3 @@ // the step N 1 : center the popup content => ok
     case "top":
-      top -= height / 2 + triggerBounding.height / 2 + totalMargin;
+      top -= height / 2 + triggerBounding.height / 2 + MarginY;
       transform = "rotate(45deg)";
@@ -52,3 +54,3 @@ arrowTop = "100%";
     case "bottom":
-      top += height / 2 + triggerBounding.height / 2 + totalMargin;
+      top += height / 2 + triggerBounding.height / 2 + MarginY;
       transform = "rotate(225deg)";
@@ -58,3 +60,3 @@ arrowLeft = "50%";
     case "left":
-      left -= width / 2 + triggerBounding.width / 2 + totalMargin;
+      left -= width / 2 + triggerBounding.width / 2 + MarginX;
       transform = " rotate(-45deg)";
@@ -65,3 +67,3 @@ arrowLeft = "100%";
     case "right":
-      left += width / 2 + triggerBounding.width / 2 + totalMargin;
+      left += width / 2 + triggerBounding.width / 2 + MarginX;
       transform = "rotate(135deg)";
@@ -219,3 +221,4 @@ arrowTop = "50%";
           position = _this$props.position,
-          offset = _this$props.offset;
+          offsetX = _this$props.offsetX,
+          offsetY = _this$props.offsetY;
 
@@ -226,3 +229,6 @@ if (modal) return;
       var content = _this.ContentEl.getBoundingClientRect();
-      var cords = calculatePosition(trigger, content, position, arrow, offset);
+      var cords = calculatePosition(trigger, content, position, arrow, {
+        offsetX: offsetX,
+        offsetY: offsetY
+      });
       _this.ContentEl.style.top = cords.top - helper.top + "px";
@@ -237,3 +243,3 @@ _this.ContentEl.style.left = cords.left - helper.left + "px";
       }
-      if (_this.TriggerEl.style.position == "static" || _this.TriggerEl.style.position == "") _this.TriggerEl.style.position = "relative";
+      if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
     };
@@ -271,3 +277,2 @@
 
-      triggerProps.ref = _this.setTriggerRef;
       var onAsArray = Array.isArray(on) ? on : [on];
@@ -329,3 +334,14 @@ for (var i = 0, len = onAsArray.length; i < len; i++) {
     value: function componentDidMount() {
-      if (this.props.defaultOpen) this.setPosition();
+      var _this2 = this;
+
+      var _props = this.props,
+          closeOnEscape = _props.closeOnEscape,
+          defaultOpen = _props.defaultOpen;
+
+      if (defaultOpen) this.setPosition();
+      if (closeOnEscape) {
+        window.addEventListener("keyup", function (e) {
+          if (e.key === "Escape") _this2.closePopup();
+        });
+      }
     }
@@ -340,6 +356,6 @@ }, {
     value: function render() {
-      var _props = this.props,
-          modal = _props.modal,
-          overlayStyle = _props.overlayStyle,
-          closeOnDocumentClick = _props.closeOnDocumentClick;
+      var _props2 = this.props,
+          modal = _props2.modal,
+          overlayStyle = _props2.overlayStyle,
+          closeOnDocumentClick = _props2.closeOnDocumentClick;
 
@@ -360,3 +376,7 @@ var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
         modal && this.renderContent()
-      ), this.state.isOpen && !modal && this.renderContent(), this.renderTrigger()];
+      ), this.state.isOpen && !modal && this.renderContent(), React.createElement(
+        Ref,
+        { innerRef: this.setTriggerRef, key: "R" },
+        this.renderTrigger()
+      )];
     }
@@ -379,2 +399,3 @@ }]);
   closeOnDocumentClick: false,
+  closeOnEscape: true,
   defaultOpen: false,
@@ -390,8 +411,36 @@ on: ["click"],
   arrow: true,
-  offset: 0,
+  offsetX: 0,
+  offsetY: 0,
   mouseEnterDelay: 100,
   mouseLeaveDelay: 100
 };
+var Ref = function (_React$Component2) {
+  _inherits(Ref, _React$Component2);
 
+  function Ref(props) {
+    _classCallCheck(this, Ref);
+
+    return _possibleConstructorReturn(this, (Ref.__proto__ || Object.getPrototypeOf(Ref)).call(this, props));
+  }
+
+  _createClass(Ref, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var innerRef = this.props.innerRef;
+
+      if (innerRef) innerRef(reactDom.findDOMNode(this));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+
+      return React.Children.only(children);
+    }
+  }]);
+
+  return Ref;
+}(React.Component);
+
 module.exports = Popup;
 //# sourceMappingURL=reactjsPopup.browser.js.map

reactjsPopup.es.js

 import React from 'react';
+import { findDOMNode } from 'react-dom';
 
@@ -23,3 +24,4 @@ /* Algo to calculate position
   var margin = arrow ? 8 : 0;
-  var totalMargin = margin + offset;
+  var MarginX = margin + offset.offsetX;
+  var MarginY = margin + offset.offsetY;
   var args = position.split(" ");
@@ -40,3 +42,3 @@ // the step N 1 : center the popup content => ok
     case "top":
-      top -= height / 2 + triggerBounding.height / 2 + totalMargin;
+      top -= height / 2 + triggerBounding.height / 2 + MarginY;
       transform = "rotate(45deg)";
@@ -47,3 +49,3 @@ arrowTop = "100%";
     case "bottom":
-      top += height / 2 + triggerBounding.height / 2 + totalMargin;
+      top += height / 2 + triggerBounding.height / 2 + MarginY;
       transform = "rotate(225deg)";
@@ -53,3 +55,3 @@ arrowLeft = "50%";
     case "left":
-      left -= width / 2 + triggerBounding.width / 2 + totalMargin;
+      left -= width / 2 + triggerBounding.width / 2 + MarginX;
       transform = " rotate(-45deg)";
@@ -60,3 +62,3 @@ arrowLeft = "100%";
     case "right":
-      left += width / 2 + triggerBounding.width / 2 + totalMargin;
+      left += width / 2 + triggerBounding.width / 2 + MarginX;
       transform = "rotate(135deg)";
@@ -284,3 +286,4 @@ arrowTop = "50%";
           position = _this$props.position,
-          offset = _this$props.offset;
+          offsetX = _this$props.offsetX,
+          offsetY = _this$props.offsetY;
 
@@ -291,3 +294,6 @@ if (modal) return;
       var content = _this.ContentEl.getBoundingClientRect();
-      var cords = calculatePosition(trigger, content, position, arrow, offset);
+      var cords = calculatePosition(trigger, content, position, arrow, {
+        offsetX: offsetX,
+        offsetY: offsetY
+      });
       _this.ContentEl.style.top = cords.top - helper.top + "px";
@@ -302,3 +308,3 @@ _this.ContentEl.style.left = cords.left - helper.left + "px";
       }
-      if (_this.TriggerEl.style.position == "static" || _this.TriggerEl.style.position == "") _this.TriggerEl.style.position = "relative";
+      if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
     };
@@ -336,3 +342,2 @@
 
-      triggerProps.ref = _this.setTriggerRef;
       var onAsArray = Array.isArray(on) ? on : [on];
@@ -394,3 +399,14 @@ for (var i = 0, len = onAsArray.length; i < len; i++) {
     value: function componentDidMount() {
-      if (this.props.defaultOpen) this.setPosition();
+      var _this2 = this;
+
+      var _props = this.props,
+          closeOnEscape = _props.closeOnEscape,
+          defaultOpen = _props.defaultOpen;
+
+      if (defaultOpen) this.setPosition();
+      if (closeOnEscape) {
+        window.addEventListener("keyup", function (e) {
+          if (e.key === "Escape") _this2.closePopup();
+        });
+      }
     }
@@ -405,6 +421,6 @@ }, {
     value: function render() {
-      var _props = this.props,
-          modal = _props.modal,
-          overlayStyle = _props.overlayStyle,
-          closeOnDocumentClick = _props.closeOnDocumentClick;
+      var _props2 = this.props,
+          modal = _props2.modal,
+          overlayStyle = _props2.overlayStyle,
+          closeOnDocumentClick = _props2.closeOnDocumentClick;
 
@@ -425,3 +441,7 @@ var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
         modal && this.renderContent()
-      ), this.state.isOpen && !modal && this.renderContent(), this.renderTrigger()];
+      ), this.state.isOpen && !modal && this.renderContent(), React.createElement(
+        Ref,
+        { innerRef: this.setTriggerRef, key: "R" },
+        this.renderTrigger()
+      )];
     }
@@ -443,2 +463,3 @@ }]);
   closeOnDocumentClick: false,
+  closeOnEscape: true,
   defaultOpen: false,
@@ -454,3 +475,4 @@ on: ["click"],
   arrow: true,
-  offset: 0,
+  offsetX: 0,
+  offsetY: 0,
   mouseEnterDelay: 100,
@@ -470,3 +492,4 @@ mouseLeaveDelay: 100
     lockScroll: PropTypes.bool,
-    offset: PropTypes.number,
+    offsetX: PropTypes.number,
+    offsetY: PropTypes.number,
     mouseEnterDelay: PropTypes.number,
@@ -483,3 +506,29 @@ mouseLeaveDelay: PropTypes.number,
 
+var Ref = function (_React$Component2) {
+  inherits(Ref, _React$Component2);
+
+  function Ref(props) {
+    classCallCheck(this, Ref);
+    return possibleConstructorReturn(this, (Ref.__proto__ || Object.getPrototypeOf(Ref)).call(this, props));
+  }
+
+  createClass(Ref, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var innerRef = this.props.innerRef;
+
+      if (innerRef) innerRef(findDOMNode(this));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+
+      return React.Children.only(children);
+    }
+  }]);
+  return Ref;
+}(React.Component);
+
 export default Popup;
 //# sourceMappingURL=reactjsPopup.es.js.map

README.md

@@ -109,1 +109,7 @@ # Reactjs-popup
 The code in this project is licensed under MIT license.
+
+# Show your support!
+
+That's all, thank you for your attention, please star the repo to show your support...
+
+...we are all made of stars star !

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

162193

increased by8.46%

Lines of code

1659

increased by11.19%

Number of lines in readme file

115

increased by5.5%

Worsened metrics

Dependency count

2

increased by100%

No dependency changes