react-awesome-popover
Version:
A smart popover component with animation support for ReactJS
832 lines (823 loc) • 35 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
typeof define === 'function' && define.amd ? define(['react'], factory) :
(global = global || self, global.ReactAwesomePopover = factory(global.React));
}(this, function (React) { 'use strict';
React = React && React.hasOwnProperty('default') ? React['default'] : React;
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {
_extends = Object.assign || function(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i];
for(var key in source){
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectSpread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {
};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_defineProperty(target, key, source[key]);
});
}
return target;
}
function _throw(e) {
throw e;
}
var Target = function(param) {
var ref1 = param ? param : _throw(new TypeError("Cannot destructure 'undefined' or 'null'")), open = ref1.open, zIndex = ref1.zIndex, children = ref1.children, action = ref1.action, targetRef = ref1.targetRef, setOpen = ref1.setOpen, preventDefault = ref1.preventDefault, stopPropagation = ref1.stopPropagation;
var onClick = function(e) {
if (preventDefault) e.preventDefault();
if (stopPropagation) e.stopPropagation();
setOpen();
};
var onMouseOut = function(param1) {
var ref1 = param1 ? param1 : _throw(new TypeError("Cannot destructure 'undefined' or 'null'")), relatedTarget = ref1.relatedTarget;
if (relatedTarget.id === 'overlay') {
setOpen();
}
};
var defaultStyle = {
display: 'inline-block',
position: 'relative'
};
var zIndexStyle = open ? {
zIndex: zIndex + 10
} : {
};
var actions = action === 'click' ? {
onClick: onClick,
onTouchEnd: onClick
} : action === 'hover' ? {
onMouseOver: setOpen,
onMouseOut: onMouseOut
} : {
};
return React.createElement('div', _extends({
style: _objectSpread({
}, defaultStyle, zIndexStyle),
ref: targetRef
}, actions), children);
};
var DEFAULT_ZINDEX = 1000;
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
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 _defineProperty$1(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends$1() {
_extends$1 = Object.assign || function(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i];
for(var key in source){
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$1.apply(this, arguments);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
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,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _objectSpread$1(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {
};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_defineProperty$1(target, key, source[key]);
});
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {
};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {
};
var target = {
};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _possibleConstructorReturn(self, call) {
if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
return call;
}
return _assertThisInitialized(self);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _throw$1(e) {
throw e;
}
var _typeof = function(obj) {
return obj && obj.constructor === Symbol ? 'symbol' : typeof obj;
};
var _Math;
var Content = function(_Component) {
_inherits(Content, _Component);
function Content() {
var _this;
_classCallCheck(this, Content);
_this = _possibleConstructorReturn(this, _getPrototypeOf(Content).apply(this, arguments));
_defineProperty$1(_assertThisInitialized(_this), 'state', {
position: null
});
_defineProperty$1(_assertThisInitialized(_this), 'contentRef', React.createRef());
_defineProperty$1(_assertThisInitialized(_this), 'arrowRef', React.createRef());
return _this;
}
_createClass(Content, [{
key: 'componentDidMount',
value: function componentDidMount() {
var ref = this, ref1 = ref ? ref : _throw$1(new TypeError("Cannot destructure 'undefined' or 'null'")), contentRef = ref1.contentRef, arrowRef = ref1.arrowRef;
var ref2 = this.props, ref3 = ref2 ? ref2 : _throw$1(new TypeError("Cannot destructure 'undefined' or 'null'")), targetRef = ref3.targetRef, arrow = ref3.arrow, onOpen = ref3.onOpen, placement = ref3.placement;
if (onOpen) onOpen();
var targetBound = targetRef.current.getBoundingClientRect();
var contentBound = contentRef.current.getBoundingClientRect();
var arrowBound = {
width: 0,
height: 0
};
if (arrow) {
arrowBound = arrowRef.current.getBoundingClientRect();
}
var ref4 = window ? window : _throw$1(new TypeError("Cannot destructure 'undefined' or 'null'")), innerWidth = ref4.innerWidth, innerHeight = ref4.innerHeight;
var calcCoverLeft = contentBound.x - contentBound.width;
var coverLeft = calcCoverLeft < 0 ? calcCoverLeft : 0;
var calcCoverRight = contentBound.x + targetBound.width + contentBound.width;
var coverRight = calcCoverRight > innerWidth ? innerWidth - calcCoverRight : 0;
var calcCoverTop = contentBound.y - contentBound.height;
var coverTop = calcCoverTop < 0 ? calcCoverTop : 0;
var calcCoverBottom = targetBound.bottom + contentBound.height;
var coverBottom = calcCoverBottom > innerHeight ? innerHeight - calcCoverBottom : 0;
var calcXCenterLeft = contentBound.x + targetBound.width / 2 - contentBound.width / 2;
var calcXCenterRight = contentBound.x + targetBound.width / 2 - contentBound.width / 2 + contentBound.width;
var coverXCenterLeft = calcXCenterLeft < 0 ? calcXCenterLeft : 0;
var coverXCenterRight = calcXCenterRight > innerWidth ? innerWidth - calcXCenterRight : 0;
var calcYCenterTop = contentBound.y + targetBound.height / 2 - contentBound.height / 2;
var coverYCenterTop = calcYCenterTop < 0 ? calcYCenterTop : 0;
var calcYCenterBottom = contentBound.y + targetBound.height / 2 - contentBound.height / 2 + contentBound.height;
var coverYCenterBottom = calcYCenterBottom > innerHeight ? calcYCenterBottom : 0;
var calcTopStart = contentBound.x + contentBound.width;
var coverTopStart = calcTopStart > innerWidth ? innerWidth - calcTopStart : 0;
var calcTopEnd = contentBound.x - contentBound.width - targetBound.width;
var coverTopEnd = calcTopEnd < 0 ? calcTopEnd : 0;
var calcLeftEndTop = contentBound.y - contentBound.height - targetBound.height;
var coverLeftEndTop = calcLeftEndTop < 0 ? calcLeftEndTop : 0;
var coverRightEndTop = coverLeftEndTop;
var calcLefStartBottom = contentBound.y + contentBound.height;
var coverLeftStartBottom = calcLefStartBottom > innerHeight ? innerHeight - calcLefStartBottom : 0;
var coverRightStartBottom = coverLeftStartBottom;
var coverBottomStartRight = coverTopStart;
var coverBottomEndLeft = coverTopEnd;
var xCenterStyle = targetBound.height / 2 - contentBound.height / 2;
var rightLeftEnd = -(contentBound.height - targetBound.height);
var topBottomEnd = -(contentBound.width - targetBound.width);
var topBottomCenter = targetBound.width / 2 - contentBound.width / 2;
var computeArrowW = arrowBound.width / 2;
var computearrowH = arrowBound.height / 2;
var leftLeftStyle = -(contentBound.width + computeArrowW);
var topTopStyle = -(contentBound.height + arrowBound.height / 2);
var rightLeftStyle = targetBound.width + computeArrowW;
var bottomTopStyle = targetBound.height + computearrowH;
var styles = {
topStart: {
top: topTopStyle
},
topCenter: {
top: topTopStyle,
left: topBottomCenter
},
topEnd: {
top: topTopStyle,
left: topBottomEnd
},
leftStart: {
left: leftLeftStyle
},
leftCenter: {
left: leftLeftStyle,
top: xCenterStyle
},
leftEnd: {
top: rightLeftEnd,
left: leftLeftStyle
},
rightStart: {
left: rightLeftStyle
},
rightCenter: {
left: rightLeftStyle,
top: xCenterStyle
},
rightEnd: {
left: rightLeftStyle,
top: rightLeftEnd
},
bottomStart: {
top: bottomTopStyle
},
bottomCenter: {
top: bottomTopStyle,
left: topBottomCenter
},
bottomEnd: {
top: bottomTopStyle,
left: topBottomEnd
}
};
var transform = {
bottom: {
transform: 'rotate(-45deg)'
},
top: {
transform: 'rotate(135deg)'
},
left: {
transform: 'rotate(45deg)'
},
right: {
transform: 'rotate(45deg)'
}
};
var arrowBottomTop = Math.ceil(-arrowBound.height / 2);
var arrowBottomTopCenter = contentBound.width / 2 - arrowBound.width / 2;
var arrowTop = contentBound.height - arrowBound.height / 2;
var arrowTopBottomEnd = targetBound.width / 2 - arrowBound.width / 2;
var arrowLeftRightEnd = contentBound.height - arrowBound.height / 2 - targetBound.height / 2;
var arrowLeftRightCenter = contentBound.height / 2 - Math.ceil(arrowBound.height / 2);
var arrowTopBottomStartLeft = targetBound.width / 2 - arrowBound.width / 2;
var arrowLeftLeft = Math.ceil(contentBound.width - arrowBound.width / 2);
var arrowLeftRightTop = targetBound.height / 2 - arrowBound.height / 2;
var arrowStyle = {
topStart: _objectSpread$1({
}, transform.top, {
top: arrowTop,
left: arrowTopBottomStartLeft
}),
topCenter: _objectSpread$1({
}, transform.top, {
top: arrowTop,
left: arrowBottomTopCenter
}),
topEnd: _objectSpread$1({
}, transform.top, {
top: arrowTop,
right: arrowTopBottomEnd
}),
leftStart: _objectSpread$1({
}, transform.left, {
left: arrowLeftLeft,
top: arrowLeftRightTop
}),
leftCenter: _objectSpread$1({
}, transform.left, {
left: arrowLeftLeft,
top: arrowLeftRightCenter
}),
leftEnd: _objectSpread$1({
}, transform.left, {
left: arrowLeftLeft,
top: arrowLeftRightEnd
}),
rightStart: _objectSpread$1({
}, transform.right, {
left: -arrowBound.width,
top: arrowLeftRightTop
}),
rightCenter: _objectSpread$1({
}, transform.right, {
left: -arrowBound.width,
top: arrowLeftRightCenter
}),
rightEnd: _objectSpread$1({
}, transform.right, {
left: -arrowBound.width,
top: arrowLeftRightEnd
}),
bottomStart: _objectSpread$1({
}, transform.bottom, {
top: arrowBottomTop,
left: arrowTopBottomStartLeft
}),
bottomCenter: _objectSpread$1({
}, transform.bottom, {
top: arrowBottomTop,
left: arrowBottomTopCenter
}),
bottomEnd: _objectSpread$1({
}, transform.bottom, {
top: arrowBottomTop,
right: arrowTopBottomEnd
})
};
var pos = [
{
at: 'top-start',
cover: [coverTop, coverTopStart, 0],
style: styles.topStart,
arrow: arrowStyle.topStart
},
{
at: 'top-center',
cover: [coverTop, coverXCenterLeft, coverXCenterRight],
style: styles.topCenter,
arrow: arrowStyle.topCenter
},
{
at: 'top-end',
cover: [coverTop, coverTopEnd, 0],
style: styles.topEnd,
arrow: arrowStyle.topEnd
},
{
at: 'left-start',
cover: [coverLeft, coverLeftStartBottom, 0],
style: styles.leftStart,
arrow: arrowStyle.leftStart
},
{
at: 'left-center',
cover: [coverLeft, coverYCenterTop, coverYCenterBottom],
style: styles.leftCenter,
arrow: arrowStyle.leftCenter
},
{
at: 'left-end',
cover: [coverLeft, coverLeftEndTop, 0],
style: styles.leftEnd,
arrow: arrowStyle.leftEnd
},
{
at: 'right-start',
cover: [coverRight, coverRightStartBottom, 0],
style: styles.rightStart,
arrow: arrowStyle.rightStart
},
{
at: 'right-center',
cover: [coverRight, coverYCenterTop, coverYCenterBottom],
style: styles.rightCenter,
arrow: arrowStyle.rightCenter
},
{
at: 'right-end',
cover: [coverRight, coverRightEndTop, 0],
style: styles.rightEnd,
arrow: arrowStyle.rightEnd
},
{
at: 'bottom-start',
cover: [coverBottom, coverBottomStartRight, 0],
style: styles.bottomStart,
arrow: arrowStyle.bottomStart
},
{
at: 'bottom-center',
cover: [coverBottom, coverXCenterLeft, coverXCenterRight],
style: styles.bottomCenter,
arrow: arrowStyle.bottomCenter
},
{
at: 'bottom-end',
cover: [coverBottom, coverBottomEndLeft, 0],
style: styles.bottomEnd,
arrow: arrowStyle.bottomEnd
},
];
var get;
if (placement === 'auto') {
var reducer = function(accumulator, currentValue) {
return accumulator + currentValue;
};
var compute = pos.map(function(param) {
var ref5 = param ? param : _throw$1(new TypeError("Cannot destructure 'undefined' or 'null'")), cover = ref5.cover;
return cover.reduce(reducer);
});
var findIndex = compute.indexOf((_Math = Math).max.apply(_Math, compute));
var result = pos[findIndex];
get = result;
} else {
get = pos.filter(function(val) {
return val.at === placement;
})[0];
}
this.setState({
position: get
});
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var ref = this.props, ref1 = ref ? ref : _throw$1(new TypeError("Cannot destructure 'undefined' or 'null'")), onClose = ref1.onClose;
if (onClose) onClose();
}
}, {
key: 'render',
value: function render() {
var ref5 = this.state, ref1 = ref5 ? ref5 : _throw$1(new TypeError("Cannot destructure 'undefined' or 'null'")), position = ref1.position;
var defaultStyle = {
display: 'inline-block',
position: 'absolute',
left: 0,
top: 0,
zIndex: DEFAULT_ZINDEX + 10
};
var positionStyle = position ? position.style : {
};
var arrowStyle = position ? position.arrow : {
};
var ref2 = this.props, ref3 = ref2 ? ref2 : _throw$1(new TypeError("Cannot destructure 'undefined' or 'null'")), content = ref3.content, arrow = ref3.arrow, _ref$arrowProps = ref3.arrowProps, arrowProps = _ref$arrowProps === void 0 ? {
} : _ref$arrowProps;
var ref4 = arrowProps ? arrowProps : _throw$1(new TypeError("Cannot destructure 'undefined' or 'null'")), _ref$style = ref4.style, style = _ref$style === void 0 ? {
} : _ref$style, arrowRest = _objectWithoutProperties(arrowProps, [
'style'
]);
return React.createElement('div', {
style: _objectSpread$1({
}, defaultStyle, positionStyle),
ref: this.contentRef
}, arrow ? React.createElement('div', _extends$1({
ref: this.arrowRef,
style: _objectSpread$1({
}, _objectSpread$1({
position: 'absolute',
top: 0
}, arrowStyle), style)
}, arrowRest), '◥') : null, content);
}
}]);
return Content;
}(React.Component);
function _extends$2() {
_extends$2 = Object.assign || function(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i];
for(var key in source){
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$2.apply(this, arguments);
}
function _throw$2(e) {
throw e;
}
var Overlay = function(param) {
var ref = param ? param : _throw$2(new TypeError("Cannot destructure 'undefined' or 'null'")), onClose = ref.onClose, _ref$overlayColor = ref.overlayColor, overlayColor = _ref$overlayColor === void 0 ? 'rgba(0,0,0,0.5)' : _ref$overlayColor, zIndex = ref.zIndex, action = ref.action, setOpen = ref.setOpen, preventDefault = ref.preventDefault, stopPropagation = ref.stopPropagation;
var onClick = function(e) {
if (preventDefault) e.preventDefault();
if (stopPropagation) e.stopPropagation();
onClose();
};
var actions = action === 'click' ? {
onClick: onClick,
onTouchEnd: onClick
} : action === 'hover' ? {
onMouseEnter: setOpen
} : {
};
return React.createElement('div', _extends$2({
style: {
backgroundColor: overlayColor,
position: 'fixed',
width: '100%',
height: '100%',
top: 0,
left: 0,
cursor: 'pointer',
zIndex: zIndex
}
}, actions));
};
function _assertThisInitialized$1(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _classCallCheck$1(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError('Cannot call a class as a function');
}
}
function _defineProperties$1(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$1(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
if (staticProps) _defineProperties$1(Constructor, staticProps);
return Constructor;
}
function _defineProperty$2(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends$3() {
_extends$3 = Object.assign || function(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i];
for(var key in source){
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$3.apply(this, arguments);
}
function _getPrototypeOf$1(o) {
_getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf$1(o);
}
function _inherits$1(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,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf$1(subClass, superClass);
}
function _objectSpread$2(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {
};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_defineProperty$2(target, key, source[key]);
});
}
return target;
}
function _objectWithoutProperties$1(source, excluded) {
if (source == null) return {
};
var target = _objectWithoutPropertiesLoose$1(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _objectWithoutPropertiesLoose$1(source, excluded) {
if (source == null) return {
};
var target = {
};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _possibleConstructorReturn$1(self, call) {
if (call && (_typeof$1(call) === 'object' || typeof call === 'function')) {
return call;
}
return _assertThisInitialized$1(self);
}
function _setPrototypeOf$1(o, p) {
_setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf$1(o, p);
}
function _throw$3(e) {
throw e;
}
var _typeof$1 = function(obj) {
return obj && obj.constructor === Symbol ? 'symbol' : typeof obj;
};
var Popover = function(_Component) {
_inherits$1(Popover, _Component);
function Popover() {
var _this;
_classCallCheck$1(this, Popover);
_this = _possibleConstructorReturn$1(this, _getPrototypeOf$1(Popover).apply(this, arguments));
_defineProperty$2(_assertThisInitialized$1(_this), 'state', {
open: _this.props.open || false
});
_defineProperty$2(_assertThisInitialized$1(_this), 'target', React.createRef());
_defineProperty$2(_assertThisInitialized$1(_this), 'setOpen', function() {
_this.setState({
open: !_this.state.open
});
});
return _this;
}
_createClass$1(Popover, [{
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
if (prevProps.open !== this.props.open) {
this.setState({
open: this.props.open
});
}
}
}, {
key: 'render',
value: function render() {
var ref = this, ref1 = ref ? ref : _throw$3(new TypeError("Cannot destructure 'undefined' or 'null'")), props = ref1.props;
var ref2 = props ? props : _throw$3(new TypeError("Cannot destructure 'undefined' or 'null'")), _ref$placement = ref2.placement, placement = _ref$placement === void 0 ? 'auto' : _ref$placement, _ref$arrow = ref2.arrow, arrow = _ref$arrow === void 0 ? true : _ref$arrow, _ref$action = ref2.action, action = _ref$action === void 0 ? 'click' : _ref$action, _ref$zIndex = ref2.zIndex, zIndex = _ref$zIndex === void 0 ? DEFAULT_ZINDEX : _ref$zIndex, preventDefault = ref2.preventDefault, stopPropagation = ref2.stopPropagation, onOpen = ref2.onOpen, onClose = ref2.onClose, children = ref2.children, style = ref2.style, overlayColor = ref2.overlayColor, arrowProps = ref2.arrowProps, rest = _objectWithoutProperties$1(props, [
'placement',
'arrow',
'action',
'zIndex',
'preventDefault',
'stopPropagation',
'onOpen',
'onClose',
'children',
'style',
'overlayColor',
'arrowProps'
]);
var target = children[0], content = children[1];
return React.createElement('div', _extends$3({
style: _objectSpread$2({
}, {
position: 'relative'
}, style)
}, rest), React.createElement(Target, {
preventDefault: preventDefault,
stopPropagation: stopPropagation,
targetRef: this.target,
open: this.state.open,
zIndex: zIndex,
action: action,
setOpen: this.setOpen
}, target), this.state.open && React.createElement(React.Fragment, null, React.createElement(Content, {
arrowProps: arrowProps,
zIndex: zIndex,
arrow: arrow,
placement: placement,
targetRef: this.target,
content: content,
onClose: onClose,
onOpen: onOpen
}), React.createElement(Overlay, {
preventDefault: preventDefault,
stopPropagation: stopPropagation,
overlayColor: overlayColor,
onClose: this.setOpen,
zIndex: zIndex,
action: action,
setOpen: this.setOpen
})));
}
}]);
return Popover;
}(React.Component);
return Popover;
}));