@enact/sandstone/Item/Item.d.ts

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

// Type definitions for sandstone/Item

import { ItemDecoratorProps as ui_Item_ItemDecoratorProps } from "@enact/ui/Item";
import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
import { MarqueeControllerProps as sandstone_Marquee_MarqueeControllerProps } from "@enact/sandstone/Marquee";
import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";
import { ItemBaseProps as ui_Item_ItemBaseProps } from "@enact/ui/Item";
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 ItemBaseProps extends ui_Item_ItemBaseProps {
  /**
   * Centers the slots and content.
   */
  centered?: boolean;
  /**
   * Called with a reference to the root component.
   */
  componentRef?: 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:
 * *  `item`  - The root class name
 * *  `slotBefore`  - The slot (container) preceding the text of this component
 * *  `slotAfter`  - The slot (container) following the text of this component
 * *  `selected`  - Applied to a  `selected`  button
 */
  css?: object;
  /**
   * Applies a disabled style and the control becomes non-interactive.
   */
  disabled?: boolean;
  /**
   * Applies inline styling to the item.
   */
  inline?: boolean;
  /**
   * The label to be displayed along with the text.
   */
  label?: React.ReactNode;
  /**
   * The position of the label relative to the primary content,  `children` .
   */
  labelPosition?: "above" | "after" | "before" | "below";
  /**
   * Determines what triggers the marquee to start its animation.
   */
  marqueeOn?: "focus" | "hover" | "render";
  /**
 * Nodes to be inserted after  `children` .
 * 
 * For LTR locales, the nodes are inserted to the right of the primary content. For RTL
locales, the nodes are inserted to the left. If nothing is specified, nothing, not even
an empty container, is rendered in this place.
 */
  slotAfter?: React.ReactNode;
  /**
 * Nodes to be inserted before  `children`  and  `label` .
 * 
 * For LTR locales, the nodes are inserted to the left of the primary content. For RTL
locales, the nodes are inserted to the right. If nothing is specified, nothing, not even
an empty container, is rendered in this place.
 */
  slotBefore?: React.ReactNode;
}
/**
 * A Sandstone styled item without any behavior.
 */

export class ItemBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ItemBaseProps>
> {}

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

export interface ItemProps extends Merge<ItemBaseProps, ItemDecoratorProps> {}
/**
 * A Sandstone styled item with built-in support for marqueed text, and Spotlight focus.
 * 
 * Usage:
 * ```
<Item>Item Content</Item>
```
 */

export class Item extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ItemProps>
> {}

export default Item;