reactjs-popup - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

package.json

 {
   "name": "reactjs-popup",
-  "version": "1.0.5",
-  "description": "React Popup Component",
-  "main": "reactjsPopup.es.js",
-  "module": "reactjsPopup.es.js",
-  "jsnext:main": "reactjsPopup.es.js",
+  "version": "1.0.6",
+  "description": "React Popup Component - Modals,Tooltips and Menus —  All in one",
+  "main": "reactjs-popup.es.js",
+  "module": "reactjs-popup.es.js",
+  "jsnext:main": "reactjs-popup.es.js",
+  "unpkg": "reactjs-popup.js",
+  "jsdelivr": "reactjs-popup.js",
   "peerDependencies": {
@@ -19,5 +21,10 @@ "react": "^16.0.0",
     "popup",
+    "modal",
+    "tooltip",
+    "react-modal",
     "reactjs",
     "react-popup",
-    "reactjs-popup"
+    "reactjs-popup",
+    "reactjs-modal",
+    "react-tooltip"
   ],
@@ -24,0 +31,0 @@ "author": "Youssouf EL AZIZI <[e-mail]>",

reactjs-popup.js

@@ -0,471 +1,532 @@
+/*!
+ * reactjs-popup v1.0.6
+ * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
+ * Released under the MIT License.
+ */
 (function (global, factory) {
-	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));
+  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.reactjsPopup = factory(global.React,global.reactDom));
 }(this, (function (React,reactDom) { 'use strict';
 
-React = React && React.hasOwnProperty('default') ? React['default'] : React;
+  React = React && React.hasOwnProperty('default') ? React['default'] : React;
 
-/* Algo to calculate position 
-  1. center position for popup content : the center of the trigger will be the center of the content content
-      so the popup content position will be like this :
-      top => the y of the center for the trigger element : trigger.top + trigger.height/2
-      left => the x of the center for the trigger element : trigger.left + trigger.width/2
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
 
-  2. translate position according to the first  position attribute  passed  in the function argument 
-      for example :
-        position = 'left top'
-        we need to handle the first argument in the position: 'left' => that's mean we need to translate the popup content according to the X axis by - content.width/2
-      
-  3.translate position according to the first  position attribute  passed  in the function argument 
-    for example :
-      position = 'left top'
-      the second argument 'top' => translate popup content by + content.height*4/5
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
 
-*/
+      return target;
+    };
 
-function calculatePosition(triggerBounding, ContentBounding, position, arrow, offset) {
-  var margin = arrow ? 8 : 0;
-  var MarginX = margin + offset.offsetX;
-  var MarginY = margin + offset.offsetY;
-  var args = position.split(" ");
-  // the step N 1 : center the popup content => ok
-  var CenterTop = triggerBounding.top + triggerBounding.height / 2;
-  var CenterLeft = triggerBounding.left + triggerBounding.width / 2;
-  var height = ContentBounding.height,
-      width = ContentBounding.width;
-
-  var top = CenterTop - height / 2;
-  var left = CenterLeft - width / 2;
-  var transform = "";
-  var arrowTop = "0%";
-  var arrowLeft = "0%";
-  // the  step N 2 : => ok
-  switch (args[0]) {
-    case "top":
-      top -= height / 2 + triggerBounding.height / 2 + MarginY;
-      transform = "rotate(45deg)";
-      arrowTop = "100%";
-      arrowLeft = "50%";
-      break;
-    case "bottom":
-      top += height / 2 + triggerBounding.height / 2 + MarginY;
-      transform = "rotate(225deg)";
-      arrowLeft = "50%";
-      break;
-    case "left":
-      left -= width / 2 + triggerBounding.width / 2 + MarginX;
-      transform = " rotate(-45deg)";
-      arrowLeft = "100%";
-      arrowTop = "50%";
-      break;
-    case "right":
-      left += width / 2 + triggerBounding.width / 2 + MarginX;
-      transform = "rotate(135deg)";
-      arrowTop = "50%";
-
-      break;
+    return _extends.apply(this, arguments);
   }
-  switch (args[1]) {
-    case "top":
-      top = triggerBounding.top;
-      arrowTop = triggerBounding.height / 2 + "px";
-      break;
-    case "bottom":
-      top = triggerBounding.top - height + triggerBounding.height;
-      arrowTop = height - triggerBounding.height / 2 + "px";
-      break;
-    case "left":
-      left = triggerBounding.left;
-      arrowLeft = triggerBounding.width / 2 + "px";
-      break;
-    case "right":
-      left = triggerBounding.left - width + triggerBounding.width;
-      arrowLeft = width - triggerBounding.width / 2 + "px";
-      break;
-  }
 
-  return { top: top, left: left, transform: transform, arrowLeft: arrowLeft, arrowTop: arrowTop };
-}
+  /* Algo to calculate position 
+    1. center position for popup content : the center of the trigger will be the center of the content content
+        so the popup content position will be like this :
+        top => the y of the center for the trigger element : trigger.top + trigger.height/2
+        left => the x of the center for the trigger element : trigger.left + trigger.width/2
 
-var styles = {
-  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"
-    }
-  }
-};
+    2. translate position according to the first  position attribute  passed  in the function argument 
+        for example :
+          position = 'left top'
+          we need to handle the first argument in the position: 'left' => that's mean we need to translate the popup content according to the X axis by - content.width/2
+        
+    3.translate position according to the first  position attribute  passed  in the function argument 
+      for example :
+        position = 'left top'
+        the second argument 'top' => translate popup content by + content.height*4/5
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+  */
+  function calculatePosition(triggerBounding, ContentBounding, position, arrow, offset) {
+    const margin = arrow ? 8 : 0;
+    const MarginX = margin + offset.offsetX;
+    const MarginY = margin + offset.offsetY;
+    const args = position.split(" "); // the step N 1 : center the popup content => ok
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+    const CenterTop = triggerBounding.top + triggerBounding.height / 2;
+    const CenterLeft = triggerBounding.left + triggerBounding.width / 2;
+    const {
+      height,
+      width
+    } = ContentBounding;
+    let top = CenterTop - height / 2;
+    let left = CenterLeft - width / 2;
+    let transform = "";
+    let arrowTop = "0%";
+    let arrowLeft = "0%"; // the  step N 2 : => ok
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+    switch (args[0]) {
+      case "top":
+        top -= height / 2 + triggerBounding.height / 2 + MarginY;
+        transform = `rotate(45deg)`;
+        arrowTop = "100%";
+        arrowLeft = "50%";
+        break;
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+      case "bottom":
+        top += height / 2 + triggerBounding.height / 2 + MarginY;
+        transform = `rotate(225deg)`;
+        arrowLeft = "50%";
+        break;
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+      case "left":
+        left -= width / 2 + triggerBounding.width / 2 + MarginX;
+        transform = ` rotate(-45deg)`;
+        arrowLeft = "100%";
+        arrowTop = "50%";
+        break;
 
-var Popup = function (_React$PureComponent) {
-  _inherits(Popup, _React$PureComponent);
+      case "right":
+        left += width / 2 + triggerBounding.width / 2 + MarginX;
+        transform = `rotate(135deg)`;
+        arrowTop = "50%";
+        break;
+    }
 
-  function Popup(props) {
-    _classCallCheck(this, Popup);
+    switch (args[1]) {
+      case "top":
+        top = triggerBounding.top;
+        arrowTop = triggerBounding.height / 2 + "px";
+        break;
 
-    var _this = _possibleConstructorReturn(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).call(this, props));
+      case "bottom":
+        top = triggerBounding.top - height + triggerBounding.height;
+        arrowTop = height - triggerBounding.height / 2 + "px";
+        break;
 
-    _this.state = {
-      isOpen: _this.props.open || _this.props.defaultOpen,
-      modal: _this.props.modal ? true : !_this.props.trigger
-      // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
-    };
+      case "left":
+        left = triggerBounding.left;
+        arrowLeft = triggerBounding.width / 2 + "px";
+        break;
 
-    _this.lockScroll = function () {
-      if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
-    };
+      case "right":
+        left = triggerBounding.left - width + triggerBounding.width;
+        arrowLeft = width - triggerBounding.width / 2 + "px";
+        break;
+    }
 
-    _this.resetScroll = function () {
-      if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
+    return {
+      top,
+      left,
+      transform,
+      arrowLeft,
+      arrowTop
     };
+  }
 
-    _this.togglePopup = function () {
-      if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
-    };
+  var styles = {
+    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"
+      }
+    }
+  };
 
-    _this.openPopup = function () {
-      if (_this.state.isOpen) return;
-      _this.setState({ isOpen: true }, function () {
-        _this.setPosition();
-        _this.props.onOpen();
-        _this.lockScroll();
-      });
-    };
+  class Popup extends React.PureComponent {
+    constructor(props) {
+      super(props);
+      Object.defineProperty(this, "state", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: {
+          isOpen: this.props.open || this.props.defaultOpen,
+          modal: this.props.modal ? true : !this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
 
-    _this.closePopup = function () {
-      if (!_this.state.isOpen) return;
-      _this.setState({ isOpen: false }, function () {
-        _this.props.onClose();
-        _this.resetScroll();
+        }
       });
-    };
+      Object.defineProperty(this, "lockScroll", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: () => {
+          if (this.state.modal && this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
+        }
+      });
+      Object.defineProperty(this, "resetScroll", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: () => {
+          if (this.state.modal && this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
+        }
+      });
+      Object.defineProperty(this, "togglePopup", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: () => {
+          if (this.state.isOpen) this.closePopup();else this.openPopup();
+        }
+      });
+      Object.defineProperty(this, "openPopup", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: () => {
+          if (this.state.isOpen) return;
+          this.setState({
+            isOpen: true
+          }, () => {
+            this.setPosition();
+            this.props.onOpen();
+            this.lockScroll();
+          });
+        }
+      });
+      Object.defineProperty(this, "closePopup", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: () => {
+          if (!this.state.isOpen) return;
+          this.setState({
+            isOpen: false
+          }, () => {
+            this.props.onClose();
+            this.resetScroll();
+          });
+        }
+      });
+      Object.defineProperty(this, "onMouseEnter", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: () => {
+          clearTimeout(this.timeOut);
+          const {
+            mouseEnterDelay
+          } = this.props;
+          this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);
+        }
+      });
+      Object.defineProperty(this, "onMouseLeave", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: () => {
+          clearTimeout(this.timeOut);
+          const {
+            mouseLeaveDelay
+          } = this.props;
+          this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);
+        }
+      });
+      Object.defineProperty(this, "setPosition", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: () => {
+          const {
+            arrow,
+            position,
+            offsetX,
+            offsetY
+          } = this.props;
+          const {
+            modal
+          } = this.state;
+          if (modal) return;
+          const helper = this.HelperEl.getBoundingClientRect();
+          const trigger = this.TriggerEl.getBoundingClientRect();
+          const content = this.ContentEl.getBoundingClientRect();
+          const cords = calculatePosition(trigger, content, position, arrow, {
+            offsetX,
+            offsetY
+          });
+          this.ContentEl.style.top = cords.top - helper.top + "px";
+          this.ContentEl.style.left = cords.left - helper.left + "px";
 
-    _this.onMouseEnter = function () {
-      clearTimeout(_this.timeOut);
-      var mouseEnterDelay = _this.props.mouseEnterDelay;
+          if (arrow) {
+            this.ArrowEl.style["transform"] = cords.transform;
+            this.ArrowEl.style["-ms-transform"] = cords.transform;
+            this.ArrowEl.style["-webkit-transform"] = cords.transform;
+            this.ArrowEl.style.top = cords.arrowTop;
+            this.ArrowEl.style.left = cords.arrowLeft;
+          }
 
-      _this.timeOut = setTimeout(function () {
-        return _this.openPopup();
-      }, mouseEnterDelay);
-    };
+          if (window.getComputedStyle(this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(this.TriggerEl, null).getPropertyValue("position") == "") this.TriggerEl.style.position = "relative";
+        }
+      });
+      Object.defineProperty(this, "addWarperAction", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: () => {
+          const {
+            contentStyle,
+            className,
+            on
+          } = this.props;
+          const {
+            modal
+          } = this.state;
+          const popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
+          const childrenElementProps = {
+            className: `popup-content ${className}`,
+            style: Object.assign({}, popupContentStyle, contentStyle),
+            ref: this.setContentRef,
+            onClick: e => {
+              e.stopPropagation();
+            }
+          };
 
-    _this.onMouseLeave = function () {
-      clearTimeout(_this.timeOut);
-      var mouseLeaveDelay = _this.props.mouseLeaveDelay;
+          if (!modal && on.includes("hover")) {
+            childrenElementProps.onMouseEnter = this.onMouseEnter;
+            childrenElementProps.onMouseLeave = this.onMouseLeave;
+          }
 
-      _this.timeOut = setTimeout(function () {
-        return _this.closePopup();
-      }, mouseLeaveDelay);
-    };
-
-    _this.setPosition = function () {
-      var _this$props = _this.props,
-          arrow = _this$props.arrow,
-          position = _this$props.position,
-          offsetX = _this$props.offsetX,
-          offsetY = _this$props.offsetY;
-      var modal = _this.state.modal;
-
-      if (modal) return;
-      var helper = _this.HelperEl.getBoundingClientRect();
-      var trigger = _this.TriggerEl.getBoundingClientRect();
-      var content = _this.ContentEl.getBoundingClientRect();
-      var cords = calculatePosition(trigger, content, position, arrow, {
-        offsetX: offsetX,
-        offsetY: offsetY
+          return childrenElementProps;
+        }
       });
-      _this.ContentEl.style.top = cords.top - helper.top + "px";
-      _this.ContentEl.style.left = cords.left - helper.left + "px";
-      if (arrow) {
-        _this.ArrowEl.style["transform"] = cords.transform;
-        _this.ArrowEl.style["-ms-transform"] = cords.transform;
-        _this.ArrowEl.style["-webkit-transform"] = cords.transform;
-        _this.ArrowEl.style.top = cords.arrowTop;
-        _this.ArrowEl.style.left = cords.arrowLeft;
-      }
-      if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
-    };
+      Object.defineProperty(this, "renderTrigger", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: () => {
+          const triggerProps = {
+            key: "T"
+          };
+          const {
+            on,
+            trigger
+          } = this.props;
+          const onAsArray = Array.isArray(on) ? on : [on];
 
-    _this.addWarperAction = function () {
-      var _this$props2 = _this.props,
-          contentStyle = _this$props2.contentStyle,
-          className = _this$props2.className,
-          on = _this$props2.on;
-      var modal = _this.state.modal;
+          for (let i = 0, len = onAsArray.length; i < len; i++) {
+            switch (onAsArray[i]) {
+              case "click":
+                triggerProps.onClick = this.togglePopup;
+                break;
 
-      var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
+              case "hover":
+                triggerProps.onMouseEnter = this.onMouseEnter;
+                triggerProps.onMouseLeave = this.onMouseLeave;
 
-      var childrenElementProps = {
-        className: "popup-content " + className,
-        style: Object.assign({}, popupContentStyle, contentStyle),
-        ref: _this.setContentRef,
-        onClick: function onClick(e) {
-          e.stopPropagation();
-        }
-      };
-      if (!modal && on.includes("hover")) {
-        childrenElementProps.onMouseEnter = _this.onMouseEnter;
-        childrenElementProps.onMouseLeave = _this.onMouseLeave;
-      }
-      return childrenElementProps;
-    };
+              case "focus":
+                triggerProps.onFocus = this.onMouseEnter;
+                break;
+            }
+          }
 
-    _this.renderTrigger = function () {
-      var triggerProps = { key: "T" };
-      var _this$props3 = _this.props,
-          on = _this$props3.on,
-          trigger = _this$props3.trigger;
-
-      var onAsArray = Array.isArray(on) ? on : [on];
-      for (var i = 0, len = onAsArray.length; i < len; i++) {
-        switch (onAsArray[i]) {
-          case "click":
-            triggerProps.onClick = _this.togglePopup;
-            break;
-          case "hover":
-            triggerProps.onMouseEnter = _this.onMouseEnter;
-            triggerProps.onMouseLeave = _this.onMouseLeave;
-          case "focus":
-            triggerProps.onFocus = _this.onMouseEnter;
-            break;
+          if (typeof trigger === "function") return React.cloneElement(trigger(this.state.isOpen), triggerProps);
+          return React.cloneElement(trigger, triggerProps);
         }
-      }
+      });
+      Object.defineProperty(this, "renderContent", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: () => {
+          const {
+            arrow,
+            arrowStyle
+          } = this.props;
+          const {
+            modal
+          } = this.state;
+          return React.createElement("div", _extends({}, this.addWarperAction(), {
+            key: "C"
+          }), arrow && !modal && React.createElement("div", {
+            ref: this.setArrowRef,
+            style: Object.assign({}, styles.popupArrow, arrowStyle)
+          }), typeof this.props.children === "function" ? this.props.children(this.closePopup, this.state.isOpen) : this.props.children);
+        }
+      });
 
-      if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
+      this.setTriggerRef = r => this.TriggerEl = r;
 
-      return React.cloneElement(trigger, triggerProps);
-    };
+      this.setContentRef = r => this.ContentEl = r;
 
