43 lines
1.0 KiB
JavaScript
43 lines
1.0 KiB
JavaScript
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
import { StyleSheet, Text, Keyboard } from 'react-native';
|
|
import { connect } from 'react-redux';
|
|
|
|
const styles = StyleSheet.create({
|
|
typing: {
|
|
|
|
transform: [{ scaleY: -1 }],
|
|
fontWeight: 'bold',
|
|
paddingHorizontal: 15,
|
|
height: 25
|
|
}
|
|
});
|
|
|
|
@connect(state => ({
|
|
username: state.login.user && state.login.user.username,
|
|
usersTyping: state.room.usersTyping
|
|
}))
|
|
|
|
export default class Typing extends React.Component {
|
|
shouldComponentUpdate(nextProps) {
|
|
return this.props.usersTyping.join() !== nextProps.usersTyping.join();
|
|
}
|
|
onPress = () => {
|
|
Keyboard.dismiss();
|
|
}
|
|
get usersTyping() {
|
|
const users = this.props.usersTyping.filter(_username => this.props.username !== _username);
|
|
return users.length ? `${ users.join(' ,') } ${ users.length > 1 ? 'are' : 'is' } typing` : '';
|
|
}
|
|
render() {
|
|
return (<Text style={styles.typing} onPress={() => this.onPress()}>{this.usersTyping}</Text>);
|
|
}
|
|
}
|
|
|
|
|
|
Typing.propTypes = {
|
|
username: PropTypes.string,
|
|
usersTyping: PropTypes.array
|
|
};
|