communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
90 lines • 5.97 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
// eslint-disable-next-line no-restricted-imports
import { Icon, mergeStyleSets } from '@fluentui/react';
import { ControlBarButton } from "../../../../../react-components/src";
import React from 'react';
/**
* Max number of Custom Buttons in primary and secondary ControlBar
* Does not include existing buttons in the controlBar.
*
* @private
*/
export const CUSTOM_BUTTON_OPTIONS = {
MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS: 3,
MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS: 1,
MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS: 2
};
/** @private */
export const generateCustomCallControlBarButton = (onFetchCustomButtonProps, displayType) => {
const allButtonProps = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map((callback) => callback({ displayType }));
return {
primary: generateCustomControlBarButtons('primary', allButtonProps),
secondary: generateCustomControlBarButtons('secondary', allButtonProps),
overflow: generateCustomControlBarButtons('overflow', allButtonProps)
};
};
/** @private */
const generateCustomControlBarButtons = (placement, customButtons) => customButtons
? customButtons
.filter((buttonProps) => buttonProps.placement === placement)
.map((buttonProps, i) => (internalProps) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
// 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. However, onRenderButton is not a public prop and is
// not documented in the API. This is a temporary solution and will need to be revisited.
if ('onRenderButton' in buttonProps) {
return buttonProps['onRenderButton'](internalProps);
}
return (React.createElement(ControlBarButton, { ariaDescription: (_b = (_a = buttonProps.strings) === null || _a === void 0 ? void 0 : _a.ariaDescription) !== null && _b !== void 0 ? _b : internalProps.ariaDescription, ariaLabel: (_f = (_d = (_c = buttonProps.strings) === null || _c === void 0 ? void 0 : _c.ariaLabel) !== null && _d !== void 0 ? _d : (_e = buttonProps.strings) === null || _e === void 0 ? void 0 : _e.tooltipContent) !== null && _f !== void 0 ? _f : internalProps.ariaLabel, disabled: (_g = buttonProps.disabled) !== null && _g !== void 0 ? _g : internalProps.disabled, id: (_h = buttonProps.id) !== null && _h !== void 0 ? _h : internalProps.id, key: `${buttonProps.placement}_${i}`, onClick: (_j = buttonProps.onItemClick) !== null && _j !== void 0 ? _j : internalProps.onClick, onRenderIcon: () => {
var _a, _b, _c;
return (React.createElement(Icon, { iconName: (_c = (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : (_b = internalProps.iconProps) === null || _b === void 0 ? void 0 : _b.iconName) !== null && _c !== void 0 ? _c : 'DefaultCustomButton' }));
}, showLabel: (_k = buttonProps.showLabel) !== null && _k !== void 0 ? _k : internalProps.showLabel, styles: mergeStyleSets(internalProps.styles), strings: buttonProps.strings }));
})
: [];
/** @private */
const generateCustomDrawerButtons = (placement, customButtons) => customButtons
? customButtons
.filter((buttonProps) => buttonProps.placement === placement)
.map((buttonProps, i) => {
var _a, _b;
return (Object.assign(Object.assign({}, buttonProps), { disabled: buttonProps.disabled, iconProps: { iconName: (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : 'DefaultCustomButton', styles: { root: { lineHeight: 0 } } }, id: buttonProps.id, itemKey: `${buttonProps.placement}_${i}`, onItemClick: buttonProps.onItemClick, text: (_b = buttonProps.strings) === null || _b === void 0 ? void 0 : _b.label }));
})
: [];
/** @private */
export const generateCustomCallDrawerButtons = (onFetchCustomButtonProps, displayType) => {
const customButtons = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map((callback) => callback({ displayType }));
return {
primary: generateCustomDrawerButtons('primary', customButtons),
secondary: generateCustomDrawerButtons('secondary', customButtons),
overflow: generateCustomDrawerButtons('overflow', customButtons)
};
};
/** @private */
export const generateCustomCallDesktopOverflowButtons = (onFetchCustomButtonProps, displayType) => {
const customButtons = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map((callback) => callback({ displayType }));
return {
primary: generateCustomDrawerButtons('primary', customButtons).map(drawerMenuItemToContextualMenuItem),
secondary: generateCustomDrawerButtons('secondary', customButtons).map(drawerMenuItemToContextualMenuItem),
overflow: generateCustomDrawerButtons('overflow', customButtons).map(drawerMenuItemToContextualMenuItem)
};
};
/** @private */
export const drawerMenuItemToContextualMenuItem = (item) => (Object.assign(Object.assign({}, item), { key: item.itemKey, onClick: item.onItemClick
? (ev) => {
var _a;
(_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, ev);
}
: undefined, subMenuProps: item.subMenuProps
? {
items: item.subMenuProps.map(drawerMenuItemToContextualMenuItem)
}
: undefined }));
/** @private */
export const onFetchCustomButtonPropsTrampoline = (options) => {
let response = undefined;
response = options === null || options === void 0 ? void 0 : options.onFetchCustomButtonProps;
return response;
};
//# sourceMappingURL=CustomButton.js.map