@navinc/base-react-components
Version:
Nav's Pattern Library
44 lines (43 loc) • 2.22 kB
TypeScript
import { BaseStringInputProps } from '../base-string-input/base-string-input.js';
export type AddressTypeaheadAddress = {
city: string;
state: string;
street1: string;
zip: string;
country: string;
};
export type BaseAddressTypeaheadProps = BaseStringInputProps & {
onAddressSelect?: (addr: AddressTypeaheadAddress) => void;
};
/** Use the `<BaseAddressTypeahead />` component when full address information is needed. The BaseAddressTypeahead component is a fully uncontrolled component. Nav uses Google Maps Autocomplete api to autocomplete and validate addresses. It accepts an `onAddressSelect` function as a prop which is called once a complete addressed is selected from the Google Maps dropdown list. The `onAddressSelect` function is passed a structured address with the following fields: `street1`, `city`, `state`, `zip`.
*
* @example
* ```tsx
* <BaseAddressTypeahead
* onAddressSelect={({ street1, city, state, zip }) => console.log({ street1, city, state, zip })}
* />
* ```
*
* #### Props
*
* BaseAddressTypeahead accepts all the props the Input component accepts -- including `onChange` -- with the exception of `value` -- use `defaultValue` to populate with an existing value at mount time -- and `type` -- the type is internally assigned the value of `text` to not interfere with the Autocomplete functionality -- and with the following additions.
*
* ##### onAddressSelect
*
* The GoogleMaps Autocomplete API binds to an input element and provides a dropdown of autocompleted addresses to choose from. When the user clicks on one of these, the input's value is updated to reflect the address string and the BaseAddressTypeahead component calls `onAddressSelect` passing it an object of address parts:
*
* ```
* {
* street1: String,
* city: String,
* state: String,
* zip: String
* }
* ```
*/
export declare const BaseAddressTypeahead: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "checked"> & {
value?: string;
uncontrolled?: boolean;
} & {
onAddressSelect?: (addr: AddressTypeaheadAddress) => void;
} & import("react").RefAttributes<HTMLInputElement>>;