64 lines
2.1 KiB
JavaScript
64 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
|
|
export default class TabPanel extends React.PureComponent
|
|
{
|
|
state = { selected: 0, tabs: this.props.tabs }
|
|
|
|
render()
|
|
{
|
|
let bar = [];
|
|
let body = [];
|
|
for (let i = 0; i < this.state.tabs.length; i++)
|
|
{
|
|
let t = this.state.tabs[i];
|
|
bar.push(
|
|
<div key={'t'+i} className={'tab'+(i == this.state.selected ? ' selected' : '')+(t.noclose ? ' noclose' : '')}
|
|
id={'t-tab'+i} onClick={this.switchTab} style={i == this.state.closing ? { width: '1px', padding: '0', opacity: '0' } : null}>
|
|
{t.noclose ? null : <a className="close" onClick={this.closeTab}></a>}
|
|
<img src={'icons/'+t.icon+'.png'} className={t.i16 ? 'i16' : null} /> {t.title}
|
|
</div>
|
|
);
|
|
body.push(
|
|
<div key={'c'+i} className={'tab-content'+(t.className ? ' '+t.className : '')}
|
|
id={'tab'+i} style={{ display: i == this.state.selected ? null : 'none' }}>
|
|
{t.children}
|
|
</div>
|
|
);
|
|
}
|
|
return <div className="tab-panel">
|
|
<div className="tab-bar">{bar}</div>
|
|
{body}
|
|
</div>
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps, nextContent)
|
|
{
|
|
// FIXME: Do not own tabs?
|
|
this.setState({ selected: this.state.selected % nextProps.tabs.length, tabs: nextProps.tabs });
|
|
}
|
|
|
|
switchTab = (ev) =>
|
|
{
|
|
this.setState({ selected: ev.target.id.substr(5) });
|
|
}
|
|
|
|
closeTab = (ev) =>
|
|
{
|
|
let tab = ev.target.parentNode;
|
|
//this.setState({ closing: tab.id.substr(5) });
|
|
tab.style.width = '1px';
|
|
tab.style.padding = '0';
|
|
tab.style.opacity = '0';
|
|
setTimeout(() =>
|
|
{
|
|
let t = this.state.tabs;
|
|
t.splice(tab.id.substr(5), 1);
|
|
let s = this.state.selected;
|
|
if ('t-tab'+s == tab.id)
|
|
s = this.state.selected-1;
|
|
this.setState({ tabs: t, selected: s });
|
|
}, 200);
|
|
ev.stopPropagation();
|
|
}
|
|
}
|