@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
42 lines • 2.24 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useCallback, useEffect, useMemo } from 'react';
import { useIsParticularSidePaneOpen } from './SidePaneProvider';
import { SidePaneHeader } from '../../../common/SidePaneHeader';
import { MeetingPhoneInfoPaneContent } from '../../../common/MeetingPhoneInfoPaneContent';
import { useLocale } from '../../../localization';
const SIDE_PANE_ID = 'Meeting Phone Info';
/** @private */
export const useMeetingPhoneInfoPane = (props) => {
const { updateSidePaneRenderer, mobileView, conferencePhoneInfo } = props;
const closePane = useCallback(() => {
updateSidePaneRenderer(undefined);
}, [updateSidePaneRenderer]);
const localeStrings = useLocale().component.strings.meetingConferencePhoneInfo;
const callStrings = useLocale().strings.call;
const onRenderHeader = useCallback(() => React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.meetingConferencePhoneInfoModalTitle, dismissSidePaneButtonAriaLabel: callStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false }), [mobileView, closePane, localeStrings, callStrings]);
const onRenderContent = useCallback(() => {
return React.createElement(MeetingPhoneInfoPaneContent, { mobileView: mobileView, conferencePhoneInfoList: conferencePhoneInfo });
}, [mobileView, conferencePhoneInfo]);
const sidePaneRenderer = useMemo(() => ({
headerRenderer: onRenderHeader,
contentRenderer: onRenderContent,
id: SIDE_PANE_ID
}), [onRenderContent, onRenderHeader]);
const openPane = useCallback(() => {
updateSidePaneRenderer(sidePaneRenderer);
}, [sidePaneRenderer, updateSidePaneRenderer]);
const isOpen = useIsParticularSidePaneOpen(SIDE_PANE_ID);
// Update pane renderer if it is open and the openPane dep changes
useEffect(() => {
if (isOpen) {
openPane();
}
}, [isOpen, openPane]);
return {
openMeetingPhoneInfoPane: openPane,
closeMeetingPhoneInfoPane: closePane,
isMeetingPhoneInfoPaneOpen: isOpen
};
};
//# sourceMappingURL=useMeetingPhoneInfo.js.map