@wix/design-system/dist/types/GoogleAddressInput/index.d.ts

@wix/design-system

import * as React from 'react';
import { InputProps } from '../Input';
import { GoogleMapsClient } from '../clients';

type Address = {
  formatted: string;
  formattedStreetAddress: string;
  latLng: {
    lat: string;
    lng: string;
  };
  approximate: boolean;
  city?: string;
  state?: string;
  country?: string;
  /** Country code used to help with suggestions and geocoding */
  countryCode?: string;
  street?: string;
  number?: string;
  postalCode?: string;
  subpremise?: string;
};

export interface GoogleAddressInputProps extends Omit<
  InputProps,
  'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'onPaste'
> {
  /** Placeholder for the input box */
  placeholder?: string;
  /** Value to place before every search term (normally should not be used) */
  valuePrefix?: string;
  /** Country code used to help with suggestions and geocoding */
  countryCode?: string;
  /** Controlled mode - value to display */
  value?: string;
  /** Sets UI to indicate a status */
  status?: InputProps['status'];
  /** The status message to display when hovering the status icon, if not given or empty there will be no tooltip */
  statusMessage?: InputProps['statusMessage'];
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
  onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
  /** Callback for results. Will return an object containing: originValue (value in the search), googleResult (google geocode result for the search), address (which will include: formatted (google formatted address), country, countryCode, street, number, postalCode, latLng (lat, lng)) */
  onSet?: (params: {
    originValue: string;
    googleResult: any;
    address: Address;
  }) => void;
  /** Show or hide magnifying glass icon
   * @default true
   */
  magnifyingGlass?: boolean;
  /** Sets the input to readOnly */
  readOnly?: boolean;
  /** @default true */
  autoSelect?: boolean;
  /** Clear the suggestions list upon input blur
   * @default true
   */
  clearSuggestionsOnBlur?: boolean;
  /** If set to `true`, we will attempt to get a Google location from the input's text if there are no suggestions. This is useful when looking for locations for which google does not give suggestions - for example: Apartment/Apt
   * @default false
   */
  fallbackToManual?: boolean;
  /** Shows the Powered By Google credit in a fixed footer
   * @default false
   */
  poweredByGoogle?: boolean;
  /** Display a footer as the last suggestion in the list */
  footer?: string;
  /** Limit the autocomplete to specific types (see [here](https://developers.google.com/places/supported_types#table3) for list) */
  types?: any[];
  /** Lower level filtering of autocomplete result types (see [here](https://developers.google.com/places/supported_types) for list)  */
  filterTypes?: any[];
  /** Fields indicating which types of Places data to return (see [here](https://developers.google.com/maps/documentation/javascript/places#place_details)**/
  placeDetailsFields?: any[];
  /** Set the footer's options (e.g. disabled, overrideStyles, etc. ) */
  footerOptions?: object;
  /** Sets how to get more details for a place (e.g. geocode, places, etc) */
  handler?: 'geocode' | 'places';
  /** Google map client implementation (should implement autocomplete and geocode functions). Normally you would use @wix/design-system/clients/GoogleMapsClient */
  Client: new () => GoogleMapsClient;
}

export default class GoogleAddressInput extends React.Component<GoogleAddressInputProps> {
  select: () => void;
  focus: () => void;
}