Added Loading container

Ari · Ari · commit b1e3f5e63516 · 2018-03-29T16:30:39.000-04:00
diff --git a/README.md b/README.md
@@ -32,6 +32,18 @@ export default GoogleApiWrapper({
 })(MapContainer)
 ```
 
+If you want to add a loading container _other than the default_ loading container, simply pass it in the HOC, like so:
+
+```javascript
+const LoadingContainer = (props) => (
+  <div>Fancy loading container!</div>
+)
+export default GoogleApiWrapper({
+  apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE),
+  LoadingContainer: LoadingContainer
+})(MapContainer)
+```
+
 ## Sample Usage With Lazy-loading Google API:
 
 ```javascript
@@ -90,7 +102,7 @@ initalCenter: Takes an object containing latitude and longitude coordinates. Set
           onClick={this.onMapClicked}
         >
 ```
-center: Takes an object containing latitude and longitude coordinates. Use this if you want to re-render the map after the initial render. 
+center: Takes an object containing latitude and longitude coordinates. Use this if you want to re-render the map after the initial render.
 
 ```javascript
     <Map
@@ -104,7 +116,7 @@ center: Takes an object containing latitude and longitude coordinates. Use this
           onClick={this.onMapClicked}
         >
 ```
-It also takes event handlers described below: 
+It also takes event handlers described below:
 
 ### Events
 
diff --git a/examples/Container.js b/examples/Container.js
@@ -1,20 +1,19 @@
-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 from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import {Link} from 'react-router';
+import GitHubForkRibbon from 'react-github-fork-ribbon';
 
 let GoogleApiWrapper;
 if (__IS_DEV__) {
-  GoogleApiWrapper = require('../src/index').GoogleApiWrapper
+  GoogleApiWrapper = require('../src/index').GoogleApiWrapper;
 } else {
-  GoogleApiWrapper = require('../dist').GoogleApiWrapper
+  GoogleApiWrapper = require('../dist').GoogleApiWrapper;
 }
 
-import styles from './styles.module.css'
+import styles from './styles.module.css';
 
 export const Container = React.createClass({
-
   propTypes: {
     children: PropTypes.element.isRequired
   },
@@ -30,12 +29,10 @@ export const Container = React.createClass({
     const sharedProps = {
       google: this.props.google,
       loaded: this.props.loaded
-    }
+    };
     return React.Children.map(children, c => {
-      return React.cloneElement(c, sharedProps, {
-
-      });
-    })
+      return React.cloneElement(c, sharedProps, {});
+    });
   },
 
   render: function() {
@@ -45,39 +42,45 @@ export const Container = React.createClass({
     const c = this.renderChildren();
     return (
       <div className={styles.container}>
-        <GitHubForkRibbon href="//github.com/fullstackreact/google-maps-react"
-                  target="_blank"
-                  position="right">
+        <GitHubForkRibbon
+          href="//github.com/fullstackreact/google-maps-react"
+          target="_blank"
+          position="right"
+        >
           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}>
+                  <Link to={key} activeClassName={styles.active} key={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>
+              <h2>
+                <a href="https://github.com/fullstackreact/google-maps-react/blob/master/README.md">
+                  Readme
+                </a>
+              </h2>
             </div>
             {c}
           </div>
         </div>
       </div>
-    )
+    );
   }
-})
+});
 
+const Loading = props => <div>Fancy loading container</div>;
 export default GoogleApiWrapper({
   apiKey: __GAPI_KEY__,
-  libraries: ['places','visualization']
-})(Container)
+  libraries: ['places', 'visualization'],
+  LoadingContainer: Loading
+})(Container);
diff --git a/examples/index.js b/examples/index.js
@@ -1,82 +1,87 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import {Router, hashHistory, Redirect, Route, IndexRoute, Link} from 'react-router'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {
+  Router,
+  hashHistory,
+  Redirect,
+  Route,
+  IndexRoute,
+  Link
+} from 'react-router';
 
 import styles from './global.styles.css';
 
-import Container from './Container'
+import Container from './Container';
 
 const routeMap = {
-  'basic': {
+  basic: {
     name: 'Simple',
     component: require('./components/basic').default
   },
-  'markers': {
+  markers: {
     name: 'Marker',
     component: require('./components/withMarkers').default
   },
-  'clickable_markers': {
+  clickable_markers: {
     name: 'Clickable markers',
     component: require('./components/clickableMarkers').default
   },
-  'places': {
+  places: {
     name: 'Google places',
     component: require('./components/places').default
   },
-  'autocomplete': {
+  autocomplete: {
     name: 'Autocomplete',
     component: require('./components/autocomplete').default
   },
-  'heatMap': {
+  heatMap: {
     name: 'Heat Map',
     component: require('./components/withHeatMap').default
   },
-  'polygons': {
+  polygons: {
     name: 'Polygon',
     component: require('./components/withPolygons').default
   },
-  'polyline': {
+  polyline: {
     name: 'Polyline',
     component: require('./components/withPolylines').default
   }
-}
+};
 
 const createElement = (Component, props) => {
-  const pathname = props.location.pathname.replace('/', '')
+  const pathname = props.location.pathname.replace('/', '');
   const routeDef = routeMap[pathname];
   const newProps = {
-    routeMap, pathname, routeDef
-  }
-  return <Component {...newProps} {...props} />
-}
+    routeMap,
+    pathname,
+    routeDef
+  };
+  return <Component {...newProps} {...props} />;
+};
 
 const routes = (
-  <Router createElement={createElement}
-          history={hashHistory}>
-    <Route component={Container}
-           path='/'>
+  <Router createElement={createElement} history={hashHistory}>
+    <Route component={Container} path="/">
       {Object.keys(routeMap).map(key => {
-        const r = routeMap[key]
-        return (<Route
-                key={key}
-                path={key}
-                name={r.name}
-                component={r.component} />)
+        const r = routeMap[key];
+        return (
+          <Route key={key} path={key} name={r.name} component={r.component} />
+        );
       })}
       <IndexRoute component={routeMap['basic'].component} />
     </Route>
   </Router>
-)
+);
 
-const mountNode = document.querySelector('#root')
+const mountNode = document.querySelector('#root');
 if (mountNode) {
   ReactDOM.render(routes, mountNode);
 } else {
   const hljs = require('highlight.js');
 
   const codes = document.querySelectorAll('pre code');
   for (let i = 0; i < codes.length; i++) {
-    const block = codes[i]
+    const block = codes[i];
     hljs.highlightBlock(block);
   }
 }
diff --git a/src/GoogleApiComponent.js b/src/GoogleApiComponent.js
@@ -1,68 +1,77 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-import {ScriptCache} from './lib/ScriptCache'
-import GoogleApi from './lib/GoogleApi'
+import {ScriptCache} from './lib/ScriptCache';
+import GoogleApi from './lib/GoogleApi';
 
-const defaultMapConfig = {}
-const defaultCreateCache = (options) => {
-    options = options || {};
-    const apiKey = options.apiKey;
-    const libraries = options.libraries || ['places'];
-    const version = options.version || '3.29';
-    const language = options.language || 'en';
-    const url = options.url;
+const defaultMapConfig = {};
+const defaultCreateCache = options => {
+  options = options || {};
+  const apiKey = options.apiKey;
+  const libraries = options.libraries || ['places'];
+  const version = options.version || '3';
+  const language = options.language || 'en';
+  const url = options.url;
 
-    return ScriptCache({
-        google: GoogleApi({
-            apiKey: apiKey,
-            language: language,
-            libraries: libraries,
-            version: version,
-            url: url
-        })
-    });
+  return ScriptCache({
+    google: GoogleApi({
+      apiKey: apiKey,
+      language: language,
+      libraries: libraries,
+      version: version,
+      url: url
+    })
+  });
 };
 
-export const wrapper = (options) => (WrappedComponent) => {
-    const createCache = options.createCache || defaultCreateCache;
+const DefaultLoadingContainer = props => <div>Loading...</div>;
 
-    class Wrapper extends React.Component {
-        constructor(props, context) {
-            super(props, context);
+export const wrapper = options => WrappedComponent => {
+  const createCache = options.createCache || defaultCreateCache;
 
-            this.scriptCache = createCache(options);
-            this.scriptCache.google.onLoad(this.onLoad.bind(this))
+  class Wrapper extends React.Component {
+    constructor(props, context) {
+      super(props, context);
 
-            this.state = {
-                loaded: false,
-                map: null,
-                google: null
-            }
-        }
+      this.scriptCache = createCache(options);
+      this.scriptCache.google.onLoad(this.onLoad.bind(this));
+      this.LoadingContainer =
+        options.LoadingContainer || DefaultLoadingContainer;
 
-        onLoad(err, tag) {
-            this._gapi = window.google;
+      this.state = {
+        loaded: false,
+        map: null,
+        google: null
+      };
+    }
+
+    onLoad(err, tag) {
+      this._gapi = window.google;
 
-            this.setState({loaded: true, google: this._gapi})
-        }
+      this.setState({loaded: true, google: this._gapi});
+    }
 
-        render() {
-            const props = Object.assign({}, this.props, {
-                loaded: this.state.loaded,
-                google: window.google
-            });
+    render() {
+      const {LoadingContainer} = this;
+      if (!this.state.loaded) {
+        return <LoadingContainer />;
+      }
 
-            return (
-                <div>
-                    <WrappedComponent {...props}/>
-                    <div ref='map'/>
-                </div>
-            )
-        }
+      const props = Object.assign({}, this.props, {
+        loaded: this.state.loaded,
+        google: window.google
+      });
+
+      return (
+        <div>
+          <WrappedComponent {...props} />
+          <div ref="map" />
+        </div>
+      );
     }
+  }
 
-    return Wrapper;
-}
+  return Wrapper;
+};
 
 export default wrapper;
