refactor: Allow use of custom Textarea component in StatusUpdateForm (#342)

Author: MartinCupela

src/components/StatusUpdateForm/StatusUpdateForm.test.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
+import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import { StatusUpdateForm } from './StatusUpdateForm';
 import { I18n } from 'emoji-mart';
 import { EmojiPicker } from '../EmojiPicker';
 
+const customTextareaPlaceholder = 'Custom placeholder';
+const Textarea = jest.fn(() => <textarea placeholder={customTextareaPlaceholder} />);
+
 jest.mock('../EmojiPicker', () => {
   return {
     ...jest.requireActual('../EmojiPicker'),
@@ -12,6 +16,8 @@ jest.mock('../EmojiPicker', () => {
 });
 
 describe('StatusUpdateForm', () => {
+  beforeEach(jest.clearAllMocks);
+
   it('passes i18n prop to EmojiPicker', () => {
     const emojiI18n: Partial<I18n> = {
       search: 'Custom Search String',
@@ -22,4 +28,14 @@ describe('StatusUpdateForm', () => {
     render(<StatusUpdateForm emojiI18n={emojiI18n} />);
     expect(EmojiPicker).toHaveBeenCalledWith(expect.objectContaining({ i18n: emojiI18n }), {});
   });
+
+  it('renders default Textarea', () => {
+    const { getByRole } = render(<StatusUpdateForm />);
+    expect(getByRole('textbox')).toHaveProperty('placeholder', 'Type your post...');
+  });
+
+  it('renders custom Textarea', () => {
+    const { getByRole } = render(<StatusUpdateForm Textarea={Textarea} />);
+    expect(getByRole('textbox')).toHaveProperty('placeholder', customTextareaPlaceholder);
+  });
 });

src/components/StatusUpdateForm/StatusUpdateForm.tsx

@@ -1,21 +1,21 @@
 import React, { ReactNode } from 'react';
 import { Activity, NewActivity, UR } from 'getstream';
 import {
-  ImageUploadButton,
-  FileUploadButton,
-  ImagePreviewer,
   FilePreviewer,
-  ImageDropzone,
-  LoadingIndicator,
   FileUpload,
+  FileUploadButton,
+  ImageDropzone,
+  ImagePreviewer,
   ImageUpload,
+  ImageUploadButton,
+  LoadingIndicator,
 } from 'react-file-utils';
 
 import { DefaultAT, DefaultUT, useTranslationContext } from '../../context';
-import { PropsWithElementAttributes } from '../../utils';
+import { ElementOrComponentOrLiteralType, PropsWithElementAttributes, smartRender } from '../../utils';
 import { useStatusUpdateForm } from './useStatusUpdateForm';
-import { Panel, PanelContent, PanelHeading, PanelFooter } from '../Panel';
-import { Textarea, TextareaProps } from '../Textarea';
+import { Panel, PanelContent, PanelFooter, PanelHeading } from '../Panel';
+import { Textarea as DefaultTextarea, TextareaProps } from '../Textarea';
 import { Avatar } from '../Avatar';
 import { Card } from '../Card';
 import { Audio } from '../Audio';
@@ -58,6 +58,8 @@ export type StatusUpdateFormProps<AT extends DefaultAT = DefaultAT> = PropsWithE
   modifyActivityData?: (activity: NewActivity<AT>) => NewActivity<AT>;
   /** A callback to run after the activity is posted successfully */
   onSuccess?: (activity: Activity<AT>) => void;
+  /** Custom Textarea component implementation */
+  Textarea?: ElementOrComponentOrLiteralType<Omit<TextareaProps, 'maxLength' | 'rows'>>;
   /** An extra trigger for ReactTextareaAutocomplete, this can be used to show
    * a menu when typing @xxx or #xxx, in addition to the emoji menu when typing
    * :xxx  */
@@ -81,6 +83,7 @@ export function StatusUpdateForm<
   emojiI18n,
   Header,
   FooterItem,
+  Textarea = DefaultTextarea,
   trigger,
   doRequest,
   userId,
@@ -112,15 +115,15 @@ export function StatusUpdateForm<
                 </div>
               )}
 
-              <Textarea
-                innerRef={state.textInputRef}
-                placeholder={t('Type your post...')}
-                value={state.text}
-                onChange={state.onChange}
-                emojiData={emojiData}
-                trigger={trigger}
-                onPaste={state.onPaste}
-              />
+              {smartRender(Textarea, {
+                emojiData,
+                innerRef: state.textInputRef,
+                onChange: state.onChange,
+                onPaste: state.onPaste,
+                placeholder: t('Type your post...'),
+                trigger,
+                value: state.text,
+              })}
             </div>
 
             {state.isOgScraping && (