diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index c044001..031edd8 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -66,7 +66,6 @@ textarea {
color: var(--text-color);
background-color: var(--background-color);
box-sizing: border-box;
- height: 140px;
width: 90%;
border: 0px solid #666;
border-radius: 3px;
diff --git a/src/pages/chat.js b/src/pages/chat.js
index 5102d8f..a206645 100644
--- a/src/pages/chat.js
+++ b/src/pages/chat.js
@@ -122,6 +122,7 @@ export default class Chat extends React.Component {
this.connect(this.props.globalData.userId)
}
this.router = props.router
+ this.chatInputRef = React.createRef()
}
componentDidUpdate(prevProps, prevState) {
@@ -165,6 +166,13 @@ export default class Chat extends React.Component {
}
}
+ resizeInputBar() {
+ if (this.chatInputRef.current) {
+ const input = this.chatInputRef.current
+ input.style.height = input.scrollHeight + 'px'
+ }
+ }
+
scrollToChatBottom() {
const objDiv = document.getElementById('messages')
if (objDiv) {
@@ -263,6 +271,7 @@ export default class Chat extends React.Component {
}
sendMsg(currMsg, type) {
+ this.chatInputRef.current.style.height = '40px'
const { msgs, selectedUser, user } = this.state
if (!currMsg) {
return
@@ -389,10 +398,7 @@ export default class Chat extends React.Component {
uploadFile(file).then((res) => {
const { path, success } = res
if (success) {
- this.sendMsg(
- `${constants.apiUrl}${path}`,
- isImage ? 'img' : 'file'
- )
+ this.sendMsg(`${path}`, isImage ? 'img' : 'file')
} else {
alert('Error uploading image :/')
console.error(res)
@@ -411,12 +417,17 @@ export default class Chat extends React.Component {
📂
- {
+ this.resizeInputBar()
+ }}
onKeyUp={(e) => {
const lastMessage = msgs[selectedUser]
? msgs[selectedUser].lastMessage
@@ -429,8 +440,9 @@ export default class Chat extends React.Component {
this.chatMessageSeen(selectedUser)
}
if (e.key === 'Enter') {
- this.sendMsg(currMsg)
+ if (!e.shiftKey) this.sendMsg(currMsg)
}
+ this.resizeInputBar()
}}
onChange={(e) => {
this.setState({
@@ -534,13 +546,6 @@ export default class Chat extends React.Component {
renderMsg(message, key) {
const { msg, type } = message
- console.log(msg)
- console.log(
- linkifyString(msg, {
- defaultProtocol: 'https',
- target: '_blank',
- })
- )
if (type === 'text') {
return (
@@ -557,7 +562,7 @@ export default class Chat extends React.Component {
} else if (type === 'img') {
return (
-
+
)
} else if (type === 'file') {
@@ -565,7 +570,7 @@ export default class Chat extends React.Component {
diff --git a/src/pages/chat.module.css b/src/pages/chat.module.css
index 6e03067..e071f81 100644
--- a/src/pages/chat.module.css
+++ b/src/pages/chat.module.css
@@ -173,10 +173,12 @@
border-radius: 4px;
color: black;
max-width: 400px;
+ white-space: pre-wrap;
}
.sendButton {
width: 90px;
+ padding: 4px;
}
.home {
@@ -221,3 +223,9 @@
margin: 0px 5px;
cursor: pointer;
}
+
+.msgInput {
+ resize: vertical;
+ padding: 10px;
+ height: 40px;
+}