@enact/sandstone/Button/Button.d.ts

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

// Type definitions for sandstone/Button

import { TooltipDecoratorProps as sandstone_TooltipDecorator_TooltipDecoratorProps } from "@enact/sandstone/TooltipDecorator";
import { MarqueeDecoratorProps as sandstone_Marquee_MarqueeDecoratorProps } from "@enact/sandstone/Marquee";
import { ButtonDecoratorProps as ui_Button_ButtonDecoratorProps } from "@enact/ui/Button";
import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";
import { ButtonBaseProps as ui_Button_ButtonBaseProps } from "@enact/ui/Button";
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 ButtonBaseProps extends ui_Button_ButtonBaseProps {
  /**
 * The background opacity of this button.
 * 
 * Text buttons and icon+text buttons, by default are opaque, while icon-only buttons
default to transparent. This value can be overridden by setting this prop.
 * 
 * Valid values are:  `'opaque'` , and  `'transparent'` .
 */
  backgroundOpacity?: "opaque" | "transparent";
  /**
 * The color of the underline beneath button's content.
 * 
 * Accepts one of the following color names, which correspond with the colored buttons on a
standard remote control:  `'red'` ,  `'green'` ,  `'yellow'` ,  `'blue'` .
 */
  color?: "red" | "green" | "yellow" | "blue";
  /**
 * 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:
 * *  `button`  - The root class name
 * *  `bg`  - The background node of the button
 * *  `large`  - Applied to a  `size='large'`  button
 * *  `selected`  - Applied to a  `selected`  button
 * *  `small`  - Applied to a  `size='small'`  button
 */
  css?: object;
  /**
   * Specifies on which side ( `'before'`  or  `'after'` ) of the text the icon appears.
   */
  iconPosition?: "before" | "after";
  /**
 * Boolean controlling whether this component should enforce the "minimum width" rules.
 * 
 * _NOTE_ : If you don't specify this prop, it works as  `false`  for icon only Button
and as  `true`  for other Buttons.
 */
  minWidth?: boolean;
  /**
   * True if both sides of button are fully rounded.
   */
  roundBorder?: boolean;
  /**
 * Adds shadow to the text.
It is only applied when the background opacity of the button is  `transparent` .
 */
  shadowed?: boolean;
  /**
   * The size of the button.
   */
  size?: "large" | "small";
}
/**
 * A button component.
 * 
 * This component is most often not used directly but may be composed within another component as it
is within   .
 */

export class ButtonBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ButtonBaseProps>
> {}

export interface ButtonDecoratorProps
  extends Merge<
    Merge<
      Merge<
        Merge<
          sandstone_TooltipDecorator_TooltipDecoratorProps,
          sandstone_Marquee_MarqueeDecoratorProps
        >,
        ui_Button_ButtonDecoratorProps
      >,
      spotlight_Spottable_SpottableProps
    >,
    sandstone_Skinnable_SkinnableProps
  > {}
export function ButtonDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & ButtonDecoratorProps>;

export interface ButtonProps
  extends Merge<ButtonBaseProps, ButtonDecoratorProps> {}
/**
 * A button component, ready to use in Sandstone applications.
 * 
 * Usage:
 * ```
<Button
backgroundOpacity="transparent"
size="small"
icon="home"
>
	Press me!
</Button>
```
 */

export class Button extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ButtonProps>
> {}

export default Button;