Socket
Socket
Sign inDemoInstall

react-geosuggest

Package Overview
Dependencies
42
Maintainers
3
Versions
64
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.15.1 to 1.16.0

module/defaults.js
module/filter-input-attributes.js
module/input.js
module/suggest-item.js
module/suggest-list.js

12

CHANGELOG.md

@@ -0,1 +1,13 @@

## 1.16.0 (2016-02-05)
#### Bug Fixes
* autofocus -> autoFocus ([7f9daa0](7f9daa0b4d1813704448037322787e4004309e49))
* use ignoreBlur flag to avoid hiding suggests when clicking one ([4fa6bd2](4fa6bd2d5e381bfb55a53db86afbd9519c333958))
* Escape user input for regex to avoid Exception ([95b01ba](95b01ba1dae31d6780c4ed5fd72b9cfb4b3e10c2))
#### Features
* Use labelId instead of address to get the geocode ([f95d2a3](f95d2a337021b3ce49ef6094f53c388de9aa20d9))
### 1.15.1 (2016-01-18)

@@ -2,0 +14,0 @@

684

module/Geosuggest.js

@@ -5,6 +5,18 @@ /* global window */

Object.defineProperty(exports, '__esModule', {
value: true
});
var _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; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _react = require('react');

@@ -14,51 +26,44 @@

