@uifabric/experiments/lib-commonjs/components/Shimmer/Shimmer.types.d.ts

Experimental React components for building experiences for Office 365.

/// <reference types="react" />
import * as React from 'react';
import { IStyle, ITheme } from '../../Styling';
import { IStyleFunctionOrObject, IRefObject } from '../../Utilities';
export interface IShimmer {
}
/**
 * Shimmer component props.
 */
export interface IShimmerProps extends React.AllHTMLAttributes<HTMLElement> {
    /**
     * Optional callback to access the IShimmer interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<IShimmer>;
    /**
     * Sets the width of the shimmer wave wrapper in percentages relative to the containig parent element.
     * @default 100%
     */
    widthInPercentage?: number;
    /**
     * Sets the width of the shimmer wave wrapper to an exact value in pixels.
     * If none of the widths provided, it defaults to 100%.
     */
    widthInPixel?: number;
    /**
     * Controls when the shimmer is swapped with actual data through an animated transition.
     * @default false
     */
    isDataLoaded?: boolean;
    /**
     * Elements to render in one line of the Shimmer.
     */
    shimmerElements?: IShimmerElement[];
    /**
     * Custom elements when necessary to build complex placeholder skeletons.
     */
    customElementsGroup?: React.ReactNode;
    /**
     * Localized string of the status label for screen reader
     */
    ariaLabel?: string;
    /**
     * Call to provide customized styling that will layer on top of the variant rules.
     */
    styles?: IStyleFunctionOrObject<IShimmerStyleProps, IShimmerStyles>;
    /**
     * Additional CSS class(es) to apply to the Shimmer container.
     */
    className?: string;
    /**
     * Theme provided by High-Order Component.
     */
    theme?: ITheme;
    /**
     * Elements to render in one line of the Shimmer.
     * Deprecated, use 'shimmerElements' for better semantic meaning.
     * @deprecated Use 'shimmerElements' instead.
     */
    lineElements?: IShimmerElement[];
    /**
     * Sets the width of the shimmer wave wrapper in percentages.
     * Deprecated, use a more specific width like 'widthInPixel' or 'widthInPercentage'.
     * @default 100%
     * @deprecated Use a more specific width like 'widthInPixel' or 'widthInPercentage'.
     */
    width?: number;
    /**
     * Use when providing custom skeleton as children wrapped by shimmer.
     * Deprecated in favor of 'customElementsGroup'
     * @default false
     * @deprecated Use 'customElementsGroup' instead.
     */
    isBaseStyle?: boolean;
}
/**
 * Shimmer Elements Interface
 */
export interface IShimmerElement {
    /**
     * Required for every element you intend to use.
     */
    type: ShimmerElementType;
    /**
     * The height of the element (ICircle, ILine, IGap) in pixels.
     * Read more details for each specific element.
     */
    height?: number;
    /**
     * The width of the element (ILine, IGap) in pixels.
     * Read more details for each specific element.
     */
    widthInPixel?: number;
    /**
     * The width of the element (ILine, IGap) in pixels.
     * Read more details for each specific element.
     */
    widthInPercentage?: number;
    /**
     * The vertical alignemt of the element (ICircle, ILine).
     * @default center
     */
    verticalAlign?: ShimmerElementVerticalAlign;
}
export interface ILine extends IShimmerElement {
    /**
     * Sets the height of the shimmer line in pixels.
     * @default 16px
     */
    height?: number;
    /**
     * The value provided will represent the width as '%' relative to shimmer wrapper.
     * @default 100%
     */
    widthInPercentage?: number;
    /**
     * Sets the width of the Line to an exact value in pixels.
     * If none of the widths provided, it defaults to 100%.
     */
    widthInPixel?: number;
}
export interface ICircle extends IShimmerElement {
    /**
     * Sets the height of the shimmer circle in pixels.
     * Minimum supported 10px.
     * @default 24px
     */
    height?: number;
}
export interface IGap extends IShimmerElement {
    /**
     * Sets the height of the shimmer gap in pixels.
     * @default 16px
     */
    height?: number;
    /**
     * The value provided will represent the width as '%' relative to shimmer wrapper.
     * If none of the widths provided, it defaults to 10px.
     */
    widthInPercentage?: number;
    /**
     * Sets the width of the Gap to an exact value in pixels.
     * @default 10px
     */
    widthInPixel?: number;
}
export interface IShimmerStyleProps {
    width?: number;
    widthInPercentage?: number;
    widthInPixel?: number;
    isDataLoaded?: boolean;
    className?: string;
    theme: ITheme;
    transitionAnimationInterval?: number;
}
export interface IShimmerStyles {
    root?: IStyle;
    shimmerWrapper?: IStyle;
    dataWrapper?: IStyle;
    screenReaderText?: IStyle;
}
export declare enum ShimmerElementType {
    /**
     * Line element type
     */
    line = 1,
    /**
     * Circle element type
     */
    circle = 2,
    /**
     * Gap element type
     */
    gap = 3,
    /**
     * @deprecated Use 'line' instead
     */
    LINE = 1,
    /**
     * @deprecated Use 'circle' instead
     */
    CIRCLE = 2,
    /**
     * @deprecated Use 'gap' instead
     */
    GAP = 3,
}
export declare enum ShimmerElementVerticalAlign {
    /**
     * @deprecated Use 'center' instead
     */
    CENTER = 1,
    /**
     * @deprecated Use 'bottom' instead
     */
    BOTTOM = 2,
    /**
     * @deprecated Use 'top' instead
     */
    TOP = 3,
    /**
     * Positions the element vertically in center
     */
    center = 1,
    /**
     * Positions the element vertically at the bottom
     */
    bottom = 2,
    /**
     * Positions the element vertically at the top
     */
    top = 3,
}
export declare enum ShimmerElementsDefaultHeights {
    /**
     * Default height of the line element when not provided by user: 16px
     */
    line = 16,
    /**
     * Default height of the gap element when not provided by user: 16px
     */
    gap = 16,
    /**
     * Default height of the circle element when not provided by user: 24px
     */
    circle = 24,
}