Sha256: 7d93f214a00b91703fdad4f4a2519c2b5b6e7ead2e86cfd8680da31c2156a90a
Contents?: true
Size: 1.65 KB
Versions: 6
Compression:
Stored size: 1.65 KB
Contents
/* @flow */
import React from 'react'
import { map } from 'lodash'
import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import classnames from 'classnames'
import Icon from '../Icon/Icon'
import styles from './step_meter.scss'
type States = 'done' | 'started' | 'none'
type Step = {|
id: number,
name: string,
state: States,
|}
type Props = {
className: string,
steps: Array<Step>,
type: string,
}
const StepMeter = ({
steps,
type,
className
}: Props) => {
const classes = [
className,
styles['step-meter'],
styles[`type-${type}`],
]
return (
<ul className={classnames(classes)}>
{
map(steps, (step, idx) => (
<Choose>
<When condition={type == 'simple'}>
<OverlayTrigger
key={idx}
overlay={<Tooltip id={`tooltip-step.name`}>{step.name}</Tooltip>}
placement="bottom"
trigger={['hover', 'focus']}
>
<li
className={`text-uppercase ${styles[step.state]}`}
/>
</OverlayTrigger>
</When>
<Otherwise>
<li
className={`text-uppercase ${styles[step.state]}`}
key={idx}
>
<If condition={step.state == 'done'}>
<Icon
label=""
name="check"
/>
</If>
<span>
{step.name}
</span>
</li>
</Otherwise>
</Choose>
))
}
</ul>
)
}
export default StepMeter
Version data entries
6 entries across 6 versions & 2 rubygems