@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
90 lines • 5.92 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import { TransitionGroup } from 'react-transition-group';
import clsx from 'clsx';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { useInternalI18n } from '../i18n/context';
import { Transition } from '../internal/components/transition';
import { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './analytics-metadata/utils';
import { useFlashbar, useFlashbarVisibility } from './common';
import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
import { Flash } from './flash';
import styles from './styles.css.js';
export default function NonCollapsibleFlashbar({ items, i18nStrings, style, ...restProps }) {
const visibleItems = useFlashbarVisibility(items);
const { allItemsHaveId, baseProps, isReducedMotion, isVisualRefresh, mergedRef, flashRefs, handleFlashDismissed } = useFlashbar({
items: visibleItems,
...restProps,
});
const i18n = useInternalI18n('flashbar');
const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.ariaLabel);
const iconAriaLabels = {
errorIconAriaLabel: i18n('i18nStrings.errorIconAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel),
inProgressIconAriaLabel: i18n('i18nStrings.inProgressIconAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.inProgressIconAriaLabel),
infoIconAriaLabel: i18n('i18nStrings.infoIconAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.infoIconAriaLabel),
successIconAriaLabel: i18n('i18nStrings.successIconAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.successIconAriaLabel),
warningIconAriaLabel: i18n('i18nStrings.warningIconAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.warningIconAriaLabel),
};
/**
* All the flash items should have ids so we can identify which DOM element is being
* removed from the DOM to animate it. Motion will be disabled if any of the provided
* flash messages does not contain an `id`.
*/
const motionDisabled = isReducedMotion || !isVisualRefresh || !allItemsHaveId;
const animateFlash = !isReducedMotion && isVisualRefresh;
/**
* If the flashbar is flat and motion is `enabled` then the adding and removing of items
* from the flashbar will render with visual transitions.
*/
function renderFlatItemsWithTransitions() {
if (motionDisabled || !visibleItems) {
return;
}
return (
// This is a proxy for <ul>, so we're not applying a class to another actual component.
React.createElement(TransitionGroup, { component: "ul", className: styles['flash-list'], "aria-label": ariaLabel }, visibleItems.map((item, index) => {
var _a;
return (React.createElement(Transition, { transitionChangeDelay: { entering: TIMEOUT_FOR_ENTERING_ANIMATION }, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, in: true }, (state, transitionRootElement) => {
var _a;
return (React.createElement("li", { className: styles['flash-list-item'] }, renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index, transitionRootElement, state)));
}));
})));
}
/**
* If the flashbar is flat and motion is `disabled` then the adding and removing of items
* from the flashbar will render without visual transitions.
*/
function renderFlatItemsWithoutTransitions() {
if (!motionDisabled || !visibleItems) {
return;
}
return (React.createElement("ul", { className: styles['flash-list'], "aria-label": ariaLabel, ...getAnalyticsMetadataAttribute(getComponentsAnalyticsMetadata(visibleItems.length, false)) }, visibleItems.map((item, index) => {
var _a, _b;
return (React.createElement("li", { key: (_a = item.id) !== null && _a !== void 0 ? _a : index, className: styles['flash-list-item'], ...getAnalyticsMetadataAttribute(getItemAnalyticsMetadata(index + 1, item.type || 'info', item.id)) }, renderItem(item, (_b = item.id) !== null && _b !== void 0 ? _b : index)));
})));
}
/**
* This is a shared render function for a single flashbar item to be used
* by the stacking, motion, and non-motion item group render functions.
*/
function renderItem(item, key, transitionRootElement, transitionState) {
return (React.createElement(Flash, { className: clsx(animateFlash && styles['flash-with-motion'], isVisualRefresh && styles['flash-refresh']), key: key, ref: el => {
flashRefs.current[key] = el;
// If there's a transition root element ref, update it too
if (transitionRootElement && typeof transitionRootElement === 'function') {
transitionRootElement(el);
}
else if (transitionRootElement &&
typeof transitionRootElement === 'object' &&
'current' in transitionRootElement) {
transitionRootElement.current = el;
}
}, transitionState: transitionState, i18nStrings: iconAriaLabels, style: style, onDismissed: handleFlashDismissed, ...item }));
}
// The handleFlashDismissed function is now provided by the useFlashbar hook
return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.flashbar), ref: mergedRef },
renderFlatItemsWithTransitions(),
renderFlatItemsWithoutTransitions()));
}
//# sourceMappingURL=non-collapsible-flashbar.js.map