feat(TrafficLayer): add component

* Original commit: 29e79b9
* Original author: @thzinc
* Closes #417

src/lib/TrafficLayer.js

@@ -0,0 +1,97 @@
+/* global google */
+import _ from "lodash";
+
+import {
+  default as React,
+  PropTypes,
+} from "react";
+
+import {
+  MAP,
+  TRAFFIC_LAYER,
+} from "./constants";
+
+import {
+  addDefaultPrefixToPropTypes,
+  collectUncontrolledAndControlledProps,
+  default as enhanceElement,
+} from "./enhanceElement";
+
+const controlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
+  // [].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#TrafficLayer
+  options: PropTypes.object,
+};
+
+const defaultUncontrolledPropTypes = addDefaultPrefixToPropTypes(controlledPropTypes);
+
+const eventMap = {
+  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#TrafficLayer
+  // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
+};
+
+const publicMethodMap = {
+  // Public APIs
+  //
+  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#TrafficLayer
+  //
+  // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
+  //    .filter(function(it){ return it.match(/^get/) && !it.match(/Map$/); })
+  // END - Public APIs
+};
+
+const controlledPropUpdaterMap = {
+  options(trafficLayer, options) { trafficLayer.setOptions(options); },
+};
+
+function getInstanceFromComponent(component) {
+  return component.state[TRAFFIC_LAYER];
+}
+
+export default _.flowRight(
+  React.createClass,
+  enhanceElement(getInstanceFromComponent, publicMethodMap, eventMap, controlledPropUpdaterMap),
+)({
+  displayName: `TrafficLayer`,
+
+  propTypes: {
+    ...controlledPropTypes,
+    ...defaultUncontrolledPropTypes,
+  },
+
+  contextTypes: {
+    [MAP]: PropTypes.object,
+  },
+
+  getInitialState() {
+    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#TrafficLayer
+    const trafficLayer = new google.maps.TrafficLayer({
+      map: this.context[MAP],
+      ...collectUncontrolledAndControlledProps(
+        defaultUncontrolledPropTypes,
+        controlledPropTypes,
+        this.props
+      ),
+    });
+    return {
+      [TRAFFIC_LAYER]: trafficLayer,
+    };
+  },
+
+  componentWillUnmount() {
+    const trafficLayer = getInstanceFromComponent(this);
+    if (trafficLayer) {
+      trafficLayer.setMap(null);
+    }
+  },
+
+  render() {
+    return false;
+  },
+});

src/lib/constants.js

@@ -33,3 +33,5 @@ export const SEARCH_BOX = `__SECRET_SEARCH_BOX_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
 export const MARKER_CLUSTERER = `__SECRET_MARKER_CLUSTERER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
 
 export const INFO_BOX = `__SECRET_INFO_BOX_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
+
+export const TRAFFIC_LAYER = `__SECRET_TRAFFIC_LAYER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;

src/lib/index.js

@@ -34,6 +34,10 @@ export {
   default as FusionTablesLayer,
 } from "./FusionTablesLayer";
 
+export {
+  default as TrafficLayer,
+} from "./TrafficLayer";
+
 export {
   default as DirectionsRenderer,
 } from "./DirectionsRenderer";