[Clipclops] Dynamic input height (#3778)

* input max height/scrollability

* remove unused imports

* add a web-specific version

* enter and shift enter for web

* missing onSubmit for native

* missing attributes

* improve layout of input on web

* use the correct text color in the input

* trim messages

* remove `onSubmit`

* move prop up

* trim message on web

* remove extra function call

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

1 files changed, 91 insertions, 0 deletions

diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/Conversation/MessageInput.web.tsx
new file mode 100644
index 000000000..ab57457d7
--- /dev/null
+++ b/src/screens/Messages/Conversation/MessageInput.web.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import {Pressable, StyleSheet, View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import TextareaAutosize from 'react-textarea-autosize'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+
+export function MessageInput({
+  onSendMessage,
+}: {
+  onSendMessage: (message: string) => void
+  onFocus: () => void
+  onBlur: () => void
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const [message, setMessage] = React.useState('')
+
+  const onSubmit = React.useCallback(() => {
+    if (message.trim() === '') {
+      return
+    }
+    onSendMessage(message.trimEnd())
+    setMessage('')
+  }, [message, onSendMessage])
+
+  const onKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter') {
+        if (e.shiftKey) return
+        e.preventDefault()
+        onSubmit()
+      }
+    },
+    [onSubmit],
+  )
+
+  const onChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setMessage(e.target.value)
+    },
+    [],
+  )
+
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.py_sm,
+        a.px_sm,
+        a.pl_md,
+        a.mt_sm,
+        t.atoms.bg_contrast_25,
+        {borderRadius: 23},
+      ]}>
+      <TextareaAutosize
+        style={StyleSheet.flatten([
+          a.flex_1,
+          a.px_sm,
+          a.border_0,
+          t.atoms.text,
+          {
+            backgroundColor: 'transparent',
+            resize: 'none',
+            paddingTop: 6,
+          },
+        ])}
+        maxRows={12}
+        placeholder={_(msg`Write a message`)}
+        defaultValue=""
+        value={message}
+        dirName="ltr"
+        autoFocus={true}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+      />
+      <Pressable
+        accessibilityRole="button"
+        style={[
+          a.rounded_full,
+          a.align_center,
+          a.justify_center,
+          {height: 30, width: 30, backgroundColor: t.palette.primary_500},
+        ]}>
+        <Text style={a.text_md}>🐴</Text>
+      </Pressable>
+    </View>
+  )
+}