communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
125 lines • 3.94 kB
TypeScript
/// <reference types="react" />
import { BaseCustomStyles, CommunicationParticipant } from '../types';
import { IStyle } from '@fluentui/react';
/**
* Fluent styles for {@link TypingIndicator}.
*
* @public
*/
export interface TypingIndicatorStylesProps extends BaseCustomStyles {
/** Styles for each typing user's displayName. */
typingUserDisplayName?: IStyle;
/** Styles for the typing string. */
typingString?: IStyle;
}
/**
* Strings of {@link TypingIndicator} that can be overridden.
*
* @public
*/
export interface TypingIndicatorStrings {
/**
* String template to use when one user is typing. Placeholders: [user].
* @example
* ```
* <TypingIndicator
* strings={{ multipleUsersAbbreviateOne: '{users} is typing...' }}
* typingUsers={[{ userId: 'user1', displayName: 'Claire' }]}
* />
* ```
* would be 'Claire is typing...'
**/
singleUser: string;
/**
* String template to use when multiple users are typing. Placeholders: [users].
* @example
* ```
* <TypingIndicator
* strings={{ multipleUsers: '{users} are typing...' }}
* typingUsers={[
* { userId: 'user1', displayName: 'Claire' },
* { userId: 'user2', displayName: 'Christopher' }
* ]}
* />
* ```
* would be 'Claire, Chris are typing...'
**/
multipleUsers: string;
/**
* String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users].
* @example
* ```typescript
* <TypingIndicator
* strings={{ multipleUsersAbbreviateOne: '{users} and 1 other are typing...' }}
* typingUsers={[
* { userId: 'user1', displayName: 'Claire Romanov' },
* { userId: 'user2', displayName: 'Christopher Rutherford' }
* ]}
* />
* ```
* would be 'Claire Romanov and 1 other are typing...'
**/
multipleUsersAbbreviateOne: string;
/**
* String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users, numOthers].
* @example
* ```
* <TypingIndicator
* strings={{ multipleUsersAbbreviateMany: '{users} and {numOthers} others are typing...' }}
* typingUsers={[
* { userId: 'user1', displayName: 'Claire Romanov' },
* { userId: 'user2', displayName: 'Christopher Rutherford' },
* { userId: 'user3', displayName: 'Jill Vernblom' }
* ]}
* />
* ```
* would be 'Claire Romanov and 2 others are typing...'
**/
multipleUsersAbbreviateMany: string;
/**
* String to use as delimiter to separate multiple users.
* @example
* ```
* <TypingIndicator
* strings={{ delimiter: ' + ' }}
* typingUsers={[
* { userId: 'user1', displayName: 'Claire' },
* { userId: 'user2', displayName: 'Chris' },
* { userId: 'user3', displayName: 'Jill' }
* ]}
* />
* ```
* would be 'Claire + Chris + Jill are typing...'
**/
delimiter: string;
}
/**
* Props for {@link TypingIndicator}.
*
* @public
*/
export interface TypingIndicatorProps {
/** List of the typing users. */
typingUsers: CommunicationParticipant[];
/** Callback to render typing users */
onRenderUser?: (users: CommunicationParticipant) => JSX.Element;
/**
* Allows users to pass in an object contains custom CSS styles.
* @Example
* ```
* <TypingIndicator styles={{ root: { background: 'blue' } }} />
* ```
*/
styles?: TypingIndicatorStylesProps;
/**
* Optional strings to override in component
*/
strings?: Partial<TypingIndicatorStrings>;
}
/**
* Component to notify local user when one or more participants in the chat thread are typing.
*
* @public
*/
export declare const TypingIndicator: (props: TypingIndicatorProps) => JSX.Element;
//# sourceMappingURL=TypingIndicator.d.ts.map