[changed] deprecated Position, Transition, Portal

Author: jquense

src/Collapse.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Transition from 'react-overlays/lib/Transition';
 import domUtils from './utils/domUtils';
 import CustomPropTypes from './utils/CustomPropTypes';
-import deprecationWarning from './deprecationWarning';
+import deprecationWarning from './utils/deprecationWarning';
 import createChainedFunction from './utils/createChainedFunction';
 
 let capitalize = str => str[0].toUpperCase() + str.substr(1);

src/Fade.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Transition from 'react-overlays/lib/Transition';
 import CustomPropTypes from './utils/CustomPropTypes';
-import deprecationWarning from './deprecationWarning';
+import deprecationWarning from './utils/deprecationWarning';
 
 class Fade extends React.Component {
   render() {

src/Modal.js

@@ -177,7 +177,7 @@ const Modal = React.createClass({
           transitionAppear
           unmountOnExit
           in={show}
-          duration={Modal.TRANSITION_DURATION}
+          timeout={Modal.TRANSITION_DURATION}
           onExit={onExit}
           onExiting={onExiting}
           onExited={this.handleHidden}
@@ -231,7 +231,7 @@ const Modal = React.createClass({
       <div
         ref='modal'>
         { animation
-            ? <Fade transitionAppear in={this.props.show} duration={duration}>{backdrop}</Fade>
+            ? <Fade transitionAppear in={this.props.show} timeout={duration}>{backdrop}</Fade>
             : backdrop
         }
         {modal}

src/Portal.js

@@ -1,3 +1,11 @@
+import deprecationWarning from './utils/deprecationWarning';
 import Portal from 'react-overlays/lib/Portal';
 
-export default Portal;
+export default deprecationWarning.wrapper(Portal, {
+  message:
+    'The Portal component is deprecated in react-bootstrap. It has been moved to a more generic library: react-overlays. ' +
+    'You can read more at: ' +
+    'http://react-bootstrap.github.io/react-overlays/examples/#portal and ' +
+    'https://github.com/react-bootstrap/react-bootstrap/issues/1084'
+});
+

src/Position.js

@@ -1,3 +1,10 @@
+import deprecationWarning from './utils/deprecationWarning';
 import Position from 'react-overlays/lib/Position';
 
-export default Position;
+export default deprecationWarning.wrapper(Position, {
+  message:
+    'The Position component is deprecated in react-bootstrap. It has been moved to a more generic library: react-overlays. ' +
+    'You can read more at: ' +
+    'http://react-bootstrap.github.io/react-overlays/examples/#position and ' +
+    'https://github.com/react-bootstrap/react-bootstrap/issues/1084'
+});

src/Transition.js

@@ -1,3 +1,10 @@
+import deprecationWarning from './utils/deprecationWarning';
 import Transition from 'react-overlays/lib/Transition';
 
-export default Transition;
+export default deprecationWarning.wrapper(Transition, {
+  message:
+    'The Transition component is deprecated in react-bootstrap. It has been moved to a more generic library: react-overlays. ' +
+    'You can read more at: ' +
+    'http://react-bootstrap.github.io/react-overlays/examples/#transition and ' +
+    'https://github.com/react-bootstrap/react-bootstrap/issues/1084'
+});

src/utils/deprecationWarning.js

@@ -2,18 +2,40 @@ import warning from 'react/lib/warning';
 
 const warned = {};
 
-export default function deprecationWarning(oldname, newname, link) {
-  const warnKey = `${oldname}\n${newname}`;
-  if (warned[warnKey]) {
-    return;
+function deprecationWarning(oldname, newname, link) {
+  let message;
+
+  if (typeof oldname === 'object'){
+    message = oldname.message;
   }
+  else {
+    message = `${oldname} is deprecated. Use ${newname} instead.`;
 
-  let message = `${oldname} is deprecated. Use ${newname} instead.`;
+    if (link) {
+      message += `\nYou can read more about it at ${link}`;
+    }
+  }
 
-  if (link) {
-    message += `\nYou can read more about it at ${link}`;
+  if (warned[message]) {
+    return;
   }
 
   warning(false, message);
-  warned[warnKey] = true;
+  warned[message] = true;
 }
+
+
+deprecationWarning.wrapper = function(Component, ...args){
+  return class DeprecatedComponent extends Component {
+    componentWillMount(...methodArgs){
+      deprecationWarning(...args);
+
+      if (super.componentWillMount) {
+        super.componentWillMount(...methodArgs);
+      }
+    }
+  };
+};
+
+export default deprecationWarning;
+

test/OverlayDeprecationSpec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Position from '../src/Position';
+import Transition from '../src/Transition';
+import Portal from '../src/Portal';
+
+import { shouldWarn } from './helpers';
+
+describe('Components moved to react-overlays', ()=>{
+
+  it('should warn about Position', ()=>{
+    ReactTestUtils.renderIntoDocument(<Position><div/></Position>);
+
+    shouldWarn(/Position component is deprecated/);
+  });
+
+  it('should warn about Transition', ()=>{
+    ReactTestUtils.renderIntoDocument(<Transition><div/></Transition>);
+
+    shouldWarn(/Transition component is deprecated/);
+  });
+
+  it('should warn about Portal', ()=>{
+    ReactTestUtils.renderIntoDocument(<Portal><div/></Portal>);
+
+    shouldWarn(/Portal component is deprecated/);
+  });
+});