feat(Rectangle): add new componet

* Thanks to @alistairjcbrown
* Closes #80

Author: tomchentw

src/Rectangle.js

@@ -0,0 +1,64 @@
+import {
+  default as React,
+  Component,
+} from "react";
+
+import {
+  default as RectangleCreator,
+  rectangleDefaultPropTypes,
+  rectangleControlledPropTypes,
+  rectangleEventPropTypes
+} from "./creators/_RectangleCreator";
+
+/*
+ * Original author: @alistairjcbrown
+ * Original PR: https://github.com/tomchentw/react-google-maps/pull/80
+ */
+export default class Rectangle extends Component {
+  static propTypes = {
+    // Uncontrolled default[props] - used only in componentDidMount
+    ...rectangleDefaultPropTypes,
+    // Controlled [props] - used in componentDidMount/componentDidUpdate
+    ...rectangleControlledPropTypes,
+    // Event [onEventName]
+    ...rectangleEventPropTypes,
+  }
+
+  // Public APIs
+  //
+  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle
+  //
+  // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^get/) && !it.match(/^getMap/); })
+  getBounds () { return this.state.rectangle.getBounds(); }
+
+  getDraggable () { return this.state.rectangle.getDraggable(); }
+
+  getEditable () { return this.state.rectangle.getEditable(); }
+
+  getVisible () { return this.state.rectangle.getVisible(); }
+  // END - Public APIs
+  //
+  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle
+
+  state = {
+  }
+
+  componentDidMount () {
+    const {mapHolderRef, ...rectangleProps} = this.props;
+    const rectangle = RectangleCreator._createRectangle(mapHolderRef, rectangleProps);
+
+    this.setState({ rectangle });
+  }
+
+  render () {
+    if (this.state.rectangle) {
+      return (
+        <RectangleCreator rectangle={this.state.rectangle} {...this.props}>
+          {this.props.children}
+        </RectangleCreator>
+      );
+    } else {
+      return (<noscript />);
+    }
+  }
+}

src/creators/RectangleCreator.js

@@ -0,0 +1,74 @@
+import {
+  default as React,
+  PropTypes,
+  Component,
+  Children,
+} from "react";
+
+import {default as RectangleEventList} from "../eventLists/RectangleEventList";
+import {default as eventHandlerCreator} from "../utils/eventHandlerCreator";
+import {default as defaultPropsCreator} from "../utils/defaultPropsCreator";
+import {default as composeOptions} from "../utils/composeOptions";
+import {default as componentLifecycleDecorator} from "../utils/componentLifecycleDecorator";
+
+import {default as GoogleMapHolder} from "./GoogleMapHolder";
+
+export const rectangleControlledPropTypes = {
+// [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+// https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle
+  bounds: PropTypes.any,
+  draggable: PropTypes.bool,
+  editable: PropTypes.bool,
+  options: PropTypes.object,
+  visible: PropTypes.bool,
+};
+
+export const rectangleDefaultPropTypes = defaultPropsCreator(rectangleControlledPropTypes);
+
+const rectangleUpdaters = {
+  bounds    (bounds, component) { component.getRectangle().setBounds(bounds); },
+  draggable (draggable, component) { component.getRectangle().setDraggable(draggable); },
+  editable  (editable, component) { component.getRectangle().setEditable(editable); },
+  options   (options, component) { component.getRectangle().setOptions(options); },
+  visible   (visible, component) { component.getRectangle().setVisible(visible); },
+};
+
+const {eventPropTypes, registerEvents} = eventHandlerCreator(RectangleEventList);
+
+export const rectangleEventPropTypes = eventPropTypes;
+
+@componentLifecycleDecorator({
+  registerEvents,
+  instanceMethodName: "getRectangle",
+  updaters: rectangleUpdaters,
+})
+export default class RectangleCreator extends Component {
+
+  static propTypes = {
+    mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired,
+    rectangle: PropTypes.object.isRequired,
+  }
+
+  static _createRectangle (mapHolderRef, rectangleProps) {
+    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle
+    const rectangle = new google.maps.Rectangle(composeOptions(rectangleProps, [
+      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#RectangleOptions
+      "bounds",
+      "draggable",
+      "editable",
+      "visible",
+    ]));
+
+    rectangle.setMap(mapHolderRef.getMap());
+
+    return rectangle;
+  }
+
+  getRectangle () {
+    return this.props.rectangle;
+  }
+
+  render () {
+    return (<noscript />);
+  }
+}

src/eventLists/RectangleEventList.js

@@ -0,0 +1,16 @@
+// https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle
+// [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
+export default [
+  "bounds_changed",
+  "click",
+  "dblclick",
+  "drag",
+  "dragend",
+  "dragstart",
+  "mousedown",
+  "mousemove",
+  "mouseout",
+  "mouseover",
+  "mouseup",
+  "rightclick",
+];

src/index.js

@@ -8,3 +8,4 @@ export {default as Marker} from "./Marker";
 export {default as OverlayView} from "./OverlayView";
 export {default as Polygon} from "./Polygon";
 export {default as Polyline} from "./Polyline";
+export {default as Rectangle} from "./Rectangle";