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.

Overlay.js 9.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  2. function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
  3. function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
  4. function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
  5. import PropTypes from 'prop-types';
  6. import elementType from 'prop-types-extra/lib/elementType';
  7. import componentOrElement from 'prop-types-extra/lib/componentOrElement';
  8. import React from 'react';
  9. import ReactDOM from 'react-dom';
  10. import Portal from './Portal';
  11. import RootCloseWrapper from './RootCloseWrapper';
  12. import { Popper, placements } from 'react-popper';
  13. import forwardRef from 'react-context-toolbox/forwardRef';
  14. import WaitForContainer from './WaitForContainer';
  15. /**
  16. * Built on top of `<Position/>` and `<Portal/>`, the overlay component is
  17. * great for custom tooltip overlays.
  18. */
  19. var Overlay =
  20. /*#__PURE__*/
  21. function (_React$Component) {
  22. _inheritsLoose(Overlay, _React$Component);
  23. function Overlay(props, context) {
  24. var _this;
  25. _this = _React$Component.call(this, props, context) || this;
  26. _this.handleHidden = function () {
  27. _this.setState({
  28. exited: true
  29. });
  30. if (_this.props.onExited) {
  31. var _this$props;
  32. (_this$props = _this.props).onExited.apply(_this$props, arguments);
  33. }
  34. };
  35. _this.state = {
  36. exited: !props.show
  37. };
  38. _this.onHiddenListener = _this.handleHidden.bind(_assertThisInitialized(_assertThisInitialized(_this)));
  39. _this._lastTarget = null;
  40. return _this;
  41. }
  42. Overlay.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) {
  43. if (nextProps.show) {
  44. return {
  45. exited: false
  46. };
  47. } else if (!nextProps.transition) {
  48. // Otherwise let handleHidden take care of marking exited.
  49. return {
  50. exited: true
  51. };
  52. }
  53. return null;
  54. };
  55. var _proto = Overlay.prototype;
  56. _proto.componentDidMount = function componentDidMount() {
  57. this.setState({
  58. target: this.getTarget()
  59. });
  60. };
  61. _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
  62. if (this.props === prevProps) return;
  63. var target = this.getTarget();
  64. if (target !== this.state.target) {
  65. this.setState({
  66. target: target
  67. });
  68. }
  69. };
  70. _proto.getTarget = function getTarget() {
  71. var target = this.props.target;
  72. target = typeof target === 'function' ? target() : target;
  73. return target && ReactDOM.findDOMNode(target) || null;
  74. };
  75. _proto.render = function render() {
  76. var _this2 = this;
  77. var _this$props2 = this.props,
  78. _0 = _this$props2.target,
  79. container = _this$props2.container,
  80. containerPadding = _this$props2.containerPadding,
  81. placement = _this$props2.placement,
  82. rootClose = _this$props2.rootClose,
  83. children = _this$props2.children,
  84. flip = _this$props2.flip,
  85. _this$props2$popperCo = _this$props2.popperConfig,
  86. popperConfig = _this$props2$popperCo === void 0 ? {} : _this$props2$popperCo,
  87. Transition = _this$props2.transition,
  88. props = _objectWithoutPropertiesLoose(_this$props2, ["target", "container", "containerPadding", "placement", "rootClose", "children", "flip", "popperConfig", "transition"]);
  89. var target = this.state.target; // Don't un-render the overlay while it's transitioning out.
  90. var mountOverlay = props.show || Transition && !this.state.exited;
  91. if (!mountOverlay) {
  92. // Don't bother showing anything if we don't have to.
  93. return null;
  94. }
  95. var child = children;
  96. var _popperConfig$modifie = popperConfig.modifiers,
  97. modifiers = _popperConfig$modifie === void 0 ? {} : _popperConfig$modifie;
  98. var popperProps = _extends({}, popperConfig, {
  99. placement: placement,
  100. referenceElement: target,
  101. enableEvents: props.show,
  102. modifiers: _extends({}, modifiers, {
  103. preventOverflow: _extends({
  104. padding: containerPadding || 5
  105. }, modifiers.preventOverflow),
  106. flip: _extends({
  107. enabled: !!flip
  108. }, modifiers.preventOverflow)
  109. })
  110. });
  111. child = React.createElement(Popper, popperProps, function (_ref) {
  112. var arrowProps = _ref.arrowProps,
  113. style = _ref.style,
  114. ref = _ref.ref,
  115. popper = _objectWithoutPropertiesLoose(_ref, ["arrowProps", "style", "ref"]);
  116. _this2.popper = popper;
  117. var innerChild = _this2.props.children(_extends({}, popper, {
  118. // popper doesn't set the initial placement
  119. placement: popper.placement || placement,
  120. show: props.show,
  121. arrowProps: arrowProps,
  122. props: {
  123. ref: ref,
  124. style: style
  125. }
  126. }));
  127. if (Transition) {
  128. var onExit = props.onExit,
  129. onExiting = props.onExiting,
  130. onEnter = props.onEnter,
  131. onEntering = props.onEntering,
  132. onEntered = props.onEntered;
  133. innerChild = React.createElement(Transition, {
  134. in: props.show,
  135. appear: true,
  136. onExit: onExit,
  137. onExiting: onExiting,
  138. onExited: _this2.onHiddenListener,
  139. onEnter: onEnter,
  140. onEntering: onEntering,
  141. onEntered: onEntered
  142. }, innerChild);
  143. }
  144. return innerChild;
  145. });
  146. if (rootClose) {
  147. child = React.createElement(RootCloseWrapper, {
  148. onRootClose: props.onHide,
  149. event: props.rootCloseEvent,
  150. disabled: props.rootCloseDisabled
  151. }, child);
  152. }
  153. return React.createElement(Portal, {
  154. container: container
  155. }, child);
  156. };
  157. return Overlay;
  158. }(React.Component);
  159. Overlay.propTypes = _extends({}, Portal.propTypes, {
  160. /**
  161. * Set the visibility of the Overlay
  162. */
  163. show: PropTypes.bool,
  164. /** Specify where the overlay element is positioned in relation to the target element */
  165. placement: PropTypes.oneOf(placements),
  166. /**
  167. * A Node, Component instance, or function that returns either. The `container` will have the Portal children
  168. * appended to it.
  169. */
  170. container: PropTypes.oneOfType([componentOrElement, PropTypes.func]),
  171. /**
  172. * Enables the Popper.js `flip` modifier, allowing the Overlay to
  173. * automatically adjust it's placement in case of overlap with the viewport or toggle.
  174. * Refer to the [flip docs](https://popper.js.org/popper-documentation.html#modifiers..flip.enabled) for more info
  175. */
  176. flip: PropTypes.bool,
  177. /**
  178. * A render prop that returns an element to overlay and position. See
  179. * the [react-popper documentation](https://github.com/FezVrasta/react-popper#children) for more info.
  180. *
  181. * @type {Function ({
  182. * show: boolean,
  183. * placement: Placement,
  184. * outOfBoundaries: ?boolean,
  185. * scheduleUpdate: () => void,
  186. * props: {
  187. * ref: (?HTMLElement) => void,
  188. * style: { [string]: string | number },
  189. * aria-labelledby: ?string
  190. * },
  191. * arrowProps: {
  192. * ref: (?HTMLElement) => void,
  193. * style: { [string]: string | number },
  194. * },
  195. * }) => React.Element}
  196. */
  197. children: PropTypes.func.isRequired,
  198. /**
  199. * A set of popper options and props passed directly to react-popper's Popper component.
  200. */
  201. popperConfig: PropTypes.object,
  202. /**
  203. * Specify whether the overlay should trigger `onHide` when the user clicks outside the overlay
  204. */
  205. rootClose: PropTypes.bool,
  206. /**
  207. * Specify event for toggling overlay
  208. */
  209. rootCloseEvent: RootCloseWrapper.propTypes.event,
  210. /**
  211. * Specify disabled for disable RootCloseWrapper
  212. */
  213. rootCloseDisabled: RootCloseWrapper.propTypes.disabled,
  214. /**
  215. * A Callback fired by the Overlay when it wishes to be hidden.
  216. *
  217. * __required__ when `rootClose` is `true`.
  218. *
  219. * @type func
  220. */
  221. onHide: function onHide(props) {
  222. var propType = PropTypes.func;
  223. if (props.rootClose) {
  224. propType = propType.isRequired;
  225. }
  226. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  227. args[_key - 1] = arguments[_key];
  228. }
  229. return propType.apply(void 0, [props].concat(args));
  230. },
  231. /**
  232. * A `react-transition-group@2.0.0` `<Transition/>` component
  233. * used to animate the overlay as it changes visibility.
  234. */
  235. transition: elementType,
  236. /**
  237. * Callback fired before the Overlay transitions in
  238. */
  239. onEnter: PropTypes.func,
  240. /**
  241. * Callback fired as the Overlay begins to transition in
  242. */
  243. onEntering: PropTypes.func,
  244. /**
  245. * Callback fired after the Overlay finishes transitioning in
  246. */
  247. onEntered: PropTypes.func,
  248. /**
  249. * Callback fired right before the Overlay transitions out
  250. */
  251. onExit: PropTypes.func,
  252. /**
  253. * Callback fired as the Overlay begins to transition out
  254. */
  255. onExiting: PropTypes.func,
  256. /**
  257. * Callback fired after the Overlay finishes transitioning out
  258. */
  259. onExited: PropTypes.func
  260. });
  261. export default forwardRef(function (props, ref) {
  262. return (// eslint-disable-next-line react/prop-types
  263. React.createElement(WaitForContainer, {
  264. container: props.container
  265. }, function (container) {
  266. return React.createElement(Overlay, _extends({}, props, {
  267. ref: ref,
  268. container: container
  269. }));
  270. })
  271. );
  272. }, {
  273. displayName: 'withContainer(Overlay)'
  274. });