89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
/// <reference types="react" />
|
|
|
|
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';
|
|
|
|
/**
|
|
* A ProgressBar bar shows the progression of a task.
|
|
*/
|
|
export declare const ProgressBar: ForwardRefComponent<ProgressBarProps>;
|
|
|
|
export declare const progressBarClassNames: SlotClassNames<ProgressBarSlots>;
|
|
|
|
/**
|
|
* ProgressBar Props
|
|
*/
|
|
export declare type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {
|
|
/**
|
|
* The shape of the bar and track.
|
|
* @default rounded
|
|
*/
|
|
shape?: 'rounded' | 'square';
|
|
/**
|
|
* A decimal number between `0` and `1` (or between `0` and `max` if given),
|
|
* which specifies how much of the task has been completed.
|
|
*
|
|
* If `undefined` (default), the ProgressBar will display an **indeterminate** state.
|
|
*/
|
|
value?: number;
|
|
/**
|
|
* The maximum value, which indicates the task is complete.
|
|
* The ProgressBar bar will be full when `value` equals `max`.
|
|
* @default 1
|
|
*/
|
|
max?: number;
|
|
/**
|
|
* The thickness of the ProgressBar bar
|
|
* @default medium
|
|
*/
|
|
thickness?: 'medium' | 'large';
|
|
/**
|
|
* The status of the ProgressBar bar. Changes the color of the bar.
|
|
* @default brand
|
|
*/
|
|
color?: 'brand' | 'success' | 'warning' | 'error';
|
|
};
|
|
|
|
export declare type ProgressBarSlots = {
|
|
/**
|
|
* The track behind the ProgressBar bar
|
|
*/
|
|
root: NonNullable<Slot<'div'>>;
|
|
/**
|
|
* The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.
|
|
*/
|
|
bar?: NonNullable<Slot<'div'>>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering ProgressBar
|
|
*/
|
|
export declare type ProgressBarState = ComponentState<Required<ProgressBarSlots>> & Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> & Pick<ProgressBarProps, 'value' | 'color'>;
|
|
|
|
/**
|
|
* Render the final JSX of ProgressBar
|
|
*/
|
|
export declare const renderProgressBar_unstable: (state: ProgressBarState) => JSX.Element;
|
|
|
|
/**
|
|
* Create the state required to render ProgressBar.
|
|
*
|
|
* The returned state can be modified with hooks such as useProgressBarStyles_unstable,
|
|
* before being passed to renderProgressBar_unstable.
|
|
*
|
|
* @param props - props from this instance of ProgressBar
|
|
* @param ref - reference to root HTMLElement of ProgressBar
|
|
*/
|
|
export declare const useProgressBar_unstable: (props: ProgressBarProps, ref: React_2.Ref<HTMLElement>) => ProgressBarState;
|
|
|
|
/**
|
|
* Apply styling to the ProgressBar slots based on the state
|
|
*/
|
|
export declare const useProgressBarStyles_unstable: (state: ProgressBarState) => ProgressBarState;
|
|
|
|
export { }
|