Add horizontal resizing

Author: rebeccaalpert

packages/module/src/MessageBar/MessageBar.tsx

@@ -63,7 +63,6 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   // --------------------------------------------------------------------------
   const [message, setMessage] = React.useState<string>('');
   const [isListeningMessage, setIsListeningMessage] = React.useState<boolean>(false);
-  const [height, setHeight] = React.useState<number>();
   const [hasSentMessage, setHasSentMessage] = React.useState(false);
 
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
@@ -75,6 +74,11 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     if (parent) {
       parent.style.setProperty('margin-top', `0rem`);
       parent.style.setProperty('margin-bottom', `0rem`);
+
+      const grandparent = parent.parentElement;
+      if (grandparent) {
+        grandparent.style.setProperty('flex-basis', 'auto');
+      }
     }
   };
 
@@ -92,25 +96,35 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
         parseInt(computed.getPropertyValue('border-bottom-width'));
       parent.style.setProperty('height', `${height}px`);
 
+      console.log('height', height);
       if (height > 32 || window.innerWidth <= 359) {
         parent.style.setProperty('margin-bottom', `1rem`);
         parent.style.setProperty('margin-top', `1rem`);
       }
+    }
+  };
 
-      setHeight(height);
+  const textIsLongerThan2Lines = (field: HTMLTextAreaElement) => {
+    const lineHeight = parseFloat(window.getComputedStyle(field).lineHeight);
+    const lines = field.scrollHeight / lineHeight;
+    return lines > 2;
+  };
+
+  const setAutoWidth = (field: HTMLTextAreaElement) => {
+    const parent = field.parentElement;
+    if (parent) {
+      const grandparent = parent.parentElement;
+      if (textIsLongerThan2Lines(field) && grandparent) {
+        grandparent.style.setProperty('flex-basis', `100%`);
+      }
     }
   };
 
   const handleNewLine = (field: HTMLTextAreaElement) => {
     const parent = field.parentElement;
-    const oldHeight = height ?? 0;
     if (parent) {
-      if (oldHeight === 0) {
-        parent.style.setProperty('margin-bottom', `1rem`);
-        parent.style.setProperty('margin-top', `1rem`);
-      } else {
-        parent.style.setProperty('height', `${oldHeight + 16}px`);
-      }
+      parent.style.setProperty('margin-bottom', `1rem`);
+      parent.style.setProperty('margin-top', `1rem`);
     }
   };
 
@@ -128,6 +142,27 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
       setInitialLineHeight(field);
       setAutoHeight(field);
     }
+    const resetHeight = () => {
+      if (field) {
+        if (field.value === '') {
+          if (window.innerWidth > 467) {
+            setInitialLineHeight(field);
+          } else {
+            setInitialLineHeight(field);
+            handleMobileHeight(field);
+          }
+        } else {
+          setInitialLineHeight(field);
+          setAutoHeight(field);
+          setAutoWidth(field);
+        }
+      }
+    };
+    window.addEventListener('resize', resetHeight);
+
+    return () => {
+      window.removeEventListener('resize', resetHeight);
+    };
   }, []);
 
   React.useEffect(() => {
@@ -139,6 +174,15 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     setHasSentMessage(false);
   }, [hasSentMessage]);
 
+  React.useEffect(() => {
+    if (textareaRef.current) {
+      if (window.innerWidth <= 467) {
+        handleMobileHeight(textareaRef.current);
+      }
+      setAutoWidth(textareaRef.current);
+    }
+  }, [message]);
+
   const handleChange = React.useCallback((event) => {
     if (textareaRef.current) {
       if (event.target.value === '') {
@@ -158,13 +202,6 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     });
   }, [onSendMessage]);
 
-  // want to exclude things like delete, shift, etc.
-  const isTypeableKey = (key) => {
-    if (key.length > 1) {
-      return false;
-    }
-    return true;
-  };
   const handleKeyDown = React.useCallback(
     (event) => {
       if (event.key === 'Enter' && !event.shiftKey) {
@@ -178,11 +215,6 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
           handleNewLine(textareaRef.current);
         }
       }
-      if (window.innerWidth <= 411 && isTypeableKey(event.key)) {
-        if (textareaRef.current) {
-          handleMobileHeight(textareaRef.current);
-        }
-      }
     },
     [handleSend]
   );