suomifi-ui-components/dist/cjs/core/Popover/Popover.js

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var React = require('react');
var ReactDOM = require('react-dom');
var reactPopper = require('react-popper');
var common = require('../../utils/common/common.js');
var HtmlDiv = require('../../reset/HtmlDiv/HtmlDiv.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);

var sameWidth = {
  name: 'sameWidth',
  enabled: true,
  phase: 'beforeWrite',
  requires: ['computeStyles'],
  fn: function fn(_a) {
    var state = _a.state;
    state.styles.popper.width = "".concat(state.rects.reference.width, "px");
  },
  effect: function effect(_a) {
    var state = _a.state;
    state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
  }
};
var defaultProviderValue = {
  updatePopover: function updatePopover() {
    return null;
  }
};
var _a = /*#__PURE__*/React__default.default.createContext(defaultProviderValue),
  PopoverProvider = _a.Provider,
  PopoverConsumer = _a.Consumer;
var Popover = function Popover(props) {
  var _a = props.portalStyleProps,
    portalStyleProps = _a === void 0 ? {} : _a,
    _b = props.placement,
    placement = _b === void 0 ? 'bottom' : _b,
    _c = props.allowFlip,
    allowFlip = _c === void 0 ? false : _c,
    _d = props.matchWidth,
    matchWidth = _d === void 0 ? true : _d,
    children = props.children,
    sourceRef = props.sourceRef,
    onClickOutside = props.onClickOutside,
    _e = props.portal,
    portal = _e === void 0 ? true : _e,
    passProps = tslib.__rest(props, ["portalStyleProps", "placement", "allowFlip", "matchWidth", "children", "sourceRef", "onClickOutside", "portal"]);
  var _f = React.useState(null),
    popperElement = _f[0],
    setPopperElement = _f[1];
  var _g = React.useState(null),
    mountNode = _g[0],
    setMountNode = _g[1];
  var portalRef = React.useRef(null);
  var _h = reactPopper.usePopper(sourceRef.current, popperElement, {
      modifiers: [{
        name: 'flip',
        enabled: allowFlip
      }, matchWidth ? sameWidth : {}],
      placement: placement
    }),
    update = _h.update,
    styles = _h.styles;
  React.useEffect(function () {
    var globalClickHandler = function globalClickHandler(nativeEvent) {
      var _a, _b;
      if (!((_a = portalRef.current) === null || _a === void 0 ? void 0 : _a.contains(nativeEvent.target)) && !((_b = sourceRef === null || sourceRef === void 0 ? void 0 : sourceRef.current) === null || _b === void 0 ? void 0 : _b.contains(nativeEvent.target)) && !!onClickOutside) {
        onClickOutside(nativeEvent);
      }
    };
    document.addEventListener('click', globalClickHandler, {
      capture: true
    });
    return function () {
      document.removeEventListener('click', globalClickHandler, {
        capture: true
      });
    };
  }, [onClickOutside, sourceRef]);
  common.useEnhancedEffect(function () {
    setMountNode(window.document.body);
  });
  if (portal && !mountNode) {
    return null;
  }
  if (portal && mountNode) {
    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/ReactDOM__default.default.createPortal( /*#__PURE__*/React__default.default.createElement("div", {
      className: 'fi-portal',
      ref: setPopperElement,
      style: tslib.__assign(tslib.__assign({}, styles.popper), portalStyleProps),
      tabIndex: -1,
      role: "presentation"
    }, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, tslib.__assign({
      forwardedRef: portalRef
    }, passProps), /*#__PURE__*/React__default.default.createElement(PopoverProvider, {
      value: {
        updatePopover: function updatePopover() {
          return update === null || update === void 0 ? void 0 : update();
        }
      }
    }, children))), mountNode));
  }
  return /*#__PURE__*/React__default.default.createElement("div", {
    ref: setPopperElement,
    style: tslib.__assign(tslib.__assign({}, styles.popper), portalStyleProps),
    tabIndex: -1,
    role: "presentation"
  }, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, tslib.__assign({
    forwardedRef: portalRef
  }, passProps), /*#__PURE__*/React__default.default.createElement(PopoverProvider, {
    value: {
      updatePopover: function updatePopover() {
        return update === null || update === void 0 ? void 0 : update();
      }
    }
  }, children)));
};

exports.Popover = Popover;
exports.PopoverConsumer = PopoverConsumer;
//# sourceMappingURL=Popover.js.map