152 lines
4.8 KiB
TypeScript
152 lines
4.8 KiB
TypeScript
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
import * as React_2 from 'react';
|
|
import type { Slot } from '@fluentui/react-utilities';
|
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
|
/**
|
|
* Render the final JSX of Skeleton
|
|
*/
|
|
export declare const renderSkeleton_unstable: (state: SkeletonState, contextValues: SkeletonContextValues) => JSX.Element;
|
|
|
|
/**
|
|
* Render the final JSX of SkeletonItem
|
|
*/
|
|
export declare const renderSkeletonItem_unstable: (state: SkeletonItemState) => JSX.Element;
|
|
|
|
/**
|
|
* Skeleton component - TODO: add more docs
|
|
*/
|
|
export declare const Skeleton: ForwardRefComponent<SkeletonProps>;
|
|
|
|
export declare const skeletonClassNames: SlotClassNames<SkeletonSlots>;
|
|
|
|
export declare const SkeletonContextProvider: React_2.Provider<SkeletonContextValue | undefined>;
|
|
|
|
export declare interface SkeletonContextValue {
|
|
animation?: 'wave' | 'pulse';
|
|
appearance?: 'opaque' | 'translucent';
|
|
}
|
|
|
|
declare type SkeletonContextValues = {
|
|
skeletonGroup: SkeletonContextValue;
|
|
};
|
|
|
|
export declare const SkeletonItem: ForwardRefComponent<SkeletonItemProps>;
|
|
|
|
export declare const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots>;
|
|
|
|
/**
|
|
* SkeletonItem Props
|
|
*/
|
|
export declare type SkeletonItemProps = ComponentProps<SkeletonItemSlots> & {
|
|
/**
|
|
* Sets the animation of the SkeletonItem
|
|
* @default wave
|
|
*/
|
|
animation?: 'wave' | 'pulse';
|
|
/**
|
|
* Sets the appearance of the SkeletonItem
|
|
* @default opaque
|
|
*/
|
|
appearance?: 'opaque' | 'translucent';
|
|
/**
|
|
* Sets the size of the SkeletonItem in pixels.
|
|
* Size is restricted to a limited set of values recommended for most uses(see SkeletonItemSize).
|
|
* To set a non-supported size, set `width` and `height` to override the rendered size.
|
|
* @default 16
|
|
*/
|
|
size?: SkeletonItemSize;
|
|
/**
|
|
* Sets the shape of the SkeletonItem.
|
|
* @default rectangle
|
|
*/
|
|
shape?: 'circle' | 'square' | 'rectangle';
|
|
};
|
|
|
|
/**
|
|
* Sizes for the SkeletonItem
|
|
*/
|
|
declare type SkeletonItemSize = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
|
|
|
|
export declare type SkeletonItemSlots = {
|
|
root: Slot<'div'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering SkeletonItem
|
|
*/
|
|
export declare type SkeletonItemState = ComponentState<SkeletonItemSlots> & Required<Pick<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>>;
|
|
|
|
/**
|
|
* Skeleton Props
|
|
*/
|
|
export declare type SkeletonProps = Omit<ComponentProps<Partial<SkeletonSlots>>, 'width'> & {
|
|
/**
|
|
* The animation type for the Skeleton
|
|
* @defaultValue wave
|
|
*/
|
|
animation?: 'wave' | 'pulse';
|
|
/**
|
|
* Sets the appearance of the Skeleton.
|
|
* @defaultValue opaque
|
|
*/
|
|
appearance?: 'opaque' | 'translucent';
|
|
/**
|
|
* Sets the width value of the skeleton wrapper.
|
|
* @defaultValue 100%
|
|
* @deprecated Use `className` prop to set width
|
|
*/
|
|
width?: number | string;
|
|
};
|
|
|
|
export declare type SkeletonSlots = {
|
|
/**
|
|
* The root slot of the `Skeleton` is the container that will contain the slots that make up a `Skeleton`
|
|
* and any data that the `Skeleton` will load. The default html element is a `div`.
|
|
*/
|
|
root: NonNullable<Slot<'div'>>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering Skeleton
|
|
*/
|
|
export declare type SkeletonState = ComponentState<SkeletonSlots> & Required<Pick<SkeletonProps, 'animation' | 'appearance'>>;
|
|
|
|
/**
|
|
* Create the state required to render Skeleton.
|
|
*
|
|
* The returned state can be modified with hooks such as useSkeletonStyles_unstable,
|
|
* before being passed to renderSkeleton_unstable.
|
|
*
|
|
* @param props - props from this instance of Skeleton
|
|
* @param ref - reference to root HTMLElement of Skeleton
|
|
*/
|
|
export declare const useSkeleton_unstable: (props: SkeletonProps, ref: React_2.Ref<HTMLElement>) => SkeletonState;
|
|
|
|
export declare const useSkeletonContext: () => SkeletonContextValue;
|
|
|
|
/**
|
|
* Create the state required to render SkeletonItem.
|
|
*
|
|
* The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,
|
|
* before being passed to renderSkeletonItem_unstable.
|
|
*
|
|
* @param props - props from this instance of SkeletonItem
|
|
* @param ref - reference to root HTMLElement of SkeletonItem
|
|
*/
|
|
export declare const useSkeletonItem_unstable: (props: SkeletonItemProps, ref: React_2.Ref<HTMLElement>) => SkeletonItemState;
|
|
|
|
/**
|
|
* Apply styling to the SkeletonItem slots based on the state
|
|
*/
|
|
export declare const useSkeletonItemStyles_unstable: (state: SkeletonItemState) => SkeletonItemState;
|
|
|
|
/**
|
|
* Apply styling to the Skeleton slots based on the state
|
|
*/
|
|
export declare const useSkeletonStyles_unstable: (state: SkeletonState) => SkeletonState;
|
|
|
|
export { }
|