Feature revamp api

.editorConfig

@@ -0,0 +1,33 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,py}]
+charset = utf-8
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab
+
+# Indentation override for all JS under lib directory
+[*.js]
+indent_style = space
+indent_size = 2
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

client/scripts/ComponentPlayground.js

@@ -1,14 +1,10 @@
-"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",
-
-  mixins: [require("./ReactFutureMixin")],
+const ComponentPlayground = React.createClass({
 
   propTypes: {
     componentClass: PropTypes.func.isRequired,
@@ -17,16 +13,21 @@ module.exports = React.createClass({
     componentRaw: PropTypes.shape({__raw: PropTypes.string}).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/NavHeaderBar.js

@@ -1,23 +1,20 @@
-"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",
-
-  mixins: [require("./ReactFutureMixin")],
+const NavHeaderBar = React.createClass({
 
   propTypes: {
     activeActionKey: PropTypes.string.isRequired,
@@ -54,52 +51,61 @@ module.exports = React.createClass({
     this.setState({dropdownOpen: false});
   },
 
-  _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>
+    );
 
     function actionToMenuItem (action, index) {
       var classSet = {};
       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>
+        );
       }
     }
   }
 });
+
+export default NavHeaderBar;

client/scripts/components/GeojsonToComponents.js

@@ -1,9 +1,7 @@
-"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;
 
 function geometryToComponentWithLatLng (geometry) {
   var typeFromThis = Array.isArray(geometry),
@@ -34,10 +32,7 @@ function geometryToComponentWithLatLng (geometry) {
   }
 }
 
-GeojsonToComponents = React.createClass({
-  displayName: "GeojsonToComponents",
-
-  mixins: [require("../ReactFutureMixin"), GoogleMapsMixin],
+const GeojsonToComponents = React.createClass({
 
   getInitialState () {
     return  {
@@ -47,7 +42,7 @@ GeojsonToComponents = React.createClass({
           ref: "map",
           style: {height: "100%"},
           onClick: this._handle_map_click,
-          onZoomChanged: this._handle_map_zoom_changed
+          // onZoomChanged: this._handle_map_zoom_changed
         },
         1: {
           ref: "centerMarker",
@@ -143,38 +138,59 @@ GeojsonToComponents = React.createClass({
     }));
   },
 
-  _render (props, state) {
-    var {initialGeoJson, ...props} = props,
-        {geoStateBy} = state,
-        {features} = state.geoJson;
-
-    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) {
+  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 (
+      <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} />
+    );
   }
 });