"use strict";

exports.__esModule = true;
exports.default = void 0;

require("core-js/modules/es6.object.assign");

require("core-js/modules/web.dom.iterable");

require("core-js/modules/es6.array.iterator");

require("core-js/modules/es6.object.keys");

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactAriaModal = _interopRequireDefault(require("react-aria-modal"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

/**
 * @category containers
 * @component modal
 * @variations collab-ui-react
 */
var Modal =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Modal, _React$Component);

  function Modal() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      animationClass: _this.props.show ? 'in' : ''
    };

    _this.getChildContext = function () {
      return {
        handleClose: function handleClose(e) {
          return _this.closeModal(e);
        }
      };
    };

    _this.closeModal = function (e) {
      _this.setAnimationState();

      return setTimeout(function () {
        _this.props.onHide(e);
      }, 300);
    };

    _this.setAnimationState = function (isOpen) {
      _this.setState({
        animationClass: isOpen ? 'in' : ''
      });
    };

    return _this;
  }

  var _proto = Modal.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    prevProps.show !== this.props.show && this.props.show && this.setAnimationState(true);
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        applicationId = _this$props.applicationId,
        backdrop = _this$props.backdrop,
        backdropClickExit = _this$props.backdropClickExit,
        children = _this$props.children,
        className = _this$props.className,
        escapeExits = _this$props.escapeExits,
        focusDialog = _this$props.focusDialog,
        htmlId = _this$props.htmlId,
        icon = _this$props.icon,
        renderTo = _this$props.renderTo,
        show = _this$props.show,
        size = _this$props.size,
        props = _objectWithoutPropertiesLoose(_this$props, ["applicationId", "backdrop", "backdropClickExit", "children", "className", "escapeExits", "focusDialog", "htmlId", "icon", "renderTo", "show", "size"]);

    var getIcon = function getIcon() {
      if (icon.type.displayName === 'Icon') {
        return icon;
      }

      throw new Error("icon prop needs to be of type Icon.");
    };

    var modalContent = _react.default.createElement("div", {
      className: "cui-modal__content"
    }, icon && size === 'dialog' && getIcon() && _react.default.createElement("div", {
      className: "cui-modal__content--left-pane"
    }, icon), _react.default.createElement("div", {
      className: "cui-modal__content--right-pane"
    }, children));

    var RenderModal = renderTo ? _reactAriaModal.default.renderTo("#" + renderTo) : _reactAriaModal.default;

    var getModal = function getModal() {
      return show && _react.default.createElement(RenderModal, _extends({
        onExit: _this2.closeModal,
        getApplicationNode: function getApplicationNode() {
          return document.querySelector("#" + applicationId);
        },
        dialogClass: "cui-modal" + (" cui-modal--" + size) + (" " + _this2.state.animationClass) + ("" + (className && " " + className || '')),
        includeDefaultStyles: false,
        titleId: htmlId,
        underlayClass: backdrop ? "cui-modal__backdrop fade" + (" " + _this2.state.animationClass) : '',
        underlayClickExits: backdropClickExit,
        escapeExits: escapeExits,
        focusDialog: focusDialog
      }, props), modalContent);
    };

    return getModal();
  };

  return Modal;
}(_react.default.Component);

