communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
73 lines • 3.14 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { getCallingSelector, useCallingHandlers, useCallingSelector } from "../../calling-component-bindings/src";
import { getChatSelector, useChatHandlers, useChatSelector } from "../../chat-component-bindings/src";
/**
* Hook to obtain a selector for a specified component.
*
* Useful when implementing a custom component that utilizes the providers
* exported from this library.
*
* @public
*/
export const useSelector = (selector, selectorProps, type) => {
// Because of react hooks rules, hooks can't be conditionally called
// We call both call and chat hooks and detect current context
// Return undefined and skip execution when not in that context
const callingMode = !type || type === 'calling';
const chatMode = !type || type === 'chat';
const callProps = useCallingSelector(callingMode ? selector : undefined, selectorProps);
const chatProps = useChatSelector(chatMode ? selector : undefined, selectorProps);
return callProps !== null && callProps !== void 0 ? callProps : chatProps;
};
/**
* Primary hook to get all hooks necessary for a React Component from this library.
*
* To call this hook, the component requires to be wrapped under these providers:
*
* 1. For chat components: {@link ChatClientProvider} and {@link ChatThreadClientProvider}.
*
* 2. For calling components: {@link CallClientProvider}, {@link CallAgentProvider} and {@link CallAgentProvider}.
*
* Most straightforward usage of a components looks like:
*
* @example
* ```
* import { ParticipantList, usePropsFor } from '@azure/communication-react';
*
* const App = (): JSX.Element => {
* // ... code to setup Providers ...
*
* return <ParticipantList {...usePropsFor(ParticipantList)}/>
* }
* ```
*
* @public
*/
export const usePropsFor = (component, type) => {
const callingSelector = type === 'calling' || !type ? getCallingSelector(component) : undefined;
const chatSelector = type === 'chat' || !type ? getChatSelector(component) : undefined;
const callProps = useCallingSelector(callingSelector);
const chatProps = useChatSelector(chatSelector);
const callingHandlers = useCallingHandlers(component);
const chatHandlers = useChatHandlers(component);
if (chatProps) {
if (!chatHandlers) {
throw 'Please initialize chatClient and chatThreadClient first!';
}
return Object.assign(Object.assign({}, chatProps), chatHandlers);
}
if (callProps) {
if (!callingHandlers) {
throw 'Please initialize callClient first!';
}
return Object.assign(Object.assign({}, callProps), callingHandlers);
}
if (!chatSelector && !callingSelector) {
throw "Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List.";
}
else {
throw 'Could not find props for this component, ensure the component is wrapped by appropriate providers.';
}
};
//# sourceMappingURL=mergedHooks.js.map