From d27d7eea8b97c2dc2fd5ed98489f90ee7ad86289 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Fri, 17 Mar 2017 15:04:42 +0200
Subject: [PATCH] Define map dimensions in the wrapper, not within the map with
 props

---
 src/components/Map/Map.css                    |  4 +++
 src/components/Map/Map.example.js             |  3 ++-
 src/components/Map/Map.js                     | 14 +++++-----
 src/containers/ListingPage/ListingPage.js     |  2 +-
 .../__snapshots__/ListingPage.test.js.snap    | 27 +++++++++++--------
 5 files changed, 29 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Map/Map.css

diff --git a/src/components/Map/Map.css b/src/components/Map/Map.css
new file mode 100644
index 00000000..9c670fe9
--- /dev/null
+++ b/src/components/Map/Map.css
@@ -0,0 +1,4 @@
+.root {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/components/Map/Map.example.js b/src/components/Map/Map.example.js
index 12fa4a07..34819ecc 100644
--- a/src/components/Map/Map.example.js
+++ b/src/components/Map/Map.example.js
@@ -1,10 +1,11 @@
+import React from 'react';
 import Map from './Map';
 import { types } from '../../util/sdkLoader';
 
 const { LatLng } = types;
 
 export const Empty = {
-  component: Map,
+  component: props => <div style={{ height: 400 }}><Map {...props} /></div>,
   props: {
     center: new LatLng(60.16502999999999, 24.940064399999983),
     address: 'Sharetribe',
diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js
index f09ccce0..906042d5 100644
--- a/src/components/Map/Map.js
+++ b/src/components/Map/Map.js
@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import * as propTypes from '../../util/propTypes';
 
+import css from './Map.css';
+
 class Map extends Component {
   componentDidMount() {
     const mapsLibLoaded = window.google && window.google.maps;
@@ -25,12 +27,10 @@ class Map extends Component {
     });
   }
   render() {
-    const { className, width, height } = this.props;
-    const style = { width, height };
+    const { className } = this.props;
     return (
       <div
-        className={className}
-        style={style}
+        className={`${className} ${css.root}`}
         ref={el => {
           this.el = el;
         }}
@@ -39,14 +39,12 @@ class Map extends Component {
   }
 }
 
-Map.defaultProps = { className: '', width: '100%', height: 300, zoom: 11 };
+Map.defaultProps = { className: '', zoom: 11 };
 
-const { string, oneOfType, number } = PropTypes;
+const { string, number } = PropTypes;
 
 Map.propTypes = {
   className: string,
-  width: oneOfType([number, string]),
-  height: oneOfType([number, string]),
   center: propTypes.latlng.isRequired,
   address: string.isRequired,
   zoom: number,
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 933242ea..47cae2ac 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -91,7 +91,7 @@ export class ListingPageComponent extends Component {
         {/* eslint-disable react/no-danger */}
         <div className={css.description} dangerouslySetInnerHTML={{ __html: description }} />
         {/* eslint-enable react/no-danger */}
-        {map}
+        {map ? <div style={{ height: 300 }}>{map}</div> : null}
         <div className={css.filterSection}>
           <h1>Here will be filters (or dragons)</h1>
           <h2>Studio type</h2>
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 2872a1b3..d22da3f7 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -7,18 +7,23 @@ exports[`ListingPage matches snapshot 1`] = `
         "__html": "listing1 description",
       }
     } />
-  <Map
-    address="listing1 address"
-    center={
-      LatLng {
-        "lat": 40,
-        "lng": 60,
+  <div
+    style={
+      Object {
+        "height": 300,
       }
-    }
-    className=""
-    height={300}
-    width="100%"
-    zoom={11} />
+    }>
+    <Map
+      address="listing1 address"
+      center={
+        LatLng {
+          "lat": 40,
+          "lng": 60,
+        }
+      }
+      className=""
+      zoom={11} />
+  </div>
   <div>
     <h1>
       Here will be filters (or dragons)