From ecde2d8c9935581c3cc3dacf8c6255902e7f1b26 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Wed, 16 Nov 2022 07:56:15 +0300
Subject: [PATCH] Textarea autoresize

---
 src/components/Inbox/DialogCard.tsx |  2 +-
 src/components/Views/Inbox.tsx      | 28 ++++++---
 src/styles/Inbox.scss               | 94 ++++++++++++++++++++---------
 src/utils/config.ts                 |  1 +
 4 files changed, 85 insertions(+), 40 deletions(-)

diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx
index c1e11bde..d5708445 100644
--- a/src/components/Inbox/DialogCard.tsx
+++ b/src/components/Inbox/DialogCard.tsx
@@ -1,8 +1,8 @@
 import './DialogCard.module.scss'
-import styles from './DialogCard.module.scss'
 import DialogAvatar from './DialogAvatar'
 import type { Author } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
+import styles from './DialogCard.module.scss'
 
 type Props = {
   online?: boolean
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index 1dc0e04c..2a9c6706 100644
--- a/src/components/Views/Inbox.tsx
+++ b/src/components/Views/Inbox.tsx
@@ -121,9 +121,14 @@ export const InboxView = () => {
       console.error('[post message error]:', error)
     }
   }
+
+  let formParent // autoresize ghost element
   const handleChangeMessage = (event) => {
     setPostMessageText(event.target.value)
   }
+  createEffect(() => {
+    formParent.dataset.replicatedValue = postMessageText()
+  })
 
   return (
     <div class="messages container">
@@ -197,15 +202,20 @@ export const InboxView = () => {
             </div>
           </div>
 
-          <div class="conversation__message-form">
-            <textarea
-              value={postMessageText()}
-              onInput={(event) => handleChangeMessage(event)}
-              placeholder="Написать сообщение"
-            />
-            <button type="submit" disabled={postMessageText().length === 0} onClick={handleSubmit}>
-              <Icon name="send-message" />
-            </button>
+          <div class="message-form">
+            <div class="wrapper">
+              <div class="grow-wrap" ref={formParent}>
+                <textarea
+                  value={postMessageText()}
+                  rows={1}
+                  onInput={(event) => handleChangeMessage(event)}
+                  placeholder="Написать сообщение"
+                />
+              </div>
+              <button type="submit" disabled={postMessageText().length === 0} onClick={handleSubmit}>
+                <Icon name="send-message" />
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/styles/Inbox.scss b/src/styles/Inbox.scss
index 581f29db..f51b6b87 100644
--- a/src/styles/Inbox.scss
+++ b/src/styles/Inbox.scss
@@ -161,43 +161,77 @@ body {
   position: relative;
 }
 
-.conversation__message-form {
-  border-top: 1px solid #141414;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 1em 1em 1em 0;
+.message-form {
+  background: #fff;
+  padding: 2px 0 12px 0;
 
-  textarea {
-    @include font-size(2rem);
+  > .wrapper {
+    border: 2px solid #cccccc;
+    border-radius: 16px;
+    padding: 4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
-    font-family: inherit;
-    height: 4.4em;
-    width: 100%;
-    padding: 1em;
-    margin-bottom: 0;
-    min-height: unset;
-  }
+    > .grow-wrap {
+      display: grid;
+      width: 100%;
 
-  button {
-    border: none;
-    cursor: pointer;
-    padding: 0 0 0 0.4em;
-    text-align: center;
-    width: 5.6rem;
+      &::after {
+        content: attr(data-replicated-value) ' ';
+        white-space: pre-wrap;
+        visibility: hidden;
+        transition: height 1.3s ease-in-out;
+      }
 
-    &:hover {
-      .icon {
-        opacity: 0.5;
+      & > textarea {
+        margin-bottom: 0;
+        font-family: inherit;
+        border: none;
+        resize: none;
+        overflow: hidden;
+
+        &:focus,
+        &:focus-visible,
+        &:active {
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }
+      }
+
+      &::after,
+      & > textarea {
+        /* Identical styling required!! */
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        padding: 8px;
+        grid-area: 1 / 1 / 2 / 2;
+        width: 100%;
       }
     }
 
-    .icon {
-      height: 50%;
-      margin: 0 auto;
-      opacity: 0.2;
-      transition: opacity 0.3s;
-      width: 50%;
+    > button {
+      border: none;
+      cursor: pointer;
+      text-align: center;
+      width: 20px;
+      height: 20px;
+      margin: auto 8px 8px 0;
+
+      &:hover {
+        .icon {
+          opacity: 0.5;
+        }
+      }
+
+      > .icon {
+        width: 100%;
+        height: 100%;
+        opacity: 0.2;
+        transition: opacity 0.3s;
+      }
     }
   }
 }
diff --git a/src/utils/config.ts b/src/utils/config.ts
index ab0ab70b..07d01c03 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,4 +1,5 @@
 export const isDev = import.meta.env.MODE === 'development'
 
+// export const apiBaseUrl = 'https://testapi.discours.io'
 export const apiBaseUrl = 'https://newapi.discours.io'
 // export const apiBaseUrl = 'http://localhost:8080'