@enact/ui/Marquee/index.d.ts

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

// Type definitions for ui/Marquee

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 MarqueeControllerConfig extends Object {
  /**
 * When  `true` , any  `onFocus`  events that bubble to the controller will start the contained
 `Marquee`  instances. This is useful when a component contains  `Marquee`  instances that need to be
started when sibling components are focused.
 */
  marqueeOnFocus?: boolean;
}
export interface MarqueeControllerProps {}
export function MarqueeController<P>(
  config: MarqueeControllerConfig,
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & MarqueeControllerProps>;

export function MarqueeController<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & MarqueeControllerProps>;

export interface MarqueeBaseProps {
  /**
   * Text alignment value of the marquee
   *
   * Valid values are:
   * *  `'left'` ,
   * *  `'right'` , and
   * *  `'center'`
   */
  alignment?: string;
  /**
   * Applies animating styles such as removing the ellipsis.
   */
  animating?: boolean;
  /**
   * Sets the value of the  `aria-label`  attribute for the wrapped component.
   */
  "aria-label"?: string;
  /**
   * The text or a set of components that should be marqueed
   *
   * This prop may be empty in some cases, which is OK.
   */
  children?: React.ReactNode;
  /**
   * Called when mounting or unmounting with a reference to the client node
   */
  clientRef?: object | Function;
  /**
 * 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:
 * *  `marquee`  - The root component class
 * *  `animate`  - Applied to the inner content node when the text is animating
 * *  `spacing`  - The spacing node used between the repeated content
 * *  `text`  - The inner content node
 * *  `willAnimate`  - Applied to the inner content node shortly before animation
 */
  css?: object;
  /**
   * Distance to animate the marquee
   *
   * Usually, the  `distance`  is the width of the text minus the width of the container
   */
  distance?: number;
  /**
   * Called when the marquee completes its animation
   */
  onMarqueeComplete?: Function;
  /**
   * Text overflow setting. Either  `'clip'`  or  `'ellipsis'`
   */
  overflow?: "clip" | "ellipsis";
  /**
   * `true`  if the directionality of the content is right-to-left
   */
  rtl?: boolean;
  /**
   * Amount of spacing, in pixels, between the instances of the content
   */
  spacing?: number;
  /**
   * Speed of marquee animation in pixels/second.
   */
  speed?: number;
  /**
 * Indicates the marquee will animate soon.
 * 
 * Should be used by the component to prepare itself for animation such as promoting
composite layers for improved performance.
 */
  willAnimate?: boolean;
}
/**
 * Marquees the children of the component.
 *
 * For automated marquee calculations use   .
 */

export class MarqueeBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, MarqueeBaseProps>
> {}

export interface MarqueeDecoratorConfig extends Object {
  /**
   * Property containing the callback to stop the animation when  `marqueeOn`  is  `'focus'`
   */
  blur?: string;
  /**
   * The base marquee component wrapping the content.
   */
  component?: React.ComponentType;
  /**
 * 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:
 * *  `marquee`  - The root component class
 * *  `animate`  - Applied to the inner content node when the text is animating
 * *  `spacing`  - The spacing node used between the repeated content
 * *  `text`  - The inner content node
 * *  `willAnimate`  - Applied to the inner content node shortly before animation
 */
  css?: object;
  /**
   * Property containing the callback to start the animation when  `marqueeOn`  is  `'hover'`
   */
  enter?: string;
  /**
   * Property containing the callback to start the animation when  `marqueeOn`  is  `'focus'`
   */
  focus?: string;
  /**
 * Invalidate the distance if any property (like 'inline') changes.
Expects an array of props which on change trigger invalidateMetrics.
 */
  invalidateProps?: string[];
  /**
   * Property containing the callback to stop the animation when  `marqueeOn`  is  `'hover'`
   */
  leave?: string;
  /**
   * A function that determines the text directionality of a string.
   *
   * Returns:
   * *  `'rtl'`  if the text should marquee to the right
   * *  `'ltr'`  if the text should marquee to the left
   */
  marqueeDirection?: Function;
}
export interface MarqueeDecoratorProps {
  /**
   * Text alignment value of the marquee. Valid values are  `'left'` ,  `'right'`  and  `'center'` .
   */
  alignment?: string;
  /**
   * Children to be marqueed
   */
  children?: React.ReactNode;
  /**
 * Passed through to the wrapped component.
 * 
 * Does not affect Marquee behavior except that components that are  `marqueeOn="focus"` 
will be treated as if they were  `marqueeOn="hover"` , to allow disabled (and thus,
unfocusable) components to marquee.
 */
  disabled?: boolean;
  /**
 * Forces the  `direction`  of the marquee.
 * 
 * Valid values are  `'rtl'` ,  `'ltr'` , and  `'locale'` . This includes non-text elements as well.
The default behavior, if this prop is unset, is to evaluate the text content for
directionality using   .
 * 
 * If  `'locale'` , the  `direction`  is determined by the locale, same as   .
In other words, it will not consider the text content for determining the direction.
 */
  forceDirection?: string;
  /**
 * The current locale as a
  .
 */
  locale?: string;
  /**
 * Number of milliseconds to wait before starting marquee when  `marqueeOn`  is  `'hover'`  or
 `'focus'`  or before restarting any marquee.
 */
  marqueeDelay?: number;
  /**
   * Disables all marquee behavior and removes supporting markup.
   */
  marqueeDisabled?: boolean;
  /**
   * Determines what triggers the marquee to start its animation.
   */
  marqueeOn?: "focus" | "hover" | "render";
  /**
   * Number of milliseconds to wait before starting marquee the first time.
   *
   * Has no effect if  `marqueeOn`  is not  `'render'`
   */
  marqueeOnRenderDelay?: number;
  /**
 * Number of milliseconds to wait before resetting the marquee position after it
finishes.
 * 
 * A minimum of 40 milliseconds is enforced.
 */
  marqueeResetDelay?: number;
  /**
 * Amount of spacing between the instances of the content when animating.
 * 
 * May either be a number indicating the number of pixels or a string indicating the
percentage relative to the width of the component.
 * 
 * _Note:_  When using a number, the value should be based on 1920x1080 display and
will be scaled automatically for the current resolution using   .
 */
  marqueeSpacing?: string | number;
  /**
   * Rate of marquee measured in pixels/second.
   */
  marqueeSpeed?: number;
  /**
   * Indicates the text directionality of the current locale is right-to-left
   */
  rtl?: string;
}
export function MarqueeDecorator<P>(
  config: MarqueeDecoratorConfig,
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & MarqueeDecoratorProps>;

export function MarqueeDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & MarqueeDecoratorProps>;

export interface MarqueeProps
  extends Merge<MarqueeBaseProps, MarqueeDecoratorProps> {}
/**
 * A minimally-styled marquee component.
 */

export class Marquee extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, MarqueeProps>
> {}

export default Marquee;