-    _this.renderContent = function () {
-      var _this$props4 = _this.props,
-          arrow = _this$props4.arrow,
-          arrowStyle = _this$props4.arrowStyle;
-      var modal = _this.state.modal;
+      this.setArrowRef = r => this.ArrowEl = r;
 
-      return React.createElement(
-        "div",
-        _extends({}, _this.addWarperAction(), { key: "C" }),
-        arrow && !modal && React.createElement("div", {
-          ref: _this.setArrowRef,
-          style: Object.assign({}, styles.popupArrow, arrowStyle)
-        }),
-        typeof _this.props.children === "function" ? _this.props.children(_this.closePopup, _this.state.isOpen) : _this.props.children
-      );
-    };
+      this.setHelperRef = r => this.HelperEl = r;
 
-    _this.setTriggerRef = function (r) {
-      return _this.TriggerEl = r;
-    };
-    _this.setContentRef = function (r) {
-      return _this.ContentEl = r;
-    };
-    _this.setArrowRef = function (r) {
-      return _this.ArrowEl = r;
-    };
-    _this.setHelperRef = function (r) {
-      return _this.HelperEl = r;
-    };
-    _this.timeOut = 0;
-    return _this;
-  }
+      this.timeOut = 0;
+    }
 
-  _createClass(Popup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
+    componentDidMount() {
+      const {
+        closeOnEscape,
+        defaultOpen
+      } = this.props;
+      if (defaultOpen) this.setPosition();
 
-      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();
+        window.addEventListener("keyup", e => {
+          if (e.key === "Escape") this.closePopup();
         });
       }
     }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+
