@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
80 lines • 6.84 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef } from 'react';
import clsx from 'clsx';
import { useComponentMetadata, useMergeRefs, useUniqueId } from '@awsui/component-toolkit/internal';
import InternalForm from '../form/internal';
import InternalHeader from '../header/internal';
import { FunnelMetrics } from '../internal/analytics';
import { AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';
import { useFunnel, useFunnelStepRef } from '../internal/analytics/hooks/use-funnel';
import { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_STEP_NAME, getSubStepAllSelector, getTextFromSelector, } from '../internal/analytics/selectors';
import { getAnalyticsMetadataProps } from '../internal/base-component';
import { PACKAGE_VERSION } from '../internal/environment';
import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
import WizardActions from './wizard-actions';
import WizardFormHeader from './wizard-form-header';
import styles from './styles.css.js';
export const STEP_NAME_SELECTOR = `[${DATA_ATTR_FUNNEL_KEY}="${FUNNEL_KEY_STEP_NAME}"]`;
export default function WizardFormWithAnalytics(props) {
const analyticsMetadata = getAnalyticsMetadataProps(props.steps[props.activeStepIndex]);
const __internalRootRef = useComponentMetadata('WizardForm', PACKAGE_VERSION, analyticsMetadata);
const stepHeaderRef = useRef(null);
useEffectOnUpdate(() => {
var _a;
(_a = stepHeaderRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, [props.activeStepIndex]);
return (React.createElement(AnalyticsFunnelStep, { stepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, stepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, stepNameSelector: STEP_NAME_SELECTOR, stepNumber: props.activeStepIndex + 1 },
React.createElement(WizardForm, { stepHeaderRef: stepHeaderRef, __internalRootRef: __internalRootRef, ...props })));
}
function WizardForm({ __internalRootRef, stepHeaderRef, steps, activeStepIndex, showCollapsedSteps, i18nStrings, submitButtonText, isPrimaryLoading, allowSkipTo, secondaryActions, customPrimaryActions, onCancelClick, onPreviousClick, onPrimaryClick, onSkipToClick, }) {
var _a;
const rootRef = useRef();
const ref = useMergeRefs(rootRef, __internalRootRef);
const { title, info, description, content, errorText, isOptional } = steps[activeStepIndex] || {};
const isLastStep = activeStepIndex >= steps.length - 1;
const skipToTargetIndex = findSkipToTargetIndex(steps, activeStepIndex);
const { funnelInteractionId, funnelIdentifier } = useFunnel();
const funnelStepInfo = useFunnelStepRef();
const errorSlotId = useUniqueId('wizard-error-');
const showSkipTo = allowSkipTo && skipToTargetIndex !== -1;
const skipToButtonText = skipToTargetIndex !== -1 && i18nStrings.skipToButtonLabel
? i18nStrings.skipToButtonLabel(steps[skipToTargetIndex], skipToTargetIndex + 1)
: undefined;
useEffect(() => {
var _a, _b;
if (funnelInteractionId && errorText) {
const stepName = getTextFromSelector(funnelStepInfo.current.stepNameSelector);
FunnelMetrics.funnelStepError({
funnelInteractionId,
stepNumber: funnelStepInfo.current.stepNumber,
stepNameSelector: funnelStepInfo.current.stepNameSelector,
stepName,
stepIdentifier: funnelStepInfo.current.stepIdentifier,
currentDocument: (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument,
totalSubSteps: funnelStepInfo.current.subStepCount.current,
funnelIdentifier,
subStepAllSelector: getSubStepAllSelector(),
errorContext: funnelStepInfo.current.stepErrorContext,
subStepConfiguration: (_b = funnelStepInfo.current.subStepConfiguration.current) === null || _b === void 0 ? void 0 : _b.get(funnelStepInfo.current.stepNumber),
stepErrorSelector: '#' + errorSlotId,
});
}
}, [funnelInteractionId, funnelIdentifier, isLastStep, errorText, __internalRootRef, errorSlotId, funnelStepInfo]);
return (React.createElement(React.Fragment, null,
React.createElement(WizardFormHeader, null,
React.createElement("div", { className: clsx(styles['collapsed-steps'], !showCollapsedSteps && styles['collapsed-steps-hidden']) }, (_a = i18nStrings.collapsedStepsLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, activeStepIndex + 1, steps.length)),
React.createElement(InternalHeader, { className: styles['form-header-component'], variant: "h1", description: description, info: info, __headingTagRef: stepHeaderRef, __headingTagTabIndex: -1 },
React.createElement("span", { className: styles['form-header-component-wrapper'] },
React.createElement("span", { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_STEP_NAME }, title),
isOptional && React.createElement("i", null, ` - ${i18nStrings.optional}`)))),
React.createElement(InternalForm, { __internalRootRef: ref, className: styles['form-component'], actions: customPrimaryActions ? (customPrimaryActions) : (React.createElement(WizardActions, { cancelButtonText: i18nStrings.cancelButton, primaryButtonText: isLastStep ? (submitButtonText !== null && submitButtonText !== void 0 ? submitButtonText : i18nStrings.submitButton) : i18nStrings.nextButton, primaryButtonLoadingText: isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement, previousButtonText: i18nStrings.previousButton, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onPrimaryClick: onPrimaryClick, onSkipToClick: () => onSkipToClick(skipToTargetIndex), showPrevious: activeStepIndex !== 0, isPrimaryLoading: isPrimaryLoading, showSkipTo: showSkipTo, skipToButtonText: skipToButtonText, isLastStep: isLastStep, activeStepIndex: activeStepIndex, skipToStepIndex: skipToTargetIndex })), secondaryActions: secondaryActions, errorText: errorText, __errorSlotId: errorSlotId, errorIconAriaLabel: i18nStrings.errorIconAriaLabel, ...funnelStepInfo.current.funnelStepProps }, content)));
}
function findSkipToTargetIndex(steps, activeStepIndex) {
let nextRequiredStepIndex = activeStepIndex;
do {
nextRequiredStepIndex++;
} while (nextRequiredStepIndex < steps.length - 1 && steps[nextRequiredStepIndex].isOptional);
return nextRequiredStepIndex > activeStepIndex + 1 ? nextRequiredStepIndex : -1;
}
//# sourceMappingURL=wizard-form.js.map