@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
51 lines • 4.07 kB
JavaScript
import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
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 { useUniqueId } from '../internal/hooks/use-unique-id';
import { applyDisplayName } from '../internal/utils/apply-display-name';
import InternalModal, { InternalModalAsFunnel } from './internal';
import styles from './styles.css.js';
function ModalWithAnalyticsFunnel(_a) {
var { analyticsMetadata, baseComponentProps, size = 'medium' } = _a, props = __rest(_a, ["analyticsMetadata", "baseComponentProps", "size"]);
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, Object.assign({ size: size }, props, baseComponentProps, dataAttributes, { __injectAnalyticsComponentMetadata: true }))))));
}
export default function Modal(_a) {
var { size = 'medium' } = _a, props = __rest(_a, ["size"]);
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, Object.assign({ analyticsMetadata: analyticsMetadata, baseComponentProps: baseComponentProps, size: size }, props)));
}
return React.createElement(InternalModal, Object.assign({ size: size }, props, baseComponentProps, { __injectAnalyticsComponentMetadata: true }));
}
applyDisplayName(Modal, 'Modal');
//# sourceMappingURL=index.js.map