292 lines
9.1 KiB
TypeScript
292 lines
9.1 KiB
TypeScript
|
/// <reference types="react" />
|
||
|
|
||
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
||
|
import type { ComponentState } from '@fluentui/react-utilities';
|
||
|
import type { EventData } from '@fluentui/react-utilities';
|
||
|
import type { EventHandler } 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';
|
||
|
|
||
|
/**
|
||
|
* Rating is a wrapper for one or more rating items that will be used to set a rating value.
|
||
|
*/
|
||
|
export declare const Rating: ForwardRefComponent<RatingProps>;
|
||
|
|
||
|
export declare const ratingClassNames: SlotClassNames<RatingSlots>;
|
||
|
|
||
|
export declare type RatingContextValues = {
|
||
|
ratingItem: RatingItemContextValue;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* RatingDisplay is a wrapper for one or more rating items that will be used to display a rating value
|
||
|
* as well as the label for the rating.
|
||
|
*/
|
||
|
export declare const RatingDisplay: ForwardRefComponent<RatingDisplayProps>;
|
||
|
|
||
|
export declare const ratingDisplayClassNames: SlotClassNames<RatingDisplaySlots>;
|
||
|
|
||
|
export declare type RatingDisplayContextValues = {
|
||
|
ratingItem: RatingItemContextValue;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* RatingDisplay Props
|
||
|
*/
|
||
|
export declare type RatingDisplayProps = ComponentProps<RatingDisplaySlots> & {
|
||
|
/**
|
||
|
* Color of the rating items (stars).
|
||
|
* @default neutral
|
||
|
*/
|
||
|
color?: 'brand' | 'marigold' | 'neutral';
|
||
|
/**
|
||
|
* Renders a single filled star, with the value written next to it.
|
||
|
* @default false
|
||
|
*/
|
||
|
compact?: boolean;
|
||
|
/**
|
||
|
* The number of ratings represented by the rating value.
|
||
|
* This will be formatted with a thousands separator (if applicable) and displayed next to the value.
|
||
|
*/
|
||
|
count?: number;
|
||
|
/**
|
||
|
* The icon used for rating items.
|
||
|
* @default StarFilled
|
||
|
*/
|
||
|
icon?: React_2.ElementType;
|
||
|
/**
|
||
|
* The max value of the rating. This controls the number of rating items displayed.
|
||
|
* Must be a whole number greater than 1.
|
||
|
* @default 5
|
||
|
*/
|
||
|
max?: number;
|
||
|
/**
|
||
|
* Sets the size of the RatingDisplay items.
|
||
|
* @default medium
|
||
|
*/
|
||
|
size?: 'small' | 'medium' | 'large' | 'extra-large';
|
||
|
/**
|
||
|
* The value of the rating
|
||
|
*/
|
||
|
value?: number;
|
||
|
};
|
||
|
|
||
|
export declare type RatingDisplaySlots = {
|
||
|
root: NonNullable<Slot<'div'>>;
|
||
|
valueText?: Slot<'span'>;
|
||
|
countText?: Slot<'span'>;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* State used in rendering RatingDisplay
|
||
|
*/
|
||
|
export declare type RatingDisplayState = ComponentState<RatingDisplaySlots> & Required<Pick<RatingDisplayProps, 'color' | 'compact' | 'icon' | 'max' | 'size'>> & Pick<RatingDisplayProps, 'value'>;
|
||
|
|
||
|
/**
|
||
|
* RatingItem is an item that will be used to set or display a rating value.
|
||
|
*/
|
||
|
export declare const RatingItem: ForwardRefComponent<RatingItemProps>;
|
||
|
|
||
|
export declare const ratingItemClassNames: SlotClassNames<RatingItemSlots>;
|
||
|
|
||
|
declare type RatingItemContextValue = Partial<Pick<RatingState, 'name' | 'hoveredValue' | 'value'>> & Pick<RatingState, 'color' | 'iconFilled' | 'iconOutline' | 'itemLabel' | 'step' | 'size'> & Partial<Pick<RatingDisplayState, 'compact'>> & {
|
||
|
interactive?: boolean;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* RatingItem Props
|
||
|
*/
|
||
|
export declare type RatingItemProps = ComponentProps<Partial<RatingItemSlots>> & {
|
||
|
/**
|
||
|
* The positive whole number value that is displayed by this RatingItem
|
||
|
*/
|
||
|
value?: number;
|
||
|
};
|
||
|
|
||
|
export declare const RatingItemProvider: React_2.Provider<RatingItemContextValue | undefined>;
|
||
|
|
||
|
export declare type RatingItemSlots = {
|
||
|
/**
|
||
|
* The root slot of the RatingItem.
|
||
|
* Default html element is span
|
||
|
*/
|
||
|
root: NonNullable<Slot<'span'>>;
|
||
|
/**
|
||
|
* Icon displayed when the rating value is greater than or equal to the item's value.
|
||
|
*/
|
||
|
selectedIcon?: NonNullable<Slot<'div'>>;
|
||
|
/**
|
||
|
* Icon displayed when the rating value is less than the item's value.
|
||
|
*/
|
||
|
unselectedIcon?: NonNullable<Slot<'div'>>;
|
||
|
/**
|
||
|
* Radio input slot used for half star precision
|
||
|
*/
|
||
|
halfValueInput?: NonNullable<Slot<'input'>>;
|
||
|
/**
|
||
|
* Radio input slot used for full star precision
|
||
|
*/
|
||
|
fullValueInput?: NonNullable<Slot<'input'>>;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* State used in rendering RatingItem
|
||
|
*/
|
||
|
export declare type RatingItemState = ComponentState<RatingItemSlots> & Required<Pick<RatingItemProps, 'value'>> & Pick<RatingState, 'color' | 'step' | 'size'> & {
|
||
|
iconFillWidth: number;
|
||
|
appearance: 'outline' | 'filled';
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Data for the onChange event for Rating.
|
||
|
*/
|
||
|
export declare type RatingOnChangeEventData = EventData<'change', React_2.FormEvent<HTMLDivElement>> & {
|
||
|
/**
|
||
|
* The new value of the rating.
|
||
|
*/
|
||
|
value: number;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Rating Props
|
||
|
*/
|
||
|
export declare type RatingProps = Omit<ComponentProps<Partial<RatingSlots>>, 'onChange'> & {
|
||
|
/**
|
||
|
* Controls the color of the Rating.
|
||
|
* @default neutral
|
||
|
*/
|
||
|
color?: 'brand' | 'marigold' | 'neutral';
|
||
|
/**
|
||
|
* Default value of the Rating
|
||
|
*/
|
||
|
defaultValue?: number;
|
||
|
/**
|
||
|
* The icon to display when the rating value is greater than or equal to the item's value.
|
||
|
*/
|
||
|
iconFilled?: React_2.ElementType;
|
||
|
/**
|
||
|
* The icon to display when the rating value is less than the item's value.
|
||
|
*/
|
||
|
iconOutline?: React_2.ElementType;
|
||
|
/**
|
||
|
* Prop to generate the aria-label for the rating inputs.
|
||
|
* @default (rating) =\> `${rating}`
|
||
|
*/
|
||
|
itemLabel?: (rating: number) => string;
|
||
|
/**
|
||
|
* The max value of the rating. This controls the number of rating items displayed.
|
||
|
* Must be a whole number greater than 1.
|
||
|
* @default 5
|
||
|
*/
|
||
|
max?: number;
|
||
|
/**
|
||
|
* Name for the Radio inputs. If not provided, one will be automatically generated
|
||
|
*/
|
||
|
name?: string;
|
||
|
/**
|
||
|
* Callback when the rating value is changed by the user.
|
||
|
*/
|
||
|
onChange?: EventHandler<RatingOnChangeEventData>;
|
||
|
/**
|
||
|
* Sets the precision to allow half-filled shapes in Rating
|
||
|
* @default 1
|
||
|
*/
|
||
|
step?: 0.5 | 1;
|
||
|
/**
|
||
|
* Sets the size of the Rating items.
|
||
|
* @default extra-large
|
||
|
*/
|
||
|
size?: 'small' | 'medium' | 'large' | 'extra-large';
|
||
|
/**
|
||
|
* The value of the rating
|
||
|
*/
|
||
|
value?: number;
|
||
|
};
|
||
|
|
||
|
export declare type RatingSlots = {
|
||
|
root: NonNullable<Slot<'div'>>;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* State used in rendering Rating
|
||
|
*/
|
||
|
export declare type RatingState = ComponentState<RatingSlots> & Required<Pick<RatingProps, 'color' | 'iconFilled' | 'iconOutline' | 'name' | 'step' | 'size' | 'value'>> & Pick<RatingProps, 'itemLabel'> & {
|
||
|
hoveredValue?: number | undefined;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Render the final JSX of Rating
|
||
|
*/
|
||
|
export declare const renderRating_unstable: (state: RatingState, contextValues: RatingContextValues) => JSX.Element;
|
||
|
|
||
|
/**
|
||
|
* Render the final JSX of RatingDisplay
|
||
|
*/
|
||
|
export declare const renderRatingDisplay_unstable: (state: RatingDisplayState, contextValues: RatingDisplayContextValues) => JSX.Element;
|
||
|
|
||
|
/**
|
||
|
* Render the final JSX of RatingItem
|
||
|
*/
|
||
|
export declare const renderRatingItem_unstable: (state: RatingItemState) => JSX.Element;
|
||
|
|
||
|
/**
|
||
|
* Create the state required to render Rating.
|
||
|
*
|
||
|
* The returned state can be modified with hooks such as useRatingStyles_unstable,
|
||
|
* before being passed to renderRating_unstable.
|
||
|
*
|
||
|
* @param props - props from this instance of Rating
|
||
|
* @param ref - reference to root HTMLElement of Rating
|
||
|
*/
|
||
|
export declare const useRating_unstable: (props: RatingProps, ref: React_2.Ref<HTMLDivElement>) => RatingState;
|
||
|
|
||
|
export declare const useRatingContextValues: (ratingState: RatingState) => RatingContextValues;
|
||
|
|
||
|
/**
|
||
|
* Create the state required to render RatingDisplay.
|
||
|
*
|
||
|
* The returned state can be modified with hooks such as useRatingDisplayStyles_unstable,
|
||
|
* before being passed to renderRatingDisplay_unstable.
|
||
|
*
|
||
|
* @param props - props from this instance of RatingDisplay
|
||
|
* @param ref - reference to root HTMLDivElement of RatingDisplay
|
||
|
*/
|
||
|
export declare const useRatingDisplay_unstable: (props: RatingDisplayProps, ref: React_2.Ref<HTMLDivElement>) => RatingDisplayState;
|
||
|
|
||
|
export declare const useRatingDisplayContextValues: (state: RatingDisplayState) => RatingDisplayContextValues;
|
||
|
|
||
|
/**
|
||
|
* Apply styling to the RatingDisplay slots based on the state
|
||
|
*/
|
||
|
export declare const useRatingDisplayStyles_unstable: (state: RatingDisplayState) => RatingDisplayState;
|
||
|
|
||
|
/**
|
||
|
* Create the state required to render RatingItem.
|
||
|
*
|
||
|
* The returned state can be modified with hooks such as useRatingItemStyles_unstable,
|
||
|
* before being passed to renderRatingItem_unstable.
|
||
|
*
|
||
|
* @param props - props from this instance of RatingItem
|
||
|
* @param ref - reference to root HTMLElement of RatingItem
|
||
|
*/
|
||
|
export declare const useRatingItem_unstable: (props: RatingItemProps, ref: React_2.Ref<HTMLSpanElement>) => RatingItemState;
|
||
|
|
||
|
/**
|
||
|
* Get the value of the RatingContext.
|
||
|
*/
|
||
|
export declare const useRatingItemContextValue_unstable: () => RatingItemContextValue;
|
||
|
|
||
|
/**
|
||
|
* Apply styling to the RatingItem slots based on the state
|
||
|
*/
|
||
|
export declare const useRatingItemStyles_unstable: (state: RatingItemState) => RatingItemState;
|
||
|
|
||
|
/**
|
||
|
* Apply styling to the Rating slots based on the state
|
||
|
*/
|
||
|
export declare const useRatingStyles_unstable: (state: RatingState) => RatingState;
|
||
|
|
||
|
export { }
|