ffr-components/es/popover/_Popper.js

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import classnames from 'classnames';
import Foco from 'react-foco';
import keycode from 'keycode';
import { modalManager } from 'fundamental-react/utils/modalManager';
import React from 'react';
import ReactDOM from 'react-dom';
import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
import { POPPER_PLACEMENTS, defaultPopperModifiers } from './constant';

var Popper =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Popper, _React$Component);

  function Popper(props) {
    var _this;

    _classCallCheck(this, Popper);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Popper).call(this, props));

    _this.assignRef = function (refFunc) {
      return function (ref) {
        _this.popperRef = ref;
        refFunc(ref);
      };
    };

    _this._handleDocumentKeyDown = function (e) {
      if (modalManager.isTopModal(_assertThisInitialized(_this))) {
        _this.props.onKeyDown(e);

        if (e.keyCode === keycode.codes.esc && _this.props.onEscapeKey) {
          e.stopPropagation();

          _this.props.onEscapeKey();
        }
      }
    };

    _this.popperRef = React.createRef();
    return _this;
  }

  _createClass(Popper, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.show) {
        this._onShow();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (prevProps.show && !this.props.show) {
        this._onHide();
      } else if (!prevProps.show && this.props.show) {
        this._onShow();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.props.show) {
        this._onHide();
      }
    }
  }, {
    key: "_onShow",
    value: function _onShow() {
      var container = ReactDOM.findDOMNode(this) || document.body;
      modalManager.add(this, container);
      document.addEventListener('keydown', this._handleDocumentKeyDown);
    }
  }, {
    key: "_onHide",
    value: function _onHide() {
      modalManager.remove(this);
      document.removeEventListener('keydown', this._handleDocumentKeyDown);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          children = _this$props.children,
          cssBlock = _this$props.cssBlock,
          disableEdgeDetection = _this$props.disableEdgeDetection,
          noArrow = _this$props.noArrow,
          onClickOutside = _this$props.onClickOutside,
          popperClassName = _this$props.popperClassName,
          popperModifiers = _this$props.popperModifiers,
          popperPlacement = _this$props.popperPlacement,
          popperProps = _this$props.popperProps,
          referenceClassName = _this$props.referenceClassName,
          referenceComponent = _this$props.referenceComponent,
          referenceProps = _this$props.referenceProps,
          show = _this$props.show,
          usePortal = _this$props.usePortal,
          suggestUpdate = _this$props.suggestUpdate;
      var flipModifier = disableEdgeDetection ? {
        flip: {
          enabled: false
        }
      } : {};

      var modifiers = _objectSpread({}, popperModifiers, {}, flipModifier);

      var popperClasses = classnames("".concat(cssBlock, "__popper"), popperClassName, _defineProperty({}, "".concat(cssBlock, "__popper--no-arrow"), !!noArrow));
      var popper = React.createElement(ReactPopper, {
        modifiers: modifiers,
        placement: popperPlacement
      }, function (_ref) {
        var ref = _ref.ref,
            style = _ref.style,
            placement = _ref.placement,
            outOfBoundaries = _ref.outOfBoundaries,
            arrowProps = _ref.arrowProps,
            scheduleUpdate = _ref.scheduleUpdate;

        if (!show) {
          return null;
        }

        if (suggestUpdate && placement && placement.indexOf('top') >= 0) {
          scheduleUpdate();
        }

        return React.createElement("div", _extends({}, popperProps, {
          className: popperClasses,
          "data-placement": placement,
          "data-x-out-of-boundaries": !!outOfBoundaries || undefined // eslint-disable-line
          ,
          ref: _this2.assignRef(ref),
          style: style
        }), children, React.createElement("span", {
          className: "".concat(cssBlock, "__arrow"),
          ref: arrowProps.ref,
          style: arrowProps.style
        }));
      });

      if (usePortal) {
        popper = ReactDOM.createPortal(popper, document.querySelector('body'));
      }

      return React.createElement(Manager, null, React.createElement(Foco, {
        component: "div",
        onClickOutside: onClickOutside,
        onFocusOutside: onClickOutside
      }, React.createElement(Reference, null, function (_ref2) {
        var ref = _ref2.ref;
        return React.createElement("div", _extends({}, referenceProps, {
          className: referenceClassName,
          ref: ref
        }), referenceComponent);
      }), popper));
    }
  }]);

  return Popper;
}(React.Component);

Popper.displayName = 'Popper';
Popper.defaultProps = {
  popperModifiers: defaultPopperModifiers,
  popperPlacement: 'bottom-start',
  onClickOutside: function onClickOutside() {},
  onKeyDown: function onKeyDown() {}
};
export default Popper;