@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
49 lines • 3.9 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
'use client';
import React from 'react';
import { useUniqueId } from '@awsui/component-toolkit/internal';
import { AnalyticsFunnel, AnalyticsFunnelStep, AnalyticsFunnelSubStep, } from '../internal/analytics/components/analytics-funnel';
import { useFunnel } from '../internal/analytics/hooks/use-funnel';
import { DATA_ATTR_MODAL_ID } from '../internal/analytics/selectors';
import { getAnalyticsMetadataProps } from '../internal/base-component';
import useBaseComponent from '../internal/hooks/use-base-component';
import { applyDisplayName } from '../internal/utils/apply-display-name';
import InternalModal, { InternalModalAsFunnel } from './internal';
import styles from './styles.css.js';
function ModalWithAnalyticsFunnel({ analyticsMetadata, baseComponentProps, size = 'medium', ...props }) {
const modalId = useUniqueId();
const dataAttributes = {
[DATA_ATTR_MODAL_ID]: modalId,
};
return (React.createElement(AnalyticsFunnel, { mounted: props.visible, 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: "modal", optionalStepNumbers: [], totalFunnelSteps: 1, funnelNameSelectors: () => {
var _a;
return [
`[${DATA_ATTR_MODAL_ID}="${(_a = window === null || window === void 0 ? void 0 : window.CSS) === null || _a === void 0 ? void 0 : _a.escape(modalId)}"] .${styles['header--text']}`,
];
} },
React.createElement(AnalyticsFunnelStep, { mounted: props.visible, stepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, stepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, stepNumber: 1 },
React.createElement(AnalyticsFunnelSubStep, { subStepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, subStepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext },
React.createElement(InternalModalAsFunnel, { size: size, ...props, ...baseComponentProps, ...dataAttributes, __injectAnalyticsComponentMetadata: true })))));
}
export default function Modal({ size = 'medium', ...props }) {
const { isInFunnel } = useFunnel();
const analyticsMetadata = getAnalyticsMetadataProps(props);
const baseComponentProps = useBaseComponent('Modal', {
props: {
size,
disableContentPaddings: props.disableContentPaddings,
flowType: 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);
if (!isInFunnel) {
return (React.createElement(ModalWithAnalyticsFunnel, { analyticsMetadata: analyticsMetadata, baseComponentProps: baseComponentProps, size: size, ...props }));
}
return React.createElement(InternalModal, { size: size, ...props, ...baseComponentProps, __injectAnalyticsComponentMetadata: true });
}
applyDisplayName(Modal, 'Modal');
//# sourceMappingURL=index.js.map