@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
46 lines (45 loc) • 2.76 kB
JavaScript
import React from 'react';
import Spinner from '../spinner';
import Icon from '../icon';
import Button from '../button';
import clsx from 'clsx';
import styles from './styles.css.js';
import { InternalButton } from '../button/internal';
import { warnOnce } from '../internal/logging';
import { isDevelopment } from '../internal/is-development';
var ICON_TYPES = {
success: 'status-positive',
warning: 'status-warning',
info: 'status-info',
error: 'status-negative'
};
function actionButton(buttonText, onButtonClick) {
return (React.createElement(Button, { onClick: onButtonClick, className: styles['action-button'], formAction: "none" }, buttonText));
}
function dismissButton(dismissLabel, onDismiss) {
return (React.createElement("div", { className: styles['dismiss-button-wrapper'] },
React.createElement(InternalButton, { onClick: onDismiss, className: styles['dismiss-button'], variant: "flashbar-icon", iconName: "close", formAction: "none", ariaLabel: dismissLabel })));
}
export function Flash(_a) {
var header = _a.header, content = _a.content, dismissible = _a.dismissible, dismissLabel = _a.dismissLabel, loading = _a.loading, action = _a.action, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onDismiss = _a.onDismiss, _b = _a.type, type = _b === void 0 ? 'info' : _b;
if (isDevelopment) {
if (buttonText && !onButtonClick) {
warnOnce('Flashbar', "You provided a `buttonText` prop without an `onButtonClick` handler. This will render a non-interactive action button.");
}
if (dismissible && !onDismiss) {
warnOnce('Flashbar', "You have set the `dismissible` prop without an `onDismiss` handler. This will render a non-interactive dismiss button.");
}
}
var button = action || (buttonText && actionButton(buttonText, onButtonClick));
var iconType = ICON_TYPES[type];
var icon = loading ? React.createElement(Spinner, null) : React.createElement(Icon, { name: iconType });
var effectiveType = loading ? 'info' : type;
return (React.createElement("div", { className: clsx(styles.flash, styles["flash-type-" + effectiveType]) },
React.createElement("div", { className: styles['flash-icon'] }, icon),
React.createElement("div", { className: styles['flash-body'] },
React.createElement("div", { className: styles['flash-message'] },
React.createElement("div", { className: styles['flash-header'] }, header),
React.createElement("div", { className: styles['flash-content'] }, content)),
button && React.createElement("div", { className: styles['action-button-wrapper'] }, button)),
dismissible && dismissButton(dismissLabel, onDismiss)));
}