@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
81 lines • 5.5 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 { 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 } from './common';
import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
import { Flash } from './flash';
import styles from './styles.css.js';
export default function NonCollapsibleFlashbar(_a) {
var { items, i18nStrings } = _a, restProps = __rest(_a, ["items", "i18nStrings"]);
const { allItemsHaveId, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef } = useFlashbar(Object.assign({ items }, 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 || !items) {
return;
}
return (
// This is a proxy for <ul>, so we're not applying a class to another actual component.
// eslint-disable-next-line react/forbid-component-props
React.createElement(TransitionGroup, { component: "ul", className: styles['flash-list'], "aria-label": ariaLabel }, items.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 || !items) {
return;
}
return (React.createElement("ul", Object.assign({ className: styles['flash-list'], "aria-label": ariaLabel }, getAnalyticsMetadataAttribute(getComponentsAnalyticsMetadata(items.length, false))), items.map((item, index) => {
var _a, _b;
return (React.createElement("li", Object.assign({ 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
// eslint-disable-next-line react/forbid-component-props
, Object.assign({
// eslint-disable-next-line react/forbid-component-props
className: clsx(animateFlash && styles['flash-with-motion'], isVisualRefresh && styles['flash-refresh']), key: key, ref: transitionRootElement, transitionState: transitionState, i18nStrings: iconAriaLabels }, item)));
}
return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles[`breakpoint-${breakpoint}`]), ref: mergedRef }),
renderFlatItemsWithTransitions(),
renderFlatItemsWithoutTransitions()));
}
//# sourceMappingURL=non-collapsible-flashbar.js.map