communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
159 lines • 5.84 kB
TypeScript
/// <reference types="react" />
import { IContextualMenuItem } from '@fluentui/react';
import { ControlBarButton, ControlBarButtonProps, _DrawerMenuItemProps } from "../../../../../react-components/src";
import { CallControlDisplayType } from '../types/CommonCallControlOptions';
import { CommonCallControlOptions } from '../types/CommonCallControlOptions';
/**
* Max number of Custom Buttons in primary and secondary ControlBar
* Does not include existing buttons in the controlBar.
*
* @private
*/
export declare const CUSTOM_BUTTON_OPTIONS: {
MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS: number;
MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS: number;
MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS: number;
};
/**
* Custom Buttons array as ControlBarButtons.
* Return type for {@link generateCustomCallControlBarButton}
*
* @public
*/
export type CustomButtons = {
[key in CustomCallControlButtonPlacement]: (typeof ControlBarButton)[] | undefined;
};
/**
* Arguments for {@link CustomCallControlButtonCallback}.
*
* @public
*/
export interface CustomCallControlButtonCallbackArgs {
/**
* Buttons should reduce the size to fit a smaller viewport when `displayType` is `'compact'`.
*
* @defaultValue `'default'`
*/
displayType?: CallControlDisplayType;
}
/**
* Response from {@link CustomCallControlButtonCallback}.
* Includes the base props necessary to render a {@link ControlBarButton} or {@link DrawerMenuItem}.
*
* @public
*/
export interface CustomCallControlButtonProps {
/**
* Where to place the custom button relative to other buttons.
*/
placement: CustomCallControlButtonPlacement;
/**
* Icon to render. Icon is a non-default icon name that needs to be registered as a
* custom icon using registerIcons through fluentui. Examples include icons from the fluentui library
*/
iconName?: string;
/**
* Calback for when button is clicked
*/
onItemClick?: () => void;
/**
* Whether the buttons is disabled
*
* @defaultValue true
*/
disabled?: boolean;
/**
* Whether the label is displayed or not.
* If no value is set, showLabel will follow composite rules
*/
showLabel?: boolean;
/**
* A unique id set for the standard HTML id attibute
*/
id?: string;
/**
* Optional strings to override in component
*/
strings?: CustomCallControlButtonStrings;
/**
* Dismiss the drawer menu when the button is clicked
*
* @defaultValue true
*/
dismissDrawer?: boolean;
}
/**
* Strings for CustomCallControlButtons
*
* @public
*/
export interface CustomCallControlButtonStrings {
/**
* Optional label for the button
*/
label?: string;
/**
* Text that is shown in Tooltip content
*/
tooltipContent?: string;
/**
* The aria label of the button for the benefit of screen readers.
*/
ariaLabel?: string;
/**
* Detailed description of the button for the benefit of screen readers.
*/
ariaDescription?: string;
}
/**
* onRenderButton is a custom prop that can be passed to override the default rendering of the button
* This is useful for custom buttons that need to render more than just an icon and label and is used
* for CallWithChat button notification badge.
*
* @private
*/
export type _InternalCustomButtonType = (props: ControlBarButtonProps) => JSX.Element;
/** @private */
export declare const generateCustomCallControlBarButton: (onFetchCustomButtonProps?: CustomCallControlButtonCallback[], displayType?: CallControlDisplayType) => CustomButtons;
/** @private */
export type CustomDrawerButtons = {
[key in CustomCallControlButtonPlacement]: _DrawerMenuItemProps[];
};
/** @private */
export declare const generateCustomCallDrawerButtons: (onFetchCustomButtonProps?: CustomCallControlButtonCallback[], displayType?: CallControlDisplayType) => CustomDrawerButtons;
/** @private */
export type CustomDesktopOverflowButtons = {
[key in CustomCallControlButtonPlacement]: IContextualMenuItem[];
};
/** @private */
export declare const generateCustomCallDesktopOverflowButtons: (onFetchCustomButtonProps?: CustomCallControlButtonCallback[], displayType?: CallControlDisplayType) => CustomDesktopOverflowButtons;
/** @private */
export declare const drawerMenuItemToContextualMenuItem: (item: _DrawerMenuItemProps) => IContextualMenuItem;
/**
* A callback that returns the props to render a custom {@link ControlBarButton} and {@link DrawerMenuItem}.
*
* The response indicates where the custom button should be placed.
*
* Performance tip: This callback is only called when either the callback or its arguments change.
* @public
*/
export type CustomCallControlButtonCallback = (args: CustomCallControlButtonCallbackArgs) => CustomCallControlButtonProps;
/**
* Placement for a custom button injected in the {@link CommonCallControlBar}.
*
* 'primary': Place the button(s) on the right end of the center control bar but before the EndCallButton (left end in rtl mode).
* 'overflow': Place the buttons(s) on the end of the overflow Menu.
* 'secondary': Place the button(s) on the left end of the side control bar (right in rtl mode).
*
* Multiple buttons assigned the same placement are appended in order.
* E.g., if two buttons are placed in 'secondary', they'll both appear on the left end (right end in rtl mode)
* in the order provided.
*
* Only 'primary' placement works when legacy call control is enabled in call composite
*
* @public
*/
export type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'secondary';
/** @private */
export declare const onFetchCustomButtonPropsTrampoline: (options?: CommonCallControlOptions) => CustomCallControlButtonCallback[] | undefined;
//# sourceMappingURL=CustomButton.d.ts.map