+    componentWillReceiveProps(nextProps) {
       if (this.props.open === nextProps.open) return;
       if (nextProps.open) this.openPopup();else this.closePopup();
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
+
+    componentWillUnmount() {
       // kill any function to execute if the component is unmounted
       clearTimeout(this.timeOut);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _props2 = this.props,
-          overlayStyle = _props2.overlayStyle,
-          closeOnDocumentClick = _props2.closeOnDocumentClick;
-      var modal = this.state.modal;
 
-      var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
+    render() {
+      const {
+        overlayStyle,
+        closeOnDocumentClick
+      } = this.props;
+      const {
+        modal
+      } = this.state;
+      const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
       return [this.state.isOpen && React.createElement("div", {
         key: "H",
-        style: { position: "absolute", top: "0px", left: "0px" },
+        style: {
+          position: "absolute",
+          top: "0px",
+          left: "0px"
+        },
         ref: this.setHelperRef
-      }), this.state.isOpen && React.createElement(
-        "div",
-        {
-          key: "O",
-          className: "popup-overlay",
-          style: Object.assign({}, ovStyle, overlayStyle),
-          onClick: closeOnDocumentClick ? this.closePopup : undefined
-        },
-        modal && this.renderContent()
-      ), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(
-        Ref,
-        { innerRef: this.setTriggerRef, key: "R" },
-        this.renderTrigger()
-      )];
+      }), this.state.isOpen && React.createElement("div", {
+        key: "O",
+        className: "popup-overlay",
+        style: Object.assign({}, ovStyle, overlayStyle),
+        onClick: closeOnDocumentClick ? this.closePopup : undefined
+      }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
+        innerRef: this.setTriggerRef,
+        key: "R"
+      }, this.renderTrigger())];
     }
