@enact/ui/LabeledIcon/LabeledIcon.d.ts

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

// Type definitions for ui/LabeledIcon

import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
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 LabeledIconBaseProps {
  /**
 * The label.
 * 
 * This accepts strings, DOM, and Components, if you need more elaborate features. It may be
positioned using  `labelPosition` .
 */
  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:
 * *  `labeledIcon`  - The root component class
 * *  `icon`  - The icon component class
 * *  `iconCell`  - Applied to the  `iconComponent`  directly, like  `.icon` . If  `icon`  in a
React component, this class is applied to the container of the icon,
rather than the icon itself.
 * *  `label`  - The label component class
 * *  `inline`  - Applied when the inline prop is set
 * *  `above`  - Applied when the labelPosition prop is set to above
 * *  `after`  - Applied when the labelPosition prop is set to after
 * *  `before`  - Applied when the labelPosition prop is set to before
 * *  `below`  - Applied when the labelPosition prop is set to below
 * *  `left`  - Applied when the labelPosition prop is set to left
 * *  `right`  - Applied when the labelPosition prop is set to right
 */
  css?: object;
  /**
   * Disables the component and becomes non-interactive.
   */
  disabled?: boolean;
  /**
   * Flip the icon horizontally, vertically or both.
   */
  flip?: "both" | "horizontal" | "vertical";
  /**
 * The icon.
 * 
 * This will be passed as  `children`  to the  `iconComponent` , unless you supply a React
element (like JSX) to this prop, directly or via the  `<icon>`  slot.
 */
  icon?: string | JSX.Element | React.ComponentType;
  /**
 * The component used to render the  `icon` .
 * 
 * This will receive the  `icon`  prop as  `children`  and should handle it appropriately. This
prop is ignored in the case of a component being passed into the  `icon`  prop. It will
also receive the  `flip`  and  `size`  props as set on the component.
 */
  iconComponent?: React.ComponentType;
  /**
 * Enables this component to be used in an "inline" context.
 * 
 * This is useful for when you have several of these components in a row and are not using a
   or flex-box configuration.
 */
  inline?: boolean;
  /**
   * The position of the label in relation to the icon element.
   *
   * Allowed values include:
   * *  'below' (default),
   * *  'above',
   * *  'left',
   * *  'right',
   * *  'before', and
   * *  'after'.
   *
   * The 'before' and 'after' values automatically swap sides when in an RTL locale context.
   */
  labelPosition?: "above" | "after" | "before" | "below" | "left" | "right";
  /**
 * The size of the icon.
 * 
 * Applies the CSS class which can be customized by
  .
 */
  size?: string;
}
/**
 * An icon component with a label.
 */

export class LabeledIconBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, LabeledIconBaseProps>
> {}

export interface LabeledIconDecoratorProps
  extends ui_Slottable_SlottableProps {}
export function LabeledIconDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & LabeledIconDecoratorProps>;

export interface LabeledIconProps
  extends Omit<
    Merge<LabeledIconBaseProps, LabeledIconDecoratorProps>,
    "componentRef"
  > {}
/**
 * An icon component with a label without any behaviors applied to it.
 * 
 * Usage:
 * ```
<LabeledIcon icon="star" labelPosition="after">
  Favorite
</LabeledIcon>
```
 */

export class LabeledIcon extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, LabeledIconProps>
> {}

export default LabeledIcon;