@enact/ui/IconButton/IconButton.d.ts

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

// Type definitions for ui/IconButton

import { ForwardRefProps as ui_ForwardRef_ForwardRefProps } from "@enact/ui/ForwardRef";
import { TouchableProps as ui_Touchable_TouchableProps } from "@enact/ui/Touchable";
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 IconButtonBaseProps {
  /**
 * This is the root component used to render the button and will receive all props except
 `icon` .
 */
  buttonComponent: React.ComponentType | JSX.Element;
  /**
 * The component used to render the   .
 * 
 * This component will receive the  `flip`  and  `size`  property set on the  `IconButton`  as well as the
 `icon`  class to customize its styling.
 */
  iconComponent: React.ComponentType;
  /**
   * Additional children that follow the icon.
   *
   * If  `icon`  isn't specified but  `children`  is,  `children`  is used as the icon's value.
   */
  children?: React.ReactNode;
  /**
 * 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:
 * *  `iconButton`  - The root component class
 * *  `icon`  - The    class
 * *  `large`  - Applied when  `size`  prop is  `'large'`
 * *  `small`  - Applied when  `size`  prop is  `'small'`
 * *  `pressed`  - Applied when  `pressed`  prop is  `true`
 */
  css?: object;
  /**
 * Disables IconButton.
 * 
 * When  `true` , the button is shown as disabled and does not generate
 `onClick`    .
 */
  disabled?: boolean;
  /**
   * Flip the icon horizontally, vertically or both.
   */
  flip?: "both" | "horizontal" | "vertical";
  /**
   * The icon displayed within the IconButton.
   *
   * If not specified,  `children`  is used as the icon value instead.
   */
  icon?: string;
  /**
   * Applies the  `pressed`  CSS class.
   */
  pressed?: boolean;
  /**
   * Applies the  `selected`  CSS class.
   */
  selected?: boolean;
  /**
 * The size of the button.
 * 
 * Applies the CSS class which can be customized by
  .
 */
  size?: string;
}
/**
 * A ui-styled button without any behavior.
 */

export class IconButtonBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, IconButtonBaseProps>
> {}

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

export interface IconButtonProps
  extends Omit<
    Merge<IconButtonBaseProps, IconButtonDecoratorProps>,
    "componentRef"
  > {}
/**
 * A minimally styled, but interactive, Button ready for customization by a theme.
 * 
 * Example:
 * ```
<IconButton size="small">
    plus
</IconButton>
```
 */

export class IconButton extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, IconButtonProps>
> {}

export default IconButton;