Merge pull request #405 from basantech89/basantech89-issue403

Complete Issue#403 - Add rectangle component

Author: auser

examples/components/withRectangle.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import Map from '../../src/index';
+
+import Rectangle from '../../src/components/Rectangle';
+
+
+const WithRectangles = props => {
+  if (!props.loaded) return <div>Loading...</div>;
+
+  const bounds = {
+    north: 37.789411,
+    south: 37.731757,
+    east: -122.410333,
+    west: -122.489116,
+  };
+
+  return (
+    <Map
+      google={props.google}
+      className="map"
+      style={{ height: '100%', position: 'relative', width: '100%' }}
+      zoom={11}
+    >
+      <Rectangle
+        fillColor="#0000FF"
+        fillOpacity={0.35}
+        bounds={bounds}
+        strokeColor="#0000FF"
+        strokeOpacity={0.8}
+        strokeWeight={2}
+      />
+    </Map>
+  );
+};
+
+export default WithRectangles;

examples/index.js

@@ -19,6 +19,7 @@ import Autocomplete from './components/autocomplete';
 import HeatMap from './components/withHeatMap';
 import Polygon from './components/withPolygons';
 import Polyline from './components/withPolylines';
+import Rectangle from './components/withRectangle';
 import CustomEvents from './components/resizeEvent';
 
 const routes = [
@@ -62,6 +63,11 @@ const routes = [
     name: 'Polyline',
     component: Polyline
   },
+  {
+    path: '/rectangle',
+    name: 'Rectangle',
+    component: Rectangle
+  },
   {
     path: '/onResizeEvent',
     name: 'Custom events',

src/components/Rectangle.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { areBoundsEqual } from '../lib/areBoundsEqual';
+import { camelize } from '../lib/String';
+const evtNames = ['click', 'mouseout', 'mouseover'];
+
+const wrappedPromise = function() {
+    var wrappedPromise = {},
+        promise = new Promise(function (resolve, reject) {
+            wrappedPromise.resolve = resolve;
+            wrappedPromise.reject = reject;
+        });
+    wrappedPromise.then = promise.then.bind(promise);
+    wrappedPromise.catch = promise.catch.bind(promise);
+    wrappedPromise.promise = promise;
+
+    return wrappedPromise;
+}
+
+export class Rectangle extends React.Component {
+  componentDidMount() {
+    this.rectanglePromise = wrappedPromise();
+    this.renderRectangle();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.map !== prevProps.map ||
+      !areBoundsEqual(this.props.bounds, prevProps.bounds)
+    ) {
+      if (this.rectangle) {
+        this.rectangle.setMap(null);
+      }
+      this.renderRectangle();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.rectangle) {
+      this.rectangle.setMap(null);
+    }
+  }
+
+  renderRectangle() {
+    const {
+      map,
+      google,
+      bounds,
+      strokeColor,
+      strokeOpacity,
+      strokeWeight,
+      fillColor,
+      fillOpacity,
+      ...props
+    } = this.props;
+
+    if (!google) {
+        return null;
+    }
+
+    const params = {
+      map,
+      bounds,
+      strokeColor,
+      strokeOpacity,
+      strokeWeight,
+      fillColor,
+      fillOpacity,
+      ...props
+    };
+
+    this.rectangle = new google.maps.Rectangle(params);
+
+    evtNames.forEach(e => {
+      this.rectangle.addListener(e, this.handleEvent(e));
+    });
+
+    this.rectanglePromise.resolve(this.rectangle);
+  }
+
+  getRectangle() {
+    return this.rectanglePromise;
+  }
+
+  handleEvent(evt) {
+    return (e) => {
+      const evtName = `on${camelize(evt)}`
+      if (this.props[evtName]) {
+        this.props[evtName](this.props, this.rectangle, e);
+      }
+    }
+  }
+
+  render() {
+    console.log('hii, ', this.props.bounds);
+    return null;
+  }
+}
+
+Rectangle.propTypes = {
+  bounds: PropTypes.object,
+  strokeColor: PropTypes.string,
+  strokeOpacity: PropTypes.number,
+  strokeWeight: PropTypes.number,
+  fillColor: PropTypes.string,
+  fillOpacity: PropTypes.number
+}
+
+evtNames.forEach(e => Rectangle.propTypes[e] = PropTypes.func)
+
+Rectangle.defaultProps = {
+  name: 'Rectangle'
+}
+
+export default Rectangle

src/index.js

@@ -49,6 +49,7 @@ export {HeatMap} from './components/HeatMap';
 export {Polygon} from './components/Polygon';
 export {Polyline} from './components/Polyline';
 export {Circle} from './components/Circle';
+export {Rectangle} from './components/Rectangle';
 
 export class Map extends React.Component {
   constructor(props) {

src/lib/areBoundsEqual.js

@@ -0,0 +1,47 @@
+/**
+ * Compares two bound objects.
+ */
+
+export const areBoundsEqual = function(boundA, boundB) {
+  if (boundA === boundB) {
+    return true;
+  }
+  if (
+    !(boundA instanceof Object) ||
+    !(boundB instanceof Object)
+  ) {
+    return false;
+  }
+  if (Object.keys(boundA).length !== Object.keys(boundB).length) {
+    return false;
+  }
+  if (
+    !areValidBounds(boundA) ||
+    !areValidBounds(boundB)
+  ) {
+    return false;
+  }
+  for (const key of Object.keys(boundA)) {
+    if (boundA[key] !== boundB[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Helper that checks whether an array consists of objects
+ * with lat and lng properties
+ * @param {object} elem the element to check
+ * @returns {boolean} whether or not it's valid
+ */
+const areValidBounds = function(elem) {
+  return (
+    elem !== null &&
+    typeof elem === 'object' &&
+    elem.hasOwnProperty('north') &&
+    elem.hasOwnProperty('south') &&
+    elem.hasOwnProperty('east') &&
+    elem.hasOwnProperty('west')
+  );
+};