@geneui/components
Version:
The Gene UI components library designed for BI tools
726 lines (716 loc) • 34.6 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { forwardRef, useRef, useState, useContext, useCallback, useMemo, Children, useEffect } from 'react';
import { c as commonjsGlobal } from '../_commonjsHelpers-24198af3.js';
import ReactDOM__default from 'react-dom';
import { u as useSwipeable } from '../index-122432cd.js';
import { c as classnames } from '../index-031ff73c.js';
import PropTypes from 'prop-types';
import { n as noop, s as stopEvent } from '../index-a0e4e333.js';
import useDeviceType from '../hooks/useDeviceType.js';
import useUpdatableRef from '../hooks/useUpdatableRef.js';
import { g as popoverConfig, s as screenTypes } from '../configs-00612ce0.js';
import { GeneUIDesignSystemContext } from '../GeneUIProvider/index.js';
import Portal from '../Portal/index.js';
import CustomScrollbar from '../Scrollbar/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import { g as guid } from '../guid-8ddf77b3.js';
import '../dateValidation-67caec66.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../hooks/useForceUpdate.js';
var Popover$2 = {};
var util = {};
Object.defineProperty(util, "__esModule", { value: true });
util.Constants = {
POPOVER_CONTAINER_CLASS_NAME: 'react-tiny-popover-container',
DEFAULT_PADDING: 6,
DEFAULT_WINDOW_PADDING: 6,
FADE_TRANSITION: 0.35,
DEFAULT_ARROW_COLOR: 'black',
DEFAULT_POSITIONS: ['top', 'left', 'right', 'bottom'],
EMPTY_CLIENT_RECT: {
top: 0,
left: 0,
bottom: 0,
height: 0,
right: 0,
width: 0,
},
};
util.arrayUnique = function (array) { return array.filter(function (value, index, self) { return self.indexOf(value) === index; }); };
var ArrowContainer$1 = {};
var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(ArrowContainer$1, "__esModule", { value: true });
var React$1 = React__default;
var util_1$1 = util;
var ArrowContainer = function (_a) {
var position = _a.position, children = _a.children, style = _a.style, _b = _a.arrowColor, arrowColor = _b === void 0 ? util_1$1.Constants.DEFAULT_ARROW_COLOR : _b, _c = _a.arrowSize, arrowSize = _c === void 0 ? 10 : _c, arrowStyle = _a.arrowStyle, popoverRect = _a.popoverRect, targetRect = _a.targetRect;
return (React$1.createElement("div", { style: __assign({ paddingLeft: position === 'right' ? arrowSize : 0, paddingTop: position === 'bottom' ? arrowSize : 0, paddingBottom: position === 'top' ? arrowSize : 0, paddingRight: position === 'left' ? arrowSize : 0 }, style) },
React$1.createElement("div", { style: __assign({ position: 'absolute' }, (function () {
var arrowWidth = arrowSize * 2;
var top = (targetRect.top - popoverRect.top) + (targetRect.height / 2) - (arrowWidth / 2);
var left = (targetRect.left - popoverRect.left) + (targetRect.width / 2) - (arrowWidth / 2);
left = left < 0 ? 0 : left;
left = left + arrowWidth > popoverRect.width ? popoverRect.width - arrowWidth : left;
top = top < 0 ? 0 : top;
top = top + arrowWidth > popoverRect.height ? popoverRect.height - arrowWidth : top;
switch (position) {
case 'right':
return {
borderTop: arrowSize + "px solid transparent",
borderBottom: arrowSize + "px solid transparent",
borderRight: arrowSize + "px solid " + arrowColor,
left: 0,
top: top,
};
case 'left':
return {
borderTop: arrowSize + "px solid transparent",
borderBottom: arrowSize + "px solid transparent",
borderLeft: arrowSize + "px solid " + arrowColor,
right: 0,
top: top,
};
case 'bottom':
return {
borderLeft: arrowSize + "px solid transparent",
borderRight: arrowSize + "px solid transparent",
borderBottom: arrowSize + "px solid " + arrowColor,
top: 0,
left: left,
};
case 'top':
default:
return {
borderLeft: arrowSize + "px solid transparent",
borderRight: arrowSize + "px solid transparent",
borderTop: arrowSize + "px solid " + arrowColor,
bottom: 0,
left: left,
};
}
})(), arrowStyle) }),
children));
};
ArrowContainer$1.ArrowContainer = ArrowContainer;
var __extends = (commonjsGlobal && commonjsGlobal.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(Popover$2, "__esModule", { value: true });
var React = React__default;
var react_dom_1 = ReactDOM__default;
var util_1 = util;
var ArrowContainer_1 = ArrowContainer$1;
Popover$2.ArrowContainer = ArrowContainer_1.ArrowContainer;
var Popover$1 = /** @class */ (function (_super) {
__extends(Popover, _super);
function Popover() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.target = null;
_this.targetRect = null;
_this.targetPositionIntervalHandler = null;
_this.popoverDiv = null;
_this.positionOrder = null;
_this.willUnmount = false;
_this.willMount = false;
_this.onResize = function (e) {
_this.renderPopover();
};
_this.onClick = function (e) {
var _a = _this.props, onClickOutside = _a.onClickOutside, isOpen = _a.isOpen;
if (!_this.willUnmount && !_this.willMount && !_this.popoverDiv.contains(e.target) && !_this.target.contains(e.target) && onClickOutside && isOpen) {
onClickOutside(e);
}
};
return _this;
}
Popover.prototype.componentDidMount = function () {
var _this = this;
window.setTimeout(function () { return _this.willMount = false; });
var _a = this.props, position = _a.position, isOpen = _a.isOpen;
this.target = react_dom_1.findDOMNode(this);
this.positionOrder = this.getPositionPriorityOrder(position);
this.updatePopover(isOpen);
};
Popover.prototype.componentDidUpdate = function (prevProps) {
if (this.target == null) {
this.target = react_dom_1.findDOMNode(this);
}
var prevIsOpen = prevProps.isOpen, prevPosition = prevProps.position, prevBody = prevProps.content;
var _a = this.props, isOpen = _a.isOpen, content = _a.content, position = _a.position;
this.positionOrder = this.getPositionPriorityOrder(this.props.position);
var hasNewDestination = prevProps.contentDestination !== this.props.contentDestination;
if (prevIsOpen !== isOpen ||
prevBody !== content ||
prevPosition !== position ||
hasNewDestination) {
if (hasNewDestination) {
this.removePopover();
this.popoverDiv.remove();
}
this.updatePopover(isOpen);
}
};
Popover.prototype.componentWillMount = function () {
this.willUnmount = false;
this.willMount = true;
};
Popover.prototype.componentWillUnmount = function () {
this.willUnmount = true;
this.removePopover();
};
Popover.prototype.render = function () {
return this.props.children;
};
Popover.prototype.updatePopover = function (isOpen) {
if (isOpen && this.target != null) {
if (!this.popoverDiv || !this.popoverDiv.parentNode) {
var transitionDuration = this.props.transitionDuration;
this.popoverDiv = this.createContainer();
this.popoverDiv.style.opacity = '0';
this.popoverDiv.style.transition = "opacity " + (transitionDuration || util_1.Constants.FADE_TRANSITION) + "s";
(this.props.contentDestination || window.document.body).appendChild(this.popoverDiv);
window.addEventListener('resize', this.onResize);
window.addEventListener('click', this.onClick);
}
this.renderPopover();
}
else if (this.popoverDiv && this.popoverDiv.parentNode) {
this.removePopover();
}
};
Popover.prototype.renderPopover = function (positionIndex) {
var _this = this;
if (positionIndex === void 0) { positionIndex = 0; }
if (positionIndex >= this.positionOrder.length) {
this.removePopover();
return;
}
this.renderWithPosition({ position: this.positionOrder[positionIndex], targetRect: this.target.getBoundingClientRect() }, function (violation, rect) {
var _a;
var _b = _this.props, disableReposition = _b.disableReposition, contentLocation = _b.contentLocation;
if (violation && !disableReposition && !(typeof contentLocation === 'object')) {
_this.renderPopover(positionIndex + 1);
}
else {
var _c = _this.props, contentLocation_1 = _c.contentLocation, align = _c.align;
var _d = _this.getNudgedPopoverPosition(rect), nudgedTop = _d.top, nudgedLeft = _d.left;
var rectTop = rect.top, rectLeft = rect.left;
var position = _this.positionOrder[positionIndex];
var _e = disableReposition ? { top: rectTop, left: rectLeft } : { top: nudgedTop, left: nudgedLeft }, top_1 = _e.top, left = _e.left;
if (contentLocation_1) {
var targetRect = _this.target.getBoundingClientRect();
var popoverRect = _this.popoverDiv.getBoundingClientRect();
(_a = typeof contentLocation_1 === 'function' ? contentLocation_1({ targetRect: targetRect, popoverRect: popoverRect, position: position, align: align, nudgedLeft: nudgedLeft, nudgedTop: nudgedTop }) : contentLocation_1, top_1 = _a.top, left = _a.left);
_this.popoverDiv.style.left = left.toFixed() + "px";
_this.popoverDiv.style.top = top_1.toFixed() + "px";
}
else {
var destinationTopOffset = 0;
var destinationLeftOffset = 0;
if (_this.props.contentDestination) {
var destRect = _this.props.contentDestination.getBoundingClientRect();
destinationTopOffset = -destRect.top;
destinationLeftOffset = -destRect.left;
}
var _f = [top_1 + window.pageYOffset, left + window.pageXOffset], absoluteTop = _f[0], absoluteLeft = _f[1];
var finalLeft = absoluteLeft + destinationTopOffset;
var finalTop = absoluteTop + destinationLeftOffset;
_this.popoverDiv.style.left = finalLeft.toFixed() + "px";
_this.popoverDiv.style.top = finalTop.toFixed() + "px";
}
_this.popoverDiv.style.width = null;
_this.popoverDiv.style.height = null;
_this.renderWithPosition({
position: position,
nudgedTop: nudgedTop - rect.top,
nudgedLeft: nudgedLeft - rect.left,
targetRect: _this.target.getBoundingClientRect(),
popoverRect: _this.popoverDiv.getBoundingClientRect(),
}, function () {
_this.startTargetPositionListener(10);
if (_this.popoverDiv.style.opacity !== '1') {
_this.popoverDiv.style.opacity = '1';
}
});
}
});
};
Popover.prototype.startTargetPositionListener = function (checkInterval) {
var _this = this;
if (this.targetPositionIntervalHandler === null) {
this.targetPositionIntervalHandler = window.setInterval(function () {
var newTargetRect = _this.target.getBoundingClientRect();
if (_this.targetPositionHasChanged(_this.targetRect, newTargetRect)) {
_this.renderPopover();
}
_this.targetRect = newTargetRect;
}, checkInterval);
}
};
Popover.prototype.renderWithPosition = function (_a, callback) {
var _this = this;
var position = _a.position, _b = _a.nudgedLeft, nudgedLeft = _b === void 0 ? 0 : _b, _c = _a.nudgedTop, nudgedTop = _c === void 0 ? 0 : _c, _d = _a.targetRect, targetRect = _d === void 0 ? util_1.Constants.EMPTY_CLIENT_RECT : _d, _e = _a.popoverRect, popoverRect = _e === void 0 ? util_1.Constants.EMPTY_CLIENT_RECT : _e;
var _f = this.props, padding = _f.windowBorderPadding, content = _f.content, align = _f.align;
var getContent = function (args) {
return typeof content === 'function'
? content(args)
: content;
};
react_dom_1.unstable_renderSubtreeIntoContainer(this, getContent({ position: position, nudgedLeft: nudgedLeft, nudgedTop: nudgedTop, targetRect: targetRect, popoverRect: popoverRect, align: align }), this.popoverDiv, function () {
if (_this.willUnmount) {
return;
}
var targetRect = _this.target.getBoundingClientRect();
var popoverRect = _this.popoverDiv.getBoundingClientRect();
var _a = _this.getLocationForPosition(position, targetRect, popoverRect), top = _a.top, left = _a.left;
callback(position === 'top' && top < padding ||
position === 'left' && left < padding ||
position === 'right' && left + popoverRect.width > window.innerWidth - padding ||
position === 'bottom' && top + popoverRect.height > window.innerHeight - padding, { width: popoverRect.width, height: popoverRect.height, top: top, left: left });
});
};
Popover.prototype.getNudgedPopoverPosition = function (_a) {
var top = _a.top, left = _a.left, width = _a.width, height = _a.height;
var padding = this.props.windowBorderPadding;
top = top < padding ? padding : top;
top = top + height > window.innerHeight - padding ? window.innerHeight - padding - height : top;
left = left < padding ? padding : left;
left = left + width > window.innerWidth - padding ? window.innerWidth - padding - width : left;
return { top: top, left: left };
};
Popover.prototype.removePopover = function () {
var _this = this;
if (this.popoverDiv) {
var transitionDuration = this.props.transitionDuration;
this.popoverDiv.style.opacity = '0';
var remove = function () {
if (_this.willUnmount || !_this.props.isOpen || !_this.popoverDiv.parentNode) {
window.clearInterval(_this.targetPositionIntervalHandler);
window.removeEventListener('resize', _this.onResize);
window.removeEventListener('click', _this.onClick);
_this.targetPositionIntervalHandler = null;
if (_this.popoverDiv.parentNode) {
_this.popoverDiv.parentNode.removeChild(_this.popoverDiv);
}
}
};
if (!this.willUnmount) {
window.setTimeout(remove, (transitionDuration || util_1.Constants.FADE_TRANSITION) * 1000);
}
else {
remove();
}
}
};
Popover.prototype.getPositionPriorityOrder = function (position) {
if (position && typeof position !== 'string') {
if (util_1.Constants.DEFAULT_POSITIONS.every(function (defaultPosition) { return position.find(function (p) { return p === defaultPosition; }) !== undefined; })) {
return util_1.arrayUnique(position);
}
else {
var remainingPositions = util_1.Constants.DEFAULT_POSITIONS.filter(function (defaultPosition) { return position.find(function (p) { return p === defaultPosition; }) === undefined; });
return util_1.arrayUnique(position.concat(remainingPositions));
}
}
else if (position && typeof position === 'string') {
var remainingPositions = util_1.Constants.DEFAULT_POSITIONS.filter(function (defaultPosition) { return defaultPosition !== position; });
return util_1.arrayUnique([position].concat(remainingPositions));
}
};
Popover.prototype.createContainer = function () {
var _a = this.props, containerStyle = _a.containerStyle, containerClassName = _a.containerClassName;
var container = window.document.createElement('div');
container.style.overflow = 'hidden';
if (containerStyle) {
Object.keys(containerStyle).forEach(function (key) { return container.style[key] = containerStyle[key]; });
}
container.className = containerClassName;
container.style.position = 'absolute';
container.style.top = '0';
container.style.left = '0';
return container;
};
Popover.prototype.getLocationForPosition = function (position, newTargetRect, popoverRect) {
var _a = this.props, padding = _a.padding, align = _a.align;
var targetMidX = newTargetRect.left + (newTargetRect.width / 2);
var targetMidY = newTargetRect.top + (newTargetRect.height / 2);
var top;
var left;
switch (position) {
case 'top':
top = newTargetRect.top - popoverRect.height - padding;
left = targetMidX - (popoverRect.width / 2);
if (align === 'start') {
left = newTargetRect.left;
}
if (align === 'end') {
left = newTargetRect.right - popoverRect.width;
}
break;
case 'left':
top = targetMidY - (popoverRect.height / 2);
left = newTargetRect.left - padding - popoverRect.width;
if (align === 'start') {
top = newTargetRect.top;
}
if (align === 'end') {
top = newTargetRect.bottom - popoverRect.height;
}
break;
case 'bottom':
top = newTargetRect.bottom + padding;
left = targetMidX - (popoverRect.width / 2);
if (align === 'start') {
left = newTargetRect.left;
}
if (align === 'end') {
left = newTargetRect.right - popoverRect.width;
}
break;
case 'right':
top = targetMidY - (popoverRect.height / 2);
left = newTargetRect.right + padding;
if (align === 'start') {
top = newTargetRect.top;
}
if (align === 'end') {
top = newTargetRect.bottom - popoverRect.height;
}
break;
}
return { top: top, left: left };
};
Popover.prototype.targetPositionHasChanged = function (oldTargetRect, newTargetRect) {
return oldTargetRect === null
|| oldTargetRect.left !== newTargetRect.left
|| oldTargetRect.top !== newTargetRect.top
|| oldTargetRect.width !== newTargetRect.width
|| oldTargetRect.height !== newTargetRect.height;
};
Popover.defaultProps = {
padding: util_1.Constants.DEFAULT_PADDING,
windowBorderPadding: util_1.Constants.DEFAULT_WINDOW_PADDING,
position: ['top', 'right', 'left', 'bottom'],
align: 'center',
containerClassName: util_1.Constants.POPOVER_CONTAINER_CLASS_NAME,
};
return Popover;
}(React.Component));
var _default = Popover$2.default = Popover$1;
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .popover-positioner{--popover-border-radius:1rem;--popover-shadow:0 0.2rem 0.4rem 0 #0000000d,0 0 0 1px rgba(var(--background-sc-rgb),0.08);z-index:400}[data-gene-ui-version=\"2.16.5\"] .popover-positioner.cr-smooth-radius{--popover-border-radius:0.4rem}[data-gene-ui-version=\"2.16.5\"] .popover-positioner.mobile-view{--popover-border-radius:0.8rem 0.8rem 0 0;--popover-shadow:0 -1px 0.2rem 0 #0000000d;bottom:0;left:0!important;overflow:hidden;position:fixed!important;top:0!important;width:100%}[data-gene-ui-version=\"2.16.5\"] .popover-positioner .popover-top-bottom-padding{padding:1rem 0;width:100%}[data-gene-ui-version=\"2.16.5\"] .popover-positioner .popover-top-bottom-padding>div[style*=width]{width:100%!important}[data-gene-ui-version=\"2.16.5\"] .popover{width:100%}[data-gene-ui-version=\"2.16.5\"] .popover-positioner.mobile-view .popover{height:100%;position:relative}[data-gene-ui-version=\"2.16.5\"] .popover-content{background:var(--background);border-radius:var(--popover-border-radius);box-shadow:var(--popover-shadow);overflow:hidden;padding:0 0 env(safe-area-inset-bottom);transition:padding .4s;width:100%}[data-gene-ui-version=\"2.16.5\"] .popover-positioner.mobile-view .popover-content{-webkit-overflow-scrolling:auto;bottom:0;left:0;max-height:calc(100% - 10rem);overflow-x:hidden;overflow-y:auto;position:absolute;z-index:1}[data-gene-ui-version=\"2.16.5\"] .popover-positioner.mobile-view[style*=\"opacity: 0\"] .popover-content{transform:translateY(100%)}[data-gene-ui-version=\"2.16.5\"] .popover-positioner.mobile-view .popover-content{transform:translateY(0)}[data-gene-ui-version=\"2.16.5\"] .fullHeight{height:100%}[data-gene-ui-version=\"2.16.5\"] .popover-mobile-backdrop{background:#0003;height:100%;left:0;opacity:1;position:absolute;top:0;width:100%;z-index:0}[data-gene-ui-version=\"2.16.5\"] .popover-footer,[data-gene-ui-version=\"2.16.5\"] .popover-header{background:var(--background);position:-webkit-sticky;position:sticky;z-index:1}[data-gene-ui-version=\"2.16.5\"] .popover-header{border-bottom:1px solid rgba(var(--background-sc-rgb),.1);top:0}[data-gene-ui-version=\"2.16.5\"] .popover-footer{align-items:stretch;border-top:1px solid rgba(var(--background-sc-rgb),.1);bottom:calc(env(safe-area-inset-bottom)*-1);display:flex;padding:0 0 env(safe-area-inset-bottom);transition:padding .4s}[data-gene-ui-version=\"2.16.5\"] .popover-body{position:relative;z-index:0}[data-gene-ui-version=\"2.16.5\"] .popover-search{padding:1.4rem 1.5rem}[data-gene-ui-version=\"2.16.5\"] .empty-data-holder{align-items:center;display:flex;height:19rem;justify-content:center;width:100%}[data-gene-ui-version=\"2.16.5\"] .popover-disabled{opacity:.5;pointer-events:none;transition:opacity .5s}";
styleInject(css_248z);
const setRef = (ref, currentRef) => {
if (!ref) return;
if (typeof ref === 'function') {
ref(currentRef);
} else {
ref.current = currentRef;
}
};
const Popover = /*#__PURE__*/forwardRef((props, ref) => {
const {
extendTargetWidth,
disableReposition,
toggleHandler,
cornerRadius,
screenType,
minHeight,
maxHeight,
className,
children,
position,
disabled,
Content,
padding,
behave,
Header,
Footer,
align,
scrollbarNeeded,
contentRef,
isOpen,
getScrollRef,
swipeable,
onSwipedDown,
scrollbarProps,
fullHeight,
...restProps
} = props;
const id = guid();
const popoverBodyRef = useRef(null);
const [popoverOpened, setPopoverOpened] = useState(false);
const isControlled = ('isOpen' in props);
const popoverState = isControlled ? isOpen : popoverOpened;
const {
isMobile
} = useDeviceType(screenType);
const isToggle = behave === 'toggle';
const [targetWidth, setTargetWidth] = useState(null);
const [swipingPosition, setSwipingPosition] = useState(0);
const [portalContainerRef, updatePortalContainerRef] = useUpdatableRef(null);
const {
geneUIProviderRef
} = useContext(GeneUIDesignSystemContext);
const checkBodyContains = event => popoverBodyRef.current.contains(event.target);
const handleSwiped = event => setSwipingPosition(0);
const handleSwipedDown = touchEvent => {
!checkBodyContains(touchEvent.event) && onSwipedDown(touchEvent);
};
const handleSwiping = useCallback(_ref => {
let {
deltaY,
event
} = _ref;
if (checkBodyContains(event)) {
stopEvent(event);
} else if (deltaY >= 0) {
setSwipingPosition(deltaY * -1);
}
}, [popoverBodyRef, setSwipingPosition]);
const swipeHandlers = useSwipeable(useMemo(() => swipeable ? {
onSwipedDown: handleSwipedDown,
onSwiping: handleSwiping,
onSwiped: handleSwiped
} : {}, [swipeable, handleSwipedDown, handleSwiping, handleSwiped]));
const popoverStateChange = useCallback(event => {
stopEvent(event);
if (isControlled) {
toggleHandler(event, isOpen);
} else {
setPopoverOpened(isPopoverOpened => {
toggleHandler(event, !isPopoverOpened);
return !isPopoverOpened;
});
}
}, [isControlled, toggleHandler, isOpen]);
const handlePopoverStateChange = useCallback(event => {
Children.map(children, child => child.props.onClick && child.props.onClick(event));
popoverStateChange(event);
}, [children, popoverStateChange]);
const setPopoverRef = popoverRef => {
setRef(ref, popoverRef);
const rect = popoverRef && popoverRef.target.getBoundingClientRect();
setTargetWidth(rect && rect.width);
};
const handleClick = useCallback(e => {
if (!disabled) {
popoverState ? isToggle && handlePopoverStateChange(e) : handlePopoverStateChange(e);
}
}, [popoverState, isToggle, disabled, handlePopoverStateChange]);
const generateContentRef = useCallback(element => {
isMobile && getScrollRef(element);
if (contentRef) {
typeof contentRef === 'function' ? contentRef(element) : contentRef.current = element;
}
}, [isMobile, contentRef, getScrollRef]);
const portalContent = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("ul", {
onClick: stopEvent,
ref: generateContentRef,
className: classnames('popover-content', {
fullHeight: fullHeight && isMobile
}),
style: {
bottom: swipingPosition
}
}, Header && /*#__PURE__*/React__default.createElement("li", {
className: "popover-header"
}, Header), /*#__PURE__*/React__default.createElement("li", {
ref: popoverBodyRef,
className: "popover-body"
}, scrollbarNeeded && !isMobile ? /*#__PURE__*/React__default.createElement(CustomScrollbar, _extends({
ref: scrollbar => {
scrollbar && getScrollRef(scrollbar.view);
},
autoHeight: true,
autoHeightMax: maxHeight,
autoHeightMin: minHeight
}, scrollbarProps), Content) : Content), Footer && /*#__PURE__*/React__default.createElement("li", {
className: "popover-footer"
}, Footer)), isMobile && /*#__PURE__*/React__default.createElement("div", {
className: "popover-mobile-backdrop",
onClick: popoverStateChange
}));
const getChild = useCallback((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
key: index,
onClick: e => handleClick(e),
className: classnames(child.props.className, 'cursor-pointer', {
'popover-opened': popoverState,
'popover-disabled': disabled
})
}), [handleClick, popoverState, disabled]);
const childElements = useMemo(() => Children.map(children, getChild), [getChild, children]);
useEffect(() => {
!popoverState && updatePortalContainerRef(null);
}, [popoverState]);
return Content ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(_default, _extends({
contentDestination: geneUIProviderRef.current,
disableReposition: disableReposition,
ref: setPopoverRef,
isOpen: popoverState,
position: position,
align: align,
onClickOutside: handlePopoverStateChange,
containerClassName: classnames("popover-positioner", "cr-".concat(cornerRadius), className, {
'mobile-view': isMobile
}),
transitionDuration: -1,
padding: padding,
content: /*#__PURE__*/React__default.createElement("div", swipeHandlers, /*#__PURE__*/React__default.createElement("div", {
ref: updatePortalContainerRef,
id: id,
style: {
width: extendTargetWidth && !isMobile && targetWidth || null
}
})),
containerStyle: {
overflow: null
}
}, restProps), childElements), portalContainerRef.current && /*#__PURE__*/React__default.createElement(Portal, {
isOpen: true,
container: portalContainerRef.current
}, portalContent)) : childElements;
});
Popover.propTypes = {
/**
* The component that need to be displayed in the Popover. Any valid React node
*/
Content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
/**
* The component that need to be displayed as Popover header. Any valid React node
*/
Header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
/**
* The component that need to be displayed as Popover footer. Any valid React node
*/
Footer: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
/**
* The component which click needs to trigger the Popover to open. Need to passed as child to Popover. Any valid React node
*/
children: PropTypes.node,
/**
* The Popover will get the width of its child. The property will not work when "width" prop is specified
*/
extendTargetWidth: PropTypes.bool,
/**
* The Popover "Content" minimum scroll height
*/
minHeight: PropTypes.number,
/**
* The Popover "Content" maximum scroll height. Will not work when the "screenType" is "mobile"
*/
maxHeight: PropTypes.number,
/**
* Use this prop to control the Popover. Note the component will start not to open and close automatically
*/
isOpen: PropTypes.bool,
/**
* Popover position to be displayed
*/
position: PropTypes.oneOfType([PropTypes.oneOf(popoverConfig.position), PropTypes.arrayOf(PropTypes.oneOf(popoverConfig.position))]),
/**
* Will called each time the popover need to be toggled(child click, close button click, backdrop click).
* (event: Event, isOpen: bool) => void
*/
toggleHandler: PropTypes.func,
/**
* Possible values are start, center, and end.
* If start is specified, the popover content's top or left location is aligned with its target's.
* With end specified, the content's bottom or right location is aligned with its target's.
* If center is specified, the popover content and target's centers are aligned.
*/
align: PropTypes.oneOf(popoverConfig.align),
/**
* If you'd like to apply styles to the single container div that your popover content is rendered within via stylesheets,
* you can specify a custom className for the container here.
*/
className: PropTypes.string,
/**
* This number determines the gap, in pixels, between your target content and your popover content
*/
padding: PropTypes.number,
/**
* If this property is enabled, rather than the popover content repositioning on a boundary collision,
* the popover content container will move beyond the window's bounds.
* You are, however, supplied with nudgedLeft and nudgedTop values, so you may choose to handle content overflow as you wish.
*/
disableReposition: PropTypes.bool,
/**
* Popover corner radius
*/
cornerRadius: PropTypes.oneOf(popoverConfig.cornerRadius),
/**
* The switch between mobile and desktop version of Popover will be applied automatically, when the prop is not specified.
* When the prop is present it must be changed from outside.
*/
screenType: PropTypes.oneOf(screenTypes),
/**
* Specify does Popover needs to be toggled on child click
*/
behave: PropTypes.oneOf(popoverConfig.behave),
/**
* Given content prop can have its own scroll, and with this props we can use/not use default scroll that has popover
*/
scrollbarNeeded: PropTypes.bool,
/**
* Popover content ref
*/
contentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
current: PropTypes.any
})]),
disabled: PropTypes.bool,
getScrollRef: PropTypes.func,
/*
* After DOWN swipe (SwipeEventData) => void
*/
onSwipedDown: PropTypes.func,
/*
* props for scrollbar
*/
scrollbarProps: PropTypes.shape({
...CustomScrollbar.propTypes
}),
/*
* Popup content opens with full height. Mobile only property.
*/
fullHeight: PropTypes.bool,
swipeable: PropTypes.bool
};
Popover.defaultProps = {
cornerRadius: popoverConfig.cornerRadius[0],
position: popoverConfig.position,
align: popoverConfig.align[0],
toggleHandler: noop,
behave: popoverConfig.behave[0],
fullHeight: false,
extendTargetWidth: true,
disableReposition: true,
minHeight: 0,
maxHeight: 510,
padding: 10,
getScrollRef: noop,
scrollbarNeeded: true,
swipeable: false,
onSwipedDown: noop
};
export { Popover as default };