@enact/ui/GridListImageItem/GridListImageItem.d.ts

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

// Type definitions for ui/GridListImageItem

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 GridListImageItemProps {
  /**
   * The primary caption to be displayed with the image.
   */
  caption?: string;
  /**
   * The component used to render the captions
   */
  captionComponent?: string | React.ComponentType;
  /**
 * 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:
 * *  `icon`  - The icon component class for default selection overlay
 * *  `image`  - The image component class
 * *  `selected`  - Applied when  `selected`  prop is  `true`
 * *  `caption`  - The caption component class
 * *  `subCaption`  - The subCaption component class
 */
  css?: object;
  /**
 * The component used to render the default check icon when selected.
If there is custom selectionOverlay component, this icon will not be shown.
 */
  iconComponent?: React.ComponentType;
  /**
   * The component used to render the image component
   */
  imageComponent?: React.ComponentType;
  /**
 * Placeholder image used while   
is loaded.
 */
  placeholder?: string;
  /**
 * Applies a selected visual effect to the image, but only if  `selectionOverlayShowing` 
is also  `true` .
 */
  selected?: boolean;
  /**
 * The custom selection overlay component to render.
 * 
 * A component can be a stateless functional component,  `kind()`  or React component.
The following is an example with custom selection overlay kind.
 * 
 * Example:
 * ```
const SelectionOverlay = kind({
	render: () => <div>custom overlay</div>
});

<GridListImageItem selectionOverlay={SelectionOverlay} />
```
 */
  selectionOverlay?: Function;
  /**
   * Shows a selection overlay with a centered icon. When  `selected`  is true, a check mark is shown.
   */
  selectionOverlayShowing?: boolean;
  /**
   * The absolute URL path to the image.
   */
  source?: string;
  /**
   * The second caption line to be displayed with the image.
   */
  subCaption?: string;
}
/**
 * A basic grid list image item without any behavior.
 */

export class GridListImageItem extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, GridListImageItemProps>
> {}

export default GridListImageItem;