Messagebox autogrow (#114)

* multiline messagebox

* Action buttons alignment

* lint

* Fix MessageBox height when line break to 2 lines

* Android fix
This commit is contained in:
Diego Mello 2017-11-28 14:27:06 -02:00 committed by Guilherme Gazzo
parent 43f1892570
commit 23d2d87bfb
1 changed files with 30 additions and 7 deletions

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { View, TextInput, StyleSheet, SafeAreaView } from 'react-native'; import { View, TextInput, StyleSheet, SafeAreaView, Platform } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons'; import Icon from 'react-native-vector-icons/MaterialIcons';
import ImagePicker from 'react-native-image-picker'; import ImagePicker from 'react-native-image-picker';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -22,14 +22,19 @@ const styles = StyleSheet.create({
}, },
textBoxInput: { textBoxInput: {
height: 40, height: 40,
alignSelf: 'stretch', minHeight: 40,
flexGrow: 1 maxHeight: 120,
flexGrow: 1,
paddingHorizontal: 10,
paddingTop: 12
}, },
actionButtons: { actionButtons: {
color: '#aaa', color: '#aaa',
paddingTop: 10, paddingTop: 10,
paddingBottom: 10, paddingBottom: 10,
fontSize: 20 paddingHorizontal: 8,
fontSize: 20,
alignSelf: 'flex-end'
}, },
editing: { editing: {
backgroundColor: '#fff5df' backgroundColor: '#fff5df'
@ -57,6 +62,13 @@ export default class MessageBox extends React.Component {
clearInput: PropTypes.func clearInput: PropTypes.func
} }
constructor(props) {
super(props);
this.state = {
height: 40
};
}
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (this.props.message !== nextProps.message && nextProps.message) { if (this.props.message !== nextProps.message && nextProps.message) {
this.component.setNativeProps({ text: nextProps.message.msg }); this.component.setNativeProps({ text: nextProps.message.msg });
@ -111,6 +123,10 @@ export default class MessageBox extends React.Component {
}); });
} }
updateSize = (height) => {
this.setState({ height: height + (Platform.OS === 'ios' ? 20 : 0) });
}
editCancel() { editCancel() {
this.props.editCancel(); this.props.editCancel();
this.component.setNativeProps({ text: '' }); this.component.setNativeProps({ text: '' });
@ -125,20 +141,27 @@ export default class MessageBox extends React.Component {
} }
render() { render() {
const { height } = this.state;
return ( return (
<View style={[styles.textBox, (this.props.editing ? styles.editing : null)]}> <View style={[styles.textBox, (this.props.editing ? styles.editing : null)]}>
<SafeAreaView style={styles.safeAreaView}> <SafeAreaView style={styles.safeAreaView}>
{this.renderLeftButton()} {this.renderLeftButton()}
<TextInput <TextInput
ref={component => this.component = component} ref={component => this.component = component}
style={styles.textBoxInput} style={[styles.textBoxInput, { height }]}
returnKeyType='send' returnKeyType='default'
onSubmitEditing={event => this.submit(event.nativeEvent.text)}
blurOnSubmit={false} blurOnSubmit={false}
placeholder='New message' placeholder='New message'
onChangeText={text => this.props.typing(text.length > 0)} onChangeText={text => this.props.typing(text.length > 0)}
underlineColorAndroid='transparent' underlineColorAndroid='transparent'
defaultValue='' defaultValue=''
multiline
onContentSizeChange={e => this.updateSize(e.nativeEvent.contentSize.height)}
/>
<Icon
style={styles.actionButtons}
name='send'
onPress={() => this.submit(this.component._lastNativeText)}
/> />
</SafeAreaView> </SafeAreaView>
</View> </View>