From dc7ef19bfd683a63b788dedc9783841648739140 Mon Sep 17 00:00:00 2001 From: corevan Date: Mon, 18 May 2015 14:17:59 -0600 Subject: [PATCH] [added] dialogClassName prop to modal to be able to pass custom css class to modal-dialog div --- docs/assets/docs.css | 3 ++ docs/examples/ModalCustomSizing.js | 37 ++++++++++++++++++ docs/examples/ModalDefaultSizing.js | 60 +++++++++++++++++++++++++++++ docs/src/ComponentsPage.js | 8 ++++ docs/src/Samples.js | 2 + src/Modal.js | 5 ++- test/ModalSpec.js | 12 ++++++ 7 files changed, 125 insertions(+), 2 deletions(-) create mode 100644 docs/examples/ModalCustomSizing.js create mode 100644 docs/examples/ModalDefaultSizing.js diff --git a/docs/assets/docs.css b/docs/assets/docs.css index f58c1e98e1..16afe4d34d 100644 --- a/docs/assets/docs.css +++ b/docs/assets/docs.css @@ -1077,6 +1077,9 @@ h1[id] { margin-right: auto; margin-left: auto; } +.custom-modal { + width: 90%; +} /* Example dropdowns */ .bs-example > .dropdown > .dropdown-toggle { diff --git a/docs/examples/ModalCustomSizing.js b/docs/examples/ModalCustomSizing.js new file mode 100644 index 0000000000..5ddeab19de --- /dev/null +++ b/docs/examples/ModalCustomSizing.js @@ -0,0 +1,37 @@ +const MyModal = React.createClass({ + render() { + return ( + +
+

Wrapped Text

+

Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde commodi aspernatur enim, consectetur. Cumque deleniti temporibus ipsam atque a dolores quisquam quisquam adipisci possimus laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem! + Mollitia reiciendis porro quo magni incidunt dolore amet atque facilis ipsum deleniti rem! Dolores debitis voluptatibus ipsum dicta. Dolor quod amet ab sint esse distinctio tenetur. Veritatis laudantium quibusdam quidem corporis architecto veritatis. Ex facilis minima beatae sunt perspiciatis placeat. Quasi corporis + odio eaque voluptatibus ratione magnam nulla? Amet cum maiores consequuntur totam dicta! Inventore adipisicing vel vero odio modi doloremque? Vitae porro impedit ea minima laboriosam quisquam neque. Perspiciatis omnis obcaecati consequatur sunt deleniti similique facilis sequi. Ipsum harum vitae modi reiciendis officiis. + Quas laudantium laudantium modi corporis nihil provident consectetur omnis, natus nulla distinctio illum corporis. Sit ex earum odio ratione consequatur odit minus laborum? Eos? Sit ipsum illum architecto aspernatur perspiciatis error fuga illum, tempora harum earum, a dolores. Animi facilis inventore harum dolore accusamus + fuga provident molestiae eum! Odit dicta error dolorem sunt reprehenderit. Sit similique iure quae obcaecati harum. Eum saepe fugit magnam dicta aliquam? Sapiente possimus aliquam fugiat officia culpa sint! Beatae voluptates voluptatem excepturi molestiae alias in tenetur beatae placeat architecto. Sit possimus rerum + fugiat sapiente aspernatur. Necessitatibus tempora animi dicta perspiciatis tempora a velit in! Doloribus perspiciatis doloribus suscipit nam earum. Deleniti veritatis eaque totam assumenda fuga sapiente! Id recusandae. Consectetur necessitatibus eaque velit nobis aliquid? Fugit illum qui suscipit aspernatur alias ipsum + repudiandae! Quia omnis quisquam dignissimos a mollitia. Suscipit aspernatur eum maiores repellendus ipsum doloribus alias voluptatum consequatur. Consectetur quibusdam veniam quas tenetur necessitatibus repudiandae? Rem optio vel alias neque optio sapiente quidem similique reiciendis tempore. Illum accusamus officia + cum enim minima eligendi consectetur nemo veritatis nam nisi! Adipisicing nobis perspiciatis dolorum adipisci soluta architecto doloremque voluptatibus omnis debitis quas repellendus. Consequuntur assumenda illum commodi mollitia asperiores? Quis aspernatur consequatur modi veritatis aliquid at? Atque vel iure quos. + Amet provident voluptatem amet aliquam deserunt sint, elit dolorem ipsa, voluptas? Quos esse facilis neque nihil sequi non? Voluptates rem ab quae dicta culpa dolorum sed atque molestias debitis omnis! Sit sint repellendus deleniti officiis distinctio. Impedit vel quos harum doloribus corporis. Laborum ullam nemo quaerat + reiciendis recusandae minima dicta molestias rerum. Voluptas et ut omnis est ipsum accusamus harum. Amet exercitationem quasi velit inventore neque doloremque! Consequatur neque dolorem vel impedit sunt voluptate. Amet quo amet magni exercitationem libero recusandae possimus pariatur. Cumque eum blanditiis vel vitae + distinctio! Tempora! Consectetur sit eligendi neque sunt soluta laudantium natus qui aperiam quisquam consectetur consequatur sit sint a unde et. At voluptas ut officiis esse totam quasi dolorem! Hic deserunt doloribus repudiandae! Lorem quod ab nostrum asperiores aliquam ab id consequatur, expedita? Tempora quaerat + ex ea temporibus in tempore voluptates cumque. Quidem nam dolor reiciendis qui dolor assumenda ipsam veritatis quasi. Esse! Sit consectetur hic et sunt iste! Accusantium atque elit voluptate asperiores corrupti temporibus mollitia! Placeat soluta odio ad blanditiis nisi. Eius reiciendis id quos dolorum eaque suscipit + magni delectus maxime. Sit odit provident vel magnam quod. Possimus eligendi non corrupti tenetur culpa accusantium quod quis. Voluptatum quaerat animi dolore maiores molestias voluptate? Necessitatibus illo omnis laborum hic enim minima! Similique. Dolor voluptatum reprehenderit nihil adipisci aperiam voluptatem soluta + magnam accusamus iste incidunt tempore consequatur illo illo odit. Asperiores nesciunt iusto nemo animi ratione. Sunt odit similique doloribus temporibus reiciendis! Ullam. Dolor dolores veniam animi sequi dolores molestias voluptatem iure velit. Elit dolore quaerat incidunt enim aut distinctio. Ratione molestiae laboriosam + similique laboriosam eum et nemo expedita. Consequuntur perspiciatis cumque dolorem.

+
+
+ +
+ + ); + } +}); + +const overlayTriggerInstance = ( + }> + + +); + +React.render(overlayTriggerInstance, mountNode); diff --git a/docs/examples/ModalDefaultSizing.js b/docs/examples/ModalDefaultSizing.js new file mode 100644 index 0000000000..aabd5dfc1c --- /dev/null +++ b/docs/examples/ModalDefaultSizing.js @@ -0,0 +1,60 @@ +const MySmallModal = React.createClass({ + render() { + return ( + +
+

Wrapped Text

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+
+
+ +
+ + ); + } +}); + +const MyLargeModal = React.createClass({ + render() { + return ( + +
+

Wrapped Text

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+
+
+ +
+ + ); + } +}); + +const overlayTriggerInstance = ( + + }> + + + }> + + + +); + +React.render(overlayTriggerInstance, mountNode); diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js index 8b7c815d37..9744961949 100644 --- a/docs/src/ComponentsPage.js +++ b/docs/src/ComponentsPage.js @@ -236,6 +236,14 @@ const ComponentsPage = React.createClass({ )} + + +

