@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
44 lines • 1.91 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { useEffect, useRef } from 'react';
import { FunnelMetrics } from '../internal/analytics';
import { getAnalyticsMetadataProps } from '../internal/base-component';
export function useFunnelChangeEvent(funnelInteractionId, funnelIdentifier, steps) {
const listenForStepChanges = useRef(false);
useEffect(() => {
// We prevent emitting the event before the funnel has stabilised.
const handle = setTimeout(() => (listenForStepChanges.current = true), 0);
return () => {
clearTimeout(handle);
listenForStepChanges.current = false;
};
}, [funnelInteractionId]);
const stepTitles = steps.map(step => step.title).join();
useEffect(() => {
if (!funnelInteractionId || !listenForStepChanges.current) {
return;
}
FunnelMetrics.funnelChange({
funnelInteractionId,
funnelIdentifier,
stepConfiguration: getStepConfiguration(steps),
});
// This dependency array does not include `steps`, because `steps` is not stable across renders.
// We use `stepTitles` as a stable proxy.
//
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [funnelInteractionId, stepTitles]);
}
export function getStepConfiguration(steps) {
return steps.map((step, index) => {
var _a;
const stepAnalyticsMetadata = getAnalyticsMetadataProps(step);
return {
name: step.title,
number: index + 1,
isOptional: (_a = step.isOptional) !== null && _a !== void 0 ? _a : false,
stepIdentifier: stepAnalyticsMetadata === null || stepAnalyticsMetadata === void 0 ? void 0 : stepAnalyticsMetadata.instanceIdentifier,
};
});
}
//# sourceMappingURL=analytics.js.map