react-googlemaps - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

CHANGELOG.md

@@ -0,8 +1,16 @@
+## 0.2.0
+
+- Expose Map PropType validators.
+- Added PropType validators to components.
+- Map options are no longer passed to the node constructor and are rather, set directly after construction.
+- Bugfix: Force noop handlers for events with side effects, e.g. if prop of `center` is set a handler for `onCenterChange` will internally set which allows the SideEffectEventPlugin to stop a value from being internally modified.
+- Added option for setting initial options, e.g. `center` can instead be set as `initialCenter`.
+
 ## 0.1.2
 
-- Bugfix: update `OverlayView` with new props are passed
+- Bugfix: update `OverlayView` when new props are passed.
 
 ## 0.1.1
 
-- Added base required propType checks
+- Added base required propType checks.
 
@@ -9,0 +17,0 @@ ## 0.1.0

index.js

 "use strict";
 
+var merge = require('react/lib/merge');
 var ReactDefaultInjection = require('./src/ui/ReactDefaultInjection');
 var ReactMapComponents = require('./src/ReactMapComponents');
+var MapPropTypes = require('./src/ui/MapPropTypes');
 
 ReactDefaultInjection.inject();
 
-module.exports = ReactMapComponents;
+module.exports = merge(
+  ReactMapComponents,
+  {
+    PropTypes: MapPropTypes
+  }
+);

