react-google-autocomplete - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

lib/index.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.ReactCustomGoogleAutocomplete = exports.ReactGoogleAutocomplete = undefined;
 
@@ -18,2 +19,4 @@ 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; };
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -25,3 +28,3 @@
 
-var ReactGoogleAutocomplete = function (_React$Component) {
+var ReactGoogleAutocomplete = exports.ReactGoogleAutocomplete = function (_React$Component) {
   _inherits(ReactGoogleAutocomplete, _React$Component);
@@ -32,3 +35,3 @@
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ReactGoogleAutocomplete).call(this, props));
+    var _this = _possibleConstructorReturn(this, (ReactGoogleAutocomplete.__proto__ || Object.getPrototypeOf(ReactGoogleAutocomplete)).call(this, props));
 
@@ -42,4 +45,8 @@ _this.autocomplete = null;
     value: function componentDidMount() {
+      var _props$types = this.props.types;
+      var types = _props$types === undefined ? ['(cities)'] : _props$types;
+
+
       this.autocomplete = new google.maps.places.Autocomplete(this.refs.input, {
-        types: ['(cities)']
+        types: types
       });
@@ -59,2 +66,8 @@
     value: function render() {
+      var _props = this.props;
+      var onPlaceSelected = _props.onPlaceSelected;
+      var types = _props.types;
+
+      var rest = _objectWithoutProperties(_props, ['onPlaceSelected', 'types']);
+
       return _react2.default.createElement(
@@ -65,3 +78,3 @@ 'div',
           ref: 'input'
-        }, this.props))
+        }, rest))
       );
@@ -77,2 +90,77 @@ }
 };
-exports.default = ReactGoogleAutocomplete;
+
+var ReactCustomGoogleAutocomplete = exports.ReactCustomGoogleAutocomplete = function (_React$Component2) {
+  _inherits(ReactCustomGoogleAutocomplete, _React$Component2);
+
+  function ReactCustomGoogleAutocomplete(props) {
+    _classCallCheck(this, ReactCustomGoogleAutocomplete);
+
+    var _this2 = _possibleConstructorReturn(this, (ReactCustomGoogleAutocomplete.__proto__ || Object.getPrototypeOf(ReactCustomGoogleAutocomplete)).call(this, props));
+
+    _this2.service = new google.maps.places.AutocompleteService();
+    return _this2;
+  }
+
+  _createClass(ReactCustomGoogleAutocomplete, [{
+    key: 'onChange',
+    value: function onChange(e) {
+      var _this3 = this;
+
+      var _props$types2 = this.props.types;
+      var types = _props$types2 === undefined ? ['(cities)'] : _props$types2;
+
+
+      if (e.target.value) {
+        this.service.getPlacePredictions({ input: e.target.value, types: types }, function (predictions, status) {
+          if (status === 'OK' && predictions && predictions.length > 0) {
+            _this3.props.onOpen(predictions);
+            console.log(predictions);
+          } else {
+            _this3.props.onClose();
+          }
+        });
+      } else {
+        this.props.onClose();
+      }
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this4 = this;
+
+      if (this.props.input.value) {
+        this.placeService = new google.maps.places.PlacesService(this.refs.div);
+        this.placeService.getDetails({ placeId: this.props.input.value }, function (e, status) {
+          if (status === 'OK') {
+            _this4.refs.input.value = e.formatted_address;
+          }
+        });
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this5 = this;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.cloneElement(this.props.input, _extends({}, this.props, {
+          ref: 'input',
+          onChange: function onChange(e) {
+            _this5.onChange(e);
+          }
+        })),
+        _react2.default.createElement('div', { ref: 'div' })
+      );
+    }
+  }]);
+
+  return ReactCustomGoogleAutocomplete;
+}(_react2.default.Component);
+
+ReactCustomGoogleAutocomplete.propTypes = {
+  input: _react.PropTypes.node.isRequired,
+  onOpen: _react.PropTypes.func.isRequired,
+  onClose: _react.PropTypes.func.isRequired
+};

package.json

 {
   "name": "react-google-autocomplete",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React component for google autocomplete.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/index.js

 import React, {PropTypes} from 'react';
 
-export default class ReactGoogleAutocomplete extends React.Component {
+export class ReactGoogleAutocomplete extends React.Component {
   static propTypes = {
@@ -14,4 +14,6 @@ onPlaceSelected: PropTypes.func,
   componentDidMount() {
+    const { types=['(cities)'] } = this.props;
+
     this.autocomplete = new google.maps.places.Autocomplete(this.refs.input, {
-      types: ['(cities)'],
+      types,
     });
@@ -29,2 +31,4 @@
   render() {
+    const {onPlaceSelected, types, ...rest} = this.props;
+
     return (
@@ -34,3 +38,3 @@ <div>
           ref="input"
-          {...this.props}
+          {...rest}
         />
@@ -41,1 +45,59 @@ </div>
 }
+
+export class ReactCustomGoogleAutocomplete extends React.Component {
+  static propTypes = {
+    input: PropTypes.node.isRequired,
+    onOpen: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+    this.service = new google.maps.places.AutocompleteService();
+  }
+
+  onChange(e) {
+    const { types=['(cities)'] } = this.props;
+
+    if(e.target.value) {
+      this.service.getPlacePredictions({input: e.target.value, types}, (predictions, status) => {
+        if (status === 'OK' && predictions && predictions.length > 0) {
+          this.props.onOpen(predictions);
+            console.log(predictions);
+        } else {
+          this.props.onClose();
+        }
+      });
+    } else {
+      this.props.onClose();
+    }
+  }
+
+	componentDidMount() {
+    if (this.props.input.value) {
+      this.placeService = new google.maps.places.PlacesService(this.refs.div);
+      this.placeService.getDetails({placeId: this.props.input.value}, (e, status) => {
+        if(status === 'OK') {
+					this.refs.input.value = e.formatted_address;
+        }
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        {React.cloneElement(this.props.input,
+          {
+            ...this.props,
+    			  ref: 'input',
+            onChange: (e) => {
+              this.onChange(e);
+            },
+          }
+        )}
+        <div ref="div"></div>
+      </div>
+    );
+  }
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11294

increased by98.04%

Number of package files

7

increased by16.67%

Lines of code

213

increased by142.05%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

No dependency changes