123 lines
3.7 KiB
TypeScript
123 lines
3.7 KiB
TypeScript
/// <reference types="react" />
|
|
|
|
import { Avatar } from '@fluentui/react-avatar';
|
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
import { PresenceBadge } from '@fluentui/react-badge';
|
|
import * as React_2 from 'react';
|
|
import type { Slot } from '@fluentui/react-utilities';
|
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
|
/**
|
|
* A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,
|
|
* or an Avatar with a PresenceBadge.
|
|
*/
|
|
export declare const Persona: ForwardRefComponent<PersonaProps>;
|
|
|
|
export declare const personaClassNames: SlotClassNames<PersonaSlots>;
|
|
|
|
/**
|
|
* Persona Props
|
|
*/
|
|
export declare type PersonaProps = ComponentProps<PersonaSlots> & {
|
|
/**
|
|
* The name of the person or entity represented by the Persona.
|
|
*
|
|
* When `primaryText` is not provided, this will be used as the default value for `primaryText`.
|
|
*/
|
|
name?: string;
|
|
/**
|
|
* Whether to display only the presence.
|
|
*
|
|
* @default false
|
|
*/
|
|
presenceOnly?: boolean;
|
|
/**
|
|
* The size of a Persona and its text.
|
|
*
|
|
* @default medium
|
|
*/
|
|
size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
|
|
/**
|
|
* The position of the text relative to the avatar/presence.
|
|
*
|
|
* @default after
|
|
*/
|
|
textPosition?: 'after' | 'before' | 'below';
|
|
/**
|
|
* The vertical alignment of the text relative to the avatar/presence.
|
|
*
|
|
* @default start
|
|
*/
|
|
textAlignment?: 'center' | 'start';
|
|
};
|
|
|
|
export declare type PersonaSlots = {
|
|
root: NonNullable<Slot<'div'>>;
|
|
/**
|
|
* Avatar to display.
|
|
*
|
|
* If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.
|
|
*/
|
|
avatar?: Slot<typeof Avatar>;
|
|
/**
|
|
* PresenceBadge to display.
|
|
*
|
|
* If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.
|
|
*/
|
|
presence?: Slot<typeof PresenceBadge>;
|
|
/**
|
|
* The first line of text in the Persona, larger than the rest of the lines.
|
|
*
|
|
* `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is
|
|
* different than the `name` prop.
|
|
*/
|
|
primaryText?: Slot<'span'>;
|
|
/**
|
|
* The second line of text in the Persona.
|
|
*/
|
|
secondaryText?: Slot<'span'>;
|
|
/**
|
|
* The third line of text in the Persona.
|
|
*/
|
|
tertiaryText?: Slot<'span'>;
|
|
/**
|
|
* The fourth line of text in the Persona.
|
|
*/
|
|
quaternaryText?: Slot<'span'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering Persona
|
|
*/
|
|
export declare type PersonaState = ComponentState<PersonaSlots> & Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {
|
|
/**
|
|
* The number of text lines used.
|
|
*/
|
|
numTextLines: number;
|
|
};
|
|
|
|
/**
|
|
* Render the final JSX of Persona
|
|
*/
|
|
export declare const renderPersona_unstable: (state: PersonaState) => JSX.Element;
|
|
|
|
/**
|
|
* Create the state required to render Persona.
|
|
*
|
|
* The returned state can be modified with hooks such as usePersonaStyles_unstable,
|
|
* before being passed to renderPersona_unstable.
|
|
*
|
|
* @param props - props from this instance of Persona
|
|
* @param ref - reference to root HTMLElement of Persona
|
|
*/
|
|
export declare const usePersona_unstable: (props: PersonaProps, ref: React_2.Ref<HTMLElement>) => PersonaState;
|
|
|
|
/**
|
|
* Apply styling to the Persona slots based on the state
|
|
*/
|
|
export declare const usePersonaStyles_unstable: (state: PersonaState) => PersonaState;
|
|
|
|
export { }
|