open up ChatField for a more complex usages but still supporting a simple mode by onTextSubmit handler

Author: haschek

src/components/Chat/ChatField.tsx

@@ -5,32 +5,33 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { IconButton } from "../Icon/IconButton";
 import { TextArea, TextAreaProps } from "../TextField/TextArea";
 
-export interface ChatFieldProps extends Pick<TextAreaProps, "className">, TestableComponent {
+export interface ChatFieldProps extends TextAreaProps, TestableComponent {
     /**
      * Default input to start with.
      */
     children?: string;
     /**
      * Callback handler to process the input of the field when `Enter` is pressed or the submit button is clicked.
+     * If you use it together with your own handlers for `onChange` and `onKeyDown` it won't work properly.
      */
-    onSubmit: (value: string) => void;
+    onTextSubmit?: (value: string) => void;
 }
 
 /**
  * Component to input chat text.
  * Based on `TextArea` component.
  */
-export const ChatField = ({ className, onSubmit, ...otherTextAreaProps }: ChatFieldProps) => {
+export const ChatField = ({ className, onTextSubmit, rightElement, ...otherTextAreaProps }: ChatFieldProps) => {
     const chatvalue = React.useRef<string>(otherTextAreaProps.children ?? "");
 
     const onContentChange = (value: string) => {
         chatvalue.current = value;
     };
 
     const onEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (e.keyCode === 13 && e.shiftKey === false) {
+        if (e.keyCode === 13 && e.shiftKey === false && onTextSubmit) {
             e.preventDefault();
-            onSubmit(chatvalue.current);
+            onTextSubmit(chatvalue.current);
         }
     };
 
@@ -42,8 +43,17 @@ export const ChatField = ({ className, onSubmit, ...otherTextAreaProps }: ChatFi
             onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
                 onContentChange(e.target.value);
             }}
-            onKeyDown={onEnter}
-            rightElement={<IconButton name={"operation-send"} onClick={() => onSubmit(chatvalue.current)} />}
+            onKeyDown={onTextSubmit ? onEnter : undefined}
+            rightElement={
+                (onTextSubmit || rightElement) && (
+                    <>
+                        {onTextSubmit && (
+                            <IconButton name={"operation-send"} onClick={() => onTextSubmit(chatvalue.current)} />
+                        )}
+                        {rightElement}
+                    </>
+                )
+            }
             {...otherTextAreaProps}
         />
     );

src/components/Chat/stories/ChatField.stories.tsx

@@ -14,5 +14,5 @@ const TemplateFull: StoryFn<typeof ChatField> = (args) => <ChatField {...args} k
 
 export const Default = TemplateFull.bind({});
 Default.args = {
-    onSubmit: (value) => alert(value),
+    onTextSubmit: (value) => alert(value),
 };