2019-08-05 13:09:12 +00:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import styled, { css } from 'styled-components';
|
|
|
|
|
|
|
|
const TabsContainer = styled.div``;
|
|
|
|
|
|
|
|
const NavItem = styled.div`
|
2019-08-06 09:04:01 +00:00
|
|
|
position: relative;
|
|
|
|
white-space: nowrap;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const TitleStyle = css`
|
|
|
|
width: 80px;
|
|
|
|
height: 32px;
|
|
|
|
border-radius: 16px;
|
2019-08-05 13:09:12 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const Label = styled.label`
|
|
|
|
margin:0;
|
|
|
|
min-width: 80px;
|
|
|
|
position: relative;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
p {text-align: center; margin-top: 6px;}
|
|
|
|
margin-right: 5px;
|
|
|
|
label {margin:0}
|
|
|
|
|
2019-08-06 09:04:01 +00:00
|
|
|
${props => props.isDisabled ? `pointer-events: none;` : ``}
|
|
|
|
|
2019-08-05 13:09:12 +00:00
|
|
|
${props => props.selected ?
|
2019-08-06 09:04:01 +00:00
|
|
|
`${TitleStyle}
|
2019-08-05 16:05:03 +00:00
|
|
|
background-color: #265A8F;
|
|
|
|
cursor: default;
|
|
|
|
p {color: #fff}` :
|
2019-08-06 09:04:01 +00:00
|
|
|
`
|
2019-08-05 13:09:12 +00:00
|
|
|
&:hover{
|
2019-08-06 09:04:01 +00:00
|
|
|
${TitleStyle}
|
2019-08-05 13:09:12 +00:00
|
|
|
cursor: pointer;
|
2019-08-05 16:05:03 +00:00
|
|
|
background-color: #F8F9F9;
|
2019-08-05 13:09:12 +00:00
|
|
|
}`
|
|
|
|
}
|
2019-08-06 09:04:01 +00:00
|
|
|
|
|
|
|
${props => props.isDisabled && props.selected ?
|
|
|
|
`${TitleStyle} background-color: #A3A9AE;
|
|
|
|
p {color: #fff} ` : ``
|
|
|
|
}
|
2019-08-05 13:09:12 +00:00
|
|
|
`;
|
|
|
|
|
2019-08-05 16:05:03 +00:00
|
|
|
const BodyContainer = styled.div`
|
|
|
|
margin: 24px 16px 0px 16px;
|
2019-08-06 15:46:16 +00:00
|
|
|
|
|
|
|
${props => props.isDisabled ? `pointer-events: none;` : ``}
|
2019-08-05 16:05:03 +00:00
|
|
|
`;
|
2019-08-05 13:09:12 +00:00
|
|
|
|
2019-08-06 09:04:01 +00:00
|
|
|
class TabContainer extends Component {
|
2019-08-05 13:09:12 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-08-07 08:14:12 +00:00
|
|
|
|
|
|
|
const selectedItem = (props.children.indexOf(props.onSelect) !== -1) || 0;
|
|
|
|
|
2019-08-05 13:09:12 +00:00
|
|
|
this.state = {
|
2019-08-07 08:14:12 +00:00
|
|
|
activeTab: selectedItem
|
2019-08-05 13:09:12 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2019-08-07 08:14:12 +00:00
|
|
|
titleClick = (index) => {
|
|
|
|
if (this.state.activeTab !== index) {
|
|
|
|
this.setState({ activeTab: index });
|
|
|
|
this.props.onSelect && this.props.onSelect(index);
|
2019-08-05 13:09:12 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-08-06 15:46:16 +00:00
|
|
|
render() {
|
2019-08-05 13:09:12 +00:00
|
|
|
return (
|
|
|
|
<TabsContainer>
|
|
|
|
<NavItem>
|
2019-08-06 11:50:16 +00:00
|
|
|
{this.props.children.map((item, index) =>
|
2019-08-05 13:09:12 +00:00
|
|
|
<Label
|
2019-08-06 11:50:16 +00:00
|
|
|
selected={this.state.activeTab === index}
|
2019-08-06 09:04:01 +00:00
|
|
|
isDisabled={this.props.isDisabled}
|
2019-08-06 15:46:16 +00:00
|
|
|
key={item.key}
|
2019-08-07 08:14:12 +00:00
|
|
|
onClick={this.titleClick.bind(this, index)}>
|
2019-08-05 14:41:39 +00:00
|
|
|
{item.title}
|
2019-08-05 13:09:12 +00:00
|
|
|
</Label>
|
|
|
|
)}
|
|
|
|
</NavItem>
|
2019-08-05 16:05:03 +00:00
|
|
|
<BodyContainer> {this.props.children[this.state.activeTab].content} </BodyContainer>
|
2019-08-05 13:09:12 +00:00
|
|
|
</TabsContainer>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-06 09:04:01 +00:00
|
|
|
TabContainer.propTypes = {
|
2019-08-06 15:46:16 +00:00
|
|
|
children: PropTypes.PropTypes.arrayOf(
|
|
|
|
PropTypes.object.isRequired
|
|
|
|
).isRequired,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
onSelect: PropTypes.oneOfType([
|
|
|
|
PropTypes.number,
|
|
|
|
PropTypes.string
|
|
|
|
])
|
2019-08-05 13:09:12 +00:00
|
|
|
};
|
2019-08-05 16:05:03 +00:00
|
|
|
|
2019-08-06 15:46:16 +00:00
|
|
|
export default TabContainer;
|