[fixed] Modal uses bsClass prop to set its classes

react-bootstrap · Jul 23, 2015 · 596f40c · 596f40c
1 parent 58eaab0
commit 596f40c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/src/Modal.js b/src/Modal.js
@@ -126,6 +126,7 @@ const Modal = React.createClass({
 
  getDefaultProps(){
  return {
+ bsClass: 'modal',
  show: false,
  animation: true,
  backdrop: true,
@@ -203,12 +204,12 @@ const Modal = React.createClass({
  },
 
  renderBackdrop(modal) {
- let { animation } = this.props;
+ let { animation, bsClass } = this.props;
  let duration = Modal.BACKDROP_TRANSITION_DURATION;
 
  let backdrop = (
  <div ref="backdrop"
- className={classNames('modal-backdrop', { in: this.props.show && !animation })}
+ className={classNames(`${bsClass}-backdrop`, { in: this.props.show && !animation })}
  onClick={this.handleBackdropClick}
  />
  );

diff --git a/src/ModalDialog.js b/src/ModalDialog.js
@@ -32,10 +32,11 @@ const ModalDialog = React.createClass({
 
  render() {
  let modalStyle = { display: 'block'};
+ let bsClass = this.props.bsClass;
  let dialogClasses = this.getBsClassSet();
 
  delete dialogClasses.modal;
- dialogClasses['modal-dialog'] = true;
+ dialogClasses[`${bsClass}-dialog`] = true;
 
  return (
  <div
@@ -44,10 +45,10 @@ const ModalDialog = React.createClass({
  tabIndex="-1"
  role="dialog"
  style={modalStyle}
- className={classNames(this.props.className, 'modal')}
+ className={classNames(this.props.className, bsClass)}
  >
  <div className={classNames(this.props.dialogClassName, dialogClasses)}>
- <div className="modal-content" role='document'>
+ <div className={`${bsClass}-content`} role='document'>
  { this.props.children }
  </div>
  </div>

diff --git a/test/ModalSpec.js b/test/ModalSpec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Modal from '../src/Modal';
-import { render } from './helpers';
+import { render, shouldWarn } from './helpers';
 
 describe('Modal', function () {
  let mountPoint;
@@ -115,6 +115,27 @@ describe('Modal', function () {
  ReactTestUtils.Simulate.click(button);
  });
 
+ it('Should use bsClass on the dialog', function () {
+ let noOp = function () {};
+ let instance = render(
+ <Modal show bsClass='mymodal' onHide={noOp}>
+ <strong>Message</strong>
+ </Modal>
+ , mountPoint);
+
+ let dialog = React.findDOMNode(instance.refs.dialog);
+ let backdrop = React.findDOMNode(instance.refs.backdrop);
+
+ assert.ok(dialog.className.match(/\bmymodal\b/));
+ assert.ok(dialog.children[0].className.match(/\bmymodal-dialog\b/));
+ assert.ok(dialog.children[0].children[0].className.match(/\bmymodal-content\b/));
+
+ assert.ok(backdrop.className.match(/\bmymodal-backdrop\b/));
+
+
+ shouldWarn("Invalid prop 'bsClass' of value 'mymodal'");
+ });
+
  it('Should pass bsSize to the dialog', function () {
  let noOp = function () {};
  let instance = render(