You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tailchat/client/web/src/components/ChatBox/ChatInputBox/context.tsx

58 lines
1.7 KiB
TypeScript

import React, { PropsWithChildren, useContext } from 'react';
import type { SuggestionDataItem } from 'react-mentions';
import { useShallowObject } from 'tailchat-shared';
/**
* Input Actions
*/
export interface ChatInputActionContextProps {
message: string;
setMessage: (msg: string) => void;
sendMsg: (message: string) => void;
appendMsg: (message: string) => void;
}
export const ChatInputActionContext =
React.createContext<ChatInputActionContextProps>(
{} as ChatInputActionContextProps
);
ChatInputActionContext.displayName = 'ChatInputActionContext';
export function useChatInputActionContext() {
return useContext(ChatInputActionContext);
}
/**
* Input Mentions
*/
interface ChatInputMentionsContextProps extends PropsWithChildren {
users?: SuggestionDataItem[];
panels?: SuggestionDataItem[];
placeholder?: string;
disabled?: boolean;
}
const ChatInputMentionsContext =
React.createContext<ChatInputMentionsContextProps | null>(null);
ChatInputMentionsContext.displayName = 'ChatInputMentionsContext';
export const ChatInputMentionsContextProvider: React.FC<ChatInputMentionsContextProps> =
React.memo((props) => {
return (
<ChatInputMentionsContext.Provider value={useShallowObject({ ...props })}>
{props.children}
</ChatInputMentionsContext.Provider>
);
});
ChatInputMentionsContextProvider.displayName =
'ChatInputMentionsContextProvider';
export function useChatInputMentionsContext(): ChatInputMentionsContextProps {
const context = useContext(ChatInputMentionsContext);
return {
users: context?.users ?? [],
panels: context?.panels ?? [],
placeholder: context?.placeholder,
disabled: context?.disabled,
};
}