rameshsyn · whizsid · Nov 28, 2019 · Nov 28, 2019
diff --git a/.babelrc b/.babelrc
@@ -2,6 +2,9 @@
   "presets": [
     "react",
     "env"
+  ],
+  "plugins": [
+    "inline-react-svg"
   ]
 }
 
diff --git a/lib/CustomControl.js b/lib/CustomControl.js
@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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 _react = require("react");
+
+var _reactDom = require("react-dom");
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+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; }
+
+/**
+ * This Component for add custom control to map
+ * (map.controls[position].push(component))
+ * NOTE:
+ * Can ref to map through context in constructor (or this.context expect contructor)
+ * User constructor to add div and render will createPortal
+ */
+var MapControl = function (_Component) {
+  _inherits(MapControl, _Component);
+
+  function MapControl(props, context) {
+    _classCallCheck(this, MapControl);
+
+    var _this = _possibleConstructorReturn(this, (MapControl.__proto__ || Object.getPrototypeOf(MapControl)).call(this, props));
+
+    _this.state = {
+      mounted: false
+    };
+    return _this;
+  }
+
+  _createClass(MapControl, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      if (this.props.map && !this.map) {
+        this.map = this.props.map;
+        this.controlDiv = document.createElement("div");
+        this.divIndex = this.map.controls[this.props.position].length;
+        this.map.controls[this.props.position].push(this.controlDiv);
+
+        this.setState({
+          mounted: true
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.map.controls[this.props.position].removeAt(this.divIndex);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var className = this.props.className;
+
+
+      if (!this.map) {
+        return null;
+      }
+
+      className && this.controlDiv.classList.add(className);
+
+      return (0, _reactDom.createPortal)(this.props.children, this.controlDiv);
+    }
+  }]);
+
+  return MapControl;
+}(_react.Component);
+
+exports.default = MapControl;
diff --git a/lib/GoogleMap.js b/lib/GoogleMap.js
@@ -1,68 +1,131 @@
-'use strict';
+"use strict";
 
 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 _react = require('react');
+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 _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _withGoogleMap = require('react-google-maps/lib/withGoogleMap');
+var _withGoogleMap = require("react-google-maps/lib/withGoogleMap");
 
 var _withGoogleMap2 = _interopRequireDefault(_withGoogleMap);
 
-var _GoogleMap = require('react-google-maps/lib/components/GoogleMap');
+var _GoogleMap = require("react-google-maps/lib/components/GoogleMap");
 
 var _GoogleMap2 = _interopRequireDefault(_GoogleMap);
 
-var _Marker = require('react-google-maps/lib/components/Marker');
+var _Marker = require("react-google-maps/lib/components/Marker");
 
 var _Marker2 = _interopRequireDefault(_Marker);
 
-var _Circle = require('react-google-maps/lib/components/Circle');
+var _Circle = require("react-google-maps/lib/components/Circle");
 
 var _Circle2 = _interopRequireDefault(_Circle);
 
+var _SearchBox = require("./SearchBox");
+
+var _SearchBox2 = _interopRequireDefault(_SearchBox);
+
+var _CustomControl = require("./CustomControl");
+
+var _CustomControl2 = _interopRequireDefault(_CustomControl);
+
+var _constants = require("react-google-maps/lib/constants");
+
 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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+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; }
+
 /* Create map with withGoogleMap HOC */
 /* https://github.com/tomchentw/react-google-maps */
 
