diff options
author | 2018-06-20 16:10:31 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | 2e461ef5ae03404cc9e5fb3eb676402e5aca668d (patch) | |
tree | 6a9dc663062755d5497b4713dd9c72a6182fd729 /vnext | |
parent | 1e744bd9e8f3df7e57dab281c0553f9ef7fb0598 (diff) |
lift new message up from MessageInput
Diffstat (limited to 'vnext')
-rw-r--r-- | vnext/src/components/MessageInput.js | 88 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 2 | ||||
-rw-r--r-- | vnext/src/style/main.css | 12 |
3 files changed, 80 insertions, 22 deletions
diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js index 15d36309..a276225b 100644 --- a/vnext/src/components/MessageInput.js +++ b/vnext/src/components/MessageInput.js @@ -1,32 +1,83 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { MessageType } from './Types'; +import Icon from './Icon'; + export default class MessageInput extends React.Component { constructor(props) { super(props) - this.resize = this.resize.bind(this); + this.textChanged = this.textChanged.bind(this); + this.attachmentChanged = this.attachmentChanged.bind(this); + this.openfile = this.openfile.bind(this); + + this.onSubmit = this.onSubmit.bind(this); + this.textarea = React.createRef(); + this.fileinput = React.createRef(); + this.state = { + isActive: false, + mid: this.props.data.mid, + rid: this.props.data.rid || 0, + body: '', + attach: '' + } } + + onSubmit(event) { + event.preventDefault(); + this.props.onSend({ + mid: this.state.mid, + rid: this.state.rid, + body: this.state.body, + attach: this.state.attach + }) + } + componentDidMount() { - this.resize() + this.textarea.current.focus() } - resize() { + textChanged(event) { + this.setState({ + body: event.target.value + }) const el = this.textarea.current; const offset = el.offsetHeight - el.clientHeight; const height = el.scrollHeight + offset; el.style.height = `${height + offset}px`; } + attachmentChanged(event) { + this.setState({ + attach: event.target.value + }) + } + openfile() { + const input = this.fileinput.current; + if (this.state.attach) { + this.setState({ + attach: '' + }) + } else { + input.click() + } + } render() { - const msg = this.props.data; return ( <form className="msg-comment-target"> - <input type="hidden" name="mid" value={msg.mid} /> <div className="msg-comment"> - <div className="ta-wrapper"> - <textarea name="body" onChange={this.resize} - ref={this.textarea} style={textInputStyle} - rows="3" placeholder="Write a comment..." /> + <div style={inputBarStyle}> + <div style={this.state.attach ? activeStyle : inactiveStyle} + onClick={this.openfile}> + <Icon name="ei-camera" size="s" /> + <input type="file" accept="image/jpg,image/png" onClick={e => e.stopPropagation()} + style={{ display: 'none' }} ref={this.fileinput} value={this.state.attach} + onChange={this.attachmentChanged} /> + </div> + <textarea name="body" onChange={this.textChanged} + ref={this.textarea} style={textInputStyle} value={this.state.value} + rows="1" placeholder="Write a comment..." /> + <button className="badge" onClick={this.onSubmit}>Send</button> </div> </div> </form> @@ -34,6 +85,22 @@ export default class MessageInput extends React.Component { } } +const inactiveStyle = { + cursor: 'pointer' +}; +const activeStyle = { + cursor: 'pointer', + color: 'green' +}; + +const inputBarStyle = { + border: '1px solid #DDD', + display: 'flex', + alignItems: 'center', + padding: '3px', + flexGrow: 1 +} + const textInputStyle = { overflow: 'hidden', resize: 'none', @@ -42,5 +109,6 @@ const textInputStyle = { } MessageInput.propTypes = { - data: MessageType + data: MessageType.isRequired, + onSend: PropTypes.func.isRequired };
\ No newline at end of file diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index 6830a821..96b7e093 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -61,7 +61,7 @@ export default class Thread extends React.Component { { this.loaded() ? ( <Message data={msg} visitor={this.props.visitor}> - <MessageInput data={msg} /> + <MessageInput data={msg} onSend={console.log} /> <Recommendations src={msg.recommendations} /> </Message> ) : ( diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index 4518ce93..a5b872eb 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -373,6 +373,7 @@ article .tags > a, background: #eee; border: 1px solid #eee; color: #888; + cursor: pointer; display: inline-block; font-size: 10pt; margin-bottom: 5px; @@ -445,11 +446,6 @@ article .tags > a, overflow: hidden; text-indent: 10px; } -.ta-wrapper { - border: 1px solid #DDD; - display: flex; - flex-grow: 1; -} .msg-comment { display: flex; width: 100%; @@ -466,12 +462,6 @@ article .tags > a, resize: vertical; vertical-align: top; } -.attach-photo { - cursor: pointer; -} -.attach-photo-active { - color: green; -} .msg-comment input { align-self: flex-start; background: #EEE; |