You can specify a bootstrap large or small modal by using the "bsSize" prop.

+ + + +

You can apply custom css to the modal dialog div using the "dialogClassName" prop. Example is using a custom css class with width set to 90%.

+ {/* Tooltip */} diff --git a/docs/src/Samples.js b/docs/src/Samples.js index cd25d8d853..9803e1bca9 100644 --- a/docs/src/Samples.js +++ b/docs/src/Samples.js @@ -33,6 +33,8 @@ export default { ModalTrigger: require('fs').readFileSync(__dirname + '/../examples/ModalTrigger.js', 'utf8'), ModalOverlayMixin: require('fs').readFileSync(__dirname + '/../examples/ModalOverlayMixin.js', 'utf8'), ModalContained: require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'), + ModalDefaultSizing: require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'), + ModalCustomSizing: require('fs').readFileSync(__dirname + '/../examples/ModalCustomSizing.js', 'utf8'), TooltipBasic: require('fs').readFileSync(__dirname + '/../examples/TooltipBasic.js', 'utf8'), TooltipPositioned: require('fs').readFileSync(__dirname + '/../examples/TooltipPositioned.js', 'utf8'), TooltipInCopy: require('fs').readFileSync(__dirname + '/../examples/TooltipInCopy.js', 'utf8'), diff --git a/src/Modal.js b/src/Modal.js index e05526674b..5657bf4102 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -20,7 +20,8 @@ const Modal = React.createClass({ keyboard: React.PropTypes.bool, closeButton: React.PropTypes.bool, animation: React.PropTypes.bool, - onRequestHide: React.PropTypes.func.isRequired + onRequestHide: React.PropTypes.func.isRequired, + dialogClassName: React.PropTypes.string }, getDefaultProps() { @@ -55,7 +56,7 @@ const Modal = React.createClass({ className={classNames(this.props.className, classes)} onClick={this.props.backdrop === true ? this.handleBackdropClick : null} ref="modal"> -
+
{this.props.title ? this.renderHeader() : null} {this.props.children} diff --git a/test/ModalSpec.js b/test/ModalSpec.js index 9d41d21676..eeafc6d004 100644 --- a/test/ModalSpec.js +++ b/test/ModalSpec.js @@ -85,4 +85,16 @@ describe('Modal', function () { assert.ok(dialog.className.match(/\bmodal-sm\b/)); }); + it('Should pass dialogClassName to the dialog', function () { + let noOp = function () {}; + let instance = ReactTestUtils.renderIntoDocument( + + Message + + ); + + let dialog = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'modal-dialog'); + assert.match(dialog.props.className, /\btestCss\b/); + }); + });