30 lines
1012 B
React
30 lines
1012 B
React
import React from 'react';
|
|
import './StepList.css';
|
|
|
|
function nodeText(it, i) {
|
|
if (it.status === 'done') return '✓';
|
|
if (it.status === 'error') return '✕';
|
|
return String(i + 1);
|
|
}
|
|
|
|
export default function StepList({ steps = [], direction = 'vertical', clickable = false, onStepClick }) {
|
|
return (
|
|
<div className={'aa-steplist' + (direction === 'horizontal' ? ' is-horizontal' : '')}>
|
|
{steps.map((it, i) => (
|
|
<div
|
|
key={i}
|
|
className={`aa-steplist-item is-${it.status}${clickable ? ' is-clickable' : ''}`}
|
|
onClick={clickable ? () => onStepClick && onStepClick(i) : undefined}
|
|
>
|
|
<span className="aa-steplist-node">{nodeText(it, i)}</span>
|
|
<span className="aa-steplist-line" />
|
|
<div className="aa-steplist-body">
|
|
<div className="aa-steplist-title">{it.title}</div>
|
|
{it.desc ? <div className="aa-steplist-desc">{it.desc}</div> : null}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|