@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) • 1.89 kB
JavaScript
import { __assign } from "tslib";
import React, { useCallback, useEffect, useState } from 'react';
import styles from './styles.css.js';
import Button from '../../../button';
import Box from '../../../box';
import SpaceBetween from '../../../space-between';
import { Task } from './task';
import { getStepInfo } from '../../../annotation-context/index.js';
export function TaskList(_a) {
var _b;
var tasks = _a.tasks, onExitTutorial = _a.onExitTutorial, currentGlobalStepIndex = _a.currentGlobalStepIndex, i18nStrings = _a.i18nStrings;
var currentTaskIndex = getStepInfo(tasks, currentGlobalStepIndex !== null && currentGlobalStepIndex !== void 0 ? currentGlobalStepIndex : 0).taskIndex;
var _c = useState((_b = {}, _b[currentTaskIndex] = true, _b)), expandedTasks = _c[0], setExpandedTasks = _c[1];
var onToggleExpand = useCallback(function (stepIndex) {
setExpandedTasks(function (prevTasks) {
var _a;
return (__assign(__assign({}, prevTasks), (_a = {}, _a[stepIndex] = !prevTasks[stepIndex], _a)));
});
}, []);
useEffect(function () {
var _a;
setExpandedTasks((_a = {}, _a[currentTaskIndex] = true, _a));
}, [currentTaskIndex]);
return (React.createElement(SpaceBetween, { size: "xxl" },
React.createElement("ol", { className: styles['tutorial-list'] }, tasks.map(function (task, index) {
var _a;
return (React.createElement(Task, { task: task, key: index, taskIndex: index, currentTaskIndex: currentTaskIndex, expanded: (_a = expandedTasks[index]) !== null && _a !== void 0 ? _a : false, onToggleExpand: onToggleExpand, i18nStrings: i18nStrings }));
})),
React.createElement(Box, { margin: { top: 'xxxs' } },
React.createElement(Button, { onClick: onExitTutorial, formAction: "none" }, i18nStrings.dismissTutorialButtonText))));
}