refactor: remove disabled from MessageInputProps

Author: MartinCupela

src/components/MessageInput/MessageInput.tsx

@@ -52,8 +52,6 @@ export type MessageInputProps = {
   audioRecordingEnabled?: boolean;
   /** Function to clear the editing state while editing a message */
   clearEditingState?: () => void;
-  /** If true, disables the text input */
-  disabled?: boolean;
   /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */
   emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];
   /** If true, focuses the text input on component mount */

src/components/MessageInput/hooks/useCreateMessageInputContext.ts

@@ -10,7 +10,6 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
     clearEditingState,
     cooldownInterval,
     cooldownRemaining,
-    disabled,
     emojiSearchIndex,
     focus,
     grow,
@@ -40,7 +39,6 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
       clearEditingState,
       cooldownInterval,
       cooldownRemaining,
-      disabled,
       emojiSearchIndex,
       focus,
       grow,

src/components/TextareaComposer/TextareaComposer.tsx

@@ -3,7 +3,11 @@ import type { ChangeEventHandler, TextareaHTMLAttributes, UIEventHandler } from
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Textarea from 'react-textarea-autosize';
 import { useMessageComposer } from '../MessageInput';
-import type { SearchSourceState, TextComposerState } from 'stream-chat';
+import type {
+  MessageComposerConfig,
+  SearchSourceState,
+  TextComposerState,
+} from 'stream-chat';
 import {
   useComponentContext,
   useMessageInputContext,
@@ -23,6 +27,10 @@ const searchSourceStateSelector = (state: SearchSourceState) => ({
   items: state.items,
 });
 
+const configStateSelector = (state: MessageComposerConfig) => ({
+  enabled: state.text.enabled,
+});
+
 /**
  * isComposing prevents double submissions in Korean and other languages.
  * starting point for a read:
@@ -34,7 +42,7 @@ const defaultShouldSubmit = (event: React.KeyboardEvent<HTMLTextAreaElement>) =>
 
 export type TextComposerProps = Omit<
   TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'style' | 'defaultValue'
+  'style' | 'defaultValue' | 'disabled'
 > & {
   closeSuggestionsOnClickOutside?: boolean;
   containerClassName?: string;
@@ -50,7 +58,6 @@ export const TextareaComposer = ({
   className,
   closeSuggestionsOnClickOutside,
   containerClassName,
-  disabled,
   // dropdownClassName, // todo: X find a different way to prevent prop drilling
   grow: growProp,
   // itemClassName, // todo: X find a different way to prevent prop drilling
@@ -89,6 +96,8 @@ export const TextareaComposer = ({
     textComposerStateSelector,
   );
 
+  const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
+
   const { isLoadingItems } =
     useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
 
@@ -234,7 +243,7 @@ export const TextareaComposer = ({
           className,
         )}
         data-testid='message-input'
-        disabled={disabled || !!cooldownRemaining}
+        disabled={!enabled || !!cooldownRemaining}
         maxRows={grow ? maxRows : 1}
         onBlur={onBlur}
         onChange={changeHandler}