import _extends from "@babel/runtime/helpers/esm/extends"; import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose"; var _excluded = ["trigger", "overlay", "children", "popperConfig", "show", "defaultShow", "onToggle", "delay", "placement", "flip"]; import contains from 'dom-helpers/contains'; import React, { cloneElement, useCallback, useRef } from 'react'; import useTimeout from '@restart/hooks/useTimeout'; import safeFindDOMNode from 'react-overlays/safeFindDOMNode'; import warning from 'warning'; import { useUncontrolledProp } from 'uncontrollable'; import Overlay from './Overlay'; var RefHolder = /*#__PURE__*/function (_React$Component) { _inheritsLoose(RefHolder, _React$Component); function RefHolder() { return _React$Component.apply(this, arguments) || this; } var _proto = RefHolder.prototype; _proto.render = function render() { return this.props.children; }; return RefHolder; }(React.Component); function normalizeDelay(delay) { return delay && typeof delay === 'object' ? delay : { show: delay, hide: delay }; } // Simple implementation of mouseEnter and mouseLeave. // React's built version is broken: https://github.com/facebook/react/issues/4251 // for cases when the trigger is disabled and mouseOut/Over can cause flicker // moving from one child element to another. function handleMouseOverOut( // eslint-disable-next-line @typescript-eslint/no-shadow handler, args, relatedNative) { var e = args[0]; var target = e.currentTarget; var related = e.relatedTarget || e.nativeEvent[relatedNative]; if ((!related || related !== target) && !contains(target, related)) { handler.apply(void 0, args); } } var defaultProps = { defaultShow: false, trigger: ['hover', 'focus'] }; function OverlayTrigger(_ref) { var trigger = _ref.trigger, overlay = _ref.overlay, children = _ref.children, _ref$popperConfig = _ref.popperConfig, popperConfig = _ref$popperConfig === void 0 ? {} : _ref$popperConfig, propsShow = _ref.show, _ref$defaultShow = _ref.defaultShow, defaultShow = _ref$defaultShow === void 0 ? false : _ref$defaultShow, onToggle = _ref.onToggle, propsDelay = _ref.delay, placement = _ref.placement, _ref$flip = _ref.flip, flip = _ref$flip === void 0 ? placement && placement.indexOf('auto') !== -1 : _ref$flip, props = _objectWithoutPropertiesLoose(_ref, _excluded); var triggerNodeRef = useRef(null); var timeout = useTimeout(); var hoverStateRef = useRef(''); var _useUncontrolledProp = useUncontrolledProp(propsShow, defaultShow, onToggle), show = _useUncontrolledProp[0], setShow = _useUncontrolledProp[1]; var delay = normalizeDelay(propsDelay); var _ref2 = typeof children !== 'function' ? React.Children.only(children).props : {}, onFocus = _ref2.onFocus, onBlur = _ref2.onBlur, onClick = _ref2.onClick; var getTarget = useCallback(function () { return safeFindDOMNode(triggerNodeRef.current); }, []); var handleShow = useCallback(function () { timeout.clear(); hoverStateRef.current = 'show'; if (!delay.show) { setShow(true); return; } timeout.set(function () { if (hoverStateRef.current === 'show') setShow(true); }, delay.show); }, [delay.show, setShow, timeout]); var handleHide = useCallback(function () { timeout.clear(); hoverStateRef.current = 'hide'; if (!delay.hide) { setShow(false); return; } timeout.set(function () { if (hoverStateRef.current === 'hide') setShow(false); }, delay.hide); }, [delay.hide, setShow, timeout]); var handleFocus = useCallback(function () { handleShow(); for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } onFocus == null ? void 0 : onFocus.apply(void 0, args); }, [handleShow, onFocus]); var handleBlur = useCallback(function () { handleHide(); for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { args[_key2] = arguments[_key2]; } onBlur == null ? void 0 : onBlur.apply(void 0, args); }, [handleHide, onBlur]); var handleClick = useCallback(function () { setShow(!show); if (onClick) onClick.apply(void 0, arguments); }, [onClick, setShow, show]); var handleMouseOver = useCallback(function () { for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { args[_key3] = arguments[_key3]; } handleMouseOverOut(handleShow, args, 'fromElement'); }, [handleShow]); var handleMouseOut = useCallback(function () { for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { args[_key4] = arguments[_key4]; } handleMouseOverOut(handleHide, args, 'toElement'); }, [handleHide]); var triggers = trigger == null ? [] : [].concat(trigger); var triggerProps = {}; if (triggers.indexOf('click') !== -1) { triggerProps.onClick = handleClick; } if (triggers.indexOf('focus') !== -1) { triggerProps.onFocus = handleFocus; triggerProps.onBlur = handleBlur; } if (triggers.indexOf('hover') !== -1) { process.env.NODE_ENV !== "production" ? warning(triggers.length > 1, '[react-bootstrap] Specifying only the `"hover"` trigger limits the visibility of the overlay to just mouse users. Consider also including the `"focus"` trigger so that touch and keyboard only users can see the overlay as well.') : void 0; triggerProps.onMouseOver = handleMouseOver; triggerProps.onMouseOut = handleMouseOut; } return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children(_extends({}, triggerProps, { ref: triggerNodeRef })) : /*#__PURE__*/React.createElement(RefHolder, { ref: triggerNodeRef }, /*#__PURE__*/cloneElement(children, triggerProps)), /*#__PURE__*/React.createElement(Overlay, _extends({}, props, { show: show, onHide: handleHide, flip: flip, placement: placement, popperConfig: popperConfig, target: getTarget }), overlay)); } OverlayTrigger.defaultProps = defaultProps; export default OverlayTrigger;