Dashboard sipadu mbip
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

OverlayTrigger.js 7.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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/query/contains"));
  10. var _react = _interopRequireWildcard(require("react"));
  11. var _reactDom = _interopRequireDefault(require("react-dom"));
  12. var _warning = _interopRequireDefault(require("warning"));
  13. var _Overlay = _interopRequireDefault(require("./Overlay"));
  14. var RefHolder =
  15. /*#__PURE__*/
  16. function (_React$Component) {
  17. (0, _inheritsLoose2.default)(RefHolder, _React$Component);
  18. function RefHolder() {
  19. return _React$Component.apply(this, arguments) || this;
  20. }
  21. var _proto = RefHolder.prototype;
  22. _proto.render = function render() {
  23. return this.props.children;
  24. };
  25. return RefHolder;
  26. }(_react.default.Component);
  27. var normalizeDelay = function normalizeDelay(delay) {
  28. return delay && typeof delay === 'object' ? delay : {
  29. show: delay,
  30. hide: delay
  31. };
  32. };
  33. var defaultProps = {
  34. defaultOverlayShown: false,
  35. trigger: ['hover', 'focus']
  36. }; // eslint-disable-next-line react/no-multi-comp
  37. var OverlayTrigger =
  38. /*#__PURE__*/
  39. function (_React$Component2) {
  40. (0, _inheritsLoose2.default)(OverlayTrigger, _React$Component2);
  41. function OverlayTrigger(props, context) {
  42. var _this;
  43. _this = _React$Component2.call(this, props, context) || this;
  44. _this.getTarget = function () {
  45. return _reactDom.default.findDOMNode(_this.trigger.current);
  46. };
  47. _this.handleShow = function () {
  48. clearTimeout(_this._timeout);
  49. _this._hoverState = 'show';
  50. var delay = normalizeDelay(_this.props.delay);
  51. if (!delay.show) {
  52. _this.show();
  53. return;
  54. }
  55. _this._timeout = setTimeout(function () {
  56. if (_this._hoverState === 'show') _this.show();
  57. }, delay.show);
  58. };
  59. _this.handleHide = function () {
  60. clearTimeout(_this._timeout);
  61. _this._hoverState = 'hide';
  62. var delay = normalizeDelay(_this.props.delay);
  63. if (!delay.hide) {
  64. _this.hide();
  65. return;
  66. }
  67. _this._timeout = setTimeout(function () {
  68. if (_this._hoverState === 'hide') _this.hide();
  69. }, delay.hide);
  70. };
  71. _this.handleFocus = function (e) {
  72. var _this$getChildProps = _this.getChildProps(),
  73. onFocus = _this$getChildProps.onFocus;
  74. _this.handleShow(e);
  75. if (onFocus) onFocus(e);
  76. };
  77. _this.handleBlur = function (e) {
  78. var _this$getChildProps2 = _this.getChildProps(),
  79. onBlur = _this$getChildProps2.onBlur;
  80. _this.handleHide(e);
  81. if (onBlur) onBlur(e);
  82. };
  83. _this.handleClick = function (e) {
  84. var _this$getChildProps3 = _this.getChildProps(),
  85. onClick = _this$getChildProps3.onClick;
  86. if (_this.state.show) _this.hide();else _this.show();
  87. if (onClick) onClick(e);
  88. };
  89. _this.handleMouseOver = function (e) {
  90. _this.handleMouseOverOut(_this.handleShow, e, 'fromElement');
  91. };
  92. _this.handleMouseOut = function (e) {
  93. return _this.handleMouseOverOut(_this.handleHide, e, 'toElement');
  94. };
  95. _this.trigger = _react.default.createRef();
  96. _this.state = {
  97. show: !!props.defaultShow
  98. }; // We add aria-describedby in the case where the overlay is a role="tooltip"
  99. // for other cases describedby isn't appropriate (e.g. a popover with inputs) so we don't add it.
  100. _this.ariaModifier = {
  101. enabled: true,
  102. order: 900,
  103. fn: function fn(data) {
  104. var popper = data.instance.popper;
  105. var target = _this.getTarget();
  106. if (!_this.state.show || !target) return data;
  107. var role = popper.getAttribute('role') || '';
  108. if (popper.id && role.toLowerCase() === 'tooltip') {
  109. target.setAttribute('aria-describedby', popper.id);
  110. }
  111. return data;
  112. }
  113. };
  114. return _this;
  115. }
  116. var _proto2 = OverlayTrigger.prototype;
  117. _proto2.componentWillUnmount = function componentWillUnmount() {
  118. clearTimeout(this._timeout);
  119. };
  120. _proto2.getChildProps = function getChildProps() {
  121. return _react.default.Children.only(this.props.children).props;
  122. };
  123. // Simple implementation of mouseEnter and mouseLeave.
  124. // React's built version is broken: https://github.com/facebook/react/issues/4251
  125. // for cases when the trigger is disabled and mouseOut/Over can cause flicker
  126. // moving from one child element to another.
  127. _proto2.handleMouseOverOut = function handleMouseOverOut(handler, e, relatedNative) {
  128. var target = e.currentTarget;
  129. var related = e.relatedTarget || e.nativeEvent[relatedNative];
  130. if ((!related || related !== target) && !(0, _contains.default)(target, related)) {
  131. handler(e);
  132. }
  133. };
  134. _proto2.hide = function hide() {
  135. this.setState({
  136. show: false
  137. });
  138. };
  139. _proto2.show = function show() {
  140. this.setState({
  141. show: true
  142. });
  143. };
  144. _proto2.render = function render() {
  145. var _this$props = this.props,
  146. trigger = _this$props.trigger,
  147. overlay = _this$props.overlay,
  148. children = _this$props.children,
  149. _this$props$popperCon = _this$props.popperConfig,
  150. popperConfig = _this$props$popperCon === void 0 ? {} : _this$props$popperCon,
  151. props = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["trigger", "overlay", "children", "popperConfig"]);
  152. delete props.delay;
  153. delete props.defaultShow;
  154. var child = _react.default.Children.only(children);
  155. var triggerProps = {};
  156. var triggers = trigger == null ? [] : [].concat(trigger);
  157. if (triggers.indexOf('click') !== -1) {
  158. triggerProps.onClick = this.handleClick;
  159. }
  160. if (triggers.indexOf('focus') !== -1) {
  161. triggerProps.onFocus = this.handleShow;
  162. triggerProps.onBlur = this.handleHide;
  163. }
  164. if (triggers.indexOf('hover') !== -1) {
  165. 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;
  166. triggerProps.onMouseOver = this.handleMouseOver;
  167. triggerProps.onMouseOut = this.handleMouseOut;
  168. }
  169. return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(RefHolder, {
  170. ref: this.trigger
  171. }, (0, _react.cloneElement)(child, triggerProps)), _react.default.createElement(_Overlay.default, (0, _extends2.default)({}, props, {
  172. popperConfig: (0, _extends2.default)({}, popperConfig, {
  173. modifiers: (0, _extends2.default)({}, popperConfig.modifiers, {
  174. ariaModifier: this.ariaModifier
  175. })
  176. }),
  177. show: this.state.show,
  178. onHide: this.handleHide,
  179. target: this.getTarget
  180. }), overlay));
  181. };
  182. return OverlayTrigger;
  183. }(_react.default.Component);
  184. OverlayTrigger.defaultProps = defaultProps;
  185. var _default = OverlayTrigger;
  186. exports.default = _default;
  187. module.exports = exports["default"];