Clean up examples and remove createClass

Author: sonaye

examples/Container.js

@@ -1,84 +1,83 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import {Link} from 'react-router';
-import GitHubForkRibbon from 'react-github-fork-ribbon';
+import React, { Component } from 'react';
 
-let GoogleApiWrapper;
-if (__IS_DEV__) {
-  GoogleApiWrapper = require('../src/index').GoogleApiWrapper;
-} else {
-  GoogleApiWrapper = require('../dist').GoogleApiWrapper;
-}
+import GitHubForkRibbon from 'react-github-fork-ribbon';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router';
 
 import styles from './styles.module.css';
 
-export const Container = React.createClass({
-  propTypes: {
+const GoogleApiWrapper = __IS_DEV__
+  ? require('../src/index').GoogleApiWrapper
+  : require('../dist').GoogleApiWrapper;
+
+class Container extends Component {
+  static propTypes = {
     children: PropTypes.element.isRequired
-  },
+  };
 
-  contextTypes: {
+  static contextTypes = {
     router: PropTypes.object
-  },
+  };
+
+  renderChildren = () => {
+    const { children } = this.props;
 
-  renderChildren: function() {
-    const {children} = this.props;
     if (!children) return;
 
     const sharedProps = {
       google: this.props.google,
       loaded: this.props.loaded
     };
-    return React.Children.map(children, c => {
-      return React.cloneElement(c, sharedProps, {});
-    });
-  },
 
-  render: function() {
-    const {routeMap, routeDef} = this.props;
-    const {router} = this.context;
+    return React.Children.map(children, child =>
+      React.cloneElement(child, sharedProps, {})
+    );
+  };
+
+  render() {
+    const { routeMap, routeDef } = this.props;
 
-    const c = this.renderChildren();
     return (
       <div className={styles.container}>
         <GitHubForkRibbon
           href="//github.com/fullstackreact/google-maps-react"
-          target="_blank"
           position="right"
-        >
+          target="_blank">
           Fork me on GitHub
         </GitHubForkRibbon>
+
         <div className={styles.wrapper}>
           <div className={styles.list}>
             <ul>
-              {Object.keys(routeMap).map(key => {
-                return (
-                  <Link to={key} activeClassName={styles.active} key={key}>
-                    <li>{routeMap[key].name}</li>
-                  </Link>
-                );
-              })}
+              {Object.keys(routeMap).map(key => (
+                <Link activeClassName={styles.active} key={key} to={key}>
+                  <li>{routeMap[key].name}</li>
+                </Link>
+              ))}
             </ul>
           </div>
+
           <div className={styles.content}>
             <div className={styles.header}>
               <h1>{routeDef && routeDef.name} Example</h1>
+
               <h2>
                 <a href="https://github.com/fullstackreact/google-maps-react/blob/master/README.md">
                   Readme
                 </a>
               </h2>
             </div>
-            {c}
+
+            {this.renderChildren()}
           </div>
         </div>
       </div>
     );
   }
-});
+}
+
+const Loading = () => <div>Fancy loading container</div>;
 
-const Loading = props => <div>Fancy loading container</div>;
 export default GoogleApiWrapper({
   apiKey: __GAPI_KEY__,
   libraries: ['places', 'visualization'],

examples/components/autocomplete.js

@@ -1,114 +1,93 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React, { Component } from 'react';
 
-import Map, {Marker, GoogleApiWrapper} from '../../src/index'
-import styles from './autocomplete.module.css'
+import Map, { Marker } from '../../src/index';
 
-const Contents = React.createClass({
-  getInitialState() {
-    return {
-      place: null,
-      position: null
-    }
-  },
+import styles from './autocomplete.module.css';
 
-  onSubmit: function(e) {
-    e.preventDefault();
-  },
+class Contents extends Component {
+  state = {
+    position: null
+  };
 
-  componentDidMount: function() {
+  componentDidMount() {
     this.renderAutoComplete();
-  },
+  }
 
   componentDidUpdate(prevProps) {
-    const {google, map} = this.props;
-    if (map !== prevProps.map) {
-      this.renderAutoComplete();
-    }
-  },
+    if (this.props !== prevProps.map) this.renderAutoComplete();
+  }
 
-  renderAutoComplete: function() {
-    const {google, map} = this.props;
+  onSubmit(e) {
+    e.preventDefault();
+  }
+
+  renderAutoComplete() {
+    const { google, map } = this.props;
 
     if (!google || !map) return;
 
-    const aref = this.refs.autocomplete;
-    const node = ReactDOM.findDOMNode(aref);
-    var autocomplete = new google.maps.places.Autocomplete(node);
+    const autocomplete = new google.maps.places.Autocomplete(this.autocomplete);
     autocomplete.bindTo('bounds', map);
 
     autocomplete.addListener('place_changed', () => {
       const place = autocomplete.getPlace();
-      if (!place.geometry) {
-        return;
-      }
 
-      if (place.geometry.viewport) {
-        map.fitBounds(place.geometry.viewport);
-      } else {
+      if (!place.geometry) return;
+
+      if (place.geometry.viewport) map.fitBounds(place.geometry.viewport);
+      else {
         map.setCenter(place.geometry.location);
         map.setZoom(17);
       }
 
-      this.setState({
-        place: place,
-        position: place.geometry.location
-      })
-    })
-  },
+      this.setState({ position: place.geometry.location });
+    });
+  }
 
-  render: function() {
-    const props = this.props;
-    const {position} = this.state;
+  render() {
+    const { position } = this.state;
 
     return (
       <div className={styles.flexWrapper}>
         <div className={styles.left}>
           <form onSubmit={this.onSubmit}>
             <input
-              ref='autocomplete'
+              placeholder="Enter a location"
+              ref={ref => (this.autocomplete = ref)}
               type="text"
-              placeholder="Enter a location" />
-            <input
-              className={styles.button}
-              type='submit'
-              value='Go' />
+            />
+
+            <input className={styles.button} type="submit" value="Go" />
           </form>
+
           <div>
             <div>Lat: {position && position.lat()}</div>
             <div>Lng: {position && position.lng()}</div>
           </div>
         </div>
+
         <div className={styles.right}>
-          <Map {...props}
-              containerStyle={{
-                position: 'relative',
-                height: '100vh',
-                width: '100%'
-              }}
-              center={this.state.position}
-              centerAroundCurrentLocation={false}>
-                <Marker position={this.state.position} />
+          <Map
+            {...this.props}
+            center={position}
+            centerAroundCurrentLocation={false}
+            containerStyle={{
+              height: '100vh',
+              position: 'relative',
+              width: '100%'
+            }}>
+            <Marker position={position} />
           </Map>
         </div>
       </div>
-    )
-  }
-})
-
-const MapWrapper = React.createClass({
-  render: function() {
-    const props = this.props;
-    const {google} = this.props;
-
-    return (
-      <Map google={google}
-          className={'map'}
-          visible={false}>
-            <Contents {...props} />
-      </Map>
     );
   }
-})
+}
+
+const MapWrapper = props => (
+  <Map className="map" google={props.google} visible={false}>
+    <Contents {...props} />
+  </Map>
+);
 
-export default MapWrapper
+export default MapWrapper;

examples/components/basic.js

@@ -1,61 +1,19 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React from 'react';
 
-import Map, {GoogleApiWrapper} from '../../src/index'
+import Map from '../../src/index';
 
-const Container = React.createClass({
-  getInitialState: function() {
-    return {
-      showingInfoWindow: false,
-      activeMarker: {},
-      selectedPlace: {},
-    }
-  },
+const Container = props => {
+  if (!props.loaded) return <div>Loading...</div>;
 
-  onMapMoved: function(props, map) {
-    const center = map.center;
-  },
+  return (
+    <Map
+      centerAroundCurrentLocation
+      className="map"
+      google={props.google}
+      style={{ height: '100%', position: 'relative', width: '100%' }}
+      zoom={14}
+    />
+  );
+};
 
-  onMarkerClick: function(props, marker, e) {
-    this.setState({
-      selectedPlace: props,
-      activeMarker: marker,
-      showingInfoWindow: true
-    });
-  },
-
-  onInfoWindowClose: function() {
-    this.setState({
-      showingInfoWindow: false,
-      activeMarker: null
-    })
-  },
-
-  onMapClicked: function(props) {
-    if (this.state.showingInfoWindow) {
-      this.setState({
-        showingInfoWindow: false,
-        activeMarker: null
-      })
-    }
-  },
-
-  render: function() {
-    if (!this.props.loaded) {
-      return <div>Loading...</div>
-    }
-
-    return (
-      <Map google={this.props.google}
-          style={{width: '100%', height: '100%', position: 'relative'}}
-          className={'map'}
-          zoom={14}
-          containerStyle={{}}
-          centerAroundCurrentLocation={true}
-          onClick={this.onMapClicked}
-          onDragend={this.onMapMoved} />
-    )
-  }
-});
-
-export default Container
+export default Container;