Socket
Socket
Sign inDemoInstall

reactjs-popup

Package Overview
Dependencies
8
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.7 to 1.0.8

4

package.json
{
"name": "reactjs-popup",
"version": "1.0.7",
"version": "1.0.8",
"description": "React Popup Component - Modals,Tooltips and Menus —  All in one",
"main": "reactjs-popup.es.js",
"main": "reactjs-popup.cjs.js",
"module": "reactjs-popup.es.js",

@@ -7,0 +7,0 @@ "jsnext:main": "reactjs-popup.es.js",

523

reactjs-popup.cjs.js
/*!
* reactjs-popup v1.0.7
* reactjs-popup v1.0.8
* (c) 2018-present Youssouf EL AZIZI <youssoufelazizi@gmail.com>

@@ -13,2 +13,24 @@ * Released under the MIT License.

function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _extends() {

@@ -32,2 +54,34 @@ _extends = Object.assign || function (target) {

function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
/* Algo to calculate position

@@ -51,18 +105,16 @@ 1. center position for popup content : the center of the trigger will be the center of the content content

function calculatePosition(triggerBounding, ContentBounding, position, arrow, offset) {
const margin = arrow ? 8 : 0;
const MarginX = margin + offset.offsetX;
const MarginY = margin + offset.offsetY;
const args = position.split(" "); // the step N 1 : center the popup content => ok
var margin = arrow ? 8 : 0;
var MarginX = margin + offset.offsetX;
var MarginY = margin + offset.offsetY;
var args = position.split(" "); // the step N 1 : center the popup content => ok
const CenterTop = triggerBounding.top + triggerBounding.height / 2;
const CenterLeft = triggerBounding.left + triggerBounding.width / 2;
const {
height,
width
} = ContentBounding;
let top = CenterTop - height / 2;
let left = CenterLeft - width / 2;
let transform = "";
let arrowTop = "0%";
let arrowLeft = "0%"; // the step N 2 : => ok
var CenterTop = triggerBounding.top + triggerBounding.height / 2;
var CenterLeft = triggerBounding.left + triggerBounding.width / 2;
var height = ContentBounding.height,
width = ContentBounding.width;
var top = CenterTop - height / 2;
var left = CenterLeft - width / 2;
var transform = "";
var arrowTop = "0%";
var arrowLeft = "0%"; // the step N 2 : => ok

@@ -72,3 +124,3 @@ switch (args[0]) {

top -= height / 2 + triggerBounding.height / 2 + MarginY;
transform = `rotate(45deg)`;
transform = "rotate(45deg)";
arrowTop = "100%";

@@ -80,3 +132,3 @@ arrowLeft = "50%";

top += height / 2 + triggerBounding.height / 2 + MarginY;
transform = `rotate(225deg)`;
transform = "rotate(225deg)";
arrowLeft = "50%";

@@ -87,3 +139,3 @@ break;

left -= width / 2 + triggerBounding.width / 2 + MarginX;
transform = ` rotate(-45deg)`;
transform = " rotate(-45deg)";
arrowLeft = "100%";

@@ -95,3 +147,3 @@ arrowTop = "50%";

left += width / 2 + triggerBounding.width / 2 + MarginX;
transform = `rotate(135deg)`;
transform = "rotate(135deg)";
arrowTop = "50%";

@@ -124,7 +176,7 @@ break;

return {
top,
left,
transform,
arrowLeft,
arrowTop
top: top,
left: left,
transform: transform,
arrowLeft: arrowLeft,
arrowTop: arrowTop
};

@@ -139,5 +191,5 @@ }

width: "200px",
background: `rgb(255, 255, 255)`,
border: `1px solid rgb(187, 187, 187)`,
boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,
background: "rgb(255, 255, 255)",
border: "1px solid rgb(187, 187, 187)",
boxShadow: "rgba(0, 0, 0, 0.2) 0px 1px 3px",
padding: "5px"

@@ -147,6 +199,6 @@ },

position: "relative",
background: `rgb(255, 255, 255)`,
background: "rgb(255, 255, 255)",
width: "50%",
margin: "auto",
border: `1px solid rgb(187, 187, 187)`,
border: "1px solid rgb(187, 187, 187)",
padding: "5px"

@@ -179,3 +231,3 @@ }

right: "0",
background: `rgba(0, 0, 0,0.5)`,
background: "rgba(0, 0, 0,0.5)",
display: "flex",

@@ -187,6 +239,14 @@ zIndex: "999"

class Popup extends React.PureComponent {
constructor(props) {
super(props);
Object.defineProperty(this, "state", {
var Popup =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(Popup, _React$PureComponent);
function Popup(props) {
var _this;
_classCallCheck(this, Popup);
_this = _possibleConstructorReturn(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).call(this, props));
Object.defineProperty(_assertThisInitialized(_this), "state", {
configurable: true,

@@ -196,139 +256,142 @@ enumerable: true,

value: {
isOpen: this.props.open || this.props.defaultOpen,
modal: this.props.modal ? true : !this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
isOpen: _this.props.open || _this.props.defaultOpen,
modal: _this.props.modal ? true : !_this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
}
});
Object.defineProperty(this, "lockScroll", {
Object.defineProperty(_assertThisInitialized(_this), "lockScroll", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.modal && this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
value: function value() {
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
}
});
Object.defineProperty(this, "resetScroll", {
Object.defineProperty(_assertThisInitialized(_this), "resetScroll", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.modal && this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
value: function value() {
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
}
});
Object.defineProperty(this, "togglePopup", {
Object.defineProperty(_assertThisInitialized(_this), "togglePopup", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.isOpen) this.closePopup();else this.openPopup();
value: function value() {
if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
}
});
Object.defineProperty(this, "openPopup", {
Object.defineProperty(_assertThisInitialized(_this), "openPopup", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.isOpen) return;
this.setState({
value: function value() {
if (_this.state.isOpen) return;
_this.setState({
isOpen: true
}, () => {
this.setPosition();
this.props.onOpen();
this.lockScroll();
}, function () {
_this.setPosition();
_this.props.onOpen();
_this.lockScroll();
});
}
});
Object.defineProperty(this, "closePopup", {
Object.defineProperty(_assertThisInitialized(_this), "closePopup", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (!this.state.isOpen) return;
this.setState({
value: function value() {
if (!_this.state.isOpen) return;
_this.setState({
isOpen: false
}, () => {
this.props.onClose();
this.resetScroll();
}, function () {
_this.props.onClose();
_this.resetScroll();
});
}
});
Object.defineProperty(this, "onMouseEnter", {
Object.defineProperty(_assertThisInitialized(_this), "onMouseEnter", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
clearTimeout(this.timeOut);
const {
mouseEnterDelay
} = this.props;
this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);
value: function value() {
clearTimeout(_this.timeOut);
var mouseEnterDelay = _this.props.mouseEnterDelay;
_this.timeOut = setTimeout(function () {
return _this.openPopup();
}, mouseEnterDelay);
}
});
Object.defineProperty(this, "onMouseLeave", {
Object.defineProperty(_assertThisInitialized(_this), "onMouseLeave", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
clearTimeout(this.timeOut);
const {
mouseLeaveDelay
} = this.props;
this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);
value: function value() {
clearTimeout(_this.timeOut);
var mouseLeaveDelay = _this.props.mouseLeaveDelay;
_this.timeOut = setTimeout(function () {
return _this.closePopup();
}, mouseLeaveDelay);
}
});
Object.defineProperty(this, "setPosition", {
Object.defineProperty(_assertThisInitialized(_this), "setPosition", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const {
arrow,
position,
offsetX,
offsetY
} = this.props;
const {
modal
} = this.state;
value: function value() {
var _this$props = _this.props,
arrow = _this$props.arrow,
position = _this$props.position,
offsetX = _this$props.offsetX,
offsetY = _this$props.offsetY;
var modal = _this.state.modal;
if (modal) return;
const helper = this.HelperEl.getBoundingClientRect();
const trigger = this.TriggerEl.getBoundingClientRect();
const content = this.ContentEl.getBoundingClientRect();
const cords = calculatePosition(trigger, content, position, arrow, {
offsetX,
offsetY
var helper = _this.HelperEl.getBoundingClientRect();
var trigger = _this.TriggerEl.getBoundingClientRect();
var content = _this.ContentEl.getBoundingClientRect();
var cords = calculatePosition(trigger, content, position, arrow, {
offsetX: offsetX,
offsetY: offsetY
});
this.ContentEl.style.top = cords.top - helper.top + "px";
this.ContentEl.style.left = cords.left - helper.left + "px";
_this.ContentEl.style.top = cords.top - helper.top + "px";
_this.ContentEl.style.left = cords.left - helper.left + "px";
if (arrow) {
this.ArrowEl.style["transform"] = cords.transform;
this.ArrowEl.style["-ms-transform"] = cords.transform;
this.ArrowEl.style["-webkit-transform"] = cords.transform;
this.ArrowEl.style.top = cords.arrowTop;
this.ArrowEl.style.left = cords.arrowLeft;
_this.ArrowEl.style["transform"] = cords.transform;
_this.ArrowEl.style["-ms-transform"] = cords.transform;
_this.ArrowEl.style["-webkit-transform"] = cords.transform;
_this.ArrowEl.style.top = cords.arrowTop;
_this.ArrowEl.style.left = cords.arrowLeft;
}
if (window.getComputedStyle(this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(this.TriggerEl, null).getPropertyValue("position") == "") this.TriggerEl.style.position = "relative";
if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
}
});
Object.defineProperty(this, "addWarperAction", {
Object.defineProperty(_assertThisInitialized(_this), "addWarperAction", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const {
contentStyle,
className,
on
} = this.props;
const {
modal
} = this.state;
const popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
const childrenElementProps = {
className: `popup-content ${className}`,
value: function value() {
var _this$props2 = _this.props,
contentStyle = _this$props2.contentStyle,
className = _this$props2.className,
on = _this$props2.on;
var modal = _this.state.modal;
var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
var childrenElementProps = {
className: "popup-content ".concat(className),
style: Object.assign({}, popupContentStyle, contentStyle),
ref: this.setContentRef,
onClick: e => {
ref: _this.setContentRef,
onClick: function onClick(e) {
e.stopPropagation();

@@ -339,4 +402,4 @@ }

if (!modal && on.includes("hover")) {
childrenElementProps.onMouseEnter = this.onMouseEnter;
childrenElementProps.onMouseLeave = this.onMouseLeave;
childrenElementProps.onMouseEnter = _this.onMouseEnter;
childrenElementProps.onMouseLeave = _this.onMouseLeave;
}

@@ -347,28 +410,27 @@

});
Object.defineProperty(this, "renderTrigger", {
Object.defineProperty(_assertThisInitialized(_this), "renderTrigger", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const triggerProps = {
value: function value() {
var triggerProps = {
key: "T"
};
const {
on,
trigger
} = this.props;
const onAsArray = Array.isArray(on) ? on : [on];
var _this$props3 = _this.props,
on = _this$props3.on,
trigger = _this$props3.trigger;
var onAsArray = Array.isArray(on) ? on : [on];
for (let i = 0, len = onAsArray.length; i < len; i++) {
for (var i = 0, len = onAsArray.length; i < len; i++) {
switch (onAsArray[i]) {
case "click":
triggerProps.onClick = this.togglePopup;
triggerProps.onClick = _this.togglePopup;
break;
case "hover":
triggerProps.onMouseEnter = this.onMouseEnter;
triggerProps.onMouseLeave = this.onMouseLeave;
triggerProps.onMouseEnter = _this.onMouseEnter;
triggerProps.onMouseLeave = _this.onMouseLeave;
case "focus":
triggerProps.onFocus = this.onMouseEnter;
triggerProps.onFocus = _this.onMouseEnter;
break;

@@ -378,93 +440,105 @@ }

if (typeof trigger === "function") return React.cloneElement(trigger(this.state.isOpen), triggerProps);
if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
return React.cloneElement(trigger, triggerProps);
}
});
Object.defineProperty(this, "renderContent", {
Object.defineProperty(_assertThisInitialized(_this), "renderContent", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const {
arrow,
arrowStyle
} = this.props;
const {
modal
} = this.state;
return React.createElement("div", _extends({}, this.addWarperAction(), {
value: function value() {
var _this$props4 = _this.props,
arrow = _this$props4.arrow,
arrowStyle = _this$props4.arrowStyle;
var modal = _this.state.modal;
return React.createElement("div", _extends({}, _this.addWarperAction(), {
key: "C"
}), arrow && !modal && React.createElement("div", {
ref: this.setArrowRef,
ref: _this.setArrowRef,
style: Object.assign({}, styles.popupArrow, arrowStyle)
}), typeof this.props.children === "function" ? this.props.children(this.closePopup, this.state.isOpen) : this.props.children);
}), typeof _this.props.children === "function" ? _this.props.children(_this.closePopup, _this.state.isOpen) : _this.props.children);
}
});
this.setTriggerRef = r => this.TriggerEl = r;
_this.setTriggerRef = function (r) {
return _this.TriggerEl = r;
};
this.setContentRef = r => this.ContentEl = r;
_this.setContentRef = function (r) {
return _this.ContentEl = r;
};
this.setArrowRef = r => this.ArrowEl = r;
_this.setArrowRef = function (r) {
return _this.ArrowEl = r;
};
this.setHelperRef = r => this.HelperEl = r;
_this.setHelperRef = function (r) {
return _this.HelperEl = r;
};
this.timeOut = 0;
_this.timeOut = 0;
return _this;
}
componentDidMount() {
const {
closeOnEscape,
defaultOpen
} = this.props;
if (defaultOpen) this.setPosition();
_createClass(Popup, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
if (closeOnEscape) {
window.addEventListener("keyup", e => {
if (e.key === "Escape") this.closePopup();
});
var _props = this.props,
closeOnEscape = _props.closeOnEscape,
defaultOpen = _props.defaultOpen;
if (defaultOpen) this.setPosition();
if (closeOnEscape) {
window.addEventListener("keyup", function (e) {
if (e.key === "Escape") _this2.closePopup();
});
}
}
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (this.props.open === nextProps.open) return;
if (nextProps.open) this.openPopup();else this.closePopup();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
// kill any function to execute if the component is unmounted
clearTimeout(this.timeOut);
}
}, {
key: "render",
value: function render() {
var _props2 = this.props,
overlayStyle = _props2.overlayStyle,
closeOnDocumentClick = _props2.closeOnDocumentClick,
on = _props2.on;
var modal = this.state.modal;
var overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick;
var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
return [this.state.isOpen && React.createElement("div", {
key: "H",
style: {
position: "absolute",
top: "0px",
left: "0px"
},
ref: this.setHelperRef
}), overlay && React.createElement("div", {
key: "O",
className: "popup-overlay",
style: Object.assign({}, ovStyle, overlayStyle),
onClick: this.closePopup
}, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
innerRef: this.setTriggerRef,
key: "R"
}, this.renderTrigger())];
}
}]);
componentWillReceiveProps(nextProps) {
if (this.props.open === nextProps.open) return;
if (nextProps.open) this.openPopup();else this.closePopup();
}
return Popup;
}(React.PureComponent);
componentWillUnmount() {
// kill any function to execute if the component is unmounted
clearTimeout(this.timeOut);
}
render() {
const {
overlayStyle,
closeOnDocumentClick,
on
} = this.props;
const {
modal
} = this.state;
const overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick;
const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
return [this.state.isOpen && React.createElement("div", {
key: "H",
style: {
position: "absolute",
top: "0px",
left: "0px"
},
ref: this.setHelperRef
}), overlay && React.createElement("div", {
key: "O",
className: "popup-overlay",
style: Object.assign({}, ovStyle, overlayStyle),
onClick: this.closePopup
}, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
innerRef: this.setTriggerRef,
key: "R"
}, this.renderTrigger())];
}
}
Object.defineProperty(Popup, "defaultProps", {

@@ -475,6 +549,8 @@ configurable: true,

value: {
children: () => React.createElement("span", null, " Your Content Here !!"),
children: function children() {
return React.createElement("span", null, " Your Content Here !!");
},
trigger: null,
onOpen: () => {},
onClose: () => {},
onOpen: function onOpen() {},
onClose: function onClose() {},
defaultOpen: false,

@@ -491,3 +567,3 @@ open: false,

modal: false,
lockScroll: true,
lockScroll: false,
arrow: true,

@@ -502,3 +578,3 @@ offsetX: 0,

if (process.env.NODE_ENV !== "production") {
const PropTypes = require("prop-types");
var PropTypes = require("prop-types");

@@ -529,23 +605,30 @@ Popup.propTypes = {

class Ref extends React.PureComponent {
constructor(props) {
super(props);
}
var Ref =
/*#__PURE__*/
function (_React$PureComponent2) {
_inherits(Ref, _React$PureComponent2);
componentDidMount() {
const {
innerRef
} = this.props;
if (innerRef) innerRef(reactDom.findDOMNode(this));
}
function Ref(props) {
_classCallCheck(this, Ref);
render() {
const {
children
} = this.props;
return React.Children.only(children);
return _possibleConstructorReturn(this, (Ref.__proto__ || Object.getPrototypeOf(Ref)).call(this, props));
}
}
_createClass(Ref, [{
key: "componentDidMount",
value: function componentDidMount() {
var innerRef = this.props.innerRef;
if (innerRef) innerRef(reactDom.findDOMNode(this));
}
}, {
key: "render",
value: function render() {
var children = this.props.children;
return React.Children.only(children);
}
}]);
return Ref;
}(React.PureComponent);
module.exports = Popup;

523

reactjs-popup.es.js
/*!
* reactjs-popup v1.0.7
* reactjs-popup v1.0.8
* (c) 2018-present Youssouf EL AZIZI <youssoufelazizi@gmail.com>

@@ -9,2 +9,24 @@ * Released under the MIT License.

function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _extends() {

@@ -28,2 +50,34 @@ _extends = Object.assign || function (target) {

function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
/* Algo to calculate position

@@ -47,18 +101,16 @@ 1. center position for popup content : the center of the trigger will be the center of the content content

function calculatePosition(triggerBounding, ContentBounding, position, arrow, offset) {
const margin = arrow ? 8 : 0;
const MarginX = margin + offset.offsetX;
const MarginY = margin + offset.offsetY;
const args = position.split(" "); // the step N 1 : center the popup content => ok
var margin = arrow ? 8 : 0;
var MarginX = margin + offset.offsetX;
var MarginY = margin + offset.offsetY;
var args = position.split(" "); // the step N 1 : center the popup content => ok
const CenterTop = triggerBounding.top + triggerBounding.height / 2;
const CenterLeft = triggerBounding.left + triggerBounding.width / 2;
const {
height,
width
} = ContentBounding;
let top = CenterTop - height / 2;
let left = CenterLeft - width / 2;
let transform = "";
let arrowTop = "0%";
let arrowLeft = "0%"; // the step N 2 : => ok
var CenterTop = triggerBounding.top + triggerBounding.height / 2;
var CenterLeft = triggerBounding.left + triggerBounding.width / 2;
var height = ContentBounding.height,
width = ContentBounding.width;
var top = CenterTop - height / 2;
var left = CenterLeft - width / 2;
var transform = "";
var arrowTop = "0%";
var arrowLeft = "0%"; // the step N 2 : => ok

@@ -68,3 +120,3 @@ switch (args[0]) {

top -= height / 2 + triggerBounding.height / 2 + MarginY;
transform = `rotate(45deg)`;
transform = "rotate(45deg)";
arrowTop = "100%";

@@ -76,3 +128,3 @@ arrowLeft = "50%";

top += height / 2 + triggerBounding.height / 2 + MarginY;
transform = `rotate(225deg)`;
transform = "rotate(225deg)";
arrowLeft = "50%";

@@ -83,3 +135,3 @@ break;

left -= width / 2 + triggerBounding.width / 2 + MarginX;
transform = ` rotate(-45deg)`;
transform = " rotate(-45deg)";
arrowLeft = "100%";

@@ -91,3 +143,3 @@ arrowTop = "50%";

left += width / 2 + triggerBounding.width / 2 + MarginX;
transform = `rotate(135deg)`;
transform = "rotate(135deg)";
arrowTop = "50%";

@@ -120,7 +172,7 @@ break;

return {
top,
left,
transform,
arrowLeft,
arrowTop
top: top,
left: left,
transform: transform,
arrowLeft: arrowLeft,
arrowTop: arrowTop
};

@@ -135,5 +187,5 @@ }

width: "200px",
background: `rgb(255, 255, 255)`,
border: `1px solid rgb(187, 187, 187)`,
boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,
background: "rgb(255, 255, 255)",
border: "1px solid rgb(187, 187, 187)",
boxShadow: "rgba(0, 0, 0, 0.2) 0px 1px 3px",
padding: "5px"

@@ -143,6 +195,6 @@ },

position: "relative",
background: `rgb(255, 255, 255)`,
background: "rgb(255, 255, 255)",
width: "50%",
margin: "auto",
border: `1px solid rgb(187, 187, 187)`,
border: "1px solid rgb(187, 187, 187)",
padding: "5px"

@@ -175,3 +227,3 @@ }

right: "0",
background: `rgba(0, 0, 0,0.5)`,
background: "rgba(0, 0, 0,0.5)",
display: "flex",

@@ -183,6 +235,14 @@ zIndex: "999"

class Popup extends React.PureComponent {
constructor(props) {
super(props);
Object.defineProperty(this, "state", {
var Popup =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(Popup, _React$PureComponent);
function Popup(props) {
var _this;
_classCallCheck(this, Popup);
_this = _possibleConstructorReturn(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).call(this, props));
Object.defineProperty(_assertThisInitialized(_this), "state", {
configurable: true,

@@ -192,139 +252,142 @@ enumerable: true,

value: {
isOpen: this.props.open || this.props.defaultOpen,
modal: this.props.modal ? true : !this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
isOpen: _this.props.open || _this.props.defaultOpen,
modal: _this.props.modal ? true : !_this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
}
});
Object.defineProperty(this, "lockScroll", {
Object.defineProperty(_assertThisInitialized(_this), "lockScroll", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.modal && this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
value: function value() {
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
}
});
Object.defineProperty(this, "resetScroll", {
Object.defineProperty(_assertThisInitialized(_this), "resetScroll", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.modal && this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
value: function value() {
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
}
});
Object.defineProperty(this, "togglePopup", {
Object.defineProperty(_assertThisInitialized(_this), "togglePopup", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.isOpen) this.closePopup();else this.openPopup();
value: function value() {
if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
}
});
Object.defineProperty(this, "openPopup", {
Object.defineProperty(_assertThisInitialized(_this), "openPopup", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.isOpen) return;
this.setState({
value: function value() {
if (_this.state.isOpen) return;
_this.setState({
isOpen: true
}, () => {
this.setPosition();
this.props.onOpen();
this.lockScroll();
}, function () {
_this.setPosition();
_this.props.onOpen();
_this.lockScroll();
});
}
});
Object.defineProperty(this, "closePopup", {
Object.defineProperty(_assertThisInitialized(_this), "closePopup", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (!this.state.isOpen) return;
this.setState({
value: function value() {
if (!_this.state.isOpen) return;
_this.setState({
isOpen: false
}, () => {
this.props.onClose();
this.resetScroll();
}, function () {
_this.props.onClose();
_this.resetScroll();
});
}
});
Object.defineProperty(this, "onMouseEnter", {
Object.defineProperty(_assertThisInitialized(_this), "onMouseEnter", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
clearTimeout(this.timeOut);
const {
mouseEnterDelay
} = this.props;
this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);
value: function value() {
clearTimeout(_this.timeOut);
var mouseEnterDelay = _this.props.mouseEnterDelay;
_this.timeOut = setTimeout(function () {
return _this.openPopup();
}, mouseEnterDelay);
}
});
Object.defineProperty(this, "onMouseLeave", {
Object.defineProperty(_assertThisInitialized(_this), "onMouseLeave", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
clearTimeout(this.timeOut);
const {
mouseLeaveDelay
} = this.props;
this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);
value: function value() {
clearTimeout(_this.timeOut);
var mouseLeaveDelay = _this.props.mouseLeaveDelay;
_this.timeOut = setTimeout(function () {
return _this.closePopup();
}, mouseLeaveDelay);
}
});
Object.defineProperty(this, "setPosition", {
Object.defineProperty(_assertThisInitialized(_this), "setPosition", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const {
arrow,
position,
offsetX,
offsetY
} = this.props;
const {
modal
} = this.state;
value: function value() {
var _this$props = _this.props,
arrow = _this$props.arrow,
position = _this$props.position,
offsetX = _this$props.offsetX,
offsetY = _this$props.offsetY;
var modal = _this.state.modal;
if (modal) return;
const helper = this.HelperEl.getBoundingClientRect();
const trigger = this.TriggerEl.getBoundingClientRect();
const content = this.ContentEl.getBoundingClientRect();
const cords = calculatePosition(trigger, content, position, arrow, {
offsetX,
offsetY
var helper = _this.HelperEl.getBoundingClientRect();
var trigger = _this.TriggerEl.getBoundingClientRect();
var content = _this.ContentEl.getBoundingClientRect();
var cords = calculatePosition(trigger, content, position, arrow, {
offsetX: offsetX,
offsetY: offsetY
});
this.ContentEl.style.top = cords.top - helper.top + "px";
this.ContentEl.style.left = cords.left - helper.left + "px";
_this.ContentEl.style.top = cords.top - helper.top + "px";
_this.ContentEl.style.left = cords.left - helper.left + "px";
if (arrow) {
this.ArrowEl.style["transform"] = cords.transform;
this.ArrowEl.style["-ms-transform"] = cords.transform;
this.ArrowEl.style["-webkit-transform"] = cords.transform;
this.ArrowEl.style.top = cords.arrowTop;
this.ArrowEl.style.left = cords.arrowLeft;
_this.ArrowEl.style["transform"] = cords.transform;
_this.ArrowEl.style["-ms-transform"] = cords.transform;
_this.ArrowEl.style["-webkit-transform"] = cords.transform;
_this.ArrowEl.style.top = cords.arrowTop;
_this.ArrowEl.style.left = cords.arrowLeft;
}
if (window.getComputedStyle(this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(this.TriggerEl, null).getPropertyValue("position") == "") this.TriggerEl.style.position = "relative";
if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
}
});
Object.defineProperty(this, "addWarperAction", {
Object.defineProperty(_assertThisInitialized(_this), "addWarperAction", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const {
contentStyle,
className,
on
} = this.props;
const {
modal
} = this.state;
const popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
const childrenElementProps = {
className: `popup-content ${className}`,
value: function value() {
var _this$props2 = _this.props,
contentStyle = _this$props2.contentStyle,
className = _this$props2.className,
on = _this$props2.on;
var modal = _this.state.modal;
var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
var childrenElementProps = {
className: "popup-content ".concat(className),
style: Object.assign({}, popupContentStyle, contentStyle),
ref: this.setContentRef,
onClick: e => {
ref: _this.setContentRef,
onClick: function onClick(e) {
e.stopPropagation();

@@ -335,4 +398,4 @@ }

if (!modal && on.includes("hover")) {
childrenElementProps.onMouseEnter = this.onMouseEnter;
childrenElementProps.onMouseLeave = this.onMouseLeave;
childrenElementProps.onMouseEnter = _this.onMouseEnter;
childrenElementProps.onMouseLeave = _this.onMouseLeave;
}

@@ -343,28 +406,27 @@

});
Object.defineProperty(this, "renderTrigger", {
Object.defineProperty(_assertThisInitialized(_this), "renderTrigger", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const triggerProps = {
value: function value() {
var triggerProps = {
key: "T"
};
const {
on,
trigger
} = this.props;
const onAsArray = Array.isArray(on) ? on : [on];
var _this$props3 = _this.props,
on = _this$props3.on,
trigger = _this$props3.trigger;
var onAsArray = Array.isArray(on) ? on : [on];
for (let i = 0, len = onAsArray.length; i < len; i++) {
for (var i = 0, len = onAsArray.length; i < len; i++) {
switch (onAsArray[i]) {
case "click":
triggerProps.onClick = this.togglePopup;
triggerProps.onClick = _this.togglePopup;
break;
case "hover":
triggerProps.onMouseEnter = this.onMouseEnter;
triggerProps.onMouseLeave = this.onMouseLeave;
triggerProps.onMouseEnter = _this.onMouseEnter;
triggerProps.onMouseLeave = _this.onMouseLeave;
case "focus":
triggerProps.onFocus = this.onMouseEnter;
triggerProps.onFocus = _this.onMouseEnter;
break;

@@ -374,93 +436,105 @@ }

if (typeof trigger === "function") return React.cloneElement(trigger(this.state.isOpen), triggerProps);
if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
return React.cloneElement(trigger, triggerProps);
}
});
Object.defineProperty(this, "renderContent", {
Object.defineProperty(_assertThisInitialized(_this), "renderContent", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const {
arrow,
arrowStyle
} = this.props;
const {
modal
} = this.state;
return React.createElement("div", _extends({}, this.addWarperAction(), {
value: function value() {
var _this$props4 = _this.props,
arrow = _this$props4.arrow,
arrowStyle = _this$props4.arrowStyle;
var modal = _this.state.modal;
return React.createElement("div", _extends({}, _this.addWarperAction(), {
key: "C"
}), arrow && !modal && React.createElement("div", {
ref: this.setArrowRef,
ref: _this.setArrowRef,
style: Object.assign({}, styles.popupArrow, arrowStyle)
}), typeof this.props.children === "function" ? this.props.children(this.closePopup, this.state.isOpen) : this.props.children);
}), typeof _this.props.children === "function" ? _this.props.children(_this.closePopup, _this.state.isOpen) : _this.props.children);
}
});
this.setTriggerRef = r => this.TriggerEl = r;
_this.setTriggerRef = function (r) {
return _this.TriggerEl = r;
};
this.setContentRef = r => this.ContentEl = r;
_this.setContentRef = function (r) {
return _this.ContentEl = r;
};
this.setArrowRef = r => this.ArrowEl = r;
_this.setArrowRef = function (r) {
return _this.ArrowEl = r;
};
this.setHelperRef = r => this.HelperEl = r;
_this.setHelperRef = function (r) {
return _this.HelperEl = r;
};
this.timeOut = 0;
_this.timeOut = 0;
return _this;
}
componentDidMount() {
const {
closeOnEscape,
defaultOpen
} = this.props;
if (defaultOpen) this.setPosition();
_createClass(Popup, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
if (closeOnEscape) {
window.addEventListener("keyup", e => {
if (e.key === "Escape") this.closePopup();
});
var _props = this.props,
closeOnEscape = _props.closeOnEscape,
defaultOpen = _props.defaultOpen;
if (defaultOpen) this.setPosition();
if (closeOnEscape) {
window.addEventListener("keyup", function (e) {
if (e.key === "Escape") _this2.closePopup();
});
}
}
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (this.props.open === nextProps.open) return;
if (nextProps.open) this.openPopup();else this.closePopup();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
// kill any function to execute if the component is unmounted
clearTimeout(this.timeOut);
}
}, {
key: "render",
value: function render() {
var _props2 = this.props,
overlayStyle = _props2.overlayStyle,
closeOnDocumentClick = _props2.closeOnDocumentClick,
on = _props2.on;
var modal = this.state.modal;
var overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick;
var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
return [this.state.isOpen && React.createElement("div", {
key: "H",
style: {
position: "absolute",
top: "0px",
left: "0px"
},
ref: this.setHelperRef
}), overlay && React.createElement("div", {
key: "O",
className: "popup-overlay",
style: Object.assign({}, ovStyle, overlayStyle),
onClick: this.closePopup
}, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
innerRef: this.setTriggerRef,
key: "R"
}, this.renderTrigger())];
}
}]);
componentWillReceiveProps(nextProps) {
if (this.props.open === nextProps.open) return;
if (nextProps.open) this.openPopup();else this.closePopup();
}
return Popup;
}(React.PureComponent);
componentWillUnmount() {
// kill any function to execute if the component is unmounted
clearTimeout(this.timeOut);
}
render() {
const {
overlayStyle,
closeOnDocumentClick,
on
} = this.props;
const {
modal
} = this.state;
const overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick;
const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
return [this.state.isOpen && React.createElement("div", {
key: "H",
style: {
position: "absolute",
top: "0px",
left: "0px"
},
ref: this.setHelperRef
}), overlay && React.createElement("div", {
key: "O",
className: "popup-overlay",
style: Object.assign({}, ovStyle, overlayStyle),
onClick: this.closePopup
}, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
innerRef: this.setTriggerRef,
key: "R"
}, this.renderTrigger())];
}
}
Object.defineProperty(Popup, "defaultProps", {

@@ -471,6 +545,8 @@ configurable: true,

value: {
children: () => React.createElement("span", null, " Your Content Here !!"),
children: function children() {
return React.createElement("span", null, " Your Content Here !!");
},
trigger: null,
onOpen: () => {},
onClose: () => {},
onOpen: function onOpen() {},
onClose: function onClose() {},
defaultOpen: false,

@@ -487,3 +563,3 @@ open: false,

modal: false,
lockScroll: true,
lockScroll: false,
arrow: true,

@@ -498,3 +574,3 @@ offsetX: 0,

if (process.env.NODE_ENV !== "production") {
const PropTypes = require("prop-types");
var PropTypes = require("prop-types");

@@ -525,23 +601,30 @@ Popup.propTypes = {

class Ref extends React.PureComponent {
constructor(props) {
super(props);
}
var Ref =
/*#__PURE__*/
function (_React$PureComponent2) {
_inherits(Ref, _React$PureComponent2);
componentDidMount() {
const {
innerRef
} = this.props;
if (innerRef) innerRef(findDOMNode(this));
}
function Ref(props) {
_classCallCheck(this, Ref);
render() {
const {
children
} = this.props;
return React.Children.only(children);
return _possibleConstructorReturn(this, (Ref.__proto__ || Object.getPrototypeOf(Ref)).call(this, props));
}
}
_createClass(Ref, [{
key: "componentDidMount",
value: function componentDidMount() {
var innerRef = this.props.innerRef;
if (innerRef) innerRef(findDOMNode(this));
}
}, {
key: "render",
value: function render() {
var children = this.props.children;
return React.Children.only(children);
}
}]);
return Ref;
}(React.PureComponent);
export default Popup;

523

reactjs-popup.js
/*!
* reactjs-popup v1.0.7
* reactjs-popup v1.0.8
* (c) 2018-present Youssouf EL AZIZI <youssoufelazizi@gmail.com>

@@ -14,2 +14,24 @@ * Released under the MIT License.

function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _extends() {

@@ -33,2 +55,34 @@ _extends = Object.assign || function (target) {

function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
/* Algo to calculate position

@@ -52,18 +106,16 @@ 1. center position for popup content : the center of the trigger will be the center of the content content

function calculatePosition(triggerBounding, ContentBounding, position, arrow, offset) {
const margin = arrow ? 8 : 0;
const MarginX = margin + offset.offsetX;
const MarginY = margin + offset.offsetY;
const args = position.split(" "); // the step N 1 : center the popup content => ok
var margin = arrow ? 8 : 0;
var MarginX = margin + offset.offsetX;
var MarginY = margin + offset.offsetY;
var args = position.split(" "); // the step N 1 : center the popup content => ok
const CenterTop = triggerBounding.top + triggerBounding.height / 2;
const CenterLeft = triggerBounding.left + triggerBounding.width / 2;
const {
height,
width
} = ContentBounding;
let top = CenterTop - height / 2;
let left = CenterLeft - width / 2;
let transform = "";
let arrowTop = "0%";
let arrowLeft = "0%"; // the step N 2 : => ok
var CenterTop = triggerBounding.top + triggerBounding.height / 2;
var CenterLeft = triggerBounding.left + triggerBounding.width / 2;
var height = ContentBounding.height,
width = ContentBounding.width;
var top = CenterTop - height / 2;
var left = CenterLeft - width / 2;
var transform = "";
var arrowTop = "0%";
var arrowLeft = "0%"; // the step N 2 : => ok

@@ -73,3 +125,3 @@ switch (args[0]) {

top -= height / 2 + triggerBounding.height / 2 + MarginY;
transform = `rotate(45deg)`;
transform = "rotate(45deg)";
arrowTop = "100%";

@@ -81,3 +133,3 @@ arrowLeft = "50%";

top += height / 2 + triggerBounding.height / 2 + MarginY;
transform = `rotate(225deg)`;
transform = "rotate(225deg)";
arrowLeft = "50%";

@@ -88,3 +140,3 @@ break;

left -= width / 2 + triggerBounding.width / 2 + MarginX;
transform = ` rotate(-45deg)`;
transform = " rotate(-45deg)";
arrowLeft = "100%";

@@ -96,3 +148,3 @@ arrowTop = "50%";

left += width / 2 + triggerBounding.width / 2 + MarginX;
transform = `rotate(135deg)`;
transform = "rotate(135deg)";
arrowTop = "50%";

@@ -125,7 +177,7 @@ break;

return {
top,
left,
transform,
arrowLeft,
arrowTop
top: top,
left: left,
transform: transform,
arrowLeft: arrowLeft,
arrowTop: arrowTop
};

@@ -140,5 +192,5 @@ }

width: "200px",
background: `rgb(255, 255, 255)`,
border: `1px solid rgb(187, 187, 187)`,
boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,
background: "rgb(255, 255, 255)",
border: "1px solid rgb(187, 187, 187)",
boxShadow: "rgba(0, 0, 0, 0.2) 0px 1px 3px",
padding: "5px"

@@ -148,6 +200,6 @@ },

position: "relative",
background: `rgb(255, 255, 255)`,
background: "rgb(255, 255, 255)",
width: "50%",
margin: "auto",
border: `1px solid rgb(187, 187, 187)`,
border: "1px solid rgb(187, 187, 187)",
padding: "5px"

@@ -180,3 +232,3 @@ }

right: "0",
background: `rgba(0, 0, 0,0.5)`,
background: "rgba(0, 0, 0,0.5)",
display: "flex",

@@ -188,6 +240,14 @@ zIndex: "999"

class Popup extends React.PureComponent {
constructor(props) {
super(props);
Object.defineProperty(this, "state", {
var Popup =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(Popup, _React$PureComponent);
function Popup(props) {
var _this;
_classCallCheck(this, Popup);
_this = _possibleConstructorReturn(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).call(this, props));
Object.defineProperty(_assertThisInitialized(_this), "state", {
configurable: true,

@@ -197,139 +257,142 @@ enumerable: true,

value: {
isOpen: this.props.open || this.props.defaultOpen,
modal: this.props.modal ? true : !this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
isOpen: _this.props.open || _this.props.defaultOpen,
modal: _this.props.modal ? true : !_this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
}
});
Object.defineProperty(this, "lockScroll", {
Object.defineProperty(_assertThisInitialized(_this), "lockScroll", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.modal && this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
value: function value() {
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
}
});
Object.defineProperty(this, "resetScroll", {
Object.defineProperty(_assertThisInitialized(_this), "resetScroll", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.modal && this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
value: function value() {
if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
}
});
Object.defineProperty(this, "togglePopup", {
Object.defineProperty(_assertThisInitialized(_this), "togglePopup", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.isOpen) this.closePopup();else this.openPopup();
value: function value() {
if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
}
});
Object.defineProperty(this, "openPopup", {
Object.defineProperty(_assertThisInitialized(_this), "openPopup", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (this.state.isOpen) return;
this.setState({
value: function value() {
if (_this.state.isOpen) return;
_this.setState({
isOpen: true
}, () => {
this.setPosition();
this.props.onOpen();
this.lockScroll();
}, function () {
_this.setPosition();
_this.props.onOpen();
_this.lockScroll();
});
}
});
Object.defineProperty(this, "closePopup", {
Object.defineProperty(_assertThisInitialized(_this), "closePopup", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
if (!this.state.isOpen) return;
this.setState({
value: function value() {
if (!_this.state.isOpen) return;
_this.setState({
isOpen: false
}, () => {
this.props.onClose();
this.resetScroll();
}, function () {
_this.props.onClose();
_this.resetScroll();
});
}
});
Object.defineProperty(this, "onMouseEnter", {
Object.defineProperty(_assertThisInitialized(_this), "onMouseEnter", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
clearTimeout(this.timeOut);
const {
mouseEnterDelay
} = this.props;
this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);
value: function value() {
clearTimeout(_this.timeOut);
var mouseEnterDelay = _this.props.mouseEnterDelay;
_this.timeOut = setTimeout(function () {
return _this.openPopup();
}, mouseEnterDelay);
}
});
Object.defineProperty(this, "onMouseLeave", {
Object.defineProperty(_assertThisInitialized(_this), "onMouseLeave", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
clearTimeout(this.timeOut);
const {
mouseLeaveDelay
} = this.props;
this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);
value: function value() {
clearTimeout(_this.timeOut);
var mouseLeaveDelay = _this.props.mouseLeaveDelay;
_this.timeOut = setTimeout(function () {
return _this.closePopup();
}, mouseLeaveDelay);
}
});
Object.defineProperty(this, "setPosition", {
Object.defineProperty(_assertThisInitialized(_this), "setPosition", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const {
arrow,
position,
offsetX,
offsetY
} = this.props;
const {
modal
} = this.state;
value: function value() {
var _this$props = _this.props,
arrow = _this$props.arrow,
position = _this$props.position,
offsetX = _this$props.offsetX,
offsetY = _this$props.offsetY;
var modal = _this.state.modal;
if (modal) return;
const helper = this.HelperEl.getBoundingClientRect();
const trigger = this.TriggerEl.getBoundingClientRect();
const content = this.ContentEl.getBoundingClientRect();
const cords = calculatePosition(trigger, content, position, arrow, {
offsetX,
offsetY
var helper = _this.HelperEl.getBoundingClientRect();
var trigger = _this.TriggerEl.getBoundingClientRect();
var content = _this.ContentEl.getBoundingClientRect();
var cords = calculatePosition(trigger, content, position, arrow, {
offsetX: offsetX,
offsetY: offsetY
});
this.ContentEl.style.top = cords.top - helper.top + "px";
this.ContentEl.style.left = cords.left - helper.left + "px";
_this.ContentEl.style.top = cords.top - helper.top + "px";
_this.ContentEl.style.left = cords.left - helper.left + "px";
if (arrow) {
this.ArrowEl.style["transform"] = cords.transform;
this.ArrowEl.style["-ms-transform"] = cords.transform;
this.ArrowEl.style["-webkit-transform"] = cords.transform;
this.ArrowEl.style.top = cords.arrowTop;
this.ArrowEl.style.left = cords.arrowLeft;
_this.ArrowEl.style["transform"] = cords.transform;
_this.ArrowEl.style["-ms-transform"] = cords.transform;
_this.ArrowEl.style["-webkit-transform"] = cords.transform;
_this.ArrowEl.style.top = cords.arrowTop;
_this.ArrowEl.style.left = cords.arrowLeft;
}
if (window.getComputedStyle(this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(this.TriggerEl, null).getPropertyValue("position") == "") this.TriggerEl.style.position = "relative";
if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
}
});
Object.defineProperty(this, "addWarperAction", {
Object.defineProperty(_assertThisInitialized(_this), "addWarperAction", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const {
contentStyle,
className,
on
} = this.props;
const {
modal
} = this.state;
const popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
const childrenElementProps = {
className: `popup-content ${className}`,
value: function value() {
var _this$props2 = _this.props,
contentStyle = _this$props2.contentStyle,
className = _this$props2.className,
on = _this$props2.on;
var modal = _this.state.modal;
var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
var childrenElementProps = {
className: "popup-content ".concat(className),
style: Object.assign({}, popupContentStyle, contentStyle),
ref: this.setContentRef,
onClick: e => {
ref: _this.setContentRef,
onClick: function onClick(e) {
e.stopPropagation();

@@ -340,4 +403,4 @@ }

if (!modal && on.includes("hover")) {
childrenElementProps.onMouseEnter = this.onMouseEnter;
childrenElementProps.onMouseLeave = this.onMouseLeave;
childrenElementProps.onMouseEnter = _this.onMouseEnter;
childrenElementProps.onMouseLeave = _this.onMouseLeave;
}

@@ -348,28 +411,27 @@

});
Object.defineProperty(this, "renderTrigger", {
Object.defineProperty(_assertThisInitialized(_this), "renderTrigger", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const triggerProps = {
value: function value() {
var triggerProps = {
key: "T"
};
const {
on,
trigger
} = this.props;
const onAsArray = Array.isArray(on) ? on : [on];
var _this$props3 = _this.props,
on = _this$props3.on,
trigger = _this$props3.trigger;
var onAsArray = Array.isArray(on) ? on : [on];
for (let i = 0, len = onAsArray.length; i < len; i++) {
for (var i = 0, len = onAsArray.length; i < len; i++) {
switch (onAsArray[i]) {
case "click":
triggerProps.onClick = this.togglePopup;
triggerProps.onClick = _this.togglePopup;
break;
case "hover":
triggerProps.onMouseEnter = this.onMouseEnter;
triggerProps.onMouseLeave = this.onMouseLeave;
triggerProps.onMouseEnter = _this.onMouseEnter;
triggerProps.onMouseLeave = _this.onMouseLeave;
case "focus":
triggerProps.onFocus = this.onMouseEnter;
triggerProps.onFocus = _this.onMouseEnter;
break;

@@ -379,93 +441,105 @@ }

if (typeof trigger === "function") return React.cloneElement(trigger(this.state.isOpen), triggerProps);
if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
return React.cloneElement(trigger, triggerProps);
}
});
Object.defineProperty(this, "renderContent", {
Object.defineProperty(_assertThisInitialized(_this), "renderContent", {
configurable: true,
enumerable: true,
writable: true,
value: () => {
const {
arrow,
arrowStyle
} = this.props;
const {
modal
} = this.state;
return React.createElement("div", _extends({}, this.addWarperAction(), {
value: function value() {
var _this$props4 = _this.props,
arrow = _this$props4.arrow,
arrowStyle = _this$props4.arrowStyle;
var modal = _this.state.modal;
return React.createElement("div", _extends({}, _this.addWarperAction(), {
key: "C"
}), arrow && !modal && React.createElement("div", {
ref: this.setArrowRef,
ref: _this.setArrowRef,
style: Object.assign({}, styles.popupArrow, arrowStyle)
}), typeof this.props.children === "function" ? this.props.children(this.closePopup, this.state.isOpen) : this.props.children);
}), typeof _this.props.children === "function" ? _this.props.children(_this.closePopup, _this.state.isOpen) : _this.props.children);
}
});
this.setTriggerRef = r => this.TriggerEl = r;
_this.setTriggerRef = function (r) {
return _this.TriggerEl = r;
};
this.setContentRef = r => this.ContentEl = r;
_this.setContentRef = function (r) {
return _this.ContentEl = r;
};
this.setArrowRef = r => this.ArrowEl = r;
_this.setArrowRef = function (r) {
return _this.ArrowEl = r;
};
this.setHelperRef = r => this.HelperEl = r;
_this.setHelperRef = function (r) {
return _this.HelperEl = r;
};
this.timeOut = 0;
_this.timeOut = 0;
return _this;
}
componentDidMount() {
const {
closeOnEscape,
defaultOpen
} = this.props;
if (defaultOpen) this.setPosition();
_createClass(Popup, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
if (closeOnEscape) {
window.addEventListener("keyup", e => {
if (e.key === "Escape") this.closePopup();
});
var _props = this.props,
closeOnEscape = _props.closeOnEscape,
defaultOpen = _props.defaultOpen;
if (defaultOpen) this.setPosition();
if (closeOnEscape) {
window.addEventListener("keyup", function (e) {
if (e.key === "Escape") _this2.closePopup();
});
}
}
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (this.props.open === nextProps.open) return;
if (nextProps.open) this.openPopup();else this.closePopup();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
// kill any function to execute if the component is unmounted
clearTimeout(this.timeOut);
}
}, {
key: "render",
value: function render() {
var _props2 = this.props,
overlayStyle = _props2.overlayStyle,
closeOnDocumentClick = _props2.closeOnDocumentClick,
on = _props2.on;
var modal = this.state.modal;
var overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick;
var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
return [this.state.isOpen && React.createElement("div", {
key: "H",
style: {
position: "absolute",
top: "0px",
left: "0px"
},
ref: this.setHelperRef
}), overlay && React.createElement("div", {
key: "O",
className: "popup-overlay",
style: Object.assign({}, ovStyle, overlayStyle),
onClick: this.closePopup
}, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
innerRef: this.setTriggerRef,
key: "R"
}, this.renderTrigger())];
}
}]);
componentWillReceiveProps(nextProps) {
if (this.props.open === nextProps.open) return;
if (nextProps.open) this.openPopup();else this.closePopup();
}
return Popup;
}(React.PureComponent);
componentWillUnmount() {
// kill any function to execute if the component is unmounted
clearTimeout(this.timeOut);
}
render() {
const {
overlayStyle,
closeOnDocumentClick,
on
} = this.props;
const {
modal
} = this.state;
const overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick;
const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
return [this.state.isOpen && React.createElement("div", {
key: "H",
style: {
position: "absolute",
top: "0px",
left: "0px"
},
ref: this.setHelperRef
}), overlay && React.createElement("div", {
key: "O",
className: "popup-overlay",
style: Object.assign({}, ovStyle, overlayStyle),
onClick: this.closePopup
}, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
innerRef: this.setTriggerRef,
key: "R"
}, this.renderTrigger())];
}
}
Object.defineProperty(Popup, "defaultProps", {

@@ -476,6 +550,8 @@ configurable: true,

value: {
children: () => React.createElement("span", null, " Your Content Here !!"),
children: function children() {
return React.createElement("span", null, " Your Content Here !!");
},
trigger: null,
onOpen: () => {},
onClose: () => {},
onOpen: function onOpen() {},
onClose: function onClose() {},
defaultOpen: false,

@@ -492,3 +568,3 @@ open: false,

modal: false,
lockScroll: true,
lockScroll: false,
arrow: true,

@@ -503,3 +579,3 @@ offsetX: 0,

{
const PropTypes = require("prop-types");
var PropTypes = require("prop-types");

@@ -530,25 +606,32 @@ Popup.propTypes = {

class Ref extends React.PureComponent {
constructor(props) {
super(props);
}
var Ref =
/*#__PURE__*/
function (_React$PureComponent2) {
_inherits(Ref, _React$PureComponent2);
componentDidMount() {
const {
innerRef
} = this.props;
if (innerRef) innerRef(reactDom.findDOMNode(this));
}
function Ref(props) {
_classCallCheck(this, Ref);
render() {
const {
children
} = this.props;
return React.Children.only(children);
return _possibleConstructorReturn(this, (Ref.__proto__ || Object.getPrototypeOf(Ref)).call(this, props));
}
}
_createClass(Ref, [{
key: "componentDidMount",
value: function componentDidMount() {
var innerRef = this.props.innerRef;
if (innerRef) innerRef(reactDom.findDOMNode(this));
}
}, {
key: "render",
value: function render() {
var children = this.props.children;
return React.Children.only(children);
}
}]);
return Ref;
}(React.PureComponent);
return Popup;
})));

4

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

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc