text: import React from 'react';
  import PropTypes from 'prop-types';
  
  import Portal from './Portal.js';
  import Body from './ModalBody.js';
  import Header from './ModalHeader.js';
  import Footer from './ModalFooter.js';
  import Title from './ModalTitle.js';
  
  export const modalSize = {
      medium: 'md',
      large: 'l',
      extraLarge: 'xl',
      small: 'sm',
      extraSmall: 'xsm'
  };
  
  class Modal extends React.Component {
      render() {
          const { size, type, children, show } = this.props;
          return (
              <Portal>
                  <div
                      ref={el => {
                          this.modalRef = el;
                      }}>
                      {show && (
                          <div className={`sdc-modal ${modalSize[size]}`}>
                              <div
                                  className={`sdc-modal__wrapper sdc-modal-type-${type}`}>
                                  {children}
                              </div>
                          </div>
                      )}
                      {show && <div className="modal-background" />}
                  </div>
              </Portal>
          );
      }
  }
  
  Modal.defaultProps = {
      show: false,
      size: 'medium',
      type: 'info'
  };
  
  Modal.propTypes = {
      show: PropTypes.bool,
      size: PropTypes.string,
      children: PropTypes.node,
      type: PropTypes.string
  };
  
  Modal.Body = Body;
  Modal.Header = Header;
  Modal.Footer = Footer;
  Modal.Title = Title;
  export default Modal;
  