@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
54 lines • 6.01 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useCallback, useMemo } from 'react';
import { Stack } from '@fluentui/react';
import { containerContextStyles, paneBodyContainer, scrollableContainer, scrollableContainerContents } from '../../../common/styles/ParticipantContainer.styles';
import { availableSpaceStyles, paneHighContrastStyles, sidePaneStyles, sidePaneTokens } from '../../../common/styles/Pane.styles';
import { useSidePaneContext } from './SidePaneProvider';
import { PeopleAndChatHeader } from '../../../common/TabHeader';
import { hiddenStyles } from '../../../common/styles/Pane.styles';
import { useTheme } from "../../../../../../react-components/src";
/** @private */
export const SidePane = (props) => {
var _a;
const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();
const renderingHiddenOverrideContent = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.renderer.contentRenderer) && overrideSidePane.persistRenderingWhenClosed && !overrideSidePane.isActive;
const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;
const widthConstrainedStyles = useMemo(() => sidePaneStyles(props.maxWidth, props.minWidth), [props.maxWidth, props.minWidth]);
const paneStyles = renderingOnlyHiddenContent ? hiddenStyles : props.mobileView ? availableSpaceStyles : widthConstrainedStyles;
const Header = (_a = ((overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.headerRenderer)) !== null && _a !== void 0 ? _a : EmptyElement;
/**
* Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.
* To be removed in breaking change.
*/
const overrideSidePaneId = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? overrideSidePane.renderer.id : undefined;
const { updateSidePaneRenderer } = props;
const closePane = useCallback(() => {
updateSidePaneRenderer(undefined);
}, [updateSidePaneRenderer]);
const LegacyHeader = useMemo(() => {
var _a;
return React.createElement(PeopleAndChatHeader, { onClose: overrideSidePaneId === 'chat' ? (_a = props.onChatButtonClicked) !== null && _a !== void 0 ? _a : noop : closePane, activeTab: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? 'people' : 'chat',
// legacy arguments to be removed in breaking change:
disablePeopleButton: props.disablePeopleButton, disableChatButton: props.disableChatButton, onPeopleButtonClicked: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? noop : props.onPeopleButtonClicked, onChatButtonClicked: overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked });
}, [overrideSidePaneId, props.onChatButtonClicked, props.onPeopleButtonClicked, props.disablePeopleButton, props.disableChatButton, sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id, closePane]);
const HeaderToRender = props.mobileView && (overrideSidePaneId === 'chat' || (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people') ? LegacyHeader : Header();
const ContentRenderer = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? undefined : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.contentRenderer;
const OverrideContentRenderer = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) || (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed) ? overrideSidePane.renderer.contentRenderer : undefined;
const theme = useTheme();
if (!ContentRenderer && !OverrideContentRenderer) {
return React.createElement(EmptyElement, null);
}
return React.createElement(Stack, { "aria-label": props.ariaLabel, "data-is-focusable": !!props.ariaLabel, role: props.ariaLabel ? 'navigation' : undefined, tabIndex: props.ariaLabel ? 0 : undefined, verticalFill: true, grow: true, styles: paneStyles, "aria-modal": true, "data-ui-id": "SidePane", tokens: props.mobileView || !props.showAddPeopleButton && (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? {} : sidePaneTokens, className: paneHighContrastStyles(theme) },
HeaderToRender,
React.createElement(Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
React.createElement(Stack, { verticalFill: true, styles: scrollableContainer },
ContentRenderer && React.createElement(Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
React.createElement(Stack, { styles: containerContextStyles }, ContentRenderer === null || ContentRenderer === void 0 ? void 0 : ContentRenderer())),
OverrideContentRenderer && React.createElement(Stack.Item, { verticalFill: true, styles: !(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) && (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed) ? hiddenStyles : scrollableContainerContents },
React.createElement(Stack, { styles: containerContextStyles }, OverrideContentRenderer === null || OverrideContentRenderer === void 0 ? void 0 : OverrideContentRenderer())))));
};
// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => { };
const EmptyElement = () => React.createElement(React.Fragment, null);
//# sourceMappingURL=SidePane.js.map