combine inputs

jfacoustic · Aug 12, 2021 · a124d0c · a124d0c
1 parent c304fb2
commit a124d0c
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 129 deletions.
diff --git a/examples/website-demos/virtual-event/src/components/Chat/MessageInputUI.tsx b/examples/website-demos/virtual-event/src/components/Chat/MessageInputUI.tsx
@@ -1,10 +1,23 @@
 import { useCallback, useEffect, useState } from 'react';
-import { ChatAutoComplete, EmojiPicker, useMessageInputContext } from 'stream-chat-react';
+import {
+  ChatAutoComplete,
+  EmojiPicker,
+  MessageInputProps,
+  useMessageInputContext,
+} from 'stream-chat-react';
 
 import { CommandBolt, EmojiPickerIcon, GiphyIcon, GiphySearch, SendArrow } from '../../assets';
 import { useGiphyContext } from '../../contexts/GiphyContext';
 
-export const MessageInputUI: React.FC = () => {
+type Props = MessageInputProps & {
+  checked?: boolean;
+  setChecked?: React.Dispatch<React.SetStateAction<boolean>>;
+  threadInput?: boolean;
+};
+
+export const MessageInputUI = (props: Props) => {
+  const { checked, setChecked, threadInput = false } = props;
+
   const {
     closeCommandsList,
     emojiPickerRef,
@@ -20,6 +33,10 @@ export const MessageInputUI: React.FC = () => {
 
   const [commandsOpen, setCommandsOpen] = useState(false);
 
+  const onCheckChange = () => {
+    setChecked && setChecked(!checked);
+  };
+
   useEffect(() => {
     const handleClick = () => {
       closeCommandsList();
@@ -61,34 +78,49 @@ export const MessageInputUI: React.FC = () => {
   };
 
   return (
-    <div className='input-ui-container'>
-      <EmojiPicker />
-      <div className={`input-ui-input ${giphyState ? 'giphy' : ''}`}>
-        {giphyState && !numberOfUploads && <GiphyIcon />}
-        <ChatAutoComplete onChange={onChange} placeholder='Say something' />
-        <div className='input-ui-input-commands' onClick={handleCommandsClick}>
-          <CommandBolt />
+    <>
+      <div className='input-ui-container'>
+        <EmojiPicker />
+        <div className={`input-ui-input ${giphyState ? 'giphy' : ''}`}>
+          {giphyState && !numberOfUploads && <GiphyIcon />}
+          <ChatAutoComplete onChange={onChange} placeholder='Say something' />
+          {!threadInput && (
+            <div className='input-ui-input-commands' onClick={handleCommandsClick}>
+              <CommandBolt />
+            </div>
+          )}
+          {!giphyState && (
+            <div
+              className='input-ui-input-emoji-picker'
+              ref={emojiPickerRef}
+              onClick={openEmojiPicker}
+            >
+              <EmojiPickerIcon />
+            </div>
+          )}
+        </div>
+        <div className={`input-ui-send ${text ? 'text' : ''}`} onClick={handleSubmit}>
+          {giphyState ? (
+            <GiphySearch />
+          ) : (
+            <>
+              <SendArrow />
+              <div>269</div>
+            </>
+          )}
         </div>
-        {!giphyState && (
-          <div
-            className='input-ui-input-emoji-picker'
-            ref={emojiPickerRef}
-            onClick={openEmojiPicker}
-          >
-            <EmojiPickerIcon />
-          </div>
-        )}
-      </div>
-      <div className={`input-ui-send ${text ? 'text' : ''}`} onClick={handleSubmit}>
-        {giphyState ? (
-          <GiphySearch />
-        ) : (
-          <>
-            <SendArrow />
-            <div>269</div>
-          </>
-        )}
       </div>
-    </div>
+      {threadInput && (
+        <div className='thread-footer'>
+          <input
+            checked={checked}
+            className='thread-footer-checkbox'
+            onChange={onCheckChange}
+            type='checkbox'
+          />
+          <div className='thread-footer-text'>Send also as direct message</div>
+        </div>
+      )}
+    </>
   );
 };
diff --git a/examples/website-demos/virtual-event/src/components/Chat/ThreadInner.tsx b/examples/website-demos/virtual-event/src/components/Chat/ThreadInner.tsx
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { Thread } from 'stream-chat-react';
 
 import { MessageUI } from './MessageUI';
-import { ThreadInputUI } from './ThreadInputUI';
 
 import { useThreadOverrideSubmit } from '../../hooks/useThreadOverrideSubmit';
+import { MessageInputUI } from './MessageInputUI';
 
 export const ThreadInner = () => {
   const [checked, setChecked] = useState(false);
@@ -15,7 +15,9 @@ export const ThreadInner = () => {
     <>
       <Thread
         additionalMessageInputProps={{ overrideSubmitHandler: threadOverrideSubmitHandler }}
-        Input={(props) => <ThreadInputUI {...props} checked={checked} setChecked={setChecked} />}
+        Input={(props) => (
+          <MessageInputUI {...props} checked={checked} setChecked={setChecked} threadInput />
+        )}
         Message={MessageUI}
       />
     </>

diff --git a/examples/website-demos/virtual-event/src/components/Chat/ThreadInputUI.tsx b/examples/website-demos/virtual-event/src/components/Chat/ThreadInputUI.tsx