@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
79 lines • 6.83 kB
JavaScript
import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef } from 'react';
import clsx from 'clsx';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { InternalButton } from '../button/internal';
import { useInternalI18n } from '../i18n/context';
import InternalIcon from '../icon/internal';
import { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';
import { getBaseProps } from '../internal/base-component';
import VisualContext from '../internal/components/visual-context';
import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
import { fireNonCancelableEvent } from '../internal/events';
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
import useForwardFocus from '../internal/hooks/forward-focus';
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import { awsuiPluginsInternal } from '../internal/plugins/api';
import { createUseDiscoveredAction, createUseDiscoveredContent } from '../internal/plugins/helpers';
import { ActionsWrapper } from './actions-wrapper';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
const typeToIcon = {
error: 'status-negative',
warning: 'status-warning',
success: 'status-positive',
info: 'status-info',
};
const useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert.onActionRegistered);
const useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent);
const InternalAlert = React.forwardRef((_a, ref) => {
var _b, _c;
var { type, i18nStrings, visible = true, dismissible, children, header, buttonText, action, onDismiss, onButtonClick, __internalRootRef = null, statusIconAriaLabel: deprecatedStatusIconAriaLabel, dismissAriaLabel: deprecatedDismissAriaLabel } = _a, rest = __rest(_a, ["type", "i18nStrings", "visible", "dismissible", "children", "header", "buttonText", "action", "onDismiss", "onButtonClick", "__internalRootRef", "statusIconAriaLabel", "dismissAriaLabel"]);
const baseProps = getBaseProps(rest);
const i18n = useInternalI18n('alert');
const focusRef = useRef(null);
useForwardFocus(ref, focusRef);
const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);
const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
const { discoveredActions, headerRef: headerRefAction, contentRef: contentRefAction } = useDiscoveredAction(type);
const { initialHidden, headerReplacementType, contentReplacementType, headerRef: headerRefContent, contentRef: contentRefContent, replacementHeaderRef, replacementContentRef, } = useDiscoveredContent({ type, header, children });
const headerRef = useMergeRefs(headerRefAction, headerRefContent);
const contentRef = useMergeRefs(contentRefAction, contentRefContent);
const isRefresh = useVisualRefresh();
const size = isRefresh
? 'normal'
: headerReplacementType !== 'remove' && header && contentReplacementType !== 'remove' && children
? 'big'
: 'normal';
const hasAction = Boolean(action || buttonText || discoveredActions.length);
const analyticsAttributes = {
[DATA_ATTR_ANALYTICS_ALERT]: type,
};
const statusIconAriaLabel = i18n(`i18nStrings.${type}IconAriaLabel`, (_b = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings[`${type}IconAriaLabel`]) !== null && _b !== void 0 ? _b : deprecatedStatusIconAriaLabel);
const dismissAriaLabel = i18n('i18nStrings.dismissAriaLabel', (_c = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dismissAriaLabel) !== null && _c !== void 0 ? _c : i18n('dismissAriaLabel', deprecatedDismissAriaLabel));
return (React.createElement("div", Object.assign({}, baseProps, analyticsAttributes, { "aria-hidden": !visible, className: clsx(styles.root, { [styles.hidden]: !visible, [styles['initial-hidden']]: initialHidden }, baseProps.className), ref: mergedRef }),
React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
React.createElement(VisualContext, { contextName: "alert" },
React.createElement("div", { className: clsx(styles.alert, styles[`type-${type}`], styles[`icon-size-${size}`], hasAction && styles['with-action'], dismissible && styles['with-dismiss'], styles[`breakpoint-${breakpoint}`]) },
React.createElement("div", { className: styles['alert-focus-wrapper'], tabIndex: -1, ref: focusRef },
React.createElement("div", { className: clsx(styles.icon, styles.text) },
React.createElement(InternalIcon, { name: typeToIcon[type], size: size, ariaLabel: statusIconAriaLabel })),
React.createElement("div", { className: clsx(styles.message, styles.text) },
React.createElement("div", { className: clsx(header && styles.header, headerReplacementType !== 'original' ? styles.hidden : analyticsSelectors.header), ref: headerRef }, header),
React.createElement("div", { className: clsx(styles['header-replacement'], headerReplacementType !== 'replaced' ? styles.hidden : analyticsSelectors.header), ref: replacementHeaderRef }),
React.createElement("div", { className: clsx(styles.content, contentReplacementType !== 'original' && styles.hidden), ref: contentRef }, children),
React.createElement("div", { className: clsx(styles['content-replacement'], contentReplacementType !== 'replaced' && styles.hidden), ref: replacementContentRef }))),
React.createElement(ActionsWrapper, { className: styles.action, testUtilClasses: {
actionSlot: styles['action-slot'],
actionButton: styles['action-button'],
}, action: action, discoveredActions: discoveredActions, buttonText: buttonText, onButtonClick: () => fireNonCancelableEvent(onButtonClick) }),
dismissible && (React.createElement("div", Object.assign({ className: styles.dismiss }, getAnalyticsMetadataAttribute({
action: 'dismiss',
})),
React.createElement(InternalButton, { className: styles['dismiss-button'], variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissAriaLabel, onClick: () => fireNonCancelableEvent(onDismiss) }))))))));
});
export default InternalAlert;
//# sourceMappingURL=internal.js.map