-  }]);
 
-  return Popup;
-}(React.PureComponent);
+  }
+  Object.defineProperty(Popup, "defaultProps", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: {
+      children: () => React.createElement("span", null, " Your Content Here !!"),
+      trigger: null,
+      onOpen: () => {},
+      onClose: () => {},
+      defaultOpen: false,
+      open: false,
+      closeOnDocumentClick: false,
+      closeOnEscape: true,
+      on: ["click"],
+      contentStyle: {},
+      arrowStyle: {},
+      overlayStyle: {},
+      className: "",
+      position: "bottom center",
+      modal: false,
+      lockScroll: true,
+      arrow: true,
+      offsetX: 0,
+      offsetY: 0,
+      mouseEnterDelay: 100,
+      mouseLeaveDelay: 100
+    }
+  });
 
-Popup.defaultProps = {
-  children: function children() {
-    return React.createElement(
-      "span",
-      null,
-      " Your Content Here !!"
-    );
-  },
-  trigger: null,
-  onOpen: function onOpen() {},
-  onClose: function onClose() {},
-  defaultOpen: false,
-  open: false,
-  closeOnDocumentClick: false,
-  closeOnEscape: true,
-  on: ["click"],
-  contentStyle: {},
-  arrowStyle: {},
-  overlayStyle: {},
-  className: "",
-  position: "bottom center",
-  modal: false,
-  lockScroll: true,
-  arrow: true,
-  offsetX: 0,
-  offsetY: 0,
-  mouseEnterDelay: 100,
-  mouseLeaveDelay: 100
-};
-{
-  var PropTypes = require("prop-types");
+  {
+    const PropTypes = require("prop-types");
 
-  Popup.propTypes = {
-    arrowStyle: PropTypes.object,
-    contentStyle: PropTypes.object,
-    overlayStyle: PropTypes.object,
-    className: PropTypes.string,
-    modal: PropTypes.bool,
-    closeOnDocumentClick: PropTypes.bool,
-    lockScroll: PropTypes.bool,
-    offsetX: PropTypes.number,
-    offsetY: PropTypes.number,
-    mouseEnterDelay: PropTypes.number,
-    mouseLeaveDelay: PropTypes.number,
-    onOpen: PropTypes.func,
-    onClose: PropTypes.func,
-    open: PropTypes.bool,
-    defaultOpen: PropTypes.bool,
-    trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element
-    on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]),
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired,
-    position: PropTypes.oneOf(["top left", "top center", "top right", "bottom left", "bottom center", "bottom right", "right top", "right center", "right bottom", "left top", "left center", "left bottom"])
-  };
-}
-
-var Ref = function (_React$PureComponent2) {
-  _inherits(Ref, _React$PureComponent2);
-
-  function Ref(props) {
-    _classCallCheck(this, Ref);
-
-    return _possibleConstructorReturn(this, (Ref.__proto__ || Object.getPrototypeOf(Ref)).call(this, props));
+    Popup.propTypes = {
+      arrowStyle: PropTypes.object,
+      contentStyle: PropTypes.object,
+      overlayStyle: PropTypes.object,
+      className: PropTypes.string,
+      modal: PropTypes.bool,
+      closeOnDocumentClick: PropTypes.bool,
+      lockScroll: PropTypes.bool,
+      offsetX: PropTypes.number,
+      offsetY: PropTypes.number,
+      mouseEnterDelay: PropTypes.number,
+      mouseLeaveDelay: PropTypes.number,
+      onOpen: PropTypes.func,
+      onClose: PropTypes.func,
+      open: PropTypes.bool,
+      defaultOpen: PropTypes.bool,
+      trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+      // for uncontrolled component we don't need the trigger Element
+      on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]),
+      children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired,
+      position: PropTypes.oneOf(["top left", "top center", "top right", "bottom left", "bottom center", "bottom right", "right top", "right center", "right bottom", "left top", "left center", "left bottom"])
+    };
   }
 
