Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 500x 500x 500x 500x 500x 500x 500x 14x 7x 7x 500x 21x 7x 1x 13x 500x 21x 7x 13x 1x 500x 9x 7x 7x 21x 21x 21x 21x 21x 21x 500x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import { Container, Text, Icon } from '@wings-software/uicore'
import step from './Icons/Step.svg'
import { Status } from './WizardHelper'
import inprogress from './Icons/InProgressStep.svg'
import css from './StepWizard.module.scss'
export interface PanelInterface {
id: string
tabTitle?: string
tabTitleComponent?: JSX.Element
status?: string
}
interface WizardHeaderInterface {
panels: PanelInterface[]
onClick: any
}
const getClassName = (status: string | undefined) => {
switch (status) {
case Status.INPROGRESS:
return css.inprogress
default:
return ''
}
}
const getSeparator = (status: string | undefined) => {
switch (status) {
case Status.INPROGRESS:
return css.progressSeparator
case Status.COMPLETED:
return css.completedSeparator
default:
return ''
}
}
const getIconClass = (status: string | undefined) => {
switch (status) {
case Status.INPROGRESS:
return inprogress
case Status.TODO:
return step
default:
break
}
}
const WizardHeader: React.FC<WizardHeaderInterface> = (props: WizardHeaderInterface) => {
const { panels } = props
const panelLength = panels.length
return (
<Container className={css.headerContainer}>
{panels.map((panel: PanelInterface, index: number) => {
const titleClass = index === panelLength - 1 ? css.lastElementHeader : getClassName(panel?.status)
const separatorClass = getSeparator(panel?.status)
const icon = getIconClass(panel?.status)
const lastElementCls = index === panelLength - 1 ? css.lastElement : ''
const wizardHeaderCls = index === panelLength - 1 ? css.lastHeader : ''
return (
<>
{index === 0 && <div style={{ flexGrow: 2 }}></div>}
<Container
className={`${css.headerContent} ${wizardHeaderCls}`}
onClick={() => {
props.onClick(panel.id, index)
}}
>
<div className={`${css.headerSeparator} ${lastElementCls}`}>
{panel?.status !== Status.COMPLETED && <img src={icon} alt="" aria-hidden width="15" />}
{panel?.status === Status.COMPLETED && <Icon name="deployment-success-legacy" />}
{index !== panelLength - 1 && <hr className={`${css.headerSeparator} ${separatorClass}`} />}
</div>
<Text
font={{ size: 'normal', align: 'center' }}
className={`${css.headerTitle} ${titleClass} `}
onClick={props.onClick}
>
{panel.tabTitle}
</Text>
</Container>
{index === panelLength - 1 && <div style={{ flexGrow: 2 }}></div>}
</>
)
})}
</Container>
)
}
export default WizardHeader
|