You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
4.4 KiB
150 lines
4.4 KiB
"use strict"; |
|
|
|
var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; }; |
|
|
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; |
|
|
|
var _react = require("react"); |
|
|
|
var React = _interopRequire(_react); |
|
|
|
var cloneElement = _react.cloneElement; |
|
|
|
var BootstrapMixin = _interopRequire(require("./BootstrapMixin")); |
|
|
|
var ValidComponentChildren = _interopRequire(require("./utils/ValidComponentChildren")); |
|
|
|
var Nav = _interopRequire(require("./Nav")); |
|
|
|
var NavItem = _interopRequire(require("./NavItem")); |
|
|
|
function getDefaultActiveKeyFromChildren(children) { |
|
var defaultActiveKey = undefined; |
|
|
|
ValidComponentChildren.forEach(children, function (child) { |
|
if (defaultActiveKey == null) { |
|
defaultActiveKey = child.props.eventKey; |
|
} |
|
}); |
|
|
|
return defaultActiveKey; |
|
} |
|
|
|
var TabbedArea = React.createClass({ |
|
displayName: "TabbedArea", |
|
|
|
mixins: [BootstrapMixin], |
|
|
|
propTypes: { |
|
activeKey: React.PropTypes.any, |
|
defaultActiveKey: React.PropTypes.any, |
|
bsStyle: React.PropTypes.oneOf(["tabs", "pills"]), |
|
animation: React.PropTypes.bool, |
|
id: React.PropTypes.string, |
|
onSelect: React.PropTypes.func |
|
}, |
|
|
|
getDefaultProps: function getDefaultProps() { |
|
return { |
|
bsStyle: "tabs", |
|
animation: true |
|
}; |
|
}, |
|
|
|
getInitialState: function getInitialState() { |
|
var defaultActiveKey = this.props.defaultActiveKey != null ? this.props.defaultActiveKey : getDefaultActiveKeyFromChildren(this.props.children); |
|
|
|
// TODO: In __DEV__ mode warn via `console.warn` if no `defaultActiveKey` has |
|
// been set by this point, invalid children or missing key properties are likely the cause. |
|
|
|
return { |
|
activeKey: defaultActiveKey, |
|
previousActiveKey: null |
|
}; |
|
}, |
|
|
|
componentWillReceiveProps: function componentWillReceiveProps(nextProps) { |
|
if (nextProps.activeKey != null && nextProps.activeKey !== this.props.activeKey) { |
|
this.setState({ |
|
previousActiveKey: this.props.activeKey |
|
}); |
|
} |
|
}, |
|
|
|
handlePaneAnimateOutEnd: function handlePaneAnimateOutEnd() { |
|
this.setState({ |
|
previousActiveKey: null |
|
}); |
|
}, |
|
|
|
render: function render() { |
|
var activeKey = this.props.activeKey != null ? this.props.activeKey : this.state.activeKey; |
|
|
|
function renderTabIfSet(child) { |
|
return child.props.tab != null ? this.renderTab(child) : null; |
|
} |
|
|
|
var nav = React.createElement( |
|
Nav, |
|
_extends({}, this.props, { activeKey: activeKey, onSelect: this.handleSelect, ref: "tabs" }), |
|
ValidComponentChildren.map(this.props.children, renderTabIfSet, this) |
|
); |
|
|
|
return React.createElement( |
|
"div", |
|
null, |
|
nav, |
|
React.createElement( |
|
"div", |
|
{ id: this.props.id, className: "tab-content", ref: "panes" }, |
|
ValidComponentChildren.map(this.props.children, this.renderPane) |
|
) |
|
); |
|
}, |
|
|
|
getActiveKey: function getActiveKey() { |
|
return this.props.activeKey != null ? this.props.activeKey : this.state.activeKey; |
|
}, |
|
|
|
renderPane: function renderPane(child, index) { |
|
var activeKey = this.getActiveKey(); |
|
|
|
return cloneElement(child, { |
|
active: child.props.eventKey === activeKey && (this.state.previousActiveKey == null || !this.props.animation), |
|
key: child.key ? child.key : index, |
|
animation: this.props.animation, |
|
onAnimateOutEnd: this.state.previousActiveKey != null && child.props.eventKey === this.state.previousActiveKey ? this.handlePaneAnimateOutEnd : null |
|
}); |
|
}, |
|
|
|
renderTab: function renderTab(child) { |
|
var key = child.props.eventKey; |
|
return React.createElement( |
|
NavItem, |
|
{ |
|
ref: "tab" + key, |
|
eventKey: key }, |
|
child.props.tab |
|
); |
|
}, |
|
|
|
shouldComponentUpdate: function shouldComponentUpdate() { |
|
// Defer any updates to this component during the `onSelect` handler. |
|
return !this._isChanging; |
|
}, |
|
|
|
handleSelect: function handleSelect(key) { |
|
if (this.props.onSelect) { |
|
this._isChanging = true; |
|
this.props.onSelect(key); |
|
this._isChanging = false; |
|
} else if (key !== this.getActiveKey()) { |
|
this.setState({ |
|
activeKey: key, |
|
previousActiveKey: this.getActiveKey() |
|
}); |
|
} |
|
} |
|
}); |
|
|
|
module.exports = TabbedArea; |