diff options
author | 2018-06-28 13:28:02 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | 3c61705c062234adc954c8a42e3ea53ff1007bb6 (patch) | |
tree | 62660e83321b13963cdeb45e46cfa0a1203552a4 /vnext | |
parent | c3cd88c90cf3866324af4b12ab573a0392681c74 (diff) |
MessageInput in Post
Diffstat (limited to 'vnext')
-rw-r--r-- | vnext/src/components/Chat.js | 10 | ||||
-rw-r--r-- | vnext/src/components/MessageInput.js | 7 | ||||
-rw-r--r-- | vnext/src/components/Post.js | 30 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 4 |
4 files changed, 22 insertions, 29 deletions
diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js index c7a5c3ff..fa187f42 100644 --- a/vnext/src/components/Chat.js +++ b/vnext/src/components/Chat.js @@ -35,9 +35,9 @@ export default class Chat extends React.Component { onSend = (template) => { pm(template.to.uname, template.body) - .then(res => { - this.loadChat(this.props.match.params.user); - }).catch(console.log) + .then(res => { + this.loadChat(this.props.match.params.user); + }).catch(console.log) } render() { @@ -56,7 +56,9 @@ export default class Chat extends React.Component { ) } </ul> - <MessageInput data={{ mid: 0, timestamp: "0", to: { uname: uname } }} onSend={this.onSend} /> + <MessageInput data={{ mid: 0, timestamp: "0", to: { uname: uname } }} onSend={this.onSend}> + Reply... + </MessageInput> </div> ) : ( <div className="chatroom no-selection"><p>No chat selected</p></div> diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js index 21495dd7..52ad7bc6 100644 --- a/vnext/src/components/MessageInput.js +++ b/vnext/src/components/MessageInput.js @@ -84,7 +84,7 @@ export default class MessageInput extends React.Component { </div> <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter} ref={this.textarea} style={textInputStyle} value={this.state.value} - rows="1" placeholder="Write a comment..." /> + rows={this.props.rows || "1"} placeholder={this.props.children} /> <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s"/>Send</Button> </div> </div> @@ -105,7 +105,7 @@ const activeStyle = { const inputBarStyle = { border: '1px solid #ddd', display: 'flex', - alignItems: 'center', + alignItems: 'flex-start', padding: '3px', flexGrow: 1 } @@ -119,5 +119,6 @@ const textInputStyle = { MessageInput.propTypes = { data: MessageType.isRequired, - onSend: PropTypes.func.isRequired + onSend: PropTypes.func.isRequired, + rows: PropTypes.string };
\ No newline at end of file diff --git a/vnext/src/components/Post.js b/vnext/src/components/Post.js index 8dd8f37a..fd577603 100644 --- a/vnext/src/components/Post.js +++ b/vnext/src/components/Post.js @@ -1,6 +1,6 @@ import React from 'react'; -import Button from './Button'; +import MessageInput from './MessageInput'; import { post } from '../api'; @@ -8,17 +8,15 @@ export default class Post extends React.Component { constructor(props) { super(props) this.state = { - attach : '', + attach: '', body: '' } this.fileinput = React.createRef(); console.log(props) } - submit = (event) => { - if (event.preventDefault) event.preventDefault(); - const {attach, body} = this.state; - const input = this.fileinput.current; - post(body, attach ? input.files[0] : '') + postMessage = (template) => { + const { attach, body } = template; + post(body, attach) .then(response => { console.log(response) if (response.status === 200) { @@ -40,19 +38,11 @@ export default class Post extends React.Component { } render() { return ( - <article> - <form id="postmsg"> - <p style={{ textAlign: 'left' }}> - <b>Фото:</b> <span id="attachmentfile"> - <input style={{ width: '100%' }} type="file" name="attach" ref={this.fileinput} value={this.state.attach} onChange={this.attachChanged}/> <i>(JPG/PNG)</i></span> - </p> - <p> - <textarea name="body" value={this.state.body} onChange={this.bodyChanged} className="newmessage" rows="7" cols="10" placeholder="*weather It's very cold today!"></textarea> - <br/> - <Button className="subm" onClick={this.submit}>POST</Button> - </p> - </form> - </article> + <article> + <MessageInput rows="7" data={{ mid: 0, timestamp: "0" }} onSend={this.postMessage}> + *weather It's very cold today! + </MessageInput> + </article> ); } } diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index e9f08ccb..d25ca228 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -74,7 +74,7 @@ export default class Thread extends React.Component { { msg.mid ? ( <Message data={msg} visitor={this.props.visitor}> - {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment} />} + {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>} <Recommendations src={msg.recommendations} /> </Message> ) : ( @@ -126,7 +126,7 @@ export default class Thread extends React.Component { this.props.visitor.uid > 0 ? ( <React.Fragment> {this.state.active === msg.rid || <Button onClick={() => this.setActive(msg)}><Icon name="ei-envelope" size="s" />Reply</Button>} - {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment} />} + {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>} </React.Fragment> ) : ( <React.Fragment> |