proxy-based Twister client written with react-js
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.7 KiB

define(["exports", "module", "react", "./BootstrapMixin", "./utils/ValidComponentChildren", "./Nav", "./NavItem"], function (exports, module, _react, _BootstrapMixin, _utilsValidComponentChildren, _Nav, _NavItem) {
"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 = _interopRequire(_react);
var cloneElement = _react.cloneElement;
var BootstrapMixin = _interopRequire(_BootstrapMixin);
var ValidComponentChildren = _interopRequire(_utilsValidComponentChildren);
var Nav = _interopRequire(_Nav);
var NavItem = _interopRequire(_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;
});