ffr-components/es/modal-dialog/QuickPopover.js

Fiori styled UI components

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";
import React from 'react';
import FocusTrap from 'focus-trap-react';
import Button from '../button';
import CircleButton from '../circle-button';
import { isMobile } from '../utils';

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

  function QuickPopover(props) {
    var _this;

    _classCallCheck(this, QuickPopover);

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

    _this.handleOpen = function (e) {
      _this.setState({
        hideButton: 'btn-disappear',
        unmountCnt: '',
        staticButton: '',
        scaleForFocus: ''
      });

      setTimeout(function () {
        _this.resizeHeight();
      }, 200);
      setTimeout(function () {
        _this.setState({
          showContent: 'show-cnt'
        }, function () {
          _this.setState({
            unmountBtn: 'unmount',
            activeFocusTrap: true
          });

          _this.closeButtonRef.current.focus();
        });

        var onOpen = _this.props.onOpen;
        onOpen && onOpen();
      }, 300);
    };

    _this.handleClose = function (e) {
      _this.setState({
        toDialog: '',
        showContent: '',
        unmountBtn: '',
        cntHeight: null
      });

      setTimeout(function () {
        _this.setState({
          hideButton: '',
          unmountCnt: 'unmount',
          staticButton: 'quick-frame__static',
          activeFocusTrap: false
        });

        _this.circleButtonRef.current.focus();

        var onClose = _this.props.onClose;
        onClose && onClose();
      }, 180);
    };

    _this.onFocusCircleButton = function () {
      _this.setState({
        scaleForFocus: 'scale-Focus'
      });
    };

    _this.onBlurCirclrButton = function () {
      _this.setState({
        scaleForFocus: ''
      });
    };

    _this.renderPop = function () {
      var _this$state = _this.state,
          hideButton = _this$state.hideButton,
          toDialog = _this$state.toDialog,
          showContent = _this$state.showContent,
          unmountBtn = _this$state.unmountBtn,
          unmountCnt = _this$state.unmountCnt,
          cntHeight = _this$state.cntHeight,
          staticButton = _this$state.staticButton,
          scaleForFocus = _this$state.scaleForFocus,
          activeFocusTrap = _this$state.activeFocusTrap;
      var _this$props = _this.props,
          actions = _this$props.actions,
          children = _this$props.children,
          title = _this$props.title,
          _this$props$headingLe = _this$props.headingLevel,
          headingLevel = _this$props$headingLe === void 0 ? 3 : _this$props$headingLe,
          className = _this$props.className;
      var HeadingTag = "h".concat(headingLevel);
      return React.createElement("div", {
        className: "quick-frame ".concat(toDialog, " ").concat(className || '', " ").concat(staticButton, " ").concat(scaleForFocus),
        style: {
          height: cntHeight
        },
        ref: _this.frameRef
      }, React.createElement(Button, {
        glyph: "decline",
        option: "light",
        className: "quick-btn__close",
        onClick: _this.handleClose,
        innerDomRef: _this.closeButtonRef,
        tabIndex: activeFocusTrap ? 0 : -1
      }), React.createElement("div", {
        "aria-label": title,
        className: "fd-modal quick-cnt ".concat(showContent, " ").concat(unmountCnt),
        ref: _this.contentRef,
        role: "dialog"
      }, React.createElement("div", {
        className: "fd-modal__content",
        role: "document"
      }, React.createElement("div", {
        className: "fd-modal__header"
      }, title ? React.createElement(HeadingTag, {
        className: "fd-modal__title"
      }, title) : null), React.createElement("div", {
        className: "fd-modal__body"
      }, children), actions ? React.createElement("footer", {
        className: "fd-modal__footer"
      }, React.createElement("div", {
        className: "fd-modal__actions"
      }, actions)) : null)), React.createElement(CircleButton, {
        onClick: _this.handleOpen,
        className: "quick-btn ".concat(hideButton, " ").concat(unmountBtn),
        ref: _this.circleButtonRef,
        onFocus: _this.onFocusCircleButton,
        onBlur: _this.onBlurCirclrButton
      }));
    };

    _this.state = {
      activeFocusTrap: false,
      showDialog: false,
      hideButton: '',
      toDialog: '',
      showContent: '',
      unmountBtn: '',
      unmountCnt: 'unmount',
      cntHeight: null,
      scaleForFocus: '',
      staticButton: 'quick-frame__static' // used to support scale button when hover

    };
    _this.contentRef = React.createRef();
    _this.frameRef = React.createRef();
    _this.circleButtonRef = React.createRef();
    _this.closeButtonRef = React.createRef();
    _this.resizeHeight = _this.resizeHeight.bind(_assertThisInitialized(_this));
    _this.isMobile = isMobile();
    return _this;
  }

  _createClass(QuickPopover, [{
    key: "resizeHeight",
    value: function resizeHeight() {
      this.setState({
        toDialog: 'to-dialog',
        cntHeight: this.contentRef.current.clientHeight,
        showDialog: true
      });
    }
  }, {
    key: "render",
    value: function render() {
      var activeFocusTrap = this.state.activeFocusTrap;
      var pauseTrap = this.props.pauseTrap;
      return this.isMobile ? this.renderPop() : React.createElement(FocusTrap, {
        active: activeFocusTrap,
        paused: pauseTrap,
        focusTrapOptions: {
          escapeDeactivates: false
        }
      }, this.renderPop());
    }
  }]);

  return QuickPopover;
}(React.Component);

QuickPopover.defaultProps = {
  title: '',
  headingLevel: 3,
  activeTrap: true,
  pauseTrap: false
};
export { QuickPopover as default };