import { ImageLoadState } from '@fluentui/react'; import type { IBaseProps } from '@fluentui/react'; import type { IComponentStyles, IHTMLSlot, ISlotProp, IComponent, IStyleableComponentProps } from '@fluentui/foundation-legacy'; import type { IPersonaPresenceSlot } from '../../utilities/factoryComponents.types'; import type { IPersonaCoinImageSlot } from './PersonaCoinImage/PersonaCoinImage.types'; import type { IPersonaCoinSize10Slot } from './PersonaCoinSize10/PersonaCoinSize10'; import type { IPersonaCoinInitialsSlot } from './PersonaCoinInitials/PersonaCoinInitials'; export type IPersonaCoinComponent = IComponent; export type IPersonaCoinTokenReturnType = ReturnType>; export type IPersonaCoinStylesReturnType = ReturnType>; export type IPersonaCoinSlot = ISlotProp; export interface IPersonaCoinSlots { /** * Slot for the root element. */ root?: IHTMLSlot; /** * Slot for the image element */ image?: IPersonaCoinImageSlot; /** * Slot for the initials element */ initials?: IPersonaCoinInitialsSlot; /** * Slot for the presence element */ presence?: IPersonaPresenceSlot; /** * Slot for the alternative coin for the smallest persona size */ personaCoinSize10?: IPersonaCoinSize10Slot; } export type PersonaCoinSize = 10 | 16 | 24 | 28 | 32 | 40 | 48 | 56 | 72 | 100; export interface IPersonaCoinProps extends IPersonaCoinSlots, IStyleableComponentProps, IBaseProps { /** * Whether initials are calculated for phone numbers and number sequences. * Example: Set property to true to get initials for project names consisting of numbers only. * @defaultvalue false */ allowPhoneInitials?: boolean; /** * The color that should be used when rendering the coin. */ coinColor?: string; /** * This will be used to extract initials from if `initials` is not passed. */ text?: string; /** * Size of the coin * @defaultvalue 48 */ size?: PersonaCoinSize; /** * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area. */ imageUrl?: string; /** * If true, adds the css class 'is-fadeIn' to the image. * @defaultvalue true */ imageShouldFadeIn?: boolean; /** * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until * it is successfully loaded. This disables imageShouldFadeIn. * @defaultvalue true */ imageShouldStartVisible?: boolean; /** * Alt text for the image to use. * @default `''` (empty string) */ imageAlt?: string; /** * Optional callback for when loading state of the photo changes */ onPhotoLoadingStateChange?: (newImageLoadState: ImageLoadState) => void; /** * The color of the user's initials that are displayed. * @defaultvalue 'white' */ initialsColor?: string; } export interface IPersonaCoinViewProps extends IPersonaCoinProps { isPictureLoaded?: boolean; } export interface IPersonaCoinTokens { } export type IPersonaCoinStyles = IComponentStyles;