@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
69 lines • 2.16 kB
TypeScript
/// <reference types="react" />
import { IPersonaProps, PersonaInitialsColor } from '@fluentui/react';
/**
* Custom data attributes for displaying avatar for a user.
*
* @public
*/
export type AvatarPersonaData = {
/**
* Primary text to display, usually the name of the person.
*/
text?: string;
/**
* Image URL to use, should be a square aspect ratio and big enough to fit in the image area.
*/
imageUrl?: string;
/**
* The user's initials to display in the image area when there is no image.
* @defaultvalue Derived from `text`
*/
imageInitials?: string;
/**
* The background color when the user's initials are displayed.
* @defaultvalue Derived from `text`
*/
initialsColor?: PersonaInitialsColor | string;
/**
* The text color when the user's initials are displayed
* @defaultvalue `white`
*/
initialsTextColor?: string;
/**
* If true, show the special coin for unknown persona.
* It has '?' in place of initials, with static font and background colors
*/
showUnknownPersonaCoin?: boolean;
};
/**
* Callback function used to provide custom data to build an avatar for a user.
*
* @public
*/
export type AvatarPersonaDataCallback = (userId: string) => Promise<AvatarPersonaData>;
/**
* @private
*/
export interface AvatarPersonaProps extends IPersonaProps {
/**
* Azure Communicator user ID.
*/
userId?: string;
/**
* A function that returns a Promise that resolves to the data to be displayed.
*/
dataProvider?: AvatarPersonaDataCallback;
/**
* Allow to show colored border around persona coin, but isActive is what shows it.
*/
allowActiveBorder?: boolean;
}
/**
* An Avatar component made using the `Persona` component.
* It allows you to specify a `userId` and a `dataProvider` to retrieve the `AvatarPersonaData`.
* Read more about `Persona` component at https://developer.microsoft.com/fluentui#/controls/web/persona
*
* @private
*/
export declare const AvatarPersona: (props: AvatarPersonaProps) => JSX.Element;
//# sourceMappingURL=AvatarPersona.d.ts.map