From 08c568732759ecef474a8cb80ba28345bd34433b Mon Sep 17 00:00:00 2001
From: Tom Chen <developer@tomchentw.com>
Date: Wed, 13 Sep 2017 22:21:40 +0800
Subject: [PATCH] feat(Marker): revamp with jscodeshift

---
 src/lib/Marker.js     | 333 ------------------------------------------
 src/macros/Marker.jsx | 143 ++++++++++++++++++
 2 files changed, 143 insertions(+), 333 deletions(-)
 delete mode 100644 src/lib/Marker.js
 create mode 100644 src/macros/Marker.jsx

diff --git a/src/lib/Marker.js b/src/lib/Marker.js
deleted file mode 100644
index 3443fe18..00000000
--- a/src/lib/Marker.js
+++ /dev/null
@@ -1,333 +0,0 @@
-/* global google */
-import _ from "lodash";
-
-import PropTypes from "prop-types";
-
-import createReactClass from "create-react-class";
-
-import React from "react";
-
-import {
-  MAP,
-  MARKER,
-  ANCHOR,
-  MARKER_CLUSTERER,
-} 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#Marker
-  animation: PropTypes.any,
-
-  attribution: PropTypes.any,
-
-  clickable: PropTypes.bool,
-
-  cursor: PropTypes.string,
-
-  draggable: PropTypes.bool,
-
-  icon: PropTypes.any,
-
-  label: PropTypes.any,
-
-  markerWithLabel: PropTypes.func,
-
-  labelClass: PropTypes.string,
-
-  labelAnchor: PropTypes.object,
-
-  labelContent: PropTypes.string,
-
-  labelStyle: PropTypes.object,
-
-  noRedraw: PropTypes.bool,
-
-  opacity: PropTypes.number,
-
-  options: PropTypes.object,
-
-  place: PropTypes.any,
-
-  position: PropTypes.any,
-
-  shape: PropTypes.any,
-
-  title: PropTypes.string,
-
-  visible: PropTypes.bool,
-
-  zIndex: PropTypes.number,
-};
-
-const defaultUncontrolledPropTypes = addDefaultPrefixToPropTypes(controlledPropTypes);
-
-const eventMap = {
-  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
-  // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
-  onAnimationChanged: `animation_changed`,
-
-  onClick: `click`,
-
-  onClickableChanged: `clickable_changed`,
-
-  onCursorChanged: `cursor_changed`,
-
-  onDblClick: `dblclick`,
-
-  onDrag: `drag`,
-
-  onDragEnd: `dragend`,
-
-  onDraggableChanged: `draggable_changed`,
-
-  onDragStart: `dragstart`,
-
-  onFlatChanged: `flat_changed`,
-
-  onIconChanged: `icon_changed`,
-
-  onMouseDown: `mousedown`,
-
-  onMouseOut: `mouseout`,
-
-  onMouseOver: `mouseover`,
-
-  onMouseUp: `mouseup`,
-
-  onPositionChanged: `position_changed`,
-
-  onRightClick: `rightclick`,
-
-  onShapeChanged: `shape_changed`,
-
-  onTitleChanged: `title_changed`,
-
-  onVisibleChanged: `visible_changed`,
-
-  onZindexChanged: `zindex_changed`,
-};
-
-const publicMethodMap = {
-  // Public APIs
-  //
-  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
-  //
-  // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
-  //    .filter(function(it){ return it.match(/^get/) && !it.match(/Map$/); })
-  getAnimation(marker) {
-    return marker.getAnimation();
-  },
-
-  getAttribution(marker) {
-    return marker.getAttribution();
-  },
-
-  getClickable(marker) {
-    return marker.getClickable();
-  },
-
-  getCursor(marker) {
-    return marker.getCursor();
-  },
-
-  getDraggable(marker) {
-    return marker.getDraggable();
-  },
-
-  getIcon(marker) {
-    return marker.getIcon();
-  },
-
-  getLabel(marker) {
-    return marker.getLabel();
-  },
-
-  getOpacity(marker) {
-    return marker.getOpacity();
-  },
-
-  getPlace(marker) {
-    return marker.getPlace();
-  },
-
-  getPosition(marker) {
-    return marker.getPosition();
-  },
-
-  getShape(marker) {
-    return marker.getShape();
-  },
-
-  getTitle(marker) {
-    return marker.getTitle();
-  },
-
-  getVisible(marker) {
-    return marker.getVisible();
-  },
-
-  getZIndex(marker) {
-    return marker.getZIndex();
-  },
-
-  // Public Api's
-  // https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/markerwithlabel/src/markerwithlabel.js
-  getLabelContent(marker) {
-    return marker.get(`labelContent`);
-  },
-
-  // END - Public APIs
-};
-
-const controlledPropUpdaterMap = {
-  animation(marker, animation) {
-    marker.setAnimation(animation);
-  },
-
-  attribution(marker, attribution) {
-    marker.setAttribution(attribution);
-  },
-
-  clickable(marker, clickable) {
-    marker.setClickable(clickable);
-  },
-
-  cursor(marker, cursor) {
-    marker.setCursor(cursor);
-  },
-
-  draggable(marker, draggable) {
-    marker.setDraggable(draggable);
-  },
-
-  icon(marker, icon) {
-    marker.setIcon(icon);
-  },
-
-  opacity(marker, opacity) {
-    marker.setOpacity(opacity);
-  },
-
-  options(marker, options) {
-    marker.setOptions(options);
-  },
-
-  place(marker, place) {
-    marker.setPlace(place);
-  },
-
-  position(marker, position) {
-    marker.setPosition(position);
-  },
-
-  shape(marker, shape) {
-    marker.setShape(shape);
-  },
-
-  title(marker, title) {
-    marker.setTitle(title);
-  },
-
-  visible(marker, visible) {
-    marker.setVisible(visible);
-  },
-
-  zIndex(marker, zIndex) {
-    marker.setZIndex(zIndex);
-  },
-
-  // Public Api's
-  // https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/markerwithlabel/src/markerwithlabel.js
-  labelContent(marker, label) {
-    marker.set(`labelContent`, label);
-  },
-
-};
-
-function getInstanceFromComponent(component) {
-  return component.state[MARKER];
-}
-
-export default _.flowRight(
-  createReactClass,
-  enhanceElement(getInstanceFromComponent, publicMethodMap, eventMap, controlledPropUpdaterMap),
-)({
-  displayName: `Marker`,
-
-  propTypes: {
-    ...controlledPropTypes,
-    ...defaultUncontrolledPropTypes,
-  },
-
-  contextTypes: {
-    [MAP]: PropTypes.object,
-    [MARKER_CLUSTERER]: PropTypes.object,
-  },
-
-  childContextTypes: {
-    [ANCHOR]: PropTypes.object,
-  },
-
-  getInitialState() {
-    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
-    const Marker = this.props.markerWithLabel || google.maps.Marker;
-    const marker = new Marker(
-      collectUncontrolledAndControlledProps(
-        defaultUncontrolledPropTypes,
-        controlledPropTypes,
-        this.props
-      ),
-    );
-    const markerClusterer = this.context[MARKER_CLUSTERER];
-    if (markerClusterer) {
-      markerClusterer.addMarker(marker, !!this.props.noRedraw);
-    } else {
-      marker.setMap(this.context[MAP]);
-    }
-    return {
-      [MARKER]: marker,
-    };
-  },
-
-  getChildContext() {
-    return {
-      [ANCHOR]: this.context[ANCHOR] || getInstanceFromComponent(this),
-    };
-  },
-
-  componentWillUnmount() {
-    const marker = getInstanceFromComponent(this);
-    if (marker) {
-      const markerClusterer = this.context[MARKER_CLUSTERER];
-      if (markerClusterer) {
-        markerClusterer.removeMarker(marker, !!this.props.noRedraw);
-      }
-      marker.setMap(null);
-    }
-  },
-
-  render() {
-    const {
-      children,
-    } = this.props;
-
-    return (
-      <div>
-        {children}
-      </div>
-    );
-  },
-});
diff --git a/src/macros/Marker.jsx b/src/macros/Marker.jsx
new file mode 100644
index 00000000..74972b2a
--- /dev/null
+++ b/src/macros/Marker.jsx
@@ -0,0 +1,143 @@
+/* global google */
+import React from "react"
+import PropTypes from "prop-types"
+
+import {
+  construct,
+  componentDidMount,
+  componentDidUpdate,
+  componentWillUnmount,
+} from "../utils/MapChildHelper"
+
+import { MAP, MARKER, ANCHOR, MARKER_CLUSTERER } from "../constants"
+
+export const __jscodeshiftPlaceholder__ = `{
+  "eventMapOverrides": {
+    "onDblClick": "dblclick",
+    "onDragEnd": "dragend",
+    "onDragStart": "dragstart",
+    "onMouseDown": "mousedown",
+    "onMouseOut": "mouseout",
+    "onMouseOver": "mouseover",
+    "onMouseUp": "mouseup",
+    "onRightClick": "rightclick"
+  },
+  "getInstanceFromComponent": "this.state[MARKER]"
+}`
+
+/**
+ * @url https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
+ */
+export class Marker extends React.PureComponent {
+  static propTypes = {
+    __jscodeshiftPlaceholder__: null,
+    /**
+     * For the 2nd argument of `MarkerCluster#addMarker`
+     * @see https://github.com/mikesaidani/marker-clusterer-plus
+     */
+    noRedraw: PropTypes.bool,
+    /**
+     * For `MarkerWithLabel`
+     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+     */
+    markerWithLabel: PropTypes.func,
+    /**
+     * For `MarkerWithLabel`
+     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+     */
+    labelClass: PropTypes.string,
+    /**
+     * For `MarkerWithLabel`
+     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+     */
+    labelAnchor: PropTypes.object,
+    /**
+     * For `MarkerWithLabel`
+     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+     */
+    labelContent: PropTypes.string,
+    /**
+     * For `MarkerWithLabel`
+     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+     */
+    labelStyle: PropTypes.object,
+  }
+
+  static contextTypes = {
+    [MAP]: PropTypes.object,
+    [MARKER_CLUSTERER]: PropTypes.object,
+  }
+
+  static childContextTypes = {
+    [ANCHOR]: PropTypes.object,
+  }
+
+  /*
+   * @url https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
+   */
+  constructor(props, context) {
+    super(props, context)
+    const GMKlass = this.props.markerWithLabel || google.maps.Marker
+    const marker = new GMKlass()
+    construct(Marker.propTypes, updaterMap, this.props, marker)
+    const markerClusterer = this.context[MARKER_CLUSTERER]
+    if (markerClusterer) {
+      markerClusterer.addMarker(marker, !!this.props.noRedraw)
+    } else {
+      marker.setMap(this.context[MAP])
+    }
+    this.state = {
+      [MARKER]: marker,
+    }
+  }
+
+  getChildContext() {
+    return {
+      [ANCHOR]: this.context[ANCHOR] || this.state[MARKER],
+    }
+  }
+
+  componentDidMount() {
+    componentDidMount(this, this.state[MARKER], eventMap)
+  }
+
+  componentDidUpdate(prevProps) {
+    componentDidUpdate(
+      this,
+      this.state[MARKER],
+      eventMap,
+      updaterMap,
+      prevProps
+    )
+  }
+
+  componentWillUnmount() {
+    componentWillUnmount(this)
+    const marker = this.state[MARKER]
+    if (marker) {
+      const markerClusterer = this.context[MARKER_CLUSTERER]
+      if (markerClusterer) {
+        markerClusterer.removeMarker(marker, !!this.props.noRedraw)
+      }
+      marker.setMap(null)
+    }
+  }
+
+  render() {
+    const { children } = this.props
+    return <div>{children}</div>
+  }
+}
+
+export default Marker
+
+const eventMap = {}
+
+const updaterMap = {
+  /*
+   * @see https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/markerwithlabel/src/markerwithlabel.js
+   */
+  labelContent(instance, labelContent) {
+    instance.set(`labelContent`, labelContent)
+  },
+}