diff --git a/src/Collapse.js b/src/Collapse.js index cc2bb5b407..90ed83eb51 100644 --- a/src/Collapse.js +++ b/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); diff --git a/src/Fade.js b/src/Fade.js index 8cc5c761e4..62ce1b6798 100644 --- a/src/Fade.js +++ b/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() { diff --git a/src/Modal.js b/src/Modal.js index 7bc2677c4a..1f809bb2c6 100644 --- a/src/Modal.js +++ b/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({
{ animation - ? {backdrop} + ? {backdrop} : backdrop } {modal} diff --git a/src/Portal.js b/src/Portal.js index 9741a0f1d5..f27c32eb5c 100644 --- a/src/Portal.js +++ b/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' +}); + diff --git a/src/Position.js b/src/Position.js index 4c20168ae9..903b35879b 100644 --- a/src/Position.js +++ b/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' +}); diff --git a/src/Transition.js b/src/Transition.js index 3ba7d50deb..5dea099006 100644 --- a/src/Transition.js +++ b/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' +}); diff --git a/src/utils/deprecationWarning.js b/src/utils/deprecationWarning.js index e4115967c9..3028dc2f10 100644 --- a/src/utils/deprecationWarning.js +++ b/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; + diff --git a/test/OverlayDeprecationSpec.js b/test/OverlayDeprecationSpec.js new file mode 100644 index 0000000000..c8eb2f03f7 --- /dev/null +++ b/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(
); + + shouldWarn(/Position component is deprecated/); + }); + + it('should warn about Transition', ()=>{ + ReactTestUtils.renderIntoDocument(
); + + shouldWarn(/Transition component is deprecated/); + }); + + it('should warn about Portal', ()=>{ + ReactTestUtils.renderIntoDocument(
); + + shouldWarn(/Portal component is deprecated/); + }); +});