quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-17 14:08:41 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions

tabs: transform to Component for consistency

Browse source
This commit is contained in:
Guillermo Rauch 2016-07-08 17:33:39 -07:00
parent 64a94788ef
commit 412717ce0e
1 changed files with 42 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
app/tabs.js
View file

@ -1,35 +1,48 @@
import React from 'react'; import React from 'react';
import classes from 'classnames'; import classes from 'classnames';
export default function ({ data = [], borderColor, active, activeMarkers = [], onChange, onClose }) { export default class Tabs extends React.Component {
return <nav style={{ WebkitAppRegion: 'drag' }}>{
data.length render () {
? 1 === data.length const {
? <div className='single'>{ data[0] }</div> data = [],
: <ul style={{ borderColor }} className='tabs'> borderColor,
{ active,
data.map((tab, i) => { activeMarkers = [],
const isActive = i === active; onChange,
const hasActivity = ~activeMarkers.indexOf(i); onClose
return <li } = this.props;
key={`tab-${i}`}
className={classes({ is_active: isActive, has_activity: hasActivity })}> return <nav style={{ WebkitAppRegion: 'drag' }}>{
<span data.length
style={{ borderColor: isActive ? borderColor : null }} ? 1 === data.length
onClick={ onChange ? onClick.bind(null, i, onChange, active) : null }> ? <div className='single'>{ data[0] }</div>
{ tab } : <ul style={{ borderColor }} className='tabs'>
</span> {
<i onClick={ onClose ? onClose.bind(null, i) : null }> data.map((tab, i) => {
<svg className='icon'> const isActive = i === active;
<use xlinkHref='assets/icons.svg#close'></use> const hasActivity = ~activeMarkers.indexOf(i);
</svg> return <li
</i> key={`tab-${i}`}
</li>; className={classes({ is_active: isActive, has_activity: hasActivity })}>
}) <span
} style={{ borderColor: isActive ? borderColor : null }}
</ul> onClick={ onChange ? onClick.bind(null, i, onChange, active) : null }>
: null { tab }
}</nav>; </span>
<i onClick={ onClose ? onClose.bind(null, i) : null }>
<svg className='icon'>
<use xlinkHref='assets/icons.svg#close'></use>
</svg>
</i>
</li>;
})
}
</ul>
: null
}</nav>;
}
} }
function onClick (i, onChange, active) { function onClick (i, onChange, active) {