feat(KmlLayer): add new KmlLayer component

Author: ydogandjiev

src/KmlLayer.js

@@ -0,0 +1,68 @@
+import {
+  default as React,
+  Component,
+} from "react";
+
+import {
+  default as canUseDOM,
+} from "can-use-dom";
+
+import {
+  default as KmlLayerCreator,
+  kmlLayerDefaultPropTypes,
+  kmlLayerControlledPropTypes,
+  kmlLayerEventPropTypes,
+} from "./creators/KmlLayerCreator";
+
+export default class KmlLayer extends Component {
+  static propTypes = {
+    // Uncontrolled default[props] - used only in componentDidMount
+    ...kmlLayerDefaultPropTypes,
+    // Controlled [props] - used in componentDidMount/componentDidUpdate
+    ...kmlLayerControlledPropTypes,
+    // Event [onEventName]
+    ...kmlLayerEventPropTypes,
+  }
+
+  // Public APIs
+  //
+  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#KmlLayer
+  //
+  // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^get/) && !it.match(/Map$/); })
+  getDefaultViewport() { return this.state.kmlLayer.getDefaultViewport(); }
+
+  getMetadata() { return this.state.kmlLayer.getMetadata(); }
+
+  getStatus() { return this.state.kmlLayer.getStatus(); }
+
+  getUrl() { return this.state.kmlLayer.getUrl(); }
+
+  getZIndex() { return this.state.marker.getZIndex(); }
+  // END - Public APIs
+  //
+  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#KmlLayer
+
+  state = {
+  }
+
+  componentWillMount() {
+    if (!canUseDOM) {
+      return;
+    }
+    const kmlLayer = KmlLayerCreator._createKmlLayer(this.props);
+
+    this.setState({ kmlLayer });
+  }
+
+  render() {
+    if (this.state.kmlLayer) {
+      return (
+        <KmlLayerCreator kmlLayer={this.state.kmlLayer} {...this.props}>
+          {this.props.children}
+        </KmlLayerCreator>
+      );
+    } else {
+      return (<noscript />);
+    }
+  }
+}

src/creators/KmlLayerCreator.js

@@ -0,0 +1,86 @@
+import {
+  default as React,
+  PropTypes,
+  Component,
+  Children,
+} from "react";
+
+import { default as KmlLayerEventList } from "../eventLists/KmlLayerEventList";
+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 kmlLayerControlledPropTypes = {
+// 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#KmlLayer
+  defaultViewport: PropTypes.any,
+  metadata: PropTypes.any,
+  status: PropTypes.any,
+  url: PropTypes.string,
+  zIndex: PropTypes.number,
+};
+
+export const kmlLayerDefaultPropTypes = defaultPropsCreator(kmlLayerControlledPropTypes);
+
+const kmlLayerUpdaters = {
+  defaultViewport(defaultViewport, component) { component.getKmlLayer().setDefaultViewport(defaultViewport); },
+  metadata(metadata, component) { component.getKmlLayer().setMetadata(metadata); },
+  status(status, component) { component.getKmlLayer().setStatus(status); },
+  url(url, component) { component.getKmlLayer().setUrl(url); },
+  zIndex(zIndex, component) { component.getKmlLayer().setZIndex(zIndex); },
+};
+
+const { eventPropTypes, registerEvents } = eventHandlerCreator(KmlLayerEventList);
+
+export const kmlLayerEventPropTypes = eventPropTypes;
+
+@componentLifecycleDecorator({
+  registerEvents,
+  instanceMethodName: `getKmlLayer`,
+  updaters: kmlLayerUpdaters,
+})
+export default class KmlLayerCreator extends Component {
+
+  static propTypes = {
+    mapHolderRef: PropTypes.instanceOf(GoogleMapHolder).isRequired,
+    kmlLayer: PropTypes.object.isRequired,
+  }
+
+  static _createKmlLayer(kmlLayerProps) {
+    const { mapHolderRef } = kmlLayerProps;
+    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#KmlLayer
+    const kmlLayer = new google.maps.KmlLayer(composeOptions(kmlLayerProps, kmlLayerControlledPropTypes));
+
+    kmlLayer.setMap(mapHolderRef.getMap());
+
+    return kmlLayer;
+  }
+
+  getKmlLayer() {
+    return this.props.kmlLayer;
+  }
+
+  render() {
+    const { mapHolderRef, children } = this.props;
+
+    if (Children.count(children) > 0) {
+      return (
+        <div>{Children.map(children, childElement =>
+          childElement && React.cloneElement(childElement, {
+            mapHolderRef,
+          })
+        )}</div>
+      );
+    } else {
+      return (<noscript />);
+    }
+  }
+}

src/eventLists/KmlLayerEventList.js

@@ -0,0 +1,7 @@
+// https://developers.google.com/maps/documentation/javascript/3.exp/reference#KmlLayer
+// [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
+export default [
+  `click`,
+  `defaultviewport_changed`,
+  `status_changed`,
+];

src/index.js

@@ -5,6 +5,7 @@ export { default as Circle } from "./Circle";
 export { default as DirectionsRenderer } from "./DirectionsRenderer";
 export { default as DrawingManager } from "./DrawingManager";
 export { default as InfoWindow } from "./InfoWindow";
+export { default as KmlLayer } from "./KmlLayer";
 export { default as Marker } from "./Marker";
 export { default as OverlayView } from "./OverlayView";
 export { default as Polygon } from "./Polygon";