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

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
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 _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 React Framework
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import FocusTrap from 'focus-trap-react';
import Loading from '../loading';

var _React$createContext = React.createContext(),
    Consumer = _React$createContext.Consumer,
    Provider = _React$createContext.Provider;

export var FocusConsumer = Consumer;
export var Modal =
/*#__PURE__*/
function (_Component) {
  _inherits(Modal, _Component);

  // select body element to add Modal component too
  function Modal(props) {
    var _this;

    _classCallCheck(this, Modal);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Modal).call(this, props));
    _this.bodyElm = document.querySelector('body');

    _this.handleCloseClick = function (e) {
      _this.props.onClose(e);
    };

    _this.handleKeyPress = function (event) {
      if (event.key === 'Escape' || event.key === 'Esc') {
        _this.handleCloseClick();
      }
    };

    _this.pauseTrap = function (status) {
      _this.setState({
        pauseTrap: !!status
      });
    };

    _this.__mergePropWithClass = function () {
      var prop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
      var tc = prop.className || '';
      return _objectSpread({}, prop, {
        className: "".concat(className, " ").concat(tc)
      });
    };

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

  _createClass(Modal, [{
    key: "componentDidMount",
    // add event listener for escape key
    value: function componentDidMount() {
      document.addEventListener('keydown', this.handleKeyPress, false);
    } // remove event listener for escape key

  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.removeEventListener('keydown', this.handleKeyPress, false);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          onClose = _this$props.onClose,
          localizedText = _this$props.localizedText,
          children = _this$props.children,
          title = _this$props.title,
          actions = _this$props.actions,
          className = _this$props.className,
          headingLevel = _this$props.headingLevel,
          show = _this$props.show,
          titleProps = _this$props.titleProps,
          closeProps = _this$props.closeProps,
          contentProps = _this$props.contentProps,
          headerProps = _this$props.headerProps,
          footerProps = _this$props.footerProps,
          bodyProps = _this$props.bodyProps,
          activeTrap = _this$props.activeTrap,
          pauseTrap = _this$props.pauseTrap,
          showClose = _this$props.showClose,
          loading = _this$props.loading,
          rest = _objectWithoutProperties(_this$props, ["onClose", "localizedText", "children", "title", "actions", "className", "headingLevel", "show", "titleProps", "closeProps", "contentProps", "headerProps", "footerProps", "bodyProps", "activeTrap", "pauseTrap", "showClose", "loading"]);

      var modalClasses = classnames('fd-ui__overlay', 'fd-overlay', 'fd-overlay--modal', 'modal-dialog', {
        'modal-dialog__hide': showClose
      }, className);
      var HeadingTag = "h".concat(headingLevel);

      if (!show) {
        return null;
      }

      var tp = this.__mergePropWithClass(titleProps, 'fd-modal__title');

      var hp = this.__mergePropWithClass(headerProps, 'fd-modal__header');

      var cp = this.__mergePropWithClass(contentProps, 'fd-modal__content');

      return ReactDOM.createPortal(React.createElement(Provider, {
        value: {
          pauseTrap: this.pauseTrap
        }
      }, React.createElement(FocusTrap, {
        active: activeTrap,
        paused: this.state.pauseTrap,
        focusTrapOptions: {
          initialFocus: 'div.modal-demo-bg > span'
        }
      }, React.createElement("div", _extends({}, rest, {
        className: modalClasses
      }), React.createElement("div", {
        className: "modal-demo-bg"
      }, React.createElement("span", {
        tabIndex: "-1"
      }), React.createElement("div", {
        "aria-label": title,
        "aria-modal": "true",
        className: "fd-modal",
        role: "dialog"
      }, loading ? React.createElement(Loading, {
        title: localizedText.loadingTitle
      }) : null, React.createElement("div", _extends({}, cp, {
        role: "document"
      }), React.createElement("div", hp, React.createElement(HeadingTag, tp, title), React.createElement("button", _extends({}, closeProps, {
        "aria-label": localizedText.closeButton,
        className: "fd-button--light fd-modal__close",
        onClick: this.handleCloseClick
      }))), React.createElement("div", _extends({}, bodyProps, {
        className: "fd-modal__body"
      }), children), actions ? React.createElement("footer", _extends({}, footerProps, {
        className: "fd-modal__footer"
      }), React.createElement("div", {
        className: "fd-modal__actions"
      }, actions)) : '')))))), this.bodyElm);
    }
  }]);

  return Modal;
}(Component);
Modal.displayName = 'Modal';
Modal.defaultProps = {
  headingLevel: 3,
  localizedText: {
    closeButton: 'Close',
    loadingTitle: 'Please wait'
  },
  loading: false,
  onClose: function onClose() {}
};
Modal.propDescriptions = {
  actions: 'Node(s) to render within the footer of the dialog.',
  bodyProps: 'Additional props to be spread to the body section of the dialog.',
  closeProps: 'Additional props to be spread to the close `<button>` element.',
  contentProps: 'Additional props to be spread to the content section of the dialog.',
  footerProps: 'Additional props to be spread to the footer of the dialog.',
  headerProps: 'Additional props to be spread to the header of the dialog.',
  localizedTextShape: {
    closeButton: 'Aria-label for <button> element.',
    loadingTitle: 'Text shown when hover on loading modal'
  },
  onClose: 'Callback function passing event when close button is clicked.',
  show: 'Set to **true** to make the dialog visible.'
};