forked from react-bootstrap/react-bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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]>
- Loading branch information
Caroline Taymor
committed
Aug 12, 2015
1 parent
df1db7b
commit e7cf455
Showing
17 changed files
with
462 additions
and
407 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| const ControlledTabs = React.createClass({ | ||
| getInitialState() { | ||
| return { | ||
| key: 1 | ||
| }; | ||
| }, | ||
|
|
||
| handleSelect(key) { | ||
| alert('selected ' + key); | ||
| this.setState({key}); | ||
| }, | ||
|
|
||
| render() { | ||
| return ( | ||
| <Tabs activeKey={this.state.key} onSelect={this.handleSelect}> | ||
| <Tab eventKey={1} title='Tab 1'>Tab 1 content</Tab> | ||
| <Tab eventKey={2} title='Tab 2'>Tab 2 content</Tab> | ||
| <Tab eventKey={3} title='Tab 3' disabled>Tab 3 content</Tab> | ||
| </Tabs> | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| React.render(<ControlledTabs />, mountNode); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| const tabsInstance = ( | ||
| <Tabs defaultActiveKey={1} animation={false}> | ||
| <Tab eventKey={1} title='Tab 1'>Tab 1 content</Tab> | ||
| <Tab eventKey={2} title='Tab 2'>Tab 2 content</Tab> | ||
| <Tab eventKey={3} title='Tab 3' disabled>Tab 3 content</Tab> | ||
| </Tabs> | ||
| ); | ||
|
|
||
| React.render(tabsInstance, mountNode); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| const tabsInstance = ( | ||
| <Tabs defaultActiveKey={2}> | ||
| <Tab eventKey={1} title='Tab 1'>Tab 1 content</Tab> | ||
| <Tab eventKey={2} title='Tab 2'>Tab 2 content</Tab> | ||
| <Tab eventKey={3} title='Tab 3' disabled>Tab 3 content</Tab> | ||
| </Tabs> | ||
| ); | ||
|
|
||
| React.render(tabsInstance, mountNode); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import React from 'react'; | ||
| import classNames from 'classnames'; | ||
| import TransitionEvents from './utils/TransitionEvents'; | ||
|
|
||
| const Tab = React.createClass({ | ||
| propTypes: { | ||
| active: React.PropTypes.bool, | ||
| animation: React.PropTypes.bool, | ||
| onAnimateOutEnd: React.PropTypes.func, | ||
| disabled: React.PropTypes.bool, | ||
| title: React.PropTypes.node | ||
| }, | ||
|
|
||
| getDefaultProps() { | ||
| return { | ||
| animation: true | ||
| }; | ||
| }, | ||
|
|
||
| getInitialState() { | ||
| return { | ||
| animateIn: false, | ||
| animateOut: false | ||
| }; | ||
| }, | ||
|
|
||
| componentWillReceiveProps(nextProps) { | ||
| if (this.props.animation) { | ||
| if (!this.state.animateIn && nextProps.active && !this.props.active) { | ||
| this.setState({ | ||
| animateIn: true | ||
| }); | ||
| } else if (!this.state.animateOut && !nextProps.active && this.props.active) { | ||
| this.setState({ | ||
| animateOut: true | ||
| }); | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| componentDidUpdate() { | ||
| if (this.state.animateIn) { | ||
| setTimeout(this.startAnimateIn, 0); | ||
| } | ||
| if (this.state.animateOut) { | ||
| TransitionEvents.addEndEventListener( | ||
| React.findDOMNode(this), | ||
| this.stopAnimateOut | ||
| ); | ||
| } | ||
| }, | ||
|
|
||
| startAnimateIn() { | ||
| if (this.isMounted()) { | ||
| this.setState({ | ||
| animateIn: false | ||
| }); | ||
| } | ||
| }, | ||
|
|
||
| stopAnimateOut() { | ||
| if (this.isMounted()) { | ||
| this.setState({ | ||
| animateOut: false | ||
| }); | ||
|
|
||
| if (this.props.onAnimateOutEnd) { | ||
| this.props.onAnimateOutEnd(); | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| render() { | ||
| let classes = { | ||
| 'tab-pane': true, | ||
| 'fade': true, | ||
| 'active': this.props.active || this.state.animateOut, | ||
| 'in': this.props.active && !this.state.animateIn | ||
| }; | ||
|
|
||
| return ( | ||
| <div {...this.props} | ||
| role='tabpanel' | ||
| aria-hidden={!this.props.active} | ||
| className={classNames(this.props.className, classes)} | ||
| > | ||
| {this.props.children} | ||
| </div> | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| export default Tab; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.