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; +}