communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
45 lines • 3.26 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, DefaultButton, FocusZone, FocusZoneDirection, mergeStyles, Stack } from '@fluentui/react';
import { useTheme } from "../../../../react-components/src";
import React, { useMemo } from 'react';
import { CallWithChatCompositeIcon } from '../common/icons';
import { availableSpaceStyles, mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';
import { useLocale } from '../localization';
/**
* Legacy header to be removed when we make a breaking change.
* @private
*/
export const PeopleAndChatHeader = (props) => {
const { onClose, onChatButtonClicked, onPeopleButtonClicked, activeTab } = props;
const theme = useTheme();
const strings = useLocale().strings.call;
const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;
const mobilePaneButtonStylesThemed = useMemo(() => {
return concatStyleSets(mobilePaneButtonStyles, {
root: {
width: '100%'
},
label: {
fontSize: theme.fonts.medium.fontSize,
fontWeight: theme.fonts.medium.fontWeight
}
}, haveMultipleTabs
? {
rootChecked: {
borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
}
}
: {});
}, [theme, haveMultipleTabs]);
return (React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
React.createElement(DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
React.createElement(Stack.Item, { grow: true, role: "tablist" },
React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, className: mergeStyles(availableSpaceStyles.root) },
React.createElement(Stack, { horizontal: true, styles: availableSpaceStyles },
React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && (React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && (React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel)))))),
/* Hidden icon to take the same space as the actual back button on the left. */
React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
};
//# sourceMappingURL=TabHeader.js.map