@enact/ui/AnnounceDecorator/AnnounceDecorator.d.ts

A collection of simplified unstyled cross-platform UI components for Enact

// Type definitions for ui/AnnounceDecorator

import * as React from "react";

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 AnnounceDecoratorProps {
  /**
   * The wrapped component's children.
   *
   * An instance of    will be appended to  `children` .
   */
  children?: React.ReactNode;
}
export function AnnounceDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & AnnounceDecoratorProps>;

export interface AnnounceProps {
  /**
 * Time, in milliseconds, to wait to remove the alert message.
 * 
 * Subsequent updates to the
message before the timeout are ignored.
 */
  timeout?: number;
}
/**
 * An unstyled component with an imperative API to alert the user.
 * 
 * The  `announce()`  method should be used to alert the user of behavior for accessibility.
 * 
 * Example:
 * ```
import {Announce} from '@enact/ui/AnnounceDecorator';
import {Component} from 'react';

class Example extends Component {
  notify = () => {
    if (this.announce) {
      this.announce.announce('this text will be alerted to user by TTS');
    }
  }

  setAnnounceRef = (announce) => {
    this.announce = announce;
  }

  render () {
    <div>
      <button onClick={this.notify}>Notify on Click</button>
      <Announce ref={this.setAnnounceRef} />
    </div>
  }
}
```
 */

export class Announce extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, AnnounceProps>
> {}

export default AnnounceDecorator;