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')} />