@enact/sandstone/Alert/Alert.d.ts

Large-screen/TV support library for Enact, containing a variety of UI components.

// Type definitions for sandstone/Alert

import * as React from "react";
import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface AlertImageProps {
  /**
 * String value or Object of values used to determine which image will appear for
a specific component size.
 */
  src: string | object;
  /**
   * Type of image to appear in the alert component. There are two types:
   * *  `icon`  - A small square sized image type
   * *  `thumbnail`  - A common image type
   */
  type: "icon" | "thumbnail";
}
/**
 * An image for use in an Alert.
 */

export class AlertImage extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, AlertImageProps>
> {}

export interface AlertBaseProps {
  /**
   * Buttons to be included under the component.
   *
   * Typically, up to 3 buttons are used.
   */
  buttons?: JSX.Element | JSX.Element[];
  /**
 * The contents of the body of the component.
 * 
 * Only shown when  `type="overlay"` . If  `children`  is text-only, it will be wrapped with
  .
 */
  children?: React.ReactNode;
  /**
 * Customizes the component by mapping the supplied collection of CSS class names to the
corresponding internal elements and states of this component.
 * 
 * The following classes are supported:
 * *  `alert`  - The root class name
 * *  `content`  - The content component class
 * *  `fullscreen`  - Applied to a  `type='fullscreen'`  alert
 * *  `title`  - The title component class
 */
  css?: object;
  /**
   * Image to be included in the Alert component.
   *
   * It is recommended to use the  `AlertImage`  component.
   */
  image?: JSX.Element;
  /**
   * Called when the user requests to close the Alert.
   *
   * This also includes pressing the cancel key.
   */
  onClose?: Function;
  /**
   * Called after the transition to hide the Alert has finished.
   */
  onHide?: Function;
  /**
   * Opens the Alert.
   */
  open?: boolean;
  /**
   * The primary text displayed.
   *
   * Only shown when  `type="fullscreen"` .
   */
  title?: string;
  /**
   * Type of popup.
   *
   * There are two types:
   * *  `fullscreen`  - Full screen popup
   * *  `overlay`  - Popup in the center of the screen
   */
  type?: "fullscreen" | "overlay";
}
/**
 * A modal Alert component.
 * 
 * This component is most often not used directly but may be composed within another component as it
is within   .
 */

export class AlertBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, AlertBaseProps>
> {}

export interface AlertProps
  extends Merge<AlertBaseProps, ui_Slottable_SlottableProps> {}
/**
 * A modal Alert component, ready to use in Sandstone applications.
 * 
 * `Alert`  may be used to interrupt a workflow to receive feedback from the user.
The dialog consists of a title, a message, and an area for additional
  .
 * 
 * Usage:
 * ```
<Alert
  open={this.state.open}
  title="An Important Alert"
>
  <image>
    <AlertImage src={this.state.src} type="thumbnail" />
  </image>

  Body text for alert. Components may also be used here for greater customizability.

  <buttons>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </buttons>
</Alert>
```
 */

export class Alert extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, AlertProps>
> {}

export default Alert;