Dashboard sipadu mbip
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.

OverlayTrigger.js 6.6KB

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