diff options
Diffstat (limited to 'web/react/components/command_list.jsx')
-rw-r--r-- | web/react/components/command_list.jsx | 97 |
1 files changed, 66 insertions, 31 deletions
diff --git a/web/react/components/command_list.jsx b/web/react/components/command_list.jsx index 27264ff6e..63bd57c2a 100644 --- a/web/react/components/command_list.jsx +++ b/web/react/components/command_list.jsx @@ -3,25 +3,40 @@ var client = require('../utils/client.jsx'); -module.exports = React.createClass({ - getInitialState: function() { - return { suggestions: [ ], cmd: "" }; - }, - handleClick: function(i) { - this.props.addCommand(this.state.suggestions[i].suggestion) - this.setState({ suggestions: [ ], cmd: "" }); - }, - addFirstCommand: function() { - if (this.state.suggestions.length == 0) return; +export default class CommandList extends React.Component { + constructor(props) { + super(props); + + this.handleClick = this.handleClick.bind(this); + this.addFirstCommand = this.addFirstCommand.bind(this); + this.isEmpty = this.isEmpty.bind(this); + this.getSuggestedCommands = this.getSuggestedCommands.bind(this); + + this.state = { + suggestions: [ ], + cmd: '' + }; + } + + handleClick(i) { + this.props.addCommand(this.state.suggestions[i].suggestion); + this.setState({suggestions: [ ], cmd: ''}); + } + + addFirstCommand() { + if (this.state.suggestions.length === 0) { + return; + } this.handleClick(0); - }, - isEmpty: function() { - return this.state.suggestions.length == 0; - }, - getSuggestedCommands: function(cmd) { + } - if (!cmd || cmd.charAt(0) != '/') { - this.setState({ suggestions: [ ], cmd: "" }); + isEmpty() { + return this.state.suggestions.length === 0; + } + + getSuggestedCommands(cmd) { + if (!cmd || cmd.charAt(0) !== '/') { + this.setState({suggestions: [ ], cmd: ''}); return; } @@ -29,36 +44,56 @@ module.exports = React.createClass({ this.props.channelId, cmd, true, - function(data) { + function success(data) { if (data.suggestions.length === 1 && data.suggestions[0].suggestion === cmd) { data.suggestions = []; } - this.setState({ suggestions: data.suggestions, cmd: cmd }); + this.setState({suggestions: data.suggestions, cmd: cmd}); }.bind(this), - function(err){ - } + function fail() { + } ); - }, - render: function() { - if (this.state.suggestions.length == 0) return (<div/>); + } + + render() { + if (this.state.suggestions.length === 0) { + return (<div/>); + } var suggestions = []; for (var i = 0; i < this.state.suggestions.length; i++) { - if (this.state.suggestions[i].suggestion != this.state.cmd) { + if (this.state.suggestions[i].suggestion !== this.state.cmd) { suggestions.push( - <div key={i} className="command-name" onClick={this.handleClick.bind(this, i)}> - <div className="command__title"><strong>{ this.state.suggestions[i].suggestion }</strong></div> - <div className="command__desc">{ this.state.suggestions[i].description }</div> + <div + key={i} + className='command-name' + onClick={this.handleClick.bind(this, i)} + > + <div className='command__title'><strong>{this.state.suggestions[i].suggestion}</strong></div> + <div className='command__desc'>{this.state.suggestions[i].description}</div> </div> ); } } return ( - <div ref="mentionlist" className="command-box" style={{height:(this.state.suggestions.length*56)+2}}> - { suggestions } + <div + ref='mentionlist' + className='command-box' + style={{height: (this.state.suggestions.length * 56) + 2}} + > + {suggestions} </div> ); } -}); +} + +CommandList.defaultProps = { + channelId: null +}; + +CommandList.propTypes = { + addCommand: React.PropTypes.func, + channelId: React.PropTypes.string +};
\ No newline at end of file |