[changed] Remove Overlay and Modal deprecations

Author: jquense

Diff for: docs/examples/ModalTrigger.js renamed to docs/examples/Modal.js

@@ -1,40 +1,52 @@
-const MyModal = React.createClass({
-  render() {
+const Example = React.createClass({
+
+  getInitialState(){
+    return { show: false };
+  },
+
+  render(){
+    let close = e => this.setState({ show: false });
+
     return (
-      <Modal {...this.props} dialogClassName='custom-modal'>
-        <Modal.Header closeButton>
-          <Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <h4>Wrapped Text</h4>
-          <p>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.</p>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={this.props.onHide}>Close</Button>
-        </Modal.Footer>
-      </Modal>
+      <ButtonToolbar>
+        <Button bsStyle='primary' onClick={()=>this.setState({ show: true })}>
+          Launch demo modal
+        </Button>
+
+        <Modal
+          {...this.props}
+          onHide={close}
+          dialogClassName='custom-modal'
+        >
+          <Modal.Header closeButton>
+            <Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <h4>Wrapped Text</h4>
+            <p>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.</p>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={close}>Close</Button>
+          </Modal.Footer>
+        </Modal>
+      </ButtonToolbar>
     );
   }
 });
 
-const overlayTriggerInstance = (
-  <ModalTrigger modal={<MyModal />}>
-    <Button bsStyle='primary' bsSize='large'>Launch demo modal</Button>
-  </ModalTrigger>
-);
 
-React.render(overlayTriggerInstance, mountNode);
+React.render(<Example/>, mountNode);

Diff for: docs/examples/ModalCustomSizing.js

@@ -278,7 +278,7 @@ const ComponentsPage = React.createClass({
 
                   <h3 id='modals-live'>Live demo</h3>
                   <p>Use <code>{'<Modal/>'}</code> in combination with other components to show or hide your Modal.</p>
-                  <ReactPlayground codeText={Samples.ModalTrigger} />
+                  <ReactPlayground codeText={Samples.Modal} />
 
                   <h3 id='modals-contained'>Contained Modal</h3>
                   <p>You will need to add the following css to your project and ensure that your container has the <code>modal-container</code> class.</p>

Diff for: docs/src/ComponentsPage.js

@@ -26,17 +26,16 @@ import * as modNavbar from '../../src/Navbar';
 import * as modNavItem from '../../src/NavItem';
 import * as modMenuItem from '../../src/MenuItem';
 import * as modModal from '../../src/Modal';
-import * as modModalTrigger from '../../src/ModalTrigger';
 import * as modOverlayTrigger from '../../src/OverlayTrigger';
-import * as modOverlayMixin from '../../src/OverlayMixin';
+
 import * as modPageHeader from '../../src/PageHeader';
 import * as modPageItem from '../../src/PageItem';
 import * as modPager from '../../src/Pager';
 import * as modPagination from '../../src/Pagination';
 import * as modPanel from '../../src/Panel';
 import * as modPanelGroup from '../../src/PanelGroup';
 import * as modPopover from '../../src/Popover';
-//import * as modPopoverTrigger from '../../src/PopoverTrigger';
+
 import * as modProgressBar from '../../src/ProgressBar';
 import * as modRow from '../../src/Row';
 import * as modSplitButton from '../../src/SplitButton';
@@ -45,7 +44,7 @@ import * as modTable from '../../src/Table';
 import * as modTabPane from '../../src/TabPane';
 import * as modThumbnail from '../../src/Thumbnail';
 import * as modTooltip from '../../src/Tooltip';
-//import * as modTooltipTrigger from '../../src/TooltipTrigger';
+
 import * as modWell from '../../src/Well';
 
 import * as modPortal from '../../src/Portal';
@@ -88,9 +87,9 @@ const Navbar = modNavbar.default;
 const NavItem = modNavItem.default;
 const MenuItem = modMenuItem.default;
 const Modal = modModal.default;
-const ModalTrigger = modModalTrigger.default;
+
 const OverlayTrigger = modOverlayTrigger.default;
-const OverlayMixin = modOverlayMixin.default;
+
 const PageHeader = modPageHeader.default;
 const PageItem = modPageItem.default;
 const Pagination = modPagination.default;

Diff for: docs/src/ReactPlayground.js

@@ -31,7 +31,7 @@ export default {
   PanelGroupAccordion:           require('fs').readFileSync(__dirname + '/../examples/PanelGroupAccordion.js', 'utf8'),
   CollapsibleParagraph:          require('fs').readFileSync(__dirname + '/../examples/CollapsibleParagraph.js', 'utf8'),
   ModalStatic:                   require('fs').readFileSync(__dirname + '/../examples/ModalStatic.js', 'utf8'),
-  ModalTrigger:                  require('fs').readFileSync(__dirname + '/../examples/ModalTrigger.js', 'utf8'),
+  Modal:                         require('fs').readFileSync(__dirname + '/../examples/Modal.js', 'utf8'),
 
   ModalContained:                require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'),
   ModalDefaultSizing:            require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'),

Diff for: docs/src/Samples.js

@@ -5,7 +5,7 @@ import deprecationWarning from './utils/deprecationWarning';
 
 class Input extends InputBase {
   render() {
-    if (this.props.type === 'static') {
+    if (this.props.type === 'static') { //eslint-disable-line react/prop-types
       deprecationWarning('Input type=static', 'StaticText');
       return <FormControls.Static {...this.props} />;
     }

Diff for: src/Input.js

@@ -7,7 +7,6 @@ import BootstrapMixin from './BootstrapMixin';
 import FadeMixin from './FadeMixin';
 import domUtils from './utils/domUtils';
 import EventListener from './utils/EventListener';
-import deprecationWarning from './utils/deprecationWarning';
 
 import Portal from './Portal';
 
@@ -37,23 +36,6 @@ function getContainer(context){
     domUtils.ownerDocument(context).body;
 }
 
-function requiredIfNot(key, type){
-  return function(props, propName, componentName){
-    let propType = type;
-
-    if ( props[ key] === undefined ){
-      propType = propType.isRequired;
-    }
-    return propType(props, propName, componentName);
-  };
-}
-
-function toChildArray(children){
-  let result = [];
-  React.Children.forEach(children, c => result.push(c));
-  return result;
-}
-
 
 let currentFocusListener;
 
@@ -113,14 +95,10 @@ function getScrollbarSize(){
 
 const ModalMarkup = React.createClass({
 
-  mixins: [BootstrapMixin, FadeMixin],
+  mixins: [ BootstrapMixin, FadeMixin ],
 
   propTypes: {
-    /**
-     * The Modal title text
-     * @deprecated Use the "Modal.Header" component instead
-     */
-    title: React.PropTypes.node,
+
     /**
      * Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
      */
@@ -130,28 +108,17 @@ const ModalMarkup = React.createClass({
      */
     keyboard: React.PropTypes.bool,
 
-    /**
-     * Specify whether the Modal heading should contain a close button
-     * @deprecated Use the "Modal.Header" Component instead
-     */
-    closeButton: React.PropTypes.bool,
-
     /**
      * Open and close the Modal with a slide and fade animation.
      */
     animation: React.PropTypes.bool,
+
     /**
      * A Callback fired when the header closeButton or non-static backdrop is clicked.
      * @type {function}
      * @required
      */
-    onHide: requiredIfNot('onRequestHide', React.PropTypes.func),
-
-    /**
-     * A Callback fired when the header closeButton or non-static backdrop is clicked.
-     * @deprecated Replaced by `onHide`.
-     */
-    onRequestHide:  React.PropTypes.func,
+    onHide: React.PropTypes.func.isRequired,
 
     /**
      * A css class to apply to the Modal dialog DOM node.
@@ -226,28 +193,12 @@ const ModalMarkup = React.createClass({
   },
 
   renderContent() {
-    let children = toChildArray(this.props.children); // b/c createFragment is in addons and children can be a key'd object
-    let hasNewHeader = children.some( c => c.type.__isModalHeader);
-
-    if (!hasNewHeader && this.props.title != null){
-      deprecationWarning(
-        'Specifying `closeButton` or `title` Modal props',
-        'the new Modal.Header, and Modal.Title components');
-
-      children.unshift(
-        <Header closeButton={this.props.closeButton} onHide={this._getHide()}>
-          { this.props.title &&
-            <Title>{this.props.title}</Title>
-          }
-        </Header>
-      );
-    }
 
-    return React.Children.map(children, child => {
+    return React.Children.map(this.props.children, child => {
       // TODO: use context in 0.14
       if (child.type.__isModalHeader) {
         return cloneElement(child, {
-          onHide: createChainedFunction(this._getHide(), child.props.onHide)
+          onHide: createChainedFunction(this.props.onHide, child.props.onHide)
         });
       }
       return child;
@@ -272,14 +223,6 @@ const ModalMarkup = React.createClass({
     );
   },
 
-  _getHide(){
-    if ( !this.props.onHide && this.props.onRequestHide){
-      deprecationWarning('The Modal prop `onRequestHide`', 'the `onHide` prop');
-    }
-
-    return this.props.onHide || this.props.onRequestHide;
-  },
-
   iosClickHack() {
     // IOS only allows click events to be delegated to the document on elements
     // it considers 'clickable' - anchors, buttons, etc. We fake a click handler on the
@@ -360,12 +303,12 @@ const ModalMarkup = React.createClass({
       return;
     }
 
-    this._getHide()();
+    this.props.onHide();
   },
 
   handleDocumentKeyUp(e) {
     if (this.props.keyboard && e.keyCode === 27) {
-      this._getHide()();
+      this.props.onHide();
     }
   },
 
@@ -438,26 +381,18 @@ const Modal = React.createClass({
     ...ModalMarkup.propTypes
   },
 
-  defaultProps: {
-    show: null
-  },
-
   render() {
     let { show, ...props } = this.props;
 
     let modal = (
-      <ModalMarkup {...props}>{this.props.children}</ModalMarkup>
+      <ModalMarkup {...props} ref='modal'>{this.props.children}</ModalMarkup>
+    );
+
+    return (
+      <Portal container={props.container} >
+        { show && modal }
+      </Portal>
     );
-    // I can't think of another way to not break back compat while defaulting container
-    if ( !this.props.__isUsedInModalTrigger && show != null ){
-      return (
-        <Portal container={props.container} >
-          { show && modal }
-        </Portal>
-      );
-    } else {
-      return modal;
-    }
   }
 });