communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
34 lines • 2.78 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