Modal.childContextTypes = {
  handleClose: _propTypes.default.func
};
Modal.propTypes = {
  /** @prop application DOM id, used to set aria-hidden to true when modal is open */
  applicationId: _propTypes.default.string.isRequired,

  /** @prop Determines the visibility and ability to edit the backdrop of the Modal | true */
  backdrop: _propTypes.default.bool,

  /** @prop To enable/disable clicking on underlay to exit modal | false */
  backdropClickExit: _propTypes.default.bool,

  /** @prop Children nodes to render inside the Modal | null */
  children: _propTypes.default.node,

  /** @prop Optional css class names | '' */
  className: _propTypes.default.string,

  /** @prop To enable/disable escape to exit modal | true */
  escapeExits: _propTypes.default.bool,

  /** @prop To set focus to the entire modal rather than elements within modal | true */
  focusDialog: _propTypes.default.bool,

  /** @prop Unique HTML ID used for tying label to HTML input for automated testing */
  htmlId: _propTypes.default.string.isRequired,

  /** @prop Icon node to be rendered for Dialog | null */
  icon: _propTypes.default.element,

  /** @prop Callback function invoked when user clicks on cross button or esc key */
  onHide: _propTypes.default.func.isRequired,

  /** @prop To render to an element other than the browser window | null */
  renderTo: _propTypes.default.string,

  /** @prop Show/hide modal */
  show: _propTypes.default.bool.isRequired,

  /** @prop Size of the modal | 'default' */
  size: _propTypes.default.oneOf(['large', 'medium', 'default', 'small', 'full', 'dialog'])
};
Modal.defaultProps = {
  backdrop: true,
  backdropClickExit: false,
  children: null,
  className: '',
  escapeExits: true,
  focusDialog: true,
  icon: null,
  renderTo: null,
  show: false,
  size: 'default'
};
Modal.displayName = 'Modal';
var _default = Modal;
/**
* @name Default Modal
* @description Modal with default size.
* @category containers
* @component modal
* @section default
*
* @js

import {
  Button,
  ModalBody,
  ModalFooter,
  ModalHeader
} from '@collab-ui/react';

export default class Default extends React.PureComponent {
  state = {
    showModal: false,
    showModal2: false,
  }

  render() {
    return (
      <div className='row'>
        <div className="docs-example docs-example--spacing">

          <Button
            children='Default/Medium Modal'
            onClick={() => this.setState({showModal: true})}
            ariaLabel='Open Modal'
            color='primary'
          />
          <Button
            children='Default/Medium Modal with Message'
            onClick={() => this.setState({showModal2: true})}
            ariaLabel='Open Modal 2'
            color='primary'
          />

          <Modal
            applicationId='app'
            onHide={() => this.setState({showModal: false})}
            show={this.state.showModal}
            ref={modal1 => this.modal1 = modal1}
            htmlId='modal1'
            backdropClickExit
          >
            <ModalHeader
              headerLabel='Default Modal'
              showCloseButton
            />
            <ModalBody>
              <form ref={form1 => this.form1 = form1} />
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal1.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                type='submit'
                onClick={(e) => {
                  e.preventDefault();
                  this.modal1.closeModal();
                }}
                ariaLabel='Submit Form'
                color='blue'
              />
            </ModalFooter>
          </Modal>

          <Modal
            applicationId='app'
            onHide={() => this.setState({showModal2: false})}
            show={this.state.showModal2}
            ref={modal2 => this.modal2 = modal2}
            htmlId='modal2'
            backdropClickExit
          >
            <ModalHeader
              headerLabel='Default Modal'
              message='To create a meeting invite manually, copy and paste the meeting information and people into your email calendar invite.'
              showCloseButton
            />
            <ModalBody>
              <form ref={form1 => this.form1 = form1} />
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal2.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                type='submit'
                onClick={(e) => {
                  e.preventDefault();
                  this.modal2.closeModal();
                }}
                ariaLabel='Submit Form'
                color='blue'
              />
            </ModalFooter>
          </Modal>

        </div>
      </div>
    );
  }
}

**/