-  _createClass(Ref, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var innerRef = this.props.innerRef;
+  class Ref extends React.PureComponent {
+    constructor(props) {
+      super(props);
+    }
 
+    componentDidMount() {
+      const {
+        innerRef
+      } = this.props;
       if (innerRef) innerRef(reactDom.findDOMNode(this));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var children = this.props.children;
 
+    render() {
+      const {
+        children
+      } = this.props;
       return React.Children.only(children);
     }
-  }]);
 
-  return Ref;
-}(React.PureComponent);
+  }
 
-return Popup;
+  return Popup;
 
 })));
-//# sourceMappingURL=reactjs-popup.js.map

reactjs-popup.min.js

@@ -1,1 +0,7 @@
-!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.PureComponent);function l(t){i(this,l);var r=s(this,(l.__proto__||Object.getPrototypeOf(l)).call(this,t));return r.state={isOpen:r.props.open||r.props.defaultOpen,modal:!!r.props.modal||!r.props.trigger},r.lockScroll=function(){r.state.modal&&r.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")},r.resetScroll=function(){r.state.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.arrow,o=e.position,n=e.offsetX,i=e.offsetY;if(!r.state.modal){var s=r.HelperEl.getBoundingClientRect(),p=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,h="",m="0%",y="0%";switch(l[0]){case"top":d-=c/2+e.height/2+p,h="rotate(45deg)",m="100%",y="50%";break;case"bottom":d+=c/2+e.height/2+p,h="rotate(225deg)",y="50%";break;case"left":g-=f/2+e.width/2+s,h=" rotate(-45deg)",y="100%",m="50%";break;case"right":g+=f/2+e.width/2+s,h="rotate(135deg)",m="50%"}switch(l[1]){case"top":d=e.top,m=e.height/2+"px";break;case"bottom":d=e.top-c+e.height,m=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:h,arrowLeft:y,arrowTop:m}}(r.TriggerEl.getBoundingClientRect(),r.ContentEl.getBoundingClientRect(),o,t,{offsetX:n,offsetY:i});r.ContentEl.style.top=p.top-s.top+"px",r.ContentEl.style.left=p.left-s.left+"px",t&&(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"!=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.on,s=r.state.modal,p=s?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!s&&i.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.arrowStyle,p=r.state.modal;return e.createElement("div",n({},r.addWarperAction(),{key:"C"}),i&&!p&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},o.popupArrow,s)}),"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:"componentWillReceiveProps",value:function(e){this.props.open!==e.open&&(e.open?this.openPopup():this.closePopup())}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeOut)}},{key:"render",value:function(){var t=this.props,n=t.overlayStyle,r=t.closeOnDocumentClick,i=this.state.modal,s=i?o.overlay.modal:o.overlay.tooltip;return[this.state.isOpen&&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,n),onClick:r?this.closePopup:void 0},i&&this.renderContent()),this.state.isOpen&&!i&&this.renderContent(),!!this.props.trigger&&e.createElement(a,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}]),l}();l.defaultProps={children:function(){return e.createElement("span",null," Your Content Here !!")},trigger:null,onOpen:function(){},onClose:function(){},defaultOpen:!1,open:!1,closeOnDocumentClick:!1,closeOnEscape:!0,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.PureComponent);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});
+/*!
+ * reactjs-popup v1.0.6
+ * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
+ * Released under the MIT License.
+ */
+!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.reactjsPopup=t(e.React,e.reactDom)}(this,function(e,t){"use strict";function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}e=e&&e.hasOwnProperty("default")?e.default:e;var r={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"}}};class s extends e.PureComponent{constructor(t){super(t),Object.defineProperty(this,"state",{configurable:!0,enumerable:!0,writable:!0,value:{isOpen:this.props.open||this.props.defaultOpen,modal:!!this.props.modal||!this.props.trigger}}),Object.defineProperty(this,"lockScroll",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.modal&&this.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")}}),Object.defineProperty(this,"resetScroll",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.modal&&this.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="auto")}}),Object.defineProperty(this,"togglePopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen?this.closePopup():this.openPopup()}}),Object.defineProperty(this,"openPopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen||this.setState({isOpen:!0},()=>{this.setPosition(),this.props.onOpen(),this.lockScroll()})}}),Object.defineProperty(this,"closePopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen&&this.setState({isOpen:!1},()=>{this.props.onClose(),this.resetScroll()})}}),Object.defineProperty(this,"onMouseEnter",{configurable:!0,enumerable:!0,writable:!0,value:()=>{clearTimeout(this.timeOut);const{mouseEnterDelay:e}=this.props;this.timeOut=setTimeout(()=>this.openPopup(),e)}}),Object.defineProperty(this,"onMouseLeave",{configurable:!0,enumerable:!0,writable:!0,value:()=>{clearTimeout(this.timeOut);const{mouseLeaveDelay:e}=this.props;this.timeOut=setTimeout(()=>this.closePopup(),e)}}),Object.defineProperty(this,"setPosition",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{arrow:e,position:t,offsetX:o,offsetY:r}=this.props,{modal:s}=this.state;if(s)return;const i=this.HelperEl.getBoundingClientRect(),n=function(e,t,o,r,s){const i=r?8:0,n=i+s.offsetX,l=i+s.offsetY,p=o.split(" "),a=e.top+e.height/2,c=e.left+e.width/2,{height:h,width:u}=t;let d=a-h/2,f=c-u/2,g="",b="0%",m="0%";switch(p[0]){case"top":d-=h/2+e.height/2+l,g="rotate(45deg)",b="100%",m="50%";break;case"bottom":d+=h/2+e.height/2+l,g="rotate(225deg)",m="50%";break;case"left":f-=u/2+e.width/2+n,g=" rotate(-45deg)",m="100%",b="50%";break;case"right":f+=u/2+e.width/2+n,g="rotate(135deg)",b="50%"}switch(p[1]){case"top":d=e.top,b=e.height/2+"px";break;case"bottom":d=e.top-h+e.height,b=h-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:d,left:f,transform:g,arrowLeft:m,arrowTop:b}}(this.TriggerEl.getBoundingClientRect(),this.ContentEl.getBoundingClientRect(),t,e,{offsetX:o,offsetY:r});this.ContentEl.style.top=n.top-i.top+"px",this.ContentEl.style.left=n.left-i.left+"px",e&&(this.ArrowEl.style.transform=n.transform,this.ArrowEl.style["-ms-transform"]=n.transform,this.ArrowEl.style["-webkit-transform"]=n.transform,this.ArrowEl.style.top=n.arrowTop,this.ArrowEl.style.left=n.arrowLeft),"static"!=window.getComputedStyle(this.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(this.TriggerEl,null).getPropertyValue("position")||(this.TriggerEl.style.position="relative")}}),Object.defineProperty(this,"addWarperAction",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{contentStyle:e,className:t,on:o}=this.props,{modal:s}=this.state,i=s?r.popupContent.modal:r.popupContent.tooltip,n={className:`popup-content ${t}`,style:Object.assign({},i,e),ref:this.setContentRef,onClick:e=>{e.stopPropagation()}};return!s&&o.includes("hover")&&(n.onMouseEnter=this.onMouseEnter,n.onMouseLeave=this.onMouseLeave),n}}),Object.defineProperty(this,"renderTrigger",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const t={key:"T"},{on:o,trigger:r}=this.props,s=Array.isArray(o)?o:[o];for(let e=0,o=s.length;e<o;e++)switch(s[e]){case"click":t.onClick=this.togglePopup;break;case"hover":t.onMouseEnter=this.onMouseEnter,t.onMouseLeave=this.onMouseLeave;case"focus":t.onFocus=this.onMouseEnter}return"function"==typeof r?e.cloneElement(r(this.state.isOpen),t):e.cloneElement(r,t)}}),Object.defineProperty(this,"renderContent",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{arrow:t,arrowStyle:s}=this.props,{modal:i}=this.state;return e.createElement("div",o({},this.addWarperAction(),{key:"C"}),t&&!i&&e.createElement("div",{ref:this.setArrowRef,style:Object.assign({},r.popupArrow,s)}),"function"==typeof this.props.children?this.props.children(this.closePopup,this.state.isOpen):this.props.children)}}),this.setTriggerRef=(e=>this.TriggerEl=e),this.setContentRef=(e=>this.ContentEl=e),this.setArrowRef=(e=>this.ArrowEl=e),this.setHelperRef=(e=>this.HelperEl=e),this.timeOut=0}componentDidMount(){const{closeOnEscape:e,defaultOpen:t}=this.props;t&&this.setPosition(),e&&window.addEventListener("keyup",e=>{"Escape"===e.key&&this.closePopup()})}componentWillReceiveProps(e){this.props.open!==e.open&&(e.open?this.openPopup():this.closePopup())}componentWillUnmount(){clearTimeout(this.timeOut)}render(){const{overlayStyle:t,closeOnDocumentClick:o}=this.props,{modal:s}=this.state,n=s?r.overlay.modal:r.overlay.tooltip;return[this.state.isOpen&&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({},n,t),onClick:o?this.closePopup:void 0},s&&this.renderContent()),this.state.isOpen&&!s&&this.renderContent(),!!this.props.trigger&&e.createElement(i,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}Object.defineProperty(s,"defaultProps",{configurable:!0,enumerable:!0,writable:!0,value:{children:()=>e.createElement("span",null," Your Content Here !!"),trigger:null,onOpen:()=>{},onClose:()=>{},defaultOpen:!1,open:!1,closeOnDocumentClick:!1,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!0,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100}});class i extends e.PureComponent{constructor(e){super(e)}componentDidMount(){const{innerRef:e}=this.props;e&&e(t.findDOMNode(this))}render(){const{children:t}=this.props;return e.Children.only(t)}}return s});
+//# sourceMappingURL=reactjs-popup.min.js.map

README.md

 # Reactjs-popup
 
-[![Build Status](https://travis-ci.org/yjose/reactjs-popup.svg?branch=master)](https://travis-ci.org/yjose/reactjs-popup) [![BCH compliance](https://bettercodehub.com/edge/badge/yjose/reactjs-popup?branch=master)](https://bettercodehub.com/) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Build Status][build-badge]][build]
+[![version][version-badge]][package]
+[![downloads][downloads-badge]][npmtrends]
+[![MIT License][license-badge]][license]
 
-[![NPM](https://nodei.co/npm/reactjs-popup.png?compact=true)](https://nodei.co/npm/reactjs-popup/)
+[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
+[![PRs Welcome][prs-badge]][prs]
+[![Code of Conduct][coc-badge]][coc]
 
+[![Watch on GitHub][github-watch-badge]][github-watch]
+[![Star on GitHub][github-star-badge]][github-star]
+[![Tweet][twitter-badge]][twitter]
+
 > built with react Fragment : react 16 Tiny 3KB
@@ -72,5 +81,5 @@
 
-## Contributing
+# Contributing
 
-### Clone Repo
+## Clone Repo
 
@@ -81,27 +90,31 @@ Fork and then clone the repo
 
-### Start Developing
+## Start Developing
 
 Install all npm scripts:
 
-```bash
-npm install
-#or
-yarn install
+    npm install
+    or
+    yarn install
+
+we use a simple package called parcel-story it's a simple storybook alternative more info https://github.com/yjose/parcel-story
+
+Run parcel-story :
+
 ```
+yarn start
+```
 
-we use storybook in this project.before starting, be sure to have some basic knowledge https://storybook.js.org/
-
 Run Test in watch mode
 
-```bash
-npm run storybook
 ```
+yarn test-watch
+```
 
-To make contributing simply you need to create a new story under src/stories directory ( you can copy/past any story to start with ).
+To make contributing simply you need to create a new story with documentation under stories/src directory ( you can copy/past any story to start with ).
 
-In this story, you need to present the new features or the bug fix and don't forget to document your story.
+In this story, you need to present the new features or the bug fix and don't forget to comment your code :) .
 
 Make Changes. If you want to contribute check out the [help wanted](https://github.com/yjose/reactjs-popup/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) issues for things that need fixing.
 
-Before submitting a pull request run `npm run test` to run the unit-tests.
+Before submitting a pull request run `npm run test` to run the unit-tests and `npm run eslint` to check for linting errors in your changes.
 
@@ -114,4 +127,24 @@ ## Licensing
 
-That's all, thank you for your attention, please star the repo to show your support...
+That's all, thank you for your attention, please [![Star on GitHub][github-star-badge]][github-star] the repo to show your support...
 
-...we are all made of stars star !
+...we are all made of stars [![Star on GitHub][github-star-badge]][github-star] !
+
+[build-badge]: https://img.shields.io/travis/yjose/reactjs-popup.svg?style=flat-square
+[build]: https://travis-ci.org/yjose/reactjs-popup
+[version-badge]: https://img.shields.io/npm/v/reactjs-popup.svg?style=flat-square
+[package]: https://www.npmjs.com/package/reactjs-popup
+[downloads-badge]: https://img.shields.io/npm/dm/reactjs-popup.svg?style=flat-square
+[npmtrends]: http://www.npmtrends.com/reactjs-popup
+[license-badge]: https://img.shields.io/npm/l/reactjs-popup.svg?style=flat-square
+[license]: https://github.com/yjose/reactjs-popup/blob/master/LICENSE
+[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs]: http://makeapullrequest.com
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/yjose/reactjs-popup/blob/master/CODE_OF_CONDUCT.md
+[github-watch-badge]: https://img.shields.io/github/watchers/yjose/reactjs-popup.svg?style=social
+[github-watch]: https://github.com/yjose/reactjs-popup/watchers
+[github-star-badge]: https://img.shields.io/github/stars/yjose/reactjs-popup.svg?style=social
+[github-star]: https://github.com/yjose/reactjs-popup/stargazers
+[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20reactjs-popup%20by%20%40ElaziziYoussouf%20https%3A%2F%2Fgithub.com%2Fyjose%2Freactjs-popup%20%F0%9F%91%8D
+[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/yjose/reactjs-popup.svg?style=social
+[all-contributors]: https://github.com/yjose/all-contributors

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Number of lines in readme file

148

increased by28.7%

Worsened metrics

Total package byte prevSize

79995

decreased by-52.93%

Number of package files

8

decreased by-33.33%

Lines of code

1476

decreased by-13.73%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes