From 0a67fed605ce1df77c237297be8d60c7776a44df Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 30 Sep 2021 10:30:21 -0600 Subject: [PATCH 01/29] Add google search lib to code --- .env.example | 1 + .env.production | 1 + .env.staging | 1 + package-lock.json | 20 ++++++++++++++++++-- package.json | 1 + src/CONFIG.js | 1 + 6 files changed, 23 insertions(+), 2 deletions(-) diff --git a/.env.example b/.env.example index 127b7147230c..3b8599b94e06 100644 --- a/.env.example +++ b/.env.example @@ -11,3 +11,4 @@ USE_WEB_PROXY=false USE_WDYR=false CAPTURE_METRICS=false ONYX_METRICS=false +GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/.env.production b/.env.production index 85c73146dd13..762a420ec17c 100644 --- a/.env.production +++ b/.env.production @@ -6,3 +6,4 @@ EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66 PUSHER_APP_KEY=268df511a204fbb60884 USE_WEB_PROXY=false ENVIRONMENT=PROD +GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/.env.staging b/.env.staging index a7fa6321d892..0dc03f090b05 100644 --- a/.env.staging +++ b/.env.staging @@ -6,3 +6,4 @@ EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66 PUSHER_APP_KEY=268df511a204fbb60884 USE_WEB_PROXY=false ENVIRONMENT=STG +GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/package-lock.json b/package-lock.json index 69fc6280504f..fadb48a47e03 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32512,8 +32512,7 @@ "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", - "dev": true + "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" }, "lodash.isequal": { "version": "4.5.0", @@ -38525,6 +38524,23 @@ } } }, + "react-native-google-places-autocomplete": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-native-google-places-autocomplete/-/react-native-google-places-autocomplete-2.4.1.tgz", + "integrity": "sha512-NJrzZ5zsguhTqe0C5tIW9PfxOn2wkWDiGYIBFksHzFOIIURxFPUlO0cJmfOjs5CBIDtMampgNXBdgADExBen5w==", + "requires": { + "lodash.debounce": "^4.0.8", + "prop-types": "^15.7.2", + "qs": "~6.9.1" + }, + "dependencies": { + "qs": { + "version": "6.9.6", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz", + "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==" + } + } + }, "react-native-image-pan-zoom": { "version": "2.1.12", "resolved": "https://registry.npmjs.org/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.12.tgz", diff --git a/package.json b/package.json index 22b16274501e..850d4f4a89f2 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "react-native-config": "^1.4.0", "react-native-document-picker": "^5.1.0", "react-native-gesture-handler": "1.9.0", + "react-native-google-places-autocomplete": "^2.4.1", "react-native-image-pan-zoom": "^2.1.12", "react-native-image-picker": "^4.0.3", "react-native-keyboard-spacer": "^0.4.1", diff --git a/src/CONFIG.js b/src/CONFIG.js index fcad4bf55193..e164d0f6488e 100644 --- a/src/CONFIG.js +++ b/src/CONFIG.js @@ -61,4 +61,5 @@ export default { }, CAPTURE_METRICS: lodashGet(Config, 'CAPTURE_METRICS', 'false') === 'true', ONYX_METRICS: lodashGet(Config, 'ONYX_METRICS', 'false') === 'true', + GOOGLE_PLACES_API_KEY: lodashGet(Config, 'GOOGLE_PLACES_API_KEY', ''), }; From 11bfd928bf888cd77f4f2c66eb32cfdebf31b641 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 30 Sep 2021 10:30:35 -0600 Subject: [PATCH 02/29] Add skeleton component for address search --- src/components/AddressSearch.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/components/AddressSearch.js diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js new file mode 100644 index 000000000000..dd68072a9b94 --- /dev/null +++ b/src/components/AddressSearch.js @@ -0,0 +1,20 @@ +import React from 'react'; +import {Text} from 'react-native'; + +const propTypes = {}; +const defaultProps = {}; + +class AddressSearch extends React.Component { + constructor(props) { + super(props); + } + + render() { + return (Address Search); + } +}; + +AddressSearch.propTypes = propTypes; +AddressSearch.defaultProps = defaultProps; + +export default AddressSearch; From 57b0d97b5a399764e9f50600f6c7350f497182c3 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 30 Sep 2021 12:20:51 -0600 Subject: [PATCH 03/29] Add test component to the page --- config/webpack/webpack.common.js | 1 + src/components/AddressSearch.js | 16 +++++++++++++++- src/pages/ReimbursementAccount/CompanyStep.js | 2 ++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js index 97f9eb948262..45a2e6b73bea 100644 --- a/config/webpack/webpack.common.js +++ b/config/webpack/webpack.common.js @@ -21,6 +21,7 @@ const includeModules = [ 'react-native-onyx', 'react-native-gesture-handler', 'react-native-flipper', + 'react-native-google-places-autocomplete', ].join('|'); const webpackConfig = { diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index dd68072a9b94..8f18098b07ca 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,5 +1,7 @@ import React from 'react'; import {Text} from 'react-native'; +import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; +import CONFIG from '../CONFIG'; const propTypes = {}; const defaultProps = {}; @@ -10,7 +12,19 @@ class AddressSearch extends React.Component { } render() { - return (Address Search); + return ( + { + // 'details' is provided when fetchDetails = true + console.log(data, details); + }} + query={{ + key: CONFIG.GOOGLE_PLACES_API_KEY, + language: 'en', + }} + /> + ); } }; diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 2a9fa4b9c62e..48aff5ba1997 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -32,6 +32,7 @@ import ExpensiPicker from '../../components/ExpensiPicker'; import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils'; import reimbursementAccountPropTypes from './reimbursementAccountPropTypes'; import ReimbursementAccountForm from './ReimbursementAccountForm'; +import AddressSearch from '../../components/AddressSearch'; const propTypes = { /** Bank account currently in setup */ @@ -192,6 +193,7 @@ class CompanyStep extends React.Component { disabled={shouldDisableCompanyName} errorText={this.getErrorText('companyName')} /> + Date: Thu, 30 Sep 2021 15:27:41 -0600 Subject: [PATCH 04/29] Remove API key from config --- .env.example | 1 - .env.production | 1 - .env.staging | 1 - src/CONFIG.js | 1 - 4 files changed, 4 deletions(-) diff --git a/.env.example b/.env.example index 3b8599b94e06..127b7147230c 100644 --- a/.env.example +++ b/.env.example @@ -11,4 +11,3 @@ USE_WEB_PROXY=false USE_WDYR=false CAPTURE_METRICS=false ONYX_METRICS=false -GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/.env.production b/.env.production index 762a420ec17c..85c73146dd13 100644 --- a/.env.production +++ b/.env.production @@ -6,4 +6,3 @@ EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66 PUSHER_APP_KEY=268df511a204fbb60884 USE_WEB_PROXY=false ENVIRONMENT=PROD -GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/.env.staging b/.env.staging index 0dc03f090b05..a7fa6321d892 100644 --- a/.env.staging +++ b/.env.staging @@ -6,4 +6,3 @@ EXPENSIFY_PARTNER_PASSWORD=e21965746fd75f82bb66 PUSHER_APP_KEY=268df511a204fbb60884 USE_WEB_PROXY=false ENVIRONMENT=STG -GOOGLE_PLACES_API_KEY=AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus diff --git a/src/CONFIG.js b/src/CONFIG.js index e164d0f6488e..fcad4bf55193 100644 --- a/src/CONFIG.js +++ b/src/CONFIG.js @@ -61,5 +61,4 @@ export default { }, CAPTURE_METRICS: lodashGet(Config, 'CAPTURE_METRICS', 'false') === 'true', ONYX_METRICS: lodashGet(Config, 'ONYX_METRICS', 'false') === 'true', - GOOGLE_PLACES_API_KEY: lodashGet(Config, 'GOOGLE_PLACES_API_KEY', ''), }; From 8cf96d7a05e1e411c0b06a968b9acbb83e560094 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 30 Sep 2021 15:28:03 -0600 Subject: [PATCH 05/29] Make proxy request for search --- src/components/AddressSearch.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 8f18098b07ca..5e2c1f337bcd 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -20,9 +20,13 @@ class AddressSearch extends React.Component { console.log(data, details); }} query={{ - key: CONFIG.GOOGLE_PLACES_API_KEY, + key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', language: 'en', }} + requestUrl={{ + useOnPlatform: 'web', + url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`, + }} /> ); } From f19193d861d0afd67708f9aba232ab37766927b8 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 30 Sep 2021 16:10:44 -0600 Subject: [PATCH 06/29] Collect all place information when selecting an option --- src/components/AddressSearch.js | 51 ++++++++++++++++++++++++++------- 1 file changed, 41 insertions(+), 10 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 5e2c1f337bcd..c3ac9dc22f9a 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,27 +1,58 @@ +import _ from 'underscore'; import React from 'react'; -import {Text} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; -const propTypes = {}; +const propTypes = { + ...withLocalizePropTypes, +}; const defaultProps = {}; class AddressSearch extends React.Component { constructor(props) { super(props); + + this.saveLocationDetails = this.saveLocationDetails.bind(this); + } + + saveLocationDetails(details) { + console.log(details); + if (details.address_components) { + const streetNumber = _.chain(details.address_components) + .find(component => _.contains(component.types, 'street_number')) + .get('long_name') + .value(); + const streetName = _.chain(details.address_components) + .find(component => _.contains(component.types, 'route')) + .get('long_name') + .value(); + const city = _.chain(details.address_components) + .find(component => _.contains(component.types, 'locality')) + .get('long_name') + .value(); + const state = _.chain(details.address_components) + .find(component => _.contains(component.types, 'administrative_area_level_1')) + .get('long_name') + .value(); + const zipCode = _.chain(details.address_components) + .find(component => _.contains(component.types, 'postal_code')) + .get('long_name') + .value(); + console.log(streetNumber, streetName, city, state, zipCode); + } } render() { return ( { - // 'details' is provided when fetchDetails = true - console.log(data, details); - }} + placeholder="Search" + fetchDetails + currentLocation + onPress={(data, details) => this.saveLocationDetails(details)} query={{ key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', - language: 'en', + language: this.props.preferredLocale, }} requestUrl={{ useOnPlatform: 'web', @@ -30,9 +61,9 @@ class AddressSearch extends React.Component { /> ); } -}; +} AddressSearch.propTypes = propTypes; AddressSearch.defaultProps = defaultProps; -export default AddressSearch; +export default withLocalize(AddressSearch); From fcbe85bb67125d96406d9c41251efa14153fd5ce Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Fri, 1 Oct 2021 09:27:36 -0600 Subject: [PATCH 07/29] Use a custom input and style it --- src/components/AddressSearch.js | 19 +++++++++++++++---- src/pages/ReimbursementAccount/CompanyStep.js | 4 +++- src/styles/styles.js | 4 ++++ 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index c3ac9dc22f9a..23c0bed187e7 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -3,6 +3,8 @@ import React from 'react'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import styles from '../styles/styles'; +import ExpensiTextInput from './ExpensiTextInput'; const propTypes = { ...withLocalizePropTypes, @@ -16,8 +18,10 @@ class AddressSearch extends React.Component { this.saveLocationDetails = this.saveLocationDetails.bind(this); } + /** + * @param {Object} details See https://developers.google.com/maps/documentation/places/web-service/details#PlaceDetailsResponses + */ saveLocationDetails(details) { - console.log(details); if (details.address_components) { const streetNumber = _.chain(details.address_components) .find(component => _.contains(component.types, 'street_number')) @@ -39,16 +43,14 @@ class AddressSearch extends React.Component { .find(component => _.contains(component.types, 'postal_code')) .get('long_name') .value(); - console.log(streetNumber, streetName, city, state, zipCode); } } render() { return ( this.saveLocationDetails(details)} query={{ key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', @@ -58,6 +60,15 @@ class AddressSearch extends React.Component { useOnPlatform: 'web', url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`, }} + textInputProps={{ + InputComp: ExpensiTextInput, + label: this.props.translate('common.companyAddress'), + containerStyles: [styles.mt4], + onChange: console.log, + }} + styles={{ + textInputContainer: [styles.googleSearchTextInputContainer], + }} /> ); } diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 48aff5ba1997..8d9fcb86603c 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -193,7 +193,9 @@ class CompanyStep extends React.Component { disabled={shouldDisableCompanyName} errorText={this.getErrorText('companyName')} /> - + Date: Fri, 1 Oct 2021 13:39:18 -0600 Subject: [PATCH 08/29] Get the custom component working --- src/components/AddressSearch.js | 37 ++++++++++++++++--- src/pages/ReimbursementAccount/CompanyStep.js | 8 +++- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 23c0bed187e7..8ffa5df082a7 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,15 +1,32 @@ import _ from 'underscore'; import React from 'react'; +import PropTypes from 'prop-types'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; import ExpensiTextInput from './ExpensiTextInput'; +import {TextInput} from 'react-native'; const propTypes = { + /** The label to display for the field */ + label: PropTypes.string.isRequired, + + /** The value to set the field to initially */ + value: PropTypes.string, + + /** A callback function when the value of this field has changed */ + onChangeText: PropTypes.func.isRequired, + + /** Customize the ExpensiTextInput container */ + containerStyles: PropTypes.arrayOf(PropTypes.object), + ...withLocalizePropTypes, }; -const defaultProps = {}; +const defaultProps = { + value: '', + containerStyles: null, +}; class AddressSearch extends React.Component { constructor(props) { @@ -23,6 +40,7 @@ class AddressSearch extends React.Component { */ saveLocationDetails(details) { if (details.address_components) { + // Gather the values from the Google details const streetNumber = _.chain(details.address_components) .find(component => _.contains(component.types, 'street_number')) .get('long_name') @@ -37,12 +55,18 @@ class AddressSearch extends React.Component { .value(); const state = _.chain(details.address_components) .find(component => _.contains(component.types, 'administrative_area_level_1')) - .get('long_name') + .get('short_name') .value(); const zipCode = _.chain(details.address_components) .find(component => _.contains(component.types, 'postal_code')) .get('long_name') .value(); + + // Trigger text change events for each of the individual fields being saved on the server + this.props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); + this.props.onChangeText('addressCity', city); + this.props.onChangeText('addressState', state); + this.props.onChangeText('addressZipCode', zipCode); } } @@ -50,7 +74,7 @@ class AddressSearch extends React.Component { return ( this.saveLocationDetails(details)} query={{ key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', @@ -62,9 +86,10 @@ class AddressSearch extends React.Component { }} textInputProps={{ InputComp: ExpensiTextInput, - label: this.props.translate('common.companyAddress'), - containerStyles: [styles.mt4], - onChange: console.log, + label: this.props.label, + // value: this.props.value, + containerStyles: this.props.containerStyles, + onChangeText: value => console.log(value), }} styles={{ textInputContainer: [styles.googleSearchTextInputContainer], diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 8d9fcb86603c..2fded6f13cf8 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -194,7 +194,13 @@ class CompanyStep extends React.Component { errorText={this.getErrorText('companyName')} /> { + this.clearErrorAndSetValue(fieldName, value); + console.log(fieldName, value); + }} /> Date: Fri, 1 Oct 2021 14:07:40 -0600 Subject: [PATCH 09/29] Set the initial value of the address --- src/components/AddressSearch.js | 80 ++++++++++++++++----------------- 1 file changed, 38 insertions(+), 42 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 8ffa5df082a7..076fa0dcb544 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,12 +1,11 @@ import _ from 'underscore'; -import React from 'react'; +import React, { useRef, useEffect } from 'react'; import PropTypes from 'prop-types'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; import ExpensiTextInput from './ExpensiTextInput'; -import {TextInput} from 'react-native'; const propTypes = { /** The label to display for the field */ @@ -28,17 +27,17 @@ const defaultProps = { containerStyles: null, }; -class AddressSearch extends React.Component { - constructor(props) { - super(props); - - this.saveLocationDetails = this.saveLocationDetails.bind(this); - } +const AddressSearch = (props) => { + // Using a hook is the only way to see the value of this component + const ref = useRef(); + useEffect(() => { + ref?.current?.setAddressText(props.value); + }, []); /** * @param {Object} details See https://developers.google.com/maps/documentation/places/web-service/details#PlaceDetailsResponses */ - saveLocationDetails(details) { + const saveLocationDetails = (details) => { if (details.address_components) { // Gather the values from the Google details const streetNumber = _.chain(details.address_components) @@ -63,41 +62,38 @@ class AddressSearch extends React.Component { .value(); // Trigger text change events for each of the individual fields being saved on the server - this.props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); - this.props.onChangeText('addressCity', city); - this.props.onChangeText('addressState', state); - this.props.onChangeText('addressZipCode', zipCode); + props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); + props.onChangeText('addressCity', city); + props.onChangeText('addressState', state); + props.onChangeText('addressZipCode', zipCode); } - } + }; - render() { - return ( - this.saveLocationDetails(details)} - query={{ - key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', - language: this.props.preferredLocale, - }} - requestUrl={{ - useOnPlatform: 'web', - url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`, - }} - textInputProps={{ - InputComp: ExpensiTextInput, - label: this.props.label, - // value: this.props.value, - containerStyles: this.props.containerStyles, - onChangeText: value => console.log(value), - }} - styles={{ - textInputContainer: [styles.googleSearchTextInputContainer], - }} - /> - ); - } -} + return ( + saveLocationDetails(details)} + query={{ + key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', + language: props.preferredLocale, + }} + requestUrl={{ + useOnPlatform: 'web', + url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`, + }} + textInputProps={{ + InputComp: ExpensiTextInput, + label: props.label, + containerStyles: props.containerStyles, + }} + styles={{ + textInputContainer: [styles.googleSearchTextInputContainer], + }} + /> + ); +}; AddressSearch.propTypes = propTypes; AddressSearch.defaultProps = defaultProps; From 7fa7ab75098525a80f069eceab6affd1bc5cad7e Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 4 Oct 2021 08:50:09 -0400 Subject: [PATCH 10/29] Remove unused form fields --- src/components/AddressSearch.js | 2 +- src/pages/ReimbursementAccount/CompanyStep.js | 55 +------------------ 2 files changed, 3 insertions(+), 54 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 076fa0dcb544..9f90ad47b7bc 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, { useRef, useEffect } from 'react'; +import React, {useRef, useEffect} from 'react'; import PropTypes from 'prop-types'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 2fded6f13cf8..a15fae56d20d 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -24,7 +24,7 @@ import TextLink from '../../components/TextLink'; import StatePicker from '../../components/StatePicker'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import { - isValidAddress, isValidDate, isValidZipCode, isRequiredFulfilled, isValidURL, + isValidDate, isRequiredFulfilled, isValidURL, } from '../../libs/ValidationUtils'; import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; @@ -71,10 +71,6 @@ class CompanyStep extends React.Component { // These fields need to be filled out in order to submit the form this.requiredFields = [ 'companyName', - 'addressStreet', - 'addressCity', - 'addressState', - 'addressZipCode', 'website', 'companyTaxID', 'incorporationDate', @@ -87,9 +83,6 @@ class CompanyStep extends React.Component { // Map a field to the key of the error's translation this.errorTranslationKeys = { - addressStreet: 'bankAccount.error.addressStreet', - addressCity: 'bankAccount.error.addressCity', - addressZipCode: 'bankAccount.error.zipCode', companyName: 'bankAccount.error.companyName', companyPhone: 'bankAccount.error.phoneNumber', website: 'bankAccount.error.website', @@ -129,13 +122,6 @@ class CompanyStep extends React.Component { */ validate() { const errors = {}; - if (!isValidAddress(this.state.addressStreet)) { - errors.addressStreet = true; - } - - if (!isValidZipCode(this.state.addressZipCode)) { - errors.addressZipCode = true; - } if (!isValidURL(this.state.website)) { errors.website = true; @@ -197,44 +183,7 @@ class CompanyStep extends React.Component { label={this.props.translate('common.companyAddress')} containerStyles={[styles.mt4]} value={`${this.state.addressStreet} ${this.state.addressCity} ${this.state.addressState} ${this.state.addressZipCode}`} - onChangeText={(fieldName, value) => { - this.clearErrorAndSetValue(fieldName, value); - console.log(fieldName, value); - }} - /> - this.clearErrorAndSetValue('addressStreet', value)} - value={this.state.addressStreet} - errorText={this.getErrorText('addressStreet')} - /> - {this.props.translate('common.noPO')} - - - this.clearErrorAndSetValue('addressCity', value)} - value={this.state.addressCity} - errorText={this.getErrorText('addressCity')} - translateX={-14} - /> - - - this.clearErrorAndSetValue('addressState', value)} - value={this.state.addressState} - hasError={this.getErrors().addressState} - /> - - - this.clearErrorAndSetValue('addressZipCode', value)} - value={this.state.addressZipCode} - errorText={this.getErrorText('addressZipCode')} + onChangeText={(fieldName, value) => this.clearErrorAndSetValue(fieldName, value)} /> Date: Mon, 4 Oct 2021 11:18:57 -0400 Subject: [PATCH 11/29] Style the results container --- src/components/AddressSearch.js | 23 +++++++++++++++++++++++ src/styles/styles.js | 24 ++++++++++++++++++++++++ 2 files changed, 47 insertions(+) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 9f90ad47b7bc..df8fd5c51a3c 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,6 +1,7 @@ import _ from 'underscore'; import React, {useRef, useEffect} from 'react'; import PropTypes from 'prop-types'; +import {View, Text} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; @@ -74,6 +75,8 @@ const AddressSearch = (props) => { ref={ref} fetchDetails keepResultsAfterBlur + suppressDefaultStyles + enablePoweredByContainer={false} onPress={(data, details) => saveLocationDetails(details)} query={{ key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', @@ -91,6 +94,26 @@ const AddressSearch = (props) => { styles={{ textInputContainer: [styles.googleSearchTextInputContainer], }} + renderRow={(data, index) => { + // This is using a custom render component in order for the styles to be properly applied to the top row. + // The styles for the top and bottom row could have instead by passed to `styles.listView` for + // , however the list is always visible, even when there are no results. + // Because of this, if the padding and borders are applied to the list, even when it's empty, it takes + // up space in the UI and looks like a horizontal line with padding around it. + // Using this custom render, the rounded borders and padding can be applied to the first row + // so that they are only visible when there are results. + const rowStyles = [styles.pv4, styles.ph3, styles.borderLeft, styles.borderRight, styles.borderBottom]; + + if (index === 0) { + rowStyles.push(styles.borderTop); + rowStyles.push(styles.mt2); + } + return ( + + {data.description} + + ); + }} /> ); }; diff --git a/src/styles/styles.js b/src/styles/styles.js index 6df6fd550b89..c42850bbf2c8 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1380,6 +1380,25 @@ const styles = { flex: 1, }, + borderTop: { + borderTopWidth: 1, + borderColor: themeColors.border, + }, + + borderTopRounded: { + borderTopWidth: 1, + borderColor: themeColors.border, + borderTopLeftRadius: variables.componentBorderRadiusNormal, + borderTopRightRadius: variables.componentBorderRadiusNormal, + }, + + borderBottomRounded: { + borderBottomWidth: 1, + borderColor: themeColors.border, + borderBottomLeftRadius: variables.componentBorderRadiusNormal, + borderBottomRightRadius: variables.componentBorderRadiusNormal, + }, + borderBottom: { borderBottomWidth: 1, borderColor: themeColors.border, @@ -1390,6 +1409,11 @@ const styles = { borderColor: themeColors.border, }, + borderLeft: { + borderLeftWidth: 1, + borderColor: themeColors.border, + }, + headerBar: { overflow: 'hidden', justifyContent: 'center', From e851c6581310d3f048ee432b3fe0f27ffedfdda6 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Mon, 4 Oct 2021 16:17:18 -0600 Subject: [PATCH 12/29] added phone number validation --- src/pages/ReimbursementAccount/CompanyStep.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 2c765ea03949..d1ba09725f99 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -24,7 +24,7 @@ import TextLink from '../../components/TextLink'; import StatePicker from '../../components/StatePicker'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import { - isValidDate, isRequiredFulfilled, isValidURL, + isValidDate, isRequiredFulfilled, isValidURL, isValidPhoneWithSpecialChars, } from '../../libs/ValidationUtils'; import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; From 89fadbb890bc7e4741104c31e1bc44d2675643b5 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Mon, 4 Oct 2021 16:17:59 -0600 Subject: [PATCH 13/29] flex direction none not allowed --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index c42850bbf2c8..cd617cf7a523 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2056,7 +2056,7 @@ const styles = { }), googleSearchTextInputContainer: { - flexDirection: 'none', + flexDirection: 'column', }, }; From 230f50d39885a6a379f453aab2da9de76d5538b1 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:01:49 -0600 Subject: [PATCH 14/29] swapped functional component to class --- src/components/AddressSearch.js | 124 +++++++++++++++++--------------- 1 file changed, 65 insertions(+), 59 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index df8fd5c51a3c..57c2e7907478 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useRef, useEffect} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import {View, Text} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; @@ -8,6 +8,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; import ExpensiTextInput from './ExpensiTextInput'; + const propTypes = { /** The label to display for the field */ label: PropTypes.string.isRequired, @@ -28,17 +29,20 @@ const defaultProps = { containerStyles: null, }; -const AddressSearch = (props) => { - // Using a hook is the only way to see the value of this component - const ref = useRef(); - useEffect(() => { - ref?.current?.setAddressText(props.value); - }, []); +class AddressSearch extends React.Component { + constructor(props) { + super(props); + this.googlePlacesRef = React.createRef(); + } + + componentDidMount() { + this.googlePlacesRef.current?.setAddressText(this.props.value); + } /** * @param {Object} details See https://developers.google.com/maps/documentation/places/web-service/details#PlaceDetailsResponses */ - const saveLocationDetails = (details) => { + saveLocationDetails = (details) => { if (details.address_components) { // Gather the values from the Google details const streetNumber = _.chain(details.address_components) @@ -63,60 +67,62 @@ const AddressSearch = (props) => { .value(); // Trigger text change events for each of the individual fields being saved on the server - props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); - props.onChangeText('addressCity', city); - props.onChangeText('addressState', state); - props.onChangeText('addressZipCode', zipCode); + this.props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); + this.props.onChangeText('addressCity', city); + this.props.onChangeText('addressState', state); + this.props.onChangeText('addressZipCode', zipCode); } - }; + } - return ( - saveLocationDetails(details)} - query={{ - key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', - language: props.preferredLocale, - }} - requestUrl={{ - useOnPlatform: 'web', - url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`, - }} - textInputProps={{ - InputComp: ExpensiTextInput, - label: props.label, - containerStyles: props.containerStyles, - }} - styles={{ - textInputContainer: [styles.googleSearchTextInputContainer], - }} - renderRow={(data, index) => { - // This is using a custom render component in order for the styles to be properly applied to the top row. - // The styles for the top and bottom row could have instead by passed to `styles.listView` for - // , however the list is always visible, even when there are no results. - // Because of this, if the padding and borders are applied to the list, even when it's empty, it takes - // up space in the UI and looks like a horizontal line with padding around it. - // Using this custom render, the rounded borders and padding can be applied to the first row - // so that they are only visible when there are results. - const rowStyles = [styles.pv4, styles.ph3, styles.borderLeft, styles.borderRight, styles.borderBottom]; + render() { + return( + this.saveLocationDetails(details)} + query={{ + key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus', + language: this.props.preferredLocale, + }} + requestUrl={{ + useOnPlatform: 'web', + url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`, + }} + textInputProps={{ + InputComp: ExpensiTextInput, + label: this.props.label, + containerStyles: this.props.containerStyles, + }} + styles={{ + textInputContainer: [styles.googleSearchTextInputContainer], + }} + renderRow={(data, index) => { + // This is using a custom render component in order for the styles to be properly applied to the top row. + // The styles for the top and bottom row could have instead by passed to `styles.listView` for + // , however the list is always visible, even when there are no results. + // Because of this, if the padding and borders are applied to the list, even when it's empty, it takes + // up space in the UI and looks like a horizontal line with padding around it. + // Using this custom render, the rounded borders and padding can be applied to the first row + // so that they are only visible when there are results. + const rowStyles = [styles.pv4, styles.ph3, styles.borderLeft, styles.borderRight, styles.borderBottom]; - if (index === 0) { - rowStyles.push(styles.borderTop); - rowStyles.push(styles.mt2); - } - return ( - - {data.description} - - ); - }} - /> - ); -}; + if (index === 0) { + rowStyles.push(styles.borderTop); + rowStyles.push(styles.mt2); + } + return ( + + {data.description} + + ); + }} + /> + ); + } +} AddressSearch.propTypes = propTypes; AddressSearch.defaultProps = defaultProps; From efea62117222f4aa17eeb0dd630d20e5d0cab751 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:13:58 -0600 Subject: [PATCH 15/29] js style --- 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 57c2e7907478..6af4618c047e 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -75,7 +75,7 @@ class AddressSearch extends React.Component { } render() { - return( + return ( Date: Tue, 5 Oct 2021 13:21:05 -0600 Subject: [PATCH 16/29] ignore virtualized list error --- src/components/AddressSearch.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 6af4618c047e..5d512e50c6c6 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,13 +1,17 @@ import _ from 'underscore'; import React from 'react'; import PropTypes from 'prop-types'; -import {View, Text} from 'react-native'; +import {View, Text, LogBox} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; import ExpensiTextInput from './ExpensiTextInput'; +// The error that's being thrown below will be ignored until we fork the +// react-native-google-places-autocomplete repo and replace the +// VirtualizedList component with a VirtualizedList-backed instead +LogBox.ignoreLogs([ 'VirtualizedLists should never be nested']); const propTypes = { /** The label to display for the field */ From de295e81ac6fc191923faa0ab6e031eba7f88966 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:29:23 -0600 Subject: [PATCH 17/29] refactor address info to method --- src/components/AddressSearch.js | 32 ++++++++++++-------------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 5d512e50c6c6..7c59e2f36217 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -43,32 +43,24 @@ class AddressSearch extends React.Component { this.googlePlacesRef.current?.setAddressText(this.props.value); } + getAddressInfo(field, nameType) { + return _.chain(details.address_components) + .find(component => _.contains(component.types, field)) + .get(nameType) + .value(); + } + /** * @param {Object} details See https://developers.google.com/maps/documentation/places/web-service/details#PlaceDetailsResponses */ saveLocationDetails = (details) => { if (details.address_components) { // Gather the values from the Google details - const streetNumber = _.chain(details.address_components) - .find(component => _.contains(component.types, 'street_number')) - .get('long_name') - .value(); - const streetName = _.chain(details.address_components) - .find(component => _.contains(component.types, 'route')) - .get('long_name') - .value(); - const city = _.chain(details.address_components) - .find(component => _.contains(component.types, 'locality')) - .get('long_name') - .value(); - const state = _.chain(details.address_components) - .find(component => _.contains(component.types, 'administrative_area_level_1')) - .get('short_name') - .value(); - const zipCode = _.chain(details.address_components) - .find(component => _.contains(component.types, 'postal_code')) - .get('long_name') - .value(); + const streetNumber = this.getAddressInfo('street_number', 'long_name'); + const streetName = this.getAddressInfo('route', 'long_name'); + const city = this.getAddressInfo('locality', 'long_name'); + const state = this.getAddressInfo('administrative_area_level_1', 'short_name'); + const zipCode = this.getAddressInfo('postal_code', 'long_name'); // Trigger text change events for each of the individual fields being saved on the server this.props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); From 23bada320017f9e0da8ee10c61a0f5e24a1e5253 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:29:52 -0600 Subject: [PATCH 18/29] slight name change --- src/components/AddressSearch.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 7c59e2f36217..32695b78f165 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -43,7 +43,7 @@ class AddressSearch extends React.Component { this.googlePlacesRef.current?.setAddressText(this.props.value); } - getAddressInfo(field, nameType) { + getAddressComponent(field, nameType) { return _.chain(details.address_components) .find(component => _.contains(component.types, field)) .get(nameType) @@ -56,11 +56,11 @@ class AddressSearch extends React.Component { saveLocationDetails = (details) => { if (details.address_components) { // Gather the values from the Google details - const streetNumber = this.getAddressInfo('street_number', 'long_name'); - const streetName = this.getAddressInfo('route', 'long_name'); - const city = this.getAddressInfo('locality', 'long_name'); - const state = this.getAddressInfo('administrative_area_level_1', 'short_name'); - const zipCode = this.getAddressInfo('postal_code', 'long_name'); + const streetNumber = this.getAddressComponent('street_number', 'long_name'); + const streetName = this.getAddressComponent('route', 'long_name'); + const city = this.getAddressComponent('locality', 'long_name'); + const state = this.getAddressComponent('administrative_area_level_1', 'short_name'); + const zipCode = this.getAddressComponent('postal_code', 'long_name'); // Trigger text change events for each of the individual fields being saved on the server this.props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); From d4aff2d19d17c95aef1b1fef385f466bdb399be2 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:36:16 -0600 Subject: [PATCH 19/29] style --- src/components/AddressSearch.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 32695b78f165..db4dd1722ec2 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -8,10 +8,10 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; import ExpensiTextInput from './ExpensiTextInput'; -// The error that's being thrown below will be ignored until we fork the -// react-native-google-places-autocomplete repo and replace the +// The error that's being thrown below will be ignored until we fork the +// react-native-google-places-autocomplete repo and replace the // VirtualizedList component with a VirtualizedList-backed instead -LogBox.ignoreLogs([ 'VirtualizedLists should never be nested']); +LogBox.ignoreLogs(['VirtualizedLists should never be nested']); const propTypes = { /** The label to display for the field */ @@ -43,11 +43,11 @@ class AddressSearch extends React.Component { this.googlePlacesRef.current?.setAddressText(this.props.value); } - getAddressComponent(field, nameType) { + getAddressComponent(object, field, nameType) { return _.chain(details.address_components) - .find(component => _.contains(component.types, field)) - .get(nameType) - .value(); + .find(component => _.contains(component.types, field)) + .get(nameType) + .value(); } /** From ef4d2dbc5013c7db4f435e8df93c390828399cb9 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:36:36 -0600 Subject: [PATCH 20/29] thread details into the helper method --- src/components/AddressSearch.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index db4dd1722ec2..9311b9e0e44b 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -56,11 +56,11 @@ class AddressSearch extends React.Component { saveLocationDetails = (details) => { if (details.address_components) { // Gather the values from the Google details - const streetNumber = this.getAddressComponent('street_number', 'long_name'); - const streetName = this.getAddressComponent('route', 'long_name'); - const city = this.getAddressComponent('locality', 'long_name'); - const state = this.getAddressComponent('administrative_area_level_1', 'short_name'); - const zipCode = this.getAddressComponent('postal_code', 'long_name'); + const streetNumber = this.getAddressComponent(details, 'street_number', 'long_name'); + const streetName = this.getAddressComponent(details, 'route', 'long_name'); + const city = this.getAddressComponent(details, 'locality', 'long_name'); + const state = this.getAddressComponent(details, 'administrative_area_level_1', 'short_name'); + const zipCode = this.getAddressComponent(details, 'postal_code', 'long_name'); // Trigger text change events for each of the individual fields being saved on the server this.props.onChangeText('addressStreet', `${streetNumber} ${streetName}`); From 3d7f62495960c355e25cb3e761baedd7169c3573 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Tue, 5 Oct 2021 13:41:46 -0600 Subject: [PATCH 21/29] facepalm --- 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 9311b9e0e44b..cfb2226c5840 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -44,7 +44,7 @@ class AddressSearch extends React.Component { } getAddressComponent(object, field, nameType) { - return _.chain(details.address_components) + return _.chain(object.address_components) .find(component => _.contains(component.types, field)) .get(nameType) .value(); From b7116c02bb7e871bdeb282843675c877730eb0ee Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 15:28:49 -0600 Subject: [PATCH 22/29] used built in style setter --- src/components/AddressSearch.js | 32 +++++++++++--------------------- 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index cfb2226c5840..53576994f330 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -93,27 +93,17 @@ class AddressSearch extends React.Component { containerStyles: this.props.containerStyles, }} styles={{ - textInputContainer: [styles.googleSearchTextInputContainer], - }} - renderRow={(data, index) => { - // This is using a custom render component in order for the styles to be properly applied to the top row. - // The styles for the top and bottom row could have instead by passed to `styles.listView` for - // , however the list is always visible, even when there are no results. - // Because of this, if the padding and borders are applied to the list, even when it's empty, it takes - // up space in the UI and looks like a horizontal line with padding around it. - // Using this custom render, the rounded borders and padding can be applied to the first row - // so that they are only visible when there are results. - const rowStyles = [styles.pv4, styles.ph3, styles.borderLeft, styles.borderRight, styles.borderBottom]; - - if (index === 0) { - rowStyles.push(styles.borderTop); - rowStyles.push(styles.mt2); - } - return ( - - {data.description} - - ); + textInputContainer: [styles.flexColumn], + listView: [styles.borderTopRounded, styles.borderBottomRounded, styles.mt4, styles.overflowAuto,], + row: [ + styles.pv4, + styles.ph3, + styles.borderLeft, + styles.borderRight, + styles.overflowAuto, + styles.googleSearchRowWidth, + ], + separator: [styles.googleSearchSeperator] }} /> ); From 6b243d5d77fb825b29c149686660f1baf404d7dd Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 15:28:56 -0600 Subject: [PATCH 23/29] added a few custom styles --- src/styles/styles.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/styles/styles.js b/src/styles/styles.js index cd617cf7a523..7ee15c4a66ff 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2058,6 +2058,15 @@ const styles = { googleSearchTextInputContainer: { flexDirection: 'column', }, + + googleSearchSeperator: { + height: '1px', + backgroundColor: themeColors.border, + }, + + googleSearchRowWidth: { + maxWidth: '320px', + }, }; const baseCodeTagStyles = { From b5d9c2c26505883814161f84e72986b3a8a51a6b Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 15:35:00 -0600 Subject: [PATCH 24/29] remove unneeded imports --- 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 53576994f330..13354fc8925a 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import React from 'react'; import PropTypes from 'prop-types'; -import {View, Text, LogBox} from 'react-native'; +import {LogBox} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import CONFIG from '../CONFIG'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; From ebe85227d37ef1650e01efe49386b6fe634a8034 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 15:37:43 -0600 Subject: [PATCH 25/29] js style --- src/components/AddressSearch.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 13354fc8925a..9ba3aa1888a3 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -94,7 +94,7 @@ class AddressSearch extends React.Component { }} styles={{ textInputContainer: [styles.flexColumn], - listView: [styles.borderTopRounded, styles.borderBottomRounded, styles.mt4, styles.overflowAuto,], + listView: [styles.borderTopRounded, styles.borderBottomRounded, styles.mt4, styles.overflowAuto], row: [ styles.pv4, styles.ph3, @@ -103,7 +103,7 @@ class AddressSearch extends React.Component { styles.overflowAuto, styles.googleSearchRowWidth, ], - separator: [styles.googleSearchSeperator] + separator: [styles.googleSearchSeperator], }} /> ); From 65ce8ac1f14dc32a7b60f0c2a254f5c0fcc6fa6d Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 16:16:45 -0600 Subject: [PATCH 26/29] text style --- src/components/AddressSearch.js | 3 ++- src/styles/styles.js | 10 +++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 9ba3aa1888a3..808fd3af66af 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -101,8 +101,9 @@ class AddressSearch extends React.Component { styles.borderLeft, styles.borderRight, styles.overflowAuto, - styles.googleSearchRowWidth, + styles.googleSearchRow, ], + description: [styles.googleSearchText], separator: [styles.googleSearchSeperator], }} /> diff --git a/src/styles/styles.js b/src/styles/styles.js index 7ee15c4a66ff..49a65d72a57e 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2064,9 +2064,17 @@ const styles = { backgroundColor: themeColors.border, }, - googleSearchRowWidth: { + googleSearchRow: { maxWidth: '320px', }, + + googleSearchText: { + color: themeColors.text, + fontSize: variables.fontSizeNormal, + lineHeight: variables.fontSizeNormalHeight, + fontFamily: fontFamily.GTA, + flex: 1, + } }; const baseCodeTagStyles = { From 911979c75ce3c3cab12085764e1b57dba3e7a6e7 Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 16:18:03 -0600 Subject: [PATCH 27/29] style --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 49a65d72a57e..6bd5db594192 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2074,7 +2074,7 @@ const styles = { lineHeight: variables.fontSizeNormalHeight, fontFamily: fontFamily.GTA, flex: 1, - } + }, }; const baseCodeTagStyles = { From b8f1e0592b16da9efbb9a2ba354e12f2b7c992bd Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Wed, 6 Oct 2021 17:05:24 -0600 Subject: [PATCH 28/29] style adjustment --- src/components/AddressSearch.js | 12 ++++++++---- src/styles/styles.js | 6 +----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 808fd3af66af..fe863ddd1529 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -94,14 +94,18 @@ class AddressSearch extends React.Component { }} styles={{ textInputContainer: [styles.flexColumn], - listView: [styles.borderTopRounded, styles.borderBottomRounded, styles.mt4, styles.overflowAuto], + listView: [ + styles.borderTopRounded, + styles.borderBottomRounded, + styles.mt4, + styles.overflowAuto, + styles.borderLeft, + styles.borderRight, + ], row: [ styles.pv4, styles.ph3, - styles.borderLeft, - styles.borderRight, styles.overflowAuto, - styles.googleSearchRow, ], description: [styles.googleSearchText], separator: [styles.googleSearchSeperator], diff --git a/src/styles/styles.js b/src/styles/styles.js index 6bd5db594192..f3b6a0a8d5a9 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2060,14 +2060,10 @@ const styles = { }, googleSearchSeperator: { - height: '1px', + height: 1, backgroundColor: themeColors.border, }, - googleSearchRow: { - maxWidth: '320px', - }, - googleSearchText: { color: themeColors.text, fontSize: variables.fontSizeNormal, From dd9f01fb69cbcec25281eeb691f809915e97e57f Mon Sep 17 00:00:00 2001 From: Luke Donahue Date: Thu, 7 Oct 2021 11:01:20 -0600 Subject: [PATCH 29/29] decrease top margin on dropdown --- 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 fe863ddd1529..3769cd2c0cf1 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -97,7 +97,7 @@ class AddressSearch extends React.Component { listView: [ styles.borderTopRounded, styles.borderBottomRounded, - styles.mt4, + styles.mt1, styles.overflowAuto, styles.borderLeft, styles.borderRight,