@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
211 lines • 8.73 kB
TypeScript
import React from 'react';
import { ButtonProps } from '../button/interfaces';
import { ErrorContext } from '../internal/analytics/interfaces';
import { BaseComponentProps } from '../internal/base-component';
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
export declare namespace FlashbarProps {
interface MessageDefinition {
header?: React.ReactNode;
content?: React.ReactNode;
dismissible?: boolean;
dismissLabel?: string;
statusIconAriaLabel?: string;
loading?: boolean;
type?: FlashbarProps.Type;
ariaRole?: FlashbarProps.AriaRole;
action?: React.ReactNode;
id?: string;
buttonText?: ButtonProps['children'];
onButtonClick?: ButtonProps['onClick'];
onDismiss?: ButtonProps['onClick'];
analyticsMetadata?: FlashbarProps.ItemAnalyticsMetadata;
persistenceConfig?: FlashbarProps.PersistenceConfig;
}
interface ItemAnalyticsMetadata {
suppressFlowMetricEvents?: boolean;
errorContext?: ErrorContext;
}
interface PersistenceConfig {
uniqueKey: string;
crossServicePersistence?: boolean;
}
interface I18nStrings {
ariaLabel?: string;
errorIconAriaLabel?: string;
infoIconAriaLabel?: string;
inProgressIconAriaLabel?: string;
notificationBarAriaLabel?: string;
notificationBarText?: string;
successIconAriaLabel?: string;
warningIconAriaLabel?: string;
}
interface Style {
item?: {
root?: {
background?: {
error?: string;
info?: string;
inProgress?: string;
success?: string;
warning?: string;
};
borderColor?: {
error?: string;
info?: string;
inProgress?: string;
success?: string;
warning?: string;
};
borderRadius?: string;
borderWidth?: string;
color?: {
error?: string;
info?: string;
inProgress?: string;
success?: string;
warning?: string;
};
focusRing?: {
borderColor?: {
error?: string;
info?: string;
inProgress?: string;
success?: string;
warning?: string;
};
borderRadius?: string;
borderWidth?: string;
};
};
dismissButton?: {
color?: {
active?: {
error?: string;
info?: string;
inProgress?: string;
success?: string;
warning?: string;
};
default?: {
error?: string;
info?: string;
inProgress?: string;
success?: string;
warning?: string;
};
hover?: {
error?: string;
info?: string;
inProgress?: string;
success?: string;
warning?: string;
};
};
focusRing?: {
borderColor?: {
error?: string;
info?: string;
inProgress?: string;
success?: string;
warning?: string;
};
borderRadius?: string;
borderWidth?: string;
};
};
};
notificationBar?: {
root?: {
background?: {
active?: string;
default?: string;
hover?: string;
};
borderColor?: {
active?: string;
default?: string;
hover?: string;
};
borderRadius?: string;
borderWidth?: string;
color?: {
active?: string;
default?: string;
hover?: string;
};
};
expandButton?: {
focusRing?: {
borderColor?: string;
borderRadius?: string;
borderWidth?: string;
};
};
};
}
type Type = 'success' | 'warning' | 'info' | 'error' | 'in-progress';
type AriaRole = 'alert' | 'status';
}
export interface FlashbarProps extends BaseComponentProps {
/**
* Specifies flash messages that appear in the same order that they are listed.
* The value is an array of flash message definition objects.
*
* A flash message object contains the following properties:
* * `header` (ReactNode) - Specifies the heading text.
* * `content` (ReactNode) - Specifies the primary text displayed in the flash element.
* * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info, in-progress`. The default is `info`.
* * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.
* * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.
* When a user clicks on this button the `onDismiss` handler is called.
* * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.
* * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.
* If not provided, `i18nStrings.{type}IconAriaLabel` will be used as a fallback.
* * `ariaRole` (string) - For flash messages added after page load, specifies how this message is communicated to assistive
* technology. Use "status" for status updates or informational content. Use "alert" for important messages that need the
* user's attention.
* * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,
* our UX guidelines only allow you to add a button.
* * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.
* When a user clicks on this button the `onButtonClick` handler is called.
* If the `action` property is set, this property is ignored. **Deprecated**, replaced by `action`.
* * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button
* using the `action` property. **Deprecated**, replaced by `action`.
* * `onDismiss` (event => void) - (Optional) Called when a user clicks on the dismiss button.
* * `id` (string) - Specifies a unique flash message identifier. This property is used in two ways:
* 1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.
* 2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.
* * `persistenceConfig` (FlashbarProps.PersistenceConfig) - Config to persist dismiss state for dismissable Flashbar item, used only in AWS Management Console.
* * `uniqueKey` (string) - This key to store the persistence state, it must be unique across your console.
* * `crossServicePersistence` (boolean) - If true, the persistence state will be shared across AWS services.
* * `analyticsMetadata` (FlashbarProps.ItemAnalyticsMetadata) - (Optional) Specifies additional analytics-related metadata.
* * `suppressFlowMetricEvents` - Prevent this item from generating events related to flow metrics.
* @analytics
*/
items: ReadonlyArray<FlashbarProps.MessageDefinition>;
/**
* Specifies whether flash messages should be stacked.
*/
stackItems?: boolean;
/**
* An object containing all the necessary localized strings required by the component. The object should contain:
*
* * `ariaLabel` - Specifies the ARIA label for the list of notifications.
*
* If `stackItems` is set to `true`, it should also contain:
*
* * `notificationBarAriaLabel` - (optional) Specifies the ARIA label for the notification bar
* * `notificationBarText` - (optional) Specifies the text shown in the notification bar
* * `errorIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `error`.
* * `warningIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `warning`.
* * `infoIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `info`.
* * `successIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `success`.
* * `inProgressIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `in-progress` or with `loading` set to `true`.
* @i18n
*/
i18nStrings?: FlashbarProps.I18nStrings;
/**
* @awsuiSystem core
*/
}
export type InternalFlashbarProps = FlashbarProps & InternalBaseComponentProps;