@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
32 lines (31 loc) • 2.22 kB
JavaScript
import React, { useCallback } from 'react';
import styles from './styles.css.js';
import Box from '../../../box';
import StatusIndicator from '../../../status-indicator';
import SpaceBetween from '../../../space-between';
import ExpandableSection from '../../../expandable-section';
function getStatusIndicatorType(taskIndex, currentTaskIndex) {
if (taskIndex < currentTaskIndex) {
return 'success';
}
if (taskIndex === currentTaskIndex) {
return 'in-progress';
}
return 'pending';
}
export function Task(_a) {
var task = _a.task, taskIndex = _a.taskIndex, currentTaskIndex = _a.currentTaskIndex, expanded = _a.expanded, onToggleExpand = _a.onToggleExpand, i18nStrings = _a.i18nStrings;
var statusIndicatorType = getStatusIndicatorType(taskIndex, currentTaskIndex);
var onExpandChange = useCallback(function () {
onToggleExpand(taskIndex);
}, [onToggleExpand, taskIndex]);
return (React.createElement("li", { className: styles.task },
React.createElement(SpaceBetween, { size: "xxs" },
React.createElement("div", { className: styles['task-title'] },
React.createElement(StatusIndicator, { type: statusIndicatorType, iconAriaLabel: i18nStrings.labelsTaskStatus[statusIndicatorType] }),
React.createElement(Box, { variant: "h3", padding: { left: 'xxxs', top: 'xxxs', bottom: 'n' }, fontSize: "heading-xs", fontWeight: "normal", color: taskIndex < currentTaskIndex ? 'text-status-success' : 'text-status-inactive' }, i18nStrings.taskTitle(taskIndex, task.title))),
React.createElement("div", { className: styles['expandable-section-wrapper'] },
React.createElement(ExpandableSection, { header: i18nStrings.labelTotalSteps(task.steps.length), expanded: expanded, onChange: onExpandChange },
React.createElement("ol", { className: styles['step-list'] }, task.steps.map(function (step, stepIndex) { return (React.createElement("li", { key: stepIndex, className: styles.step },
React.createElement(Box, { color: "text-body-secondary", fontSize: "body-m", padding: { left: 'l' } }, i18nStrings.stepTitle(stepIndex, step.title)))); })))))));
}