reactjs-popup - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "reactjs-popup",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React Popup Component",
@@ -15,3 +15,9 @@ "main": "reactjsPopup.es.js",
   },
-  "keywords": ["react", "popup", "reactjs", "react-popup", "reactjs-popup"],
+  "keywords": [
+    "react",
+    "popup",
+    "reactjs",
+    "react-popup",
+    "reactjs-popup"
+  ],
   "author": "Youssouf EL AZIZI <[e-mail]>",
@@ -23,2 +29,2 @@ "license": "MIT",
   "homepage": "https://react-popup.netlify.com/"
-}
+}

reactjs-popup.dev.js

@@ -219,5 +219,5 @@ (function (global, factory) {
       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["transform"] = cords.transform;
+        _this.ArrowEl.style["-ms-transform"] = cords.transform;
+        _this.ArrowEl.style["-webkit-transform"] = cords.transform;
         _this.ArrowEl.style.top = cords.arrowTop;
@@ -246,3 +246,3 @@ _this.ArrowEl.style.left = cords.arrowLeft;
       };
-      if (!modal && on === "hover") {
+      if (!modal && on.includes("hover")) {
         childrenElementProps.onMouseEnter = _this.onMouseEnter;
@@ -256,24 +256,32 @@ childrenElementProps.onMouseLeave = _this.onMouseLeave;
       var triggerProps = { key: "T" };
-      var on = _this.props.on;
+      var _this$props3 = _this.props,
+          on = _this$props3.on,
+          trigger = _this$props3.trigger;
 
       triggerProps.ref = _this.setTriggerRef;
-      switch (on) {
-        case "click":
-          triggerProps.onClick = _this.togglePopup;
-          break;
-        case "hover":
-          triggerProps.onMouseEnter = _this.onMouseEnter;
-          triggerProps.onMouseLeave = _this.onMouseLeave;
-        case "focus":
-          triggerProps.onFocus = _this.onMouseEnter;
-          break;
+      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;
+        }
       }
-      return React.cloneElement(_this.props.trigger, triggerProps);
+
+      if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
+
+      return React.cloneElement(trigger, triggerProps);
     };
 
     _this.renderContent = function () {
-      var _this$props3 = _this.props,
-          arrow = _this$props3.arrow,
-          modal = _this$props3.modal,
-          arrowStyle = _this$props3.arrowStyle;
+      var _this$props4 = _this.props,
+          arrow = _this$props4.arrow,
+          modal = _this$props4.modal,
+          arrowStyle = _this$props4.arrowStyle;
 
@@ -357,3 +365,3 @@ return React.createElement(
   defaultOpen: false,
-  on: "click",
+  on: ["click"],
   contentStyle: {},
@@ -385,4 +393,4 @@ arrowStyle: {},
     onClose: PropTypes.func,
-    trigger: PropTypes.element.isRequired,
-    on: PropTypes.oneOf(["hover", "click", "focus"]),
+    trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,
+    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,
@@ -389,0 +397,0 @@ 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"])

reactjs-popup.js

@@ -219,5 +219,5 @@ (function (global, factory) {
       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["transform"] = cords.transform;
+        _this.ArrowEl.style["-ms-transform"] = cords.transform;
+        _this.ArrowEl.style["-webkit-transform"] = cords.transform;
         _this.ArrowEl.style.top = cords.arrowTop;
@@ -246,3 +246,3 @@ _this.ArrowEl.style.left = cords.arrowLeft;
       };
-      if (!modal && on === "hover") {
+      if (!modal && on.includes("hover")) {
         childrenElementProps.onMouseEnter = _this.onMouseEnter;
@@ -256,24 +256,32 @@ childrenElementProps.onMouseLeave = _this.onMouseLeave;
       var triggerProps = { key: "T" };
-      var on = _this.props.on;
+      var _this$props3 = _this.props,
+          on = _this$props3.on,
+          trigger = _this$props3.trigger;
 
       triggerProps.ref = _this.setTriggerRef;
-      switch (on) {
-        case "click":
-          triggerProps.onClick = _this.togglePopup;
-          break;
-        case "hover":
-          triggerProps.onMouseEnter = _this.onMouseEnter;
-          triggerProps.onMouseLeave = _this.onMouseLeave;
-        case "focus":
-          triggerProps.onFocus = _this.onMouseEnter;
-          break;
+      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;
+        }
       }
-      return React.cloneElement(_this.props.trigger, triggerProps);
+
+      if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
+
+      return React.cloneElement(trigger, triggerProps);
     };
 
     _this.renderContent = function () {
-      var _this$props3 = _this.props,
-          arrow = _this$props3.arrow,
-          modal = _this$props3.modal,
-          arrowStyle = _this$props3.arrowStyle;
+      var _this$props4 = _this.props,
+          arrow = _this$props4.arrow,
+          modal = _this$props4.modal,
+          arrowStyle = _this$props4.arrowStyle;
 
@@ -357,3 +365,3 @@ return React.createElement(
   defaultOpen: false,
-  on: "click",
+  on: ["click"],
   contentStyle: {},
@@ -385,4 +393,4 @@ arrowStyle: {},
     onClose: PropTypes.func,
-    trigger: PropTypes.element.isRequired,
-    on: PropTypes.oneOf(["hover", "click", "focus"]),
+    trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,
+    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,
@@ -389,0 +397,0 @@ 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"])

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.togglePopup=function(){r.setState(function(e){return{isOpen:!e.isOpen}},function(){return r.state.isOpen&&r.setPosition()})},r.openPopup=function(){r.state.isOpen||r.setState({isOpen:!0},function(){r.setPosition(),r.props.onOpen()})},r.closePopup=function(){r.state.isOpen&&r.setState({isOpen:!1},r.props.onClose())},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,a=e.left+e.width/2,l=t.height,u=t.width,c=p-l/2,f=a-u/2,d="",g="0%",h="0%";switch(s[0]){case"top":c-=l/2+e.height/2+i,d="rotate(45deg)",g="100%",h="50%";break;case"bottom":c+=l/2+e.height/2+i,d="rotate(225deg)",h="50%";break;case"left":f-=u/2+e.width/2+i,d=" rotate(-45deg)",h="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-l+e.height,g=l-e.height/2+"px";break;case"left":f=e.left,h=e.width/2+"px";break;case"right":f=e.left-u+e.width,h=u-e.width/2+"px"}return{top:c,left:f,transform:d,arrowLeft:h,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,a={className:"popup-content "+n,style:Object.assign({},p,o),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return i||"hover"!==s||(a.onMouseEnter=r.onMouseEnter,a.onMouseLeave=r.onMouseLeave),a},r.renderTrigger=function(){var t={key:"T"},o=r.props.on;switch(t.ref=r.setTriggerRef,o){case"click":t.onClick=r.togglePopup;break;case"hover":t.onMouseEnter=r.onMouseEnter,t.onMouseLeave=r.onMouseLeave;case"focus":t.onFocus=r.onMouseEnter}return e.cloneElement(r.props.trigger,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=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({},i,r),onClick:this.props.closeOnDocumentClick?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,arrow:!0,offset:0,mouseEnterDelay:100,mouseLeaveDelay:100},r});
+!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.togglePopup=function(){r.setState(function(e){return{isOpen:!e.isOpen}},function(){return r.state.isOpen&&r.setPosition()})},r.openPopup=function(){r.state.isOpen||r.setState({isOpen:!0},function(){r.setPosition(),r.props.onOpen()})},r.closePopup=function(){r.state.isOpen&&r.setState({isOpen:!1},r.props.onClose())},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,a=e.left+e.width/2,l=t.height,u=t.width,c=p-l/2,f=a-u/2,d="",g="0%",h="0%";switch(s[0]){case"top":c-=l/2+e.height/2+i,d="rotate(45deg)",g="100%",h="50%";break;case"bottom":c+=l/2+e.height/2+i,d="rotate(225deg)",h="50%";break;case"left":f-=u/2+e.width/2+i,d=" rotate(-45deg)",h="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-l+e.height,g=l-e.height/2+"px";break;case"left":f=e.left,h=e.width/2+"px";break;case"right":f=e.left-u+e.width,h=u-e.width/2+"px"}return{top:c,left:f,transform:d,arrowLeft:h,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,a={className:"popup-content "+n,style:Object.assign({},p,o),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&s.includes("hover")&&(a.onMouseEnter=r.onMouseEnter,a.onMouseLeave=r.onMouseLeave),a},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,a=s.length;p<a;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=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({},i,r),onClick:this.props.closeOnDocumentClick?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,arrow:!0,offset:0,mouseEnterDelay:100,mouseLeaveDelay:100},r});

reactjsPopup.browser.js

@@ -217,5 +217,5 @@ 'use strict';
       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["transform"] = cords.transform;
+        _this.ArrowEl.style["-ms-transform"] = cords.transform;
+        _this.ArrowEl.style["-webkit-transform"] = cords.transform;
         _this.ArrowEl.style.top = cords.arrowTop;
@@ -244,3 +244,3 @@ _this.ArrowEl.style.left = cords.arrowLeft;
       };
-      if (!modal && on === "hover") {
+      if (!modal && on.includes("hover")) {
         childrenElementProps.onMouseEnter = _this.onMouseEnter;
@@ -254,24 +254,32 @@ childrenElementProps.onMouseLeave = _this.onMouseLeave;
       var triggerProps = { key: "T" };
-      var on = _this.props.on;
+      var _this$props3 = _this.props,
+          on = _this$props3.on,
+          trigger = _this$props3.trigger;
 
       triggerProps.ref = _this.setTriggerRef;
-      switch (on) {
-        case "click":
-          triggerProps.onClick = _this.togglePopup;
-          break;
-        case "hover":
-          triggerProps.onMouseEnter = _this.onMouseEnter;
-          triggerProps.onMouseLeave = _this.onMouseLeave;
-        case "focus":
-          triggerProps.onFocus = _this.onMouseEnter;
-          break;
+      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;
+        }
       }
-      return React.cloneElement(_this.props.trigger, triggerProps);
+
+      if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
+
+      return React.cloneElement(trigger, triggerProps);
     };
 
     _this.renderContent = function () {
-      var _this$props3 = _this.props,
-          arrow = _this$props3.arrow,
-          modal = _this$props3.modal,
-          arrowStyle = _this$props3.arrowStyle;
+      var _this$props4 = _this.props,
+          arrow = _this$props4.arrow,
+          modal = _this$props4.modal,
+          arrowStyle = _this$props4.arrowStyle;
 
@@ -355,3 +363,3 @@ return React.createElement(
   defaultOpen: false,
-  on: "click",
+  on: ["click"],
   contentStyle: {},
@@ -358,0 +366,0 @@ arrowStyle: {},

reactjsPopup.es.js

@@ -283,5 +283,5 @@ import React from 'react';
       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["transform"] = cords.transform;
+        _this.ArrowEl.style["-ms-transform"] = cords.transform;
+        _this.ArrowEl.style["-webkit-transform"] = cords.transform;
         _this.ArrowEl.style.top = cords.arrowTop;
@@ -310,3 +310,3 @@ _this.ArrowEl.style.left = cords.arrowLeft;
       };
-      if (!modal && on === "hover") {
+      if (!modal && on.includes("hover")) {
         childrenElementProps.onMouseEnter = _this.onMouseEnter;
@@ -320,24 +320,32 @@ childrenElementProps.onMouseLeave = _this.onMouseLeave;
       var triggerProps = { key: "T" };
-      var on = _this.props.on;
+      var _this$props3 = _this.props,
+          on = _this$props3.on,
+          trigger = _this$props3.trigger;
 
       triggerProps.ref = _this.setTriggerRef;
-      switch (on) {
-        case "click":
-          triggerProps.onClick = _this.togglePopup;
-          break;
-        case "hover":
-          triggerProps.onMouseEnter = _this.onMouseEnter;
-          triggerProps.onMouseLeave = _this.onMouseLeave;
-        case "focus":
-          triggerProps.onFocus = _this.onMouseEnter;
-          break;
+      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;
+        }
       }
-      return React.cloneElement(_this.props.trigger, triggerProps);
+
+      if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
+
+      return React.cloneElement(trigger, triggerProps);
     };
 
     _this.renderContent = function () {
-      var _this$props3 = _this.props,
-          arrow = _this$props3.arrow,
-          modal = _this$props3.modal,
-          arrowStyle = _this$props3.arrowStyle;
+      var _this$props4 = _this.props,
+          arrow = _this$props4.arrow,
+          modal = _this$props4.modal,
+          arrowStyle = _this$props4.arrowStyle;
 
@@ -420,3 +428,3 @@ return React.createElement(
   defaultOpen: false,
-  on: "click",
+  on: ["click"],
   contentStyle: {},
@@ -448,4 +456,4 @@ arrowStyle: {},
     onClose: PropTypes.func,
-    trigger: PropTypes.element.isRequired,
-    on: PropTypes.oneOf(["hover", "click", "focus"]),
+    trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,
+    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,
@@ -452,0 +460,0 @@ 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"])

README.md

@@ -13,6 +13,9 @@ # Reactjs-popup
 
-* Built with react fragment that's mean no additional wrapper divs in your code or in the trigger element.
-* Does not inject HTML outside your app root.
-* Function as children pattern to take control over your popup anywhere in your code.
-* All this clocks in at around 3 kB zipped.
+* Built with react fragment that’s mean no additional wrapper Divs in your code or in the trigger element. 😮
+* Does not inject HTML outside your app root. 📦
+* Function as children pattern to take control over your popup anywhere in your code. 💪
+* Modal, Tooltip, Menu : All in one 🏋️
+* Full style customization 👌
+* Easy to use. 🚀
+* All these clocks in at around 3 kB zipped. ⚡️
 
@@ -27,2 +30,14 @@ Requires React >= 16.0
 
+## TO DO
+
+* [x] Create repository && publish package
+* [x] Create reactjs-popup Home page
+* [x] Tooltip Support
+* [x] Modal Support
+* [x] Menu & Nested Menu Support
+* [x] Add Live examples
+* [ ] Animation API
+* [ ] Toast Support
+* [ ] suggest a feature [here](https://github.com/yjose/reactjs-popup/labels/Features)
+
 ## Installing / Getting started
@@ -29,0 +44,0 @@

No alert changes

Improved metrics

Total package byte prevSize

144533

increased by4.51%

Lines of code

1464

increased by1.74%

Number of lines in readme file

109

increased by15.96%

No dependency changes