@engie-group/fluid-design-system-react/src/components/toast/types.ts

Fluid Design System React

import React from 'react';
import { WithHTMLAttributes } from '../../utils/typeHelpers';

type NJToastRefs = {
  closeButtonRef?: React.RefObject<HTMLButtonElement>;
};
type NJToastOwnProps = NJToastRefs & {
  /**
   * Toast id
   */
  id: string;
  /**
   * Toast creation date
   */
  createdAt?: number;
  /**
   * Gauge accessible hidden label.
   * @example "The toast will be automatically closed in 10s"
   */
  gaugeLabel?: string;
  /**
   * Icon :<br>
   * <a href="https://material.io/resources/icons/" target="_blank">Material icons</a>
   */
  iconName?: string;
  /**
   * Toast title
   */
  title?: string;
  /**
   * Toast content
   */
  children: React.ReactNode;

  isInverse?: boolean;
  /**
   * Whether toast has a close icon or not
   */
  hasCloseIcon?: boolean;
  /**
   * Fired on toast close
   * @param id id of the toast
   */
  onClose?: (id: string) => void;
  /**
   * Whether toast should dismiss after some time elapsed
   */
  shouldDismiss?: boolean;
  /**
   * Time (in milliseconds) after which the toast will dismiss
   */
  dismissAfter?: number;

  /**
   * Role of the toast
   */
  ariaProps?: {
    role: 'status' | 'alert';
    'aria-live': 'assertive' | 'off' | 'polite';
  };
  /**
   * Function to close the toast by id
   * @param id
   */
  closeToast?: (id: string) => void;
  /**
   * Optional additional className
   */
  className?: string;
};

export type NJToastProps = WithHTMLAttributes<NJToastOwnProps, 'div'>;

export type TToastOptions = Partial<NJToastProps>;

export type TToastHandler = (message: string, options?: TToastOptions) => string;

export enum EActionType {
  ADD_TOAST,
  UPDATE_TOAST,
  UPSERT_TOAST,
  REMOVE_TOAST,
  REMOVE_ALL_TOAST
}

export type TAction =
  | {
      type: EActionType.ADD_TOAST;
      toast: NJToastProps;
    }
  | {
      type: EActionType.UPSERT_TOAST;
      toast: NJToastProps;
    }
  | {
      type: EActionType.UPDATE_TOAST;
      toast: Partial<NJToastProps>;
    }
  | {
      type: EActionType.REMOVE_TOAST;
      toastId?: string;
    }
  | {
      type: EActionType.REMOVE_ALL_TOAST;
    };

type NJToastContainerOwnProps = {
  /**
   * Whether the ToastContainer takes up the whole width of the window or not
   */
  type?: 'default' | 'full-width';
};

export type NJToastContainerProps = WithHTMLAttributes<NJToastContainerOwnProps, 'div'>;