var _GeosuggestItem = require('./GeosuggestItem');
var _classnames = require('classnames');
var _GeosuggestItem2 = _interopRequireDefault(_GeosuggestItem);
var _classnames2 = _interopRequireDefault(_classnames);
// eslint-disable-line
var _defaults = require('./defaults');
var _inputAttributes = require('./input-attributes');
var _defaults2 = _interopRequireDefault(_defaults);
var _inputAttributes2 = _interopRequireDefault(_inputAttributes);
var _filterInputAttributes = require('./filter-input-attributes');
var Geosuggest = _react2['default'].createClass({
displayName: 'Geosuggest',
var _filterInputAttributes2 = _interopRequireDefault(_filterInputAttributes);
var _inputJsx = require('./input.jsx');
var _inputJsx2 = _interopRequireDefault(_inputJsx);
var _suggestListJsx = require('./suggest-list.jsx');
var _suggestListJsx2 = _interopRequireDefault(_suggestListJsx);
// Escapes special characters in user input for regex
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
}
/**
* Entry point for the Geosuggest component
*/
var Geosuggest = (function (_React$Component) {
_inherits(Geosuggest, _React$Component);
/**
* Get the default props
* @return {Object} The state
* The constructor. Sets the initial state.
* @param {Object} props The properties object.
*/
getDefaultProps: function getDefaultProps() {
return {
fixtures: [],
initialValue: '',
placeholder: 'Search places',
disabled: false,
className: '',
inputClassName: '',
location: null,
radius: null,
bounds: null,
country: null,
types: null,
googleMaps: null,
onSuggestSelect: function onSuggestSelect() {},
onFocus: function onFocus() {},
onBlur: function onBlur() {},
onChange: function onChange() {},
skipSuggest: function skipSuggest() {},
getSuggestLabel: function getSuggestLabel(suggest) {
return suggest.description;
},
autoActivateFirstSuggest: false
};
},
/**
* Get the initial state
* @return {Object} The state
*/
getInitialState: function getInitialState() {
return {
function Geosuggest(props) {
_classCallCheck(this, Geosuggest);
_get(Object.getPrototypeOf(Geosuggest.prototype), 'constructor', this).call(this, props);
this.state = {
isMounted: false,

@@ -70,384 +75,357 @@ isSuggestsHidden: true,

};
},
}
/**
* Change inputValue if prop changes
* @param {Object} props The new props
* Default values for the properties
* @type {Object}
*/
componentWillReceiveProps: function componentWillReceiveProps(props) {
if (this.props.initialValue !== props.initialValue) {
this.setState({ userInput: props.initialValue });
}
},
/**
* Called on the client side after component is mounted.
* Google api sdk object will be obtained and cached as a instance property.
* Necessary objects of google api will also be determined and saved.
* Change inputValue if prop changes
* @param {Object} props The new props
*/
componentDidMount: function componentDidMount() {
this.setInputValue(this.props.initialValue);
var googleMaps = this.props.googleMaps || window.google && // eslint-disable-line no-extra-parens
window.google.maps || this.googleMaps;
if (!googleMaps) {
console.error( // eslint-disable-line no-console
'Google map api was not found in the page.');
return;
_createClass(Geosuggest, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(props) {
if (this.props.initialValue !== props.initialValue) {
this.setState({ userInput: props.initialValue });
}
}
this.googleMaps = googleMaps;
this.autocompleteService = new googleMaps.places.AutocompleteService();
this.geocoder = new googleMaps.Geocoder();
/**
* Called on the client side after component is mounted.
* Google api sdk object will be obtained and cached as a instance property.
* Necessary objects of google api will also be determined and saved.
*/
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.setState({ userInput: this.props.initialValue });
this.setState({ isMounted: true });
},
var googleMaps = this.props.googleMaps || window.google && // eslint-disable-line no-extra-parens
window.google.maps || this.googleMaps;
/**
* When the component will unmount
*/
componentWillUnmount: function componentWillUnmount() {
this.setState({ isMounted: false });
},
if (!googleMaps) {
console.error( // eslint-disable-line no-console
'Google map api was not found in the page.');
return;
}
this.googleMaps = googleMaps;
/**
* Method used for setting initial value.
* @param {string} value to set in input
*/
setInputValue: function setInputValue(value) {
this.setState({ userInput: value });
},
this.autocompleteService = new googleMaps.places.AutocompleteService();
this.geocoder = new googleMaps.Geocoder();
/**
* When the input got changed
*/
onInputChange: function onInputChange() {
var _this = this;
this.setState({ isMounted: true });
}
var userInput = this.refs.geosuggestInput.value;
/**
* When the component will unmount
*/
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.setState({ isMounted: false });
}
this.setState({ userInput: userInput }, function () {
_this.showSuggests();
_this.props.onChange(userInput);
});
},
/**
* When the input got changed
* @param {String} userInput The input value of the user
*/
}, {
key: 'onInputChange',
value: function onInputChange(userInput) {
var _this = this;
/**
* When the input gets focused
*/
onFocus: function onFocus() {
this.props.onFocus();
this.showSuggests();
},
this.setState({ userInput: userInput }, function () {
_this.showSuggests();
_this.props.onChange(userInput);
});
}
/**
* Update the value of the user input
* @param {String} value the new value of the user input
*/
update: function update(value) {
this.setState({ userInput: value });
this.props.onChange(value);
},
/**
* When the input gets focused
*/
}, {
key: 'onInputFocus',
value: function onInputFocus() {
this.props.onFocus();
this.showSuggests();
}
/*
* Clear the input and close the suggestion pane
*/
clear: function clear() {
var _this2 = this;
/**
* When the input gets blurred
*/
}, {
key: 'onInputBlur',
value: function onInputBlur() {
if (!this.state.ignoreBlur) {
this.hideSuggests();
}
}
this.setState({ userInput: '' }, function () {
return _this2.hideSuggests();
});
},
/**
* Search for new suggests
*/
searchSuggests: function searchSuggests() {
var _this3 = this;
if (!this.state.userInput) {
this.updateSuggests();
return;
/**
* Update the value of the user input
* @param {String} userInput the new value of the user input
*/
}, {
key: 'update',
value: function update(userInput) {
this.setState({ userInput: userInput });
this.props.onChange(userInput);
}
var options = {
input: this.state.userInput
};
/*
* Clear the input and close the suggestion pane
*/
}, {
key: 'clear',
value: function clear() {
var _this2 = this;
if (this.props.location) {
options.location = this.props.location;
this.setState({ userInput: '' }, function () {
return _this2.hideSuggests();
});
}
if (this.props.radius) {
options.radius = this.props.radius;
}
/**
* Search for new suggests
*/
}, {
key: 'searchSuggests',
value: function searchSuggests() {
var _this3 = this;
if (this.props.bounds) {
options.bounds = this.props.bounds;
}
if (!this.state.userInput) {
this.updateSuggests();
return;
}
if (this.props.types) {
options.types = this.props.types;
}
if (this.props.country) {
options.componentRestrictions = {
country: this.props.country
var options = {
input: this.state.userInput
};
}
this.autocompleteService.getPlacePredictions(options, function (suggestsGoogle) {
_this3.updateSuggests(suggestsGoogle);
['location', 'radius', 'bounds', 'types'].forEach(function (option) {
if (_this3.props[option]) {
options[option] = _this3.props[option];
}
});
if (_this3.props.autoActivateFirstSuggest) {
_this3.activateSuggest('next');
if (this.props.country) {
options.componentRestrictions = {
country: this.props.country
};
}
});
},
/**
* Update the suggests
* @param {Object} suggestsGoogle The new google suggests
*/
updateSuggests: function updateSuggests(suggestsGoogle) {
var _this4 = this;
this.autocompleteService.getPlacePredictions(options, function (suggestsGoogle) {
_this3.updateSuggests(suggestsGoogle);
if (!suggestsGoogle) {
suggestsGoogle = [];
if (_this3.props.autoActivateFirstSuggest) {
_this3.activateSuggest('next');
}
});
}
var suggests = [],
regex = new RegExp(this.state.userInput, 'gim'),
skipSuggest = this.props.skipSuggest;
/**
* Update the suggests
* @param {Array} suggestsGoogle The new google suggests
*/
}, {
key: 'updateSuggests',
value: function updateSuggests() {
var _this4 = this;
this.props.fixtures.forEach(function (suggest) {
if (!skipSuggest(suggest) && suggest.label.match(regex)) {
suggest.placeId = suggest.label;
suggests.push(suggest);
}
});
var suggestsGoogle = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
suggestsGoogle.forEach(function (suggest) {
if (!skipSuggest(suggest)) {
suggests.push({
label: _this4.props.getSuggestLabel(suggest),
placeId: suggest.place_id
});
}
});
var suggests = [],
regex = new RegExp(escapeRegExp(this.state.userInput), 'gim'),
skipSuggest = this.props.skipSuggest;
this.setState({ suggests: suggests });
},
this.props.fixtures.forEach(function (suggest) {
if (!skipSuggest(suggest) && suggest.label.match(regex)) {
suggest.placeId = suggest.label;
suggests.push(suggest);
}
});
/**
* When the input gets focused
*/
showSuggests: function showSuggests() {
this.searchSuggests();
this.setState({ isSuggestsHidden: false });
},
suggestsGoogle.forEach(function (suggest) {
if (!skipSuggest(suggest)) {
suggests.push({
label: _this4.props.getSuggestLabel(suggest),
placeId: suggest.place_id
});
}
});
/**
* When the input loses focused
*/
hideSuggests: function hideSuggests() {
var _this5 = this;
this.props.onBlur();
setTimeout(function () {
if (_this5.state && _this5.state.isMounted) {
_this5.setState({ isSuggestsHidden: true });
}
}, 100);
},
/**
* When a key gets pressed in the input
* @param {Event} event The keypress event
*/
onInputKeyDown: function onInputKeyDown(event) {
switch (event.which) {
case 40:
// DOWN
event.preventDefault();
this.activateSuggest('next');
break;
case 38:
// UP
event.preventDefault();
this.activateSuggest('prev');
break;
case 13:
// ENTER
event.preventDefault();
this.selectSuggest(this.state.activeSuggest);
break;
case 9:
// TAB
this.selectSuggest(this.state.activeSuggest);
break;
case 27:
// ESC
this.hideSuggests();
break;
default:
break;
this.setState({ suggests: suggests });
}
},
/**
* Activate a new suggest
* @param {String} direction The direction in which to activate new suggest
*/
activateSuggest: function activateSuggest(direction) {
// eslint-disable-line complexity
if (this.state.isSuggestsHidden) {
this.showSuggests();
return;
/**
* Show the suggestions
*/
}, {
key: 'showSuggests',
value: function showSuggests() {
this.searchSuggests();
this.setState({ isSuggestsHidden: false });
}
var suggestsCount = this.state.suggests.length - 1,
next = direction === 'next',
newActiveSuggest = null,
newIndex = 0,
i = 0; // eslint-disable-line id-length
/**
* Hide the suggestions
*/
}, {
key: 'hideSuggests',
value: function hideSuggests() {
var _this5 = this;
for (i; i <= suggestsCount; i++) {
if (this.state.suggests[i] === this.state.activeSuggest) {
newIndex = next ? i + 1 : i - 1;
}
this.props.onBlur();
setTimeout(function () {
if (_this5.state && _this5.state.isMounted) {
_this5.setState({ isSuggestsHidden: true });
}
}, 100);
}
if (!this.state.activeSuggest) {
newIndex = next ? 0 : suggestsCount;
}
/**
* Activate a new suggest
* @param {String} direction The direction in which to activate new suggest
*/
}, {
key: 'activateSuggest',
value: function activateSuggest(direction) {
// eslint-disable-line complexity
if (this.state.isSuggestsHidden) {
this.showSuggests();
return;
}
if (newIndex >= 0 && newIndex <= suggestsCount) {
newActiveSuggest = this.state.suggests[newIndex];
}
var suggestsCount = this.state.suggests.length - 1,
next = direction === 'next';
var newActiveSuggest = null,
newIndex = 0,
i = 0;
this.setState({ activeSuggest: newActiveSuggest });
},
for (i; i <= suggestsCount; i++) {
if (this.state.suggests[i] === this.state.activeSuggest) {
newIndex = next ? i + 1 : i - 1;
}
}
/**
* When an item got selected
* @param {GeosuggestItem} suggest The selected suggest item
*/
selectSuggest: function selectSuggest(suggest) {
if (!suggest) {
suggest = {
label: this.state.userInput
};
}
if (!this.state.activeSuggest) {
newIndex = next ? 0 : suggestsCount;
}
this.setState({
isSuggestsHidden: true,
userInput: suggest.label
});
if (newIndex >= 0 && newIndex <= suggestsCount) {
newActiveSuggest = this.state.suggests[newIndex];
}
if (suggest.location) {
this.props.onSuggestSelect(suggest);
return;
this.setState({ activeSuggest: newActiveSuggest });
}
this.geocodeSuggest(suggest);
},
/**
* When an item got selected
* @param {GeosuggestItem} suggest The selected suggest item
*/
}, {
key: 'selectSuggest',
value: function selectSuggest(suggest) {
if (!suggest) {
suggest = {
label: this.state.userInput
};
}
/**
* Geocode a suggest
* @param {Object} suggest The suggest
*/
geocodeSuggest: function geocodeSuggest(suggest) {
var _this6 = this;
this.setState({
isSuggestsHidden: true,
userInput: suggest.label
});
this.geocoder.geocode({ address: suggest.label }, function (results, status) {
if (status !== _this6.googleMaps.GeocoderStatus.OK) {
if (suggest.location) {
this.setState({ ignoreBlur: false });
this.props.onSuggestSelect(suggest);
return;
}
var gmaps = results[0],
location = gmaps.geometry.location;
this.geocodeSuggest(suggest);
}
suggest.gmaps = gmaps;
suggest.location = {
lat: location.lat(),
lng: location.lng()
};
/**
* Geocode a suggest
* @param {Object} suggest The suggest
*/
}, {
key: 'geocodeSuggest',
value: function geocodeSuggest(suggest) {
var _this6 = this;
_this6.props.onSuggestSelect(suggest);
});
},
this.geocoder.geocode(suggest.placeId ? { placeId: suggest.placeId } : { address: suggest.label }, function (results, status) {
if (status !== _this6.googleMaps.GeocoderStatus.OK) {
return;
}
/**
* Render the view
* @return {Function} The React element to render
*/
render: function render() {
var _this7 = this;
var gmaps = results[0],
location = gmaps.geometry.location;
var attributes = {};
suggest.gmaps = gmaps;
suggest.location = {
lat: location.lat(),
lng: location.lng()
};
_inputAttributes2['default'].forEach(function (inputAttribute) {
if (_this7.props[inputAttribute]) {
attributes[inputAttribute] = _this7.props[inputAttribute];
}
});
_this6.props.onSuggestSelect(suggest);
});
}
return (// eslint-disable-line no-extra-parens
_react2['default'].createElement(
/**
* Render the view
* @return {Function} The React element to render
*/
}, {
key: 'render',
value: function render() {
var _this7 = this;
var attributes = (0, _filterInputAttributes2['default'])(this.props),
classes = (0, _classnames2['default'])('geosuggest', this.props.className);
return _react2['default'].createElement(
'div',
{ className: 'geosuggest ' + this.props.className,
onClick: this.onClick },
_react2['default'].createElement('input', _extends({
className: 'geosuggest__input ' + this.props.inputClassName,
ref: 'geosuggestInput',
type: 'text'
}, attributes, {
{ className: classes },
_react2['default'].createElement(_inputJsx2['default'], _extends({ className: this.props.inputClassName,
value: this.state.userInput,
onKeyDown: this.onInputKeyDown,
onChange: this.onInputChange,
onFocus: this.onFocus,
onBlur: this.hideSuggests })),
_react2['default'].createElement(
'ul',
{ className: this.getSuggestsClasses() },
this.getSuggestItems()
)
)
);
},
/**
* Get the suggest items for the list
* @return {Array} The suggestions
*/
getSuggestItems: function getSuggestItems() {
return this.state.suggests.map((function (suggest) {
var isActive = this.state.activeSuggest && suggest.placeId === this.state.activeSuggest.placeId;
return (// eslint-disable-line no-extra-parens
_react2['default'].createElement(_GeosuggestItem2['default'], {
key: suggest.placeId,
suggest: suggest,
isActive: isActive,
onSuggestSelect: this.selectSuggest })
onChange: this.onInputChange.bind(this),
onFocus: this.onInputFocus.bind(this),
onBlur: this.onInputBlur.bind(this),
onNext: function () {
return _this7.activateSuggest('next');
},
onPrev: function () {
return _this7.activateSuggest('prev');
},
onSelect: function () {
return _this7.selectSuggest(_this7.state.activeSuggest);
},
onEscape: this.hideSuggests.bind(this)
}, attributes)),
_react2['default'].createElement(_suggestListJsx2['default'], {
isHidden: this.state.isSuggestsHidden,
suggests: this.state.suggests,
activeSuggest: this.state.activeSuggest,
onSuggestMouseDown: function () {
return _this7.setState({ ignoreBlur: true });
},
onSuggestMouseOut: function () {
return _this7.setState({ ignoreBlur: false });
},
onSuggestSelect: this.selectSuggest.bind(this) })
);
}).bind(this));
},
}
}]);
/**
* The classes for the suggests list
* @return {String} The classes
*/
getSuggestsClasses: function getSuggestsClasses() {
var classes = 'geosuggest__suggests';
return Geosuggest;
})(_react2['default'].Component);
classes += this.state.isSuggestsHidden ? ' geosuggest__suggests--hidden' : '';
Geosuggest.defaultProps = _defaults2['default'];
return classes;
}
});
module.exports = Geosuggest;
exports['default'] = Geosuggest;
module.exports = exports['default'];

8

package.json
{
"name": "react-geosuggest",
"version": "1.15.1",
"version": "1.16.0",
"description": "A React autosuggest for the Google Maps Places API.",

@@ -21,2 +21,3 @@ "main": "module/Geosuggest.js",

"babel": "^5.6.23",
"babel-eslint": "^4.1.8",
"babelify": "^6.1.3",

@@ -26,6 +27,9 @@ "browserify": "^11.0.0",

"bumpery": "^1.1.1",
"classnames": "^2.2.3",
"conventional-changelog-generator": "0.0.3",
"eslint": "^1.5.1",
"gh-pages": "^0.4.0",
"eslint-plugin-react": "^3.16.1",
"gh-pages": "^0.9.0",
"light-server": "^1.0.3",
"react": "^0.14.0",
"react-dom": "^0.14.0",

@@ -32,0 +36,0 @@ "uglifyjs": "^2.4.10"

module/GeosuggestItem.js
module/input-attributes.js
.eslintrc

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc