@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
37 lines (36 loc) • 2.79 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import clsx from 'clsx';
import Button from '../button';
import Icon from '../icon';
import { getBaseProps } from '../internal/base-component';
import styles from './styles.css.js';
import { fireNonCancelableEvent } from '../internal/events';
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
import { useTelemetry } from '../internal/hooks/use-telemetry';
var typeToIcon = {
error: 'status-negative',
warning: 'status-warning',
success: 'status-positive',
info: 'status-info'
};
export default function Alert(_a) {
var _b, _c;
var _d = _a.type, type = _d === void 0 ? 'info' : _d, _e = _a.visible, visible = _e === void 0 ? true : _e, dismissible = _a.dismissible, dismissAriaLabel = _a.dismissAriaLabel, children = _a.children, header = _a.header, buttonText = _a.buttonText, onDismiss = _a.onDismiss, onButtonClick = _a.onButtonClick, rest = __rest(_a, ["type", "visible", "dismissible", "dismissAriaLabel", "children", "header", "buttonText", "onDismiss", "onButtonClick"]);
useTelemetry('Alert');
var baseProps = getBaseProps(rest);
var size = header && children ? 'big' : 'normal';
var _f = useContainerBreakpoints(['xs']), breakpoint = _f[0], ref = _f[1];
return (React.createElement("div", __assign({}, baseProps, { "aria-hidden": !visible, className: clsx(styles.root, (_b = {}, _b[styles.hidden] = !visible, _b), baseProps.className, styles["breakpoint-" + breakpoint]), ref: ref }),
React.createElement("div", { className: clsx(styles.alert, styles["type-" + type]) },
React.createElement("div", { className: styles.icon },
React.createElement(Icon, { name: typeToIcon[type], size: size })),
React.createElement("div", { className: styles.body },
React.createElement("div", { className: styles.message },
header && React.createElement("div", { className: styles.header }, header),
React.createElement("div", { className: styles.content }, children)),
buttonText && (React.createElement("div", { className: styles.action },
React.createElement(Button, { className: styles['action-button'], onClick: function () { return fireNonCancelableEvent(onButtonClick); }, formAction: "none" }, buttonText)))),
dismissible && (React.createElement("div", { className: clsx(styles.dismiss, (_c = {}, _c[styles['dismiss-with-button']] = buttonText, _c)) },
React.createElement(Button, { className: styles['dismiss-button'], variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissAriaLabel, onClick: function () { return fireNonCancelableEvent(onDismiss); } }))))));
}