@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
36 lines • 3.21 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef } from 'react';
import { InternalButton } from '../button/internal';
import InternalSpaceBetween from '../space-between/internal';
import { getNavigationActionDetail } from './analytics-metadata/utils';
import Unmount from './unmount';
import styles from './styles.css.js';
export default function WizardActions({ cancelButtonText, onCancelClick, isPrimaryLoading, primaryButtonText, primaryButtonLoadingText, onPrimaryClick, showPrevious, previousButtonText, onPreviousClick, showSkipTo, skipToButtonText, onSkipToClick, isLastStep, activeStepIndex, skipToStepIndex, }) {
const containerRef = useRef(null);
const primaryButtonRef = useRef(null);
const onPreviousUnmount = () => {
var _a, _b;
if (((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles['previous-button']}`)) === document.activeElement) {
(_b = primaryButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
}
};
const onSkipUnmount = () => {
var _a, _b;
if (((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles['skip-to-button']}`)) === document.activeElement) {
(_b = primaryButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
}
};
return (React.createElement("div", { ref: containerRef },
React.createElement(InternalSpaceBetween, { direction: "horizontal", size: "xs", className: styles['action-buttons'] },
React.createElement(InternalButton, { className: styles['cancel-button'], variant: "link", formAction: "none", onClick: onCancelClick, analyticsAction: "cancel" }, cancelButtonText),
showSkipTo && skipToButtonText && (React.createElement(Unmount, { onUnmount: onSkipUnmount },
React.createElement("span", Object.assign({}, getNavigationActionDetail(skipToStepIndex, 'skip')),
React.createElement(InternalButton, { className: styles['skip-to-button'], onClick: onSkipToClick, formAction: "none", disabled: isPrimaryLoading, analyticsAction: "navigate" }, skipToButtonText)))),
showPrevious && (React.createElement(Unmount, { onUnmount: onPreviousUnmount },
React.createElement("span", Object.assign({}, getNavigationActionDetail(activeStepIndex - 1, 'previous')),
React.createElement(InternalButton, { className: styles['previous-button'], onClick: onPreviousClick, formAction: "none", disabled: isPrimaryLoading, analyticsAction: "navigate" }, previousButtonText)))),
React.createElement("span", Object.assign({}, (isLastStep ? {} : getNavigationActionDetail(activeStepIndex + 1, 'next'))),
React.createElement(InternalButton, { ref: primaryButtonRef, className: styles['primary-button'], variant: "primary", formAction: "none", onClick: onPrimaryClick, loading: isPrimaryLoading, loadingText: primaryButtonLoadingText, analyticsAction: isLastStep ? 'submit' : 'navigate' }, primaryButtonText)))));
}
//# sourceMappingURL=wizard-actions.js.map