81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||
|
|
import lodash from 'lodash';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import Flux from '../lib/flux';
|
||
|
|
import WindowStore from '../stores/WindowStore';
|
||
|
|
import SelectedGuildStore from '../stores/SelectedGuildStore';
|
||
|
|
import NicknameUtils from '../utils/NicknameUtils';
|
||
|
|
import ChannelRecord from '../records/ChannelRecord';
|
||
|
|
import UserStore from '../stores/UserStore';
|
||
|
|
import TypingStore from '../stores/TypingStore';
|
||
|
|
import RelationshipStore from '../stores/RelationshipStore';
|
||
|
|
import i18n from '../i18n';
|
||
|
|
import Spinner from './common/Spinner';
|
||
|
|
import '../styles/typing.styl';
|
||
|
|
|
||
|
|
const TypingUsers = React.createClass({
|
||
|
|
mixins: [Flux.StoreListenerMixin(TypingStore, WindowStore, SelectedGuildStore), PureRenderMixin],
|
||
|
|
|
||
|
|
propTypes: {
|
||
|
|
channel: React.PropTypes.instanceOf(ChannelRecord),
|
||
|
|
},
|
||
|
|
|
||
|
|
getStateFromStores() {
|
||
|
|
return {
|
||
|
|
typingUsers: TypingStore.getTypingUsers(this.props.channel.id),
|
||
|
|
isFocused: WindowStore.isFocused(),
|
||
|
|
guildId: SelectedGuildStore.getGuildId(),
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
componentWillReceiveProps(nextProps) {
|
||
|
|
this.setState({
|
||
|
|
typingUsers: TypingStore.getTypingUsers(nextProps.channel.id),
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {guildId} = this.state;
|
||
|
|
const currentUser = UserStore.getCurrentUser();
|
||
|
|
const typingUsers = lodash(this.state.typingUsers)
|
||
|
|
.keys()
|
||
|
|
.filter(uid => uid != currentUser.id)
|
||
|
|
.reject(RelationshipStore.isBlocked)
|
||
|
|
.map(uid => UserStore.getUser(uid))
|
||
|
|
.filter(user => user != null)
|
||
|
|
.map(user => NicknameUtils.getName(guildId, this.props.channel.id, user))
|
||
|
|
.value();
|
||
|
|
|
||
|
|
if (typingUsers.length == 0) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
const [a, b, c] = typingUsers;
|
||
|
|
|
||
|
|
let typingText;
|
||
|
|
if (typingUsers.length === 1) {
|
||
|
|
typingText = i18n.Messages.ONE_USER_TYPING.format({a});
|
||
|
|
} else if (typingUsers.length === 2) {
|
||
|
|
typingText = i18n.Messages.TWO_USERS_TYPING.format({a, b});
|
||
|
|
} else if (typingUsers.length === 3) {
|
||
|
|
typingText = i18n.Messages.THREE_USERS_TYPING.format({a, b, c});
|
||
|
|
} else {
|
||
|
|
typingText = i18n.Messages.SEVERAL_USERS_TYPING;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={classNames('typing', {'stop-animation': !this.state.isFocused})}>
|
||
|
|
<Spinner type="pulsing-ellipsis" className="ellipsis" />
|
||
|
|
<span className="text">{typingText}</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default TypingUsers;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// WEBPACK FOOTER //
|
||
|
|
// ./discord_app/components/TypingUsers.js
|