From 5fcb7b7fd195d028402dcb4acd7b23d88e007c5d Mon Sep 17 00:00:00 2001 From: kakajann Date: Fri, 11 Feb 2022 09:50:36 +0500 Subject: [PATCH 01/10] AddressSearch component refactor --- src/components/AddressSearch.js | 51 +++++++++++++++++++++++++++++++-- 1 file changed, 49 insertions(+), 2 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 2cb3df16232f..7f19dc0da616 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -9,6 +9,7 @@ import styles from '../styles/styles'; import TextInput from './TextInput'; import Log from '../libs/Log'; import * as GooglePlacesUtils from '../libs/GooglePlacesUtils'; +import * as FormUtils from '../libs/FormUtils'; // The error that's being thrown below will be ignored until we fork the // react-native-google-places-autocomplete repo and replace the @@ -16,6 +17,26 @@ import * as GooglePlacesUtils from '../libs/GooglePlacesUtils'; LogBox.ignoreLogs(['VirtualizedLists should never be nested']); const propTypes = { + /** Indicates that the input is being used with the Form component */ + isFormInput: PropTypes.bool, + + /** + * The ID used to uniquely identify the input + * + * @param {Object} props - props passed to the input + * @returns {Object} - returns an Error object if isFormInput is supplied but inputID is falsey or not a string + */ + inputID: props => FormUtils.getInputIDPropTypes(props), + + /** Saves a draft of the input value when used in a form */ + shouldSaveDraft: PropTypes.bool, + + /** Callback that is called when the text input is blurred */ + onBlur: PropTypes.func, + + /** Error text to display */ + errorText: PropTypes.string, + /** The label to display for the field */ label: PropTypes.string.isRequired, @@ -32,6 +53,12 @@ const propTypes = { }; const defaultProps = { + // ...defaultFieldPropTypes, + isFormInput: false, + inputID: undefined, + shouldSaveDraft: false, + onBlur: () => {}, + errorText: '', value: '', containerStyles: [], }; @@ -111,11 +138,28 @@ const AddressSearch = (props) => { }} textInputProps={{ InputComp: TextInput, + ref: (node) => { + if (!props.innerRef) { + return; + } + + if (_.isFunction(props.innerRef)) { + props.innerRef(node); + return; + } + + // eslint-disable-next-line no-param-reassign + props.innerRef.current = node; + }, label: props.label, containerStyles: props.containerStyles, errorText: props.errorText, value: props.value, - onChangeText: (text) => { + isFormInput: props.isFormInput, + inputID: props.inputID, + shouldSaveDraft: props.shouldSaveDraft, + onBlur: props.onBlur, + onChange: (text) => { if (skippedFirstOnChangeTextRef.current) { props.onChange({street: text}); } else { @@ -160,4 +204,7 @@ const AddressSearch = (props) => { AddressSearch.propTypes = propTypes; AddressSearch.defaultProps = defaultProps; -export default withLocalize(AddressSearch); +export default withLocalize(React.forwardRef((props, ref) => ( + // eslint-disable-next-line react/jsx-props-no-spreading + +))); From 255d268366d69af0b08c57b52741b504ff12d854 Mon Sep 17 00:00:00 2001 From: kakajann Date: Fri, 11 Feb 2022 09:50:48 +0500 Subject: [PATCH 02/10] update form stories --- src/stories/Form.stories.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index f8b0a9b8cbe3..a9f2ffbd5e56 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -1,6 +1,7 @@ import React from 'react'; import {View} from 'react-native'; import TextInput from '../components/TextInput'; +import AddressSearch from '../components/AddressSearch'; import Form from '../components/Form'; import * as FormActions from '../libs/actions/FormActions'; import styles from '../styles/styles'; @@ -13,7 +14,7 @@ import styles from '../styles/styles'; const story = { title: 'Components/Form', component: Form, - subcomponents: {TextInput}, + subcomponents: {TextInput, AddressSearch}, }; const Template = (args) => { @@ -39,6 +40,12 @@ const Template = (args) => { containerStyles={[styles.mt4]} isFormInput /> + ); }; From d69918784ecebf77bcc3696f7462813feddb9334 Mon Sep 17 00:00:00 2001 From: kakajann Date: Fri, 11 Feb 2022 09:51:02 +0500 Subject: [PATCH 03/10] create story for AddressSearch --- src/stories/AddressSearch.stories.js | 33 ++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/stories/AddressSearch.stories.js diff --git a/src/stories/AddressSearch.stories.js b/src/stories/AddressSearch.stories.js new file mode 100644 index 000000000000..7ae845086734 --- /dev/null +++ b/src/stories/AddressSearch.stories.js @@ -0,0 +1,33 @@ +import React from 'react'; +import AddressSearch from '../components/AddressSearch'; + +/** + * We use the Component Story Format for writing stories. Follow the docs here: + * + * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format + */ +export default { + title: 'Components/AddressSearch', + component: AddressSearch, + args: { + label: 'Enter street', + errorText: '', + }, +}; + +// eslint-disable-next-line react/jsx-props-no-spreading +const Template = args => ; + +// Arguments can be passed to the component by binding +// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const Default = Template.bind({}); + +const ErrorStory = Template.bind({}); +ErrorStory.args = { + errorText: 'The street you looking for is not exist', +}; + +export { + Default, + ErrorStory, +}; From e868e061303b4c36bda0518cc636552ef792d2ec Mon Sep 17 00:00:00 2001 From: kakajann Date: Mon, 14 Feb 2022 19:42:25 +0500 Subject: [PATCH 04/10] fix props.onChange is not a function error --- src/stories/AddressSearch.stories.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/stories/AddressSearch.stories.js b/src/stories/AddressSearch.stories.js index 7ae845086734..66ccb95e4bf3 100644 --- a/src/stories/AddressSearch.stories.js +++ b/src/stories/AddressSearch.stories.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import AddressSearch from '../components/AddressSearch'; /** @@ -15,8 +15,17 @@ export default { }, }; -// eslint-disable-next-line react/jsx-props-no-spreading -const Template = args => ; +const Template = (args) => { + const [value, setValue] = useState(''); + return ( + setValue(street)} + // eslint-disable-next-line react/jsx-props-no-spreading + {...args} + /> + ); +}; // Arguments can be passed to the component by binding // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args From 2219e2681b1dd36ca4e8adae4d80e7e0867a0654 Mon Sep 17 00:00:00 2001 From: kakajann Date: Tue, 15 Feb 2022 18:51:21 +0500 Subject: [PATCH 05/10] remove unneccary comment --- src/components/AddressSearch.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 7f19dc0da616..9d55154ae46e 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -53,7 +53,6 @@ const propTypes = { }; const defaultProps = { - // ...defaultFieldPropTypes, isFormInput: false, inputID: undefined, shouldSaveDraft: false, From 3cebf96cf9d99e559c97928357b1d2fe33a08332 Mon Sep 17 00:00:00 2001 From: kakajann Date: Tue, 15 Feb 2022 18:56:11 +0500 Subject: [PATCH 06/10] make default value undefined --- src/components/AddressSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 9d55154ae46e..005438f756e0 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -58,7 +58,7 @@ const defaultProps = { shouldSaveDraft: false, onBlur: () => {}, errorText: '', - value: '', + value: undefined, containerStyles: [], }; From 996f12b1183d156953f05c555096495f25672f57 Mon Sep 17 00:00:00 2001 From: kakajann Date: Tue, 22 Feb 2022 21:01:08 +0500 Subject: [PATCH 07/10] change onChange prop to onChangeText --- src/components/AddressSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 005438f756e0..bee2e40cbedc 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -158,7 +158,7 @@ const AddressSearch = (props) => { inputID: props.inputID, shouldSaveDraft: props.shouldSaveDraft, onBlur: props.onBlur, - onChange: (text) => { + onChangeText: (text) => { if (skippedFirstOnChangeTextRef.current) { props.onChange({street: text}); } else { From 7186e179c3c15330042febda289d7a55d0f1ae65 Mon Sep 17 00:00:00 2001 From: kakajann Date: Wed, 23 Feb 2022 20:43:57 +0500 Subject: [PATCH 08/10] validate props.value before trimming it --- src/components/AddressSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index bee2e40cbedc..1d237d9351d7 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -92,7 +92,7 @@ const AddressSearch = (props) => { const state = GooglePlacesUtils.getAddressComponent(addressComponents, 'administrative_area_level_1', 'short_name'); const values = {}; - if (street && street.length > props.value.trim().length) { + if (street && props.value && street.length > props.value.trim().length) { // We are only passing the street number and name if the combined length is longer than the value // that was initially passed to the autocomplete component. Google Places can truncate details // like Apt # and this is the best way we have to tell that the new value it's giving us is less From 9217a76f4f644ef53208ebe36920348f23d344d7 Mon Sep 17 00:00:00 2001 From: Kakajann Dortguly Date: Wed, 23 Feb 2022 21:15:44 +0500 Subject: [PATCH 09/10] Update src/stories/AddressSearch.stories.js Co-authored-by: Carlos Martins --- src/stories/AddressSearch.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/AddressSearch.stories.js b/src/stories/AddressSearch.stories.js index 66ccb95e4bf3..6f03680c47f7 100644 --- a/src/stories/AddressSearch.stories.js +++ b/src/stories/AddressSearch.stories.js @@ -33,7 +33,7 @@ const Default = Template.bind({}); const ErrorStory = Template.bind({}); ErrorStory.args = { - errorText: 'The street you looking for is not exist', + errorText: 'The street you are looking for does not exist', }; export { From 23925601cecfb2d9f8cf1e2c40ff1169c21201e1 Mon Sep 17 00:00:00 2001 From: kakajann Date: Wed, 23 Feb 2022 21:16:57 +0500 Subject: [PATCH 10/10] rename getInputIDPropTypes with validateInputIDProps --- src/components/AddressSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 1d237d9351d7..dac2f8cd7c8d 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -26,7 +26,7 @@ const propTypes = { * @param {Object} props - props passed to the input * @returns {Object} - returns an Error object if isFormInput is supplied but inputID is falsey or not a string */ - inputID: props => FormUtils.getInputIDPropTypes(props), + inputID: props => FormUtils.validateInputIDProps(props), /** Saves a draft of the input value when used in a form */ shouldSaveDraft: PropTypes.bool,