Merge pull request #26385 from r3nya/new-react-places-autocomplet

[react-places-autocomplete] Update typings

types/react-places-autocomplete/index.d.ts

@@ -1,6 +1,7 @@
 // Type definitions for react-places-autocomplete 6.1
 // Project: https://github.com/kenny-hibino/react-places-autocomplete/
 // Definitions by: Guilherme Hübner <https://github.com/guilhermehubner>
+//                 Andrew Makarov <https://github.com/r3nya>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.6
 //
@@ -56,6 +57,11 @@ export interface PropTypes {
 }
 
 export function geocodeByAddress(address: string, callback: (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => void): void;
+export function geocodeByAddress(address: string): Promise<google.maps.GeocoderResult[]>;
+
 export function geocodeByPlaceId(placeId: string, callback: (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => void): void;
+export function geocodeByPlaceId(placeId: string): Promise<google.maps.GeocoderResult[]>;
+
+export function getLatLng(results: google.maps.GeocoderResult): Promise<google.maps.LatLngLiteral>;
 
 export default class PlacesAutocomplete extends React.Component<PropTypes> {}

types/react-places-autocomplete/react-places-autocomplete-tests.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete';
+
+class Test extends React.Component {
+    state = {
+        address: 'San Francisco, CA',
+        placeId: '12345',
+    };
+
+    handleFormSubmit = (event: any) => {
+        event.preventDefault();
+
+        const { address, placeId } = this.state;
+
+        // Old API
+        geocodeByAddress(address, (results, status) => {
+            const latLng = getLatLng(results[0]);
+            console.info(latLng, status);
+        });
+
+        geocodeByPlaceId(placeId, (results, status) => {
+            const latLng = getLatLng(results[0]);
+            console.info(latLng, status);
+        });
+
+        // New API
+        geocodeByAddress(address)
+            .then((results) => getLatLng(results[0]))
+            .then((latLng) => console.log('Success', latLng))
+            .catch((error) => console.error('Error', error));
+
+        geocodeByPlaceId(placeId)
+            .then((results) => getLatLng(results[0]))
+            .then((latLng) => console.log('Success', latLng))
+            .catch((error) => console.error('Error', error));
+    }
+
+    onChange = (address: string) => this.setState({ address });
+
+    render() {
+        const inputProps = {
+            value: this.state.address,
+            onChange: this.onChange,
+        };
+
+        return (
+            <form onSubmit={this.handleFormSubmit}>
+                <PlacesAutocomplete inputProps={inputProps} />
+            </form>
+        );
+    }
+}

types/react-places-autocomplete/tsconfig.json

@@ -1,12 +1,19 @@
 {
-  "files": ["index.d.ts"],
+  "files": [
+    "index.d.ts",
+    "react-places-autocomplete-tests.tsx"
+  ],
   "compilerOptions": {
     "module": "commonjs",
-    "lib": ["es6"],
+    "lib": [
+        "es6",
+        "dom"
+    ],
     "noImplicitAny": true,
     "noImplicitThis": true,
     "strictNullChecks": true,
     "strictFunctionTypes": true,
+    "jsx": "react",
     "baseUrl": "../",
     "typeRoots": ["../"],
     "types": [],