-var Map = (0, _withGoogleMap2.default)(function (props) {
-  var position = props.position,
-      defaultZoom = props.defaultZoom,
-      handleMarkerDragEnd = props.handleMarkerDragEnd,
-      onZoomChanged = props.onZoomChanged,
-      radius = props.radius,
-      circleOptions = props.circleOptions,
-      shouldRecenterMap = props.shouldRecenterMap,
-      zoom = props.zoom;
-
-
-  var circle = radius !== -1 ? _react2.default.createElement(_Circle2.default, {
-    center: position,
-    radius: radius,
-    options: circleOptions
-  }) : null;
-  var mapExtraProps = shouldRecenterMap ? { center: position } : {};
-  return _react2.default.createElement(
-    _GoogleMap2.default,
-    _extends({
-      onZoomChanged: onZoomChanged,
-      defaultZoom: defaultZoom,
-      defaultCenter: position,
-      zoom: zoom
-    }, mapExtraProps),
-    _react2.default.createElement(_Marker2.default, {
-      draggable: true // Allow marker to drag
-      , position: position,
-      onDragEnd: handleMarkerDragEnd
-    }),
-    circle
-  );
-});
-
-exports.default = Map;
+var Map = function (_Component) {
+  _inherits(Map, _Component);
+
+  function Map(props) {
+    _classCallCheck(this, Map);
+
+    var _this = _possibleConstructorReturn(this, (Map.__proto__ || Object.getPrototypeOf(Map)).call(this, props));
+
+    _this.state = {
+      mounted: false
+    };
+    return _this;
+  }
+
+  _createClass(Map, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({ mounted: true });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          position = _props.position,
+          defaultZoom = _props.defaultZoom,
+          handleMarkerDragEnd = _props.handleMarkerDragEnd,
+          onZoomChanged = _props.onZoomChanged,
+          radius = _props.radius,
+          circleOptions = _props.circleOptions,
+          shouldRecenterMap = _props.shouldRecenterMap,
+          zoom = _props.zoom,
+          onChangeInput = _props.onChangeInput,
+          onChangeSuggestion = _props.onChangeSuggestion,
+          address = _props.address,
+          search = _props.search;
+      var mounted = this.state.mounted;
+
+
+      var circle = radius !== -1 ? _react2.default.createElement(_Circle2.default, { center: position, radius: radius, options: circleOptions }) : null;
+      var mapExtraProps = shouldRecenterMap ? { center: position } : {};
+
+      return _react2.default.createElement(
+        _GoogleMap2.default,
+        _extends({
+          onZoomChanged: onZoomChanged,
+          defaultZoom: defaultZoom,
+          defaultCenter: position,
+          defaultOptions: {
+            mapTypeControlOptions: { position: 12 },
+            fullscreenControlOptions: { position: 6 }
+          },
+          zoom: zoom,
+          ref: function ref(map) {
+            return _this2._map = map;
+          },
+          google: google
+        }, mapExtraProps),
+        _react2.default.createElement(
+          _CustomControl2.default,
+          { mounted: mounted, position: 3, map: this._map ? this._map.context[_constants.MAP] : undefined },
+          _react2.default.createElement(_SearchBox2.default, { onChangeInput: onChangeInput, onChangeSuggestion: onChangeSuggestion, search: search, address: address })
+        ),
+        _react2.default.createElement(_Marker2.default, {
+          draggable: true // Allow marker to drag
+          , position: position,
+          onDragEnd: handleMarkerDragEnd
+        }),
+        circle
+      );
+    }
+  }]);
+
+  return Map;
+}(_react.Component);
+
+;
+
+exports.default = (0, _withGoogleMap2.default)(Map);
diff --git a/lib/SearchBox.js b/lib/SearchBox.js
@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _searchBoxStyles;
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactGooglePlacesSuggest = require("react-google-places-suggest");
+
+var _reactGooglePlacesSuggest2 = _interopRequireDefault(_reactGooglePlacesSuggest);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Icon = function Icon(props) {
+  return _react2.default.createElement(
+    "svg",
+    props,
+    _react2.default.createElement("path", {
+      fill: "#757575",
+      d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+    }),
+    _react2.default.createElement("path", {
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    })
+  );
+};
+
+Icon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+};
+
+
+var searchBoxStyles = (_searchBoxStyles = {
+  alignItems: "center",
+  backgroundColor: "rgb(255, 255, 255)",
+  borderBottomLeftRadius: "4px",
+  borderBottomRightRadius: "4px",
+  borderTopLeftRadius: "4px",
+  borderTopRightRadius: "4px",
+  boxShadow: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
+  boxSizing: "border-box",
+  color: "rgba(0, 0, 0, 0.87)",
+  display: "flex",
+  fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+  fontSize: "14px",
+  fontWeight: "400",
+  height: "48px",
+  letterSpacing: "0.14994px",
+  lineHeight: "20.02px",
+  marginTop: "0px",
+  outline: "none",
+  paddingBottom: "2px",
+  paddingLeft: "16px",
+  paddingRight: "12px",
+  paddingTop: "2px",
+  transitionDelay: "0s",
+  transitionDuration: "0.3s",
+  transitionProperty: "box-shadow",
+  transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+}, _defineProperty(_searchBoxStyles, "marginTop", 14), _defineProperty(_searchBoxStyles, "marginRight", 14), _defineProperty(_searchBoxStyles, "maxWidth", 310), _defineProperty(_searchBoxStyles, "minWidth", 280), _defineProperty(_searchBoxStyles, "WebkitFontSmoothing", "antialiased"), _searchBoxStyles);
+
+var SearchBox = function SearchBox(props) {
+  return _react2.default.createElement(
+    "label",
+    { htmlFor: "locationPickerSearch", style: searchBoxStyles },
+    _react2.default.createElement(
+      _reactGooglePlacesSuggest2.default,
+      {
+        googleMaps: google.maps,
+        autocompletionRequest: { input: props.search },
+        onSelectSuggest: props.onChangeSuggestion
+      },
+      _react2.default.createElement("input", {
+        type: "text",
+        id: "locationPickerSearch",
+        value: props.address,
+        placeholder: "Search a location",
+        style: { border: "none", width: "100%", height: 44 },
+        onChange: function onChange(e) {
+          props.onChangeInput(e.target.value);
+        }
+      })
+    ),
+    _react2.default.createElement(Icon, null)
+  );
+};
+
+exports.default = SearchBox;