Messagebox typing and buttons refactor

app/containers/MessageBox/LeftButtons.android.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { CancelEditingButton, ToggleEmojiButton } from './buttons';
+
+const LeftButtons = React.memo(({
+	showEmojiKeyboard, editing, editCancel, openEmoji, closeEmoji
+}) => {
+	if (editing) {
+		return <CancelEditingButton onPress={editCancel} />;
+	}
+	return (
+		<ToggleEmojiButton
+			show={showEmojiKeyboard}
+			open={openEmoji}
+			close={closeEmoji}
+		/>
+	);
+});
+
+LeftButtons.propTypes = {
+	showEmojiKeyboard: PropTypes.bool,
+	openEmoji: PropTypes.func.isRequired,
+	closeEmoji: PropTypes.func.isRequired,
+	editing: PropTypes.bool,
+	editCancel: PropTypes.func.isRequired
+};
+
+export default LeftButtons;

app/containers/MessageBox/LeftButtons.ios.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { CancelEditingButton, FileButton } from './buttons';
+
+const LeftButtons = React.memo(({
+	showFileActions, editing, editCancel
+}) => {
+	if (editing) {
+		return <CancelEditingButton onPress={editCancel} />;
+	}
+	return <FileButton onPress={showFileActions} />;
+});
+
+LeftButtons.propTypes = {
+	showFileActions: PropTypes.func.isRequired,
+	editing: PropTypes.bool,
+	editCancel: PropTypes.func.isRequired
+};
+
+export default LeftButtons;

app/containers/MessageBox/RightButtons.android.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { SendButton, AudioButton, FileButton } from './buttons';
+
+const RightButtons = React.memo(({
+	showSend, submit, recordAudioMessage, showFileActions
+}) => {
+	if (showSend) {
+		return <SendButton onPress={submit} />;
+	}
+	return (
+		<React.Fragment>
+			<AudioButton onPress={recordAudioMessage} />
+			<FileButton onPress={showFileActions} />
+		</React.Fragment>
+	);
+});
+
+RightButtons.propTypes = {
+	showSend: PropTypes.bool,
+	submit: PropTypes.func.isRequired,
+	recordAudioMessage: PropTypes.func.isRequired,
+	showFileActions: PropTypes.func.isRequired
+};
+
+export default RightButtons;

app/containers/MessageBox/RightButtons.ios.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { SendButton, AudioButton } from './buttons';
+
+const RightButtons = React.memo(({
+	showSend, submit, recordAudioMessage
+}) => {
+	if (showSend) {
+		return <SendButton onPress={submit} />;
+	}
+	return <AudioButton onPress={recordAudioMessage} />;
+});
+
+RightButtons.propTypes = {
+	showSend: PropTypes.bool,
+	submit: PropTypes.func.isRequired,
+	recordAudioMessage: PropTypes.func.isRequired
+};
+
+export default RightButtons;

app/containers/MessageBox/buttons/AudioButton.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import BaseButton from './BaseButton';
+
+const AudioButton = React.memo(({ onPress }) => (
+	<BaseButton
+		onPress={onPress}
+		testID='messagebox-send-audio'
+		accessibilityLabel='Send_audio_message'
+		icon='mic'
+	/>
+));
+
+AudioButton.propTypes = {
+	onPress: PropTypes.func.isRequired
+};
+
+export default AudioButton;

app/containers/MessageBox/buttons/BaseButton.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { BorderlessButton } from 'react-native-gesture-handler';
+import PropTypes from 'prop-types';
+
+import { COLOR_PRIMARY } from '../../../constants/colors';
+import { CustomIcon } from '../../../lib/Icons';
+import styles from '../styles';
+import I18n from '../../../i18n';
+
+const BaseButton = React.memo(({
+	onPress, testID, accessibilityLabel, icon
+}) => (
+	<BorderlessButton
+		onPress={onPress}
+		style={styles.actionButton}
+		testID={testID}
+		accessibilityLabel={I18n.t(accessibilityLabel)}
+		accessibilityTraits='button'
+	>
+		<CustomIcon name={icon} size={23} color={COLOR_PRIMARY} />
+	</BorderlessButton>
+));
+
+BaseButton.propTypes = {
+	onPress: PropTypes.func.isRequired,
+	testID: PropTypes.string.isRequired,
+	accessibilityLabel: PropTypes.string.isRequired,
+	icon: PropTypes.string.isRequired
+};
+
+export default BaseButton;

app/containers/MessageBox/buttons/CancelEditingButton.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import BaseButton from './BaseButton';
+
+const CancelEditingButton = React.memo(({ onPress }) => (
+	<BaseButton
+		onPress={onPress}
+		testID='messagebox-cancel-editing'
+		accessibilityLabel='Cancel_editing'
+		icon='cross'
+	/>
+));
+
+CancelEditingButton.propTypes = {
+	onPress: PropTypes.func.isRequired
+};
+
+export default CancelEditingButton;

app/containers/MessageBox/buttons/FileButton.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import BaseButton from './BaseButton';
+
+const FileButton = React.memo(({ onPress }) => (
+	<BaseButton
+		onPress={onPress}
+		testID='messagebox-actions'
+		accessibilityLabel='Message_actions'
+		icon='plus'
+	/>
+));
+
+FileButton.propTypes = {
+	onPress: PropTypes.func.isRequired
+};
+
+export default FileButton;

app/containers/MessageBox/buttons/SendButton.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import BaseButton from './BaseButton';
+
+const SendButton = React.memo(({ onPress }) => (
+	<BaseButton
+		onPress={onPress}
+		testID='messagebox-send-message'
+		accessibilityLabel='Send_message'
+		icon='send1'
+	/>
+));
+
+SendButton.propTypes = {
+	onPress: PropTypes.func.isRequired
+};
+
+export default SendButton;

app/containers/MessageBox/buttons/ToggleEmojiButton.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import BaseButton from './BaseButton';
+
+const ToggleEmojiButton = React.memo(({ show, open, close }) => {
+	if (show) {
+		return (
+			<BaseButton
+				onPress={close}
+				testID='messagebox-close-emoji'
+				accessibilityLabel='Close_emoji_selector'
+				icon='keyboard'
+			/>
+		);
+	}
+	return (
+		<BaseButton
+			onPress={open}
+			testID='messagebox-open-emoji'
+			accessibilityLabel='Open_emoji_selector'
+			icon='emoji'
+		/>
+	);
+});
+
+ToggleEmojiButton.propTypes = {
+	show: PropTypes.bool,
+	open: PropTypes.func.isRequired,
+	close: PropTypes.func.isRequired
+};
+
+export default ToggleEmojiButton;

app/containers/MessageBox/buttons/index.js

@@ -0,0 +1,13 @@
+import CancelEditingButton from './CancelEditingButton';
+import ToggleEmojiButton from './ToggleEmojiButton';
+import SendButton from './SendButton';
+import AudioButton from './AudioButton';
+import FileButton from './FileButton';
+
+export {
+	CancelEditingButton,
+	ToggleEmojiButton,
+	SendButton,
+	AudioButton,
+	FileButton
+};