@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
118 lines • 4.89 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { CameraButton, EndCallButton, ErrorBar, MicrophoneButton, DevicesButton, ParticipantList, ScreenShareButton, VideoGallery, CaptionsSettingsModal, CaptionsBanner, StartCaptionsButton } from "../../../react-components/src";
import { IncomingCallStack } from "../../../react-components/src";
import { NotificationStack } from "../../../react-components/src";
import { Dialpad } from "../../../react-components/src";
import { HoldButton } from "../../../react-components/src";
import { RaiseHandButton } from "../../../react-components/src";
import { raiseHandButtonSelector } from '../callControlSelectors';
import { cameraButtonSelector, microphoneButtonSelector, devicesButtonSelector, screenShareButtonSelector } from '../callControlSelectors';
import { holdButtonSelector } from '../callControlSelectors';
import { videoGallerySelector } from '../videoGallerySelector';
import { participantListSelector } from '../participantListSelector';
import { participantsButtonSelector } from '../participantsButtonSelector';
import { useHandlers } from './useHandlers';
import { useSelector } from './useSelector';
import { ParticipantsButton } from "../../../react-components/src";
import { errorBarSelector } from '../errorBarSelector';
import { reactionButtonSelector } from '../callControlSelectors';
import { ReactionButton } from "../../../react-components/src";
import { notificationStackSelector } from '../notificationStackSelector';
import { incomingCallStackSelector } from '../incomingCallStackSelector';
import { captionSettingsSelector, captionsBannerSelector, startCaptionsButtonSelector } from '../captionsSelector';
/**
* Primary hook to get all hooks necessary for a calling Component.
*
* Most straightforward usage of calling components looks like:
*
* @example
* ```
* import { ParticipantList, usePropsFor } from '@azure/communication-react';
*
* const App = (): JSX.Element => {
* // ... code to setup Providers ...
*
* return <ParticipantList {...usePropsFor(ParticipantList)}/>
* }
* ```
*
* @public
*/
//eslint-disable-next-line @typescript-eslint/no-explicit-any
export const usePropsFor = (component) => {
const selector = getSelector(component);
const props = useSelector(selector);
const handlers = useHandlers(component);
if (props !== undefined) {
//eslint-disable-next-line @typescript-eslint/no-explicit-any
return Object.assign(Object.assign({}, props), handlers);
}
//eslint-disable-next-line @typescript-eslint/no-explicit-any
return undefined;
};
const emptySelector = () => ({});
/**
* Get the selector for a specified component.
*
* Useful when implementing a custom component that utilizes the providers
* exported from this library.
*
* @public
*/
//eslint-disable-next-line @typescript-eslint/no-explicit-any
export const getSelector = (component) => {
return findSelector(component);
};
//eslint-disable-next-line @typescript-eslint/no-explicit-any
const findSelector = (component) => {
// Dialpad only has handlers currently and doesn't require any props from the stateful layer so return the emptySelector
if (component === Dialpad) {
return emptySelector;
}
switch (component) {
case VideoGallery:
return videoGallerySelector;
case MicrophoneButton:
return microphoneButtonSelector;
case CameraButton:
return cameraButtonSelector;
case ScreenShareButton:
return screenShareButtonSelector;
case DevicesButton:
return devicesButtonSelector;
case ParticipantList:
return participantListSelector;
case ParticipantsButton:
return participantsButtonSelector;
case EndCallButton:
return emptySelector;
case ErrorBar:
return errorBarSelector;
case RaiseHandButton:
return raiseHandButtonSelector;
case ReactionButton:
return reactionButtonSelector;
case NotificationStack:
return notificationStackSelector;
case HoldButton:
return holdButtonSelector;
case IncomingCallStack:
return incomingCallStackSelector;
case CaptionsBanner:
return captionsBannerSelector;
case CaptionsSettingsModal:
return captionSettingsSelector;
case StartCaptionsButton:
return startCaptionsButtonSelector;
}
return undefined;
};
/**
* Selector for new components that are conditionally compiled. Comment out when there is no CC'd components
*/
// const findConditionalCompiledSelector = (component: (props: any) => JSX.Element | undefined): any => {
// switch (component) {
// }
// };
//# sourceMappingURL=usePropsFor.js.map