@enact/ui/ImageItem/ImageItem.d.ts

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

// Type definitions for ui/ImageItem

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 ImageItemBaseProps {
  /**
   * The caption displayed with the image.
   */
  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:
 * *  `imageItem`  - The root component class
 * *  `caption`  - The caption component class
 * *  `horizontal`  - Applied when `orientation="horizontal"
 * *  `image`  - The image component class
 * *  `selected`  - Applied when  `selected`  prop is  `true`
 * *  `vertical`  - Applied when `orientation="vertical"
 */
  css?: object;
  /**
   * The component used to render the image component.
   */
  imageComponent?: React.ComponentType | JSX.Element;
  /**
   * The layout orientation of the component.
   */
  orientation?: "horizontal" | "vertical";
  /**
   * A placeholder image to be displayed before the image is loaded.
   */
  placeholder?: string;
  /**
   * Applies a selected visual effect to the image.
   */
  selected?: boolean;
  /**
 * Nodes to be inserted before  `image` .
 * 
 * For LTR locales, the nodes are inserted to the left of the image. For RTL
locales, the nodes are inserted to the right. If nothing is specified, nothing, not even
an empty container, is rendered in this place.
 */
  slotBefore?: React.ReactNode;
  /**
 * String value or Object of values used to determine which image will appear on a specific
screenSize.
 */
  src?: string | object;
}
/**
 * A basic image item without any behavior.
 */

export class ImageItemBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ImageItemBaseProps>
> {}

export interface ImageItemDecoratorProps
  extends ui_ForwardRef_ForwardRefProps {}
export function ImageItemDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & ImageItemDecoratorProps>;

export interface ImageItemProps
  extends Omit<
    Merge<ImageItemBaseProps, ImageItemDecoratorProps>,
    "componentRef"
  > {}
/**
 * A minimally styled ImageItem ready for customization by a theme.
 */

export class ImageItem extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ImageItemProps>
> {}

export default ImageItem;