/**
* @name Small Modal
* @description Modal with small size.
* @category containers
* @component modal
* @section small
*
* @js

import {
  Button,
  ModalBody,
  ModalFooter,
  ModalHeader,
  Form
} from '@collab-ui/react';

export default class Default extends React.PureComponent {
  state = {
    showModal3: false,
    showModal4: false,
  }

  render() {
    return (
      <div className='row'>
        <div className="docs-example docs-example--spacing">

          <Button
            children='Small Modal'
            onClick={() => this.setState({showModal3: true})}
            ariaLabel='Open Modal'
            color='primary'
          />
          <Button
            children='Small Modal with Message'
            onClick={() => this.setState({showModal4: true})}
            ariaLabel='Open Modal'
            color='primary'
          />

          <Modal
            applicationId='app'
            onHide={() => this.setState({showModal3: false})}
            show={this.state.showModal3}
            ref={modal3 => this.modal3 = modal3}
            size='small'
            htmlId='modal3'
          >
            <ModalHeader
              headerLabel='Small Modal'
              showCloseButton
            />
            <ModalBody>
              <form ref={moform2 => this.moform2 = moform2} />
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal3.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                type='submit'
                onClick={(e) => {
                  e.preventDefault;
                  this.modal3.closeModal();
                }}
                ariaLabel='Submit Form'
                color='blue'
              />
            </ModalFooter>
          </Modal>

          <Modal
            applicationId='app'
            onHide={() => this.setState({showModal4: false})}
            show={this.state.showModal4}
            ref={modal4 => this.modal4 = modal4}
            size='small'
            htmlId='modal4'
          >
            <ModalHeader
              headerLabel='Small Modal'
              showCloseButton
              message='To create a meeting invite manually, copy and paste the meeting information and people into your email calendar invite.'
            />
            <ModalBody>
              <form ref={moform2 => this.moform2 = moform2} />
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal4.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                type='submit'
                onClick={(e) => {
                  e.preventDefault;
                  this.modal4.closeModal();
                }}
                ariaLabel='Submit Form'
                color='blue'
              />
            </ModalFooter>
          </Modal>

        </div>
      </div>
    );
  }
}
**/

/**
* @name Large Modal
* @description Modal with large size.
* @category containers
* @component modal
* @section large
*
* @js

import {
  Button,
  ModalBody,
  ModalFooter,
  ModalHeader
} from '@collab-ui/react';

export default class Default extends React.PureComponent {
  state = {
    showModal5: false,
    showModal6: false,
  }

  render() {
    return (
      <div className='row'>
        <div className="docs-example docs-example--spacing">

          <Button
            children='Large Modal'
            onClick={() => this.setState({showModal5: true})}
            ariaLabel='Open Modal'
            color='primary'
          />
          <Button
            children='Large Modal with Message'
            onClick={() => this.setState({showModal6: true})}
            ariaLabel='Open Modal'
            color='primary'
          />

          <Modal
            applicationId='app'
            onHide={() => this.setState({showModal5: false})}
            show={this.state.showModal5}
            ref={modal5 => this.modal5 = modal5}
            htmlId='modal5'
            size='large'
          >
            <ModalHeader
              headerLabel='Large Modal'
              showCloseButton
            />
            <ModalBody>
              <form ref={form1 => this.form1 = form1} />
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal5.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                type='submit'
                onClick={(e) => {
                  e.preventDefault();
                  this.modal5.closeModal();
                }}
                ariaLabel='Submit Form'
                color='blue'
              />
            </ModalFooter>
          </Modal>

          <Modal
            applicationId='app'
            onHide={() => this.setState({showModal6: false})}
            show={this.state.showModal6}
            ref={modal6 => this.modal6 = modal6}
            htmlId='modal6'
            size='large'
          >
            <ModalHeader
              headerLabel='Large Modal'
              showCloseButton
              message='To create a meeting invite manually, copy and paste the meeting information and people into your email calendar invite. To create a meeting invite manually, copy and paste the meeting information and people into your email calendar invite.'
            />
            <ModalBody>
              <form ref={form1 => this.form1 = form1} />
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal6.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                type='submit'
                onClick={(e) => {
                  e.preventDefault();
                  this.modal6.closeModal();
                }}
                ariaLabel='Submit Form'
                color='blue'
              />
            </ModalFooter>
          </Modal>

        </div>
      </div>
    );
  }
}
**/

