Remove trigger generics, refactor useMessageComposer

Author: arnautov-anton

src/components/AutoCompleteTextarea/Item.tsx

@@ -3,13 +3,8 @@ import React, { useCallback } from 'react';
 import clsx from 'clsx';
 import type { SuggestionItemProps } from '../ChatAutoComplete';
 
-import type { UnknownType } from '../../types/types';
-
 export const Item = React.forwardRef<HTMLAnchorElement, SuggestionItemProps>(
-  function Item<T extends UnknownType = UnknownType>(
-    props: SuggestionItemProps<T>,
-    innerRef: Ref<HTMLAnchorElement>,
-  ) {
+  function Item(props: SuggestionItemProps, innerRef: Ref<HTMLAnchorElement>) {
     const {
       className,
       component: Component,

src/components/AutoCompleteTextarea/List.tsx

@@ -8,18 +8,14 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { Item } from './Item';
 import { escapeRegExp } from '../Message/renderText';
 
-import type { CustomTrigger, UnknownType } from '../../types/types';
 import type {
   SuggestionEmoji,
   SuggestionItem,
   SuggestionListProps,
   SuggestionUser,
 } from '../ChatAutoComplete';
 
-export const List = <
-  V extends CustomTrigger = CustomTrigger,
-  EmojiData extends UnknownType = UnknownType,
->({
+export const List = ({
   className,
   component,
   currentTrigger,
@@ -34,7 +30,7 @@ export const List = <
   SuggestionItem: PropSuggestionItem,
   value: propValue,
   values,
-}: SuggestionListProps<V>) => {
+}: SuggestionListProps) => {
   const { AutocompleteSuggestionItem } = useComponentContext('SuggestionList');
   const SuggestionItem = PropSuggestionItem || AutocompleteSuggestionItem || Item;
 
@@ -44,42 +40,40 @@ export const List = <
 
   const itemsRef: HTMLElement[] = [];
 
-  const isSelected = (item: SuggestionItem<EmojiData>) =>
+  const isSelected = (item: SuggestionItem) =>
     // @ts-expect-error tmp
     selectedItemIndex === values.findIndex((value) => getId(value) === getId(item));
 
-  const getId = (item: SuggestionItem<EmojiData>) => {
-    // @ts-expect-error tmp
+  const getId = (item: SuggestionItem) => {
     const textToReplace = getTextToReplace(item);
     if (textToReplace.key) {
       return textToReplace.key;
     }
 
-    if (typeof item === 'string' || !(item as SuggestionEmoji<EmojiData>).key) {
+    if (typeof item === 'string' || !(item as SuggestionEmoji).key) {
       return textToReplace.text;
     }
 
-    return (item as SuggestionEmoji<V>).key;
+    return (item as SuggestionEmoji).key;
   };
 
   const findItemIndex = useCallback(
-    (item: SuggestionItem<V>) =>
+    (item: SuggestionItem) =>
+      // @ts-expect-error tmp
       values.findIndex((value) =>
         value.id ? value.id === (item as SuggestionUser).id : value.name === item.name,
       ),
     [values],
   );
 
-  const modifyText = (value: SuggestionListProps<V>['values'][number]) => {
+  const modifyText = (value: SuggestionListProps['values'][number]) => {
     if (!value) return;
-    // @ts-expect-error tmp
     onSelect(getTextToReplace(value));
-    // @ts-expect-error tmp
     if (getSelectedItem) getSelectedItem(value);
   };
 
   const handleClick = useCallback(
-    (e: React.MouseEvent<Element, MouseEvent>, item: SuggestionItem<V>) => {
+    (e: React.MouseEvent<Element, MouseEvent>, item: SuggestionItem) => {
       e?.preventDefault();
 
       const index = findItemIndex(item);
@@ -90,7 +84,7 @@ export const List = <
   );
 
   const selectItem = useCallback(
-    (item: SuggestionItem<V>) => {
+    (item: SuggestionItem) => {
       const index = findItemIndex(item);
       setSelectedItemIndex(index);
     },
@@ -135,12 +129,11 @@ export const List = <
   }, [handleKeyDown]);
 
   useEffect(() => {
-    // @ts-expect-error tmp
     if (values?.length) selectItem(values[0]);
   }, [selectItem, values]);
 
   const restructureItem = useCallback(
-    (item: SuggestionItem<V>) => {
+    (item: SuggestionItem) => {
       const matched = item.name || (item as SuggestionUser).id;
 
       const textBeforeCursor = (propValue || '').slice(0, selectionEnd);
@@ -157,19 +150,20 @@ export const List = <
   );
 
   const restructuredValues = useMemo(
-    // @ts-expect-error tmp
     () => values.map(restructureItem),
     [values, restructureItem],
   );
 
   return (
     <ul className={clsx('str-chat__suggestion-list', className)} style={style}>
+      {/* @ts-expect-error tmp */}
       {restructuredValues.map((item, i) => (
         <SuggestionItem
           className={itemClassName}
           // @ts-expect-error tmp
           component={component}
           item={item}
+          // @ts-expect-error tmp
           key={getId(item).toString()}
           onClickHandler={handleClick}
           onSelectHandler={selectItem}

src/components/AutoCompleteTextarea/TextareaX.tsx

@@ -16,8 +16,6 @@ import { CommandItem } from '../CommandItem';
 import { UserItem } from '../UserItem';
 import type { SuggestionItemProps, SuggestionListProps } from '../ChatAutoComplete';
 
-import type { CustomTrigger, UnknownType } from '../../types/types';
-
 type TextareaState = {
   actualToken: string;
   component: React.ComponentType | null;
@@ -33,10 +31,7 @@ type TextareaState = {
   propsValue: string;
 };
 
-type TextareaProps<
-  V extends CustomTrigger = CustomTrigger,
-  EmojiData extends UnknownType = UnknownType,
-> = {
+type TextareaProps = {
   additionalTextareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
   className?: string;
   closeCommandsList?: () => void;
@@ -72,10 +67,8 @@ type TextareaProps<
   showCommandsList?: boolean;
   showMentionsList?: boolean;
   style?: Omit<CSSProperties, 'height'>;
-  SuggestionItem?: React.ComponentType<
-    React.ComponentType<SuggestionItemProps<EmojiData>>
-  >;
-  SuggestionList?: React.ComponentType<SuggestionListProps<V, EmojiData>>;
+  SuggestionItem?: React.ComponentType<React.ComponentType<SuggestionItemProps>>;
+  SuggestionList?: React.ComponentType<SuggestionListProps>;
   trigger: Record<
     string,
     {
@@ -100,12 +93,7 @@ type TextareaProps<
 
 const _isCommand = (value: string) => value.startsWith('/');
 
-export const TextareaX = <
-  V extends CustomTrigger = CustomTrigger,
-  EmojiData extends UnknownType = UnknownType,
->(
-  props: TextareaProps<V, EmojiData>,
-) => {
+export const TextareaX = (props: TextareaProps) => {
   const {
     closeCommandsList,
     closeMentionsList,
@@ -798,7 +786,6 @@ export const TextareaX = <
             ref={setDropdownRef}
             style={restProps.dropdownStyle}
           >
-            {/* @ts-expect-error tmp */}
             <SuggestionList
               className={restProps.listClassName}
               dropdownScroll={_dropdownScroll}
@@ -808,6 +795,7 @@ export const TextareaX = <
               )}
               itemStyle={restProps.itemStyle}
               onSelect={_onSelect}
+              // @ts-expect-error tmp
               SuggestionItem={SuggestionItem}
               {...triggerProps}
             />

src/components/Channel/Channel.tsx

@@ -89,7 +89,6 @@ import { getChannel } from '../../utils';
 import type { MessageInputProps } from '../MessageInput';
 import type {
   ChannelUnreadUiState,
-  CustomTrigger,
   GiphyVersions,
   ImageAttachmentSizeHandler,
   UpdateMessageOptions,
@@ -171,7 +170,7 @@ const isUserResponseArray = (
   output: string[] | UserResponse[],
 ): output is UserResponse[] => (output as UserResponse[])[0]?.id != null;
 
-export type ChannelProps<V extends CustomTrigger = CustomTrigger> =
+export type ChannelProps =
   ChannelPropsForwardedToComponentContext & {
     // todo: move to MessageComposer configuration
     /** List of accepted file types */
@@ -244,7 +243,7 @@ export type ChannelProps<V extends CustomTrigger = CustomTrigger> =
     /** Custom action handler function to run on hover of an @mention in a message */
     onMentionsHover?: OnMentionAction;
     /** If `dragAndDropWindow` prop is true, the props to pass to the MessageInput component (overrides props placed directly on MessageInput) */
-    optionalMessageInputProps?: MessageInputProps<V>;
+    optionalMessageInputProps?: MessageInputProps;
     /** You can turn on/off thumbnail generation for video attachments */
     shouldGenerateVideoThumbnail?: boolean;
     /** If true, skips the message data string comparison used to memoize the current channel messages (helpful for channels with 1000s of messages) */
@@ -270,8 +269,8 @@ const ChannelContainer = ({
   );
 };
 
-const UnMemoizedChannel = <V extends CustomTrigger = CustomTrigger>(
-  props: PropsWithChildren<ChannelProps<V>>,
+const UnMemoizedChannel = (
+  props: PropsWithChildren<ChannelProps>,
 ) => {
   const {
     channel: propsChannel,
@@ -307,9 +306,9 @@ const UnMemoizedChannel = <V extends CustomTrigger = CustomTrigger>(
   return <ChannelInner {...props} channel={channel} key={channel.cid} />;
 };
 
-const ChannelInner = <V extends CustomTrigger = CustomTrigger>(
+const ChannelInner = (
   props: PropsWithChildren<
-    ChannelProps<V> & {
+    ChannelProps & {
       channel: StreamChannel;
       key: string;
     }