@wix/design-system/dist/types/ImageViewer/index.d.ts

@wix/design-system

import * as React from 'react';
import { InputProps } from '../Input';
import { ImageProps } from '../Image';
import { TooltipCommonProps } from '../common';

export interface ImageViewerProps {
  /** Links to image asset source (URL). Leave it blank when image is not uploaded yet. */
  imageUrl?: string;
  /**
   * Specifies image fit mode inside a box.
   * Check [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property values for more info.
   * @default `cover`
   */
  fit?: 'cover' | 'contain';
  error?: boolean;
  errorMessage?: string;
  /** Allows to pass all common tooltip props.
   * @linkTypeTo components-overlays--tooltip
   * @setTypeName TooltipCommonProps
   */
  tooltipProps?: TooltipCommonProps;
  /** Specifies whether the update button is visible.
   * @default true
   */
  showUpdateButton?: boolean;
  /** Specifies whether the download button is visible.
   * @default false
   */
  showDownloadButton?: boolean;
  /** Specifies whether the remove button is visible.
   * @default true
   */
  showRemoveButton?: boolean;
  /** Defines a click handler, which is called every time a user clicks on an empty viewer (when no `imageUrl` is provided). */
  onAddImage?: React.MouseEventHandler<HTMLElement>;
  /** Defines a handler function, which is called every time user clicks on the ‘Update image’ button. */
  onUpdateImage?: React.MouseEventHandler<HTMLElement>;
  /** Defines a handler function, which is called every time user clicks on the download button. */
  onDownloadImage?: React.MouseEventHandler<HTMLElement>;
  /** Defines a handler function, which is called every time user clicks on the ‘Remove image’ button. */
  onRemoveImage?: React.MouseEventHandler<HTMLElement>;
  /** Defines a handler function which is called right after image loads. */
  onImageLoad?: React.ReactEventHandler<HTMLImageElement>;
  /** Specifies a message to display in a tooltip when no image is uploaded yet.
   * @default 'Add Image'
   */
  addImageInfo?: string;
  /** Defines a message to display in a tooltip when ‘Update’ action button is hovered.
   * @default 'Update'
   */
  updateImageInfo?: string;
  /** Defines a message to display in a tooltip when ‘Download’ action button is hovered.
   * @default 'Download'
   */
  downloadImageInfo?: string;
  /** Defines a message to display in a tooltip, when ‘remove’ action button is hovered.
   * @default 'Remove'
   */
  removeImageInfo?: string;
  /** Defines a message to display in a tooltip when the ‘More’ action button is hovered. Relevant only when all buttons are visible.
   * @default 'More actions'
   */
  moreImageInfo?: string;
  /** Removes default border radius. */
  removeRoundedBorders?: boolean;
  /** Sets the width of the viewer box. */
  width?: number | string;
  /** Sets the height of the viewer box. */
  height?: number | string;
  /** Specifies whether the component is disabled. */
  disabled?: boolean;
  /** Specifies the status of a viewer. */
  status?: InputProps['status'];
  /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
  statusMessage?: InputProps['statusMessage'];
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /** Additional props to pass to the Image component (borderRadius, position, showBorder, transparent, etc.).
   * @linkTypeTo components-content--image
   */
  imageProps?: Pick<
    ImageProps,
    | 'alt'
    | 'borderRadius'
    | 'height'
    | 'position'
    | 'showBorder'
    | 'style'
    | 'transparent'
    | 'width'
  >;
  /** Defines a string value that labels the update button element */
  updateButtonAriaLabel?: string;
  /** Defines a string value that labels the remove button element */
  removeButtonAriaLabel?: string;
}

export default class ImageViewer extends React.Component<ImageViewerProps> {
  focus: () => void;
}