111 lines
2.8 KiB
JavaScript
111 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
|
import style from './style';
|
|
|
|
export default React.createClass({
|
|
mixins: [PureRenderMixin],
|
|
|
|
displayName: 'Tabs',
|
|
|
|
propTypes: {
|
|
className: React.PropTypes.string,
|
|
index: React.PropTypes.number.isRequired,
|
|
onChange: React.PropTypes.func
|
|
},
|
|
|
|
getDefaultProps () {
|
|
return {
|
|
className: '',
|
|
index: 0
|
|
};
|
|
},
|
|
|
|
getInitialState () {
|
|
return {
|
|
index: this.props.index,
|
|
pointer: {}
|
|
};
|
|
},
|
|
|
|
componentDidMount () {
|
|
this.setState({
|
|
pointer: this._pointerPosition(this.state.index, this.refs.navigation)
|
|
});
|
|
},
|
|
|
|
componentWillReceiveProps (next_props) {
|
|
const index = next_props.index || this.state.index;
|
|
this.setState({
|
|
index: index,
|
|
pointer: this._pointerPosition(index, this.refs.navigation)
|
|
});
|
|
},
|
|
|
|
_pointerPosition (index = 0, navigation) {
|
|
const startPoint = this.refs.tabs.getBoundingClientRect().left;
|
|
const label = navigation.children[index].getBoundingClientRect();
|
|
|
|
return {
|
|
top: `${navigation.getBoundingClientRect().height}px`,
|
|
left: `${label.left - startPoint}px`,
|
|
width: `${label.width}px`
|
|
};
|
|
},
|
|
|
|
onClick (index) {
|
|
this.setState({
|
|
index: index,
|
|
pointer: this._pointerPosition(index, this.refs.navigation)
|
|
});
|
|
if (this.props.onChange) this.props.onChange(this);
|
|
},
|
|
|
|
renderLabels (labels) {
|
|
return labels.map((props) => {
|
|
return <label {...props}>{ props.label }</label>;
|
|
});
|
|
},
|
|
|
|
render () {
|
|
let labels = [];
|
|
|
|
const tabs = this.props.children.map((tab, index) => {
|
|
let active = this.state.index === index;
|
|
let className = `${style.label} ${tab.props.className}`;
|
|
|
|
if (active) className += ` ${style.active}`;
|
|
if (tab.props.disabled) className += ` ${style.disabled}`;
|
|
if (tab.props.hidden) className += ` ${style.hidden}`;
|
|
|
|
labels.push({
|
|
className: className,
|
|
label: tab.props.label,
|
|
key: index,
|
|
onClick: !tab.props.disabled ? this.onClick.bind(null, index) : null
|
|
});
|
|
|
|
return React.cloneElement(tab, {active: active, key: index, tabIndex: index });
|
|
});
|
|
|
|
let className = style.root;
|
|
if (this.props.className) className += ` ${this.props.className}`;
|
|
|
|
return (
|
|
<div data-react-toolbox='tabs' ref='tabs' className={className} data-flex='vertical'>
|
|
<nav className={style.navigation} ref='navigation' data-flex='horizontal'>
|
|
{ this.renderLabels(labels) }
|
|
</nav>
|
|
<span className={style.pointer} style={this.state.pointer} />
|
|
{ tabs }
|
|
</div>
|
|
);
|
|
},
|
|
|
|
active (value) {
|
|
this.setState({active: value});
|
|
if (this.props.onActive && value) {
|
|
this.props.onActive(this);
|
|
}
|
|
}
|
|
});
|