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 11KB

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