Merge branch 'master' into add-container-style-to-readme

Author: auser

.github/workflows/npmpublish.yml

@@ -0,0 +1,45 @@
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: npm ci
+      - run: npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://npm.pkg.github.com/
+          scope: '@your-github-username'
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

README.md

@@ -103,6 +103,7 @@ const style = {
   height: '100%'
 }
 ```
+
 Container Style: Takes CSS style object - optional, commonly when you want to change from the default of position "absolute".
 
 ```javascript
@@ -116,9 +117,9 @@ const containerStyle = {
 ```javascript
     <Map
           containerStyle={containerStyle}
-```         
+```
 
-initalCenter: Takes an object containing latitude and longitude coordinates. Sets the maps center upon loading.
+initialCenter: Takes an object containing latitude and longitude coordinates. Sets the maps center upon loading.
 
 ```javascript
     <Map

dist/index.js

@@ -356,6 +356,9 @@
             });
           });
         }
+      }, {
+        key: 'ref',
+        value: {}
       }, {
         key: 'render',
         value: function render() {
@@ -370,7 +373,7 @@
             { style: containerStyles, className: this.props.className },
             _react2.default.createElement(
               'div',
-              { style: style, ref: 'map' },
+              { style: style, ref: (element) => (this.ref.map = element) },
               'Loading map...'
             ),
             this.renderChildren()

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/GoogleApiComponent.js

@@ -51,6 +51,8 @@ export const wrapper = input => WrappedComponent => {
         google: null,
         options: options
       };
+
+      this.mapRef=React.createRef();
     }
 
     componentWillReceiveProps(props) {
@@ -120,7 +122,7 @@ export const wrapper = input => WrappedComponent => {
       return (
         <div>
           <WrappedComponent {...props} />
-          <div ref="map" />
+          <div ref={this.mapRef} />
         </div>
       );
     }

src/components/Marker.js

@@ -104,20 +104,7 @@ export class Marker extends React.Component {
   }
 
   render() {
-    return (
-      <Fragment>
-        {this.props.children && this.marker ?
-          React.Children.only(
-            React.cloneElement(
-              this.props.children, 
-              { marker: this.marker,
-                google: this.props.google,
-                map: this.props.map}
-            )
-          ) : null
-        }
-      </Fragment>
-    )
+    return null;
   }
 }
 

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) {
@@ -65,6 +66,8 @@ export class Map extends React.Component {
         lng: this.props.initialCenter.lng
       }
     };
+
+    this.mapRef=React.createRef();
   }
 
   componentDidMount() {
@@ -130,7 +133,7 @@ export class Map extends React.Component {
       const {google} = this.props;
       const maps = google.maps;
 
-      const mapRef = this.refs.map;
+      const mapRef = this.mapRef.current;
       const node = ReactDOM.findDOMNode(mapRef);
       const curr = this.state.currentLocation;
       const center = new maps.LatLng(curr.lat, curr.lng);
@@ -257,7 +260,7 @@ export class Map extends React.Component {
 
     return (
       <div style={containerStyles} className={this.props.className}>
-        <div style={style} ref="map">
+        <div style={style} ref={this.mapRef}>
           Loading map...
         </div>
         {this.renderChildren()}

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')
+  );
+};