@the-control-group/ui
Advanced tools
Comparing version
@@ -6,3 +6,2 @@ import React, { Component } from 'react'; | ||
import { isMobile } from '../../util/helpers'; | ||
import Div from '../Div/Div'; | ||
import List from '../List/List'; | ||
@@ -36,8 +35,6 @@ import TabNavItem from '../TabNavItem/TabNavItem'; | ||
const tabs = React.Children.map(children, (child, i) => ( | ||
React.cloneElement(child, { active: activeIndex === i }) | ||
)); | ||
const activeTab = React.Children.toArray(children)[activeIndex]; | ||
return ( | ||
<Div className={classNames('ui-tabs-container', { desktop: !isMobile() })}> | ||
<div className={classNames('ui-tabs-container', { desktop: !isMobile() })}> | ||
<List inline className="ui-tabs-nav"> | ||
@@ -55,6 +52,6 @@ {React.Children.map(children, (child, i) => ( | ||
<Div className="ui-tabs-content"> | ||
{tabs} | ||
</Div> | ||
</Div> | ||
<div className="ui-tabs-content"> | ||
{activeTab} | ||
</div> | ||
</div> | ||
); | ||
@@ -61,0 +58,0 @@ } |
@@ -7,25 +7,13 @@ /** | ||
import PropTypes from 'prop-types'; | ||
import classNames from 'classnames'; | ||
import Div from '../Div/Div'; | ||
const TabContent = ({ children }) => ( | ||
<div className="ui-tab-panel"> | ||
{children} | ||
</div> | ||
); | ||
const TabContent = (props) => { | ||
const classes = classNames('ui-tab-panel', {'active-tab': props.active}); | ||
return ( | ||
<Div className={classes}> | ||
{props.children} | ||
</Div> | ||
); | ||
}; | ||
TabContent.defaultProps = { | ||
active: false | ||
}; | ||
TabContent.propTypes = { | ||
children: PropTypes.node.isRequired, | ||
active: PropTypes.bool | ||
children: PropTypes.node.isRequired | ||
}; | ||
export default TabContent; |
{ | ||
"name": "@the-control-group/ui", | ||
"version": "1.3.1", | ||
"version": "1.3.2", | ||
"description": "UI kit based on ReactJS for TCG projects", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
Sorry, the diff of this file is not supported yet
56588
-0.73%1170
-1.02%