From 1b6a937a6a7b11bfeadadbd7b0367442cefba3db Mon Sep 17 00:00:00 2001
From: Tom Chen <developer@tomchentw.com>
Date: Tue, 4 Oct 2016 17:05:41 +0800
Subject: [PATCH] refactor(drawing/DrawingManager): rewrite with enhanceElement
 and cleaner interfaces

BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.

Before:

```js
<DrawingManager
  onCirclecomplete={_.noop}
  onOverlaycomplete={_.noop}
/>
```

After:

```js
<DrawingManager
  onCircleComplete={_.noop}
  onOverlayComplete={_.noop}
/>
```
---
 src/lib/constants.js                          |   2 +
 src/lib/creators/DrawingManagerCreator.js     |  73 ---------
 src/lib/drawing/DrawingManager.js             | 147 +++++++++++-------
 src/lib/eventLists/DrawingManagerEventList.js |  10 --
 4 files changed, 91 insertions(+), 141 deletions(-)
 delete mode 100644 src/lib/creators/DrawingManagerCreator.js
 delete mode 100644 src/lib/eventLists/DrawingManagerEventList.js

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 (<noscript />);
-  }
-}
-
-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 (
-        <DrawingManagerCreator
-          drawingManager={this.state.drawingManager}
-          {...this.props}
-        >
-          {this.props.children}
-        </DrawingManagerCreator>
-      );
-    } else {
-      return (<noscript />);
-    }
-  }
-}
+    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`,
-];