diff --git a/src/lib/constants.js b/src/lib/constants.js
index ae2a3a6a..46d4f3e1 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -23,3 +23,5 @@ export const ANCHOR = `__SECRET_ANCHOR_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
export const INFO_WINDOW = `__SECRET_INFO_WINDOW_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
export const OVERLAY_VIEW = `__SECRET_OVERLAY_VIEW_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
+
+export const DRAWING_MANAGER = `__SECRET_DRAWING_MANAGER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
diff --git a/src/lib/creators/DrawingManagerCreator.js b/src/lib/creators/DrawingManagerCreator.js
deleted file mode 100644
index e6b0c054..00000000
--- a/src/lib/creators/DrawingManagerCreator.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/* global google */
-import {
- default as React,
- PropTypes,
- Component,
-} from "react";
-
-import { default as DrawingManagerEventList } from "../eventLists/DrawingManagerEventList";
-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";
-
-export const drawingManagerControlledPropTypes = {
-// 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#DrawingManager
- drawingMode: PropTypes.any,
- options: PropTypes.object,
-};
-
-export const drawingManagerDefaultPropTypes = defaultPropsCreator(
- drawingManagerControlledPropTypes
-);
-
-const drawingManagerUpdaters = {
- drawingMode(drawingMode, component) {
- component.getDrawingManager().setDrawingMode(drawingMode);
- },
- options(options, component) { component.getDrawingManager().setOptions(options); },
-};
-
-const { eventPropTypes, registerEvents } = eventHandlerCreator(DrawingManagerEventList);
-
-export const drawingManagerEventPropTypes = eventPropTypes;
-
-class DrawingManagerCreator extends Component {
-
- static propTypes = {
- drawingManager: PropTypes.object.isRequired,
- }
-
- static _createDrawingManager(drawingManagerProps) {
- const { mapHolderRef } = drawingManagerProps;
- // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
- const drawingManager = new google.maps.drawing.DrawingManager(
- composeOptions(drawingManagerProps, drawingManagerControlledPropTypes)
- );
-
- drawingManager.setMap(mapHolderRef.getMap());
-
- return drawingManager;
- }
-
- getDrawingManager() {
- return this.props.drawingManager;
- }
-
- render() {
- return ();
- }
-}
-
-export default componentLifecycleDecorator({
- registerEvents,
- instanceMethodName: `getDrawingManager`,
- updaters: drawingManagerUpdaters,
-})(DrawingManagerCreator);
diff --git a/src/lib/drawing/DrawingManager.js b/src/lib/drawing/DrawingManager.js
index 60dcc8ea..e9c63934 100644
--- a/src/lib/drawing/DrawingManager.js
+++ b/src/lib/drawing/DrawingManager.js
@@ -1,80 +1,111 @@
+/* global google */
+import _ from "lodash";
+
import {
default as React,
- Component,
PropTypes,
} from "react";
import {
- default as canUseDOM,
-} from "can-use-dom";
+ MAP,
+ DRAWING_MANAGER,
+} from "../constants";
import {
- default as DrawingManagerCreator,
- drawingManagerDefaultPropTypes,
- drawingManagerControlledPropTypes,
- drawingManagerEventPropTypes,
-} from "./creators/DrawingManagerCreator";
-
-import { default as GoogleMapHolder } from "./creators/GoogleMapHolder";
-
-/*
- * Original author: @idolize
- * Original PR: https://github.com/tomchentw/react-google-maps/pull/46
- */
-export default class DrawingManager extends Component {
- static propTypes = {
- // Uncontrolled default[props] - used only in componentDidMount
- ...drawingManagerDefaultPropTypes,
- // Controlled [props] - used in componentDidMount/componentDidUpdate
- ...drawingManagerControlledPropTypes,
- // Event [onEventName]
- ...drawingManagerEventPropTypes,
- }
-
- static contextTypes = {
- mapHolderRef: PropTypes.instanceOf(GoogleMapHolder),
- }
+ 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#DrawingManager
+ drawingMode: PropTypes.any,
+ options: PropTypes.object,
+};
+
+const defaultUncontrolledPropTypes = addDefaultPrefixToPropTypes(controlledPropTypes);
+
+const eventMap = {
+ // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
+ // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
+ onCircleComplete: `circlecomplete`,
+
+ onMarkerComplete: `markercomplete`,
+
+ onOverlayComplete: `overlaycomplete`,
+
+ onPolygonComplete: `polygoncomplete`,
+ onPolylineComplete: `polylinecomplete`,
+
+ onRectangleComplete: `rectanglecomplete`,
+};
+
+const publicMethodMap = {
// Public APIs
//
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
//
// [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
- // .filter(function(it){ return it.match(/^get/) && !it.match(/^getMap/); })
- getDrawingMode() { return this.state.drawingManager.getDrawingMode(); }
+ // .filter(function(it){ return it.match(/^get/) && !it.match(/Map$/); })
+ getDrawingMode(drawingManager) { return drawingManager.getDrawingMode(); },
// END - Public APIs
- //
- // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
+};
- state = {
- }
+const controlledPropUpdaterMap = {
+ drawingMode(drawingManager, drawingMode) { drawingManager.setDrawingMode(drawingMode); },
+ options(drawingManager, options) { drawingManager.setOptions(options); },
+};
- componentWillMount() {
- const { mapHolderRef } = this.context;
+function getInstanceFromComponent(component) {
+ return component.state[DRAWING_MANAGER];
+}
- if (!canUseDOM) {
- return;
- }
- const drawingManager = DrawingManagerCreator._createDrawingManager({
- ...this.props,
- mapHolderRef,
+export default _.flowRight(
+ React.createClass,
+ enhanceElement(getInstanceFromComponent, publicMethodMap, eventMap, controlledPropUpdaterMap),
+)({
+ displayName: `DrawingManager`,
+
+ propTypes: {
+ ...controlledPropTypes,
+ ...defaultUncontrolledPropTypes,
+ },
+
+ contextTypes: {
+ [MAP]: PropTypes.object,
+ },
+
+ getInitialState() {
+ // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
+ const drawingManager = new google.maps.drawing.DrawingManager({
+ map: this.context[MAP],
+ ...collectUncontrolledAndControlledProps(
+ defaultUncontrolledPropTypes,
+ controlledPropTypes,
+ this.props
+ ),
});
+ return {
+ [DRAWING_MANAGER]: drawingManager,
+ };
+ },
- this.setState({ drawingManager });
- }
+ componentWillUnmount() {
+ const drawingManager = getInstanceFromComponent(this);
+ if (drawingManager) {
+ drawingManager.setMap(null);
+ }
+ },
render() {
- if (this.state.drawingManager) {
- return (
-
- {this.props.children}
-
- );
- } else {
- return ();
- }
- }
-}
+ return false;
+ },
+});
diff --git a/src/lib/eventLists/DrawingManagerEventList.js b/src/lib/eventLists/DrawingManagerEventList.js
deleted file mode 100644
index 0224580c..00000000
--- a/src/lib/eventLists/DrawingManagerEventList.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
-// [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
-export default [
- `circlecomplete`,
- `markercomplete`,
- `overlaycomplete`,
- `polygoncomplete`,
- `polylinecomplete`,
- `rectanglecomplete`,
-];