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

Salesforce Lightning Design System for React

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

/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
import Button from '../../button';
import Icon from '../../icon';
import EventUtil from '../../../utilities/event';
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 = createReactClass({
  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')) {
            ReactDOM.unmountComponentAtNode(el);
            document.body.removeChild(el);
          }
        }
      }
    }
  },
  componentWillUnmount: function componentWillUnmount() {
    this.isUnmounting = true;
  },
  getModal: function getModal() {
    return (
      /* eslint-disable jsx-a11y/no-static-element-interactions */
      React.createElement("div", {
        className: "slds-modal".concat(this.state.revealed ? ' slds-fade-in-open' : ''),
        onClick: this.closeModal
      }, React.createElement("div", {
        className: "slds-modal__container",
        onClick: function onClick(e) {
          EventUtil.trap(e);
        }
      }, React.createElement("div", {
        className: "slds-modal__header"
      }, React.createElement("h2", {
        className: "slds-text-heading--medium"
      }, this.props.title), React.createElement(Button, {
        className: "slds-button slds-modal__close",
        onClick: this.closeModal
      }, React.createElement(Icon, {
        name: "close",
        category: "utility",
        size: "small"
      }), React.createElement("span", {
        className: "slds-assistive-text"
      }, "Close"))), React.createElement("div", {
        className: "slds-modal__content"
      }, this.props.children), React.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 React.createElement(Modal, {
      isOpen: this.state.isOpen,
      onRequestClose: this.closeModal,
      style: customStyles,
      overlayClassName: "slds-modal-backdrop".concat(this.state.revealed ? ' slds-modal-backdrop--open' : '')
    }, this.getModal());
  }
});
export default Manager;
//# sourceMappingURL=manager.js.map