@enact/ui/Image/Image.d.ts

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

// Type definitions for ui/Image

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 ImageBaseProps {
  /**
   * String value for the alt attribute of the image.
   */
  alt?: string;
  /**
   * Node for the children of an  `Image` . Useful for overlays.
   */
  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:
 * *  `image`  - The root component class
 * *  `fit`  - Applied when  `sizing`  prop is  `fit`
 * *  `fill`  - Applied when  `sizing`  prop is  `fill`
 */
  css?: object;
  /**
   * Called if the image has an error.
   */
  onError?: Function;
  /**
   * Called once the image is loaded.
   */
  onLoad?: Function;
  /**
 * A placeholder image to be displayed before the image is loaded.
 * 
 * For performance purposes, it should be pre-loaded or be a data url. If  `src`  is
unset, this value will be used as the  `background-image` .
 */
  placeholder?: string;
  /**
   * Used to set the  `background-size`  of an  `Image` .
   * *  `'fill'`  - sets  `background-size: cover`
   * *  `'fit'`  - sets  `background-size: contain`
   * *  `'none'`  - uses the image's natural size
   */
  sizing?: string;
  /**
 * String value or Object of values used to determine which image will appear on
a specific screenSize.
 */
  src?: string | object;
}
/**
 * A basic image component designed to display images conditionally based on screen size.
 * 
 * This component does not have a default size, therefore the image will not show unless a size is
specified using a CSS  `className`  or inline  `style` .
 * 
 * Example:
 * ```
const src = {
  'hd': 'http://lorempixel.com/64/64/city/1/',
  'fhd': 'http://lorempixel.com/128/128/city/1/',
  'uhd': 'http://lorempixel.com/256/256/city/1/'
};

<Image className={css.myImage} src={src} sizing="fill" />
```
 
 * `ui/Image`  is based on the  `div`  element, but it uses  `img`  to provide  `onError`  and  `onLoad` 
events. The image that you see on screen is a  `background-image`  from the  `div`  element, not the
 `img`  element.
 * 
 * If you need a naturally sized image, you can use the native  `<img>`  element instead.
 */

export class ImageBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ImageBaseProps>
> {}

export interface ImageProps
  extends Omit<Merge<ImageBaseProps, ImageDecoratorProps>, "componentRef"> {
  /**
   * The aria-label for the image.
   *
   * If unset, it defaults to the value of  `alt` .
   */
  "aria-label"?: string;
}
/**
 * A minimally styled Image ready for customization by a theme.
 */

export class Image extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ImageProps>
> {}

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

export default Image;