ffr-components/es/popover/Popover.js

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
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 _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 chain from 'chain-function';
import classnames from 'classnames';
import Popper from './_Popper';
import React, { Component } from 'react';
import "./style.css";
import "../theme/theme.css";
import { POPPER_PLACEMENTS, defaultPopperModifiers } from './constant';

var Popover =
/*#__PURE__*/
function (_Component) {
  _inherits(Popover, _Component);

  function Popover(props) {
    var _this;

    _classCallCheck(this, Popover);

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

    _this.triggerBody = function () {
      var toggleMenu = _this.props.toggleMenu;

      if (!_this.props.disabled) {
        _this.setState(function (prevState) {
          var expand = !prevState.isExpanded;
          toggleMenu(expand);
          return {
            isExpanded: expand
          };
        });
      }
    };

    _this.handleOutsideClick = function () {
      var toggleMenu = _this.props.toggleMenu;

      if (_this.state.isExpanded) {
        _this.setState({
          isExpanded: false
        }, function () {
          toggleMenu(false);
        });
      }
    };

    _this.state = {
      isExpanded: false
    };
    return _this;
  }

  _createClass(Popover, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          disableEdgeDetection = _this$props.disableEdgeDetection,
          onClickOutside = _this$props.onClickOutside,
          onEscapeKey = _this$props.onEscapeKey,
          disabled = _this$props.disabled,
          noArrow = _this$props.noArrow,
          control = _this$props.control,
          body = _this$props.body,
          className = _this$props.className,
          placement = _this$props.placement,
          popperProps = _this$props.popperProps,
          toggleMenu = _this$props.toggleMenu,
          referenceProps = _this$props.referenceProps,
          suggestUpdate = _this$props.suggestUpdate,
          _this$props$popperMod = _this$props.popperModifiers,
          popperModifiers = _this$props$popperMod === void 0 ? {} : _this$props$popperMod,
          rest = _objectWithoutProperties(_this$props, ["disableEdgeDetection", "onClickOutside", "onEscapeKey", "disabled", "noArrow", "control", "body", "className", "placement", "popperProps", "toggleMenu", "referenceProps", "suggestUpdate", "popperModifiers"]);

      var onClickFunctions = this.triggerBody;

      if (control.props.onClick) {
        onClickFunctions = chain(this.triggerBody, control.props.onClick);
      }

      var referenceComponent = React.cloneElement(control, {
        onClick: onClickFunctions
      });
      var popoverClasses = classnames('fd-popover', className);

      var finalPopModifier = _objectSpread({}, defaultPopperModifiers, {}, popperModifiers);

      return React.createElement("div", _extends({}, rest, {
        className: popoverClasses
      }), React.createElement(Popper, {
        cssBlock: "fd-popover",
        disableEdgeDetection: disableEdgeDetection,
        noArrow: noArrow,
        onClickOutside: chain(this.handleOutsideClick, onClickOutside),
        onEscapeKey: chain(this.handleOutsideClick, onEscapeKey),
        popperPlacement: placement,
        popperProps: popperProps,
        referenceClassName: "fd-popover__control",
        referenceComponent: referenceComponent,
        referenceProps: referenceProps,
        show: this.state.isExpanded && !disabled,
        popperModifiers: finalPopModifier,
        usePortal: true,
        suggestUpdate: true
      }, body));
    }
  }]);

  return Popover;
}(Component);

Popover.POPPER_PLACEMENTS = POPPER_PLACEMENTS;
Popover.defaultProps = {
  onClickOutside: function onClickOutside() {},
  onEscapeKey: function onEscapeKey() {},
  toggleMenu: function toggleMenu() {},
  suggestUpdate: false,
  popperModifiers: defaultPopperModifiers
};
Popover.displayName = 'Popover';
export default Popover;