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:
parent
43f1892570
commit
23d2d87bfb
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue