48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
|
// License: LGPL-3.0-or-later
|
||
|
|
import * as React from 'react';
|
||
|
|
import { Tab } from 'react-aria-tabpanel';
|
||
|
|
import {FormattedMessage, injectIntl, InjectedIntlProps} from 'react-intl';
|
||
|
|
import {observer} from 'mobx-react';
|
||
|
|
import {WizardTabPanelState} from "./wizard_state";
|
||
|
|
|
||
|
|
interface MiniTabInfo{
|
||
|
|
active:boolean
|
||
|
|
enabled:boolean
|
||
|
|
label:string
|
||
|
|
id: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface WizardTabProps
|
||
|
|
{
|
||
|
|
tab: MiniTabInfo
|
||
|
|
widthPercentage:number
|
||
|
|
style?: any
|
||
|
|
disableTabs?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
class WizardTab extends React.Component<WizardTabProps & InjectedIntlProps, {}> {
|
||
|
|
render() {
|
||
|
|
let percentageToString = this.props.widthPercentage.toString() + "%"
|
||
|
|
let style= {width: percentageToString}
|
||
|
|
|
||
|
|
|
||
|
|
let className = "wizard-index-label"
|
||
|
|
if (this.props.tab.active){
|
||
|
|
className += " is-current"
|
||
|
|
}
|
||
|
|
let disableOverrideTab = this.props.disableTabs
|
||
|
|
|
||
|
|
if (this.props.tab.enabled || disableOverrideTab){
|
||
|
|
className += " is-accessible"
|
||
|
|
}
|
||
|
|
|
||
|
|
return <Tab tag={'span'} active={this.props.tab.active} className={className} style={style} id={this.props.tab.id}>
|
||
|
|
|
||
|
|
{this.props.intl.formatMessage({id:this.props.tab.label})}
|
||
|
|
</Tab>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default injectIntl(observer(WizardTab))
|