@enact/ui/SlotItem/SlotItem.d.ts

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

// Type definitions for ui/SlotItem

import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
import { ForwardRefProps as ui_ForwardRef_ForwardRefProps } from "@enact/ui/ForwardRef";
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 SlotItemBaseProps {
  /**
 * The type of component to use to render the item.
 * 
 * This component will receive the  `inline`  prop and any additional unhandled props provided
to  `SlotItem` . A derivative of    is recommended.
 */
  component: React.ComponentType;
  /**
 * Controls the visibility state of the slots.
 * 
 * One, both, or neither slot can be shown. Choosing  `'after'`  will leave  `slotBefore` 
visible at all times; only  `slotAfter`  will have its visibility toggled.  Valid values
are  `'before'` ,  `'after'`  and  `'both'` . Omitting the property will result in
no-auto-hiding for either slot so they will both be present.
 * 
 * In order for  `autoHide`  to have a visual affect, the  `hidden`  class must be tied to
another condition such as focus.
 * ```
.slot.hidden:not(:focus) {
  display: none;
}
```
 */
  autoHide?: boolean;
  /**
 * 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:
 * *  `slotItem`  - The root class name
 * *  `slot`  - Applied to both slots
 * *  `after`  - Applied to the slot that falls after the content
 * *  `before`  - Applied to the slot that falls before the content
 * *  `hidden`  - Applied to a slot when that slot is supposed to be hidden, according to
 `autoHide`  prop
 */
  css?: object;
  /**
   * Applies inline styling to the component.
   */
  inline?: boolean;
  /**
 * The layout technique for  `SlotItem` .
 * 
 * `"flex"`  is applied as a default and gives basic flex support to the wrapping elements.
This may be set to  `null`  to define your own layout method.
 */
  layout?: string;
  /**
   * Nodes to be inserted after  `children`  and hidden using  `autoHide` .
   *
   * If nothing is specified, nothing, not even an empty container, is rendered in this place.
   */
  slotAfter?: React.ReactNode;
  /**
   * Nodes to be inserted before  `children`  and hidden using  `autoHide` .
   *
   * If nothing is specified, nothing, not even an empty container, is rendered in this place.
   */
  slotBefore?: React.ReactNode;
}
/**
 * A ui-styled  `SlotItem`  without any behavior.
 */

export class SlotItemBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SlotItemBaseProps>
> {}

export interface SlotItemDecoratorProps
  extends Merge<ui_Slottable_SlottableProps, ui_ForwardRef_ForwardRefProps> {}
export function SlotItemDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & SlotItemDecoratorProps>;

export interface SlotItemProps
  extends Omit<
    Merge<SlotItemBaseProps, SlotItemDecoratorProps>,
    "componentRef"
  > {}
/**
 * A ui-styled item with built-in support for slots.
 * 
 * Example:
 * ```
<SlotItem component={Item} autoHide="both">
	<slotBefore>
		<Icon>flag</Icon>
		<Icon>star</Icon>
	</slotBefore>
	An Item that will show some icons slotBefore and slotAfter this text when spotted
	<Icon slot="slotAfter">trash</Icon>
</SlotItem>
```
 */

export class SlotItem extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SlotItemProps>
> {}

export default SlotItem;