diff options
author | Nick Frazier <nrflaw@gmail.com> | 2016-12-26 09:25:50 -0500 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-12-26 09:25:50 -0500 |
commit | 0a1b0d051a1a7d83ad01502f8073d35ee5da95cc (patch) | |
tree | 24901635fc7bc3bc78f45efd4a92d943ba2efc54 /webapp/components/textbox.jsx | |
parent | 87d84dfc30d30a24af35411bac7dafb188575749 (diff) | |
download | chat-0a1b0d051a1a7d83ad01502f8073d35ee5da95cc.tar.gz chat-0a1b0d051a1a7d83ad01502f8073d35ee5da95cc.tar.bz2 chat-0a1b0d051a1a7d83ad01502f8073d35ee5da95cc.zip |
Add error to RHS reply box for messages > 4000 chars, consistent with create post and edit post errors (#4871)
* functionality
* CSS updates
* cleanup
* moved message length checks to Textbox component
* cleanup
Diffstat (limited to 'webapp/components/textbox.jsx')
-rw-r--r-- | webapp/components/textbox.jsx | 34 |
1 files changed, 32 insertions, 2 deletions
diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx index b9b000282..1189a51d8 100644 --- a/webapp/components/textbox.jsx +++ b/webapp/components/textbox.jsx @@ -32,6 +32,7 @@ export default class Textbox extends React.Component { this.handleBlur = this.handleBlur.bind(this); this.handleHeightChange = this.handleHeightChange.bind(this); this.showPreview = this.showPreview.bind(this); + this.handleChange = this.handleChange.bind(this); this.state = { connection: '' @@ -51,6 +52,10 @@ export default class Textbox extends React.Component { ErrorStore.addChangeListener(this.onRecievedError); } + componentWillMount() { + this.checkMessageLength(this.props.value); + } + componentWillUnmount() { ErrorStore.removeChangeListener(this.onRecievedError); } @@ -65,6 +70,30 @@ export default class Textbox extends React.Component { } } + handleChange(e) { + this.checkMessageLength(e.target.value); + this.props.onChange(e); + } + + checkMessageLength(message) { + if (this.props.handlePostError) { + if (message.length > Constants.CHARACTER_LIMIT) { + const errorMessage = ( + <FormattedMessage + id='create_post.error_message' + defaultMessage='Your message is too long. Character count: {length}/{limit}' + values={{ + length: message.length, + limit: Constants.CHARACTER_LIMIT + }} + />); + this.props.handlePostError(errorMessage); + } else { + this.props.handlePostError(null); + } + } + } + handleKeyPress(e) { this.props.onKeyPress(e); } @@ -206,7 +235,7 @@ export default class Textbox extends React.Component { type='textarea' spellCheck='true' placeholder={this.props.createMessage} - onChange={this.props.onChange} + onChange={this.handleChange} onKeyPress={this.handleKeyPress} onKeyDown={this.handleKeyDown} onBlur={this.handleBlur} @@ -257,5 +286,6 @@ Textbox.propTypes = { createMessage: React.PropTypes.string.isRequired, onKeyDown: React.PropTypes.func, onBlur: React.PropTypes.func, - supportsCommands: React.PropTypes.bool.isRequired + supportsCommands: React.PropTypes.bool.isRequired, + handlePostError: React.PropTypes.func }; |