DemoModal

DemoModal.jsx

import React from 'react'
import jsxToString from 'jsx-to-string'
import BootstrapModal from 'components/utils/bootstrap_modal'
import Spinner from 'components/utils/spinner'

export class DemoModal extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false,
      loading: false,
      disabled: false,
    }
  }

  componentDidUpdate = () => {
    Prism.highlightAll() // eslint-disable-line no-undef
  }

  handleClick = () => {
    this.setState({ show: true })
  }

  handleCancel = () => {
    this.setState({ show: false })
  }

  toggleDisabled = () => {
    this.setState(prevState => ({
      disabled: !prevState.disabled,
    }))
  }

  handleSubmit = () => {
    this.setState({ loading: true })

    setTimeout(() => {
      this.setState({ loading: false, show: false })
    }, 2000)
  }

  renderBootstrapModal() {
    const {
      show,
      loading,
      disabled,
    } = this.state

    return (
      <BootstrapModal
        show={show}
        handleHideModal={this.handleCancelClick}>
        <BootstrapModal.Header>
          This is the header
        </BootstrapModal.Header>
        <BootstrapModal.Body>
          This is the body
        </BootstrapModal.Body>
        <BootstrapModal.Footer>
          <a
            href="#close"
            className="back-btn"
            onClick={this.handleCancel}>
            Cancel
          </a>

          <a
            href="#close"
            className="pull-right btn btn-primary"
            onClick={this.handleSubmit}
            disabled={disabled}>
            {loading && <Spinner isLoading />}
            {loading ? 'Loading...' : 'Confirm'}
          </a>
        </BootstrapModal.Footer>
      </BootstrapModal>
    )
  }

  render() {
    return (
      <div>
        <a href="#nowhere" onClick={this.handleClick}>Click for Modal</a>
        <div className="pull-right">
          <label>
            <input type="checkbox"
              onChange={this.toggleDisabled}
              checked={this.disabled}
            /> Submit Disabled? </label>
        </div>
        {this.renderBootstrapModal()}
        <pre>
          <code className="language-jsx">{`
            ${jsxToString(this.renderBootstrapModal())}
          `}</code>
        </pre>
      </div>
    )
  }
}