react-google-maps - npm Package Compare versions

Comparing version 0.2.5 to 1.0.0

CHANGELOG.md

@@ -0,1 +1,14 @@
+## 1.0.0 (2015-04-28)
+
+
+#### Bug Fixes
+
+* **package.json:** add peerDependencies ([15166996](https://github.com/tomchentw/react-google-maps/commit/1516699617da603dd9dc7e51528a3dd827470617))
+
+
+#### Features
+
+* **src:** rewrite with new API ([a525d5f2](https://github.com/tomchentw/react-google-maps/commit/a525d5f2a074506ad0a9a50fd58d77ecfc4318f9))
+
+
 ### 0.2.5 (2015-03-11)
@@ -2,0 +15,0 @@

client/scripts/ComponentPlayground.js

@@ -1,13 +0,9 @@
-"use strict";
+import React from "react/addons";
+import {PrismCode} from "react-prism";
+import {GoogleMaps, Marker, Polyline, Polygon, InfoWindow} from "react-google-maps";
 
-var React = require("react/addons"),
-    {PropTypes} = React,
-    {update} = React.addons,
-    {PrismCode} = require("react-prism");
+const {PropTypes} = React;
 
-module.exports = React.createClass({
-  displayName: "ComponentPlayground",
+const ComponentPlayground = React.createClass({
 
-  mixins: [require("./ReactFutureMixin")],
-
   propTypes: {
@@ -20,14 +16,19 @@ componentClass: PropTypes.func.isRequired,
 
-  _render (props, state) {
-    var Component = props.componentClass;
+  render () {
+    const {props, state} = this,
+          Component = props.componentClass;
 
-    return <div className={props.className}>
-      <Component className="col-xs-6" {...props.componentProps} />
-      <div className="col-xs-6">
-        <pre><PrismCode className="language-javascript">
-          {props.componentRaw.__raw}
-        </PrismCode></pre>
+    return (
+      <div className={props.className}>
+        <Component className="col-xs-6" toast={props.toast} {...props.componentProps} />
+        <div className="col-xs-6">
+          <pre><PrismCode className="language-javascript">
+            {props.componentRaw.__raw}
+          </PrismCode></pre>
+        </div>
       </div>
-    </div>;
+    );
   }
 });
+
+export default ComponentPlayground;

client/scripts/components/basics/AsynchronousLoading.js

@@ -1,23 +0,32 @@
-"use strict";
-var React = require("react/addons"),
+import React from "react/addons";
+import {GoogleMaps} from "react-google-maps";
 
-    {GoogleMapsMixin, Map} = require("react-google-maps"),
-    AsynchronousLoading;
 /*
  * https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
  */
-AsynchronousLoading = React.createClass({
-  displayName: "AsynchronousLoading",
+const AsynchronousLoading = React.createClass({
 
-  mixins: [require("../../ReactFutureMixin"), GoogleMapsMixin],
+  render () {
+    const {props, state} = this,
+          {googleMapsApi, ...otherProps} = props;
 
-  _render (props, state) {
-    return <div style={{height: "100%"}} {...props}>
-      <Map style={{height: "100%"}} zoom={8} center={{lat: -34.397, lng: 150.644}} />
-    </div>;
+    return (
+      <GoogleMaps containerProps={{
+          ...otherProps,
+          style: {
+            height: "100%",
+          },
+        }} mapProps={{
+          style: {
+            height: "100%",
+          },
+        }}
+        googleMapsApi={googleMapsApi}
+        zoom={8}
+        center={{lat: -34.397, lng: 150.644}} />
+    );
   }
 });
 
-module.exports = React.createClass({
-  mixins: [require("../../ReactFutureMixin")],
+export default React.createClass({
 
@@ -37,5 +46,7 @@ getInitialState () {
 
-  _render (props, state) {
-    return <AsynchronousLoading googleMapsApi={state.googleMapsApi} {...props} />;
-  }
+  render () {
+    return (
+      <AsynchronousLoading googleMapsApi={this.state.googleMapsApi} {...this.props} />
+    );
+  },
 });

client/scripts/components/basics/Directions.js

@@ -1,12 +0,6 @@
-"use strict";
-var React = require("react/addons"),
+import React from "react/addons";
+import {GoogleMaps, DirectionsRenderer} from "react-google-maps";
 
-    {GoogleMapsMixin, Map, DirectionsRenderer} = require("react-google-maps"),
-    Directions;
+const Directions = React.createClass({
 
-Directions = React.createClass({
-  displayName: "Directions",
-
-  mixins: [require("../../ReactFutureMixin"), GoogleMapsMixin],
-
   getInitialState () {
@@ -39,19 +33,34 @@ return {
 
-  _render (props, state) {
-    var {directions} = state;
+  render () {
+    const {props, state} = this,
+          {googleMapsApi, ...otherProps} = props,
+          {directions} = state;
 
-    return <div style={{height: "100%"}} {...props}>
-      <Map style={{height: "100%"}} zoom={6} center={state.origin} />
-      {directions ? <DirectionsRenderer directions={directions} /> : null}
-    </div>;
-  }
+    return (
+      <GoogleMaps containerProps={{
+          ...otherProps,
+          style: {
+            height: "100%",
+          },
+        }} mapProps={{
+          style: {
+            height: "100%",
+          },
+        }}
+        googleMapsApi={googleMapsApi}
+        zoom={7}
+        center={state.origin}>
+        {directions ? <DirectionsRenderer directions={directions} /> : null}
+      </GoogleMaps>
+    );
+  },
 });
 
-module.exports = React.createClass({
-  mixins: [require("../../ReactFutureMixin")],
-
-  _render (props, state) {
-    return <Directions googleMapsApi={google.maps} {...props} />;
+export default React.createClass({
+  render () {
+    return (
+      <Directions googleMapsApi={google.maps} {...this.props} />
+    );
   }
 });
 

client/scripts/components/basics/Geolocation.js

@@ -1,7 +0,5 @@
-"use strict";
-var React = require("react/addons"),
+import React from "react/addons";
+import {GoogleMaps, Circle, InfoWindow} from "react-google-maps";
 
-    {GoogleMapsMixin, Map, InfoWindow, Circle} = require("react-google-maps"),
-    {geolocation} = navigator,
-    Geolocation;
+var {geolocation} = navigator;
 
@@ -16,7 +14,4 @@ if (!geolocation) {
  */
-Geolocation = React.createClass({
-  displayName: "Geolocation",
+const Geolocation = React.createClass({
 
-  mixins: [require("../../ReactFutureMixin"), GoogleMapsMixin],
-
   getInitialState () {
@@ -49,19 +44,34 @@ return {
 
-  _render (props, state) {
-    var {center} = state;
+  render () {
+    const {props, state} = this,
+          {googleMapsApi, ...otherProps} = props,
+          {center} = state;
 
-    return <div style={{height: "100%"}} {...props}>
-      <Map style={{height: "100%"}} zoom={12} center={center} />
-      {center ? <InfoWindow position={center} content={state.content} /> : null}
-      {center ? <Circle center={center} radius={2000} fillColor="red" fillOpacity={0.20} strokeColor="red" strokeOpacity={1} strokeWeight={1} /> : null}
-    </div>;
+    return (
+      <GoogleMaps containerProps={{
+          ...otherProps,
+          style: {
+            height: "100%",
+          },
+        }} mapProps={{
+          style: {
+            height: "100%",
+          },
+        }}
+        googleMapsApi={googleMapsApi}
+        zoom={12}
+        center={center}>
+        {center ? <InfoWindow position={center} content={state.content} /> : null}
+        {center ? <Circle center={center} radius={2000} fillColor="red" fillOpacity={0.20} strokeColor="red" strokeOpacity={1} strokeWeight={1} /> : null}
+      </GoogleMaps>
+    );
   }
 });
 
-module.exports = React.createClass({
-  mixins: [require("../../ReactFutureMixin")],
-
-  _render (props, state) {
-    return <Geolocation googleMapsApi={google.maps} {...props} />;
+export default React.createClass({
+  render () {
+    return (
+      <Geolocation googleMapsApi={google.maps} {...this.props} />
+    );
   }
 });

client/scripts/components/basics/SimpleMap.js

@@ -1,11 +0,8 @@
-"use strict";
-var React = require("react/addons"),
+import React from "react/addons";
+import {GoogleMaps} from "react-google-maps";
 
-    {GoogleMapsMixin, Map} = require("react-google-maps"),
-
-    SimpleMap;
 /*
  * Sample From: https://developers.google.com/maps/documentation/javascript/examples/map-simple
  */
-SimpleMap = React.createClass({
+const SimpleMap = React.createClass({
   /*
@@ -16,26 +13,38 @@ * 1. Create a component class that wraps all your map components in it.
   /*
-   * 2. Include GoogleMapsMixin into in its mixins.
+   * 2. Render GoogleMaps component with containerProps and mapProps
    */
-  mixins: [require("../../ReactFutureMixin"), GoogleMapsMixin],
+  render () {
+    const {props, state} = this,
+          {googleMapsApi, ...otherProps} = props;
 
-  _render (props, state) {
-    return <div style={{height: "100%"}} {...props}>
-      <Map style={{height: "100%"}} zoom={8} center={new google.maps.LatLng(-34.397, 150.644)} />
-    </div>;
+    return (
+      <GoogleMaps containerProps={{
+          ...otherProps,
+          style: {
+            height: "100%",
+          },
+        }} mapProps={{
+          style: {
+            height: "100%",
+          },
+        }}
+        googleMapsApi={googleMapsApi}
+        zoom={8}
+        center={{lat: -34.397, lng: 150.644}} />
+    );
   }
 });
 
-module.exports = React.createClass({
+export default React.createClass({
   /*
-   * 3. This is your component class that renders SimpleMap.
+   * 3. This is container component that renders SimpleMap.
    */
-  mixins: [require("../../ReactFutureMixin")],
-
-  _render (props, state) {
+  render () {
     /*
      * 4. The only thing you need to do is pass googleMapsApi as props.
-     * This will be used with GoogleMapsMixin that mixes into SimpleMap
      */
-    return <SimpleMap googleMapsApi={google.maps} {...props} />;
+    return (
+      <SimpleMap googleMapsApi={google.maps} {...this.props} />
+    );
   }
 });

client/scripts/components/events/AccessingArguments.js

@@ -1,14 +0,9 @@
-"use strict";
-var React = require("react/addons"),
+import React from "react/addons";
+import {GoogleMaps, Marker} from "react-google-maps";
 
-    {GoogleMapsMixin, Map, Marker} = require("react-google-maps"),
-    AccessingArguments;
 /*
  * https://developers.google.com/maps/documentation/javascript/examples/event-arguments
  */
-AccessingArguments = React.createClass({
-  displayName: "AccessingArguments",
+const AccessingArguments = React.createClass({
 
-  mixins: [require("../../ReactFutureMixin"), GoogleMapsMixin],
-
   getInitialState () {
@@ -29,10 +24,30 @@ return {
 
-  _render (props, state) {
-    return <div style={{height: "100%"}} {...props}>
-      <Map ref="map" style={{height: "100%"}} zoom={4} center={new google.maps.LatLng(-25.363882, 131.044922)} onClick={this._handle_map_click} />
-      {state.markers.map(toMarker, this)}
-    </div>;
+  render () {
+    const {props, state} = this,
+          {googleMapsApi, ...otherProps} = props;
 
+    return (
+      <GoogleMaps containerProps={{
+          ...otherProps,
+          style: {
+            height: "100%",
+          },
+        }} mapProps={{
+          style: {
+            height: "100%",
+          },
+        }}
+        ref="map"
+        googleMapsApi={googleMapsApi}
+        zoom={4}
+        center={new google.maps.LatLng(-25.363882, 131.044922)}
+        onClick={this._handle_map_click}>
+        {state.markers.map(toMarker, this)}
+      </GoogleMaps>
+    );
+
     function toMarker (marker) {
-      return <Marker position={marker.position} />;
+      return (
+        <Marker position={marker.position} />
+      );
     }
@@ -42,8 +57,8 @@ }
 
-module.exports = React.createClass({
-  mixins: [require("../../ReactFutureMixin")],
-
-  _render (props, state) {
-    return <AccessingArguments googleMapsApi={google.maps} {...props} />;
+export default React.createClass({
+  render () {
+    return (
+      <AccessingArguments googleMapsApi={google.maps} {...this.props} />
+    );
   }
 });

client/scripts/components/events/ClosureListeners.js

@@ -1,14 +0,9 @@
-"use strict";
-var React = require("react/addons"),
+import React from "react/addons";
+import {GoogleMaps, InfoWindow, Marker} from "react-google-maps";
 
-    {GoogleMapsMixin, Map, Marker, InfoWindow} = require("react-google-maps"),
-    ClosureListeners;
 /*
  * https://developers.google.com/maps/documentation/javascript/examples/event-closure
  */
-ClosureListeners = React.createClass({
-  displayName: "ClosureListeners",
+const ClosureListeners = React.createClass({
 
-  mixins: [require("../../ReactFutureMixin"), GoogleMapsMixin],
-
   getInitialState () {
@@ -56,17 +51,37 @@ return {
 
-  _render (props, state) {
-    return <div style={{height: "100%"}} {...props}>
-      <Map style={{height: "100%"}} zoom={4} center={new google.maps.LatLng(-25.363882, 131.044922)} />
-      {state.markers.map(toMarker, this)}
-      {state.markers.map(toInfoWindow, this)}
-    </div>;
+  render () {
+    const {props, state} = this,
+          {googleMapsApi, ...otherProps} = props;
 
+    return (
+      <GoogleMaps containerProps={{
+        ...otherProps,
+          style: {
+            height: "100%",
+          },
+        }} mapProps={{
+          style: {
+            height: "100%",
+          },
+        }}
+        googleMapsApi={googleMapsApi}
+        zoom={4}
+        center={new google.maps.LatLng(-25.363882, 131.044922)}>
+        {state.markers.map(toMarker, this)}
+      </GoogleMaps>
+    );
+
     function toMarker (marker, index) {
       var ref = `marker_${index}`;
-      return <Marker key={ref} ref={ref} position={marker.position} title={(index+1).toString()} onClick={this._handle_marker_click.bind(this, marker)} />;
+      return (
+        <Marker key={ref} ref={ref}
+                      position={marker.position}
+                      title={(index+1).toString()}
+                      onClick={this._handle_marker_click.bind(this, marker)}>
+          {renderInfoWindow.call(this, marker, index)}
+        </Marker>
+      );
     }
-    /*
-     * Notice: Marker and InfoWindow are rendered in the same level.
-     */
-    function toInfoWindow (marker, index) {
+
+    function renderInfoWindow (marker, index) {
       var ref = `marker_${index}`;
@@ -78,8 +93,8 @@ return marker.showInfo ? <InfoWindow key={`${ref}_info_window`} owner={ref} content={marker.content} onCloseclick={this._handle_closeclick.bind(this, marker)} /> : null;
 
-module.exports = React.createClass({
-  mixins: [require("../../ReactFutureMixin")],
-
-  _render (props, state) {
-    return <ClosureListeners googleMapsApi={google.maps} {...props} />;
+export default React.createClass({
+  render () {
+    return (
+      <ClosureListeners googleMapsApi={google.maps} {...this.props} />
+    );
   }
 });

client/scripts/components/events/GettingProperties.js

@@ -1,16 +0,12 @@
-"use strict";
-var React = require("react/addons"),
+import React from "react/addons";
+import {GoogleMaps, InfoWindow, Marker} from "react-google-maps";
 
-    {GoogleMapsMixin, Map, InfoWindow} = require("react-google-maps"),
-    GettingProperties;
 /*
  * https://developers.google.com/maps/documentation/javascript/examples/event-properties
  */
-GettingProperties = React.createClass({
-  displayName: "GettingProperties",
+const GettingProperties = React.createClass({
 
-  mixins: [require("../../ReactFutureMixin"), GoogleMapsMixin],
-
   getInitialState () {
     return {
+      zoomLevel: 4,
       content: "Change the zoom level", 
@@ -21,24 +17,46 @@ };
   _handle_zoom_changed () {
-    var zoomLevel = this.refs.map.getZoom();
-    this.setState({
-      content: `Zoom: ${ zoomLevel }`,
-    });
+    const zoomLevel = this.refs.map.getZoom();
+    if (zoomLevel !== this.state.zoomLevel) {
+      // Notice: Check zoomLevel equality here,
+      // or it will fire zoom_changed event infinitely
+      this.setState({
+        zoomLevel,
+        content: `Zoom: ${ zoomLevel }`,
+      });
+    }
   },
 
-  _render (props, state) {
-    var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
+  render () {
+    const {props, state} = this,
+          {googleMapsApi, ...otherProps} = props,
+          myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
 
-    return <div style={{height: "100%"}} {...props}>
-      <Map ref="map" style={{height: "100%"}} zoom={4} center={myLatLng} onZoomChanged={this._handle_zoom_changed} />
-      <InfoWindow position={myLatLng} content={state.content} />
-    </div>;
+    return (
+      <GoogleMaps containerProps={{
+          ...otherProps,
+          style: {
+            height: "100%",
+          },
+        }} mapProps={{
+          style: {
+            height: "100%",
+          },
+        }}
+        ref="map"
+        googleMapsApi={googleMapsApi}
+        zoom={state.zoomLevel}
+        center={myLatLng}
+        onZoomChanged={this._handle_zoom_changed}>
+        <InfoWindow position={myLatLng} content={state.content} />
+      </GoogleMaps>
+    );
   }
 });
 
-module.exports = React.createClass({
-  mixins: [require("../../ReactFutureMixin")],
-
-  _render (props, state) {
-    return <GettingProperties googleMapsApi={google.maps} {...props} />;
+export default React.createClass({
+  render () {
+    return (
+      <GettingProperties googleMapsApi={google.maps} {...this.props} />
+    );
   }
 });

client/scripts/components/events/SimpleClickEvent.js

@@ -1,14 +0,9 @@
-"use strict";
-var React = require("react/addons"),
+import React from "react/addons";
+import {GoogleMaps, Marker} from "react-google-maps";
 
-    {GoogleMapsMixin, Map, Marker} = require("react-google-maps"),
-    SimpleClickEvent;
 /*
  * https://developers.google.com/maps/documentation/javascript/examples/event-simple
  */
-SimpleClickEvent = React.createClass({
-  displayName: "SimpleClickEvent",
+const SimpleClickEvent = React.createClass({
 
-  mixins: [require("../../ReactFutureMixin"), GoogleMapsMixin],
-
   getInitialState () {
@@ -30,28 +25,52 @@ return {
   _handle_map_center_changed () {
-    var {timeoutId} = this.state;
+    const {center, timeoutId} = this.state;
+    const newPos = this.refs.marker.getPosition();
+    if (center.equals(newPos)) {
+      // Notice: Check newPos equality here,
+      // or it will fire center_changed event infinitely
+      return;
+    }
     if (timeoutId) {
       clearTimeout(timeoutId);
     }
-    timeoutId = setTimeout(() => {
-      this.refs.map.panTo(this.refs.marker.getPosition());
+    const newTimeoutId = setTimeout(() => {
+      this.refs.map.panTo(newPos);
     }, 3000);
     this.setState({
-      timeoutId,
+      timeoutId: newTimeoutId,
     });
   },
 
-  _render (props, state) {
-    return <div style={{height: "100%"}} {...props}>
-      <Map ref="map" style={{height: "100%"}} zoom={state.zoom} center={state.center} onCenterChanged={this._handle_map_center_changed} />
-      <Marker ref="marker" position={state.center} title="Click to zoom" onClick={this._handle_marker_click} />
-    </div>;
+  render () {
+    const {props, state} = this,
+          {googleMapsApi, ...otherProps} = props;
+
+    return (
+      <GoogleMaps containerProps={{
+          ...otherProps,
+          style: {
+            height: "100%",
+          },
+        }} mapProps={{
+          style: {
+            height: "100%",
+          },
+        }}
+        ref="map"
+        googleMapsApi={googleMapsApi}
+        zoom={state.zoom}
+        center={state.center}
+        onCenterChanged={this._handle_map_center_changed}>
+        <Marker ref="marker" position={state.center} title="Click to zoom" onClick={this._handle_marker_click} />
+      </GoogleMaps>
+    );
   }
 });
 
-module.exports = React.createClass({
-  mixins: [require("../../ReactFutureMixin")],
-
-  _render (props, state) {
-    return <SimpleClickEvent googleMapsApi={google.maps} {...props} />;
+export default React.createClass({
+  render () {
+    return (
+      <SimpleClickEvent googleMapsApi={google.maps} {...this.props} />
+    );
   }
 });

client/scripts/components/GeojsonToComponents.js

@@ -1,7 +0,5 @@
-"use strict";
-var React = require("react/addons"),
-    {update} = React.addons,
+import React from "react/addons";
+import {GoogleMaps, Marker, Polyline, Polygon, InfoWindow} from "react-google-maps";
 
-    {GoogleMapsMixin, Map, Marker, Polyline, Polygon, InfoWindow} = require("react-google-maps"),
-    GeojsonToComponents;
+const {update} = React.addons;
 
@@ -37,7 +35,4 @@ function geometryToComponentWithLatLng (geometry) {
 
-GeojsonToComponents = React.createClass({
-  displayName: "GeojsonToComponents",
+const GeojsonToComponents = React.createClass({
 
-  mixins: [require("../ReactFutureMixin"), GoogleMapsMixin],
-
   getInitialState () {
@@ -51,3 +46,3 @@ return  {
           onClick: this._handle_map_click,
-          onZoomChanged: this._handle_map_zoom_changed
+          // onZoomChanged: this._handle_map_zoom_changed
         },
@@ -148,36 +143,57 @@ 1: {
 
-  _render (props, state) {
-    var {initialGeoJson, ...props} = props,
-        {geoStateBy} = state,
-        {features} = state.geoJson;
+  render () {
+    const {props, state} = this,
+          {initialGeoJson, googleMapsApi, ...otherProps} = props,
+          {geoStateBy} = state,
+          {features} = state.geoJson,
+          mapFeature = features[0],
+          mapGeometry = geometryToComponentWithLatLng(mapFeature.geometry),
+          mapState = geoStateBy[0];
 
-    return <div style={{height: "100%"}} {...props}>
-      {features.reduce((array, feature, index) => {
-        var {properties} = feature,
-            {ElementClass, ChildElementClass, ...geometry} = geometryToComponentWithLatLng(feature.geometry),
-            {visible, child, ...featureState} = geoStateBy[feature.id] || {};
-        if (false !== visible) {
+    return (
+      <GoogleMaps containerProps={{
+        ...otherProps,
+        style: {
+          height: "100%",
+        },
+      }} mapProps={{
+        style: {
+          height: "100%",
+        },
+      }}
+        googleMapsApi={googleMapsApi}
+        {...mapFeature.properties}
+        {...mapState}
+        center={mapGeometry.position}>
+
+        {features.reduce((array, feature, index) => {
           if (0 === index) {
-            ElementClass = Map;
-            geometry.center = geometry.position;
-            delete geometry.position;
+            return array;
           }
-          array.push(<ElementClass key={feature.id} {...properties} {...geometry} {...featureState}/>);
-          if (child) {
-            array.push(<ChildElementClass {...child} />);
+          var {properties} = feature,
+              {ElementClass, ChildElementClass, ...geometry} = geometryToComponentWithLatLng(feature.geometry),
+              {visible, child, ...featureState} = geoStateBy[feature.id] || {};
+          if (false !== visible) {
+            array.push(
+              <ElementClass key={`json-${feature.id}`} {...properties} {...geometry} {...featureState}>
+                {child ? <ChildElementClass {...child} /> : null}
+              </ElementClass>
+            );
           }
-        }
-        return array;
-      }, [])}
-    </div>;
+          index === (features.length-1) && console.log(array);
+          return array;
+        }, [])}
+
+      </GoogleMaps>
+    );
   }
 });
 
-module.exports = React.createClass({
-  mixins: [require("../ReactFutureMixin")],
-
-  _render (props, state) {
-    return <GeojsonToComponents googleMapsApi={google.maps} {...props} />;
+export default React.createClass({
+  render () {
+    return (
+      <GeojsonToComponents googleMapsApi={google.maps} {...this.props} />
+    );
   }
 });
 

client/scripts/components/GettingStarted.js

@@ -1,7 +0,4 @@
-"use strict";
-var React = require("react/addons"),
-    {ToastContainer, ToastMessage} = require("react-toastr"),
+import React from "react/addons";
+import {GoogleMaps, Marker} from "react-google-maps";
 
-    {GoogleMapsMixin, Map, Marker} = require("react-google-maps"),
-    GettingStarted;
 /*
@@ -11,7 +8,4 @@ * This is the modify version of:
  */
-GettingStarted = React.createClass({
-  displayName: "GettingStarted",
+const GettingStarted = React.createClass({
 
-  mixins: [require("../ReactFutureMixin"), GoogleMapsMixin],
-
   getInitialState () {
@@ -45,3 +39,3 @@ return {
     if (3 === markers.length) {
-      this.refs.toast.success(
+      this.props.toast(
         "Right click on the marker to remove it",
@@ -65,14 +59,44 @@ "Also check the code!"
 
-  _render (props, state) {
-    return <div style={{height: "100%"}} {...props}>
-      <ToastContainer ref="toast" toastMessageFactory={React.createFactory(ToastMessage.jQuery)}/>
-      <Map ref="map" style={{height: "100%"}} zoom={3} center={new google.maps.LatLng(-25.363882, 131.044922)} onClick={this._handle_map_click} />
-      {state.markers.map(toMarker, this)}
-    </div>;
+  render () {
+    const {props, state} = this,
+          {googleMapsApi, ...otherProps} = props;
 
+    /* Internally, <GoogleMaps> will expand to:
+        <div {...containerProps}>
+          <div {...mapProps}>
+            <!-- This inner div is where google.maps.Map instance -->
+            <!-- will be initialized on -->
+          </div>
+          <!-- The container div is just a wrapper around inner div -->
+          <!-- and other children components of maps. -->
+          <!-- This is leaky. I knew it. -->
+        </div>
+     */
+    return (
+      <GoogleMaps containerProps={{
+          ...otherProps,
+          style: {
+            height: "100%",
+          },
+        }} mapProps={{
+          style: {
+            height: "100%",
+          },
+        }}
+        ref="map"
+        googleMapsApi={googleMapsApi}
+        zoom={3}
+        center={new google.maps.LatLng(-25.363882, 131.044922)}
+        onClick={this._handle_map_click}>
+        {state.markers.map(toMarker, this)}
+      </GoogleMaps>
+    );
+
     function toMarker (marker, index) {
-      return <Marker
-        position={marker.position}
-        key={marker.key}
-        onRightclick={this._handle_marker_rightclick.bind(this, index)} />;
+      return (
+        <Marker
+          position={marker.position}
+          key={marker.key}
+          onRightclick={this._handle_marker_rightclick.bind(this, index)} />
+      );
     }
@@ -82,8 +106,8 @@ }
 
-module.exports = React.createClass({
-  mixins: [require("../ReactFutureMixin")],
-
-  _render (props, state) {
-    return <GettingStarted googleMapsApi={google.maps} {...props} />;
+export default React.createClass({
+  render () {
+    return (
+      <GettingStarted googleMapsApi={google.maps} {...this.props} />
+    );
   }
 });

client/scripts/index.js

@@ -1,21 +0,12 @@
-"use strict";
-require("../styles/index.scss");
-require("github-fork-ribbon-css/gh-fork-ribbon.css");
-require("prism/themes/prism.css");
-require("toastr/toastr.min.css");
+import React from "react/addons";
+import {ToastContainer, ToastMessage} from "react-toastr";
 
-var React = require("react/addons"),
-    {update} = React.addons,
+import NavHeaderBar from "./NavHeaderBar";
+import ComponentPlayground from "./ComponentPlayground";
 
-    NavHeaderBar = require("./NavHeaderBar"),
-    ComponentPlayground = require("./ComponentPlayground"),
-    Body,
-    bodyComponent,
+const {update} = React.addons;
 
-    ACTIONS,
-    DROPDOWN_ACTIONS,
-    RIGHT_ACTIONS,
-    ALL_ACTIONS;
+require("../styles/index.scss");
 
-ACTIONS = [
+const ACTIONS = [
   {
@@ -34,3 +25,3 @@ key: "gs",
 
-DROPDOWN_ACTIONS = [
+const DROPDOWN_ACTIONS = [
   {
@@ -127,3 +118,3 @@ key: "basics__simple-map",
 
-RIGHT_ACTIONS = [
+const RIGHT_ACTIONS = [
   {
@@ -145,9 +136,6 @@ key: "geojson",
 
-ALL_ACTIONS = ACTIONS.concat(DROPDOWN_ACTIONS.filter((x) => { return !!x; })).concat(RIGHT_ACTIONS);
+const ALL_ACTIONS = ACTIONS.concat(DROPDOWN_ACTIONS.filter((x) => { return !!x; })).concat(RIGHT_ACTIONS);
 
-Body = React.createClass({
-  displayName: "Body",
+const Body = React.createClass({
 
-  mixins: [require("./ReactFutureMixin")],
-
   getInitialState () {
@@ -166,5 +154,10 @@ var hash = location.hash || ACTIONS[0].path,
 
-  _render (props, state) {
-    var {action} = state;
+  _handle_toast (title, message) {
+    this.refs.toast.success(title, message);
+  },
 
+  render () {
+    const {props, state} = this,
+          {action} = state;
+
     return <div id="react-root">
@@ -179,3 +172,5 @@ <NavHeaderBar activeActionKey={action.key} onNavigateTo={this._handle_navigate} actions={ACTIONS} dropdownActions={DROPDOWN_ACTIONS} rightActions={RIGHT_ACTIONS} />
         </div>
-        <ComponentPlayground className="row row--full-height" {...action.component} />
+        <ToastContainer ref="toast" toastMessageFactory={React.createFactory(ToastMessage.jQuery)}/>
+
+        <ComponentPlayground className="row row--full-height" toast={this._handle_toast} {...action.component} />
       </div>
@@ -186,2 +181,2 @@ </div>;
 
-bodyComponent = React.render(<Body />, document.body);
+const bodyComponent = React.render(<Body />, document.body);

client/scripts/NavHeaderBar.js

@@ -1,22 +0,19 @@
-"use strict";
+import React from "react/addons";
+import {GoogleMaps, Marker, Polyline, Polygon, InfoWindow} from "react-google-maps";
+import cx from "classnames";
 
-var React = require("react/addons"),
-    {PropTypes} = React,
-    {update} = React.addons,
-    cx = React.addons.classSet,
+const {PropTypes} = React;
+const {update} = React.addons;
 
-    actionPropType = PropTypes.shape({
+const actionPropType = PropTypes.shape({
         key: PropTypes.string.isRequired,
         displayName: PropTypes.string.isRequired,
         path: PropTypes.string.isRequired,
-      }),
-    actionsArrayType = PropTypes.arrayOf(actionPropType).isRequired;
+      });
+const actionsArrayType = PropTypes.arrayOf(actionPropType).isRequired;
 
 function noop () {}
 
-module.exports = React.createClass({
-  displayName: "NavHeaderBar",
+const NavHeaderBar = React.createClass({
 
-  mixins: [require("./ReactFutureMixin")],
-
   propTypes: {
@@ -57,36 +54,39 @@ activeActionKey: PropTypes.string.isRequired,
 
-  _render (props, state) {
-    var {activeActionKey} = props,
-        dropdownClassSet = {dropdown: true};
+  render () {
+    const {props, state} = this,
+          {activeActionKey} = props,
+          dropdownClassSet = {dropdown: true};
     dropdownClassSet.open = state.dropdownOpen;
 
-    return <nav className="navbar navbar-default" role="navigation">
-      <div className="container-fluid">
-        <div className="navbar-header">
-          <button type="button" className="navbar-toggle collapsed">
-            <span className="sr-only">Toggle navigation</span>
-            <span className="icon-bar"></span>
-            <span className="icon-bar"></span>
-            <span className="icon-bar"></span>
-          </button>
-          <a className="navbar-brand" href="#">React Google Maps</a>
-        </div>
+    return (
+      <nav className="navbar navbar-default" role="navigation">
+        <div className="container-fluid">
+          <div className="navbar-header">
+            <button type="button" className="navbar-toggle collapsed">
+              <span className="sr-only">Toggle navigation</span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+            </button>
+            <a className="navbar-brand" href="#">React Google Maps</a>
+          </div>
 
-        <div className="collapse navbar-collapse">
-          <ul className="nav navbar-nav">
-            <li><a href="https://github.com/tomchentw" target="_blank">by @tomchentw</a></li>
-            {props.actions.map(actionToMenuItem, this)}
-            <li className={cx(dropdownClassSet)}>
-              <a href="javascript:void(0);" className="dropdown-toggle" onClick={this._handle_click}>Samples <span className="caret"></span></a>
-              <ul className="dropdown-menu" role="menu">
-                {props.dropdownActions.map(actionToMenuItem, this)}
-              </ul>
-            </li>
-          </ul>
-          <ul className="nav navbar-nav navbar-right" style={{marginRight:100}}>
-            {props.rightActions.map(actionToMenuItem, this)}
-          </ul>
+          <div className="collapse navbar-collapse">
+            <ul className="nav navbar-nav">
+              <li><a href="https://github.com/tomchentw" target="_blank">by @tomchentw</a></li>
+              {props.actions.map(actionToMenuItem, this)}
+              <li className={cx(dropdownClassSet)}>
+                <a href="javascript:void(0);" className="dropdown-toggle" onClick={this._handle_click}>Samples <span className="caret"></span></a>
+                <ul className="dropdown-menu" role="menu">
+                  {props.dropdownActions.map(actionToMenuItem, this)}
+                </ul>
+              </li>
+            </ul>
+            <ul className="nav navbar-nav navbar-right" style={{marginRight:100}}>
+              {props.rightActions.map(actionToMenuItem, this)}
+            </ul>
+          </div>
         </div>
-      </div>
-    </nav>;
+      </nav>
+    );
 
@@ -96,9 +96,13 @@ function actionToMenuItem (action, index) {
       if (false === action) {
-        return <li key={`divider_${index}`} className="divider"></li>;
+        return (
+          <li key={`divider_${index}`} className="divider"/>
+        );
       } else {
         classSet.active = activeActionKey === action.key;
 
-        return <li key={action.key} className={cx(classSet)} onClick={this._handle_navigate.bind(this, action)}>
-          <a href={action.path}>{action.displayName}</a>
-        </li>;
+        return (
+          <li key={action.key} className={cx(classSet)} onClick={this._handle_navigate.bind(this, action)}>
+            <a href={action.path}>{action.displayName}</a>
+          </li>
+        );
       }
@@ -108,1 +112,3 @@ }
 });
+
+export default NavHeaderBar;

client/webpack.config.js

@@ -11,3 +11,3 @@ "use strict";
     IS_PRODUCTION = "production" === process.env.NODE_ENV,
-    JSX_WITH_HOT_LOEADERS = ["react-hot-loader", "jsx-loader?harmony"],
+    JSX_WITH_HOT_LOEADERS = ["react-hot-loader", "babel-loader?stage=1"],
     CSS_LOADER = "style-loader!css-loader?root=../",
@@ -37,4 +37,3 @@ SCSS_LOADER = CSS_LOADER + "!sass-loader?" + JSON.stringify({
     loaders: [
-      { test: require.resolve("react/addons"), loader: "expose-loader?React" },
-      { test: /\.js(x?)$/, loaders: JSX_WITH_HOT_LOEADERS },
+      { test: /\.js(x?)$/, exclude: /node_modules/, loaders: JSX_WITH_HOT_LOEADERS },
       { test: /\.jpg$/, loader: "file-loader" },
@@ -41,0 +40,0 @@ { test: /\.css$/, loader: CSS_LOADER },

lib/index.js

 "use strict";
-var create_child_component = require("./helpers/create_child_component"),
 
-    BASIC_EVENT_NAMES = "click dblclick drag dragend dragstart mousedown mousemove mouseout mouseover mouseup rightclick";
+var _interopRequireDefault = function (obj) { return obj && obj.__esModule ? obj : { "default": obj }; };
 
-exports.GoogleMapsMixin = require("./mixins/GoogleMapsMixin");
-exports.Map = require("./Map");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-[
-  [ 
-    "Circle",
-    "center_changed click dblclick drag dragend dragstart mousedown mousemove mouseout mouseover mouseup radius_changed rightclick"
-  ],
-  [
-    "Marker",
-    "animation_changed click clickable_changed cursor_changed dblclick drag dragend draggable_changed dragstart flat_changed icon_changed mousedown mouseout mouseover mouseup position_changed rightclick shape_changed title_changed visible_changed zindex_changed",
-  ],
-  [
-    "Polyline",
-    BASIC_EVENT_NAMES,
-  ],
-  [
-    "Polygon",
-    BASIC_EVENT_NAMES,
-  ],
-  [
-    "InfoWindow",
-    "closeclick content_changed domready position_changed zindex_changed",
-    function(component, infoWindow)  {
-      var $__0=  component,context=$__0.context,
-          $__1=  component.props,owner=$__1.owner;
-      infoWindow.open(
-        context.getMap(),
-        owner ? context.getInstanceByRef(owner) : undefined
-      );
-    }
-  ],
-  [
-    "DirectionsRenderer",
-    BASIC_EVENT_NAMES,
-  ],
-].forEach(function(args)  {
-  exports[args[0]] = create_child_component.apply(null, args);
-});
+var _GoogleMaps = require("./GoogleMaps");
+
+var _GoogleMaps2 = _interopRequireDefault(_GoogleMaps);
+
+var _Circle = require("./Circle");
+
+var _Circle2 = _interopRequireDefault(_Circle);
+
+var _DirectionsRenderer = require("./DirectionsRenderer");
+
+var _DirectionsRenderer2 = _interopRequireDefault(_DirectionsRenderer);
+
+var _InfoWindow = require("./InfoWindow");
+
+var _InfoWindow2 = _interopRequireDefault(_InfoWindow);
+
+var _Marker = require("./Marker");
+
+var _Marker2 = _interopRequireDefault(_Marker);
+
+var _Polygon = require("./Polygon");
+
+var _Polygon2 = _interopRequireDefault(_Polygon);
+
+var _Polyline = require("./Polyline");
+
+var _Polyline2 = _interopRequireDefault(_Polyline);
+
+exports.GoogleMaps = _GoogleMaps2["default"];
+exports.Circle = _Circle2["default"];
+exports.DirectionsRenderer = _DirectionsRenderer2["default"];
+exports.InfoWindow = _InfoWindow2["default"];
+exports.Marker = _Marker2["default"];
+exports.Polygon = _Polygon2["default"];
+exports.Polyline = _Polyline2["default"];

package.json

 {
   "__template__gist__": "https://gist.github.com/tomchentw/368a93bb748ad9d576f1#file-package-json",
   "name": "react-google-maps",
-  "version": "0.2.5",
+  "version": "1.0.0",
   "description": "React.js Google Maps integration component",
   "main": "lib/index.js",
   "scripts": {
-    "build": "jsx --harmony ./src ./lib",
+    "build": "rm -rf ./lib && babel --stage=1 ./src --out-dir ./lib",
     "build_client": "webpack -p --config ./client/webpack.config.js",
@@ -54,3 +54,8 @@ "test": "jest",
   "devDependencies": {
+    "babel": "^5.1.13",
+    "babel-core": "^5.1.13",
+    "babel-jest": "^5.0.1",
+    "babel-loader": "^5.0.0",
     "bower": "^1.3.9",
+    "classnames": "^1.2.1",
     "css-loader": "^0.9.0",
@@ -64,6 +69,5 @@ "expose-loader": "^0.5.3",
     "raw-loader": "^0.5.1",
-    "react-hot-loader": "^0.5.0",
-    "react-prism": "^1.0.0",
-    "react-toastr": "^1.1.2",
-    "react-tools": "^0.12.0",
+    "react-hot-loader": "^1.2.5",
+    "react-prism": "^1.3.0",
+    "react-toastr": "^1.2.0",
     "sass-loader": "^0.3.0",
@@ -76,7 +80,9 @@ "style-loader": "^0.8.1",
   "dependencies": {
-    "react": "^0.12.0",
-    "deep-equal": "^0.2.1"
+    "react": "^0.13.0"
   },
+  "peerDependencies": {
+    "react": "^0.13.0"
+  },
   "jest": {
-    "scriptPreprocessor": "<rootDir>/test/__preprocessor__.js",
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
     "testPathDirs": [
@@ -83,0 +89,0 @@ "<rootDir>/src"

src/index.js

@@ -1,44 +0,21 @@
-"use strict";
-var create_child_component = require("./helpers/create_child_component"),
+import GoogleMaps from "./GoogleMaps";
 
-    BASIC_EVENT_NAMES = "click dblclick drag dragend dragstart mousedown mousemove mouseout mouseover mouseup rightclick";
+import Circle from "./Circle";
+import DirectionsRenderer from "./DirectionsRenderer";
+import InfoWindow from "./InfoWindow";
+import Marker from "./Marker";
+import Polygon from "./Polygon";
+import Polyline from "./Polyline";
 
-exports.GoogleMapsMixin = require("./mixins/GoogleMapsMixin");
-exports.Map = require("./Map");
+export {
+  GoogleMaps,
+};
 
-[
-  [ 
-    "Circle",
-    "center_changed click dblclick drag dragend dragstart mousedown mousemove mouseout mouseover mouseup radius_changed rightclick"
-  ],
-  [
-    "Marker",
-    "animation_changed click clickable_changed cursor_changed dblclick drag dragend draggable_changed dragstart flat_changed icon_changed mousedown mouseout mouseover mouseup position_changed rightclick shape_changed title_changed visible_changed zindex_changed",
-  ],
-  [
-    "Polyline",
-    BASIC_EVENT_NAMES,
-  ],
-  [
-    "Polygon",
-    BASIC_EVENT_NAMES,
-  ],
-  [
-    "InfoWindow",
-    "closeclick content_changed domready position_changed zindex_changed",
-    (component, infoWindow) => {
-      var {context} = component,
-          {owner} = component.props;
-      infoWindow.open(
-        context.getMap(),
-        owner ? context.getInstanceByRef(owner) : undefined
-      );
-    }
-  ],
-  [
-    "DirectionsRenderer",
-    BASIC_EVENT_NAMES,
-  ],
-].forEach((args) => {
-  exports[args[0]] = create_child_component.apply(null, args);
-});
+export {
+  Circle,
+  DirectionsRenderer,
+  InfoWindow,
+  Marker,
+  Polygon,
+  Polyline,
+};

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

101516

increased by27.65%

Number of package files

57

increased by14%

Lines of code

2134

increased by16.74%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

22

increased by22.22%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact@0.13.3(transitive)

• - Removeddeep-equal@^0.2.1

• - Removeddeep-equal@0.2.2(transitive)

• - Removedreact@0.12.2(transitive)

• Updatedreact@^0.13.0