44 lines
1010 B
JavaScript
44 lines
1010 B
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
|
|
class Tab extends Component {
|
|
handleClick = () => {
|
|
this.props.onClick(this.props.label);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
activeTab,
|
|
label,
|
|
title,
|
|
} = this.props;
|
|
|
|
const tabClass = classnames({
|
|
tab__control: true,
|
|
'tab__control--active': activeTab === label,
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className={tabClass}
|
|
onClick={this.handleClick}
|
|
>
|
|
<svg className="tab__icon">
|
|
<use xlinkHref={`#${label.toLowerCase()}`} />
|
|
</svg>
|
|
{title || label}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Tab.propTypes = {
|
|
activeTab: PropTypes.string.isRequired,
|
|
label: PropTypes.string.isRequired,
|
|
onClick: PropTypes.func.isRequired,
|
|
title: PropTypes.string,
|
|
};
|
|
|
|
export default Tab;
|