use existing className attr instead of custom property

This commit is contained in:
Riley Davis
2017-06-05 15:57:34 -06:00
parent 9e1d010db3
commit 7d54fb60a8
3 changed files with 9 additions and 10 deletions
@@ -10,7 +10,7 @@ import ProfileContainer from 'coral-settings/containers/ProfileContainer';
import ConfigureStreamContainer
from 'coral-configure/containers/ConfigureStreamContainer';
export default class Embed extends React.Component {
export default class Embed extends React.Component {
changeTab = (tab) => {
switch (tab) {
case 0:
@@ -41,10 +41,10 @@ export default class Embed extends React.Component {
return (
<div>
<div className="commentStream">
<TabBar onChange={this.changeTab} activeTab={activeTab}>
<Tab cNames={'comment-count'}><Count count={totalCommentCount} /></Tab>
<Tab cNames={'comment-profile'}>{t('framework.my_profile')}</Tab>
<Tab cNames={'comment-configuration'} restricted={!can(user, 'UPDATE_CONFIG')}>{t('framework.configure_stream')}</Tab>
<TabBar onChange={this.changeTab} activeTab={activeTab} className='talk-embed-tabbar'>
<Tab className={'talk-embed-comment-count'}><Count count={totalCommentCount}/></Tab>
<Tab className={'talk-embed-comment-profile'}>{t('framework.my_profile')}</Tab>
<Tab className={'talk-embed-comment-configuration'} restricted={!can(user, 'UPDATE_CONFIG')}>{t('framework.configure_stream')}</Tab>
</TabBar>
{commentId &&
<Button
+2 -3
View File
@@ -1,13 +1,12 @@
import React from 'react';
import styles from './Tab.css';
export default ({children, tabId, active, onTabClick, cStyle = 'base', cNames}) => (
export default ({children, tabId, active, onTabClick, cStyle = 'base', ...props}) => (
<li
key={tabId}
className={`${active ? styles[`${cStyle}--active`] : ''} tab ${cNames}`}
className={`${active ? styles[`${cStyle}--active`] : ''} tab ${props.className}`}
onClick={() => onTabClick(tabId)}
>
{children}
</li>
);
+2 -2
View File
@@ -14,10 +14,10 @@ class TabBar extends React.Component {
}
render() {
const {children, activeTab, cStyle = 'base', cNames} = this.props;
const {children, activeTab, cStyle = 'base'} = this.props;
return (
<div>
<ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''} ${cNames}`}>
<ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''} ${this.props.className}`}>
{React.Children.toArray(children)
.filter((child) => !child.props.restricted)
.map((child, tabId) =>