UNPKG

843 BJavaScriptView Raw
1import React from 'react';
2import PropTypes from 'prop-types';
3import classNames from 'classnames';
4import { TabContext } from './TabContext';
5import { mapToCssModules, tagPropType } from './utils';
6
7const propTypes = {
8 tag: tagPropType,
9 className: PropTypes.string,
10 cssModule: PropTypes.object,
11 tabId: PropTypes.any,
12};
13
14export 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}
35TabPane.propTypes = propTypes;