@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
105 lines • 3.13 kB
TypeScript
import React from 'react';
import { IStyle } from '@fluentui/react';
import { BaseCustomStyles } from '../types';
/**
* Fluent styles for {@link Sendbox}.
*
* @public
*/
export interface SendBoxStylesProps extends BaseCustomStyles {
/** Styles for the text field. */
textField?: IStyle;
/** styles for the text field container */
textFieldContainer?: IStyle;
/** Styles for the container of the send message icon. */
sendMessageIconContainer?: IStyle;
/** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */
sendMessageIcon?: IStyle;
/** Styles for the system message; These styles will be ignored when a custom system message component is provided. */
systemMessage?: IStyle;
}
/**
* Strings of {@link SendBox} that can be overridden.
*
* @public
*/
export interface SendBoxStrings {
/**
* Placeholder text in SendBox when there is no user input
*/
placeholderText: string;
/**
* The warning message when send box text length is more than max limit
*/
textTooLong: string;
/**
* Aria label for send message button
*/
sendButtonAriaLabel: string;
}
/**
* Props for {@link SendBox}.
*
* @public
*/
export interface SendBoxProps {
/**
* Optional boolean to disable text box
* @defaultValue false
*/
disabled?: boolean;
/**
* Optional text for system message below text box
*/
systemMessage?: string;
/**
* Optional override behavior on send button click
*/
onSendMessage?: (content: string) => Promise<void>;
/**
* Optional callback called when user is typing
*/
onTyping?: () => Promise<void>;
/**
* Optional callback to render system message below the SendBox.
* @defaultValue MessageBar
*/
onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;
/**
* Optional boolean to support new line in SendBox.
* @defaultValue false
*/
supportNewline?: boolean;
/**
* Optional callback to render send button icon to the right of the SendBox.
* @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise
*/
onRenderIcon?: (isHover: boolean) => JSX.Element;
/**
* Allows users to pass in an object contains custom CSS styles.
* @Example
* ```
* <SendBox styles={{ root: { background: 'blue' } }} />
* ```
*/
styles?: SendBoxStylesProps;
/**
* Optional strings to override in component
*/
strings?: Partial<SendBoxStrings>;
/**
* enumerable to determine if the input box has focus on render or not.
* When undefined nothing has focus on render
*/
autoFocus?: 'sendBoxTextField';
}
/**
* Component for typing and sending messages.
*
* Supports sending typing notification when user starts entering text.
* Supports an optional message below the text input field.
*
* @public
*/
export declare const SendBox: (props: SendBoxProps) => JSX.Element;
//# sourceMappingURL=SendBox.d.ts.map