Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
{
"presets": ["es2015", "react", "stage-0", "minify"]
"presets": [
"@babel/preset-react",
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"targets": {
"ie": "11"
},
"corejs": "3.6.5"
}
]
// TODO: Minify breaks IE 11
// ["minify"]
]
}
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

1. [ReactGoogleAutocomplete](#reactgoogleautocomplete) is a simple html input component that provides functionality of the [google places widgets](https://developers.google.com/maps/documentation/javascript/reference/places-widget#AutocompleteOptions).
2. [usePlacesWidget](#useplaceswidget) is a react hook that provides the same functionality as `ReactGoogleAutocomplete` does but it does not create any dom elements. Instead, it gives you back a react ref which you can set to any input you want.
3. [usePlacesAutocompleteService](#useplacesautocompleteservice) is a more complex tool. It uses [google places autocomplete service](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service) and it provides all the functionality to you as the returned value. In addition to that, you can set a `debounce` prop which will reduce the amount of requests users send to Google.
3. [usePlacesAutocompleteService](#useplacesautocompleteservice) is a more complex react hook. It uses [google places autocomplete service](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service) and it provides all the functionality to you as the returned value. In addition to that, you can set a `debounce` prop which will reduce the amount of requests users send to Google.

## Install

Expand Down Expand Up @@ -153,6 +153,7 @@ The hook has only one config argument.
- `googleMapsScriptBaseUrl`: Provide custom google maps url. By default `https://maps.googleapis.com/maps/api/js`.
- `debounce`: Number of milliseconds to accumulate responses for.
- `options`: Default [options](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#QueryAutocompletionRequest) which will be passed to every request.
- `sessionToken`: If true then a [session token](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompleteSessionToken) will be attached to every request.

### Returned value

Expand Down
105 changes: 102 additions & 3 deletions lib/ReactGoogleAutocomplete.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,102 @@
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_react=require("react"),_react2=_interopRequireDefault(_react),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),_usePlacesWidget2=require("./usePlacesWidget"),_usePlacesWidget3=_interopRequireDefault(_usePlacesWidget2);function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _objectWithoutProperties(a,b){var c={};for(var d in a)0<=b.indexOf(d)||Object.prototype.hasOwnProperty.call(a,d)&&(c[d]=a[d]);return c}function ReactGoogleAutocomplete(a){var b=a.onPlaceSelected,c=a.apiKey,d=a.inputAutocompleteValue,e=a.options,f=a.googleMapsScriptBaseUrl,g=a.refProp,h=_objectWithoutProperties(a,["onPlaceSelected","apiKey","inputAutocompleteValue","options","googleMapsScriptBaseUrl","refProp"]),i=(0,_usePlacesWidget3.default)({ref:g,googleMapsScriptBaseUrl:f,onPlaceSelected:b,apiKey:c,inputAutocompleteValue:d,options:e}),j=i.ref;return _react2.default.createElement("input",_extends({ref:j},h))}ReactGoogleAutocomplete.propTypes={apiKey:_propTypes2.default.string,ref:_propTypes2.default.oneOfType([// Either a function
_propTypes2.default.func,// Or anything shaped { current: any }
_propTypes2.default.shape({current:_propTypes2.default.any})]),googleMapsScriptBaseUrl:_propTypes2.default.string,onPlaceSelected:_propTypes2.default.func,inputAutocompleteValue:_propTypes2.default.string,options:_propTypes2.default.shape({componentRestrictions:_propTypes2.default.object,bounds:_propTypes2.default.object,location:_propTypes2.default.object,offset:_propTypes2.default.number,origin:_propTypes2.default.object,radius:_propTypes2.default.number,sessionToken:_propTypes2.default.object,types:_propTypes2.default.arrayOf(_propTypes2.default.string)})},exports.default=(0,_react.forwardRef)(function(a,b){return _react2.default.createElement(ReactGoogleAutocomplete,_extends({},a,{refProp:b}))});
"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

require("core-js/modules/es.symbol.js");

require("core-js/modules/es.object.assign.js");

require("core-js/modules/es.array.iterator.js");

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.string.iterator.js");

require("core-js/modules/es.weak-map.js");

require("core-js/modules/web.dom-collections.iterator.js");

require("core-js/modules/es.object.get-own-property-descriptor.js");

require("core-js/modules/es.symbol.description.js");

require("core-js/modules/es.symbol.iterator.js");

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;

require("core-js/modules/es.object.keys.js");

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _usePlacesWidget2 = _interopRequireDefault(require("./usePlacesWidget"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function ReactGoogleAutocomplete(props) {
var onPlaceSelected = props.onPlaceSelected,
apiKey = props.apiKey,
inputAutocompleteValue = props.inputAutocompleteValue,
options = props.options,
googleMapsScriptBaseUrl = props.googleMapsScriptBaseUrl,
refProp = props.refProp,
rest = _objectWithoutProperties(props, ["onPlaceSelected", "apiKey", "inputAutocompleteValue", "options", "googleMapsScriptBaseUrl", "refProp"]);

var _usePlacesWidget = (0, _usePlacesWidget2.default)({
ref: refProp,
googleMapsScriptBaseUrl: googleMapsScriptBaseUrl,
onPlaceSelected: onPlaceSelected,
apiKey: apiKey,
inputAutocompleteValue: inputAutocompleteValue,
options: options
}),
ref = _usePlacesWidget.ref;

return /*#__PURE__*/_react.default.createElement("input", _extends({
ref: ref
}, rest));
}

ReactGoogleAutocomplete.propTypes = {
apiKey: _propTypes.default.string,
ref: _propTypes.default.oneOfType([// Either a function
_propTypes.default.func, // Or anything shaped { current: any }
_propTypes.default.shape({
current: _propTypes.default.any
})]),
googleMapsScriptBaseUrl: _propTypes.default.string,
onPlaceSelected: _propTypes.default.func,
inputAutocompleteValue: _propTypes.default.string,
options: _propTypes.default.shape({
componentRestrictions: _propTypes.default.object,
bounds: _propTypes.default.object,
location: _propTypes.default.object,
offset: _propTypes.default.number,
origin: _propTypes.default.object,
radius: _propTypes.default.number,
sessionToken: _propTypes.default.object,
types: _propTypes.default.arrayOf(_propTypes.default.string)
})
};

var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
return /*#__PURE__*/_react.default.createElement(ReactGoogleAutocomplete, _extends({}, props, {
refProp: ref
}));
});

exports.default = _default;
9 changes: 8 additions & 1 deletion lib/constants.js
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var GOOGLE_MAP_SCRIPT_BASE_URL=exports.GOOGLE_MAP_SCRIPT_BASE_URL="https://maps.googleapis.com/maps/api/js";
"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GOOGLE_MAP_SCRIPT_BASE_URL = void 0;
var GOOGLE_MAP_SCRIPT_BASE_URL = "https://maps.googleapis.com/maps/api/js";
exports.GOOGLE_MAP_SCRIPT_BASE_URL = GOOGLE_MAP_SCRIPT_BASE_URL;
24 changes: 23 additions & 1 deletion lib/index.js
Original file line number Diff line number Diff line change
@@ -1 +1,23 @@
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _ReactGoogleAutocomplete=require("./ReactGoogleAutocomplete");Object.defineProperty(exports,"default",{enumerable:!0,get:function a(){return _interopRequireDefault(_ReactGoogleAutocomplete).default}});var _usePlacesWidget=require("./usePlacesWidget");Object.defineProperty(exports,"usePlacesWidget",{enumerable:!0,get:function a(){return _interopRequireDefault(_usePlacesWidget).default}});function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function get() {
return _ReactGoogleAutocomplete.default;
}
});
Object.defineProperty(exports, "usePlacesWidget", {
enumerable: true,
get: function get() {
return _usePlacesWidget.default;
}
});

var _ReactGoogleAutocomplete = _interopRequireDefault(require("./ReactGoogleAutocomplete"));

var _usePlacesWidget = _interopRequireDefault(require("./usePlacesWidget"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
22 changes: 22 additions & 0 deletions lib/usePlacesAutocompleteService.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
interface usePlacesAutocompleteServiceConfig {
apiKey?: string;
googleMapsScriptBaseUrl?: string;
debounce?: number;
options?: google.maps.places.QueryAutocompletionRequest;
sessionToken?: boolean;
}

interface usePlacesAutocompleteServiceResponse {
placePredictions: google.maps.places.AutocompletePrediction[];
isPlacePredictionsLoading: boolean;
getPlacePredictions: (opt: google.maps.places.AutocompletionRequest) => void;
queryPredictions: google.maps.places.QueryAutocompletePrediction[];
isQueryPredictionsLoading: boolean;
getQueryPredictions: (
opt: google.maps.places.QueryAutocompletionRequest
) => void;
}

export default function usePlacesAutocompleteService(
options: usePlacesAutocompleteServiceConfig
): usePlacesAutocompleteServiceResponse;
Loading