2015-10-11 23:27:59 +03:00
|
|
|
import React from 'react';
|
2015-11-13 03:01:27 +03:00
|
|
|
import Tab from './tab';
|
|
|
|
import Content from './content';
|
2015-09-19 19:48:09 +03:00
|
|
|
import style from './style';
|
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
class Tabs extends React.Component {
|
2015-10-20 08:40:51 +03:00
|
|
|
static propTypes = {
|
2015-11-13 12:04:08 +03:00
|
|
|
index: React.PropTypes.number,
|
2015-09-19 19:48:09 +03:00
|
|
|
className: React.PropTypes.string,
|
|
|
|
onChange: React.PropTypes.func
|
2015-10-20 08:40:51 +03:00
|
|
|
};
|
2015-09-19 19:48:09 +03:00
|
|
|
|
2015-10-20 08:40:51 +03:00
|
|
|
static defaultProps = {
|
2015-11-13 12:04:08 +03:00
|
|
|
index: 0
|
2015-10-20 08:40:51 +03:00
|
|
|
};
|
2015-09-19 19:48:09 +03:00
|
|
|
|
2015-10-20 08:40:51 +03:00
|
|
|
state = {
|
|
|
|
pointer: {}
|
|
|
|
};
|
2015-09-19 19:48:09 +03:00
|
|
|
|
2015-11-13 03:01:27 +03:00
|
|
|
componentWillReceiveProps (nextProps) {
|
2015-11-13 12:04:08 +03:00
|
|
|
this.updatePointer(nextProps.index);
|
2015-11-13 03:01:27 +03:00
|
|
|
}
|
|
|
|
|
2015-09-19 19:48:09 +03:00
|
|
|
componentDidMount () {
|
2015-10-23 19:30:37 +03:00
|
|
|
setTimeout(() => {
|
2015-11-13 12:04:08 +03:00
|
|
|
this.updatePointer(this.props.index);
|
2015-11-13 03:01:27 +03:00
|
|
|
}, 100);
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-09-19 19:48:09 +03:00
|
|
|
|
2015-11-13 03:01:27 +03:00
|
|
|
handleHeaderClick = (idx) => {
|
|
|
|
if (this.props.onChange) this.props.onChange(idx);
|
|
|
|
};
|
2015-09-19 19:48:09 +03:00
|
|
|
|
2015-11-13 03:01:27 +03:00
|
|
|
parseChildren () {
|
|
|
|
const headers = [];
|
|
|
|
const contents = [];
|
|
|
|
|
|
|
|
React.Children.forEach(this.props.children, (item) => {
|
|
|
|
if (item.type === Tab) {
|
|
|
|
headers.push(item);
|
|
|
|
if (item.props.children) {
|
|
|
|
const {onActive, children} = item.props;
|
|
|
|
contents.push(<Content onActive={onActive} children={children}/>);
|
|
|
|
}
|
|
|
|
} else if (item.type === Content) {
|
|
|
|
contents.push(item);
|
|
|
|
}
|
|
|
|
});
|
2015-10-11 23:27:59 +03:00
|
|
|
|
2015-11-13 03:01:27 +03:00
|
|
|
return {headers, contents};
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-10-11 23:27:59 +03:00
|
|
|
|
2015-11-13 03:01:27 +03:00
|
|
|
updatePointer (idx) {
|
|
|
|
const startPoint = this.refs.tabs.getBoundingClientRect().left;
|
|
|
|
const label = this.refs.navigation.children[idx].getBoundingClientRect();
|
2015-09-19 19:48:09 +03:00
|
|
|
this.setState({
|
2015-11-13 03:01:27 +03:00
|
|
|
pointer: {
|
|
|
|
top: `${this.refs.navigation.getBoundingClientRect().height}px`,
|
|
|
|
left: `${label.left - startPoint}px`,
|
|
|
|
width: `${label.width}px`
|
|
|
|
}
|
2015-09-19 19:48:09 +03:00
|
|
|
});
|
2015-11-13 03:01:27 +03:00
|
|
|
}
|
2015-09-19 19:48:09 +03:00
|
|
|
|
2015-11-13 03:01:27 +03:00
|
|
|
renderHeaders (headers) {
|
|
|
|
return headers.map((item, idx) => {
|
|
|
|
return React.cloneElement(item, {
|
|
|
|
key: idx,
|
2015-11-13 12:04:08 +03:00
|
|
|
active: this.props.index === idx,
|
2015-11-13 03:01:27 +03:00
|
|
|
onClick: this.handleHeaderClick.bind(this, idx, item)
|
|
|
|
});
|
2015-10-11 23:27:59 +03:00
|
|
|
});
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-10-11 23:27:59 +03:00
|
|
|
|
2015-11-13 03:01:27 +03:00
|
|
|
renderContents (contents) {
|
|
|
|
return contents.map((item, idx) => {
|
|
|
|
return React.cloneElement(item, {
|
|
|
|
key: idx,
|
2015-11-13 12:04:08 +03:00
|
|
|
active: this.props.index === idx,
|
2015-11-13 03:01:27 +03:00
|
|
|
tabIndex: idx
|
2015-09-19 19:48:09 +03:00
|
|
|
});
|
|
|
|
});
|
2015-11-13 03:01:27 +03:00
|
|
|
}
|
2015-09-19 19:48:09 +03:00
|
|
|
|
2015-11-13 03:01:27 +03:00
|
|
|
render () {
|
2015-10-11 23:27:59 +03:00
|
|
|
let className = style.root;
|
2015-11-13 03:01:27 +03:00
|
|
|
const { headers, contents } = this.parseChildren();
|
2015-10-11 23:27:59 +03:00
|
|
|
if (this.props.className) className += ` ${this.props.className}`;
|
|
|
|
|
2015-09-19 19:48:09 +03:00
|
|
|
return (
|
2015-11-13 03:01:27 +03:00
|
|
|
<div ref='tabs' className={className}>
|
2015-10-21 03:16:42 +03:00
|
|
|
<nav className={style.navigation} ref='navigation'>
|
2015-11-13 03:01:27 +03:00
|
|
|
{this.renderHeaders(headers)}
|
2015-09-19 19:48:09 +03:00
|
|
|
</nav>
|
2015-10-11 23:27:59 +03:00
|
|
|
<span className={style.pointer} style={this.state.pointer} />
|
2015-11-13 03:01:27 +03:00
|
|
|
{this.renderContents(contents)}
|
2015-09-19 19:48:09 +03:00
|
|
|
</div>
|
|
|
|
);
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-10-21 13:25:07 +03:00
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
|
|
|
|
export default Tabs;
|