@salesforce/design-system-react/lib/components/modal/private/manager.js

Salesforce Lightning Design System for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _createReactClass = require("create-react-class");

var _createReactClass2 = _interopRequireDefault(_createReactClass);

var _reactDom = require("react-dom");

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactModal = require("react-modal");

var _reactModal2 = _interopRequireDefault(_reactModal);

var _button = require("../../button");

var _button2 = _interopRequireDefault(_button);

var _icon = require("../../icon");

var _icon2 = _interopRequireDefault(_icon);

var _event = require("../../../utilities/event");

var _event2 = _interopRequireDefault(_event);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */

/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
var customStyles = {
  content: {
    position: 'default',
    top: 'default',
    left: 'default',
    right: 'default',
    bottom: 'default',
    border: 'default',
    background: 'default',
    overflow: 'default',
    WebkitOverflowScrolling: 'default',
    borderRadius: 'default',
    outline: 'default',
    padding: 'default'
  },
  overlay: {
    backgroundColor: 'default'
  }
}; // This component should be deprecated and appears to have
// been created in order to do modals in portals.

var Manager = (0, _createReactClass2.default)({
  displayName: "Manager",
  getDefaultProps: function getDefaultProps() {
    return {
      title: '',
      isOpen: false
    };
  },
  getInitialState: function getInitialState() {
    return {
      isOpen: this.props.isOpen,
      revealed: false
    };
  },
  componentDidMount: function componentDidMount() {
    var _this = this;

    if (!this.state.revealed) {
      setTimeout(function () {
        _this.setState({
          revealed: true
        });
      });
    }

    this.updateBodyScroll();
  },
  componentDidUpdate: function componentDidUpdate(prevProps, prevState) {
    if (this.state.isOpen !== prevState.isOpen) {
      this.updateBodyScroll();

      if (!this.state.isOpen) {
        if (!this.isUnmounting) {
          var el = this.getDOMNode().parentNode;

          if (el && el.getAttribute('data-slds-modal')) {
            _reactDom2.default.unmountComponentAtNode(el);

            document.body.removeChild(el);
          }
        }
      }
    }
  },
  componentWillUnmount: function componentWillUnmount() {
    this.isUnmounting = true;
  },
  getModal: function getModal() {
    return (
      /* eslint-disable jsx-a11y/no-static-element-interactions */
      _react2.default.createElement("div", {
        className: "slds-modal".concat(this.state.revealed ? ' slds-fade-in-open' : ''),
        onClick: this.closeModal
      }, _react2.default.createElement("div", {
        className: "slds-modal__container",
        onClick: function onClick(e) {
          _event2.default.trap(e);
        }
      }, _react2.default.createElement("div", {
        className: "slds-modal__header"
      }, _react2.default.createElement("h2", {
        className: "slds-text-heading--medium"
      }, this.props.title), _react2.default.createElement(_button2.default, {
        className: "slds-button slds-modal__close",
        onClick: this.closeModal
      }, _react2.default.createElement(_icon2.default, {
        name: "close",
        category: "utility",
        size: "small"
      }), _react2.default.createElement("span", {
        className: "slds-assistive-text"
      }, "Close"))), _react2.default.createElement("div", {
        className: "slds-modal__content"
      }, this.props.children), _react2.default.createElement("div", {
        className: "slds-modal__footer"
      }, this.props.footer)))
    );
  },
  openModal: function openModal() {
    this.setState({
      isOpen: true
    });
  },
  closeModal: function closeModal() {
    this.setState({
      isOpen: false
    });
  },
  handleSubmitModal: function handleSubmitModal() {
    this.closeModal();
  },
  updateBodyScroll: function updateBodyScroll() {
    if (window && document && document.body) {
      if (this.state.isOpen) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = 'inherit';
      }
    }
  },
  render: function render() {
    return _react2.default.createElement(_reactModal2.default, {
      isOpen: this.state.isOpen,
      onRequestClose: this.closeModal,
      style: customStyles,
      overlayClassName: "slds-modal-backdrop".concat(this.state.revealed ? ' slds-modal-backdrop--open' : '')
    }, this.getModal());
  }
});
exports.default = Manager;