From a30fa099e0481401b2d9d1fd789e911120415ed7 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 2 Aug 2023 18:09:03 +0200 Subject: [PATCH] Migrate to functional component + sign with gpg --- src/components/FormSubmit/index.js | 48 ++++++++++++------------------ 1 file changed, 19 insertions(+), 29 deletions(-) diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.js index 4ee6edb12820..d0850766ce6f 100644 --- a/src/components/FormSubmit/index.js +++ b/src/components/FormSubmit/index.js @@ -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; @@ -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. - - {this.props.children} - - ); - } + }; + + 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. + + {children} + + ); } FormSubmit.propTypes = formSubmitPropTypes.propTypes;