Skip to content

Commit e7cf455

Browse files
author
Caroline Taymor
committed
[changed] New Tabs API
* Deprecates TabbedArea and TabPane * Adds Tabs (formerly TabbedArea) and Tab (formerly TabPane) * `tab` attribute is renamed to `title` * Removes tests for TabbedArea and TabPane (because the deprecation warning fails them all) * Update docs to use Tabs and Tab examples Signed-off-by: Kenny Wang <[email protected]> Signed-off-by: Caroline Taymor <[email protected]> Signed-off-by: Dominick Reinhold <[email protected]>
1 parent df1db7b commit e7cf455

17 files changed

+462
-407
lines changed

‎docs/examples/.eslintrc

+2
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,11 @@
4747
"ProgressBar",
4848
"Row",
4949
"SplitButton",
50+
"Tab",
5051
"TabbedArea",
5152
"Table",
5253
"TabPane",
54+
"Tabs",
5355
"Tooltip",
5456
"Well",
5557
"Thumbnail",

‎docs/examples/TabbedAreaControlled.js

-24
This file was deleted.

‎docs/examples/TabbedAreaNoAnimation.js

-9
This file was deleted.

‎docs/examples/TabbedAreaUncontrolled.js

-9
This file was deleted.

‎docs/examples/TabsControlled.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const ControlledTabs = React.createClass({
2+
getInitialState() {
3+
return {
4+
key: 1
5+
};
6+
},
7+
8+
handleSelect(key) {
9+
alert('selected ' + key);
10+
this.setState({key});
11+
},
12+
13+
render() {
14+
return (
15+
<Tabs activeKey={this.state.key} onSelect={this.handleSelect}>
16+
<Tab eventKey={1} title='Tab 1'>Tab 1 content</Tab>
17+
<Tab eventKey={2} title='Tab 2'>Tab 2 content</Tab>
18+
<Tab eventKey={3} title='Tab 3' disabled>Tab 3 content</Tab>
19+
</Tabs>
20+
);
21+
}
22+
});
23+
24+
React.render(<ControlledTabs />, mountNode);

‎docs/examples/TabsNoAnimation.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const tabsInstance = (
2+
<Tabs defaultActiveKey={1} animation={false}>
3+
<Tab eventKey={1} title='Tab 1'>Tab 1 content</Tab>
4+
<Tab eventKey={2} title='Tab 2'>Tab 2 content</Tab>
5+
<Tab eventKey={3} title='Tab 3' disabled>Tab 3 content</Tab>
6+
</Tabs>
7+
);
8+
9+
React.render(tabsInstance, mountNode);

‎docs/examples/TabsUncontrolled.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const tabsInstance = (
2+
<Tabs defaultActiveKey={2}>
3+
<Tab eventKey={1} title='Tab 1'>Tab 1 content</Tab>
4+
<Tab eventKey={2} title='Tab 2'>Tab 2 content</Tab>
5+
<Tab eventKey={3} title='Tab 3' disabled>Tab 3 content</Tab>
6+
</Tabs>
7+
);
8+
9+
React.render(tabsInstance, mountNode);

