@enact/sandstone/CheckboxItem/CheckboxItem.d.ts

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

// Type definitions for sandstone/CheckboxItem

import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
import { ItemProps as sandstone_Item_ItemProps } from "@enact/sandstone/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 CheckboxItemBaseProps
  extends Omit<sandstone_Item_ItemProps, "iconComponent"> {
  /**
 * 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:
 * *  `checkboxItem`  - The root class name
 */
  css?: object;
  /**
   * The icon content.
   *
   * May be specified as either:
   * *  A string that represents an icon from the   ,
   * *  An HTML entity string, Unicode reference or hex value (in the form '0x...'),
   * *  A URL specifying path to an icon image, or
   * *  An object representing a resolution independent resource (See   )
   */
  icon?: string | object;
  /**
 * Enables the "indeterminate" state.
 * 
 * An indeterminate, mixed, or half-selected state is typically used in a hierarchy or group
to represent that some, not all, children are selected.
 * 
 * NOTE: This does not prevent updating the  `selected`  state. Applications must control this
property directly.
 */
  indeterminate?: boolean;
  /**
   * The icon to be used in the  `indeterminate`  state.
   *
   * May be specified as either:
   * *  A string that represents an icon from the   ,
   * *  An HTML entity string, Unicode reference or hex value (in the form '0x...'),
   * *  A URL specifying path to an icon image, or
   * *  An object representing a resolution independent resource (See   )
   */
  indeterminateIcon?: string;
  /**
   * If true the checkbox will be selected.
   */
  selected?: boolean;
  /**
   * Nodes to be inserted after the checkbox and before  `children` .
   */
  slotBefore?: React.ReactNode;
}
/**
 * A Sandstone-styled item with a checkbox component.
 * 
 * `CheckboxItem`  may be used to allow the user to select a single option or used as part of a
   when multiple    are possible.
 * 
 * Usage:
 * ```
<CheckboxItem
	defaultSelected={selected}
	onToggle={handleToggle}
>
 Item with a Checkbox
</CheckboxItem>
```
 */

export class CheckboxItemBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, CheckboxItemBaseProps>
> {}

export interface CheckboxItemDecoratorProps
  extends ui_Toggleable_ToggleableProps {}
export function CheckboxItemDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & CheckboxItemDecoratorProps>;

export interface CheckboxItemProps
  extends Merge<CheckboxItemBaseProps, CheckboxItemDecoratorProps> {}
/**
 * A Sandstone-styled item with a checkbox component.
 * 
 * `CheckboxItem`  will manage its  `selected`  state via    unless set
directly.
 */

export class CheckboxItem extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, CheckboxItemProps>
> {}

export default CheckboxItem;