@momentum-ui/react-collaboration/src/legacy/Modal/examples/Large.js

Cisco Momentum UI Framework for React Collaboration Applications

import React from 'react';
import {
  Button,
  Modal,
  ModalBody,
  ModalFooter,
  ModalHeader,
} from '@momentum-ui/react-collaboration';
export default class ModalLarge 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"
            id="large-1"
          />
          <Button
            children="Large Modal with Message"
            onClick={() => this.setState({ showModal6: true })}
            ariaLabel="Open Modal"
            color="primary"
            id="large-2"
          />
          <Modal
            applicationId="app"
            onHide={() => this.setState({ showModal5: false })}
            show={this.state.showModal5}
            ref={(modal5) => (this.modal5 = modal5)}
            renderTo="theme-provider"
            htmlId="modal5"
            size="large"
          >
            <ModalHeader
              headerLabel="Large Modal"
              showCloseButton
              role="heading"
              ariaLabel="Large Modal"
              ariaLevel="2"
            />
            <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)}
            renderTo="theme-provider"
            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>
    );
  }
}