64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import classnames from 'classnames';
|
|
import { TranslateType } from 'translations';
|
|
import { Link } from 'react-router-dom';
|
|
import './SubTabs.scss';
|
|
|
|
export interface Tab<SubTabProps = null> {
|
|
path: string;
|
|
name: TranslateType;
|
|
isDisabled?(props: SubTabProps | {}): boolean;
|
|
render(props: SubTabProps | {}): React.ReactElement<any> | null;
|
|
}
|
|
|
|
export interface Props<SubTabProps = null> {
|
|
activeTab?: string;
|
|
root: string;
|
|
tabs: Tab<SubTabProps>[];
|
|
sideBar?: React.ReactElement<any> | React.Component | React.StatelessComponent;
|
|
subTabProps?: SubTabProps;
|
|
onTabChange?(): void;
|
|
}
|
|
|
|
interface State {
|
|
isOpenModal: boolean;
|
|
}
|
|
|
|
export default class SubTabs<SubTabProps = null> extends React.Component<
|
|
Props<SubTabProps>,
|
|
State
|
|
> {
|
|
public render() {
|
|
const { tabs, sideBar } = this.props;
|
|
const activeTab = this.props.activeTab || tabs[0].path;
|
|
const tab = tabs.find(t => t.path === activeTab) || tabs[0];
|
|
const columnSize = sideBar ? 8 : 12;
|
|
|
|
return (
|
|
<div className="SubTabs row">
|
|
<div className={`SubTabs-tabs col-sm-${columnSize}`}>
|
|
{tabs.map(t => (
|
|
<Link
|
|
className={classnames({
|
|
'SubTabs-tabs-link': true,
|
|
'is-active': t.path === activeTab,
|
|
'is-disabled': t.isDisabled && t.isDisabled(this.props.subTabProps || {})
|
|
})}
|
|
to={`/${this.props.root}/${t.path}`}
|
|
key={t.path}
|
|
onClick={this.props.onTabChange}
|
|
>
|
|
{t.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<main className={`SubTabs-content col-sm-${columnSize}`} key={tab.path}>
|
|
{tab.render(this.props.subTabProps || {})}
|
|
</main>
|
|
{this.props.sideBar ? this.props.sideBar : null}
|
|
</div>
|
|
);
|
|
}
|
|
}
|