import * as React from "react";
import { IStringMap } from "../../utilities/collections";
import { SelectAction } from "../../utilities/states";
export declare enum ImageOrientation {
    Landscape = 0,
    Portrait = 1
}
export interface IImageProps {
    id?: string;
    className?: string;
    src?: string;
    placeholder?: string;
    onTapAndHold?: () => void;
    onClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
    onLoad?: () => void;
    style?: React.CSSProperties;
    performant?: boolean;
    orientation?: ImageOrientation;
    /**
     * Apply a blur filter to the <img>. If a string is provided,
     * the blur is only applied when the set `src` matches the string. This
     * src could be from the `src` property or the `sizes` array.
     */
    blur?: boolean | string;
    /**
     * Apply a "fade" filter to the <img>. If a string is provided,
     * the blur is only applied when the set `src` matches the string. This
     * src could be from the `src` property or the `sizes` array.
     */
    fade?: boolean | string;
    prevent3dTouch?: boolean;
    preventTapAndHold?: boolean;
    /**
     * An array of progressively larger image URLs.
     */
    sizes?: Array<string | null>;
    knownNumberOfSizes?: number;
    attributes?: object;
    /**
     * By default, images take into account their visibility in the viewport
     * for performing actions. This ensures a high level of performance. One can
     * optionally disable this telling <Image> internally that it is to always be
     * considered visible.
     */
    alwaysVisible?: boolean;
    /**
     * Use this property to ensure that an image never is set to invisible after it's been
     * revealed once
     */
    neverBecomesInvisible?: boolean;
    /**
     * If provided, a <Checkbox> component will be show on the bottom right of
     * the <Image> element.
     */
    onSelect?: (selectAction: SelectAction) => void;
    /**
     * Indicate to the user the progress of the image loading
     */
    showLoadingProgress?: boolean;
    /**
     * If provided, this is called whenever attempted to load sizes. This could happen
     * more than once if loading sizes is interrupted.
     */
    onStartLoadSize?: (size: string, id?: string) => void;
    /**
     * If provided, this is called once all sizes have been loaded.
     */
    onLoadAllSizes?: (id?: string) => void;
    /**
     * Lay an "invisible" image on top of the visible image. This is useful if you'd like to control
     * the image that is downloaded when tapped on as being separate from what has been loaded into the DOM.
     */
    overlayImage?: string;
    /**
     * Attach a MutationObserver to the <img> and listen for changes to the `trigger-load` attribute. Changes
     * to this attribute will toggle the loadability of the image.
     */
    listenForTriggerLoadMutation?: boolean;
    /**
     * If provided, the image will have slightly rounded corners and a bit of padding
     */
    bubble?: boolean;
    bubbleSoft?: boolean;
    /**
     * If provided, this method will be invoked and place with full-dimensions over the image element
     */
    renderOverlayContent?: () => JSX.Element;
    /**
     * Don't even load low quality src until visible
     */
    lazySrc?: boolean;
    /**
     * The root element when applying the IntersectionObserver. This will be the viewport
     * if null
     */
    visibilityRoot?: string | HTMLElement;
    visiblityThreshold?: number;
}
interface IImageState {
    isVisible: boolean;
    loaded: IStringMap<boolean>;
}
export declare class Image extends React.Component<IImageProps, IImageState> {
    static getDerivedStateFromProps(props: IImageProps, state: IImageState): Partial<IImageState>;
    imageRef: React.RefObject<HTMLImageElement>;
    overlayImageRef?: React.RefObject<HTMLImageElement>;
    state: IImageState;
    imageIntersectionObserver?: IntersectionObserver;
    imageMutationObserver?: MutationObserver;
    constructor(props: IImageProps);
    shouldComponentUpdate(nextProps: IImageProps, nextState: IImageState): boolean;
    componentDidMount(): void;
    componentDidUpdate(prevProps: IImageProps, prevState: IImageState): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
    private withImageNode;
    private addEventListeners;
    private removeEventListeners;
    private addIntersectionObservers;
    private removeIntersectionObservers;
    /**
     * Image loading works by asynchronously running multiple size loads and only replacing
     * the `src` if the loaded image is higher than the currently set src. This ensure that if
     * a lower quality load happens to finish after a high quality load (as is possible with many request
     * across many <Image> component or when the browser begins to cache images) that the higher quality
     * src persists.
     */
    private loadImageSizes;
    /**
     * @param src - the src to set on the <img> tag
     * @param originalSrc - since we use `fetch` to load a blob
     */
    private setImageSrc;
    private handleImageLoad;
    private toggleFade;
    private toggleLoadingProgress;
    private toggleBlur;
    private calculateImageLoadingProgress;
    private addMutationObserver;
    private removeMutationObserver;
}
export {};