Cancel edit button

app/containers/MessageBox.js

@@ -6,7 +6,7 @@ import ImagePicker from 'react-native-image-picker';
 import { connect } from 'react-redux';
 import { userTyping } from '../actions/room';
 import RocketChat from '../lib/rocketchat';
-import { editRequest, clearInput } from '../actions/messages';
+import { editRequest, editCancel, clearInput } from '../actions/messages';
 
 const styles = StyleSheet.create({
 	textBox: {
@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
 		alignSelf: 'stretch',
 		flexGrow: 1
 	},
-	fileButton: {
+	actionButtons: {
 		color: '#aaa',
 		paddingTop: 10,
 		paddingBottom: 10,
@@ -40,6 +40,7 @@ const styles = StyleSheet.create({
 	message: state.messages.message,
 	editing: state.messages.editing
 }), dispatch => ({
+	editCancel: () => dispatch(editCancel()),
 	editRequest: message => dispatch(editRequest(message)),
 	typing: status => dispatch(userTyping(status)),
 	clearInput: () => dispatch(clearInput())
@@ -48,6 +49,7 @@ export default class MessageBox extends React.Component {
 	static propTypes = {
 		onSubmit: PropTypes.func.isRequired,
 		rid: PropTypes.string.isRequired,
+		editCancel: PropTypes.func.isRequired,
 		editRequest: PropTypes.func.isRequired,
 		message: PropTypes.object,
 		editing: PropTypes.bool,
@@ -109,10 +111,24 @@ export default class MessageBox extends React.Component {
 		});
 	}
 
+	editCancel() {
+		this.props.editCancel();
+		this.component.setNativeProps({ text: '' });
+	}
+
+	renderLeftButton() {
+		const { editing } = this.props;
+		if (editing) {
+			return <Icon style={styles.actionButtons} name='close' onPress={() => this.editCancel()} />;
+		}
+		return <Icon style={styles.actionButtons} name='add-circle-outline' onPress={this.addFile} />;
+	}
+
 	render() {
 		return (
 			<View style={[styles.textBox, (this.props.editing ? styles.editing : null)]}>
 				<SafeAreaView style={styles.safeAreaView}>
+					{this.renderLeftButton()}
 					<TextInput
 						ref={component => this.component = component}
 						style={styles.textBoxInput}
@@ -124,7 +140,6 @@ export default class MessageBox extends React.Component {
 						underlineColorAndroid='transparent'
 						defaultValue=''
 					/>
-					<Icon style={styles.fileButton} name='add-circle-outline' onPress={this.addFile} />
 				</SafeAreaView>
 			</View>
 		);