feat(src): update composeOptions to accept controlledPropTypes for _2

* Ref #130 * Ref #125 * Ref #121 * Ref #112 * Ref #107 * Ref #107
tomchentw · Oct 13, 2015 · 03aee4d · 03aee4d
1 parent 777fd83
commit 03aee4d
Show file tree

Hide file tree

Showing 14 changed files with 84 additions and 95 deletions.
diff --git a/src/addons/addonsCreators/InfoBoxCreator.js b/src/addons/addonsCreators/InfoBoxCreator.js
@@ -14,6 +14,10 @@ import {default as componentLifecycleDecorator} from "../../utils/componentLifec
 import {default as GoogleMapHolder} from "../../creators/GoogleMapHolder";
 
 export const infoBoxControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
 // http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
   content: PropTypes.any,
   options: PropTypes.object,
@@ -57,13 +61,7 @@ export default class InfoBoxCreator extends Component {
     // a isomorphic server.
     const GoogleMapsInfobox = require("google-maps-infobox");
     // http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
-    const infoBox = new GoogleMapsInfobox(composeOptions(infoBoxProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference
-      "content",
-      "position",
-      "visible",
-      "zIndex",
-    ]));
+    const infoBox = new GoogleMapsInfobox(composeOptions(infoBoxProps, infoBoxControlledPropTypes));
 
     if (infoBoxProps.children) {
       setContentForOptionalReactElement(infoBoxProps.children, infoBox);

diff --git a/src/creators/CircleCreator.js b/src/creators/CircleCreator.js
@@ -13,7 +13,12 @@ import {default as componentLifecycleDecorator} from "../utils/componentLifecycl
 import {default as GoogleMapHolder} from "./GoogleMapHolder";
 
 export const circleControlledPropTypes = {
+// 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#Circle
   center: PropTypes.any,
   draggable: PropTypes.bool,
@@ -53,14 +58,7 @@ export default class CircleCreator extends Component {
   static _createCircle (circleProps) {
     const {mapHolderRef} = circleProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Circle
-    const circle = new google.maps.Circle(composeOptions(circleProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#CircleOptions
-      "center",
-      "draggable",
-      "editable",
-      "radius",
-      "visible",
-    ]));
+    const circle = new google.maps.Circle(composeOptions(circleProps, circleControlledPropTypes));
 
     circle.setMap(mapHolderRef.getMap());
 

diff --git a/src/creators/DirectionsRendererCreator.js b/src/creators/DirectionsRendererCreator.js
@@ -14,7 +14,12 @@ import {default as componentLifecycleDecorator} from "../utils/componentLifecycl
 import {default as GoogleMapHolder} from "./GoogleMapHolder";
 
 export const directionsRendererControlledPropTypes = {
+// 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#DirectionsRenderer
   directions: PropTypes.any,
   options: PropTypes.object,
@@ -50,12 +55,7 @@ export default class DirectionsRendererCreator extends Component {
   static _createDirectionsRenderer (directionsRendererProps) {
     const {mapHolderRef} = directionsRendererProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRenderer
-    const directionsRenderer = new google.maps.DirectionsRenderer(composeOptions(directionsRendererProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRendererOptions
-      "directions",
-      "panel",
-      "routeIndex",
-    ]));
+    const directionsRenderer = new google.maps.DirectionsRenderer(composeOptions(directionsRendererProps, directionsRendererControlledPropTypes));
 
     directionsRenderer.setMap(mapHolderRef.getMap());
 

diff --git a/src/creators/DrawingManagerCreator.js b/src/creators/DrawingManagerCreator.js
@@ -13,7 +13,12 @@ import {default as componentLifecycleDecorator} from "../utils/componentLifecycl
 import {default as GoogleMapHolder} from "./GoogleMapHolder";
 
 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,
@@ -45,10 +50,7 @@ export default class DrawingManagerCreator extends Component {
   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, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManagerOptions
-      "drawingMode",
-    ]));
+    const drawingManager = new google.maps.drawing.DrawingManager(composeOptions(drawingManagerProps, drawingManagerControlledPropTypes));
 
     drawingManager.setMap(mapHolderRef.getMap());
 

diff --git a/src/creators/GoogleMapHolder.js b/src/creators/GoogleMapHolder.js
@@ -12,7 +12,12 @@ import {default as composeOptions} from "../utils/composeOptions";
 import {default as componentLifecycleDecorator} from "../utils/componentLifecycleDecorator";
 
 export const mapControlledPropTypes = {
+// 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#Map
   center: PropTypes.object,
   heading: PropTypes.number,
@@ -52,15 +57,7 @@ export default class GoogleMapHolder extends Component {
 
   static _createMap (domEl, mapProps) {
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map
-    return new google.maps.Map(domEl, composeOptions(mapProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions
-      "center",
-      "heading",
-      "mapTypeId",
-      "streetView",
-      "tilt",
-      "zoom",
-    ]));
+    return new google.maps.Map(domEl, composeOptions(mapProps, mapControlledPropTypes));
   }
 
   getMap () {

diff --git a/src/creators/InfoWindowCreator.js b/src/creators/InfoWindowCreator.js
@@ -14,7 +14,12 @@ import {default as componentLifecycleDecorator} from "../utils/componentLifecycl
 import {default as GoogleMapHolder} from "./GoogleMapHolder";
 
 export const infoWindowControlledPropTypes = {
+// 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#InfoWindow
   content: PropTypes.any,
   options: PropTypes.object,
@@ -52,12 +57,7 @@ export default class InfoWindowCreator extends Component {
   static _createInfoWindow (infoWindowProps) {
     const {mapHolderRef, anchorHolderRef} = infoWindowProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindow
-    const infoWindow = new google.maps.InfoWindow(composeOptions(infoWindowProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindowOptions
-      "content",
-      "position",
-      "zIndex",
-    ]));
+    const infoWindow = new google.maps.InfoWindow(composeOptions(infoWindowProps, infoWindowControlledPropTypes));
 
     if (infoWindowProps.children) {
       setContentForOptionalReactElement(infoWindowProps.children, infoWindow);

diff --git a/src/creators/MarkerCreator.js b/src/creators/MarkerCreator.js
@@ -14,7 +14,12 @@ import {default as componentLifecycleDecorator} from "../utils/componentLifecycl
 import {default as GoogleMapHolder} from "./GoogleMapHolder";
 
 export const markerControlledPropTypes = {
+// 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,
@@ -72,23 +77,7 @@ export default class MarkerCreator extends Component {
   static _createMarker (markerProps) {
     const {mapHolderRef} = markerProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
-    const marker = new google.maps.Marker(composeOptions(markerProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerOptions
-      "animation",
-      "attribution",
-      "clickable",
-      "cursor",
-      "draggable",
-      "icon",
-      "label",
-      "opacity",
-      "place",
-      "position",
-      "shape",
-      "title",
-      "visible",
-      "zIndex",
-    ]));
+    const marker = new google.maps.Marker(composeOptions(markerProps, markerControlledPropTypes));
 
     marker.setMap(mapHolderRef.getMap());
 

diff --git a/src/creators/OverlayViewCreator.js b/src/creators/OverlayViewCreator.js
@@ -16,7 +16,13 @@ export const overlayViewControlledPropTypes = {
   mapPaneName: PropTypes.string,
   getPixelPositionOffset: PropTypes.func,
   position: PropTypes.object,
+  children: PropTypes.node,
+// 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
 };
 
@@ -33,12 +39,7 @@ export default class OverlayViewCreator extends Component {
     const {mapHolderRef} = overlayViewProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#OverlayView
     const overlayView = new google.maps.OverlayView();
-    overlayView.setValues(composeOptions(overlayViewProps, [
-      "mapPaneName",
-      "getPixelPositionOffset",
-      "position",
-      "children",
-    ]));
+    overlayView.setValues(composeOptions(overlayViewProps, overlayViewControlledPropTypes));
 
     overlayView.onAdd = function () {
       this._containerElement = document.createElement("div");

diff --git a/src/creators/PolygonCreator.js b/src/creators/PolygonCreator.js
@@ -13,7 +13,12 @@ import {default as componentLifecycleDecorator} from "../utils/componentLifecycl
 import {default as GoogleMapHolder} from "./GoogleMapHolder";
 
 export const polygonControlledPropTypes = {
+// 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#Polygon
   draggable: PropTypes.bool,
   editable: PropTypes.bool,
@@ -53,13 +58,7 @@ export default class PolygonCreator extends Component {
   static _createPolygon (polygonProps) {
     const {mapHolderRef} = polygonProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polygon
-    const polygon = new google.maps.Polygon(composeOptions(polygonProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#PolygonOptions
-      "draggable",
-      "editable",
-      "paths",
-      "visible",
-    ]));
+    const polygon = new google.maps.Polygon(composeOptions(polygonProps, polygonControlledPropTypes));
 
     polygon.setMap(mapHolderRef.getMap());
 

diff --git a/src/creators/PolylineCreator.js b/src/creators/PolylineCreator.js
@@ -13,7 +13,12 @@ import {default as componentLifecycleDecorator} from "../utils/componentLifecycl
 import {default as GoogleMapHolder} from "./GoogleMapHolder";
 
 export const polylineControlledPropTypes = {
+// 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#Polyline
   draggable: PropTypes.bool,
   editable: PropTypes.bool,
@@ -51,13 +56,7 @@ export default class PolylineCreator extends Component {
   static _createPolyline (polylineProps) {
     const {mapHolderRef} = polylineProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polyline
-    const polyline = new google.maps.Polyline(composeOptions(polylineProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#PolylineOptions
-      "draggable",
-      "editable",
-      "path",
-      "visible",
-    ]));
+    const polyline = new google.maps.Polyline(composeOptions(polylineProps, polylineControlledPropTypes));
 
     polyline.setMap(mapHolderRef.getMap());
 

diff --git a/src/creators/RectangleCreator.js b/src/creators/RectangleCreator.js
@@ -14,7 +14,12 @@ import {default as componentLifecycleDecorator} from "../utils/componentLifecycl
 import {default as GoogleMapHolder} from "./GoogleMapHolder";
 
 export const rectangleControlledPropTypes = {
+// 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#Rectangle
   bounds: PropTypes.any,
   draggable: PropTypes.bool,
@@ -52,13 +57,7 @@ export default class RectangleCreator extends Component {
   static _createRectangle (rectangleProps) {
     const {mapHolderRef} = rectangleProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle
-    const rectangle = new google.maps.Rectangle(composeOptions(rectangleProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference#RectangleOptions
-      "bounds",
-      "draggable",
-      "editable",
-      "visible",
-    ]));
+    const rectangle = new google.maps.Rectangle(composeOptions(rectangleProps, rectangleControlledPropTypes));
 
     rectangle.setMap(mapHolderRef.getMap());
 

diff --git a/src/creators/SearchBoxCreator.js b/src/creators/SearchBoxCreator.js
@@ -13,6 +13,10 @@ import {default as componentLifecycleDecorator} from "../utils/componentLifecycl
 import {default as GoogleMapHolder} from "./GoogleMapHolder";
 
 export const searchBoxControlledPropTypes = {
+// NOTICE!!!!!!
+//
+// Only expose those with getters & setters in the table as controlled props.
+//
   bounds: PropTypes.any,
 };
 
@@ -39,9 +43,7 @@ export default class SearchBoxCreator extends Component {
   }
 
   static _createSearchBox (inputElement, searchBoxProps) {
-    const searchBox = new google.maps.places.SearchBox(inputElement, composeOptions(searchBoxProps, [
-      "bounds",
-    ]));
+    const searchBox = new google.maps.places.SearchBox(inputElement, composeOptions(searchBoxProps, searchBoxControlledPropTypes));
 
     return searchBox;
   }

diff --git a/src/creators/_SkeletonCreator.js b/src/creators/_SkeletonCreator.js
@@ -14,7 +14,12 @@ import {default as componentLifecycleDecorator} from "../utils/componentLifecycl
 import {default as GoogleMapHolder} from "./GoogleMapHolder";
 
 export const skeletonControlledPropTypes = {
+// 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
   animation: PropTypes.any,
 };
@@ -44,10 +49,7 @@ export default class SkeletonCreator extends Component {
   static _createSkeleton (skeletonProps) {
     const {mapHolderRef} = skeletonProps;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference
-    const skeleton = new google.maps.Skeleton(composeOptions(skeletonProps, [
-      // https://developers.google.com/maps/documentation/javascript/3.exp/reference
-      "animation",
-    ]));
+    const skeleton = new google.maps.Skeleton(composeOptions(skeletonProps, skeletonControlledPropTypes));
 
     skeleton.setMap(mapHolderRef.getMap());
 

diff --git a/src/utils/composeOptions.js b/src/utils/composeOptions.js
@@ -1,14 +1,17 @@
 import {default as controlledOrDefault} from "./controlledOrDefault";
 
-export default function composeOptions (props, optionNameList) {
+export default function composeOptions (props, controlledPropTypes) {
+  const optionNameList = Object.keys(controlledPropTypes);
   const getter = controlledOrDefault(props);
 
   // props from arguments may contain unknow props.
   // We only interested those in optionNameList
   return optionNameList.reduce((acc, optionName) => {
-    const value = getter(optionName);
-    if ("undefined" !== typeof value) {
-      acc[optionName] = value;
+    if ("options" !== optionName) {
+      const value = getter(optionName);
+      if ("undefined" !== typeof value) {
+        acc[optionName] = value;
+      }
     }
     return acc;
   }, {