import _extends from "@babel/runtime/helpers/esm/extends"; import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized"; import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose"; import React from 'react'; import PropTypes from 'prop-types'; import PopperContent from './PopperContent'; import { getTarget, targetPropType, omit, PopperPlacements, mapToCssModules, DOMElement } from './utils'; export var propTypes = { children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), placement: PropTypes.oneOf(PopperPlacements), target: targetPropType.isRequired, container: targetPropType, isOpen: PropTypes.bool, disabled: PropTypes.bool, hideArrow: PropTypes.bool, boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]), className: PropTypes.string, innerClassName: PropTypes.string, arrowClassName: PropTypes.string, popperClassName: PropTypes.string, cssModule: PropTypes.object, toggle: PropTypes.func, autohide: PropTypes.bool, placementPrefix: PropTypes.string, delay: PropTypes.oneOfType([PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }), PropTypes.number]), modifiers: PropTypes.object, positionFixed: PropTypes.bool, offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]), trigger: PropTypes.string, fade: PropTypes.bool, flip: PropTypes.bool }; var DEFAULT_DELAYS = { show: 0, hide: 50 }; var defaultProps = { isOpen: false, hideArrow: false, autohide: false, delay: DEFAULT_DELAYS, toggle: function toggle() {}, trigger: 'click', fade: true }; function isInDOMSubtree(element, subtreeRoot) { return subtreeRoot && (element === subtreeRoot || subtreeRoot.contains(element)); } function isInDOMSubtrees(element, subtreeRoots) { if (subtreeRoots === void 0) { subtreeRoots = []; } return subtreeRoots && subtreeRoots.length && subtreeRoots.filter(function (subTreeRoot) { return isInDOMSubtree(element, subTreeRoot); })[0]; } var TooltipPopoverWrapper = /*#__PURE__*/function (_React$Component) { _inheritsLoose(TooltipPopoverWrapper, _React$Component); function TooltipPopoverWrapper(props) { var _this; _this = _React$Component.call(this, props) || this; _this._targets = []; _this.currentTargetElement = null; _this.addTargetEvents = _this.addTargetEvents.bind(_assertThisInitialized(_this)); _this.handleDocumentClick = _this.handleDocumentClick.bind(_assertThisInitialized(_this)); _this.removeTargetEvents = _this.removeTargetEvents.bind(_assertThisInitialized(_this)); _this.toggle = _this.toggle.bind(_assertThisInitialized(_this)); _this.showWithDelay = _this.showWithDelay.bind(_assertThisInitialized(_this)); _this.hideWithDelay = _this.hideWithDelay.bind(_assertThisInitialized(_this)); _this.onMouseOverTooltipContent = _this.onMouseOverTooltipContent.bind(_assertThisInitialized(_this)); _this.onMouseLeaveTooltipContent = _this.onMouseLeaveTooltipContent.bind(_assertThisInitialized(_this)); _this.show = _this.show.bind(_assertThisInitialized(_this)); _this.hide = _this.hide.bind(_assertThisInitialized(_this)); _this.onEscKeyDown = _this.onEscKeyDown.bind(_assertThisInitialized(_this)); _this.getRef = _this.getRef.bind(_assertThisInitialized(_this)); _this.state = { isOpen: props.isOpen }; _this._isMounted = false; return _this; } var _proto = TooltipPopoverWrapper.prototype; _proto.componentDidMount = function componentDidMount() { this._isMounted = true; this.updateTarget(); }; _proto.componentWillUnmount = function componentWillUnmount() { this._isMounted = false; this.removeTargetEvents(); this._targets = null; this.clearShowTimeout(); this.clearHideTimeout(); }; TooltipPopoverWrapper.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) { if (props.isOpen && !state.isOpen) { return { isOpen: props.isOpen }; } else return null; }; _proto.onMouseOverTooltipContent = function onMouseOverTooltipContent() { if (this.props.trigger.indexOf('hover') > -1 && !this.props.autohide) { if (this._hideTimeout) { this.clearHideTimeout(); } if (this.state.isOpen && !this.props.isOpen) { this.toggle(); } } }; _proto.onMouseLeaveTooltipContent = function onMouseLeaveTooltipContent(e) { if (this.props.trigger.indexOf('hover') > -1 && !this.props.autohide) { if (this._showTimeout) { this.clearShowTimeout(); } e.persist(); this._hideTimeout = setTimeout(this.hide.bind(this, e), this.getDelay('hide')); } }; _proto.onEscKeyDown = function onEscKeyDown(e) { if (e.key === 'Escape') { this.hide(e); } }; _proto.getRef = function getRef(ref) { var innerRef = this.props.innerRef; if (innerRef) { if (typeof innerRef === 'function') { innerRef(ref); } else if (typeof innerRef === 'object') { innerRef.current = ref; } } this._popover = ref; }; _proto.getDelay = function getDelay(key) { var delay = this.props.delay; if (typeof delay === 'object') { return isNaN(delay[key]) ? DEFAULT_DELAYS[key] : delay[key]; } return delay; }; _proto.getCurrentTarget = function getCurrentTarget(target) { if (!target) return null; var index = this._targets.indexOf(target); if (index >= 0) return this._targets[index]; return this.getCurrentTarget(target.parentElement); }; _proto.show = function show(e) { if (!this.props.isOpen) { this.clearShowTimeout(); this.currentTargetElement = e ? e.currentTarget || this.getCurrentTarget(e.target) : null; if (e && e.composedPath && typeof e.composedPath === 'function') { var path = e.composedPath(); this.currentTargetElement = path && path[0] || this.currentTargetElement; } this.toggle(e); } }; _proto.showWithDelay = function showWithDelay(e) { if (this._hideTimeout) { this.clearHideTimeout(); } this._showTimeout = setTimeout(this.show.bind(this, e), this.getDelay('show')); }; _proto.hide = function hide(e) { if (this.props.isOpen) { this.clearHideTimeout(); this.currentTargetElement = null; this.toggle(e); } }; _proto.hideWithDelay = function hideWithDelay(e) { if (this._showTimeout) { this.clearShowTimeout(); } this._hideTimeout = setTimeout(this.hide.bind(this, e), this.getDelay('hide')); }; _proto.clearShowTimeout = function clearShowTimeout() { clearTimeout(this._showTimeout); this._showTimeout = undefined; }; _proto.clearHideTimeout = function clearHideTimeout() { clearTimeout(this._hideTimeout); this._hideTimeout = undefined; }; _proto.handleDocumentClick = function handleDocumentClick(e) { var triggers = this.props.trigger.split(' '); if (triggers.indexOf('legacy') > -1 && (this.props.isOpen || isInDOMSubtrees(e.target, this._targets))) { if (this._hideTimeout) { this.clearHideTimeout(); } if (this.props.isOpen && !isInDOMSubtree(e.target, this._popover)) { this.hideWithDelay(e); } else if (!this.props.isOpen) { this.showWithDelay(e); } } else if (triggers.indexOf('click') > -1 && isInDOMSubtrees(e.target, this._targets)) { if (this._hideTimeout) { this.clearHideTimeout(); } if (!this.props.isOpen) { this.showWithDelay(e); } else { this.hideWithDelay(e); } } }; _proto.addEventOnTargets = function addEventOnTargets(type, handler, isBubble) { this._targets.forEach(function (target) { target.addEventListener(type, handler, isBubble); }); }; _proto.removeEventOnTargets = function removeEventOnTargets(type, handler, isBubble) { this._targets.forEach(function (target) { target.removeEventListener(type, handler, isBubble); }); }; _proto.addTargetEvents = function addTargetEvents() { if (this.props.trigger) { var triggers = this.props.trigger.split(' '); if (triggers.indexOf('manual') === -1) { if (triggers.indexOf('click') > -1 || triggers.indexOf('legacy') > -1) { document.addEventListener('click', this.handleDocumentClick, true); } if (this._targets && this._targets.length) { if (triggers.indexOf('hover') > -1) { this.addEventOnTargets('mouseover', this.showWithDelay, true); this.addEventOnTargets('mouseout', this.hideWithDelay, true); } if (triggers.indexOf('focus') > -1) { this.addEventOnTargets('focusin', this.show, true); this.addEventOnTargets('focusout', this.hide, true); } this.addEventOnTargets('keydown', this.onEscKeyDown, true); } } } }; _proto.removeTargetEvents = function removeTargetEvents() { if (this._targets) { this.removeEventOnTargets('mouseover', this.showWithDelay, true); this.removeEventOnTargets('mouseout', this.hideWithDelay, true); this.removeEventOnTargets('keydown', this.onEscKeyDown, true); this.removeEventOnTargets('focusin', this.show, true); this.removeEventOnTargets('focusout', this.hide, true); } document.removeEventListener('click', this.handleDocumentClick, true); }; _proto.updateTarget = function updateTarget() { var newTarget = getTarget(this.props.target, true); if (newTarget !== this._targets) { this.removeTargetEvents(); this._targets = newTarget ? Array.from(newTarget) : []; this.currentTargetElement = this.currentTargetElement || this._targets[0]; this.addTargetEvents(); } }; _proto.toggle = function toggle(e) { if (this.props.disabled || !this._isMounted) { return e && e.preventDefault(); } return this.props.toggle(e); }; _proto.render = function render() { var _this2 = this; if (this.props.isOpen) { this.updateTarget(); } var target = this.currentTargetElement || this._targets[0]; if (!target) { return null; } var _this$props = this.props, className = _this$props.className, cssModule = _this$props.cssModule, innerClassName = _this$props.innerClassName, isOpen = _this$props.isOpen, hideArrow = _this$props.hideArrow, boundariesElement = _this$props.boundariesElement, placement = _this$props.placement, placementPrefix = _this$props.placementPrefix, arrowClassName = _this$props.arrowClassName, popperClassName = _this$props.popperClassName, container = _this$props.container, modifiers = _this$props.modifiers, positionFixed = _this$props.positionFixed, offset = _this$props.offset, fade = _this$props.fade, flip = _this$props.flip, children = _this$props.children; var attributes = omit(this.props, Object.keys(propTypes)); var popperClasses = mapToCssModules(popperClassName, cssModule); var classes = mapToCssModules(innerClassName, cssModule); return /*#__PURE__*/React.createElement(PopperContent, { className: className, target: target, isOpen: isOpen, hideArrow: hideArrow, boundariesElement: boundariesElement, placement: placement, placementPrefix: placementPrefix, arrowClassName: arrowClassName, popperClassName: popperClasses, container: container, modifiers: modifiers, positionFixed: positionFixed, offset: offset, cssModule: cssModule, fade: fade, flip: flip }, function (_ref) { var scheduleUpdate = _ref.scheduleUpdate; return /*#__PURE__*/React.createElement("div", _extends({}, attributes, { ref: _this2.getRef, className: classes, role: "tooltip", onMouseOver: _this2.onMouseOverTooltipContent, onMouseLeave: _this2.onMouseLeaveTooltipContent, onKeyDown: _this2.onEscKeyDown }), typeof children === 'function' ? children({ scheduleUpdate: scheduleUpdate }) : children); }); }; return TooltipPopoverWrapper; }(React.Component); TooltipPopoverWrapper.propTypes = propTypes; TooltipPopoverWrapper.defaultProps = defaultProps; export default TooltipPopoverWrapper;