/**
* @name Full Modal
 * @description Modal with full size.
* @category containers
* @component modal
* @section full
*
* @js

import {
  Button,
  ModalBody,
  ModalFooter,
  ModalHeader
} from '@collab-ui/react';

export default class Default extends React.PureComponent {
  state = {
    showModal7: false,
    showModal8: false,
  }

  render() {
    return (
      <div className='row'>
        <div className="docs-example docs-example--spacing">

          <Button
            children='Full Modal'
            onClick={() => this.setState({showModal7: true})}
            ariaLabel='Open Modal'
            color='primary'
          />
          <Button
            children='Full Modal with Message'
            onClick={() => this.setState({showModal8: true})}
            ariaLabel='Open Modal'
            color='primary'
          />

          <Modal
            applicationId='app'
            onHide={() => this.setState({showModal7: false})}
            show={this.state.showModal7}
            ref={modal7 => this.modal7 = modal7}
            htmlId='modal7'
            size='full'
          >
            <ModalHeader
              headerLabel='Full Modal'
              showCloseButton
            />
            <ModalBody>
              <form ref={form1 => this.form1 = form1} />
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal7.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                type='submit'
                onClick={(e) => {
                  e.preventDefault();
                  this.modal7.closeModal();
                }}
                ariaLabel='Submit Form'
                color='blue'
              />
            </ModalFooter>
          </Modal>

          <Modal
            applicationId='app'
            onHide={() => this.setState({showModal8: false})}
            show={this.state.showModal8}
            ref={modal8 => this.modal8 = modal8}
            htmlId='modal8'
            size='full'
          >
            <ModalHeader
              headerLabel='Full Modal'
              showCloseButton
              message='To create a meeting invite manually, copy and paste the meeting information and people into your email calendar invite.'
            />
            <ModalBody>
              <form ref={form1 => this.form1 = form1} />
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal8.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                type='submit'
                onClick={(e) => {
                  e.preventDefault();
                  this.modal8.closeModal();
                }}
                ariaLabel='Submit Form'
                color='blue'
              />
            </ModalFooter>
          </Modal>

        </div>
      </div>
    );
  }
}
**/

/**
* @name Dialog Modal
* @description Modal with dialog size.
* @category containers
* @component modal
* @section dialog
*
* @js

import {
  Button,
  ModalBody,
  ModalFooter,
  ModalHeader,
  Icon
} from '@collab-ui/react';

export default class Default extends React.PureComponent {
  state = {
    showDialog: false,
    showModalInternal: false
  }

  render() {
    return (
      <div className='row'>
        <div className="docs-example docs-example--spacing">

          <Button
            children='Dialog Modal'
            onClick={() => this.setState({showDialog: true})}
            ariaLabel='Open Modal'
            color='primary'
          />
          <Button
            children='Render To Div'
            onClick={() => this.setState({showModalInternal: true})}
            ariaLabel='Open Modal'
            color='primary'
          />

          <Modal
            icon={<Icon name="warning_72" color="$yellow"/>}
            applicationId='app'
            onHide={() => this.setState({showDialog: false})}
            show={this.state.showDialog}
            ref={modalDialog => this.modalDialog = modalDialog}
            size='dialog'
            htmlId='modalDialog'
          >
            <ModalHeader
              headerLabel='Dialog Modal'
            />
            <ModalBody>
              <span>I'm just a dialog box</span>
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modalDialog.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                onClick={() => this.modalDialog.closeModal()}
                ariaLabel='Submit Form'
                color='blue'
              />
            </ModalFooter>
          </Modal>

        <div id='render-to-modal'/>

        <Modal
          icon={<Icon name="warning_72" color="$yellow"/>}
          applicationId='app'
          onHide={() => this.setState({showModalInternal: false})}
          show={this.state.showModalInternal}
          ref={ref => this.modalInternal = ref}
          size='dialog'
          htmlId='modalInternal'
          renderTo='render-to-modal'
        >
          <ModalHeader
            headerLabel='Dialog Modal'
          />
          <ModalBody>
            <span>I'm just a dialog box</span>
          </ModalBody>
          <ModalFooter>
            <Button
              children='Cancel'
              onClick={() => this.modalInternal.closeModal()}
              ariaLabel='Close Modal'
              color='default'
            />
            <Button
              children='OK'
              onClick={() => this.modalInternal.closeModal()}
              ariaLabel='Submit Form'
              color='blue'
            />
          </ModalFooter>
        </Modal>

        </div>
      </div>
    );
  }
}

**/

exports.default = _default;