123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347 |
- "use strict";
-
- exports.__esModule = true;
- exports.default = void 0;
-
- var _propTypes = _interopRequireDefault(require("prop-types"));
-
- var _elementType = _interopRequireDefault(require("prop-types-extra/lib/elementType"));
-
- var _componentOrElement = _interopRequireDefault(require("prop-types-extra/lib/componentOrElement"));
-
- var _react = _interopRequireDefault(require("react"));
-
- var _reactDom = _interopRequireDefault(require("react-dom"));
-
- var _Portal = _interopRequireDefault(require("./Portal"));
-
- var _RootCloseWrapper = _interopRequireDefault(require("./RootCloseWrapper"));
-
- var _reactPopper = require("react-popper");
-
- var _forwardRef = _interopRequireDefault(require("react-context-toolbox/forwardRef"));
-
- var _WaitForContainer = _interopRequireDefault(require("./WaitForContainer"));
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
- 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); }
-
- 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; }
-
- function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
- function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
- /**
- * Built on top of `<Position/>` and `<Portal/>`, the overlay component is
- * great for custom tooltip overlays.
- */
- var Overlay =
- /*#__PURE__*/
- function (_React$Component) {
- _inheritsLoose(Overlay, _React$Component);
-
- function Overlay(props, context) {
- var _this;
-
- _this = _React$Component.call(this, props, context) || this;
-
- _this.handleHidden = function () {
- _this.setState({
- exited: true
- });
-
- if (_this.props.onExited) {
- var _this$props;
-
- (_this$props = _this.props).onExited.apply(_this$props, arguments);
- }
- };
-
- _this.state = {
- exited: !props.show
- };
- _this.onHiddenListener = _this.handleHidden.bind(_assertThisInitialized(_assertThisInitialized(_this)));
- _this._lastTarget = null;
- return _this;
- }
-
- Overlay.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) {
- if (nextProps.show) {
- return {
- exited: false
- };
- } else if (!nextProps.transition) {
- // Otherwise let handleHidden take care of marking exited.
- return {
- exited: true
- };
- }
-
- return null;
- };
-
- var _proto = Overlay.prototype;
-
- _proto.componentDidMount = function componentDidMount() {
- this.setState({
- target: this.getTarget()
- });
- };
-
- _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
- if (this.props === prevProps) return;
- var target = this.getTarget();
-
- if (target !== this.state.target) {
- this.setState({
- target: target
- });
- }
- };
-
- _proto.getTarget = function getTarget() {
- var target = this.props.target;
- target = typeof target === 'function' ? target() : target;
- return target && _reactDom.default.findDOMNode(target) || null;
- };
-
- _proto.render = function render() {
- var _this2 = this;
-
- var _this$props2 = this.props,
- _0 = _this$props2.target,
- container = _this$props2.container,
- containerPadding = _this$props2.containerPadding,
- placement = _this$props2.placement,
- rootClose = _this$props2.rootClose,
- children = _this$props2.children,
- flip = _this$props2.flip,
- _this$props2$popperCo = _this$props2.popperConfig,
- popperConfig = _this$props2$popperCo === void 0 ? {} : _this$props2$popperCo,
- Transition = _this$props2.transition,
- props = _objectWithoutPropertiesLoose(_this$props2, ["target", "container", "containerPadding", "placement", "rootClose", "children", "flip", "popperConfig", "transition"]);
-
- var target = this.state.target; // Don't un-render the overlay while it's transitioning out.
-
- var mountOverlay = props.show || Transition && !this.state.exited;
-
- if (!mountOverlay) {
- // Don't bother showing anything if we don't have to.
- return null;
- }
-
- var child = children;
- var _popperConfig$modifie = popperConfig.modifiers,
- modifiers = _popperConfig$modifie === void 0 ? {} : _popperConfig$modifie;
-
- var popperProps = _extends({}, popperConfig, {
- placement: placement,
- referenceElement: target,
- enableEvents: props.show,
- modifiers: _extends({}, modifiers, {
- preventOverflow: _extends({
- padding: containerPadding || 5
- }, modifiers.preventOverflow),
- flip: _extends({
- enabled: !!flip
- }, modifiers.preventOverflow)
- })
- });
-
- child = _react.default.createElement(_reactPopper.Popper, popperProps, function (_ref) {
- var arrowProps = _ref.arrowProps,
- style = _ref.style,
- ref = _ref.ref,
- popper = _objectWithoutPropertiesLoose(_ref, ["arrowProps", "style", "ref"]);
-
- _this2.popper = popper;
-
- var innerChild = _this2.props.children(_extends({}, popper, {
- // popper doesn't set the initial placement
- placement: popper.placement || placement,
- show: props.show,
- arrowProps: arrowProps,
- props: {
- ref: ref,
- style: style
- }
- }));
-
- if (Transition) {
- var onExit = props.onExit,
- onExiting = props.onExiting,
- onEnter = props.onEnter,
- onEntering = props.onEntering,
- onEntered = props.onEntered;
- innerChild = _react.default.createElement(Transition, {
- in: props.show,
- appear: true,
- onExit: onExit,
- onExiting: onExiting,
- onExited: _this2.onHiddenListener,
- onEnter: onEnter,
- onEntering: onEntering,
- onEntered: onEntered
- }, innerChild);
- }
-
- return innerChild;
- });
-
- if (rootClose) {
- child = _react.default.createElement(_RootCloseWrapper.default, {
- onRootClose: props.onHide,
- event: props.rootCloseEvent,
- disabled: props.rootCloseDisabled
- }, child);
- }
-
- return _react.default.createElement(_Portal.default, {
- container: container
- }, child);
- };
-
- return Overlay;
- }(_react.default.Component);
-
- Overlay.propTypes = _extends({}, _Portal.default.propTypes, {
- /**
- * Set the visibility of the Overlay
- */
- show: _propTypes.default.bool,
-
- /** Specify where the overlay element is positioned in relation to the target element */
- placement: _propTypes.default.oneOf(_reactPopper.placements),
-
- /**
- * A Node, Component instance, or function that returns either. The `container` will have the Portal children
- * appended to it.
- */
- container: _propTypes.default.oneOfType([_componentOrElement.default, _propTypes.default.func]),
-
- /**
- * Enables the Popper.js `flip` modifier, allowing the Overlay to
- * automatically adjust it's placement in case of overlap with the viewport or toggle.
- * Refer to the [flip docs](https://popper.js.org/popper-documentation.html#modifiers..flip.enabled) for more info
- */
- flip: _propTypes.default.bool,
-
- /**
- * A render prop that returns an element to overlay and position. See
- * the [react-popper documentation](https://github.com/FezVrasta/react-popper#children) for more info.
- *
- * @type {Function ({
- * show: boolean,
- * placement: Placement,
- * outOfBoundaries: ?boolean,
- * scheduleUpdate: () => void,
- * props: {
- * ref: (?HTMLElement) => void,
- * style: { [string]: string | number },
- * aria-labelledby: ?string
- * },
- * arrowProps: {
- * ref: (?HTMLElement) => void,
- * style: { [string]: string | number },
- * },
- * }) => React.Element}
- */
- children: _propTypes.default.func.isRequired,
-
- /**
- * A set of popper options and props passed directly to react-popper's Popper component.
- */
- popperConfig: _propTypes.default.object,
-
- /**
- * Specify whether the overlay should trigger `onHide` when the user clicks outside the overlay
- */
- rootClose: _propTypes.default.bool,
-
- /**
- * Specify event for toggling overlay
- */
- rootCloseEvent: _RootCloseWrapper.default.propTypes.event,
-
- /**
- * Specify disabled for disable RootCloseWrapper
- */
- rootCloseDisabled: _RootCloseWrapper.default.propTypes.disabled,
-
- /**
- * A Callback fired by the Overlay when it wishes to be hidden.
- *
- * __required__ when `rootClose` is `true`.
- *
- * @type func
- */
- onHide: function onHide(props) {
- var propType = _propTypes.default.func;
-
- if (props.rootClose) {
- propType = propType.isRequired;
- }
-
- for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
-
- return propType.apply(void 0, [props].concat(args));
- },
-
- /**
- * A `react-transition-group@2.0.0` `<Transition/>` component
- * used to animate the overlay as it changes visibility.
- */
- transition: _elementType.default,
-
- /**
- * Callback fired before the Overlay transitions in
- */
- onEnter: _propTypes.default.func,
-
- /**
- * Callback fired as the Overlay begins to transition in
- */
- onEntering: _propTypes.default.func,
-
- /**
- * Callback fired after the Overlay finishes transitioning in
- */
- onEntered: _propTypes.default.func,
-
- /**
- * Callback fired right before the Overlay transitions out
- */
- onExit: _propTypes.default.func,
-
- /**
- * Callback fired as the Overlay begins to transition out
- */
- onExiting: _propTypes.default.func,
-
- /**
- * Callback fired after the Overlay finishes transitioning out
- */
- onExited: _propTypes.default.func
- });
-
- var _default = (0, _forwardRef.default)(function (props, ref) {
- return (// eslint-disable-next-line react/prop-types
- _react.default.createElement(_WaitForContainer.default, {
- container: props.container
- }, function (container) {
- return _react.default.createElement(Overlay, _extends({}, props, {
- ref: ref,
- container: container
- }));
- })
- );
- }, {
- displayName: 'withContainer(Overlay)'
- });
-
- exports.default = _default;
- module.exports = exports.default;
|