2017-04-17 17:14:17 +03:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2016-05-26 22:01:54 +03:00
|
|
|
import classnames from 'classnames';
|
|
|
|
import { themr } from 'react-css-themr';
|
2017-01-26 20:05:32 +03:00
|
|
|
import { TABS } from '../identifiers';
|
2015-11-13 03:01:27 +03:00
|
|
|
|
2018-02-21 00:26:44 +03:00
|
|
|
class TabContent extends Component { // eslint-disable-line react/prefer-stateless-function
|
2015-11-13 03:01:27 +03:00
|
|
|
static propTypes = {
|
2016-05-31 00:23:55 +03:00
|
|
|
active: PropTypes.bool,
|
|
|
|
children: PropTypes.node,
|
|
|
|
className: PropTypes.string,
|
2017-08-02 19:30:41 +03:00
|
|
|
hidden: PropTypes.bool,
|
2016-05-31 00:23:55 +03:00
|
|
|
theme: PropTypes.shape({
|
|
|
|
active: PropTypes.string,
|
2017-01-26 20:05:32 +03:00
|
|
|
tab: PropTypes.string,
|
|
|
|
}),
|
2015-11-13 03:01:27 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
active: false,
|
2017-01-26 20:05:32 +03:00
|
|
|
className: '',
|
2017-08-02 19:30:41 +03:00
|
|
|
hidden: true,
|
2015-11-13 03:01:27 +03:00
|
|
|
};
|
|
|
|
|
2017-01-26 20:05:32 +03:00
|
|
|
render() {
|
2016-05-26 22:01:54 +03:00
|
|
|
const className = classnames(this.props.theme.tab, {
|
2017-01-26 20:05:32 +03:00
|
|
|
[this.props.theme.active]: this.props.active,
|
2016-05-26 22:01:54 +03:00
|
|
|
}, this.props.className);
|
2015-11-13 03:01:27 +03:00
|
|
|
|
|
|
|
return (
|
2017-08-02 19:30:41 +03:00
|
|
|
<section className={className} role="tabpanel" aria-expanded={this.props.hidden}>
|
2015-11-13 03:01:27 +03:00
|
|
|
{this.props.children}
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-05-31 00:23:55 +03:00
|
|
|
export default themr(TABS)(TabContent);
|
|
|
|
export { TabContent };
|