"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); exports.__esModule = true; exports.default = exports.propTypes = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized")); var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose")); var _react = _interopRequireDefault(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _PopperContent = _interopRequireDefault(require("./PopperContent")); var _utils = require("./utils"); var propTypes = { children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]), placement: _propTypes.default.oneOf(_utils.PopperPlacements), target: _utils.targetPropType.isRequired, container: _utils.targetPropType, isOpen: _propTypes.default.bool, disabled: _propTypes.default.bool, hideArrow: _propTypes.default.bool, boundariesElement: _propTypes.default.oneOfType([_propTypes.default.string, _utils.DOMElement]), className: _propTypes.default.string, innerClassName: _propTypes.default.string, arrowClassName: _propTypes.default.string, popperClassName: _propTypes.default.string, cssModule: _propTypes.default.object, toggle: _propTypes.default.func, autohide: _propTypes.default.bool, placementPrefix: _propTypes.default.string, delay: _propTypes.default.oneOfType([_propTypes.default.shape({ show: _propTypes.default.number, hide: _propTypes.default.number }), _propTypes.default.number]), modifiers: _propTypes.default.object, positionFixed: _propTypes.default.bool, offset: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), innerRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string, _propTypes.default.object]), trigger: _propTypes.default.string, fade: _propTypes.default.bool, flip: _propTypes.default.bool }; exports.propTypes = propTypes; 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) { (0, _inheritsLoose2.default)(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((0, _assertThisInitialized2.default)(_this)); _this.handleDocumentClick = _this.handleDocumentClick.bind((0, _assertThisInitialized2.default)(_this)); _this.removeTargetEvents = _this.removeTargetEvents.bind((0, _assertThisInitialized2.default)(_this)); _this.toggle = _this.toggle.bind((0, _assertThisInitialized2.default)(_this)); _this.showWithDelay = _this.showWithDelay.bind((0, _assertThisInitialized2.default)(_this)); _this.hideWithDelay = _this.hideWithDelay.bind((0, _assertThisInitialized2.default)(_this)); _this.onMouseOverTooltipContent = _this.onMouseOverTooltipContent.bind((0, _assertThisInitialized2.default)(_this)); _this.onMouseLeaveTooltipContent = _this.onMouseLeaveTooltipContent.bind((0, _assertThisInitialized2.default)(_this)); _this.show = _this.show.bind((0, _assertThisInitialized2.default)(_this)); _this.hide = _this.hide.bind((0, _assertThisInitialized2.default)(_this)); _this.onEscKeyDown = _this.onEscKeyDown.bind((0, _assertThisInitialized2.default)(_this)); _this.getRef = _this.getRef.bind((0, _assertThisInitialized2.default)(_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 = (0, _utils.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 = (0, _utils.omit)(this.props, Object.keys(propTypes)); var popperClasses = (0, _utils.mapToCssModules)(popperClassName, cssModule); var classes = (0, _utils.mapToCssModules)(innerClassName, cssModule); return /*#__PURE__*/_react.default.createElement(_PopperContent.default, { 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.default.createElement("div", (0, _extends2.default)({}, 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.default.Component); TooltipPopoverWrapper.propTypes = propTypes; TooltipPopoverWrapper.defaultProps = defaultProps; var _default = TooltipPopoverWrapper; exports.default = _default;