communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
40 lines • 2.36 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles, Stack } from '@fluentui/react';
import React, { useMemo } from 'react';
import { controlBarStyles } from './styles/ControlBar.styles';
import { useTheme } from '../theming';
import { isDarkThemed } from '../theming/themeUtils';
const mainDivStyle = { position: 'relative', height: '100%', width: '100%' };
/**
* A container for various buttons for call controls.
*
* Use with various call control buttons in this library, e.g., {@link CameraButton}, or your own instances of
* {@link ControlBarButton} directly.
*
* @public
*/
export const ControlBar = (props) => {
const { styles, layout } = props;
const theme = useTheme();
const controlBarClassName = useMemo(() => {
const controlBarStyle = controlBarStyles[layout !== null && layout !== void 0 ? layout : 'horizontal'];
// if theme is dark and layout is floating then use palette.neutralQuaternaryAlt as background, otherwise use theme.palette.white
const backgroundStyle = {
background: isDarkThemed(theme) && (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating')) ? theme.palette.neutralQuaternaryAlt : theme.palette.white
};
const borderAndBoxShadowStyle = (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating'))
? {
boxShadow: theme.effects.elevation16,
borderRadius: theme.effects.roundedCorner6
}
: {};
// if rtl is true and layout is either floatingTop or floatingBottom then we need to override the transform-style property
// to translate 50% to right instead of the left
const transformOverrideStyle = theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? { transform: 'translateX(50%)' } : {};
return mergeStyles(controlBarStyle, backgroundStyle, borderAndBoxShadowStyle, transformOverrideStyle, styles === null || styles === void 0 ? void 0 : styles.root);
}, [layout, styles === null || styles === void 0 ? void 0 : styles.root, theme]);
return (React.createElement("div", { className: mergeStyles(mainDivStyle) },
React.createElement(Stack, { className: controlBarClassName }, props.children)));
};
//# sourceMappingURL=ControlBar.js.map