@enact/sandstone/IconItem/IconItem.d.ts

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

// Type definitions for sandstone/IconItem

import { MarqueeControllerProps as sandstone_Marquee_MarqueeControllerProps } from "@enact/sandstone/Marquee";
import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";
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;

/**
 * The shape for image of   .
 */
export interface ImageShape {
  /**
 * Size for the image.
The following properties should be provided:
 * *  `height`  - The height of the image
 * *  `width`  - The width of the image
 */
  size: object /**
 * Source for the image.
String value or Object of values used to determine which image will appear on
a specific screenSize.
 */;
  src: string | object;
}
export interface IconItemBaseProps {
  /**
 * The background color, gradient, or image of this item.
Accepts any format of color, gradient type value, and image url.
 * 
 * Example: '#ff0000', 'radial-gradient(crimson, skyblue)', 'url(  ) center / cover'
 */
  background?: string;
  /**
   * Specifies bordered or borderless.
   */
  bordered?: boolean;
  /**
   * The custom component rendred as the content of this IconItem.
   */
  children?: 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:
 * *  `iconItem`  - The icon item component class
 * *  `content`  - The class for the content area except title
 * *  `bordered`  - The border class
 * *  `icon`  - The icon component class
 * *  `image`  - The image component class
 * *  `labelContainer`  - The label container class
 * *  `label`  - The label component class
 * *  `title`  - The title component class
 */
  css?: object;
  /**
   * The voice control intent.
   */
  "data-webos-voice-intent"?: string;
  /**
   * Disable IconItem and becomes non-interactive.
   */
  disabled?: boolean;
  /**
 * The icon content.
If this is specified,    will be shown as the content.
 */
  icon?: string | object;
  /**
 * Source and size for the image.
See the datails in  
 */
  image?: ImageShape;
  /**
   * A label displayed in the content.
   */
  label?: string;
  /**
   * The color of label.
   */
  labelColor?: "dark" | "light";
  /**
   * Determines what triggers the label to show.
   */
  labelOn?: "focus" | "render";
  /**
   * Title text showing below the icon.
   */
  title?: string;
  /**
   * Determines what triggers the title to show.
   */
  titleOn?: "focus" | "render";
}
/**
 * A Sandstone styled base component for   .
 */

export class IconItemBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, IconItemBaseProps>
> {}

export interface IconItemDecoratorProps
  extends Merge<
    Merge<
      sandstone_Marquee_MarqueeControllerProps,
      spotlight_Spottable_SpottableProps
    >,
    sandstone_Skinnable_SkinnableProps
  > {}
export function IconItemDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & IconItemDecoratorProps>;

export interface IconItemProps
  extends Merge<IconItemBaseProps, IconItemDecoratorProps> {}
/**
 * A sandstone-styled icon item, Marquee and Spottable applied.
 * 
 * Usage:
 * ```
<IconItem
  background="#1b1b1b"
  bordered
  icon="usb"
/>
```
 */

export class IconItem extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, IconItemProps>
> {}

export default IconItem;