1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import classNames from 'classnames';
|
4 | import { TabContext } from './TabContext';
|
5 | import { mapToCssModules, tagPropType } from './utils';
|
6 |
|
7 | const propTypes = {
|
8 | tag: tagPropType,
|
9 | className: PropTypes.string,
|
10 | cssModule: PropTypes.object,
|
11 | tabId: PropTypes.any,
|
12 | };
|
13 |
|
14 | export default function TabPane(props) {
|
15 | const {
|
16 | className,
|
17 | cssModule,
|
18 | tabId,
|
19 | tag: Tag = 'div',
|
20 | ...attributes
|
21 | } = props;
|
22 | const getClasses = (activeTabId) =>
|
23 | mapToCssModules(
|
24 | classNames('tab-pane', className, { active: tabId === activeTabId }),
|
25 | cssModule,
|
26 | );
|
27 | return (
|
28 | <TabContext.Consumer>
|
29 | {({ activeTabId }) => (
|
30 | <Tag {...attributes} className={getClasses(activeTabId)} />
|
31 | )}
|
32 | </TabContext.Consumer>
|
33 | );
|
34 | }
|
35 | TabPane.propTypes = propTypes;
|