From 51cff4729be662fa60b8d049667d0cd3e4078103 Mon Sep 17 00:00:00 2001 From: Youssouf El Azizi Date: Thu, 13 Dec 2018 00:38:57 +0100 Subject: [PATCH 1/3] V1.3.2 --- lib/index.d.ts | 5 ++-- lib/package.json | 2 +- lib/reactjs-popup.cjs.js | 44 +++++++++++++++++++++++++++--------- lib/reactjs-popup.es.js | 44 +++++++++++++++++++++++++++--------- lib/reactjs-popup.js | 44 +++++++++++++++++++++++++++--------- lib/reactjs-popup.min.js | 4 ++-- lib/reactjs-popup.min.js.map | 2 +- package.json | 2 +- 8 files changed, 106 insertions(+), 41 deletions(-) diff --git a/lib/index.d.ts b/lib/index.d.ts index f3eb2d8..28873ff 100644 --- a/lib/index.d.ts +++ b/lib/index.d.ts @@ -19,6 +19,7 @@ declare module 'reactjs-popup' { lockScroll?: boolean; closeOnDocumentClick?: boolean; closeOnEscape?: boolean; + repositionOnResize?: boolean; mouseEnterDelay?: number; mouseLeaveDelay?: number; onOpen?: () => any; @@ -29,7 +30,5 @@ declare module 'reactjs-popup' { keepTooltipInside?: boolean | string; } - class Popup extends React.Component {} - - export = Popup; + export default class Popup extends React.PureComponent {} } diff --git a/lib/package.json b/lib/package.json index b3e1937..004ced4 100644 --- a/lib/package.json +++ b/lib/package.json @@ -1,6 +1,6 @@ { "name": "reactjs-popup", - "version": "1.3.1", + "version": "1.3.2", "description": "React Popup Component - Modals,Tooltips and Menus —  All in one", "main": "reactjs-popup.cjs.js", "module": "reactjs-popup.es.js", diff --git a/lib/reactjs-popup.cjs.js b/lib/reactjs-popup.cjs.js index 5f36fc1..5e03c81 100644 --- a/lib/reactjs-popup.cjs.js +++ b/lib/reactjs-popup.cjs.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.3.1 + * reactjs-popup v1.3.2 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -326,6 +326,14 @@ function (_React$PureComponent) { }); + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "rerepositionOnResize", function () { + _this.setPosition(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onEscape", function (e) { + if (e.key === "Escape") _this.closePopup(); + }); + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lockScroll", function () { if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden"; }); @@ -532,17 +540,18 @@ function (_React$PureComponent) { _createClass(Popup, [{ key: "componentDidMount", value: function componentDidMount() { - var _this2 = this; - var _this$props5 = this.props, closeOnEscape = _this$props5.closeOnEscape, - defaultOpen = _this$props5.defaultOpen; + defaultOpen = _this$props5.defaultOpen, + repositionOnResize = _this$props5.repositionOnResize; if (defaultOpen) this.setPosition(); if (closeOnEscape) { - window.addEventListener("keyup", function (e) { - if (e.key === "Escape") _this2.closePopup(); - }); + window.addEventListener("keyup", this.onEscape); + } + + if (repositionOnResize) { + window.addEventListener('resize', this.rerepositionOnResize); } } }, { @@ -563,14 +572,25 @@ function (_React$PureComponent) { value: function componentWillUnmount() { // kill any function to execute if the component is unmounted clearTimeout(this.timeOut); + var _this$props6 = this.props, + closeOnEscape = _this$props6.closeOnEscape, + repositionOnResize = _this$props6.repositionOnResize; // remove events listeners + + if (closeOnEscape) { + window.removeEventListener("keyup", this.onEscape); + } + + if (repositionOnResize) { + window.removeEventListener('resize', this.rerepositionOnResize); + } } }, { key: "render", value: function render() { - var _this$props6 = this.props, - overlayStyle = _this$props6.overlayStyle, - closeOnDocumentClick = _this$props6.closeOnDocumentClick, - on = _this$props6.on; + var _this$props7 = this.props, + overlayStyle = _this$props7.overlayStyle, + closeOnDocumentClick = _this$props7.closeOnDocumentClick, + on = _this$props7.on; var modal = this.state.modal; var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0); var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; @@ -608,6 +628,7 @@ _defineProperty(Popup, "defaultProps", { open: false, disabled: false, closeOnDocumentClick: true, + repositionOnResize: true, closeOnEscape: true, on: ["click"], contentStyle: {}, @@ -636,6 +657,7 @@ if (process.env.NODE_ENV !== "production") { className: PropTypes.string, modal: PropTypes.bool, closeOnDocumentClick: PropTypes.bool, + repositionOnResize: PropTypes.bool, disabled: PropTypes.bool, lockScroll: PropTypes.bool, offsetX: PropTypes.number, diff --git a/lib/reactjs-popup.es.js b/lib/reactjs-popup.es.js index 64846a4..208a7a2 100644 --- a/lib/reactjs-popup.es.js +++ b/lib/reactjs-popup.es.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.3.1 + * reactjs-popup v1.3.2 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -322,6 +322,14 @@ function (_React$PureComponent) { }); + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "rerepositionOnResize", function () { + _this.setPosition(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onEscape", function (e) { + if (e.key === "Escape") _this.closePopup(); + }); + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lockScroll", function () { if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden"; }); @@ -528,17 +536,18 @@ function (_React$PureComponent) { _createClass(Popup, [{ key: "componentDidMount", value: function componentDidMount() { - var _this2 = this; - var _this$props5 = this.props, closeOnEscape = _this$props5.closeOnEscape, - defaultOpen = _this$props5.defaultOpen; + defaultOpen = _this$props5.defaultOpen, + repositionOnResize = _this$props5.repositionOnResize; if (defaultOpen) this.setPosition(); if (closeOnEscape) { - window.addEventListener("keyup", function (e) { - if (e.key === "Escape") _this2.closePopup(); - }); + window.addEventListener("keyup", this.onEscape); + } + + if (repositionOnResize) { + window.addEventListener('resize', this.rerepositionOnResize); } } }, { @@ -559,14 +568,25 @@ function (_React$PureComponent) { value: function componentWillUnmount() { // kill any function to execute if the component is unmounted clearTimeout(this.timeOut); + var _this$props6 = this.props, + closeOnEscape = _this$props6.closeOnEscape, + repositionOnResize = _this$props6.repositionOnResize; // remove events listeners + + if (closeOnEscape) { + window.removeEventListener("keyup", this.onEscape); + } + + if (repositionOnResize) { + window.removeEventListener('resize', this.rerepositionOnResize); + } } }, { key: "render", value: function render() { - var _this$props6 = this.props, - overlayStyle = _this$props6.overlayStyle, - closeOnDocumentClick = _this$props6.closeOnDocumentClick, - on = _this$props6.on; + var _this$props7 = this.props, + overlayStyle = _this$props7.overlayStyle, + closeOnDocumentClick = _this$props7.closeOnDocumentClick, + on = _this$props7.on; var modal = this.state.modal; var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0); var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; @@ -604,6 +624,7 @@ _defineProperty(Popup, "defaultProps", { open: false, disabled: false, closeOnDocumentClick: true, + repositionOnResize: true, closeOnEscape: true, on: ["click"], contentStyle: {}, @@ -632,6 +653,7 @@ if (process.env.NODE_ENV !== "production") { className: PropTypes.string, modal: PropTypes.bool, closeOnDocumentClick: PropTypes.bool, + repositionOnResize: PropTypes.bool, disabled: PropTypes.bool, lockScroll: PropTypes.bool, offsetX: PropTypes.number, diff --git a/lib/reactjs-popup.js b/lib/reactjs-popup.js index c5c8ce8..854038d 100644 --- a/lib/reactjs-popup.js +++ b/lib/reactjs-popup.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.3.1 + * reactjs-popup v1.3.2 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -327,6 +327,14 @@ }); + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "rerepositionOnResize", function () { + _this.setPosition(); + }); + + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onEscape", function (e) { + if (e.key === "Escape") _this.closePopup(); + }); + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lockScroll", function () { if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden"; }); @@ -533,17 +541,18 @@ _createClass(Popup, [{ key: "componentDidMount", value: function componentDidMount() { - var _this2 = this; - var _this$props5 = this.props, closeOnEscape = _this$props5.closeOnEscape, - defaultOpen = _this$props5.defaultOpen; + defaultOpen = _this$props5.defaultOpen, + repositionOnResize = _this$props5.repositionOnResize; if (defaultOpen) this.setPosition(); if (closeOnEscape) { - window.addEventListener("keyup", function (e) { - if (e.key === "Escape") _this2.closePopup(); - }); + window.addEventListener("keyup", this.onEscape); + } + + if (repositionOnResize) { + window.addEventListener('resize', this.rerepositionOnResize); } } }, { @@ -564,14 +573,25 @@ value: function componentWillUnmount() { // kill any function to execute if the component is unmounted clearTimeout(this.timeOut); + var _this$props6 = this.props, + closeOnEscape = _this$props6.closeOnEscape, + repositionOnResize = _this$props6.repositionOnResize; // remove events listeners + + if (closeOnEscape) { + window.removeEventListener("keyup", this.onEscape); + } + + if (repositionOnResize) { + window.removeEventListener('resize', this.rerepositionOnResize); + } } }, { key: "render", value: function render() { - var _this$props6 = this.props, - overlayStyle = _this$props6.overlayStyle, - closeOnDocumentClick = _this$props6.closeOnDocumentClick, - on = _this$props6.on; + var _this$props7 = this.props, + overlayStyle = _this$props7.overlayStyle, + closeOnDocumentClick = _this$props7.closeOnDocumentClick, + on = _this$props7.on; var modal = this.state.modal; var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0); var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; @@ -609,6 +629,7 @@ open: false, disabled: false, closeOnDocumentClick: true, + repositionOnResize: true, closeOnEscape: true, on: ["click"], contentStyle: {}, @@ -637,6 +658,7 @@ className: PropTypes.string, modal: PropTypes.bool, closeOnDocumentClick: PropTypes.bool, + repositionOnResize: PropTypes.bool, disabled: PropTypes.bool, lockScroll: PropTypes.bool, offsetX: PropTypes.number, diff --git a/lib/reactjs-popup.min.js b/lib/reactjs-popup.min.js index a6c9981..aa39eae 100644 --- a/lib/reactjs-popup.min.js +++ b/lib/reactjs-popup.min.js @@ -1,7 +1,7 @@ /*! - * reactjs-popup v1.3.1 + * reactjs-popup v1.3.2 * (c) 2018-present Youssouf EL AZIZI * 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(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var o=0;o=i.top+i.height||u.left+u.width>=i.left+i.width))break;a++}return p}(a,u,h,t,{offsetX:n,offsetY:i},c);r.ContentEl.style.top=y.top-l.top+"px",r.ContentEl.style.left=y.left-l.left+"px",t&&(r.ArrowEl.style.transform=y.transform,r.ArrowEl.style["-ms-transform"]=y.transform,r.ArrowEl.style["-webkit-transform"]=y.transform,r.ArrowEl.style.top=s.top||y.arrowTop,r.ArrowEl.style.left=s.left||y.arrowLeft),"static"!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")||(r.TriggerEl.style.position="relative")}}),i(u(u(r)),"addWarperAction",function(){var e=r.props,t=e.contentStyle,o=e.className,n=e.on,i=r.state.modal,p=i?h.popupContent.modal:h.popupContent.tooltip,s={className:"popup-content ".concat(o),style:Object.assign({},p,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&n.indexOf("hover")>=0&&(s.onMouseEnter=r.onMouseEnter,s.onMouseLeave=r.onMouseLeave),s}),i(u(u(r)),"renderTrigger",function(){for(var t={key:"T"},o=r.props,n=o.on,i=o.trigger,p=Array.isArray(n)?n:[n],s=0,l=p.length;s=0),s=i?h.overlay.modal:h.overlay.tooltip;return[!!this.props.trigger&&e.createElement(m,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger()),this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),p&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},s,o),onClick:n?this.closePopup:void 0},i&&this.renderContent()),this.state.isOpen&&!i&&this.renderContent()]}}]),n}();i(y,"defaultProps",{children:function(){return e.createElement("span",null," Your Content Here !!")},trigger:null,onOpen:function(){},onClose:function(){},defaultOpen:!1,open:!1,disabled:!1,closeOnDocumentClick:!0,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!1,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100,keepTooltipInside:!1});var m=function(n){function i(){return o(this,i),c(this,l(i).apply(this,arguments))}return s(i,e.PureComponent),r(i,[{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)}}]),i}();return y}); +!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(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var o=0;o=i.top+i.height||u.left+u.width>=i.left+i.width))break;a++}return s}(a,u,h,t,{offsetX:n,offsetY:i},c);r.ContentEl.style.top=y.top-l.top+"px",r.ContentEl.style.left=y.left-l.left+"px",t&&(r.ArrowEl.style.transform=y.transform,r.ArrowEl.style["-ms-transform"]=y.transform,r.ArrowEl.style["-webkit-transform"]=y.transform,r.ArrowEl.style.top=p.top||y.arrowTop,r.ArrowEl.style.left=p.left||y.arrowLeft),"static"!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")||(r.TriggerEl.style.position="relative")}}),i(u(u(r)),"addWarperAction",function(){var e=r.props,t=e.contentStyle,o=e.className,n=e.on,i=r.state.modal,s=i?h.popupContent.modal:h.popupContent.tooltip,p={className:"popup-content ".concat(o),style:Object.assign({},s,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&n.indexOf("hover")>=0&&(p.onMouseEnter=r.onMouseEnter,p.onMouseLeave=r.onMouseLeave),p}),i(u(u(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=0),p=i?h.overlay.modal:h.overlay.tooltip;return[!!this.props.trigger&&e.createElement(m,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger()),this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),s&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},p,o),onClick:n?this.closePopup:void 0},i&&this.renderContent()),this.state.isOpen&&!i&&this.renderContent()]}}]),n}();i(y,"defaultProps",{children:function(){return e.createElement("span",null," Your Content Here !!")},trigger:null,onOpen:function(){},onClose:function(){},defaultOpen:!1,open:!1,disabled:!1,closeOnDocumentClick:!0,repositionOnResize:!0,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!1,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100,keepTooltipInside:!1});var m=function(n){function i(){return o(this,i),c(this,l(i).apply(this,arguments))}return p(i,e.PureComponent),r(i,[{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)}}]),i}();return y}); //# sourceMappingURL=reactjs-popup.min.js.map diff --git a/lib/reactjs-popup.min.js.map b/lib/reactjs-popup.min.js.map index 86d9424..bf70bd5 100644 --- a/lib/reactjs-popup.min.js.map +++ b/lib/reactjs-popup.min.js.map @@ -1 +1 @@ -{"version":3,"file":"reactjs-popup.min.js","sources":["../src/Utils.js","../src/index.css.js","../src/index.js"],"sourcesContent":["/* Algo to calculate position\n 1. center position for popup content : the center of the trigger will be the center of the content content\n so the popup content position will be like this :\n top => the y of the center for the trigger element : trigger.top + trigger.height/2\n left => the x of the center for the trigger element : trigger.left + trigger.width/2\n\n 2. translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n 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\n\n 3.translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n the second argument 'top' => translate popup content by + content.height*4/5\n\n 4. check if calculated position is going out of bounds of wrapper box or not. If yes repeat 1-3 for next position enum. By default wrapper box is window element\n*/\n\nfunction getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n { offsetX, offsetY }\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const args = position.split(\" \");\n // the step N 1 : center the popup content => ok\n const CenterTop = triggerBounding.top + triggerBounding.height / 2;\n const CenterLeft = triggerBounding.left + triggerBounding.width / 2;\n const { height, width } = ContentBounding;\n let top = CenterTop - height / 2;\n let left = CenterLeft - width / 2;\n let transform = \"\";\n let arrowTop = \"0%\";\n let arrowLeft = \"0%\";\n // the step N 2 : => ok\n switch (args[0]) {\n case \"top\":\n top -= height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + margin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + margin;\n transform = `rotate(135deg)`;\n arrowTop = \"50%\";\n\n break;\n }\n switch (args[1]) {\n case \"top\":\n top = triggerBounding.top;\n arrowTop = triggerBounding.height / 2 + \"px\";\n break;\n case \"bottom\":\n top = triggerBounding.top - height + triggerBounding.height;\n arrowTop = height - triggerBounding.height / 2 + \"px\";\n break;\n case \"left\":\n left = triggerBounding.left;\n arrowLeft = triggerBounding.width / 2 + \"px\";\n break;\n case \"right\":\n left = triggerBounding.left - width + triggerBounding.width;\n arrowLeft = width - triggerBounding.width / 2 + \"px\";\n break;\n }\n\n top = args[0] === \"top\" ? top - offsetY : top + offsetY;\n left = args[0] === \"left\" ? left - offsetX : left + offsetX;\n\n return { top, left, transform, arrowLeft, arrowTop };\n}\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n positions,\n arrow,\n { offsetX, offsetY },\n wrapperBox\n) {\n let bestCoords;\n let i = 0;\n while (i < positions.length) {\n bestCoords = getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n positions[i],\n arrow,\n { offsetX, offsetY }\n );\n\n const contentBox = {\n top: bestCoords.top,\n left: bestCoords.left,\n width: ContentBounding.width,\n height: ContentBounding.height\n };\n\n if (\n contentBox.top <= wrapperBox.top ||\n contentBox.left <= wrapperBox.left ||\n contentBox.top + contentBox.height >=\n wrapperBox.top + wrapperBox.height ||\n contentBox.left + contentBox.width >= wrapperBox.left + wrapperBox.width\n ) {\n i++;\n } else {\n break;\n }\n }\n\n return bestCoords;\n}\n","export default {\n popupContent: {\n tooltip: {\n position: \"absolute\",\n zIndex: \"2\",\n width: \"200px\",\n background: `rgb(255, 255, 255)`,\n border: `1px solid rgb(187, 187, 187)`,\n boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,\n padding: \"5px\"\n },\n modal: {\n position: \"relative\",\n background: `rgb(255, 255, 255)`,\n width: \"50%\",\n margin: \"auto\",\n border: `1px solid rgb(187, 187, 187)`,\n padding: \"5px\"\n }\n },\n popupArrow: {\n height: \"10px\",\n width: \"10px\",\n position: \"absolute\",\n background: \"rgb(255, 255, 255)\",\n transform: \"rotate(45deg)\",\n margin: \"-5px\",\n zIndex: \"-1\",\n boxShadow: \"rgba(0, 0, 0, 0.2) 1px 1px 1px\"\n },\n overlay: {\n tooltip: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\"\n },\n modal: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\",\n background: `rgba(0, 0, 0,0.5)`,\n display: \"flex\",\n zIndex: \"999\"\n }\n }\n};\n","import React from \"react\";\nimport { findDOMNode } from \"react-dom\";\nimport calculatePosition from \"./Utils\";\n\nimport styles from \"./index.css.js\";\nconst POSITION_TYPES = [\n \"top left\",\n \"top center\",\n \"top right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n];\n\nexport default class Popup extends React.PureComponent {\n static defaultProps = {\n children: () => Your Content Here !!,\n trigger: null,\n onOpen: () => {},\n onClose: () => {},\n defaultOpen: false,\n open: false,\n disabled: false,\n closeOnDocumentClick: true,\n closeOnEscape: true,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n lockScroll: false,\n arrow: true,\n offsetX: 0,\n offsetY: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100,\n keepTooltipInside: false\n };\n state = {\n isOpen: this.props.open || this.props.defaultOpen,\n modal: this.props.modal ? true : !this.props.trigger\n // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't exist\n };\n\n constructor(props) {\n super(props);\n this.setTriggerRef = r => (this.TriggerEl = r);\n this.setContentRef = r => (this.ContentEl = r);\n this.setArrowRef = r => (this.ArrowEl = r);\n this.setHelperRef = r => (this.HelperEl = r);\n this.timeOut = 0;\n }\n\n componentDidMount() {\n const { closeOnEscape, defaultOpen } = this.props;\n if (defaultOpen) this.setPosition();\n if (closeOnEscape) {\n window.addEventListener(\"keyup\", e => {\n if (e.key === \"Escape\") this.closePopup();\n });\n }\n }\n\n componentWillReceiveProps(nextProps) {\n if (this.props.open === nextProps.open) return;\n if (nextProps.open) this.openPopup();\n else this.closePopup();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.disabled !== this.props.disabled\n && this.props.disabled\n && this.state.isOpen) {\n this.closePopup();\n }\n }\n\n componentWillUnmount() {\n // kill any function to execute if the component is unmounted\n clearTimeout(this.timeOut);\n }\n\n lockScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n };\n resetScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"auto\";\n };\n\n togglePopup = () => {\n if (this.state.isOpen) this.closePopup();\n else this.openPopup();\n };\n openPopup = () => {\n if (this.state.isOpen || this.props.disabled) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n this.lockScroll();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.props.onClose();\n this.setState({ isOpen: false }, () => {\n this.resetScroll();\n });\n };\n onMouseEnter = () => {\n clearTimeout(this.timeOut);\n const { mouseEnterDelay } = this.props;\n this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);\n };\n onMouseLeave = () => {\n clearTimeout(this.timeOut);\n const { mouseLeaveDelay } = this.props;\n this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);\n };\n\n getTooltipBoundary = () => {\n const { keepTooltipInside } = this.props;\n let boundingBox = {\n top: 0,\n left: 0,\n width: window.innerWidth,\n height: window.innerHeight\n };\n if (typeof keepTooltipInside === \"string\") {\n const selector = document.querySelector(keepTooltipInside);\n if (process.env.NODE_ENV !== \"production\") {\n if (selector === null)\n throw new Error(\n `${keepTooltipInside} selector is not exist : keepTooltipInside must be a valid html selector 'class' or 'Id' or a boolean value`\n );\n }\n boundingBox = selector.getBoundingClientRect();\n }\n return boundingBox;\n };\n\n setPosition = () => {\n const { arrow, position, offsetX, offsetY, keepTooltipInside, arrowStyle } = this.props;\n const { modal } = this.state;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const boundingBox = this.getTooltipBoundary();\n let positions = Array.isArray(position) ? position : [position];\n\n // keepTooltipInside would be activated if the keepTooltipInside exist or the position is Array\n if (keepTooltipInside || Array.isArray(position))\n positions = [...positions, ...POSITION_TYPES];\n\n const cords = calculatePosition(\n trigger,\n content,\n positions,\n arrow,\n {\n offsetX,\n offsetY\n },\n boundingBox\n );\n this.ContentEl.style.top = cords.top - helper.top + \"px\";\n this.ContentEl.style.left = cords.left - helper.left + \"px\";\n if (arrow) {\n this.ArrowEl.style[\"transform\"] = cords.transform;\n this.ArrowEl.style[\"-ms-transform\"] = cords.transform;\n this.ArrowEl.style[\"-webkit-transform\"] = cords.transform;\n this.ArrowEl.style.top = arrowStyle.top || cords.arrowTop;\n this.ArrowEl.style.left = arrowStyle.left || cords.arrowLeft;\n }\n if (\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"static\" ||\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, on } = this.props;\n const { modal } = this.state;\n const popupContentStyle = modal\n ? styles.popupContent.modal\n : styles.popupContent.tooltip;\n\n const childrenElementProps = {\n className: `popup-content ${className}`,\n style: Object.assign({}, popupContentStyle, contentStyle),\n ref: this.setContentRef,\n onClick: e => {\n e.stopPropagation();\n }\n };\n if (!modal && on.indexOf(\"hover\") >= 0) {\n childrenElementProps.onMouseEnter = this.onMouseEnter;\n childrenElementProps.onMouseLeave = this.onMouseLeave;\n }\n return childrenElementProps;\n };\n renderTrigger = () => {\n const triggerProps = { key: \"T\" };\n const { on, trigger } = this.props;\n const onAsArray = Array.isArray(on) ? on : [on];\n for (let i = 0, len = onAsArray.length; i < len; i++) {\n switch (onAsArray[i]) {\n case \"click\":\n triggerProps.onClick = this.togglePopup;\n break;\n case \"hover\":\n triggerProps.onMouseEnter = this.onMouseEnter;\n triggerProps.onMouseLeave = this.onMouseLeave;\n break;\n case \"focus\":\n triggerProps.onFocus = this.onMouseEnter;\n break;\n }\n }\n\n if (typeof trigger === \"function\")\n return React.cloneElement(trigger(this.state.isOpen), triggerProps);\n\n return React.cloneElement(trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, arrowStyle } = this.props;\n const { modal } = this.state;\n return (\n
\n {arrow &&\n !modal && (\n \n )}\n {typeof this.props.children === \"function\"\n ? this.props.children(this.closePopup, this.state.isOpen)\n : this.props.children}\n
\n );\n };\n\n render() {\n const { overlayStyle, closeOnDocumentClick, on } = this.props;\n const { modal } = this.state;\n const overlay = this.state.isOpen && !(on.indexOf(\"hover\") >= 0);\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n !!this.props.trigger && (\n \n {this.renderTrigger()}\n \n ),\n this.state.isOpen && (\n \n ),\n overlay && (\n \n {modal && this.renderContent()}\n \n ),\n this.state.isOpen && !modal && this.renderContent(),\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\n const TRIGGER_TYPES = [\"hover\", \"click\", \"focus\"];\n\n Popup.propTypes = {\n arrowStyle: PropTypes.object,\n contentStyle: PropTypes.object,\n overlayStyle: PropTypes.object,\n className: PropTypes.string,\n modal: PropTypes.bool,\n closeOnDocumentClick: PropTypes.bool,\n disabled: PropTypes.bool,\n lockScroll: PropTypes.bool,\n offsetX: PropTypes.number,\n offsetY: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n open: PropTypes.bool,\n defaultOpen: PropTypes.bool,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element\n on: PropTypes.oneOfType([\n PropTypes.oneOf(TRIGGER_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(TRIGGER_TYPES))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOfType([\n PropTypes.oneOf(POSITION_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(POSITION_TYPES))\n ]),\n keepTooltipInside: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n };\n}\n\nclass Ref extends React.PureComponent {\n componentDidMount() {\n const { innerRef } = this.props;\n if (innerRef) innerRef(findDOMNode(this));\n }\n\n render() {\n const { children } = this.props;\n return React.Children.only(children);\n }\n}\n"],"names":["getCoordinatesForPosition","triggerBounding","ContentBounding","position","arrow","offsetX","offsetY","margin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","popupContent","tooltip","zIndex","background","border","boxShadow","padding","modal","popupArrow","overlay","bottom","right","display","POSITION_TYPES","Popup","props","isOpen","_this","open","defaultOpen","trigger","state","lockScroll","document","getElementsByTagName","style","overflow","closePopup","openPopup","disabled","setState","setPosition","onOpen","onClose","resetScroll","clearTimeout","timeOut","mouseEnterDelay","setTimeout","mouseLeaveDelay","keepTooltipInside","boundingBox","window","innerWidth","innerHeight","querySelector","getBoundingClientRect","arrowStyle","helper","HelperEl","TriggerEl","content","ContentEl","getTooltipBoundary","positions","Array","isArray","cords","wrapperBox","bestCoords","i","length","contentBox","calculatePosition","ArrowEl","getComputedStyle","getPropertyValue","contentStyle","className","on","popupContentStyle","styles","childrenElementProps","Object","assign","ref","setContentRef","onClick","e","stopPropagation","indexOf","onMouseEnter","onMouseLeave","triggerProps","key","onAsArray","len","togglePopup","onFocus","React","cloneElement","addWarperAction","setArrowRef","children","setTriggerRef","r","setHelperRef","PureComponent","this","closeOnEscape","addEventListener","_this2","nextProps","prevProps","overlayStyle","closeOnDocumentClick","ovStyle","Ref","innerRef","renderTrigger","undefined","renderContent","findDOMNode","Children","only"],"mappings":";;;;;u2DAmBA,SAASA,EACPC,EACAC,EACAC,EACAC,SACEC,IAAAA,QAASC,IAAAA,QAGLC,EAASH,EAAQ,EAAI,EACrBI,EAAOL,EAASM,MAAM,KAEtBC,EAAYT,EAAgBU,IAAMV,EAAgBW,OAAS,EAC3DC,EAAaZ,EAAgBa,KAAOb,EAAgBc,MAAQ,EAC1DH,EAAkBV,EAAlBU,OAAQG,EAAUb,EAAVa,MACZJ,EAAMD,EAAYE,EAAS,EAC3BE,EAAOD,EAAaE,EAAQ,EAC5BC,EAAY,GACZC,EAAW,KACXC,EAAY,YAERV,EAAK,QACN,MACHG,GAAOC,EAAS,EAAIX,EAAgBW,OAAS,EAAIL,EACjDS,kBACAC,EAAW,OACXC,EAAY,gBAET,SACHP,GAAOC,EAAS,EAAIX,EAAgBW,OAAS,EAAIL,EACjDS,mBACAE,EAAY,gBAET,OACHJ,GAAQC,EAAQ,EAAId,EAAgBc,MAAQ,EAAIR,EAChDS,oBACAE,EAAY,OACZD,EAAW,gBAER,QACHH,GAAQC,EAAQ,EAAId,EAAgBc,MAAQ,EAAIR,EAChDS,mBACAC,EAAW,aAIPT,EAAK,QACN,MACHG,EAAMV,EAAgBU,IACtBM,EAAWhB,EAAgBW,OAAS,EAAI,eAErC,SACHD,EAAMV,EAAgBU,IAAMC,EAASX,EAAgBW,OACrDK,EAAWL,EAASX,EAAgBW,OAAS,EAAI,eAE9C,OACHE,EAAOb,EAAgBa,KACvBI,EAAYjB,EAAgBc,MAAQ,EAAI,eAErC,QACHD,EAAOb,EAAgBa,KAAOC,EAAQd,EAAgBc,MACtDG,EAAYH,EAAQd,EAAgBc,MAAQ,EAAI,YAO3CJ,IAHTA,EAAkB,QAAZH,EAAK,GAAeG,EAAML,EAAUK,EAAML,EAGlCQ,KAFdA,EAAmB,SAAZN,EAAK,GAAgBM,EAAOT,EAAUS,EAAOT,EAEhCW,UAAAA,EAAWE,UAAAA,EAAWD,SAAAA,uDCrF1CE,cACEC,SACEjB,SAAU,WACVkB,OAAQ,IACRN,MAAO,QACPO,gCACAC,sCACAC,2CACAC,QAAS,OAEXC,OACEvB,SAAU,WACVmB,gCACAP,MAAO,MACPR,OAAQ,OACRgB,sCACAE,QAAS,QAGbE,YACEf,OAAQ,OACRG,MAAO,OACPZ,SAAU,WACVmB,WAAY,qBACZN,UAAW,gBACXT,OAAQ,OACRc,OAAQ,KACRG,UAAW,kCAEbI,SACER,SACEjB,SAAU,QACVQ,IAAK,IACLkB,OAAQ,IACRf,KAAM,IACNgB,MAAO,KAETJ,OACEvB,SAAU,QACVQ,IAAK,IACLkB,OAAQ,IACRf,KAAM,IACNgB,MAAO,IACPR,+BACAS,QAAS,OACTV,OAAQ,SCzCRW,GACJ,WACA,aACA,YACA,YACA,eACA,eACA,cACA,gBACA,eACA,WACA,cACA,eAGmBC,yBAgCPC,wDACJA,eANNC,OAAQC,EAAKF,MAAMG,MAAQD,EAAKF,MAAMI,YACtCZ,QAAOU,EAAKF,MAAMR,QAAgBU,EAAKF,MAAMK,iCA0ClC,WACPH,EAAKI,MAAMd,OAASU,EAAKF,MAAMO,aACjCC,SAASC,qBAAqB,QAAQ,GAAGC,MAAMC,SAAW,oCAEhD,WACRT,EAAKI,MAAMd,OAASU,EAAKF,MAAMO,aACjCC,SAASC,qBAAqB,QAAQ,GAAGC,MAAMC,SAAW,kCAGhD,WACRT,EAAKI,MAAML,OAAQC,EAAKU,aACvBV,EAAKW,oCAEA,WACNX,EAAKI,MAAML,QAAUC,EAAKF,MAAMc,YAC/BC,UAAWd,QAAQ,GAAQ,aACzBe,gBACAhB,MAAMiB,WACNV,wCAGI,WACNL,EAAKI,MAAML,WACXD,MAAMkB,YACNH,UAAWd,QAAQ,GAAS,aAC1BkB,4CAGM,WACbC,aAAalB,EAAKmB,aACVC,EAAoBpB,EAAKF,MAAzBsB,kBACHD,QAAUE,WAAW,kBAAMrB,EAAKW,aAAaS,8BAErC,WACbF,aAAalB,EAAKmB,aACVG,EAAoBtB,EAAKF,MAAzBwB,kBACHH,QAAUE,WAAW,kBAAMrB,EAAKU,cAAcY,oCAGhC,eACXC,EAAsBvB,EAAKF,MAA3ByB,kBACJC,GACFjD,IAAK,EACLG,KAAM,EACNC,MAAO8C,OAAOC,WACdlD,OAAQiD,OAAOE,aAEgB,iBAAtBJ,IAQTC,EAPiBlB,SAASsB,cAAcL,GAOjBM,gCAElBL,4BAGK,iBACiExB,EAAKF,MAA1E9B,IAAAA,MAAOD,IAAAA,SAAUE,IAAAA,QAASC,IAAAA,QAASqD,IAAAA,kBAAmBO,IAAAA,eAC5C9B,EAAKI,MAAfd,WAEFyC,EAAS/B,EAAKgC,SAASH,wBACvB1B,EAAUH,EAAKiC,UAAUJ,wBACzBK,EAAUlC,EAAKmC,UAAUN,wBACzBL,EAAcxB,EAAKoC,qBACrBC,EAAYC,MAAMC,QAAQxE,GAAYA,GAAYA,IAGlDwD,GAAqBe,MAAMC,QAAQxE,MACrCsE,IAAgBA,UAAczC,QAE1B4C,EF3EK,SACb3E,EACAC,EACAuE,EACArE,IAEAyE,WAEIC,EAHFzE,IAAAA,QAASC,IAAAA,QAIPyE,EAAI,EACDA,EAAIN,EAAUO,QAAQ,KASrBC,GACJtE,KATFmE,EAAa9E,EACXC,EACAC,EACAuE,EAAUM,GACV3E,GACEC,QAAAA,EAASC,QAAAA,KAIKK,IAChBG,KAAMgE,EAAWhE,KACjBC,MAAOb,EAAgBa,MACvBH,OAAQV,EAAgBU,aAIxBqE,EAAWtE,KAAOkE,EAAWlE,KAC7BsE,EAAWnE,MAAQ+D,EAAW/D,MAC9BmE,EAAWtE,IAAMsE,EAAWrE,QAC1BiE,EAAWlE,IAAMkE,EAAWjE,QAC9BqE,EAAWnE,KAAOmE,EAAWlE,OAAS8D,EAAW/D,KAAO+D,EAAW9D,aAEnEgE,WAMGD,EEoCSI,CACZ3C,EACA+B,EACAG,EACArE,GAEEC,QAAAA,EACAC,QAAAA,GAEFsD,KAEGW,UAAU3B,MAAMjC,IAAMiE,EAAMjE,IAAMwD,EAAOxD,IAAM,OAC/C4D,UAAU3B,MAAM9B,KAAO8D,EAAM9D,KAAOqD,EAAOrD,KAAO,KACnDV,MACG+E,QAAQvC,MAAb,UAAkCgC,EAAM5D,YACnCmE,QAAQvC,MAAM,iBAAmBgC,EAAM5D,YACvCmE,QAAQvC,MAAM,qBAAuBgC,EAAM5D,YAC3CmE,QAAQvC,MAAMjC,IAAMuD,EAAWvD,KAAOiE,EAAM3D,WAC5CkE,QAAQvC,MAAM9B,KAAOoD,EAAWpD,MAAQ8D,EAAM1D,WAKhB,UAFnC2C,OACGuB,iBAAiBhD,EAAKiC,UAAW,MACjCgB,iBAAiB,aAGe,IAFnCxB,OACGuB,iBAAiBhD,EAAKiC,UAAW,MACjCgB,iBAAiB,cAEpBjD,EAAKiC,UAAUzB,MAAMzC,SAAW,2CAGlB,iBACwBiC,EAAKF,MAArCoD,IAAAA,aAAcC,IAAAA,UAAWC,IAAAA,GACzB9D,EAAUU,EAAKI,MAAfd,MACF+D,EAAoB/D,EACtBgE,EAAOvE,aAAaO,MACpBgE,EAAOvE,aAAaC,QAElBuE,GACJJ,kCAA4BA,GAC5B3C,MAAOgD,OAAOC,UAAWJ,EAAmBH,GAC5CQ,IAAK1D,EAAK2D,cACVC,QAAS,SAAAC,GACPA,EAAEC,2BAGDxE,GAAS8D,EAAGW,QAAQ,UAAY,IACnCR,EAAqBS,aAAehE,EAAKgE,aACzCT,EAAqBU,aAAejE,EAAKiE,cAEpCV,8BAEO,mBACRW,GAAiBC,IAAK,OACJnE,EAAKF,MAArBsD,IAAAA,GAAIjD,IAAAA,QACNiE,EAAY9B,MAAMC,QAAQa,GAAMA,GAAMA,GACnCT,EAAI,EAAG0B,EAAMD,EAAUxB,OAAQD,EAAI0B,EAAK1B,WACvCyB,EAAUzB,QACX,QACHuB,EAAaN,QAAU5D,EAAKsE,sBAEzB,QACHJ,EAAaF,aAAehE,EAAKgE,aACjCE,EAAaD,aAAejE,EAAKiE,uBAE9B,QACHC,EAAaK,QAAUvE,EAAKgE,mBAKX,mBAAZ7D,EACFqE,EAAMC,aAAatE,EAAQH,EAAKI,MAAML,QAASmE,GAEjDM,EAAMC,aAAatE,EAAS+D,+BAGrB,iBACgBlE,EAAKF,MAA3B9B,IAAAA,MAAO8D,IAAAA,WACPxC,EAAUU,EAAKI,MAAfd,aAENkF,2BAASxE,EAAK0E,mBAAmBP,IAAI,MAClCnG,IACEsB,GACCkF,uBACEd,IAAK1D,EAAK2E,YACVnE,MAAOgD,OAAOC,UAAWH,EAAO/D,WAAYuC,KAGlB,mBAAxB9B,EAAKF,MAAM8E,SACf5E,EAAKF,MAAM8E,SAAS5E,EAAKU,WAAYV,EAAKI,MAAML,QAChDC,EAAKF,MAAM8E,cAzMdC,cAAgB,SAAAC,UAAM9E,EAAKiC,UAAY6C,KACvCnB,cAAgB,SAAAmB,UAAM9E,EAAKmC,UAAY2C,KACvCH,YAAc,SAAAG,UAAM9E,EAAK+C,QAAU+B,KACnCC,aAAe,SAAAD,UAAM9E,EAAKgC,SAAW8C,KACrC3D,QAAU,eAtCgBqD,EAAMQ,2EA0CEC,KAAKnF,MAApCoF,IAAAA,gBAAehF,aACN+E,KAAKnE,cAClBoE,GACFzD,OAAO0D,iBAAiB,QAAS,SAAAtB,GACjB,WAAVA,EAAEM,KAAkBiB,EAAK1E,iEAKT2E,GACpBJ,KAAKnF,MAAMG,OAASoF,EAAUpF,OAC9BoF,EAAUpF,KAAMgF,KAAKtE,YACpBsE,KAAKvE,yDAGO4E,GACbA,EAAU1E,WAAaqE,KAAKnF,MAAMc,UAC/BqE,KAAKnF,MAAMc,UACXqE,KAAK7E,MAAML,aACTW,4DAMTQ,aAAa+D,KAAK9D,gDA8KiC8D,KAAKnF,MAAhDyF,IAAAA,aAAcC,IAAAA,qBAAsBpC,IAAAA,GACpC9D,EAAU2F,KAAK7E,MAAfd,MACFE,EAAUyF,KAAK7E,MAAML,UAAYqD,EAAGW,QAAQ,UAAY,GACxD0B,EAAUnG,EAAQgE,EAAO9D,QAAQF,MAAQgE,EAAO9D,QAAQR,iBAE1DiG,KAAKnF,MAAMK,SACXqE,gBAACkB,GAAIC,SAAUV,KAAKJ,cAAeV,IAAI,KACpCc,KAAKW,iBAGVX,KAAK7E,MAAML,QACTyE,uBACEL,IAAI,IACJ3D,OAASzC,SAAU,WAAYQ,IAAK,MAAOG,KAAM,OACjDgF,IAAKuB,KAAKF,eAGdvF,GACEgF,uBACEL,IAAI,IACJhB,UAAU,gBACV3C,MAAOgD,OAAOC,UAAWgC,EAASF,GAClC3B,QAAS4B,EAAuBP,KAAKvE,gBAAamF,GAEjDvG,GAAS2F,KAAKa,iBAGnBb,KAAK7E,MAAML,SAAWT,GAAS2F,KAAKa,4BA5QrBjG,kBAEjB+E,SAAU,kBAAMJ,sDAChBrE,QAAS,KACTY,OAAQ,aACRC,QAAS,aACTd,aAAa,EACbD,MAAM,EACNW,UAAU,EACV4E,sBAAsB,EACtBN,eAAe,EACf9B,IAAK,SACLF,gBACApB,cACAyD,gBACApC,UAAW,GACXpF,SAAU,gBACVuB,OAAO,EACPe,YAAY,EACZrC,OAAO,EACPC,QAAS,EACTC,QAAS,EACTkD,gBAAiB,IACjBE,gBAAiB,IACjBC,mBAAmB,QAgSjBmE,0FAAYlB,EAAMQ,kEAEZW,EAAaV,KAAKnF,MAAlB6F,SACJA,GAAUA,EAASI,cAAYd,4CAI3BL,EAAaK,KAAKnF,MAAlB8E,gBACDJ,EAAMwB,SAASC,KAAKrB"} \ No newline at end of file +{"version":3,"file":"reactjs-popup.min.js","sources":["../src/Utils.js","../src/index.css.js","../src/index.js"],"sourcesContent":["/* Algo to calculate position\n 1. center position for popup content : the center of the trigger will be the center of the content content\n so the popup content position will be like this :\n top => the y of the center for the trigger element : trigger.top + trigger.height/2\n left => the x of the center for the trigger element : trigger.left + trigger.width/2\n\n 2. translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n 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\n\n 3.translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n the second argument 'top' => translate popup content by + content.height*4/5\n\n 4. check if calculated position is going out of bounds of wrapper box or not. If yes repeat 1-3 for next position enum. By default wrapper box is window element\n*/\n\nfunction getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n { offsetX, offsetY }\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const args = position.split(\" \");\n // the step N 1 : center the popup content => ok\n const CenterTop = triggerBounding.top + triggerBounding.height / 2;\n const CenterLeft = triggerBounding.left + triggerBounding.width / 2;\n const { height, width } = ContentBounding;\n let top = CenterTop - height / 2;\n let left = CenterLeft - width / 2;\n let transform = \"\";\n let arrowTop = \"0%\";\n let arrowLeft = \"0%\";\n // the step N 2 : => ok\n switch (args[0]) {\n case \"top\":\n top -= height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + margin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + margin;\n transform = `rotate(135deg)`;\n arrowTop = \"50%\";\n\n break;\n }\n switch (args[1]) {\n case \"top\":\n top = triggerBounding.top;\n arrowTop = triggerBounding.height / 2 + \"px\";\n break;\n case \"bottom\":\n top = triggerBounding.top - height + triggerBounding.height;\n arrowTop = height - triggerBounding.height / 2 + \"px\";\n break;\n case \"left\":\n left = triggerBounding.left;\n arrowLeft = triggerBounding.width / 2 + \"px\";\n break;\n case \"right\":\n left = triggerBounding.left - width + triggerBounding.width;\n arrowLeft = width - triggerBounding.width / 2 + \"px\";\n break;\n }\n\n top = args[0] === \"top\" ? top - offsetY : top + offsetY;\n left = args[0] === \"left\" ? left - offsetX : left + offsetX;\n\n return { top, left, transform, arrowLeft, arrowTop };\n}\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n positions,\n arrow,\n { offsetX, offsetY },\n wrapperBox\n) {\n let bestCoords;\n let i = 0;\n while (i < positions.length) {\n bestCoords = getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n positions[i],\n arrow,\n { offsetX, offsetY }\n );\n\n const contentBox = {\n top: bestCoords.top,\n left: bestCoords.left,\n width: ContentBounding.width,\n height: ContentBounding.height\n };\n\n if (\n contentBox.top <= wrapperBox.top ||\n contentBox.left <= wrapperBox.left ||\n contentBox.top + contentBox.height >=\n wrapperBox.top + wrapperBox.height ||\n contentBox.left + contentBox.width >= wrapperBox.left + wrapperBox.width\n ) {\n i++;\n } else {\n break;\n }\n }\n\n return bestCoords;\n}\n","export default {\n popupContent: {\n tooltip: {\n position: \"absolute\",\n zIndex: \"2\",\n width: \"200px\",\n background: `rgb(255, 255, 255)`,\n border: `1px solid rgb(187, 187, 187)`,\n boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,\n padding: \"5px\"\n },\n modal: {\n position: \"relative\",\n background: `rgb(255, 255, 255)`,\n width: \"50%\",\n margin: \"auto\",\n border: `1px solid rgb(187, 187, 187)`,\n padding: \"5px\"\n }\n },\n popupArrow: {\n height: \"10px\",\n width: \"10px\",\n position: \"absolute\",\n background: \"rgb(255, 255, 255)\",\n transform: \"rotate(45deg)\",\n margin: \"-5px\",\n zIndex: \"-1\",\n boxShadow: \"rgba(0, 0, 0, 0.2) 1px 1px 1px\"\n },\n overlay: {\n tooltip: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\"\n },\n modal: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\",\n background: `rgba(0, 0, 0,0.5)`,\n display: \"flex\",\n zIndex: \"999\"\n }\n }\n};\n","import React from \"react\";\nimport { findDOMNode } from \"react-dom\";\nimport calculatePosition from \"./Utils\";\n\nimport styles from \"./index.css.js\";\nconst POSITION_TYPES = [\n \"top left\",\n \"top center\",\n \"top right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n];\n\nexport default class Popup extends React.PureComponent {\n static defaultProps = {\n children: () => Your Content Here !!,\n trigger: null,\n onOpen: () => {},\n onClose: () => {},\n defaultOpen: false,\n open: false,\n disabled: false,\n closeOnDocumentClick: true,\n repositionOnResize:true,\n closeOnEscape: true,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n lockScroll: false,\n arrow: true,\n offsetX: 0,\n offsetY: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100,\n keepTooltipInside: false\n };\n state = {\n isOpen: this.props.open || this.props.defaultOpen,\n modal: this.props.modal ? true : !this.props.trigger\n // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't exist\n };\n\n constructor(props) {\n super(props);\n this.setTriggerRef = r => (this.TriggerEl = r);\n this.setContentRef = r => (this.ContentEl = r);\n this.setArrowRef = r => (this.ArrowEl = r);\n this.setHelperRef = r => (this.HelperEl = r);\n this.timeOut = 0;\n }\n\n componentDidMount() {\n const { closeOnEscape, defaultOpen ,repositionOnResize} = this.props;\n if (defaultOpen) this.setPosition();\n if (closeOnEscape) {\n window.addEventListener(\"keyup\", this.onEscape);\n }\n if(repositionOnResize){\n window.addEventListener('resize', this.rerepositionOnResize);\n }\n }\n\n rerepositionOnResize = () => {\n this.setPosition()\n }\n onEscape = (e) => {\n if (e.key === \"Escape\") this.closePopup();\n }\n\n componentWillReceiveProps(nextProps) {\n if (this.props.open === nextProps.open) return;\n if (nextProps.open) this.openPopup();\n else this.closePopup();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.disabled !== this.props.disabled\n && this.props.disabled\n && this.state.isOpen) {\n this.closePopup();\n }\n }\n\n componentWillUnmount() {\n // kill any function to execute if the component is unmounted\n clearTimeout(this.timeOut);\n\n const { closeOnEscape ,repositionOnResize} = this.props;\n // remove events listeners\n if (closeOnEscape) {\n window.removeEventListener(\"keyup\", this.onEscape);\n }\n if(repositionOnResize){\n window.removeEventListener('resize', this.rerepositionOnResize);\n }\n }\n\n lockScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n };\n resetScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"auto\";\n };\n\n togglePopup = () => {\n if (this.state.isOpen) this.closePopup();\n else this.openPopup();\n };\n openPopup = () => {\n if (this.state.isOpen || this.props.disabled) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n this.lockScroll();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.props.onClose();\n this.setState({ isOpen: false }, () => {\n this.resetScroll();\n });\n };\n onMouseEnter = () => {\n clearTimeout(this.timeOut);\n const { mouseEnterDelay } = this.props;\n this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);\n };\n onMouseLeave = () => {\n clearTimeout(this.timeOut);\n const { mouseLeaveDelay } = this.props;\n this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);\n };\n\n getTooltipBoundary = () => {\n const { keepTooltipInside } = this.props;\n let boundingBox = {\n top: 0,\n left: 0,\n width: window.innerWidth,\n height: window.innerHeight\n };\n if (typeof keepTooltipInside === \"string\") {\n const selector = document.querySelector(keepTooltipInside);\n if (process.env.NODE_ENV !== \"production\") {\n if (selector === null)\n throw new Error(\n `${keepTooltipInside} selector is not exist : keepTooltipInside must be a valid html selector 'class' or 'Id' or a boolean value`\n );\n }\n boundingBox = selector.getBoundingClientRect();\n }\n return boundingBox;\n };\n\n setPosition = () => {\n const { arrow, position, offsetX, offsetY, keepTooltipInside, arrowStyle } = this.props;\n const { modal } = this.state;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const boundingBox = this.getTooltipBoundary();\n let positions = Array.isArray(position) ? position : [position];\n\n // keepTooltipInside would be activated if the keepTooltipInside exist or the position is Array\n if (keepTooltipInside || Array.isArray(position))\n positions = [...positions, ...POSITION_TYPES];\n\n const cords = calculatePosition(\n trigger,\n content,\n positions,\n arrow,\n {\n offsetX,\n offsetY\n },\n boundingBox\n );\n this.ContentEl.style.top = cords.top - helper.top + \"px\";\n this.ContentEl.style.left = cords.left - helper.left + \"px\";\n if (arrow) {\n this.ArrowEl.style[\"transform\"] = cords.transform;\n this.ArrowEl.style[\"-ms-transform\"] = cords.transform;\n this.ArrowEl.style[\"-webkit-transform\"] = cords.transform;\n this.ArrowEl.style.top = arrowStyle.top || cords.arrowTop;\n this.ArrowEl.style.left = arrowStyle.left || cords.arrowLeft;\n }\n if (\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"static\" ||\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, on } = this.props;\n const { modal } = this.state;\n const popupContentStyle = modal\n ? styles.popupContent.modal\n : styles.popupContent.tooltip;\n\n const childrenElementProps = {\n className: `popup-content ${className}`,\n style: Object.assign({}, popupContentStyle, contentStyle),\n ref: this.setContentRef,\n onClick: e => {\n e.stopPropagation();\n }\n };\n if (!modal && on.indexOf(\"hover\") >= 0) {\n childrenElementProps.onMouseEnter = this.onMouseEnter;\n childrenElementProps.onMouseLeave = this.onMouseLeave;\n }\n return childrenElementProps;\n };\n renderTrigger = () => {\n const triggerProps = { key: \"T\" };\n const { on, trigger } = this.props;\n const onAsArray = Array.isArray(on) ? on : [on];\n for (let i = 0, len = onAsArray.length; i < len; i++) {\n switch (onAsArray[i]) {\n case \"click\":\n triggerProps.onClick = this.togglePopup;\n break;\n case \"hover\":\n triggerProps.onMouseEnter = this.onMouseEnter;\n triggerProps.onMouseLeave = this.onMouseLeave;\n break;\n case \"focus\":\n triggerProps.onFocus = this.onMouseEnter;\n break;\n }\n }\n\n if (typeof trigger === \"function\")\n return React.cloneElement(trigger(this.state.isOpen), triggerProps);\n\n return React.cloneElement(trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, arrowStyle } = this.props;\n const { modal } = this.state;\n return (\n
\n {arrow &&\n !modal && (\n \n )}\n {typeof this.props.children === \"function\"\n ? this.props.children(this.closePopup, this.state.isOpen)\n : this.props.children}\n
\n );\n };\n\n render() {\n const { overlayStyle, closeOnDocumentClick, on } = this.props;\n const { modal } = this.state;\n const overlay = this.state.isOpen && !(on.indexOf(\"hover\") >= 0);\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n !!this.props.trigger && (\n \n {this.renderTrigger()}\n \n ),\n this.state.isOpen && (\n \n ),\n overlay && (\n \n {modal && this.renderContent()}\n \n ),\n this.state.isOpen && !modal && this.renderContent(),\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\n const TRIGGER_TYPES = [\"hover\", \"click\", \"focus\"];\n\n Popup.propTypes = {\n arrowStyle: PropTypes.object,\n contentStyle: PropTypes.object,\n overlayStyle: PropTypes.object,\n className: PropTypes.string,\n modal: PropTypes.bool,\n closeOnDocumentClick: PropTypes.bool,\n repositionOnResize:PropTypes.bool,\n disabled: PropTypes.bool,\n lockScroll: PropTypes.bool,\n offsetX: PropTypes.number,\n offsetY: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n open: PropTypes.bool,\n defaultOpen: PropTypes.bool,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element\n on: PropTypes.oneOfType([\n PropTypes.oneOf(TRIGGER_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(TRIGGER_TYPES))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOfType([\n PropTypes.oneOf(POSITION_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(POSITION_TYPES))\n ]),\n keepTooltipInside: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n };\n}\n\nclass Ref extends React.PureComponent {\n componentDidMount() {\n const { innerRef } = this.props;\n if (innerRef) innerRef(findDOMNode(this));\n }\n\n render() {\n const { children } = this.props;\n return React.Children.only(children);\n }\n}\n"],"names":["getCoordinatesForPosition","triggerBounding","ContentBounding","position","arrow","offsetX","offsetY","margin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","popupContent","tooltip","zIndex","background","border","boxShadow","padding","modal","popupArrow","overlay","bottom","right","display","POSITION_TYPES","Popup","props","isOpen","_this","open","defaultOpen","trigger","setPosition","e","key","closePopup","state","lockScroll","document","getElementsByTagName","style","overflow","openPopup","disabled","setState","onOpen","onClose","resetScroll","clearTimeout","timeOut","mouseEnterDelay","setTimeout","mouseLeaveDelay","keepTooltipInside","boundingBox","window","innerWidth","innerHeight","querySelector","getBoundingClientRect","arrowStyle","helper","HelperEl","TriggerEl","content","ContentEl","getTooltipBoundary","positions","Array","isArray","cords","wrapperBox","bestCoords","i","length","contentBox","calculatePosition","ArrowEl","getComputedStyle","getPropertyValue","contentStyle","className","on","popupContentStyle","styles","childrenElementProps","Object","assign","ref","setContentRef","onClick","stopPropagation","indexOf","onMouseEnter","onMouseLeave","triggerProps","onAsArray","len","togglePopup","onFocus","React","cloneElement","addWarperAction","setArrowRef","children","setTriggerRef","r","setHelperRef","PureComponent","this","closeOnEscape","repositionOnResize","addEventListener","onEscape","rerepositionOnResize","nextProps","prevProps","removeEventListener","overlayStyle","closeOnDocumentClick","ovStyle","Ref","innerRef","renderTrigger","undefined","renderContent","findDOMNode","Children","only"],"mappings":"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"} \ No newline at end of file diff --git a/package.json b/package.json index 2f5eba8..85b49ec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reactjs-popup", - "version": "1.3.1", + "version": "1.3.2", "description": "React Popup Component - Modals,Tooltips and Menus —  All in one", "main": "reactjs-popup.cjs.js", "module": "reactjs-popup.es.js", From 543d54c5b60f7b969c67dcf4dff29f19408a6cba Mon Sep 17 00:00:00 2001 From: Youssouf El Azizi Date: Thu, 13 Dec 2018 01:03:22 +0100 Subject: [PATCH 2/3] remove repositionOnResize on popup not opned --- src/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index c498050..31c67e2 100644 --- a/src/index.js +++ b/src/index.js @@ -67,11 +67,11 @@ export default class Popup extends React.PureComponent { window.addEventListener("keyup", this.onEscape); } if(repositionOnResize){ - window.addEventListener('resize', this.rerepositionOnResize); + window.addEventListener('resize', this.repositionOnResize); } } - rerepositionOnResize = () => { + repositionOnResize = () => { this.setPosition() } onEscape = (e) => { @@ -102,7 +102,7 @@ export default class Popup extends React.PureComponent { window.removeEventListener("keyup", this.onEscape); } if(repositionOnResize){ - window.removeEventListener('resize', this.rerepositionOnResize); + window.removeEventListener('resize', this.repositionOnResize); } } @@ -167,9 +167,9 @@ export default class Popup extends React.PureComponent { }; setPosition = () => { + const { modal,isOpen } = this.state; + if (modal|| !isOpen) return; const { arrow, position, offsetX, offsetY, keepTooltipInside, arrowStyle } = this.props; - const { modal } = this.state; - if (modal) return; const helper = this.HelperEl.getBoundingClientRect(); const trigger = this.TriggerEl.getBoundingClientRect(); const content = this.ContentEl.getBoundingClientRect(); From 6a5cc598789410397fa8644a64481b7c374c29ee Mon Sep 17 00:00:00 2001 From: Youssouf El Azizi Date: Thu, 13 Dec 2018 01:08:28 +0100 Subject: [PATCH 3/3] V1.3.2 --- lib/package.json | 2 +- lib/reactjs-popup.cjs.js | 12 +++++++----- lib/reactjs-popup.es.js | 12 +++++++----- lib/reactjs-popup.js | 12 +++++++----- lib/reactjs-popup.min.js | 2 +- lib/reactjs-popup.min.js.map | 2 +- package.json | 2 +- 7 files changed, 25 insertions(+), 19 deletions(-) diff --git a/lib/package.json b/lib/package.json index 004ced4..11633d9 100644 --- a/lib/package.json +++ b/lib/package.json @@ -35,5 +35,5 @@ "bugs": { "url": "https://github.com/yjose/reactjs-popup/issues" }, - "homepage": "https://react-popup.netlify.com/" + "homepage": "https://react-popup.elazizi.com/" } \ No newline at end of file diff --git a/lib/reactjs-popup.cjs.js b/lib/reactjs-popup.cjs.js index 5e03c81..36ac916 100644 --- a/lib/reactjs-popup.cjs.js +++ b/lib/reactjs-popup.cjs.js @@ -326,7 +326,7 @@ function (_React$PureComponent) { }); - _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "rerepositionOnResize", function () { + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "repositionOnResize", function () { _this.setPosition(); }); @@ -411,6 +411,10 @@ function (_React$PureComponent) { }); _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setPosition", function () { + var _this$state = _this.state, + modal = _this$state.modal, + isOpen = _this$state.isOpen; + if (modal || !isOpen) return; var _this$props = _this.props, arrow = _this$props.arrow, position = _this$props.position, @@ -418,8 +422,6 @@ function (_React$PureComponent) { offsetY = _this$props.offsetY, keepTooltipInside = _this$props.keepTooltipInside, arrowStyle = _this$props.arrowStyle; - var modal = _this.state.modal; - if (modal) return; var helper = _this.HelperEl.getBoundingClientRect(); @@ -551,7 +553,7 @@ function (_React$PureComponent) { } if (repositionOnResize) { - window.addEventListener('resize', this.rerepositionOnResize); + window.addEventListener('resize', this.repositionOnResize); } } }, { @@ -581,7 +583,7 @@ function (_React$PureComponent) { } if (repositionOnResize) { - window.removeEventListener('resize', this.rerepositionOnResize); + window.removeEventListener('resize', this.repositionOnResize); } } }, { diff --git a/lib/reactjs-popup.es.js b/lib/reactjs-popup.es.js index 208a7a2..d5063f3 100644 --- a/lib/reactjs-popup.es.js +++ b/lib/reactjs-popup.es.js @@ -322,7 +322,7 @@ function (_React$PureComponent) { }); - _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "rerepositionOnResize", function () { + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "repositionOnResize", function () { _this.setPosition(); }); @@ -407,6 +407,10 @@ function (_React$PureComponent) { }); _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setPosition", function () { + var _this$state = _this.state, + modal = _this$state.modal, + isOpen = _this$state.isOpen; + if (modal || !isOpen) return; var _this$props = _this.props, arrow = _this$props.arrow, position = _this$props.position, @@ -414,8 +418,6 @@ function (_React$PureComponent) { offsetY = _this$props.offsetY, keepTooltipInside = _this$props.keepTooltipInside, arrowStyle = _this$props.arrowStyle; - var modal = _this.state.modal; - if (modal) return; var helper = _this.HelperEl.getBoundingClientRect(); @@ -547,7 +549,7 @@ function (_React$PureComponent) { } if (repositionOnResize) { - window.addEventListener('resize', this.rerepositionOnResize); + window.addEventListener('resize', this.repositionOnResize); } } }, { @@ -577,7 +579,7 @@ function (_React$PureComponent) { } if (repositionOnResize) { - window.removeEventListener('resize', this.rerepositionOnResize); + window.removeEventListener('resize', this.repositionOnResize); } } }, { diff --git a/lib/reactjs-popup.js b/lib/reactjs-popup.js index 854038d..dca42d6 100644 --- a/lib/reactjs-popup.js +++ b/lib/reactjs-popup.js @@ -327,7 +327,7 @@ }); - _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "rerepositionOnResize", function () { + _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "repositionOnResize", function () { _this.setPosition(); }); @@ -412,6 +412,10 @@ }); _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setPosition", function () { + var _this$state = _this.state, + modal = _this$state.modal, + isOpen = _this$state.isOpen; + if (modal || !isOpen) return; var _this$props = _this.props, arrow = _this$props.arrow, position = _this$props.position, @@ -419,8 +423,6 @@ offsetY = _this$props.offsetY, keepTooltipInside = _this$props.keepTooltipInside, arrowStyle = _this$props.arrowStyle; - var modal = _this.state.modal; - if (modal) return; var helper = _this.HelperEl.getBoundingClientRect(); @@ -552,7 +554,7 @@ } if (repositionOnResize) { - window.addEventListener('resize', this.rerepositionOnResize); + window.addEventListener('resize', this.repositionOnResize); } } }, { @@ -582,7 +584,7 @@ } if (repositionOnResize) { - window.removeEventListener('resize', this.rerepositionOnResize); + window.removeEventListener('resize', this.repositionOnResize); } } }, { diff --git a/lib/reactjs-popup.min.js b/lib/reactjs-popup.min.js index aa39eae..f1d6e05 100644 --- a/lib/reactjs-popup.min.js +++ b/lib/reactjs-popup.min.js @@ -3,5 +3,5 @@ * (c) 2018-present Youssouf EL AZIZI * 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(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var o=0;o=i.top+i.height||u.left+u.width>=i.left+i.width))break;a++}return s}(a,u,h,t,{offsetX:n,offsetY:i},c);r.ContentEl.style.top=y.top-l.top+"px",r.ContentEl.style.left=y.left-l.left+"px",t&&(r.ArrowEl.style.transform=y.transform,r.ArrowEl.style["-ms-transform"]=y.transform,r.ArrowEl.style["-webkit-transform"]=y.transform,r.ArrowEl.style.top=p.top||y.arrowTop,r.ArrowEl.style.left=p.left||y.arrowLeft),"static"!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")||(r.TriggerEl.style.position="relative")}}),i(u(u(r)),"addWarperAction",function(){var e=r.props,t=e.contentStyle,o=e.className,n=e.on,i=r.state.modal,s=i?h.popupContent.modal:h.popupContent.tooltip,p={className:"popup-content ".concat(o),style:Object.assign({},s,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&n.indexOf("hover")>=0&&(p.onMouseEnter=r.onMouseEnter,p.onMouseLeave=r.onMouseLeave),p}),i(u(u(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=0),p=i?h.overlay.modal:h.overlay.tooltip;return[!!this.props.trigger&&e.createElement(m,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger()),this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),s&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},p,o),onClick:n?this.closePopup:void 0},i&&this.renderContent()),this.state.isOpen&&!i&&this.renderContent()]}}]),n}();i(y,"defaultProps",{children:function(){return e.createElement("span",null," Your Content Here !!")},trigger:null,onOpen:function(){},onClose:function(){},defaultOpen:!1,open:!1,disabled:!1,closeOnDocumentClick:!0,repositionOnResize:!0,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!1,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100,keepTooltipInside:!1});var m=function(n){function i(){return o(this,i),c(this,l(i).apply(this,arguments))}return p(i,e.PureComponent),r(i,[{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)}}]),i}();return y}); +!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(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var o=0;o=i.top+i.height||u.left+u.width>=i.left+i.width))break;a++}return s}(h,y,b,i,{offsetX:p,offsetY:l},m);r.ContentEl.style.top=w.top-c.top+"px",r.ContentEl.style.left=w.left-c.left+"px",i&&(r.ArrowEl.style.transform=w.transform,r.ArrowEl.style["-ms-transform"]=w.transform,r.ArrowEl.style["-webkit-transform"]=w.transform,r.ArrowEl.style.top=u.top||w.arrowTop,r.ArrowEl.style.left=u.left||w.arrowLeft),"static"!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")||(r.TriggerEl.style.position="relative")}}),i(u(u(r)),"addWarperAction",function(){var e=r.props,t=e.contentStyle,o=e.className,n=e.on,i=r.state.modal,s=i?h.popupContent.modal:h.popupContent.tooltip,p={className:"popup-content ".concat(o),style:Object.assign({},s,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&n.indexOf("hover")>=0&&(p.onMouseEnter=r.onMouseEnter,p.onMouseLeave=r.onMouseLeave),p}),i(u(u(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=0),p=i?h.overlay.modal:h.overlay.tooltip;return[!!this.props.trigger&&e.createElement(m,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger()),this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),s&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},p,o),onClick:n?this.closePopup:void 0},i&&this.renderContent()),this.state.isOpen&&!i&&this.renderContent()]}}]),n}();i(y,"defaultProps",{children:function(){return e.createElement("span",null," Your Content Here !!")},trigger:null,onOpen:function(){},onClose:function(){},defaultOpen:!1,open:!1,disabled:!1,closeOnDocumentClick:!0,repositionOnResize:!0,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!1,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100,keepTooltipInside:!1});var m=function(n){function i(){return o(this,i),c(this,l(i).apply(this,arguments))}return p(i,e.PureComponent),r(i,[{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)}}]),i}();return y}); //# sourceMappingURL=reactjs-popup.min.js.map diff --git a/lib/reactjs-popup.min.js.map b/lib/reactjs-popup.min.js.map index bf70bd5..cf98f1b 100644 --- a/lib/reactjs-popup.min.js.map +++ b/lib/reactjs-popup.min.js.map @@ -1 +1 @@ -{"version":3,"file":"reactjs-popup.min.js","sources":["../src/Utils.js","../src/index.css.js","../src/index.js"],"sourcesContent":["/* Algo to calculate position\n 1. center position for popup content : the center of the trigger will be the center of the content content\n so the popup content position will be like this :\n top => the y of the center for the trigger element : trigger.top + trigger.height/2\n left => the x of the center for the trigger element : trigger.left + trigger.width/2\n\n 2. translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n 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\n\n 3.translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n the second argument 'top' => translate popup content by + content.height*4/5\n\n 4. check if calculated position is going out of bounds of wrapper box or not. If yes repeat 1-3 for next position enum. By default wrapper box is window element\n*/\n\nfunction getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n { offsetX, offsetY }\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const args = position.split(\" \");\n // the step N 1 : center the popup content => ok\n const CenterTop = triggerBounding.top + triggerBounding.height / 2;\n const CenterLeft = triggerBounding.left + triggerBounding.width / 2;\n const { height, width } = ContentBounding;\n let top = CenterTop - height / 2;\n let left = CenterLeft - width / 2;\n let transform = \"\";\n let arrowTop = \"0%\";\n let arrowLeft = \"0%\";\n // the step N 2 : => ok\n switch (args[0]) {\n case \"top\":\n top -= height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + margin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + margin;\n transform = `rotate(135deg)`;\n arrowTop = \"50%\";\n\n break;\n }\n switch (args[1]) {\n case \"top\":\n top = triggerBounding.top;\n arrowTop = triggerBounding.height / 2 + \"px\";\n break;\n case \"bottom\":\n top = triggerBounding.top - height + triggerBounding.height;\n arrowTop = height - triggerBounding.height / 2 + \"px\";\n break;\n case \"left\":\n left = triggerBounding.left;\n arrowLeft = triggerBounding.width / 2 + \"px\";\n break;\n case \"right\":\n left = triggerBounding.left - width + triggerBounding.width;\n arrowLeft = width - triggerBounding.width / 2 + \"px\";\n break;\n }\n\n top = args[0] === \"top\" ? top - offsetY : top + offsetY;\n left = args[0] === \"left\" ? left - offsetX : left + offsetX;\n\n return { top, left, transform, arrowLeft, arrowTop };\n}\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n positions,\n arrow,\n { offsetX, offsetY },\n wrapperBox\n) {\n let bestCoords;\n let i = 0;\n while (i < positions.length) {\n bestCoords = getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n positions[i],\n arrow,\n { offsetX, offsetY }\n );\n\n const contentBox = {\n top: bestCoords.top,\n left: bestCoords.left,\n width: ContentBounding.width,\n height: ContentBounding.height\n };\n\n if (\n contentBox.top <= wrapperBox.top ||\n contentBox.left <= wrapperBox.left ||\n contentBox.top + contentBox.height >=\n wrapperBox.top + wrapperBox.height ||\n contentBox.left + contentBox.width >= wrapperBox.left + wrapperBox.width\n ) {\n i++;\n } else {\n break;\n }\n }\n\n return bestCoords;\n}\n","export default {\n popupContent: {\n tooltip: {\n position: \"absolute\",\n zIndex: \"2\",\n width: \"200px\",\n background: `rgb(255, 255, 255)`,\n border: `1px solid rgb(187, 187, 187)`,\n boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,\n padding: \"5px\"\n },\n modal: {\n position: \"relative\",\n background: `rgb(255, 255, 255)`,\n width: \"50%\",\n margin: \"auto\",\n border: `1px solid rgb(187, 187, 187)`,\n padding: \"5px\"\n }\n },\n popupArrow: {\n height: \"10px\",\n width: \"10px\",\n position: \"absolute\",\n background: \"rgb(255, 255, 255)\",\n transform: \"rotate(45deg)\",\n margin: \"-5px\",\n zIndex: \"-1\",\n boxShadow: \"rgba(0, 0, 0, 0.2) 1px 1px 1px\"\n },\n overlay: {\n tooltip: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\"\n },\n modal: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\",\n background: `rgba(0, 0, 0,0.5)`,\n display: \"flex\",\n zIndex: \"999\"\n }\n }\n};\n","import React from \"react\";\nimport { findDOMNode } from \"react-dom\";\nimport calculatePosition from \"./Utils\";\n\nimport styles from \"./index.css.js\";\nconst POSITION_TYPES = [\n \"top left\",\n \"top center\",\n \"top right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n];\n\nexport default class Popup extends React.PureComponent {\n static defaultProps = {\n children: () => Your Content Here !!,\n trigger: null,\n onOpen: () => {},\n onClose: () => {},\n defaultOpen: false,\n open: false,\n disabled: false,\n closeOnDocumentClick: true,\n repositionOnResize:true,\n closeOnEscape: true,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n lockScroll: false,\n arrow: true,\n offsetX: 0,\n offsetY: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100,\n keepTooltipInside: false\n };\n state = {\n isOpen: this.props.open || this.props.defaultOpen,\n modal: this.props.modal ? true : !this.props.trigger\n // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't exist\n };\n\n constructor(props) {\n super(props);\n this.setTriggerRef = r => (this.TriggerEl = r);\n this.setContentRef = r => (this.ContentEl = r);\n this.setArrowRef = r => (this.ArrowEl = r);\n this.setHelperRef = r => (this.HelperEl = r);\n this.timeOut = 0;\n }\n\n componentDidMount() {\n const { closeOnEscape, defaultOpen ,repositionOnResize} = this.props;\n if (defaultOpen) this.setPosition();\n if (closeOnEscape) {\n window.addEventListener(\"keyup\", this.onEscape);\n }\n if(repositionOnResize){\n window.addEventListener('resize', this.rerepositionOnResize);\n }\n }\n\n rerepositionOnResize = () => {\n this.setPosition()\n }\n onEscape = (e) => {\n if (e.key === \"Escape\") this.closePopup();\n }\n\n componentWillReceiveProps(nextProps) {\n if (this.props.open === nextProps.open) return;\n if (nextProps.open) this.openPopup();\n else this.closePopup();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.disabled !== this.props.disabled\n && this.props.disabled\n && this.state.isOpen) {\n this.closePopup();\n }\n }\n\n componentWillUnmount() {\n // kill any function to execute if the component is unmounted\n clearTimeout(this.timeOut);\n\n const { closeOnEscape ,repositionOnResize} = this.props;\n // remove events listeners\n if (closeOnEscape) {\n window.removeEventListener(\"keyup\", this.onEscape);\n }\n if(repositionOnResize){\n window.removeEventListener('resize', this.rerepositionOnResize);\n }\n }\n\n lockScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n };\n resetScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"auto\";\n };\n\n togglePopup = () => {\n if (this.state.isOpen) this.closePopup();\n else this.openPopup();\n };\n openPopup = () => {\n if (this.state.isOpen || this.props.disabled) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n this.lockScroll();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.props.onClose();\n this.setState({ isOpen: false }, () => {\n this.resetScroll();\n });\n };\n onMouseEnter = () => {\n clearTimeout(this.timeOut);\n const { mouseEnterDelay } = this.props;\n this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);\n };\n onMouseLeave = () => {\n clearTimeout(this.timeOut);\n const { mouseLeaveDelay } = this.props;\n this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);\n };\n\n getTooltipBoundary = () => {\n const { keepTooltipInside } = this.props;\n let boundingBox = {\n top: 0,\n left: 0,\n width: window.innerWidth,\n height: window.innerHeight\n };\n if (typeof keepTooltipInside === \"string\") {\n const selector = document.querySelector(keepTooltipInside);\n if (process.env.NODE_ENV !== \"production\") {\n if (selector === null)\n throw new Error(\n `${keepTooltipInside} selector is not exist : keepTooltipInside must be a valid html selector 'class' or 'Id' or a boolean value`\n );\n }\n boundingBox = selector.getBoundingClientRect();\n }\n return boundingBox;\n };\n\n setPosition = () => {\n const { arrow, position, offsetX, offsetY, keepTooltipInside, arrowStyle } = this.props;\n const { modal } = this.state;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const boundingBox = this.getTooltipBoundary();\n let positions = Array.isArray(position) ? position : [position];\n\n // keepTooltipInside would be activated if the keepTooltipInside exist or the position is Array\n if (keepTooltipInside || Array.isArray(position))\n positions = [...positions, ...POSITION_TYPES];\n\n const cords = calculatePosition(\n trigger,\n content,\n positions,\n arrow,\n {\n offsetX,\n offsetY\n },\n boundingBox\n );\n this.ContentEl.style.top = cords.top - helper.top + \"px\";\n this.ContentEl.style.left = cords.left - helper.left + \"px\";\n if (arrow) {\n this.ArrowEl.style[\"transform\"] = cords.transform;\n this.ArrowEl.style[\"-ms-transform\"] = cords.transform;\n this.ArrowEl.style[\"-webkit-transform\"] = cords.transform;\n this.ArrowEl.style.top = arrowStyle.top || cords.arrowTop;\n this.ArrowEl.style.left = arrowStyle.left || cords.arrowLeft;\n }\n if (\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"static\" ||\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, on } = this.props;\n const { modal } = this.state;\n const popupContentStyle = modal\n ? styles.popupContent.modal\n : styles.popupContent.tooltip;\n\n const childrenElementProps = {\n className: `popup-content ${className}`,\n style: Object.assign({}, popupContentStyle, contentStyle),\n ref: this.setContentRef,\n onClick: e => {\n e.stopPropagation();\n }\n };\n if (!modal && on.indexOf(\"hover\") >= 0) {\n childrenElementProps.onMouseEnter = this.onMouseEnter;\n childrenElementProps.onMouseLeave = this.onMouseLeave;\n }\n return childrenElementProps;\n };\n renderTrigger = () => {\n const triggerProps = { key: \"T\" };\n const { on, trigger } = this.props;\n const onAsArray = Array.isArray(on) ? on : [on];\n for (let i = 0, len = onAsArray.length; i < len; i++) {\n switch (onAsArray[i]) {\n case \"click\":\n triggerProps.onClick = this.togglePopup;\n break;\n case \"hover\":\n triggerProps.onMouseEnter = this.onMouseEnter;\n triggerProps.onMouseLeave = this.onMouseLeave;\n break;\n case \"focus\":\n triggerProps.onFocus = this.onMouseEnter;\n break;\n }\n }\n\n if (typeof trigger === \"function\")\n return React.cloneElement(trigger(this.state.isOpen), triggerProps);\n\n return React.cloneElement(trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, arrowStyle } = this.props;\n const { modal } = this.state;\n return (\n
\n {arrow &&\n !modal && (\n \n )}\n {typeof this.props.children === \"function\"\n ? this.props.children(this.closePopup, this.state.isOpen)\n : this.props.children}\n
\n );\n };\n\n render() {\n const { overlayStyle, closeOnDocumentClick, on } = this.props;\n const { modal } = this.state;\n const overlay = this.state.isOpen && !(on.indexOf(\"hover\") >= 0);\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n !!this.props.trigger && (\n \n {this.renderTrigger()}\n \n ),\n this.state.isOpen && (\n \n ),\n overlay && (\n \n {modal && this.renderContent()}\n \n ),\n this.state.isOpen && !modal && this.renderContent(),\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\n const TRIGGER_TYPES = [\"hover\", \"click\", \"focus\"];\n\n Popup.propTypes = {\n arrowStyle: PropTypes.object,\n contentStyle: PropTypes.object,\n overlayStyle: PropTypes.object,\n className: PropTypes.string,\n modal: PropTypes.bool,\n closeOnDocumentClick: PropTypes.bool,\n repositionOnResize:PropTypes.bool,\n disabled: PropTypes.bool,\n lockScroll: PropTypes.bool,\n offsetX: PropTypes.number,\n offsetY: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n open: PropTypes.bool,\n defaultOpen: PropTypes.bool,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element\n on: PropTypes.oneOfType([\n PropTypes.oneOf(TRIGGER_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(TRIGGER_TYPES))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOfType([\n PropTypes.oneOf(POSITION_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(POSITION_TYPES))\n ]),\n keepTooltipInside: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n };\n}\n\nclass Ref extends React.PureComponent {\n componentDidMount() {\n const { innerRef } = this.props;\n if (innerRef) innerRef(findDOMNode(this));\n }\n\n render() {\n const { children } = this.props;\n return React.Children.only(children);\n }\n}\n"],"names":["getCoordinatesForPosition","triggerBounding","ContentBounding","position","arrow","offsetX","offsetY","margin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","popupContent","tooltip","zIndex","background","border","boxShadow","padding","modal","popupArrow","overlay","bottom","right","display","POSITION_TYPES","Popup","props","isOpen","_this","open","defaultOpen","trigger","setPosition","e","key","closePopup","state","lockScroll","document","getElementsByTagName","style","overflow","openPopup","disabled","setState","onOpen","onClose","resetScroll","clearTimeout","timeOut","mouseEnterDelay","setTimeout","mouseLeaveDelay","keepTooltipInside","boundingBox","window","innerWidth","innerHeight","querySelector","getBoundingClientRect","arrowStyle","helper","HelperEl","TriggerEl","content","ContentEl","getTooltipBoundary","positions","Array","isArray","cords","wrapperBox","bestCoords","i","length","contentBox","calculatePosition","ArrowEl","getComputedStyle","getPropertyValue","contentStyle","className","on","popupContentStyle","styles","childrenElementProps","Object","assign","ref","setContentRef","onClick","stopPropagation","indexOf","onMouseEnter","onMouseLeave","triggerProps","onAsArray","len","togglePopup","onFocus","React","cloneElement","addWarperAction","setArrowRef","children","setTriggerRef","r","setHelperRef","PureComponent","this","closeOnEscape","repositionOnResize","addEventListener","onEscape","rerepositionOnResize","nextProps","prevProps","removeEventListener","overlayStyle","closeOnDocumentClick","ovStyle","Ref","innerRef","renderTrigger","undefined","renderContent","findDOMNode","Children","only"],"mappings":";;;;;u2DAmBA,SAASA,EACPC,EACAC,EACAC,EACAC,SACEC,IAAAA,QAASC,IAAAA,QAGLC,EAASH,EAAQ,EAAI,EACrBI,EAAOL,EAASM,MAAM,KAEtBC,EAAYT,EAAgBU,IAAMV,EAAgBW,OAAS,EAC3DC,EAAaZ,EAAgBa,KAAOb,EAAgBc,MAAQ,EAC1DH,EAAkBV,EAAlBU,OAAQG,EAAUb,EAAVa,MACZJ,EAAMD,EAAYE,EAAS,EAC3BE,EAAOD,EAAaE,EAAQ,EAC5BC,EAAY,GACZC,EAAW,KACXC,EAAY,YAERV,EAAK,QACN,MACHG,GAAOC,EAAS,EAAIX,EAAgBW,OAAS,EAAIL,EACjDS,kBACAC,EAAW,OACXC,EAAY,gBAET,SACHP,GAAOC,EAAS,EAAIX,EAAgBW,OAAS,EAAIL,EACjDS,mBACAE,EAAY,gBAET,OACHJ,GAAQC,EAAQ,EAAId,EAAgBc,MAAQ,EAAIR,EAChDS,oBACAE,EAAY,OACZD,EAAW,gBAER,QACHH,GAAQC,EAAQ,EAAId,EAAgBc,MAAQ,EAAIR,EAChDS,mBACAC,EAAW,aAIPT,EAAK,QACN,MACHG,EAAMV,EAAgBU,IACtBM,EAAWhB,EAAgBW,OAAS,EAAI,eAErC,SACHD,EAAMV,EAAgBU,IAAMC,EAASX,EAAgBW,OACrDK,EAAWL,EAASX,EAAgBW,OAAS,EAAI,eAE9C,OACHE,EAAOb,EAAgBa,KACvBI,EAAYjB,EAAgBc,MAAQ,EAAI,eAErC,QACHD,EAAOb,EAAgBa,KAAOC,EAAQd,EAAgBc,MACtDG,EAAYH,EAAQd,EAAgBc,MAAQ,EAAI,WAO7C,CAAEJ,IAHTA,EAAkB,QAAZH,EAAK,GAAeG,EAAML,EAAUK,EAAML,EAGlCQ,KAFdA,EAAmB,SAAZN,EAAK,GAAgBM,EAAOT,EAAUS,EAAOT,EAEhCW,UAAAA,EAAWE,UAAAA,EAAWD,SAAAA,sDCtF7B,CACbE,aAAc,CACZC,QAAS,CACPjB,SAAU,WACVkB,OAAQ,IACRN,MAAO,QACPO,gCACAC,sCACAC,2CACAC,QAAS,OAEXC,MAAO,CACLvB,SAAU,WACVmB,gCACAP,MAAO,MACPR,OAAQ,OACRgB,sCACAE,QAAS,QAGbE,WAAY,CACVf,OAAQ,OACRG,MAAO,OACPZ,SAAU,WACVmB,WAAY,qBACZN,UAAW,gBACXT,OAAQ,OACRc,OAAQ,KACRG,UAAW,kCAEbI,QAAS,CACPR,QAAS,CACPjB,SAAU,QACVQ,IAAK,IACLkB,OAAQ,IACRf,KAAM,IACNgB,MAAO,KAETJ,MAAO,CACLvB,SAAU,QACVQ,IAAK,IACLkB,OAAQ,IACRf,KAAM,IACNgB,MAAO,IACPR,+BACAS,QAAS,OACTV,OAAQ,SCzCRW,EAAiB,CACrB,WACA,aACA,YACA,YACA,eACA,eACA,cACA,gBACA,eACA,WACA,cACA,eAGmBC,yBAiCPC,wDACJA,cAPA,CACNC,OAAQC,EAAKF,MAAMG,MAAQD,EAAKF,MAAMI,YACtCZ,QAAOU,EAAKF,MAAMR,QAAgBU,EAAKF,MAAMK,2CAwBxB,aACdC,qCAEE,SAACC,GACI,WAAVA,EAAEC,KAAkBN,EAAKO,sCA+BlB,WACPP,EAAKQ,MAAMlB,OAASU,EAAKF,MAAMW,aACjCC,SAASC,qBAAqB,QAAQ,GAAGC,MAAMC,SAAW,oCAEhD,WACRb,EAAKQ,MAAMlB,OAASU,EAAKF,MAAMW,aACjCC,SAASC,qBAAqB,QAAQ,GAAGC,MAAMC,SAAW,kCAGhD,WACRb,EAAKQ,MAAMT,OAAQC,EAAKO,aACvBP,EAAKc,oCAEA,WACNd,EAAKQ,MAAMT,QAAUC,EAAKF,MAAMiB,YAC/BC,SAAS,CAAEjB,QAAQ,GAAQ,aACzBK,gBACAN,MAAMmB,WACNR,wCAGI,WACNT,EAAKQ,MAAMT,WACXD,MAAMoB,YACNF,SAAS,CAAEjB,QAAQ,GAAS,aAC1BoB,4CAGM,WACbC,aAAapB,EAAKqB,aACVC,EAAoBtB,EAAKF,MAAzBwB,kBACHD,QAAUE,WAAW,kBAAMvB,EAAKc,aAAaQ,8BAErC,WACbF,aAAapB,EAAKqB,aACVG,EAAoBxB,EAAKF,MAAzB0B,kBACHH,QAAUE,WAAW,kBAAMvB,EAAKO,cAAciB,oCAGhC,eACXC,EAAsBzB,EAAKF,MAA3B2B,kBACJC,EAAc,CAChBnD,IAAK,EACLG,KAAM,EACNC,MAAOgD,OAAOC,WACdpD,OAAQmD,OAAOE,aAEgB,iBAAtBJ,IAQTC,EAPiBhB,SAASoB,cAAcL,GAOjBM,gCAElBL,4BAGK,iBACiE1B,EAAKF,MAA1E9B,IAAAA,MAAOD,IAAAA,SAAUE,IAAAA,QAASC,IAAAA,QAASuD,IAAAA,kBAAmBO,IAAAA,eAC5ChC,EAAKQ,MAAflB,WAEF2C,EAASjC,EAAKkC,SAASH,wBACvB5B,EAAUH,EAAKmC,UAAUJ,wBACzBK,EAAUpC,EAAKqC,UAAUN,wBACzBL,EAAc1B,EAAKsC,qBACrBC,EAAYC,MAAMC,QAAQ1E,GAAYA,EAAW,CAACA,IAGlD0D,GAAqBe,MAAMC,QAAQ1E,MACrCwE,IAAgBA,UAAc3C,QAE1B8C,EF7FK,SACb7E,EACAC,EACAyE,EACAvE,IAEA2E,WAEIC,EAHF3E,IAAAA,QAASC,IAAAA,QAIP2E,EAAI,EACDA,EAAIN,EAAUO,QAAQ,KASrBC,EAAa,CACjBxE,KATFqE,EAAahF,EACXC,EACAC,EACAyE,EAAUM,GACV7E,EACA,CAAEC,QAAAA,EAASC,QAAAA,KAIKK,IAChBG,KAAMkE,EAAWlE,KACjBC,MAAOb,EAAgBa,MACvBH,OAAQV,EAAgBU,aAIxBuE,EAAWxE,KAAOoE,EAAWpE,KAC7BwE,EAAWrE,MAAQiE,EAAWjE,MAC9BqE,EAAWxE,IAAMwE,EAAWvE,QAC1BmE,EAAWpE,IAAMoE,EAAWnE,QAC9BuE,EAAWrE,KAAOqE,EAAWpE,OAASgE,EAAWjE,KAAOiE,EAAWhE,aAEnEkE,WAMGD,EEsDSI,CACZ7C,EACAiC,EACAG,EACAvE,EACA,CACEC,QAAAA,EACAC,QAAAA,GAEFwD,KAEGW,UAAUzB,MAAMrC,IAAMmE,EAAMnE,IAAM0D,EAAO1D,IAAM,OAC/C8D,UAAUzB,MAAMlC,KAAOgE,EAAMhE,KAAOuD,EAAOvD,KAAO,KACnDV,MACGiF,QAAQrC,MAAb,UAAkC8B,EAAM9D,YACnCqE,QAAQrC,MAAM,iBAAmB8B,EAAM9D,YACvCqE,QAAQrC,MAAM,qBAAuB8B,EAAM9D,YAC3CqE,QAAQrC,MAAMrC,IAAMyD,EAAWzD,KAAOmE,EAAM7D,WAC5CoE,QAAQrC,MAAMlC,KAAOsD,EAAWtD,MAAQgE,EAAM5D,WAKhB,UAFnC6C,OACGuB,iBAAiBlD,EAAKmC,UAAW,MACjCgB,iBAAiB,aAGe,IAFnCxB,OACGuB,iBAAiBlD,EAAKmC,UAAW,MACjCgB,iBAAiB,cAEpBnD,EAAKmC,UAAUvB,MAAM7C,SAAW,2CAGlB,iBACwBiC,EAAKF,MAArCsD,IAAAA,aAAcC,IAAAA,UAAWC,IAAAA,GACzBhE,EAAUU,EAAKQ,MAAflB,MACFiE,EAAoBjE,EACtBkE,EAAOzE,aAAaO,MACpBkE,EAAOzE,aAAaC,QAElByE,EAAuB,CAC3BJ,kCAA4BA,GAC5BzC,MAAO8C,OAAOC,OAAO,GAAIJ,EAAmBH,GAC5CQ,IAAK5D,EAAK6D,cACVC,QAAS,SAAAzD,GACPA,EAAE0D,2BAGDzE,GAASgE,EAAGU,QAAQ,UAAY,IACnCP,EAAqBQ,aAAejE,EAAKiE,aACzCR,EAAqBS,aAAelE,EAAKkE,cAEpCT,8BAEO,mBACRU,EAAe,CAAE7D,IAAK,OACJN,EAAKF,MAArBwD,IAAAA,GAAInD,IAAAA,QACNiE,EAAY5B,MAAMC,QAAQa,GAAMA,EAAK,CAACA,GACnCT,EAAI,EAAGwB,EAAMD,EAAUtB,OAAQD,EAAIwB,EAAKxB,WACvCuB,EAAUvB,QACX,QACHsB,EAAaL,QAAU9D,EAAKsE,sBAEzB,QACHH,EAAaF,aAAejE,EAAKiE,aACjCE,EAAaD,aAAelE,EAAKkE,uBAE9B,QACHC,EAAaI,QAAUvE,EAAKiE,mBAKX,mBAAZ9D,EACFqE,EAAMC,aAAatE,EAAQH,EAAKQ,MAAMT,QAASoE,GAEjDK,EAAMC,aAAatE,EAASgE,+BAGrB,iBACgBnE,EAAKF,MAA3B9B,IAAAA,MAAOgE,IAAAA,WACP1C,EAAUU,EAAKQ,MAAflB,aAENkF,2BAASxE,EAAK0E,mBAAmBpE,IAAI,MAClCtC,IACEsB,GACCkF,uBACEZ,IAAK5D,EAAK2E,YACV/D,MAAO8C,OAAOC,OAAO,GAAIH,EAAOjE,WAAYyC,KAGlB,mBAAxBhC,EAAKF,MAAM8E,SACf5E,EAAKF,MAAM8E,SAAS5E,EAAKO,WAAYP,EAAKQ,MAAMT,QAChDC,EAAKF,MAAM8E,cA1NdC,cAAgB,SAAAC,UAAM9E,EAAKmC,UAAY2C,KACvCjB,cAAgB,SAAAiB,UAAM9E,EAAKqC,UAAYyC,KACvCH,YAAc,SAAAG,UAAM9E,EAAKiD,QAAU6B,KACnCC,aAAe,SAAAD,UAAM9E,EAAKkC,SAAW4C,KACrCzD,QAAU,eAvCgBmD,EAAMQ,oEA2CqBC,KAAKnF,MAAvDoF,IAAAA,cAAehF,IAAAA,YAAaiF,IAAAA,mBAChCjF,GAAa+E,KAAK7E,cAClB8E,GACFvD,OAAOyD,iBAAiB,QAASH,KAAKI,UAErCF,GACDxD,OAAOyD,iBAAiB,SAAUH,KAAKK,wEAWjBC,GACpBN,KAAKnF,MAAMG,OAASsF,EAAUtF,OAC9BsF,EAAUtF,KAAMgF,KAAKnE,YACpBmE,KAAK1E,yDAGOiF,GACbA,EAAUzE,WAAakE,KAAKnF,MAAMiB,UAC/BkE,KAAKnF,MAAMiB,UACXkE,KAAKzE,MAAMT,aACTQ,4DAMTa,aAAa6D,KAAK5D,eAE2B4D,KAAKnF,MAA1CoF,IAAAA,cAAeC,IAAAA,mBAEnBD,GACFvD,OAAO8D,oBAAoB,QAASR,KAAKI,UAExCF,GACDxD,OAAO8D,oBAAoB,SAAUR,KAAKK,6DA+KOL,KAAKnF,MAAhD4F,IAAAA,aAAcC,IAAAA,qBAAsBrC,IAAAA,GACpChE,EAAU2F,KAAKzE,MAAflB,MACFE,EAAUyF,KAAKzE,MAAMT,UAAYuD,EAAGU,QAAQ,UAAY,GACxD4B,EAAUtG,EAAQkE,EAAOhE,QAAQF,MAAQkE,EAAOhE,QAAQR,cACvD,GACHiG,KAAKnF,MAAMK,SACXqE,gBAACqB,GAAIC,SAAUb,KAAKJ,cAAevE,IAAI,KACpC2E,KAAKc,iBAGVd,KAAKzE,MAAMT,QACTyE,uBACElE,IAAI,IACJM,MAAO,CAAE7C,SAAU,WAAYQ,IAAK,MAAOG,KAAM,OACjDkF,IAAKqB,KAAKF,eAGdvF,GACEgF,uBACElE,IAAI,IACJ+C,UAAU,gBACVzC,MAAO8C,OAAOC,OAAO,GAAIiC,EAASF,GAClC5B,QAAS6B,EAAuBV,KAAK1E,gBAAayF,GAEjD1G,GAAS2F,KAAKgB,iBAGnBhB,KAAKzE,MAAMT,SAAWT,GAAS2F,KAAKgB,4BA9RrBpG,iBACG,CACpB+E,SAAU,kBAAMJ,sDAChBrE,QAAS,KACTc,OAAQ,aACRC,QAAS,aACThB,aAAa,EACbD,MAAM,EACNc,UAAU,EACV4E,sBAAsB,EACtBR,oBAAmB,EACnBD,eAAe,EACf5B,GAAI,CAAC,SACLF,aAAc,GACdpB,WAAY,GACZ0D,aAAc,GACdrC,UAAW,GACXtF,SAAU,gBACVuB,OAAO,EACPmB,YAAY,EACZzC,OAAO,EACPC,QAAS,EACTC,QAAS,EACToD,gBAAiB,IACjBE,gBAAiB,IACjBC,mBAAmB,QAkTjBoE,0FAAYrB,EAAMQ,kEAEZc,EAAab,KAAKnF,MAAlBgG,SACJA,GAAUA,EAASI,cAAYjB,4CAI3BL,EAAaK,KAAKnF,MAAlB8E,gBACDJ,EAAM2B,SAASC,KAAKxB"} \ No newline at end of file +{"version":3,"file":"reactjs-popup.min.js","sources":["../src/Utils.js","../src/index.css.js","../src/index.js"],"sourcesContent":["/* Algo to calculate position\n 1. center position for popup content : the center of the trigger will be the center of the content content\n so the popup content position will be like this :\n top => the y of the center for the trigger element : trigger.top + trigger.height/2\n left => the x of the center for the trigger element : trigger.left + trigger.width/2\n\n 2. translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n 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\n\n 3.translate position according to the first position attribute passed in the function argument\n for example :\n position = 'left top'\n the second argument 'top' => translate popup content by + content.height*4/5\n\n 4. check if calculated position is going out of bounds of wrapper box or not. If yes repeat 1-3 for next position enum. By default wrapper box is window element\n*/\n\nfunction getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n { offsetX, offsetY }\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const args = position.split(\" \");\n // the step N 1 : center the popup content => ok\n const CenterTop = triggerBounding.top + triggerBounding.height / 2;\n const CenterLeft = triggerBounding.left + triggerBounding.width / 2;\n const { height, width } = ContentBounding;\n let top = CenterTop - height / 2;\n let left = CenterLeft - width / 2;\n let transform = \"\";\n let arrowTop = \"0%\";\n let arrowLeft = \"0%\";\n // the step N 2 : => ok\n switch (args[0]) {\n case \"top\":\n top -= height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + margin;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + margin;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + margin;\n transform = `rotate(135deg)`;\n arrowTop = \"50%\";\n\n break;\n }\n switch (args[1]) {\n case \"top\":\n top = triggerBounding.top;\n arrowTop = triggerBounding.height / 2 + \"px\";\n break;\n case \"bottom\":\n top = triggerBounding.top - height + triggerBounding.height;\n arrowTop = height - triggerBounding.height / 2 + \"px\";\n break;\n case \"left\":\n left = triggerBounding.left;\n arrowLeft = triggerBounding.width / 2 + \"px\";\n break;\n case \"right\":\n left = triggerBounding.left - width + triggerBounding.width;\n arrowLeft = width - triggerBounding.width / 2 + \"px\";\n break;\n }\n\n top = args[0] === \"top\" ? top - offsetY : top + offsetY;\n left = args[0] === \"left\" ? left - offsetX : left + offsetX;\n\n return { top, left, transform, arrowLeft, arrowTop };\n}\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n positions,\n arrow,\n { offsetX, offsetY },\n wrapperBox\n) {\n let bestCoords;\n let i = 0;\n while (i < positions.length) {\n bestCoords = getCoordinatesForPosition(\n triggerBounding,\n ContentBounding,\n positions[i],\n arrow,\n { offsetX, offsetY }\n );\n\n const contentBox = {\n top: bestCoords.top,\n left: bestCoords.left,\n width: ContentBounding.width,\n height: ContentBounding.height\n };\n\n if (\n contentBox.top <= wrapperBox.top ||\n contentBox.left <= wrapperBox.left ||\n contentBox.top + contentBox.height >=\n wrapperBox.top + wrapperBox.height ||\n contentBox.left + contentBox.width >= wrapperBox.left + wrapperBox.width\n ) {\n i++;\n } else {\n break;\n }\n }\n\n return bestCoords;\n}\n","export default {\n popupContent: {\n tooltip: {\n position: \"absolute\",\n zIndex: \"2\",\n width: \"200px\",\n background: `rgb(255, 255, 255)`,\n border: `1px solid rgb(187, 187, 187)`,\n boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,\n padding: \"5px\"\n },\n modal: {\n position: \"relative\",\n background: `rgb(255, 255, 255)`,\n width: \"50%\",\n margin: \"auto\",\n border: `1px solid rgb(187, 187, 187)`,\n padding: \"5px\"\n }\n },\n popupArrow: {\n height: \"10px\",\n width: \"10px\",\n position: \"absolute\",\n background: \"rgb(255, 255, 255)\",\n transform: \"rotate(45deg)\",\n margin: \"-5px\",\n zIndex: \"-1\",\n boxShadow: \"rgba(0, 0, 0, 0.2) 1px 1px 1px\"\n },\n overlay: {\n tooltip: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\"\n },\n modal: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\",\n background: `rgba(0, 0, 0,0.5)`,\n display: \"flex\",\n zIndex: \"999\"\n }\n }\n};\n","import React from \"react\";\nimport { findDOMNode } from \"react-dom\";\nimport calculatePosition from \"./Utils\";\n\nimport styles from \"./index.css.js\";\nconst POSITION_TYPES = [\n \"top left\",\n \"top center\",\n \"top right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n];\n\nexport default class Popup extends React.PureComponent {\n static defaultProps = {\n children: () => Your Content Here !!,\n trigger: null,\n onOpen: () => {},\n onClose: () => {},\n defaultOpen: false,\n open: false,\n disabled: false,\n closeOnDocumentClick: true,\n repositionOnResize:true,\n closeOnEscape: true,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n lockScroll: false,\n arrow: true,\n offsetX: 0,\n offsetY: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100,\n keepTooltipInside: false\n };\n state = {\n isOpen: this.props.open || this.props.defaultOpen,\n modal: this.props.modal ? true : !this.props.trigger\n // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't exist\n };\n\n constructor(props) {\n super(props);\n this.setTriggerRef = r => (this.TriggerEl = r);\n this.setContentRef = r => (this.ContentEl = r);\n this.setArrowRef = r => (this.ArrowEl = r);\n this.setHelperRef = r => (this.HelperEl = r);\n this.timeOut = 0;\n }\n\n componentDidMount() {\n const { closeOnEscape, defaultOpen ,repositionOnResize} = this.props;\n if (defaultOpen) this.setPosition();\n if (closeOnEscape) {\n window.addEventListener(\"keyup\", this.onEscape);\n }\n if(repositionOnResize){\n window.addEventListener('resize', this.repositionOnResize);\n }\n }\n\n repositionOnResize = () => {\n this.setPosition()\n }\n onEscape = (e) => {\n if (e.key === \"Escape\") this.closePopup();\n }\n\n componentWillReceiveProps(nextProps) {\n if (this.props.open === nextProps.open) return;\n if (nextProps.open) this.openPopup();\n else this.closePopup();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.disabled !== this.props.disabled\n && this.props.disabled\n && this.state.isOpen) {\n this.closePopup();\n }\n }\n\n componentWillUnmount() {\n // kill any function to execute if the component is unmounted\n clearTimeout(this.timeOut);\n\n const { closeOnEscape ,repositionOnResize} = this.props;\n // remove events listeners\n if (closeOnEscape) {\n window.removeEventListener(\"keyup\", this.onEscape);\n }\n if(repositionOnResize){\n window.removeEventListener('resize', this.repositionOnResize);\n }\n }\n\n lockScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n };\n resetScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"auto\";\n };\n\n togglePopup = () => {\n if (this.state.isOpen) this.closePopup();\n else this.openPopup();\n };\n openPopup = () => {\n if (this.state.isOpen || this.props.disabled) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n this.lockScroll();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.props.onClose();\n this.setState({ isOpen: false }, () => {\n this.resetScroll();\n });\n };\n onMouseEnter = () => {\n clearTimeout(this.timeOut);\n const { mouseEnterDelay } = this.props;\n this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);\n };\n onMouseLeave = () => {\n clearTimeout(this.timeOut);\n const { mouseLeaveDelay } = this.props;\n this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);\n };\n\n getTooltipBoundary = () => {\n const { keepTooltipInside } = this.props;\n let boundingBox = {\n top: 0,\n left: 0,\n width: window.innerWidth,\n height: window.innerHeight\n };\n if (typeof keepTooltipInside === \"string\") {\n const selector = document.querySelector(keepTooltipInside);\n if (process.env.NODE_ENV !== \"production\") {\n if (selector === null)\n throw new Error(\n `${keepTooltipInside} selector is not exist : keepTooltipInside must be a valid html selector 'class' or 'Id' or a boolean value`\n );\n }\n boundingBox = selector.getBoundingClientRect();\n }\n return boundingBox;\n };\n\n setPosition = () => {\n const { modal,isOpen } = this.state;\n if (modal|| !isOpen) return;\n const { arrow, position, offsetX, offsetY, keepTooltipInside, arrowStyle } = this.props;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const boundingBox = this.getTooltipBoundary();\n let positions = Array.isArray(position) ? position : [position];\n\n // keepTooltipInside would be activated if the keepTooltipInside exist or the position is Array\n if (keepTooltipInside || Array.isArray(position))\n positions = [...positions, ...POSITION_TYPES];\n\n const cords = calculatePosition(\n trigger,\n content,\n positions,\n arrow,\n {\n offsetX,\n offsetY\n },\n boundingBox\n );\n this.ContentEl.style.top = cords.top - helper.top + \"px\";\n this.ContentEl.style.left = cords.left - helper.left + \"px\";\n if (arrow) {\n this.ArrowEl.style[\"transform\"] = cords.transform;\n this.ArrowEl.style[\"-ms-transform\"] = cords.transform;\n this.ArrowEl.style[\"-webkit-transform\"] = cords.transform;\n this.ArrowEl.style.top = arrowStyle.top || cords.arrowTop;\n this.ArrowEl.style.left = arrowStyle.left || cords.arrowLeft;\n }\n if (\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"static\" ||\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, on } = this.props;\n const { modal } = this.state;\n const popupContentStyle = modal\n ? styles.popupContent.modal\n : styles.popupContent.tooltip;\n\n const childrenElementProps = {\n className: `popup-content ${className}`,\n style: Object.assign({}, popupContentStyle, contentStyle),\n ref: this.setContentRef,\n onClick: e => {\n e.stopPropagation();\n }\n };\n if (!modal && on.indexOf(\"hover\") >= 0) {\n childrenElementProps.onMouseEnter = this.onMouseEnter;\n childrenElementProps.onMouseLeave = this.onMouseLeave;\n }\n return childrenElementProps;\n };\n renderTrigger = () => {\n const triggerProps = { key: \"T\" };\n const { on, trigger } = this.props;\n const onAsArray = Array.isArray(on) ? on : [on];\n for (let i = 0, len = onAsArray.length; i < len; i++) {\n switch (onAsArray[i]) {\n case \"click\":\n triggerProps.onClick = this.togglePopup;\n break;\n case \"hover\":\n triggerProps.onMouseEnter = this.onMouseEnter;\n triggerProps.onMouseLeave = this.onMouseLeave;\n break;\n case \"focus\":\n triggerProps.onFocus = this.onMouseEnter;\n break;\n }\n }\n\n if (typeof trigger === \"function\")\n return React.cloneElement(trigger(this.state.isOpen), triggerProps);\n\n return React.cloneElement(trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, arrowStyle } = this.props;\n const { modal } = this.state;\n return (\n
\n {arrow &&\n !modal && (\n \n )}\n {typeof this.props.children === \"function\"\n ? this.props.children(this.closePopup, this.state.isOpen)\n : this.props.children}\n
\n );\n };\n\n render() {\n const { overlayStyle, closeOnDocumentClick, on } = this.props;\n const { modal } = this.state;\n const overlay = this.state.isOpen && !(on.indexOf(\"hover\") >= 0);\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n !!this.props.trigger && (\n \n {this.renderTrigger()}\n \n ),\n this.state.isOpen && (\n \n ),\n overlay && (\n \n {modal && this.renderContent()}\n \n ),\n this.state.isOpen && !modal && this.renderContent(),\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\n const TRIGGER_TYPES = [\"hover\", \"click\", \"focus\"];\n\n Popup.propTypes = {\n arrowStyle: PropTypes.object,\n contentStyle: PropTypes.object,\n overlayStyle: PropTypes.object,\n className: PropTypes.string,\n modal: PropTypes.bool,\n closeOnDocumentClick: PropTypes.bool,\n repositionOnResize:PropTypes.bool,\n disabled: PropTypes.bool,\n lockScroll: PropTypes.bool,\n offsetX: PropTypes.number,\n offsetY: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n open: PropTypes.bool,\n defaultOpen: PropTypes.bool,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element\n on: PropTypes.oneOfType([\n PropTypes.oneOf(TRIGGER_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(TRIGGER_TYPES))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOfType([\n PropTypes.oneOf(POSITION_TYPES),\n PropTypes.arrayOf(PropTypes.oneOf(POSITION_TYPES))\n ]),\n keepTooltipInside: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n };\n}\n\nclass Ref extends React.PureComponent {\n componentDidMount() {\n const { innerRef } = this.props;\n if (innerRef) innerRef(findDOMNode(this));\n }\n\n render() {\n const { children } = this.props;\n return React.Children.only(children);\n }\n}\n"],"names":["getCoordinatesForPosition","triggerBounding","ContentBounding","position","arrow","offsetX","offsetY","margin","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","popupContent","tooltip","zIndex","background","border","boxShadow","padding","modal","popupArrow","overlay","bottom","right","display","POSITION_TYPES","Popup","props","isOpen","_this","open","defaultOpen","trigger","setPosition","e","key","closePopup","state","lockScroll","document","getElementsByTagName","style","overflow","openPopup","disabled","setState","onOpen","onClose","resetScroll","clearTimeout","timeOut","mouseEnterDelay","setTimeout","mouseLeaveDelay","keepTooltipInside","boundingBox","window","innerWidth","innerHeight","querySelector","getBoundingClientRect","arrowStyle","helper","HelperEl","TriggerEl","content","ContentEl","getTooltipBoundary","positions","Array","isArray","cords","wrapperBox","bestCoords","i","length","contentBox","calculatePosition","ArrowEl","getComputedStyle","getPropertyValue","contentStyle","className","on","popupContentStyle","styles","childrenElementProps","Object","assign","ref","setContentRef","onClick","stopPropagation","indexOf","onMouseEnter","onMouseLeave","triggerProps","onAsArray","len","togglePopup","onFocus","React","cloneElement","addWarperAction","setArrowRef","children","setTriggerRef","r","setHelperRef","PureComponent","this","closeOnEscape","repositionOnResize","addEventListener","onEscape","nextProps","prevProps","removeEventListener","overlayStyle","closeOnDocumentClick","ovStyle","Ref","innerRef","renderTrigger","undefined","renderContent","findDOMNode","Children","only"],"mappings":"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"} \ No newline at end of file diff --git a/package.json b/package.json index 85b49ec..52ed52a 100644 --- a/package.json +++ b/package.json @@ -66,5 +66,5 @@ "bugs": { "url": "https://github.com/yjose/reactjs-popup/issues" }, - "homepage": "https://react-popup.netlify.com/" + "homepage": "https://react-popup.elazizi.com/" }