diff --git a/src/CollapsableMixin.js b/src/CollapsableMixin.js deleted file mode 100644 index 30ac3e0083..0000000000 --- a/src/CollapsableMixin.js +++ /dev/null @@ -1,40 +0,0 @@ -import assign from './utils/Object.assign'; -import deprecationWarning from './utils/deprecationWarning'; -import CollapsibleMixin from './CollapsibleMixin'; - -let link = 'https://github.com/react-bootstrap/react-bootstrap/issues/425#issuecomment-97110963'; - -const CollapsableMixin = assign({}, CollapsibleMixin, { - getCollapsableClassSet(className) { - deprecationWarning( - 'CollapsableMixin.getCollapsableClassSet()', - 'CollapsibleMixin.getCollapsibleClassSet()', - link - ); - return CollapsibleMixin.getCollapsibleClassSet.call(this, className); - }, - - getCollapsibleDOMNode() { - deprecationWarning( - 'CollapsableMixin.getCollapsableDOMNode()', - 'CollapsibleMixin.getCollapsibleDOMNode()', - link - ); - return this.getCollapsableDOMNode(); - }, - - getCollapsibleDimensionValue() { - deprecationWarning( - 'CollapsableMixin.getCollapsableDimensionValue()', - 'CollapsibleMixin.getCollapsibleDimensionValue()', - link - ); - return this.getCollapsableDimensionValue(); - }, - - componentDidMount() { - deprecationWarning('CollapsableMixin', 'CollapsibleMixin', link); - } -}); - -export default CollapsableMixin; diff --git a/src/CollapsableNav.js b/src/CollapsableNav.js deleted file mode 100644 index 904cf77139..0000000000 --- a/src/CollapsableNav.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import deprecationWarning from './utils/deprecationWarning'; -import assign from './utils/Object.assign'; -import CollapsibleNav from './CollapsibleNav'; - -const specCollapsableNav = assign({}, CollapsibleNav._spec, { - componentDidMount() { - deprecationWarning( - 'CollapsableNav', - 'CollapsibleNav', - 'https://github.com/react-bootstrap/react-bootstrap/issues/425#issuecomment-97110963' - ); - } -}); - -const CollapsableNav = React.createClass(specCollapsableNav); - -export default CollapsableNav; diff --git a/src/CollapsibleMixin.js b/src/CollapsibleMixin.js index 47a8f6b200..31895e4041 100644 --- a/src/CollapsibleMixin.js +++ b/src/CollapsibleMixin.js @@ -1,6 +1,5 @@ import React from 'react'; import TransitionEvents from './utils/TransitionEvents'; -import deprecationWarning from './utils/deprecationWarning'; const CollapsibleMixin = { @@ -138,15 +137,6 @@ const CollapsibleMixin = { }, dimension(){ - if (typeof this.getCollapsableDimension === 'function') { - deprecationWarning( - 'CollapsableMixin.getCollapsableDimension()', - 'CollapsibleMixin.getCollapsibleDimension()', - 'https://github.com/react-bootstrap/react-bootstrap/issues/425#issuecomment-97110963' - ); - return this.getCollapsableDimension(); - } - return (typeof this.getCollapsibleDimension === 'function') ? this.getCollapsibleDimension() : 'height'; diff --git a/src/CollapsibleNav.js b/src/CollapsibleNav.js index dab17622e9..1063764f60 100644 --- a/src/CollapsibleNav.js +++ b/src/CollapsibleNav.js @@ -3,19 +3,17 @@ import BootstrapMixin from './BootstrapMixin'; import CollapsibleMixin from './CollapsibleMixin'; import classNames from 'classnames'; import domUtils from './utils/domUtils'; -import collapsable from './utils/deprecatedProperty'; import ValidComponentChildren from './utils/ValidComponentChildren'; import createChainedFunction from './utils/createChainedFunction'; -const specCollapsibleNav = { +const CollapsibleNav = React.createClass({ mixins: [BootstrapMixin, CollapsibleMixin], propTypes: { onSelect: React.PropTypes.func, activeHref: React.PropTypes.string, activeKey: React.PropTypes.any, - collapsable, collapsible: React.PropTypes.bool, expanded: React.PropTypes.bool, eventKey: React.PropTypes.any @@ -48,16 +46,12 @@ const specCollapsibleNav = { /* * this.props.collapsible is set in NavBar when an eventKey is supplied. */ - const collapsible = this.props.collapsible || this.props.collapsable; - let classes = collapsible ? this.getCollapsibleClassSet('navbar-collapse') : null; + const classes = this.props.collapsible ? this.getCollapsibleClassSet('navbar-collapse') : null; + const renderChildren = this.props.collapsible ? this.renderCollapsibleNavChildren : this.renderChildren; return (
- {ValidComponentChildren.map(this.props.children, - collapsible ? - this.renderCollapsibleNavChildren : - this.renderChildren - )} + {ValidComponentChildren.map(this.props.children, renderChildren)}
); }, @@ -109,9 +103,6 @@ const specCollapsibleNav = { } ); } -}; - -const CollapsibleNav = React.createClass(specCollapsibleNav); -CollapsibleNav._spec = specCollapsibleNav; +}); export default CollapsibleNav; diff --git a/src/Nav.js b/src/Nav.js index 252592efa1..46049bf41f 100644 --- a/src/Nav.js +++ b/src/Nav.js @@ -3,7 +3,6 @@ import BootstrapMixin from './BootstrapMixin'; import CollapsibleMixin from './CollapsibleMixin'; import classNames from 'classnames'; import domUtils from './utils/domUtils'; -import collapsable from './utils/deprecatedProperty'; import ValidComponentChildren from './utils/ValidComponentChildren'; import createChainedFunction from './utils/createChainedFunction'; @@ -18,7 +17,6 @@ const Nav = React.createClass({ stacked: React.PropTypes.bool, justified: React.PropTypes.bool, onSelect: React.PropTypes.func, - collapsable, collapsible: React.PropTypes.bool, expanded: React.PropTypes.bool, navbar: React.PropTypes.bool, @@ -46,12 +44,9 @@ const Nav = React.createClass({ }, render() { - const collapsible = this.props.collapsible || this.props.collapsable; - let classes = collapsible ? this.getCollapsibleClassSet() : {}; + const classes = this.props.collapsible ? this.getCollapsibleClassSet('navbar-collapse') : null; - classes['navbar-collapse'] = collapsible; - - if (this.props.navbar && !collapsible) { + if (this.props.navbar && !this.props.collapsible) { return (this.renderUl()); } @@ -63,7 +58,7 @@ const Nav = React.createClass({ }, renderUl() { - let classes = this.getBsClassSet(); + const classes = this.getBsClassSet(); classes['nav-stacked'] = this.props.stacked; classes['nav-justified'] = this.props.justified; diff --git a/src/Panel.js b/src/Panel.js index 4f2ea19a1c..8da0fd687d 100644 --- a/src/Panel.js +++ b/src/Panel.js @@ -3,13 +3,11 @@ import classNames from 'classnames'; import BootstrapMixin from './BootstrapMixin'; import CollapsibleMixin from './CollapsibleMixin'; -import collapsable from './utils/deprecatedProperty'; const Panel = React.createClass({ mixins: [BootstrapMixin, CollapsibleMixin], propTypes: { - collapsable, collapsible: React.PropTypes.bool, onSelect: React.PropTypes.func, header: React.PropTypes.node, @@ -56,21 +54,18 @@ const Panel = React.createClass({ }, render() { - let classes = this.getBsClassSet(); - const collapsible = this.props.collapsible || this.props.collapsable; - return (
+ className={classNames(this.props.className, this.getBsClassSet())} + id={this.props.collapsible ? null : this.props.id} onSelect={null}> {this.renderHeading()} - {collapsible ? this.renderCollapsableBody() : this.renderBody()} + {this.props.collapsible ? this.renderCollapsibleBody() : this.renderBody()} {this.renderFooter()}
); }, - renderCollapsableBody() { + renderCollapsibleBody() { let collapseClass = this.prefixClass('collapse'); return ( @@ -147,21 +142,20 @@ const Panel = React.createClass({ renderHeading() { let header = this.props.header; - const collapsible = this.props.collapsible || this.props.collapsable; if (!header) { return null; } if (!React.isValidElement(header) || Array.isArray(header)) { - header = collapsible ? - this.renderCollapsableTitle(header) : header; + header = this.props.collapsible ? + this.renderCollapsibleTitle(header) : header; } else { const className = classNames( this.prefixClass('title'), header.props.className ); - if (collapsible) { + if (this.props.collapsible) { header = cloneElement(header, { className, children: this.renderAnchor(header.props.children) @@ -190,7 +184,7 @@ const Panel = React.createClass({ ); }, - renderCollapsableTitle(header) { + renderCollapsibleTitle(header) { return (

{this.renderAnchor(header)} diff --git a/src/index.js b/src/index.js index 118bacd7d9..27a3d931f3 100644 --- a/src/index.js +++ b/src/index.js @@ -8,12 +8,10 @@ import Button from './Button'; import ButtonGroup from './ButtonGroup'; import ButtonInput from './ButtonInput'; import ButtonToolbar from './ButtonToolbar'; -import CollapsableNav from './CollapsableNav'; import CollapsibleNav from './CollapsibleNav'; import Carousel from './Carousel'; import CarouselItem from './CarouselItem'; import Col from './Col'; -import CollapsableMixin from './CollapsableMixin'; import CollapsibleMixin from './CollapsibleMixin'; import DropdownButton from './DropdownButton'; import DropdownMenu from './DropdownMenu'; @@ -64,12 +62,10 @@ export default { ButtonGroup, ButtonInput, ButtonToolbar, - CollapsableNav, CollapsibleNav, Carousel, CarouselItem, Col, - CollapsableMixin, CollapsibleMixin, DropdownButton, DropdownMenu, diff --git a/src/utils/deprecatedProperty.js b/src/utils/deprecatedProperty.js deleted file mode 100644 index 06732193c3..0000000000 --- a/src/utils/deprecatedProperty.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import deprecationWarning from './deprecationWarning'; - -export default function collapsable(props, propName, componentName) { - if (props[propName] !== undefined) { - deprecationWarning( - `${propName} in ${componentName}`, - 'collapsible', - 'https://github.com/react-bootstrap/react-bootstrap/issues/425' - ); - } - return React.PropTypes.bool.call(null, props, propName, componentName); -} diff --git a/test/CollapsableMixinSpec.js b/test/CollapsableMixinSpec.js deleted file mode 100644 index f3480f9634..0000000000 --- a/test/CollapsableMixinSpec.js +++ /dev/null @@ -1,236 +0,0 @@ -import React from 'react'; -import ReactTestUtils from 'react/lib/ReactTestUtils'; -import CollapsableMixin from '../src/CollapsableMixin'; -import classNames from 'classnames'; -import {shouldWarn} from './helpers'; - -describe('CollapsableMixin', function () { - - let Component, instance; - - beforeEach(function(){ - Component = React.createClass({ - mixins: [CollapsableMixin], - - getCollapsableDOMNode(){ - return this.refs.panel.getDOMNode(); - }, - - getCollapsableDimensionValue(){ - return 15; - }, - - render(){ - let styles = this.getCollapsableClassSet(); - return ( -
-
- {this.props.children} -
-
- ); - } - }); - }); - - describe('getInitialState', function(){ - it('Should check defaultExpanded', function () { - instance = ReactTestUtils.renderIntoDocument( - Panel content - ); - let state = instance.getInitialState(); - assert.ok(state.expanded === true); - shouldWarn('deprecated'); - }); - - it('Should default collapsing to false', function () { - instance = ReactTestUtils.renderIntoDocument( - Panel content - ); - let state = instance.getInitialState(); - assert.ok(state.collapsing === false); - shouldWarn('deprecated'); - }); - }); - - describe('collapsed', function(){ - it('Should have collapse class', function () { - instance = ReactTestUtils.renderIntoDocument( - Panel content - ); - assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'collapse')); - shouldWarn('deprecated'); - }); - }); - - describe('from collapsed to expanded', function(){ - beforeEach(function(){ - instance = ReactTestUtils.renderIntoDocument( - Panel content - ); - }); - - it('Should have collapsing class', function () { - instance.setProps({expanded:true}); - let node = instance.getCollapsableDOMNode(); - assert.equal(node.className, 'collapsing'); - shouldWarn('deprecated'); - }); - - it('Should set initial 0px height', function () { - let node = instance.getCollapsableDOMNode(); - assert.equal(node.style.height, ''); - - instance._afterWillUpdate = function(){ - assert.equal(node.style.height, '0px'); - }; - - instance.setProps({expanded:true}); - shouldWarn('deprecated'); - }); - - it('Should set transition to height', function () { - let node = instance.getCollapsableDOMNode(); - assert.equal(node.styled, undefined); - - instance.setProps({expanded:true}); - assert.equal(node.style.height, '15px'); - shouldWarn('deprecated'); - }); - - it('Should transition from collapsing to not collapsing', function (done) { - instance._addEndEventListener = function(node, complete){ - setTimeout(function(){ - complete(); - assert.ok(!instance.state.collapsing); - shouldWarn('deprecated'); - done(); - }, 100); - }; - instance.setProps({expanded:true}); - assert.ok(instance.state.collapsing); - }); - - it('Should clear height after transition complete', function (done) { - let node = instance.getCollapsableDOMNode(); - - instance._addEndEventListener = function(nodeInner, complete){ - setTimeout(function(){ - complete(); - assert.equal(nodeInner.style.height, ''); - shouldWarn('deprecated'); - done(); - }, 100); - }; - - assert.equal(node.style.height, ''); - instance.setProps({expanded:true}); - assert.equal(node.style.height, '15px'); - }); - }); - - describe('from expanded to collapsed', function(){ - beforeEach(function(){ - instance = ReactTestUtils.renderIntoDocument( - Panel content - ); - }); - - it('Should have collapsing class', function () { - instance.setProps({expanded:false}); - let node = instance.getCollapsableDOMNode(); - assert.equal(node.className, 'collapsing'); - shouldWarn('deprecated'); - }); - - it('Should set initial height', function () { - let node = instance.getCollapsableDOMNode(); - - instance._afterWillUpdate = function(){ - assert.equal(node.style.height, '15px'); - }; - - assert.equal(node.style.height, ''); - instance.setProps({expanded:false}); - shouldWarn('deprecated'); - }); - - it('Should set transition to height', function () { - let node = instance.getCollapsableDOMNode(); - assert.equal(node.style.height, ''); - - instance.setProps({expanded:false}); - assert.equal(node.style.height, '0px'); - shouldWarn('deprecated'); - }); - - it('Should transition from collapsing to not collapsing', function (done) { - instance._addEndEventListener = function(node, complete){ - setTimeout(function(){ - complete(); - assert.ok(!instance.state.collapsing); - shouldWarn('deprecated'); - done(); - }, 100); - }; - instance.setProps({expanded:false}); - assert.ok(instance.state.collapsing); - }); - - it('Should have 0px height after transition complete', function (done) { - let node = instance.getCollapsableDOMNode(); - - instance._addEndEventListener = function(nodeInner, complete){ - setTimeout(function(){ - complete(); - assert.ok(nodeInner.style.height === '0px'); - shouldWarn('deprecated'); - done(); - }, 100); - }; - - assert.equal(node.style.height, ''); - instance.setProps({expanded:false}); - assert.equal(node.style.height, '0px'); - }); - }); - - describe('expanded', function(){ - it('Should have collapse and in class', function () { - instance = ReactTestUtils.renderIntoDocument( - Panel content - ); - assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'collapse in')); - shouldWarn('deprecated'); - }); - - it('Should have collapse and in class with defaultExpanded', function () { - instance = ReactTestUtils.renderIntoDocument( - Panel content - ); - assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'collapse in')); - shouldWarn('deprecated'); - }); - }); - - describe('dimension', function(){ - beforeEach(function(){ - instance = ReactTestUtils.renderIntoDocument( - Panel content - ); - }); - - it('Defaults to height', function(){ - assert.equal(instance.dimension(), 'height'); - shouldWarn('deprecated'); - }); - - it('Uses getCollapsableDimension if exists', function(){ - instance.getCollapsableDimension = function(){ - return 'whatevs'; - }; - assert.equal(instance.dimension(), 'whatevs'); - shouldWarn('deprecated'); - }); - }); -}); diff --git a/test/CollapsableNavSpec.js b/test/CollapsableNavSpec.js deleted file mode 100644 index 2940bab513..0000000000 --- a/test/CollapsableNavSpec.js +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; -import ReactTestUtils from 'react/lib/ReactTestUtils'; -import CollapsibleNav from '../src/CollapsibleNav'; -import Nav from '../src/Nav'; -import Panel from '../src/Panel'; -import {shouldWarn} from './helpers'; - -describe('Deprecations for collapsable property in CollapsibleNav', function () { - it('Should not warn about deprecation when collaps_i_ble property is used', function () { - let Component = React.createClass({ - render() { - return ( - - ); - } - }); - ReactTestUtils.renderIntoDocument(); - - console.warn.called.should.be.false; - }); - - it('Should warn about deprecation when collaps_a_ble property is used', function () { - let Component = React.createClass({ - render() { - return ( - - ); - } - }); - ReactTestUtils.renderIntoDocument(); - - shouldWarn('deprecated'); - }); -}); - -describe('Deprecations for collapsable property in Panel', function () { - it('Should not warn about deprecation when collaps_i_ble property is used', function () { - let Component = React.createClass({ - render() { - return ( - - ); - } - }); - ReactTestUtils.renderIntoDocument(); - - console.warn.called.should.be.false; - }); - - it('Should warn about deprecation when collaps_a_ble property is used', function () { - let Component = React.createClass({ - render() { - return ( - - ); - } - }); - ReactTestUtils.renderIntoDocument(); - - shouldWarn('deprecated'); - }); -}); - -describe('Deprecations for collapsable property in Nav', function () { - it('Should not warn about deprecation when collaps_i_ble property is used', function () { - let Component = React.createClass({ - render() { - return ( -