@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
82 lines • 3.21 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { ErrorBar, MessageThread, ParticipantList, SendBox, TypingIndicator } from "../../../react-components/src";
import { useHandlers } from './useHandlers';
import { useSelector } from './useSelector';
import { sendBoxSelector } from '../sendBoxSelector';
import { messageThreadSelectorWithThread } from '../messageThreadSelector';
import { typingIndicatorSelector } from '../typingIndicatorSelector';
import { chatParticipantListSelector } from '../chatParticipantListSelector';
import { errorBarSelector } from '../errorBarSelector';
import { ChatThreadClientContext } from '../providers/ChatThreadClientProvider';
import { useContext } from 'react';
/**
* Primary hook to get all hooks necessary for a chat Component.
*
* Most straightforward usage of chat 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) => {
const selector = getSelector(component);
const props = useSelector(selector);
const handlers = useHandlers(component);
if (props !== undefined) {
return Object.assign(Object.assign({}, props), handlers);
}
return undefined;
};
/**
* Get the selector for a specified component.
*
* Useful when implementing a custom component that utilizes the providers
* exported from this library.
*
* @public
*/
export const getSelector = (component) => {
return findSelector(component);
};
const messageThreadSelectorsByThread = {};
const findSelector = (component) => {
// For the message thread selector we need to create a new one for each thread
// If we have just one for the entire app, then we will have updates when not expecting due to
// the arguments changing
const getMessageThreadSelector = () => {
var _a, _b;
const threadId = (_b = (_a = useContext(ChatThreadClientContext)) === null || _a === void 0 ? void 0 : _a.threadId) !== null && _b !== void 0 ? _b : 'default-id-when-not-in-provider';
let messageThreadSelectorImpl = messageThreadSelectorsByThread[threadId];
if (!messageThreadSelectorImpl) {
messageThreadSelectorImpl = messageThreadSelectorWithThread();
messageThreadSelectorsByThread[threadId] = messageThreadSelectorImpl;
}
return messageThreadSelectorImpl;
};
// Add component type check to assist in identification for usePropsFor
// to avoid issue where production build does not have the component name
switch (component) {
case SendBox:
return sendBoxSelector;
case MessageThread:
return getMessageThreadSelector();
case TypingIndicator:
return typingIndicatorSelector;
case ParticipantList:
return chatParticipantListSelector;
case ErrorBar:
return errorBarSelector;
}
return undefined;
};
//# sourceMappingURL=usePropsFor.js.map