diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index b9fd1a2068aa..dfd81620d98a 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -130,6 +130,7 @@ class AttachmentModal extends PureComponent {
textStyles={[styles.buttonConfirmText]}
text={this.props.translate('common.send')}
onPress={this.submitAndClose}
+ pressOnEnter
/>
)}
diff --git a/src/components/Button.js b/src/components/Button.js
index 8a07e157155a..be1f13ac5131 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,13 +1,12 @@
import _ from 'underscore';
-import React from 'react';
+import React, {Component} from 'react';
+import {Pressable, ActivityIndicator} from 'react-native';
import PropTypes from 'prop-types';
-import {
- Pressable, ActivityIndicator,
-} from 'react-native';
import styles from '../styles/styles';
import themeColors from '../styles/themes/default';
import OpacityView from './OpacityView';
import Text from './Text';
+import KeyboardShortcut from '../libs/KeyboardShortcut';
const propTypes = {
/** The text for the button label */
@@ -28,6 +27,9 @@ const propTypes = {
/** A function that is called when the button is clicked on */
onPress: PropTypes.func,
+ /** Call the onPress function when Enter key is pressed */
+ pressOnEnter: PropTypes.bool,
+
/** Additional styles to add after local styles */
style: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.object),
@@ -60,6 +62,7 @@ const defaultProps = {
small: false,
large: false,
onPress: () => {},
+ pressOnEnter: false,
style: [],
textStyles: [],
success: false,
@@ -69,16 +72,42 @@ const defaultProps = {
shouldRemoveLeftBorderRadius: false,
};
-const Button = (props) => {
- const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
+class Button extends Component {
+ constructor(props) {
+ super(props);
+ this.additionalStyles = _.isArray(this.props.style) ? this.props.style : [this.props.style];
+
+ this.renderContent = this.renderContent.bind(this);
+ }
+
+ componentDidMount() {
+ if (!this.props.pressOnEnter) {
+ return;
+ }
+
+ // Setup and attach keypress handler for pressing the button with Enter key
+ this.unsubscribe = KeyboardShortcut.subscribe('Enter', () => {
+ if (!this.props.isDisabled && !this.props.isLoading) {
+ this.props.onPress();
+ }
+ }, [], true);
+ }
- function renderContent() {
- const {ContentComponent} = props;
+ componentWillUnmount() {
+ // Cleanup event listeners
+ if (!this.unsubscribe) {
+ return;
+ }
+ this.unsubscribe();
+ }
+
+ renderContent() {
+ const {ContentComponent} = this.props;
if (ContentComponent) {
return ;
}
- return props.isLoading
+ return this.props.isLoading
? (
) : (
@@ -86,50 +115,52 @@ const Button = (props) => {
selectable={false}
style={[
styles.buttonText,
- props.small && styles.buttonSmallText,
- props.large && styles.buttonLargeText,
- props.success && styles.buttonSuccessText,
- props.danger && styles.buttonDangerText,
- ...props.textStyles,
+ this.props.small && styles.buttonSmallText,
+ this.props.large && styles.buttonLargeText,
+ this.props.success && styles.buttonSuccessText,
+ this.props.danger && styles.buttonDangerText,
+ ...this.props.textStyles,
]}
>
- {props.text}
+ {this.props.text}
);
}
- return (
-
- {({pressed, hovered}) => (
-
- {renderContent()}
-
- )}
-
- );
-};
+ render() {
+ return (
+
+ {({pressed, hovered}) => (
+
+ {this.renderContent()}
+
+ )}
+
+ );
+ }
+}
Button.propTypes = propTypes;
Button.defaultProps = defaultProps;
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
index c7529f974c86..8ddd05768696 100755
--- a/src/components/ConfirmModal.js
+++ b/src/components/ConfirmModal.js
@@ -71,6 +71,7 @@ const ConfirmModal = props => (
danger={props.danger}
style={[styles.mt4]}
onPress={props.onConfirm}
+ pressOnEnter
text={props.confirmText || props.translate('common.yes')}
/>