communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
68 lines • 4.22 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';
import { useTheme } from "../../../../react-components/src";
import React, { useMemo, useCallback } from 'react';
import { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';
import { mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';
import { CallWithChatCompositeIcon } from './icons';
/**
* @private
*/
export const SidePaneHeader = (props) => {
const theme = useTheme();
const sidePaneCloseButtonStyles = useMemo(() => ({
root: {
minWidth: '1.5rem',
padding: '0.5rem 0.25rem',
marginRight: '0.25rem',
backgroundColor: theme.semanticColors.bodyBackground,
'@media (forced-colors: active)': {
border: `0.1rem solid ${theme.palette.neutralSecondary}`,
borderRadius: theme.effects.roundedCorner4
}
},
icon: { color: theme.palette.neutralSecondary },
iconHovered: { color: theme.palette.neutralSecondary },
iconPressed: { color: theme.palette.neutralSecondary }
}), [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground, theme.effects.roundedCorner4]);
const handleShiftTab = useCallback((event) => {
var _a, _b;
if (event.key === 'Tab' && event.shiftKey && !props.chatButtonPresent) {
(_b = (_a = props.paneOpenerButton) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
event.preventDefault();
}
}, [props.chatButtonPresent, props.paneOpenerButton]);
if (props.mobileView) {
return React.createElement(SidePaneMobileHeader, Object.assign({}, props));
}
return (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles, verticalAlign: "center" },
React.createElement(Stack.Item, { role: "heading", styles: sidePaneHeaderStyles, "aria-label": props.headingText, "aria-level": 2 }, props.headingText),
React.createElement(Stack.Item, null,
React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: () => {
var _a, _b;
props.onClose();
(_b = (_a = props.paneOpenerButton) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
}, onKeyDown: handleShiftTab, componentRef: props.dismissButtonComponentRef }))));
};
const SidePaneMobileHeader = (props) => {
const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;
const theme = useTheme();
const mobilePaneButtonStylesThemed = useMemo(() => {
return concatStyleSets(mobilePaneButtonStyles, {
root: {
width: '100%'
},
label: {
fontSize: theme.fonts.medium.fontSize,
fontWeight: theme.fonts.medium.fontWeight
}
});
}, [theme]);
return (React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
React.createElement(DefaultButton, { ariaLabel: dismissSidePaneButtonAriaLabel, ariaDescription: dismissSidePaneButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
React.createElement(Stack.Item, { grow: true },
React.createElement(DefaultButton, { checked: true, styles: mobilePaneButtonStylesThemed }, headingText)),
React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, ariaHidden: true, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
};
//# sourceMappingURL=SidePaneHeader.js.map