jquense/react-bootstrap-modal

Dismiss doesn't trigger Cancel

Opened this issue · 1 comments

So this is my PrintModal component using react-bootstrap-modal

/**
 * PrintModal : This is a compnent that warn the user for printing. It opens a print dialog warning.
 */

import React, {PropTypes} from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import PubSub from 'pubsub-js';
import s from './PrintModal.less';
import Modal from 'react-bootstrap-modal';


class PrintModal extends React.Component {

  constructor(props) {
    super(props);

    this.state = {};
  }

  componentWillMount() {
    this.openPrintModalNotifier = PubSub.subscribe('print.openPrintModal', (topic, time) => {
      console.log("printing modal open");
      this.setState({modalIsOpen: true});
    });
  }

  componentWillUnmount() {
    PubSub.unsubscribe(this.openPrintModalNotifier);
  }

  render() {
    let closeModal = () => this.setState({modalIsOpen: false});

    return (
      <div>
        <Modal
          show={this.state.modalIsOpen}
          onHide={this.closeModal}>

          <Modal.Header closeButton>
            <Modal.Title id='ModalHeader'>Before you print...</Modal.Title>
          </Modal.Header>
          <Modal.Body>


            Terms and conditions

            <p>Please respect copyright, the artists and composers and all the individuals who work hard to bring you
              this
              music.</p>

            <p>Every title on our website is legally authorized by the songwriter and licensed from them (or their
              publisher).</p>

            <p>Songwriters earn their living from the revenue generated from each sale. All works are protected by
              copyright
              law and it is unlawful to photocopy or distribute this work either physically or electronically without
              consent so please do not do so.</p>

            <p>You are only entitled to print the number of copies you have purchased and by pressing "Print" you agree
              to
              our full terms and conditions.</p>

            <p><strong>Printing tips</strong></p>

            <ol>
              <li>Carefully check your browser print settings, making sure to switch off <strong>headers and
                footers</strong> and set <strong>margins to zero</strong>.
              </li>
              <li>Make sure your printer is plugged in and switched on, and is well stocked with ink and paper. This
                score
                has <strong>{this.props.numberOfPage} page(s).</strong></li>
            </ol>
          </Modal.Body>
          <Modal.Footer>
            {/* If you don't have anything fancy to do you can use
             the convenient `Dismiss` component, it will
             trigger `onHide` when clicked
              */}
            <Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

export default withStyles(s)(PrintModal);

When I hit, Cancel, nothing is dismissed. Either the Close (X) button is not working.

onHide={this.closeModal} should be onHide={closeModal}