@enact/sandstone/Sprite/Sprite.d.ts

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

// Type definitions for sandstone/Sprite

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 SpriteProps {
  /**
   * The amount of animation cells spread across the X (horizontal) axis.
   */
  columns?: number;
  /**
   * The length of the animation in milliseconds.
   */
  duration?: number;
  /**
 * The height of a single cell in pixels.
 * 
 * This value is scaled automatically based on the "base" screen resolution for
this theme. All measurements should be with respect to a 4k UHD display.
 */
  height?: number;
  /**
 * The number of times the animation should repeat.
 * 
 * The JavaScript reserved word  `Infinity`  is a valid option here (set by default) that
means "repeat indefinitely".
 */
  iterations?: number;
  /**
 * Sets the left distance that the first cell is from the top left corner.
 * 
 * This can be useful if you have several sprite animations in one image file.
 * 
 * This value is scaled automatically based on the "base" screen resolution for
this theme. All measurements should be with respect to a 4k UHD display.
 */
  offsetLeft?: number;
  /**
 * Sets the top distance that the first cell is from the top left corner.
 * 
 * This can be useful if you have several sprite animations in one image file.
 * 
 * This value is scaled automatically based on the "base" screen resolution for
this theme. All measurements should be with respect to a 4k UHD display.
 */
  offsetTop?: number;
  /**
 * Event callback for when animation events occur.
 * 
 * This callback can be used for more fine-grained control of the sprite animation.
The arguments payload contains an object with the following keys:
 * *  `animation` : the  `animate`  handle  
 * *  `playing` : boolean representing the "playing" vs "stopped" state
 * *  `paused` : boolean representing whether the animation has paused
 * 
 * Note: Playing and paused are handled separately, since a paused animation is
still in a playing state, while a stopped animation is both not paused and
not playing.
 */
  onSpriteAnimation?: Function;
  /**
 * Sets the orientation of the frames on the sprite sheet ( `src` ).
 * 
 * A horizontal setting would indicate that the cells are arranged left to right with the
next row starting below the first row.
A vertical setting would indicate that the cells are arranged top to bottom with the
next column starting to the right of the first column.
 */
  orientation?: "horizontal" | "vertical";
  /**
   * The amount of animation cells spread across the Y (vertical) axis.
   */
  rows?: number;
  /**
   * The sprite-sheet image with all of the cells on it.
   */
  src?: string | object;
  /**
   * Stops the animation from playing, resetting to the beginning.
   */
  stopped?: boolean;
  /**
 * The width of a single cell in pixels.
 * 
 * This value is scaled automatically based on the "base" screen resolution for
this theme. All measurements should be with respect to a 4k UHD display.
 */
  width?: number;
}
/**
 * Renders a Sprite animation.
 */

export class Sprite extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SpriteProps>
> {}

export default Sprite;