fix(Popup): rename onPopupClose to onClose

BREAKING CHANGE: Popup onPopupClose prop is renamed to onClick
urbica · Aug 14, 2018 · 8591e3d · 8591e3d
1 parent 2a8392c
commit 8591e3d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 31 deletions.
diff --git a/docs/immutable-map.md b/docs/immutable-map.md
@@ -1,5 +1,5 @@
 ```jsx
-const Immutable = require('immutable');
+const Immutable = require("immutable");
 
 initialState = {
   mapStyle: null,
@@ -12,12 +12,10 @@ initialState = {
 
 const styleUrl = `https://api.mapbox.com/styles/v1/mapbox/light-v9?access_token=${MAPBOX_ACCESS_TOKEN}`;
 
-if (!state.mapStyle) {
+if (!state.mapStyle && setState) {
   fetch(styleUrl)
     .then(r => r.json())
-    .then(mapStyle =>
-      setState({ mapStyle: Immutable.fromJS(mapStyle) })
-    );
+    .then(mapStyle => setState({ mapStyle: Immutable.fromJS(mapStyle) }));
 }
 
 <MapGL
@@ -27,4 +25,4 @@ if (!state.mapStyle) {
   onViewportChange={viewport => setState({ viewport })}
   {...state.viewport}
 />
-```
+```
diff --git a/docs/popup.md b/docs/popup.md
@@ -1,28 +1,27 @@
 ```jsx
-const random = require("@turf/random");
-
-const bbox = [-160, -70, 160, 70];
-const [longitude, latitude] = random.randomPosition(bbox);
-
 initialState = {
   viewport: {
     latitude: 0,
     longitude: 0,
     zoom: 0
   },
-  isOpenPopup: true,
-  longitude,
-  latitude
+  isOpen: true,
+  longitude: 0,
+  latitude: 0
 };
 
-const onClick = () => {
-  const [longitude, latitude] = random.randomPosition(bbox);
-  setState({ longitude, latitude, isOpenPopup: true });
+const onClick = ({ lngLat }) => {
+  setState(state => ({
+    ...state,
+    longitude: lngLat.lng,
+    latitude: lngLat.lat,
+    isOpen: true
+  }));
 };
 
-const onPopupClose = () => {
-  setState({ isOpenPopup: false });
-}
+const onClose = () => {
+  setState(state => ({ ...state, isOpen: false }));
+};
 
 const Element = <div>Popup</div>;
 
@@ -33,15 +32,14 @@ const Element = <div>Popup</div>;
   onClick={onClick}
   {...state.viewport}
 >
-{
-  state.isOpenPopup &&
+  {state.isOpen && (
     <Popup
       longitude={state.longitude}
       latitude={state.latitude}
-      onPopupClose={onPopupClose}
       closeOnClick={false}
+      onClose={onClose}
       element={Element}
     />
-  }
-</MapGL>;
+  )}
+</MapGL>
 ```
diff --git a/src/components/Popup/index.js b/src/components/Popup/index.js
@@ -23,8 +23,8 @@ type Props = {
   /* If true, the popup will closed when the map is clicked. */
   closeOnClick?: boolean,
 
-  /** The onPopupClose callback is fired when the popup closed */
-  onPopupClose?: Function,
+  /** The onClose callback is fired when the popup closed */
+  onClose?: Function,
 
   /*
    * A string indicating the part of the Popup that should be positioned closest to the coordinate
@@ -56,7 +56,7 @@ class Popup extends PureComponent<Props> {
   static defaultProps = {
     closeButton: true,
     closeOnClick: true,
-    onPopupClose: null,
+    onClose: null,
     anchor: null,
     offset: null
   };
@@ -69,7 +69,7 @@ class Popup extends PureComponent<Props> {
       offset,
       closeButton,
       closeOnClick,
-      onPopupClose,
+      onClose,
       anchor
     } = this.props;
 
@@ -80,8 +80,8 @@ class Popup extends PureComponent<Props> {
     popup.setLngLat([longitude, latitude]).addTo(this._map);
     popup.setDOMContent(div);
 
-    if (onPopupClose) {
-      popup.on('close', onPopupClose);
+    if (onClose) {
+      popup.on('close', onClose);
     }
 
     this._popup = popup;