@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
48 lines • 3.06 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { DefaultButton, Icon, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';
import React, { useCallback } from 'react';
import { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';
/**
* A component for displaying a Video Background Effect Option.
*
* @internal
*/
export const _VideoEffectsItem = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const theme = useTheme();
const isSelected = (_a = props.isSelected) !== null && _a !== void 0 ? _a : false;
const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
const backgroundImage = (_c = props.backgroundProps) === null || _c === void 0 ? void 0 : _c.url;
const iconContainerStyles = mergeStyles({
height: '1.25rem'
}, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.iconContainer);
const textContainerStyles = mergeStyles({
height: '1.25rem',
maxWidth: '4.5rem',
overflow: 'hidden'
}, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.textContainer);
const containerStyles = useCallback(() => videoEffectsItemContainerStyles({
theme,
isSelected,
disabled,
backgroundImage
}), [backgroundImage, disabled, isSelected, theme]);
return React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_f = props.styles) === null || _f === void 0 ? void 0 : _f.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item` },
React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, ariaLabel: (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : `${props.title}, ${(_h = props.tooltipProps) === null || _h === void 0 ? void 0 : _h.content}`, "aria-disabled": props.disabled, role: "radio", "aria-checked": isSelected },
React.createElement(Stack, { horizontalAlign: 'center', className: mergeStyles({
width: '100%'
}) },
props.iconProps && React.createElement(Stack.Item, { className: iconContainerStyles },
React.createElement(Icon, Object.assign({}, props.iconProps))),
props.title && React.createElement(Stack.Item, { className: textContainerStyles },
React.createElement(Text, { variant: "small", styles: {
root: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
} }, props.title))))));
};
//# sourceMappingURL=VideoEffectsItem.js.map