Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 24x 24x 24x 24x 24x 24x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 24x | import { FormField as FormFieldType } from '@bigcommerce/checkout-sdk';
import { FieldProps } from 'formik';
import React, { memo, useCallback, useMemo, FunctionComponent } from 'react';
import { TranslatedString } from '../../locale';
import { AutocompleteItem } from '../../ui/autocomplete';
import { FormField } from '../../ui/form';
import { getAddressFormFieldInputId } from '../getAddressFormFieldInputId';
import GoogleAutocomplete from './GoogleAutocomplete';
export interface GoogleAutocompleteFormFieldProps {
apiKey: string;
field: FormFieldType;
countryCode?: string;
supportedCountries: string[];
nextElement?: HTMLElement;
parentFieldName?: string;
onSelect(place: google.maps.places.PlaceResult, item: AutocompleteItem): void;
onToggleOpen?(state: { inputValue: string; isOpen: boolean }): void;
onChange(value: string, isOpen: boolean): void;
}
const GoogleAutocompleteFormField: FunctionComponent<GoogleAutocompleteFormFieldProps> = ({
field: {
name,
},
countryCode,
supportedCountries,
parentFieldName,
nextElement,
apiKey,
onSelect,
onChange,
onToggleOpen,
}) => {
const fieldName = parentFieldName ? `${parentFieldName}.${name}` : name;
const labelContent = useMemo(() => (
<TranslatedString id="address.address_line_1_label" />
), []);
const inputProps = useMemo(() => ({
className: 'form-input optimizedCheckout-form-input',
id: getAddressFormFieldInputId(name),
}), [name]);
const renderInput = useCallback(({ field }: FieldProps) => (
<GoogleAutocomplete
apiKey={ apiKey }
componentRestrictions={ countryCode ?
{ country: countryCode } :
undefined }
initialValue={ field.value }
inputProps={ inputProps }
isAutocompleteEnabled={ countryCode ?
supportedCountries.indexOf(countryCode) > -1 :
false }
nextElement={ nextElement }
onChange={ onChange }
onSelect={ onSelect }
onToggleOpen={ onToggleOpen }
/>
), [
apiKey,
countryCode,
inputProps,
nextElement,
onChange,
onSelect,
onToggleOpen,
supportedCountries,
]);
return (
<div className={ `dynamic-form-field dynamic-form-field--addressLineAutocomplete` }>
<FormField
input={ renderInput }
labelContent={ labelContent }
name={ fieldName }
/>
</div>
);
};
export default memo(GoogleAutocompleteFormField);
|