feat(StreetViewPanorama): Fix standalone rendering and rename prop

tomchentw · Jun 1, 2017 · 39373d9 · 39373d9
1 parent d80cfe5
commit 39373d9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/app/pages/basics/StreetViewPanoramaExample.js b/src/app/pages/basics/StreetViewPanoramaExample.js
@@ -49,11 +49,12 @@ const StreetViewPanoramaExampleGoogleMap = withGoogleMap(props => (
 ));
 
 /**
- * You can pass in an `element` to render `StreetViewPanorama` in its own container
- * At this point the `GoogleMap` wrapper and `withGoogleMap` HOC become optional, so you can either render map and StreetView
- * at the same time, or just the StreetView on its own
+ * You can pass in an `containerElement` to render `StreetViewPanorama` in its own container
+ * At this point the `GoogleMap` wrapper and `withGoogleMap` HOC become optional,
+ * so you can either render a map and StreetView at the same time,
+ * or just the StreetView on its own
  *    <StreetViewPanorama
- *      element={<div style={{ width: `100%`, height: `100%` }} />}
+ *      containerElement={<div style={{ width: `100%`, height: `100%` }} />}
  *      defaultPosition={coordinates}
  *      visible
  *    />

diff --git a/src/lib/StreetViewPanorama.js b/src/lib/StreetViewPanorama.js
@@ -145,27 +145,34 @@ export default _.flowRight(
   getInitialState() {
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#StreetViewPanorama
     let streetViewPanorama;
-    if (!this.props.element && this.context[MAP]) {
+    if (!this.props.containerElement && this.context[MAP]) {
       streetViewPanorama = this.context[MAP].getStreetView();
       streetViewPanorama.setOptions(this.getInitialOptions());
     }
-    if (!this.props.element && !this.context[MAP]) {
-      throw new Error(`You need to use the StreetViewPanorama in the context of \`<GoogleMap>\` or pass an \`element\` for it to be rendered in.`);
+    if (!this.props.containerElement && !this.context[MAP]) {
+      throw new Error(`You need to use the StreetViewPanorama in the context of \`<GoogleMap>\` or pass an \`containerElement\` for it to be rendered in.`);
     }
     return {
       [STREET_VIEW_PANORAMA]: streetViewPanorama,
     };
   },
 
   handleComponentMount(el) {
-    const streetViewPanorama = new google.maps.StreetViewPanorama(el, {
-      map: this.context[MAP],
-      ...this.getInitialOptions(),
-    });
-    if (this.context[MAP]) {
-      this.context[MAP].setStreetView(streetViewPanorama);
+    this.el = el;
+    if (this.el) {
+      const streetViewPanorama = new google.maps.StreetViewPanorama(this.el, {
+        map: this.context[MAP],
+        ...collectUncontrolledAndControlledProps(
+          defaultUncontrolledPropTypes,
+          controlledPropTypes,
+          this.props,
+        ),
+      });
+      if (this.context[MAP]) {
+        this.context[MAP].setStreetView(streetViewPanorama);
+      }
+      this.setState({ [STREET_VIEW_PANORAMA]: streetViewPanorama });
     }
-    this.setState({ [STREET_VIEW_PANORAMA]: streetViewPanorama });
   },
 
   componentWillUnmount() {
@@ -176,10 +183,10 @@ export default _.flowRight(
   },
 
   render() {
-    if (this.props.element) {
+    if (this.props.containerElement) {
       return (
         React.cloneElement(
-          this.props.element,
+          this.props.containerElement,
           { ref: this.handleComponentMount },
           this.props.children,
         )