‎docs/src/ComponentsPage.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -519,15 +519,15 @@ const ComponentsPage = React.createClass({
519519

520520
<h3><Anchor id='tabs-uncontrolled'>Uncontrolled</Anchor></h3>
521521
<p>Allow the component to control its own state.</p>
522-
<ReactPlayground codeText={Samples.TabbedAreaUncontrolled} exampleClassName='bs-example-tabs' />
522+
<ReactPlayground codeText={Samples.TabsUncontrolled} exampleClassName='bs-example-tabs' />
523523

524524
<h3><Anchor id='tabs-controlled'>Controlled</Anchor></h3>
525525
<p>Pass down the active state on render via props.</p>
526-
<ReactPlayground codeText={Samples.TabbedAreaControlled} exampleClassName='bs-example-tabs' />
526+
<ReactPlayground codeText={Samples.TabsControlled} exampleClassName='bs-example-tabs' />
527527

528528
<h3><Anchor id='tabs-no-animation'>No animation</Anchor></h3>
529529
<p>Set the <code>animation</code> prop to <code>false</code></p>
530-
<ReactPlayground codeText={Samples.TabbedAreaNoAnimation} exampleClassName='bs-example-tabs' />
530+
<ReactPlayground codeText={Samples.TabsNoAnimation} exampleClassName='bs-example-tabs' />
531531

532532
<div className='bs-callout bs-callout-info'>
533533
<h4>Extends tabbed navigation</h4>
@@ -536,11 +536,11 @@ const ComponentsPage = React.createClass({
536536

537537
<h3><Anchor id='tabs-props'>Props</Anchor></h3>
538538

539-
<h4><Anchor id='tabs-props-area'>TabbedArea</Anchor></h4>
540-
<PropTable component='TabbedArea'/>
539+
<h4><Anchor id='tabs-props-area'>Tabs</Anchor></h4>
540+
<PropTable component='Tabs'/>
541541

542-
<h4><Anchor id='tabs-props-pane'>TabPane</Anchor></h4>
543-
<PropTable component='TabPane'/>
542+
<h4><Anchor id='tabs-props-pane'>Tab</Anchor></h4>
543+
<PropTable component='Tab'/>
544544
</div>
545545

546546
{/* Pager */}

‎docs/src/ReactPlayground.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ const Portal = require('../../src/Portal');
4646
const ProgressBar = require('../../src/ProgressBar');
4747
const Row = require('../../src/Row');
4848
const SplitButton = require('../../src/SplitButton');
49-
const TabbedArea = require('../../src/TabbedArea');
49+
const Tab = require('../../src/Tab');
5050
const Table = require('../../src/Table');
51-
const TabPane = require('../../src/TabPane');
51+
const Tabs = require('../../src/Tabs');
5252
const Thumbnail = require('../../src/Thumbnail');
5353
const Tooltip = require('../../src/Tooltip');
5454
const Well = require('../../src/Well');

‎docs/src/Samples.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,9 @@ export default {
6161
NavbarBrand: require('fs').readFileSync(__dirname + '/../examples/NavbarBrand.js', 'utf8'),
6262
NavbarCollapsible: require('fs').readFileSync(__dirname + '/../examples/NavbarCollapsible.js', 'utf8'),
6363
CollapsibleNav: require('fs').readFileSync(__dirname + '/../examples/CollapsibleNav.js', 'utf8'),
64-
TabbedAreaUncontrolled: require('fs').readFileSync(__dirname + '/../examples/TabbedAreaUncontrolled.js', 'utf8'),
65-
TabbedAreaControlled: require('fs').readFileSync(__dirname + '/../examples/TabbedAreaControlled.js', 'utf8'),
66-
TabbedAreaNoAnimation: require('fs').readFileSync(__dirname + '/../examples/TabbedAreaNoAnimation.js', 'utf8'),
64+
TabsUncontrolled: require('fs').readFileSync(__dirname + '/../examples/TabsUncontrolled.js', 'utf8'),
65+
TabsControlled: require('fs').readFileSync(__dirname + '/../examples/TabsControlled.js', 'utf8'),
66+
TabsNoAnimation: require('fs').readFileSync(__dirname + '/../examples/TabsNoAnimation.js', 'utf8'),
6767
PagerDefault: require('fs').readFileSync(__dirname + '/../examples/PagerDefault.js', 'utf8'),
6868
PagerAligned: require('fs').readFileSync(__dirname + '/../examples/PagerAligned.js', 'utf8'),
6969
PagerDisabled: require('fs').readFileSync(__dirname + '/../examples/PagerDisabled.js', 'utf8'),

‎src/Tab.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React from 'react';
2+
import classNames from 'classnames';
3+
import TransitionEvents from './utils/TransitionEvents';
4+
5+
const Tab = React.createClass({
6+
propTypes: {
7+
active: React.PropTypes.bool,
8+
animation: React.PropTypes.bool,
9+
onAnimateOutEnd: React.PropTypes.func,
10+
disabled: React.PropTypes.bool,
11+
title: React.PropTypes.node
12+
},
13+
14+
getDefaultProps() {
15+
return {
16+
animation: true
17+
};
18+
},
19+
20+
getInitialState() {
21+
return {
22+
animateIn: false,
23+
animateOut: false
24+
};
25+
},
26+
27+
componentWillReceiveProps(nextProps) {
28+
if (this.props.animation) {
29+
if (!this.state.animateIn && nextProps.active && !this.props.active) {
30+
this.setState({
31+
animateIn: true
32+
});
33+
} else if (!this.state.animateOut && !nextProps.active && this.props.active) {
34+
this.setState({
35+
animateOut: true
36+
});
37+
}
38+
}
39+
},
40+
41+
componentDidUpdate() {
42+
if (this.state.animateIn) {
43+
setTimeout(this.startAnimateIn, 0);
44+
}
45+
if (this.state.animateOut) {
46+
TransitionEvents.addEndEventListener(
47+
React.findDOMNode(this),
48+
this.stopAnimateOut
49+
);
50+
}
51+
},
52+
53+
startAnimateIn() {
54+
if (this.isMounted()) {
55+
this.setState({
56+
animateIn: false
57+
});
58+
}
59+
},
60+
61+
stopAnimateOut() {
62+
if (this.isMounted()) {
63+
this.setState({
64+
animateOut: false
65+
});
66+
67+
if (this.props.onAnimateOutEnd) {
68+
this.props.onAnimateOutEnd();
69+
}
70+
}
71+
},
72+
73+
render() {
74+
let classes = {
75+
'tab-pane': true,
76+
'fade': true,
77+
'active': this.props.active || this.state.animateOut,
78+
'in': this.props.active && !this.state.animateIn
79+
};
80+
81+
return (
82+
<div {...this.props}
83+
role='tabpanel'
84+
aria-hidden={!this.props.active}
85+
className={classNames(this.props.className, classes)}
86+
>
87+
{this.props.children}
88+
</div>
89+
);
90+
}
91+
});
92+
93+
export default Tab;

‎src/TabPane.js

+5-81
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,14 @@
11
import React from 'react';
2-
import classNames from 'classnames';
3-
import TransitionEvents from './utils/TransitionEvents';
2+
import deprecationWarning from './utils/deprecationWarning';
3+
import Tab from './Tab';
44

55
const TabPane = React.createClass({
6-
propTypes: {
7-
active: React.PropTypes.bool,
8-
animation: React.PropTypes.bool,
9-
onAnimateOutEnd: React.PropTypes.func,
10-
disabled: React.PropTypes.bool
6+
componentDidMount() {
7+
deprecationWarning('TabPane', 'Tab', 'https://github.com/react-bootstrap/react-bootstrap/pull/1091');
118
},
12-
13-
getDefaultProps() {
14-
return {
15-
animation: true
16-
};
17-
},
18-
19-
getInitialState() {
20-
return {
21-
animateIn: false,
22-
animateOut: false
23-
};
24-
},
25-
26-
componentWillReceiveProps(nextProps) {
27-
if (this.props.animation) {
28-
if (!this.state.animateIn && nextProps.active && !this.props.active) {
29-
this.setState({
30-
animateIn: true
31-
});
32-
} else if (!this.state.animateOut && !nextProps.active && this.props.active) {
33-
this.setState({
34-
animateOut: true
35-
});
36-
}
37-
}
38-
},
39-
40-
componentDidUpdate() {
41-
if (this.state.animateIn) {
42-
setTimeout(this.startAnimateIn, 0);
43-
}
44-
if (this.state.animateOut) {
45-
TransitionEvents.addEndEventListener(
46-
React.findDOMNode(this),
47-
this.stopAnimateOut
48-
);
49-
}
50-
},
51-
52-
startAnimateIn() {
53-
if (this.isMounted()) {
54-
this.setState({
55-
animateIn: false
56-
});
57-
}
58-
},
59-
60-
stopAnimateOut() {
61-
if (this.isMounted()) {
62-
this.setState({
63-
animateOut: false
64-
});
65-
66-
if (this.props.onAnimateOutEnd) {
67-
this.props.onAnimateOutEnd();
68-
}
69-
}
70-
},
71-
729
render() {
73-
let classes = {
74-
'tab-pane': true,
75-
'fade': true,
76-
'active': this.props.active || this.state.animateOut,
77-
'in': this.props.active && !this.state.animateIn
78-
};
79-
8010
return (
81-
<div {...this.props}
82-
role='tabpanel'
83-
aria-hidden={!this.props.active}
84-
className={classNames(this.props.className, classes)}
85-
>
86-
{this.props.children}
87-
</div>
11+
<Tab {...this.props} />
8812
);
8913
}
9014
});

0 commit comments

Comments
 (0)