You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

206 lines
6.9 KiB

  1. "use strict";
  2. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  4. exports.__esModule = true;
  5. exports.default = void 0;
  6. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  7. var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
  8. var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
  9. var _contains = _interopRequireDefault(require("dom-helpers/contains"));
  10. var _react = _interopRequireWildcard(require("react"));
  11. var _useTimeout = _interopRequireDefault(require("@restart/hooks/useTimeout"));
  12. var _safeFindDOMNode = _interopRequireDefault(require("react-overlays/safeFindDOMNode"));
  13. var _warning = _interopRequireDefault(require("warning"));
  14. var _Overlay = _interopRequireDefault(require("./Overlay"));
  15. var RefHolder = /*#__PURE__*/function (_React$Component) {
  16. (0, _inheritsLoose2.default)(RefHolder, _React$Component);
  17. function RefHolder() {
  18. return _React$Component.apply(this, arguments) || this;
  19. }
  20. var _proto = RefHolder.prototype;
  21. _proto.render = function render() {
  22. return this.props.children;
  23. };
  24. return RefHolder;
  25. }(_react.default.Component);
  26. function normalizeDelay(delay) {
  27. return delay && typeof delay === 'object' ? delay : {
  28. show: delay,
  29. hide: delay
  30. };
  31. } // Simple implementation of mouseEnter and mouseLeave.
  32. // React's built version is broken: https://github.com/facebook/react/issues/4251
  33. // for cases when the trigger is disabled and mouseOut/Over can cause flicker
  34. // moving from one child element to another.
  35. function handleMouseOverOut(handler, e, relatedNative) {
  36. var target = e.currentTarget;
  37. var related = e.relatedTarget || e.nativeEvent[relatedNative];
  38. if ((!related || related !== target) && !(0, _contains.default)(target, related)) {
  39. handler(e);
  40. }
  41. }
  42. var defaultProps = {
  43. defaultShow: false,
  44. trigger: ['hover', 'focus']
  45. };
  46. function OverlayTrigger(_ref) {
  47. var trigger = _ref.trigger,
  48. overlay = _ref.overlay,
  49. children = _ref.children,
  50. _ref$popperConfig = _ref.popperConfig,
  51. popperConfig = _ref$popperConfig === void 0 ? {} : _ref$popperConfig,
  52. defaultShow = _ref.defaultShow,
  53. propsDelay = _ref.delay,
  54. placement = _ref.placement,
  55. _ref$flip = _ref.flip,
  56. flip = _ref$flip === void 0 ? placement && placement.indexOf('auto') !== -1 : _ref$flip,
  57. props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["trigger", "overlay", "children", "popperConfig", "defaultShow", "delay", "placement", "flip"]);
  58. var triggerNodeRef = (0, _react.useRef)(null);
  59. var timeout = (0, _useTimeout.default)();
  60. var hoverStateRef = (0, _react.useRef)();
  61. var _useState = (0, _react.useState)(!!defaultShow),
  62. show = _useState[0],
  63. setShow = _useState[1];
  64. var delay = normalizeDelay(propsDelay);
  65. var child = _react.default.Children.only(children);
  66. var _child$props = child.props,
  67. onFocus = _child$props.onFocus,
  68. onBlur = _child$props.onBlur,
  69. onClick = _child$props.onClick;
  70. var getTarget = (0, _react.useCallback)(function () {
  71. return (0, _safeFindDOMNode.default)(triggerNodeRef.current);
  72. }, []);
  73. var handleShow = (0, _react.useCallback)(function () {
  74. timeout.clear();
  75. hoverStateRef.current = 'show';
  76. if (!delay.show) {
  77. setShow(true);
  78. return;
  79. }
  80. timeout.set(function () {
  81. if (hoverStateRef.current === 'show') setShow(true);
  82. }, delay.show);
  83. }, [delay.show, timeout]);
  84. var handleHide = (0, _react.useCallback)(function () {
  85. timeout.clear();
  86. hoverStateRef.current = 'hide';
  87. if (!delay.hide) {
  88. setShow(false);
  89. return;
  90. }
  91. timeout.set(function () {
  92. if (hoverStateRef.current === 'hide') setShow(false);
  93. }, delay.hide);
  94. }, [delay.hide, timeout]);
  95. var handleFocus = (0, _react.useCallback)(function (e) {
  96. handleShow(e);
  97. if (onFocus) onFocus(e);
  98. }, [handleShow, onFocus]);
  99. var handleBlur = (0, _react.useCallback)(function (e) {
  100. handleHide(e);
  101. if (onBlur) onBlur(e);
  102. }, [handleHide, onBlur]);
  103. var handleClick = (0, _react.useCallback)(function (e) {
  104. setShow(function (prevShow) {
  105. return !prevShow;
  106. });
  107. if (onClick) onClick(e);
  108. }, [onClick]);
  109. var handleMouseOver = (0, _react.useCallback)(function (e) {
  110. handleMouseOverOut(handleShow, e, 'fromElement');
  111. }, [handleShow]);
  112. var handleMouseOut = (0, _react.useCallback)(function (e) {
  113. handleMouseOverOut(handleHide, e, 'toElement');
  114. }, [handleHide]); // We add aria-describedby in the case where the overlay is a role="tooltip"
  115. // for other cases describedby isn't appropriate (e.g. a popover with inputs) so we don't add it.
  116. var ariaModifier = {
  117. name: 'ariaDescribedBy',
  118. enabled: true,
  119. phase: 'afterWrite',
  120. effect: function effect(_ref2) {
  121. var state = _ref2.state;
  122. return function () {
  123. state.elements.reference.removeAttribute('aria-describedby');
  124. };
  125. },
  126. fn: function fn(_ref3) {
  127. var state = _ref3.state;
  128. var _state$elements = state.elements,
  129. popper = _state$elements.popper,
  130. reference = _state$elements.reference;
  131. if (!show || !reference) return;
  132. var role = popper.getAttribute('role') || '';
  133. if (popper.id && role.toLowerCase() === 'tooltip') {
  134. reference.setAttribute('aria-describedby', popper.id);
  135. }
  136. }
  137. };
  138. var triggers = trigger == null ? [] : [].concat(trigger);
  139. var triggerProps = {};
  140. if (triggers.indexOf('click') !== -1) {
  141. triggerProps.onClick = handleClick;
  142. }
  143. if (triggers.indexOf('focus') !== -1) {
  144. triggerProps.onFocus = handleFocus;
  145. triggerProps.onBlur = handleBlur;
  146. }
  147. if (triggers.indexOf('hover') !== -1) {
  148. process.env.NODE_ENV !== "production" ? (0, _warning.default)(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;
  149. triggerProps.onMouseOver = handleMouseOver;
  150. triggerProps.onMouseOut = handleMouseOut;
  151. }
  152. return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(RefHolder, {
  153. ref: triggerNodeRef
  154. }, (0, _react.cloneElement)(child, triggerProps)), /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({}, props, {
  155. popperConfig: (0, _extends2.default)({}, popperConfig, {
  156. modifiers: [ariaModifier].concat(popperConfig.modifiers || [])
  157. }),
  158. show: show,
  159. onHide: handleHide,
  160. target: getTarget,
  161. placement: placement,
  162. flip: flip
  163. }), overlay));
  164. }
  165. OverlayTrigger.defaultProps = defaultProps;
  166. var _default = OverlayTrigger;
  167. exports.default = _default;
  168. module.exports = exports["default"];