summaryrefslogtreecommitdiffstats
path: root/web/react/components/mention.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/mention.jsx')
-rw-r--r--web/react/components/mention.jsx61
1 files changed, 44 insertions, 17 deletions
diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 114dc183f..72a2a6251 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -1,30 +1,57 @@
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
-var UserStore = require("../stores/user_store.jsx");
+var UserStore = require('../stores/user_store.jsx');
-module.exports = React.createClass({
- handleClick: function() {
+export default class Mention extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.handleClick = this.handleClick.bind(this);
+
+ this.state = null;
+ }
+ handleClick() {
this.props.handleClick(this.props.username);
- },
- getInitialState: function() {
- return null;
- },
- render: function() {
- var self = this;
+ }
+ render() {
var icon;
var timestamp = UserStore.getCurrentUser().update_at;
- if (this.props.id === "allmention" || this.props.id === "channelmention") {
- icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
+ if (this.props.id === 'allmention' || this.props.id === 'channelmention') {
+ icon = <span><i className='mention-img fa fa-users fa-2x'></i></span>;
} else if (this.props.id != null) {
- icon = <span><img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image?time=" + timestamp}/></span>;
+ icon = (<span><img
+ className='mention-img'
+ src={'/api/v1/users/' + this.props.id + '/image?time=' + timestamp}
+ />
+ </span>);
} else {
- icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
+ icon = <span><i className='mention-img fa fa-users fa-2x'></i></span>;
}
return (
- <div className={"mentions-name " + this.props.isFocused} id={this.props.id + "_mentions"} onClick={this.handleClick} onMouseEnter={this.props.handleMouseEnter}>
- <div className="pull-left">{icon}</div>
- <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
+ <div
+ className={'mentions-name ' + this.props.isFocused}
+ id={this.props.id + '_mentions'}
+ onClick={this.handleClick}
+ onMouseEnter={this.props.handleMouseEnter}
+ >
+ <div className='pull-left'>{icon}</div>
+ <div className='pull-left mention-align'><span>@{this.props.username}</span><span className='mention-fullname'>{this.props.secondary_text}</span></div>
</div>
);
}
-});
+}
+
+Mention.defaultProps = {
+ username: '',
+ id: '',
+ isFocused: '',
+ secondary_text: ''
+};
+Mention.propTypes = {
+ handleClick: React.PropTypes.func.isRequired,
+ handleMouseEnter: React.PropTypes.func.isRequired,
+ username: React.PropTypes.string,
+ id: React.PropTypes.string,
+ isFocused: React.PropTypes.string,
+ secondary_text: React.PropTypes.string
+};