@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
25 lines (24 loc) • 1.91 kB
JavaScript
import React from 'react';
import clsx from 'clsx';
import Link from '../link';
import Box from '../box';
import styles from './styles.css.js';
var WizardNavigation = function (_a) {
var steps = _a.steps, i18nStrings = _a.i18nStrings, activeStepIndex = _a.activeStepIndex, farthestStepIndex = _a.farthestStepIndex, onStepClick = _a.onStepClick, hidden = _a.hidden;
return (React.createElement("nav", { className: clsx(styles.navigation, hidden && styles.hidden) },
React.createElement("ul", { className: clsx(styles['navigation-links']) }, steps.map(function (_a, stepIndex) {
var title = _a.title, isOptional = _a.isOptional;
var isActiveStep = activeStepIndex === stepIndex;
var isLink = farthestStepIndex >= stepIndex && !isActiveStep;
var spanClassName = clsx(styles['navigation-link'], isActiveStep ? styles['navigation-link-active'] : styles['navigation-link-disabled']);
return (React.createElement("li", { key: stepIndex, className: styles['navigation-link-item'] },
React.createElement(Box, { variant: "small", className: styles['navigation-link-label'], display: "block", margin: { bottom: 'xxs' } },
i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(stepIndex + 1),
isOptional && React.createElement("i", null, " - " + i18nStrings.optional)),
React.createElement("div", null, isLink ? (React.createElement(Link, { className: clsx(styles['navigation-link']), onFollow: function (evt) {
evt.preventDefault();
onStepClick(stepIndex);
} }, title)) : (React.createElement("span", { className: spanClassName, "aria-current": isActiveStep ? 'step' : undefined, "aria-disabled": isActiveStep ? undefined : 'true' }, title)))));
}))));
};
export default WizardNavigation;