From 8666d97bc316b97e28460eb9314512b2a056eb62 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 8 Sep 2022 21:47:16 +0530 Subject: [PATCH 01/29] composer - move setNativeProps to state --- src/pages/home/report/ReportActionCompose.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 61369be57010..43a49bf8338d 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -311,9 +311,6 @@ class ReportActionCompose extends React.Component { addEmojiToTextBox(emoji) { const newComment = this.comment.slice(0, this.state.selection.start) + emoji + this.comment.slice(this.state.selection.end, this.comment.length); - this.textInput.setNativeProps({ - text: newComment, - }); this.setState(prevState => ({ selection: { start: prevState.selection.start + emoji.length, @@ -372,9 +369,9 @@ class ReportActionCompose extends React.Component { * @param {String} newComment */ updateComment(newComment) { - this.textInput.setNativeProps({text: newComment}); this.setState({ isCommentEmpty: !!newComment.match(/^(\s|`)*$/), + value: newComment, }); // Indicate that draft has been created. @@ -627,7 +624,6 @@ class ReportActionCompose extends React.Component { this.setState({isDraggingOver: false}); }} style={[styles.textInputCompose, this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4]} - defaultValue={this.props.comment} maxLines={this.state.maxLines} onFocus={() => this.setIsFocused(true)} onBlur={() => this.setIsFocused(false)} @@ -640,6 +636,7 @@ class ReportActionCompose extends React.Component { isFullComposerAvailable={this.state.isFullComposerAvailable} setIsFullComposerAvailable={this.setIsFullComposerAvailable} isComposerFullSize={this.props.isComposerFullSize} + value={this.state.value} /> From ecabcfc508a3b169189d5b856ff37827b11e89aa Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 8 Sep 2022 21:55:01 +0530 Subject: [PATCH 02/29] reportEdit - remove setNativeProps --- src/pages/home/report/ReportActionItemMessageEdit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index d3cb3ae0a3fc..8c844c50b516 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -97,7 +97,6 @@ class ReportActionItemMessageEdit extends React.Component { * @param {String} newDraft */ updateDraft(newDraft) { - this.textInput.setNativeProps({text: newDraft}); this.setState({draft: newDraft}); // This component is rendered only when draft is set to a non-empty string. In order to prevent component From 1295ebb3277e1b1078de5da6feeb4a4b5f57a6dd Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 8 Sep 2022 22:33:03 +0530 Subject: [PATCH 03/29] SigninPageForm - remove setNativeProps --- src/components/SignInPageForm/index.js | 28 ------------------- src/components/SignInPageForm/index.native.js | 8 ------ .../SignInPageLayout/SignInPageContent.js | 6 ++-- 3 files changed, 3 insertions(+), 39 deletions(-) delete mode 100644 src/components/SignInPageForm/index.js delete mode 100644 src/components/SignInPageForm/index.native.js diff --git a/src/components/SignInPageForm/index.js b/src/components/SignInPageForm/index.js deleted file mode 100644 index 4ee95d1cb81e..000000000000 --- a/src/components/SignInPageForm/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import FormElement from '../FormElement'; - -class Form extends React.Component { - componentDidMount() { - if (!this.form) { - return; - } - - // Password Managers need these attributes to be able to identify the form elements properly. - this.form.setNativeProps({ - method: 'post', - action: '/', - }); - } - - render() { - return ( - this.form = el} - // eslint-disable-next-line react/jsx-props-no-spreading - {...this.props} - /> - ); - } -} - -export default Form; diff --git a/src/components/SignInPageForm/index.native.js b/src/components/SignInPageForm/index.native.js deleted file mode 100644 index d09e60c1b98d..000000000000 --- a/src/components/SignInPageForm/index.native.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import FormElement from '../FormElement'; - -// eslint-disable-next-line react/jsx-props-no-spreading -const Form = props => ; - -Form.displayName = 'Form'; -export default Form; diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 56776909fe6f..90f665bbdc79 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -9,7 +9,7 @@ import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; import Text from '../../../components/Text'; import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import SignInPageForm from '../../../components/SignInPageForm'; +import FormElement from '../../../components/FormElement'; import compose from '../../../libs/compose'; import scrollViewContentContainerStyles from './signInPageStyles'; import LoginKeyboardAvoidingView from './LoginKeyboardAvoidingView'; @@ -52,7 +52,7 @@ const SignInPageContent = props => ( styles.signInPageNarrowContentContainer, ]} > - ( )} {props.children} - + From 27020f5799ad25c03472e7326f06da64b7e5ad95 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 8 Sep 2022 23:18:50 +0530 Subject: [PATCH 04/29] TextInput - replace setNativeProps with setAttribute --- src/components/TextInput/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js index 744eedaecbf4..4cbed48ce314 100644 --- a/src/components/TextInput/index.js +++ b/src/components/TextInput/index.js @@ -7,11 +7,11 @@ import * as baseTextInputPropTypes from './baseTextInputPropTypes'; class TextInput extends React.Component { componentDidMount() { if (this.props.disableKeyboard) { - this.textInput.setNativeProps({inputmode: 'none'}); + this.textInput.setAttribute('inputmode', 'none'); } if (this.props.name) { - this.textInput.setNativeProps({name: this.props.name}); + this.textInput.setAttribute('name', this.props.name); } } From 72bbc0bf75f551514186e79e0eb7ae1bc3790511 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 8 Sep 2022 23:19:23 +0530 Subject: [PATCH 05/29] Revert "SigninPageForm - remove setNativeProps" This reverts commit 1295ebb3277e1b1078de5da6feeb4a4b5f57a6dd. --- src/components/SignInPageForm/index.js | 28 +++++++++++++++++++ src/components/SignInPageForm/index.native.js | 8 ++++++ .../SignInPageLayout/SignInPageContent.js | 6 ++-- 3 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 src/components/SignInPageForm/index.js create mode 100644 src/components/SignInPageForm/index.native.js diff --git a/src/components/SignInPageForm/index.js b/src/components/SignInPageForm/index.js new file mode 100644 index 000000000000..4ee95d1cb81e --- /dev/null +++ b/src/components/SignInPageForm/index.js @@ -0,0 +1,28 @@ +import React from 'react'; +import FormElement from '../FormElement'; + +class Form extends React.Component { + componentDidMount() { + if (!this.form) { + return; + } + + // Password Managers need these attributes to be able to identify the form elements properly. + this.form.setNativeProps({ + method: 'post', + action: '/', + }); + } + + render() { + return ( + this.form = el} + // eslint-disable-next-line react/jsx-props-no-spreading + {...this.props} + /> + ); + } +} + +export default Form; diff --git a/src/components/SignInPageForm/index.native.js b/src/components/SignInPageForm/index.native.js new file mode 100644 index 000000000000..d09e60c1b98d --- /dev/null +++ b/src/components/SignInPageForm/index.native.js @@ -0,0 +1,8 @@ +import React from 'react'; +import FormElement from '../FormElement'; + +// eslint-disable-next-line react/jsx-props-no-spreading +const Form = props => ; + +Form.displayName = 'Form'; +export default Form; diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 90f665bbdc79..56776909fe6f 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -9,7 +9,7 @@ import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; import Text from '../../../components/Text'; import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import FormElement from '../../../components/FormElement'; +import SignInPageForm from '../../../components/SignInPageForm'; import compose from '../../../libs/compose'; import scrollViewContentContainerStyles from './signInPageStyles'; import LoginKeyboardAvoidingView from './LoginKeyboardAvoidingView'; @@ -52,7 +52,7 @@ const SignInPageContent = props => ( styles.signInPageNarrowContentContainer, ]} > - ( )} {props.children} - + From ddfabdfadfe4b02e6380c60c06aebb5c28c23680 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 8 Sep 2022 23:20:35 +0530 Subject: [PATCH 06/29] SignInPageForm - replace setNativeProps with setAttribute --- src/components/SignInPageForm/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SignInPageForm/index.js b/src/components/SignInPageForm/index.js index 4ee95d1cb81e..d158d6d8f7ed 100644 --- a/src/components/SignInPageForm/index.js +++ b/src/components/SignInPageForm/index.js @@ -8,7 +8,7 @@ class Form extends React.Component { } // Password Managers need these attributes to be able to identify the form elements properly. - this.form.setNativeProps({ + this.form.setAttribute({ method: 'post', action: '/', }); From 12fa9355eb903bc87b0f8656728530cac61b4453 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 8 Sep 2022 23:24:15 +0530 Subject: [PATCH 07/29] TextInputLabel - replace setNativeProps with setAttribute --- src/components/TextInput/TextInputLabel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextInput/TextInputLabel/index.js b/src/components/TextInput/TextInputLabel/index.js index b6f8ca998614..f47460b10f98 100644 --- a/src/components/TextInput/TextInputLabel/index.js +++ b/src/components/TextInput/TextInputLabel/index.js @@ -8,7 +8,7 @@ class TextInputLabel extends PureComponent { if (!this.props.for) { return; } - this.label.setNativeProps({for: this.props.for}); + this.label.setAttribute({for: this.props.for}); } render() { From e45288eac36bf0e882810b7ca853779e564a9d28 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 8 Sep 2022 23:43:00 +0530 Subject: [PATCH 08/29] BaseOptionsSelector - move setNativeProps to state --- src/components/OptionsSelector/BaseOptionsSelector.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 35b491ffc885..b9fa5605a897 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -45,6 +45,10 @@ class BaseOptionsSelector extends Component { this.state = { allOptions, focusedIndex: this.props.shouldTextInputAppearBelowOptions ? allOptions.length : 0, + selection: { + start: this.props.value.length, + end: this.props.value.length, + }, }; } @@ -200,7 +204,7 @@ class BaseOptionsSelector extends Component { selectRow(option, ref) { if (this.props.shouldFocusOnSelectRow) { // Input is permanently focused on native platforms, so we always highlight the text inside of it - this.textInput.setNativeProps({selection: {start: 0, end: this.props.value.length}}); + this.setState({selection: {start: 0, end: this.props.value.length}}); if (this.relatedTarget && ref === findNodeHandle(this.relatedTarget)) { this.textInput.focus(); } @@ -231,9 +235,6 @@ class BaseOptionsSelector extends Component { value={this.props.value} label={this.props.textInputLabel} onChangeText={(text) => { - if (this.props.shouldFocusOnSelectRow) { - this.textInput.setNativeProps({selection: null}); - } this.props.onChangeText(text); }} placeholder={this.props.placeholderText || this.props.translate('optionsSelector.nameEmailOrPhoneNumber')} @@ -245,6 +246,8 @@ class BaseOptionsSelector extends Component { }} selectTextOnFocus blurOnSubmit={Boolean(this.state.allOptions.length)} + selection={this.state.selection} + onSelectionChange={e => this.setState({selection: e.nativeEvent.selection})} /> ); const optionsList = this.props.shouldShowOptions ? ( From e2b07d2f362fe198f74e1aad9d0ad73f7c69d737 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 9 Sep 2022 01:11:49 +0530 Subject: [PATCH 09/29] Form - move inputValues to state to remove setNativeProps --- src/components/Form.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index f42101700862..ba565cd382d3 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -57,10 +57,10 @@ class Form extends React.Component { this.state = { errors: {}, + inputValues: {} }; this.inputRefs = {}; - this.inputValues = {}; this.touchedInputs = {}; this.setTouchedInput = this.setTouchedInput.bind(this); @@ -87,12 +87,12 @@ class Form extends React.Component { )); // Validate form and return early if any errors are found - if (!_.isEmpty(this.validate(this.inputValues))) { + if (!_.isEmpty(this.validate(this.state.inputValues))) { return; } // Call submit handler - this.props.onSubmit(this.inputValues); + this.props.onSubmit(this.state.inputValues); } /** @@ -145,8 +145,8 @@ class Form extends React.Component { const defaultValue = this.props.draftValues[inputID] || child.props.defaultValue; // We want to initialize the input value if it's undefined - if (_.isUndefined(this.inputValues[inputID])) { - this.inputValues[inputID] = defaultValue; + if (_.isUndefined(this.state.inputValues[inputID])) { + this.state.inputValues[inputID] = defaultValue; } return React.cloneElement(child, { @@ -155,26 +155,27 @@ class Form extends React.Component { errorText: this.state.errors[inputID] || '', onBlur: () => { this.setTouchedInput(inputID); - this.validate(this.inputValues); + this.validate(this.state.inputValues); }, onInputChange: (value, key) => { const inputKey = key || inputID; - this.inputValues[inputKey] = value; - const inputRef = this.inputRefs[inputKey]; - - if (key && inputRef && _.isFunction(inputRef.setNativeProps)) { - inputRef.setNativeProps({value}); - } + this.setState(prevState => ({ + inputValues : { + ...prevState.inputValues, + [inputKey] : value, + }, + })); if (child.props.shouldSaveDraft) { FormActions.setDraftValues(this.props.formID, {[inputKey]: value}); } - this.validate(this.inputValues); + this.validate(this.state.inputValues); }, }); }); } render() { + console.log(this.state.inputValues); return ( <> Date: Fri, 9 Sep 2022 01:52:18 +0530 Subject: [PATCH 10/29] InvertedFlatList - remove setNativeProps, pass style as a prop instead. --- src/components/InvertedFlatList/index.js | 17 +++++++---------- src/styles/styles.js | 4 ++++ 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js index b92b27bd3449..1847bb8dfbd9 100644 --- a/src/components/InvertedFlatList/index.js +++ b/src/components/InvertedFlatList/index.js @@ -36,17 +36,13 @@ class InvertedFlatList extends React.Component { this.props.innerRef(this.list); } - if (this.list) { - this.list - .getScrollableNode() - .addEventListener('wheel', this.invertedWheelEvent); - - this.list.setNativeProps({ - style: { - transform: 'translate3d(0,0,0) scaleY(-1)', - }, - }); + if (_.isUndefined(this.list)) { + return; } + + this.list + .getScrollableNode() + .addEventListener('wheel', this.invertedWheelEvent); } componentWillUnmount() { @@ -67,6 +63,7 @@ class InvertedFlatList extends React.Component { ref={el => this.list = el} shouldMeasureItems contentContainerStyle={StyleSheet.compose(this.props.contentContainerStyle, styles.justifyContentEnd)} + style={styles.translate0InvertY} /> ); } diff --git a/src/styles/styles.js b/src/styles/styles.js index 467a5609a4bf..65bd0cfc3f1a 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2671,6 +2671,10 @@ const styles = { fontFamily: fontFamily.GTA, marginLeft: 6, }, + + translate0InvertY: { + transform: 'translate3d(0,0,0) scaleY(-1)', + }, }; export default styles; From 4c90e344878aa81f08b4f87bf5a71da47dd401b9 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 9 Sep 2022 02:01:33 +0530 Subject: [PATCH 11/29] Make Picker controlled only and remove setNativeProps --- src/components/Picker/BasePicker/index.js | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/src/components/Picker/BasePicker/index.js b/src/components/Picker/BasePicker/index.js index eb3021ab54a9..5678a8dcc765 100644 --- a/src/components/Picker/BasePicker/index.js +++ b/src/components/Picker/BasePicker/index.js @@ -14,17 +14,6 @@ class BasePicker extends React.Component { this.updateSelectedValueAndExecuteOnChange = this.updateSelectedValueAndExecuteOnChange.bind(this); this.executeOnCloseAndOnBlur = this.executeOnCloseAndOnBlur.bind(this); - this.setNativeProps = this.setNativeProps.bind(this); - } - - /** - * This method mimicks RN's setNativeProps method. It's exposed to Picker's ref and can be used by other components - * to directly manipulate Picker's value when Picker is used as an uncontrolled input. - * - * @param {*} value - */ - setNativeProps({value}) { - this.pickerValue = value; } updateSelectedValueAndExecuteOnChange(value) { @@ -57,16 +46,6 @@ class BasePicker extends React.Component { onFocus: this.props.onOpen, onBlur: this.executeOnCloseAndOnBlur, }} - ref={(node) => { - if (!node || !_.isFunction(this.props.innerRef)) { - return; - } - - this.props.innerRef(node); - - // eslint-disable-next-line no-param-reassign - node.setNativeProps = this.setNativeProps; - }} /> ); } From 1bfc4e21001c9d7cbce6ae31c4cb11e0a749a7b7 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 9 Sep 2022 02:26:53 +0530 Subject: [PATCH 12/29] fix picker state --- src/components/Picker/BasePicker/index.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Picker/BasePicker/index.js b/src/components/Picker/BasePicker/index.js index 5678a8dcc765..bdd5def02ec3 100644 --- a/src/components/Picker/BasePicker/index.js +++ b/src/components/Picker/BasePicker/index.js @@ -10,7 +10,9 @@ class BasePicker extends React.Component { constructor(props) { super(props); - this.pickerValue = this.props.defaultValue; + this.state = { + selectedValue: this.props.defaultValue, + }; this.updateSelectedValueAndExecuteOnChange = this.updateSelectedValueAndExecuteOnChange.bind(this); this.executeOnCloseAndOnBlur = this.executeOnCloseAndOnBlur.bind(this); @@ -18,7 +20,7 @@ class BasePicker extends React.Component { updateSelectedValueAndExecuteOnChange(value) { this.props.onInputChange(value); - this.pickerValue = value; + this.setState({selectedValue: value}); } executeOnCloseAndOnBlur() { @@ -36,7 +38,7 @@ class BasePicker extends React.Component { style={this.props.size === 'normal' ? basePickerStyles(this.props.disabled, hasError, this.props.focused) : styles.pickerSmall} useNativeAndroidPickerStyle={false} placeholder={this.props.placeholder} - value={this.props.value || this.pickerValue} + value={this.props.value || this.state.selectedValue} Icon={() => this.props.icon(this.props.size)} disabled={this.props.disabled} fixAndroidTouchableBug @@ -45,6 +47,7 @@ class BasePicker extends React.Component { pickerProps={{ onFocus: this.props.onOpen, onBlur: this.executeOnCloseAndOnBlur, + ref: this.props.innerRef, }} /> ); From b77ab391084d0807fa71f8ce32c3a9e25b4afa73 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sat, 10 Sep 2022 15:11:04 +0530 Subject: [PATCH 13/29] Revert "Make Picker controlled only and remove setNativeProps" This reverts commit 4c90e344878aa81f08b4f87bf5a71da47dd401b9. --- src/components/Picker/BasePicker/index.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/components/Picker/BasePicker/index.js b/src/components/Picker/BasePicker/index.js index bdd5def02ec3..2f38dfbcfeed 100644 --- a/src/components/Picker/BasePicker/index.js +++ b/src/components/Picker/BasePicker/index.js @@ -16,6 +16,17 @@ class BasePicker extends React.Component { this.updateSelectedValueAndExecuteOnChange = this.updateSelectedValueAndExecuteOnChange.bind(this); this.executeOnCloseAndOnBlur = this.executeOnCloseAndOnBlur.bind(this); + this.setNativeProps = this.setNativeProps.bind(this); + } + + /** + * This method mimicks RN's setNativeProps method. It's exposed to Picker's ref and can be used by other components + * to directly manipulate Picker's value when Picker is used as an uncontrolled input. + * + * @param {*} value + */ + setNativeProps({value}) { + this.pickerValue = value; } updateSelectedValueAndExecuteOnChange(value) { @@ -49,6 +60,16 @@ class BasePicker extends React.Component { onBlur: this.executeOnCloseAndOnBlur, ref: this.props.innerRef, }} + ref={(node) => { + if (!node || !_.isFunction(this.props.innerRef)) { + return; + } + + this.props.innerRef(node); + + // eslint-disable-next-line no-param-reassign + node.setNativeProps = this.setNativeProps; + }} /> ); } From 3298fa7e8d089c830a787255e7e28752533d0964 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sat, 10 Sep 2022 15:11:35 +0530 Subject: [PATCH 14/29] Revert "fix picker state" This reverts commit 1bfc4e21001c9d7cbce6ae31c4cb11e0a749a7b7. --- src/components/Picker/BasePicker/index.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/Picker/BasePicker/index.js b/src/components/Picker/BasePicker/index.js index 2f38dfbcfeed..eb3021ab54a9 100644 --- a/src/components/Picker/BasePicker/index.js +++ b/src/components/Picker/BasePicker/index.js @@ -10,9 +10,7 @@ class BasePicker extends React.Component { constructor(props) { super(props); - this.state = { - selectedValue: this.props.defaultValue, - }; + this.pickerValue = this.props.defaultValue; this.updateSelectedValueAndExecuteOnChange = this.updateSelectedValueAndExecuteOnChange.bind(this); this.executeOnCloseAndOnBlur = this.executeOnCloseAndOnBlur.bind(this); @@ -31,7 +29,7 @@ class BasePicker extends React.Component { updateSelectedValueAndExecuteOnChange(value) { this.props.onInputChange(value); - this.setState({selectedValue: value}); + this.pickerValue = value; } executeOnCloseAndOnBlur() { @@ -49,7 +47,7 @@ class BasePicker extends React.Component { style={this.props.size === 'normal' ? basePickerStyles(this.props.disabled, hasError, this.props.focused) : styles.pickerSmall} useNativeAndroidPickerStyle={false} placeholder={this.props.placeholder} - value={this.props.value || this.state.selectedValue} + value={this.props.value || this.pickerValue} Icon={() => this.props.icon(this.props.size)} disabled={this.props.disabled} fixAndroidTouchableBug @@ -58,7 +56,6 @@ class BasePicker extends React.Component { pickerProps={{ onFocus: this.props.onOpen, onBlur: this.executeOnCloseAndOnBlur, - ref: this.props.innerRef, }} ref={(node) => { if (!node || !_.isFunction(this.props.innerRef)) { From 28fdeac6bcd964827c19f6bab1791964d8c160c1 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sat, 10 Sep 2022 16:37:14 +0530 Subject: [PATCH 15/29] fix stale Form values validation --- src/components/Form.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index ba565cd382d3..b4e47b536aa3 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -162,13 +162,13 @@ class Form extends React.Component { this.setState(prevState => ({ inputValues : { ...prevState.inputValues, - [inputKey] : value, + [inputID] : value, }, - })); + }), () => this.validate(this.state.inputValues)); + if (child.props.shouldSaveDraft) { FormActions.setDraftValues(this.props.formID, {[inputKey]: value}); } - this.validate(this.state.inputValues); }, }); }); From 38fd5adeb1256db0026849dbc8f8ce880a0371b4 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sat, 10 Sep 2022 16:38:27 +0530 Subject: [PATCH 16/29] remove setNativeProps from Picker --- src/components/Picker/BasePicker/index.js | 35 +++-------------------- 1 file changed, 4 insertions(+), 31 deletions(-) diff --git a/src/components/Picker/BasePicker/index.js b/src/components/Picker/BasePicker/index.js index eb3021ab54a9..f3e4a7cfde26 100644 --- a/src/components/Picker/BasePicker/index.js +++ b/src/components/Picker/BasePicker/index.js @@ -10,26 +10,7 @@ class BasePicker extends React.Component { constructor(props) { super(props); - this.pickerValue = this.props.defaultValue; - - this.updateSelectedValueAndExecuteOnChange = this.updateSelectedValueAndExecuteOnChange.bind(this); this.executeOnCloseAndOnBlur = this.executeOnCloseAndOnBlur.bind(this); - this.setNativeProps = this.setNativeProps.bind(this); - } - - /** - * This method mimicks RN's setNativeProps method. It's exposed to Picker's ref and can be used by other components - * to directly manipulate Picker's value when Picker is used as an uncontrolled input. - * - * @param {*} value - */ - setNativeProps({value}) { - this.pickerValue = value; - } - - updateSelectedValueAndExecuteOnChange(value) { - this.props.onInputChange(value); - this.pickerValue = value; } executeOnCloseAndOnBlur() { @@ -42,12 +23,12 @@ class BasePicker extends React.Component { const hasError = !_.isEmpty(this.props.errorText); return ( this.props.icon(this.props.size)} disabled={this.props.disabled} fixAndroidTouchableBug @@ -56,17 +37,9 @@ class BasePicker extends React.Component { pickerProps={{ onFocus: this.props.onOpen, onBlur: this.executeOnCloseAndOnBlur, + ref: this.props.innerRef, }} - ref={(node) => { - if (!node || !_.isFunction(this.props.innerRef)) { - return; - } - - this.props.innerRef(node); - - // eslint-disable-next-line no-param-reassign - node.setNativeProps = this.setNativeProps; - }} + ref={this.props.innerRef} /> ); } From e23f51c48d1c77b889ad139f094effd60224870f Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sat, 10 Sep 2022 16:39:27 +0530 Subject: [PATCH 17/29] remove unnecessary value from profile page --- src/pages/settings/Profile/ProfilePage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 250a7e2021ff..7a6d9fe0fad8 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -291,7 +291,6 @@ class ProfilePage extends Component { items={timezones} isDisabled={this.state.isAutomaticTimezone} defaultValue={this.state.selectedTimezone} - value={this.state.selectedTimezone} /> Date: Sat, 10 Sep 2022 17:08:48 +0530 Subject: [PATCH 18/29] remove setNativeProps from reportSettingsPage --- src/components/RoomNameInput.js | 2 +- src/pages/ReportSettingsPage.js | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/RoomNameInput.js b/src/components/RoomNameInput.js index 8bd14fe9408c..dde956f3e35a 100644 --- a/src/components/RoomNameInput.js +++ b/src/components/RoomNameInput.js @@ -101,7 +101,7 @@ class RoomNameInput extends Component { prefixCharacter={CONST.POLICY.ROOM_PREFIX} placeholder={this.props.translate('newRoomPage.social')} onChange={this.setModifiedRoomName} - defaultValue={this.props.initialValue.substring(1)} // Since the room name always starts with a prefix, we omit the first character to avoid displaying it twice. + value={this.props.value.substring(1)} // Since the room name always starts with a prefix, we omit the first character to avoid displaying it twice. errorText={this.props.errorText} autoCapitalize="none" /> diff --git a/src/pages/ReportSettingsPage.js b/src/pages/ReportSettingsPage.js index 9efc59dc940e..0ba0ea996449 100644 --- a/src/pages/ReportSettingsPage.js +++ b/src/pages/ReportSettingsPage.js @@ -125,11 +125,6 @@ class ReportSettingsPage extends Component { */ resetToPreviousName() { this.setState({newRoomName: this.props.report.reportName}); - - // Reset the input's value back to the previously saved report name - if (this.roomNameInputRef) { - this.roomNameInputRef.setNativeProps({text: this.props.report.reportName.replace(CONST.POLICY.ROOM_PREFIX, '')}); - } Report.clearPolicyRoomNameErrors(this.props.report.reportID); } @@ -229,7 +224,7 @@ class ReportSettingsPage extends Component { : ( this.roomNameInputRef = el} - initialValue={this.state.newRoomName} + value={this.state.newRoomName} policyID={linkedWorkspace && linkedWorkspace.id} errorText={this.state.errors.newRoomName} onChangeText={newRoomName => this.clearErrorAndSetValue('newRoomName', newRoomName)} From 119219117beb0cb2aadb6a847319560b3f3232b2 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sat, 10 Sep 2022 17:11:56 +0530 Subject: [PATCH 19/29] fix eslint errors --- src/components/Form.js | 7 +++---- src/components/RoomNameInput.js | 6 +++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index b4e47b536aa3..199473f0e41b 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -57,7 +57,7 @@ class Form extends React.Component { this.state = { errors: {}, - inputValues: {} + inputValues: {}, }; this.inputRefs = {}; @@ -160,9 +160,9 @@ class Form extends React.Component { onInputChange: (value, key) => { const inputKey = key || inputID; this.setState(prevState => ({ - inputValues : { + inputValues: { ...prevState.inputValues, - [inputID] : value, + [inputID]: value, }, }), () => this.validate(this.state.inputValues)); @@ -175,7 +175,6 @@ class Form extends React.Component { } render() { - console.log(this.state.inputValues); return ( <> {}, - initialValue: '', + value: '', disabled: false, errorText: '', ...fullPolicyDefaultProps, From 237d0ddc6e93a536a2cc862627962c63755b9ba1 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sat, 10 Sep 2022 17:15:49 +0530 Subject: [PATCH 20/29] fix eslint errors --- src/components/Form.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Form.js b/src/components/Form.js index 199473f0e41b..727cd530b19a 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -216,4 +216,3 @@ export default compose( }, }), )(Form); - From 7dd836fd3b9d1a269ede6b211be6f3fbeefe591a Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sun, 11 Sep 2022 05:05:03 +0530 Subject: [PATCH 21/29] fix setAttribute --- src/components/SignInPageForm/index.js | 6 ++---- src/components/TextInput/TextInputLabel/index.js | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/SignInPageForm/index.js b/src/components/SignInPageForm/index.js index d158d6d8f7ed..b38692aaedd5 100644 --- a/src/components/SignInPageForm/index.js +++ b/src/components/SignInPageForm/index.js @@ -8,10 +8,8 @@ class Form extends React.Component { } // Password Managers need these attributes to be able to identify the form elements properly. - this.form.setAttribute({ - method: 'post', - action: '/', - }); + this.form.setAttribute('method', 'post'); + this.form.setAttribute('action', '/'); } render() { diff --git a/src/components/TextInput/TextInputLabel/index.js b/src/components/TextInput/TextInputLabel/index.js index f47460b10f98..29ae00fdcb98 100644 --- a/src/components/TextInput/TextInputLabel/index.js +++ b/src/components/TextInput/TextInputLabel/index.js @@ -8,7 +8,7 @@ class TextInputLabel extends PureComponent { if (!this.props.for) { return; } - this.label.setAttribute({for: this.props.for}); + this.label.setAttribute('for', this.props.for); } render() { From 0644e1d597fae78ca23a525e74b7f5444aa94a11 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sun, 11 Sep 2022 06:08:50 +0530 Subject: [PATCH 22/29] make picker work with Form --- src/components/Form.js | 2 +- src/components/Picker/index.js | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/Form.js b/src/components/Form.js index 727cd530b19a..5bb282281f0b 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -162,7 +162,7 @@ class Form extends React.Component { this.setState(prevState => ({ inputValues: { ...prevState.inputValues, - [inputID]: value, + [inputKey]: value, }, }), () => this.validate(this.state.inputValues)); diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js index 81e80bea6541..c04af7d85ba1 100644 --- a/src/components/Picker/index.js +++ b/src/components/Picker/index.js @@ -47,6 +47,23 @@ class Picker extends PureComponent { this.state = { isOpen: false, }; + + this.onInputChange = this.onInputChange.bind(this); + } + + /** + * Forms use inputID to set values. But Picker passes an index as the second parameter to onInputChange + * We are overriding this behavior to make Picker work with Form + * @param {String} value + * @param {Number} index + */ + onInputChange(value, index) { + console.log('On input chnage'); + if (this.props.inputID) { + return this.props.onInputChange(value, this.props.inputID); + } + + this.props.onInputChange(value, index); } render() { @@ -72,6 +89,7 @@ class Picker extends PureComponent { value={this.props.value} // eslint-disable-next-line react/jsx-props-no-spreading {...pickerProps} + onInputChange={this.onInputChange} /> From e0fb68b3aebf6813badb7b234c20bd5b6cc86207 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sun, 11 Sep 2022 06:23:40 +0530 Subject: [PATCH 23/29] fix lint errors --- src/components/Picker/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js index c04af7d85ba1..929e2ad0ee77 100644 --- a/src/components/Picker/index.js +++ b/src/components/Picker/index.js @@ -29,6 +29,9 @@ const propTypes = { /** Saves a draft of the input value when used in a form */ shouldSaveDraft: PropTypes.bool, + + /** A callback method that is called when the value changes and it received the selected value as an argument */ + onInputChange: PropTypes.func.isRequired, }; const defaultProps = { @@ -58,9 +61,9 @@ class Picker extends PureComponent { * @param {Number} index */ onInputChange(value, index) { - console.log('On input chnage'); if (this.props.inputID) { - return this.props.onInputChange(value, this.props.inputID); + this.props.onInputChange(value, this.props.inputID); + return; } this.props.onInputChange(value, index); From a8b8e7b78fba462b0318ef0bda894c6feac59520 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Sun, 11 Sep 2022 07:51:57 +0530 Subject: [PATCH 24/29] pass value to Form inputs --- src/components/Form.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Form.js b/src/components/Form.js index 5bb282281f0b..c641a99e1f4c 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -152,6 +152,7 @@ class Form extends React.Component { return React.cloneElement(child, { ref: node => this.inputRefs[inputID] = node, defaultValue, + value: this.state.inputValues[inputID], errorText: this.state.errors[inputID] || '', onBlur: () => { this.setTouchedInput(inputID); From 5f1ecfe6b8e7e53a7f119c716141cb1110e82eb0 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 14 Sep 2022 00:00:57 +0300 Subject: [PATCH 25/29] cleaner styleee Co-authored-by: Rajat Parashar --- src/components/InvertedFlatList/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js index 1847bb8dfbd9..4a109a3ea3c6 100644 --- a/src/components/InvertedFlatList/index.js +++ b/src/components/InvertedFlatList/index.js @@ -36,7 +36,7 @@ class InvertedFlatList extends React.Component { this.props.innerRef(this.list); } - if (_.isUndefined(this.list)) { + if (!this.list) { return; } From 74cb3cb0bc81c21cc385dea6f371ecc04818f3fb Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 16 Sep 2022 03:38:54 +0530 Subject: [PATCH 26/29] init value in state --- src/pages/home/report/ReportActionCompose.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 4edf830b1421..11616d76a97c 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -144,6 +144,7 @@ class ReportActionCompose extends React.Component { end: props.comment.length, }, maxLines: props.isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES, + value: props.comment, }; } From cbf041500f64e5f86befa9986bc9e5d12072e7e0 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 16 Sep 2022 03:41:11 +0530 Subject: [PATCH 27/29] fix picker ref --- src/components/Picker/BasePicker/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Picker/BasePicker/index.js b/src/components/Picker/BasePicker/index.js index f3e4a7cfde26..b65907da2bc5 100644 --- a/src/components/Picker/BasePicker/index.js +++ b/src/components/Picker/BasePicker/index.js @@ -39,7 +39,12 @@ class BasePicker extends React.Component { onBlur: this.executeOnCloseAndOnBlur, ref: this.props.innerRef, }} - ref={this.props.innerRef} + ref={el => { + if (!_.isFunction(this.props.innerRef)) { + return; + } + this.props.innerRef(el); + }} /> ); } From 358a77fa156b12077d87ce45daa25bbba2848781 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 16 Sep 2022 03:41:42 +0530 Subject: [PATCH 28/29] rm unnecessary picker prop --- src/components/Picker/BasePicker/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Picker/BasePicker/index.js b/src/components/Picker/BasePicker/index.js index b65907da2bc5..b451dc8eef2f 100644 --- a/src/components/Picker/BasePicker/index.js +++ b/src/components/Picker/BasePicker/index.js @@ -37,7 +37,6 @@ class BasePicker extends React.Component { pickerProps={{ onFocus: this.props.onOpen, onBlur: this.executeOnCloseAndOnBlur, - ref: this.props.innerRef, }} ref={el => { if (!_.isFunction(this.props.innerRef)) { From aaab06b94804a9d3991442f42a43eab4dd5e5f6b Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Fri, 16 Sep 2022 03:44:59 +0530 Subject: [PATCH 29/29] profile page - use value prop for pickers --- src/pages/settings/Profile/ProfilePage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 7a6d9fe0fad8..dde95741bac8 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -260,7 +260,7 @@ class ProfilePage extends Component { value: '', label: this.props.translate('profilePage.selectYourPronouns'), }} - defaultValue={pronounsPickerValue} + value={pronounsPickerValue} /> {this.state.hasSelfSelectedPronouns && ( @@ -290,7 +290,7 @@ class ProfilePage extends Component { label={this.props.translate('profilePage.timezone')} items={timezones} isDisabled={this.state.isAutomaticTimezone} - defaultValue={this.state.selectedTimezone} + value={this.state.selectedTimezone} />