@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
85 lines • 5.73 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
'use client';
import React, { useEffect, useRef } from 'react';
import { useMergeRefs, useUniqueId } from '@awsui/component-toolkit/internal';
import { FunnelMetrics } from '../internal/analytics';
import { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';
import { useFunnel, useFunnelNameSelector, useFunnelStepRef } from '../internal/analytics/hooks/use-funnel';
import { getSubStepAllSelector, getTextFromSelector } from '../internal/analytics/selectors';
import { getAnalyticsMetadataProps } from '../internal/base-component';
import { ButtonContext } from '../internal/context/button-context';
import useBaseComponent from '../internal/hooks/use-base-component';
import { applyDisplayName } from '../internal/utils/apply-display-name';
import InternalForm from './internal';
import headerStyles from '../header/styles.css.js';
import analyticsSelectors from './analytics-metadata/styles.css.js';
const FormWithAnalytics = ({ variant = 'full-page', actions, errorText, __internalRootRef, ...props }) => {
const rootRef = useRef(null);
const ref = useMergeRefs(rootRef, __internalRootRef);
const { funnelIdentifier, funnelInteractionId, funnelProps, funnelSubmit, funnelNextOrSubmitAttempt, errorCount, submissionAttempt, funnelErrorContext, } = useFunnel();
const funnelStepInfo = useFunnelStepRef();
const handleActionButtonClick = ({ variant }) => {
if (variant === 'primary') {
funnelNextOrSubmitAttempt();
funnelSubmit();
}
};
const errorSlotId = useUniqueId('form-error-');
useEffect(() => {
var _a, _b;
if (funnelInteractionId && errorText) {
errorCount.current++;
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,
});
return () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
errorCount.current--;
};
}
}, [
funnelInteractionId,
funnelIdentifier,
errorText,
submissionAttempt,
errorCount,
funnelErrorContext,
errorSlotId,
funnelStepInfo,
]);
return (React.createElement(ButtonContext.Provider, { value: { onClick: handleActionButtonClick } },
React.createElement(InternalForm, { variant: variant, actions: actions, errorText: errorText, __errorSlotId: errorSlotId, ...props, ...funnelProps, ...funnelStepInfo.current.funnelStepProps, __internalRootRef: ref, __injectAnalyticsComponentMetadata: true })));
};
export default function Form({ variant = 'full-page', ...props }) {
const analyticsMetadata = getAnalyticsMetadataProps(props);
const baseComponentProps = useBaseComponent('Form', {
props: {
variant,
flowType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.flowType,
},
metadata: {
hasResourceType: Boolean(analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.resourceType),
hasInstanceIdentifier: Boolean(analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier),
},
}, analyticsMetadata);
const inheritedFunnelNameSelector = useFunnelNameSelector();
const funnelNameSelector = inheritedFunnelNameSelector || `.${analyticsSelectors.header} .${headerStyles['heading-text']}`;
return (React.createElement(AnalyticsFunnel, { funnelIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, funnelFlowType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.flowType, funnelErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, funnelResourceType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.resourceType, funnelType: "single-page", optionalStepNumbers: [], totalFunnelSteps: 1, funnelNameSelectors: () => [funnelNameSelector, `.${analyticsSelectors.header}`], componentSelectors: () => [`.${analyticsSelectors.root}`] },
React.createElement(AnalyticsFunnelStep, { stepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, stepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, stepNumber: 1 },
React.createElement(FormWithAnalytics, { variant: variant, ...props, ...baseComponentProps }))));
}
applyDisplayName(Form, 'Form');
//# sourceMappingURL=index.js.map