package.json

 {
   "name": "react-googlemaps",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A declarative React interface to Google Maps",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -23,3 +23,3 @@ React Google Maps [![Build Status](https://travis-ci.org/pieterv/react-googlemaps.svg?branch=master)](https://travis-ci.org/pieterv/react-googlemaps)
 
-Modules
+Components
 --------
@@ -35,2 +35,2 @@
 
-Check out the `examples` directory to see how these modules can be used.
+Check out the [`examples`](https://github.com/pieterv/react-googlemaps/tree/master/examples) directory to see how these modules can be used.

src/ReactMapComponents.js

@@ -7,3 +7,2 @@ "use strict";
 var ReactMapComponent = require('./ui/ReactMapComponent');
-var MapOption = require('./ui/MapOption');
 
@@ -14,5 +13,4 @@ function createMapComponentClass(constructorFn, constructorName) {
 
-function constructGoogleMapsMapClass(props) {
-  var options = MapOption.extractOptionsFromProps(props);
-  return new GoogleMapsAPI.Map(props.mapDiv, options);
+function constructGoogleMapsMapClass() {
+  return new GoogleMapsAPI.Map(this.props.mapDiv);
 }
@@ -19,0 +17,0 @@

src/ui/components/ReactMap.js

@@ -9,2 +9,3 @@ /** @jsx React.DOM */
 var MapPropTypes = require('../MapPropTypes');
+var PropTypeUtils = require('../../utils/PropTypeUtils');
 
@@ -21,4 +22,4 @@ var GoogleMapsMap = ReactMapComponents.Map;
   propTypes: {
-    zoom: React.PropTypes.number.isRequired,
-    center: MapPropTypes.LatLng.isRequired,
+    zoom: PropTypeUtils.or('initialZoom', React.PropTypes.number).isRequired,
+    center: PropTypeUtils.or('initialCenter', MapPropTypes.LatLng).isRequired,
     width: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
@@ -25,0 +26,0 @@ height: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string])

src/ui/MapEvent.js

@@ -43,3 +43,3 @@ "use strict";
         if (EventConfig.effects) {
-          MapEvent.getEventSideEffectOption[eventName] = EventConfig.effects;
+          MapEvent.getOptionSideEffectEvent[EventConfig.effects] = eventName;
         }
@@ -67,3 +67,3 @@ }
   /**
-   * Checks whether a option name is a standard option.
+   * Checks whether an event name is a standard event.
    * @type {Object}
@@ -74,9 +74,9 @@ */
   /**
-   * Checks whether a option name is a standard option.
+   * Mapping from side effect options to normalized event names.
    * @type {Object}
    */
-  getEventSideEffectOption: {},
+  getOptionSideEffectEvent: {},
 
   /**
-   * Mapping from normalized names to option on Map class instances.
+   * Mapping from normalized event names to GoogleMaps event name.
    * @type {Object}
@@ -86,18 +86,8 @@ */
 
+  /**
+   * Mapping over normalized event names to event dispatchers
+   * @type {Object}
+   */
   getDispatcher: {},
 
-  extractEventsFromProps: function(props) {
-    var events = {};
-
-    for (var propName in props) {
-      if (!MapEvent.isStandardName[propName]) {
-        continue;
-      }
-
-      events[propName] = props[propName];
-    }
-
-    return events;
-  },
-
   createEventDispatcher: function(eventName, instance) {
@@ -104,0 +94,0 @@ var executeDispatch = MapEvent.getDispatcher[eventName];

src/ui/MapOption.js

@@ -5,2 +5,6 @@ "use strict";
 
+function createInitialOptionName(name) {
+  return 'initial' + name.charAt(0).toUpperCase() + name.slice(1)
+}
+
 var MapOptionInjection = {
@@ -40,2 +44,5 @@
           propName;
+
+      MapOption.getInitialOptionName[createInitialOptionName(propName)] =
+        MapOption.getOptionName[propName];
     }
@@ -72,16 +79,8 @@ }
 
-  extractOptionsFromProps: function(props) {
-    var options = {};
+  /**
+   * Mapping from normalized initial names to option on Map class instances.
+   * @type {Object}
+   */
+  getInitialOptionName: {},
 
-    for (var propName in props) {
-      if (!MapOption.isStandardName[propName]) {
-        continue;
-      }
-
-      options[MapOption.getOptionName[propName]] = props[propName];
-    }
-
-    return options;
-  },
-
   injection: MapOptionInjection
@@ -88,0 +87,0 @@ };

src/ui/ReactMapComponent.js

@@ -6,3 +6,2 @@ "use strict";
 var GoogleMapsAPI = require('../GoogleMapsAPI');
-var MapOption = require('./MapOption');
 var ReactMapComponentMixin = require('./ReactMapComponentMixin');
@@ -30,6 +29,4 @@
 
-  return function(props) {
-    var options = MapOption.extractOptionsFromProps(props);
-
-    return new Constructor(options);
+  return function() {
+    return new Constructor();
   }
@@ -46,2 +43,3 @@ }
    * @param {function?} constructorFn
+   * @return {ReactComponent}
    */
@@ -48,0 +46,0 @@ create: function(constructorName, constructorFn) {

src/ui/ReactMapComponentMixin.js

 "use strict";
 
+var merge = require('react/lib/merge');
 var invariant = require('react/lib/invariant');
 var MapOption = require('./MapOption');
+var MapOptionConfig = require('./MapOptionConfig');
 var MapEvent = require('./MapEvent');
@@ -15,5 +17,17 @@ var GoogleMapsAPI = require('../GoogleMapsAPI');
 /**
+ * Empty props cache
+ */
+var emptyPropsCache = {};
+
+/**
+ * Empty function to be provided to event handlers
+ */
+function noop() {}
+
+/**
  * GoogleMaps React component mixin
  */
 var ReactMapComponentMixin = {
+  propTypes: merge(MapOptionConfig.Options),
+
   shouldComponentUpdate: function() {
@@ -27,5 +41,6 @@ return this.__shouldComponentUpdate;
     this.__eventCache = {};
-    this.__node = this.constructGoogleMapsClass(this.props);
+    this.__node = this.constructGoogleMapsClass();
     this.__nodeInterface = new GetterProxy(this.__node);
-    this.flushEventChanges(MapEvent.extractEventsFromProps(this.props));
+    this._setInitialMapProperties();
+    this._updateMapProperties(emptyPropsCache);
   },
@@ -37,2 +52,17 @@
 
+  _setInitialMapProperties: function() {
+    var initialMapOptions = {};
+    var props = this.props;
+    for (var propKey in props) {
+      var optionName = MapOption.getInitialOptionName[propKey];
+      if (!props.hasOwnProperty(propKey) || !optionName) {
+        continue;
+      }
+
+      initialMapOptions[optionName] = props[propKey];
+    }
+
+    this.flushOptionChanges(initialMapOptions);
+  },
+
   _updateMapProperties: function(lastProps) {
@@ -42,4 +72,6 @@ var nextProps = this.props;
     var mapEventChanges = {};
+    var propKey;
 
-    var propKey;
+    // Remove any options or events that no longer
+    // exist in the new set of props.
     for (propKey in lastProps) {
@@ -58,2 +90,3 @@ if (nextProps.hasOwnProperty(propKey) ||
 
+    // Add any changed options or new events.
     for (propKey in nextProps) {
@@ -74,4 +107,21 @@ var nextProp = nextProps[propKey];
 
-    // TODO: Deal with adding noop event listeners to props with side effects
+    // Added check of changed options that have side effect events,
+    // if they don't have a handler then add a noop one for this event
+    // to trigger the side effect dirty checking.
+    for (propKey in mapOptionChanges) {
+      var sideEffectEvent = MapEvent.getOptionSideEffectEvent[propKey];
+      if (!mapOptionChanges.hasOwnProperty(propKey) || !sideEffectEvent || nextProps[sideEffectEvent]) {
+        continue;
+      }
 
+      var hasNextProp = nextProps[propKey] != null;
+      var hasLastProp = lastProps[propKey] != null;
+
+      if (hasLastProp && !hasNextProp) {
+        mapEventChanges[sideEffectEvent] = null;
+      } else if (!hasLastProp && hasNextProp) {
+        mapEventChanges[sideEffectEvent] = noop;
+      }
+    }
+
     this.flushOptionChanges(mapOptionChanges);
@@ -78,0 +128,0 @@ this.flushEventChanges(mapEventChanges);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68840

increased by29.25%

Number of package files

32

increased by3.23%

Lines of code

995

increased by6.99%

No dependency changes