Skip to content

Commit

Permalink
Migrate to functional component + sign with gpg
Browse files Browse the repository at this point in the history
  • Loading branch information
blazejkustra committed Aug 2, 2023
1 parent f8bc305 commit a30fa09
Showing 1 changed file with 19 additions and 29 deletions.
48 changes: 19 additions & 29 deletions src/components/FormSubmit/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,12 @@ import * as formSubmitPropTypes from './formSubmitPropTypes';
import CONST from '../../CONST';
import isEnterWhileComposition from '../../libs/KeyboardShortcut/isEnterWhileComposition';

// This is a wrapper component to handle the ENTER key press, and submit the form.
class FormSubmit extends React.Component {
constructor(props) {
super(props);

this.submitForm = this.submitForm.bind(this);
}

function FormSubmit({innerRef, children, onSubmit, style}) {
/**
* Calls the submit callback when ENTER is pressed on a form element.
* @param {Object} event
*/

submitForm(event) {
const submitForm = (event) => {
// ENTER is pressed with modifier key or during text composition, do not submit the form
if (event.shiftKey || event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey || isEnterWhileComposition(event)) {
return;
Expand All @@ -28,36 +20,34 @@ class FormSubmit extends React.Component {

// ENTER is pressed on INPUT or SELECT element, call the submit callback.
if (tagName === 'INPUT' || tagName === 'SELECT') {
this.props.onSubmit();
onSubmit();
return;
}

// Pressing Enter on TEXTAREA element adds a new line. When `dataset.submitOnEnter` prop is passed, call the submit callback.
if (tagName === 'TEXTAREA' && lodashGet(event, 'target.dataset.submitOnEnter', 'false') === 'true') {
this.props.onSubmit();
onSubmit();
return;
}

// ENTER is pressed on checkbox element, call the submit callback.
if (lodashGet(event, 'target.role') === 'checkbox') {
this.props.onSubmit();
onSubmit();
}
}

render() {
return (
// React-native-web prevents event bubbling on TextInput for key presses
// https://github.com/necolas/react-native-web/blob/fa47f80d34ee6cde2536b2a2241e326f84b633c4/packages/react-native-web/src/exports/TextInput/index.js#L272
// Thus use capture phase.
<View
ref={this.props.innerRef}
onKeyDownCapture={this.submitForm}
style={this.props.style}
>
{this.props.children}
</View>
);
}
};

return (
// React-native-web prevents event bubbling on TextInput for key presses
// https://github.com/necolas/react-native-web/blob/fa47f80d34ee6cde2536b2a2241e326f84b633c4/packages/react-native-web/src/exports/TextInput/index.js#L272
// Thus use capture phase.
<View
ref={innerRef}
onKeyDownCapture={submitForm}
style={style}
>
{children}
</View>
);
}

FormSubmit.propTypes = formSubmitPropTypes.propTypes;
Expand Down

0 comments on commit a30fa09

Please sign in to comment.