Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(KmlLayer): add new KmlLayer component
  • Loading branch information
ydogandjiev committed Jan 24, 2016
1 parent da3fe62 commit 746af8d
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 0 deletions.
68 changes: 68 additions & 0 deletions 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 />);
}
}
}
86 changes: 86 additions & 0 deletions 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 />);
}
}
}
7 changes: 7 additions & 0 deletions 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`,
];
1 change: 1 addition & 0 deletions src/index.js
Expand Up @@ -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";
Expand Down

0 comments on commit 746af8d

Please sign in to comment.