@enact/ui/ToggleItem/ToggleItem.d.ts

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

// Type definitions for ui/ToggleItem

import { ForwardRefProps as ui_ForwardRef_ForwardRefProps } from "@enact/ui/ForwardRef";
import { TouchableProps as ui_Touchable_TouchableProps } from "@enact/ui/Touchable";
import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
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 ToggleItemBaseProps {
  /**
   * The main content of the toggle item.
   */
  children: React.ReactNode;
  /**
 * The type of component to use to render as root element.
 * 
 * This receives the  `css`  prop for theme extension and therefore must be a custom
component and not a simple HTML DOM node. Recommended component or themed
derivative:  
 */
  component: React.ComponentType;
  /**
 * The  `Icon`  to render in this item.
 * 
 * This component receives the  `selected`  prop and value,
and must therefore respond to it in some way. It is recommended to use
   for this.
 */
  iconComponent: React.ComponentType | JSX.Element;
  /**
 * Called with a reference to the root component.
 * 
 * When using   , the  `ref`  prop is forwarded to this
component as  `componentRef` .
 */
  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:
 * *  `toggleItem`  - The root class name
 */
  css?: object;
  /**
   * Applies a disabled visual state to the toggle item.
   */
  disabled?: boolean;
  /**
 * An optional prop that lets you override the icon of the  `iconComponent`  component.
 * 
 * This accepts any string that the    component supports, provided
the recommendations of  `iconComponent`  are followed.
 */
  icon?: string | object;
  /**
   * Specifies on which side ( `'before'`  or  `'after'` ) of  `children`  the icon appears.
   */
  iconPosition?: "before" | "after";
  /**
 * An additional customizable icon component.
 * 
 * Supports more granular positioning rules. This should only be used  _after_  specifying the
 `icon`  property, as the positioning for this offers the ability to place this in front of
or behind the existing  `icon` . See  `itemIconPosition`  for options.
 */
  itemIcon?: React.ReactNode;
  /**
 * Specifies where  `itemIcon`  appears.
 * *  `'before'`  - first element in the item
 * *  `'beforeChildren'`  - before  `children` . If  `iconPosition`  is  `'before'` ,  `icon`  will be
before  `itemIcon`
 * *  `'afterChildren'`  - after  `children` . If iconPosition `is` 'after' `, ` icon `will be
after` itemIcon`
 * *  `'after'`  - the last element in the item
 */
  itemIconPosition?: "before" | "beforeChildren" | "afterChildren" | "after";
  /**
   * Called when the toggle item is toggled. Developers should generally use  `onToggle`  instead.
   */
  onTap?: Function;
  /**
   * Called when the toggle item is toggled.
   */
  onToggle?: Function;
  /**
   * Applies the provided  `icon` .
   */
  selected?: boolean;
  /**
   * The value that will be sent to the  `onToggle`  handler.
   */
  value?: any;
}
/**
 * A minimally styled toggle item without any behavior, ripe for extension.
 */

export class ToggleItemBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ToggleItemBaseProps>
> {}

export interface ToggleItemDecoratorProps
  extends Merge<
    Merge<ui_ForwardRef_ForwardRefProps, ui_Touchable_TouchableProps>,
    ui_Toggleable_ToggleableProps
  > {}
export function ToggleItemDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & ToggleItemDecoratorProps>;

export interface ToggleItemProps
  extends Omit<
    Merge<ToggleItemBaseProps, ToggleItemDecoratorProps>,
    "componentRef"
  > {}
/**
 * An unstyled item with built-in support for toggling.
 * 
 * Example:
 * ```
<ToggleItem icon="lock" iconPosition="before">Toggle Me</ToggleItem>
```
 */

export class ToggleItem extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ToggleItemProps>
> {}

export default ToggleItem;