@woosmap/ui 2.52.0 → 2.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "2.52.0",
+  "version": "2.53.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Demo/DistanceDemo.js

@@ -71,7 +71,7 @@ export default class DistanceDemo extends Component {
         this.requestUrl = 'https://api.woosmap.com/distance/route/json';
         this.polylines = [];
         this.directionsRenderer = null;
-        this.mapDivRef = React.createRef();
+        this.demoRef = React.createRef();
     }
 
     componentDidMount() {
@@ -209,16 +209,14 @@ export default class DistanceDemo extends Component {
             clearTimeout(this.timeoutMap);
         }
 
-        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = createWoosmapMap(this.mapDivRef.current);
+        if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestDistance();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);
         }
     };
 
-    renderMap = () => <div className="map" ref={this.mapDivRef} />;
-
     localitiesOnChangeCallBack = (type) => (item) => {
         const newState = {};
         newState[`${type}Location`] = item ? item.location : {};
@@ -361,7 +359,8 @@ export default class DistanceDemo extends Component {
                     referer="http://localhost/"
                     response={error || routes}
                     result={this.renderRoutesSummary()}
-                    map={this.renderMap()}
+                    withMap
+                    ref={this.demoRef}
                 />
             </>
         );

package/src/components/Demo/GeolocationDemo.js

@@ -26,7 +26,7 @@ export default class GeolocationDemo extends Component {
         this.marker = null;
         this.viewport = null;
         this.requestUrl = 'https://api.woosmap.com/geolocation/stores';
-        this.mapDivRef = React.createRef();
+        this.demoRef = React.createRef();
         this.overlay = null;
         this.storeMarkers = [];
     }
@@ -178,16 +178,14 @@ export default class GeolocationDemo extends Component {
             clearTimeout(this.timeoutMap);
         }
 
-        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = createWoosmapMap(this.mapDivRef.current);
+        if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestGeolocation();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);
         }
     };
 
-    renderMap = () => <div className="map" ref={this.mapDivRef} />;
-
     render() {
         const { geolocation, error } = this.state;
         const { noheader } = this.props;
@@ -225,8 +223,9 @@ export default class GeolocationDemo extends Component {
                     noheader={noheader}
                     response={error || geolocation}
                     result={this.renderGeolocationInfo()}
-                    map={this.renderMap()}
+                    withMap
                     footerFilters={this.renderFooterFilters()}
+                    ref={this.demoRef}
                 />
             </>
         );

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -31,7 +31,7 @@ export default class LocalitiesAddressDemo extends Component {
         this.requestDetailsUrl = 'https://api.woosmap.com/localities/details';
         this.inputRef = React.createRef();
         this.addressAutocompleteRef = React.createRef();
-        this.mapDivRef = React.createRef();
+        this.demoRef = React.createRef();
     }
 
     componentDidMount() {
@@ -326,16 +326,14 @@ export default class LocalitiesAddressDemo extends Component {
             clearTimeout(this.timeoutMap);
         }
 
-        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = createWoosmapMap(this.mapDivRef.current);
+        if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestAddress();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);
         }
     };
 
-    renderMap = () => <div className="map" ref={this.mapDivRef} />;
-
     render() {
         const { response, error, showDetails } = this.state;
         const { noheader, headerLabels, subHeader } = this.props;
@@ -359,7 +357,8 @@ export default class LocalitiesAddressDemo extends Component {
                     referer="http://localhost/"
                     response={error || response}
                     result={this.renderAddress()}
-                    map={this.renderMap()}
+                    withMap
+                    ref={this.demoRef}
                 />
             </>
         );

package/src/components/Demo/LocalitiesDemo.js

@@ -64,7 +64,7 @@ export default class LocalitiesDemo extends Component {
         this.marker = null;
         this.viewport = null;
         this.requestUrl = 'https://api.woosmap.com/localities/autocomplete/';
-        this.mapDivRef = React.createRef();
+        this.demoRef = React.createRef();
         this.overlay = null;
     }
 
@@ -194,16 +194,14 @@ export default class LocalitiesDemo extends Component {
             clearTimeout(this.timeoutMap);
         }
 
-        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = createWoosmapMap(this.mapDivRef.current);
+        if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestLocalities();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);
         }
     };
 
-    renderMap = () => <div className="map" ref={this.mapDivRef} />;
-
     renderHeaderFilters = () => {
         const { input } = this.state;
         const { usecaseFilter } = this.props;
@@ -287,7 +285,8 @@ export default class LocalitiesDemo extends Component {
                     referer="http://localhost/"
                     response={error || localities}
                     result={this.renderAutocompleteList()}
-                    map={this.renderMap()}
+                    withMap
+                    ref={this.demoRef}
                 />
             </>
         );

package/src/components/Demo/MapDemo.js

@@ -23,7 +23,7 @@ export default class MapDemo extends Component {
         this.marker = null;
         this.mounted = true;
         this.viewport = null;
-        this.mapDivRef = React.createRef();
+        this.demoRef = React.createRef();
     }
 
     componentDidMount() {
@@ -179,7 +179,7 @@ storesOverlay.setMap(map);
         if (this.timeoutMap) {
             clearTimeout(this.timeoutMap);
         }
-        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
+        if (window.woosmap && window.woosmap.map && this.demoRef.current) {
             window.woosmap.map.config.setApiKey('woos-48c80350-88aa-333e-835a-07f4b658a9a4');
             if (!this.storeOverlay) {
                 this.storesOverlay = new window.woosmap.map.StoresOverlay({
@@ -211,7 +211,7 @@ storesOverlay.setMap(map);
             if (colorStyle) {
                 styles.push(colorStyle);
             }
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current, {
+            this.map = new window.woosmap.map.Map(this.demoRef.current.getMap(), {
                 styles,
                 center: {
                     lat: 51.51,
@@ -228,8 +228,6 @@ storesOverlay.setMap(map);
         }
     };
 
-    renderMap = () => <div className="map" ref={this.mapDivRef} />;
-
     applyStyle = (style) => {
         if (style === 'grey') {
             return { featureType: 'all', stylers: [{ saturation: -100, lightness: -30 }] };
@@ -255,6 +253,7 @@ storesOverlay.setMap(map);
             <>
                 <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
                 <Demo
+                    ref={this.demoRef}
                     header={headerLabels}
                     id="map-demo"
                     className="demo--map"
@@ -263,7 +262,7 @@ storesOverlay.setMap(map);
                     renderCode={this.renderCode}
                     noheader={noheader}
                     referer="http://localhost/"
-                    map={this.renderMap()}
+                    withMap
                     response={null}
                 />
             </>

package/src/components/Demo/SearchDemo.js

@@ -36,7 +36,7 @@ export default class SearchDemo extends Component {
         this.map = null;
         this.markers = [];
         this.requestUrl = 'https://api.woosmap.com/stores/search/';
-        this.mapDivRef = React.createRef();
+        this.demoRef = React.createRef();
     }
 
     componentDidMount() {
@@ -189,16 +189,14 @@ export default class SearchDemo extends Component {
     displayMap = () => {
         if (this.timeoutMap) clearTimeout(this.timeoutMap);
 
-        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = createWoosmapMap(this.mapDivRef.current);
+        if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestSearch();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);
         }
     };
 
-    renderMap = () => <div className="map" ref={this.mapDivRef} />;
-
     renderHeaderFilters = () => {
         const { selectedLocality } = this.state;
         const originInputs = {
@@ -326,7 +324,8 @@ export default class SearchDemo extends Component {
                     response={error || data}
                     noheader={noheader}
                     result={this.renderStoreList()}
-                    map={this.renderMap()}
+                    withMap
+                    ref={this.demoRef}
                 />
             </>
         );

package/src/components/Demo/SkeletonDemo.js

@@ -18,6 +18,7 @@ export default class SkeletonDemo extends Component {
         };
         this.copyActionIdRequest = uniqueid();
         this.copyActionIdResponse = uniqueid();
+        this.mapDivRef = React.createRef();
     }
 
     componentWillUnmount() {
@@ -57,6 +58,13 @@ export default class SkeletonDemo extends Component {
         this.copy(JSON.stringify(response, null, 2));
     };
 
+    getMap = () => {
+        if (this.mapDivRef) {
+            return this.mapDivRef.current;
+        }
+        return null;
+    };
+
     renderJsCode = () => {
         const { params, request } = this.props;
         /* eslint-disable */
@@ -157,7 +165,7 @@ export default class SkeletonDemo extends Component {
             header,
             id,
             result,
-            map,
+            withMap,
             request,
             response,
             className,
@@ -214,13 +222,13 @@ export default class SkeletonDemo extends Component {
                                 <div className="demo__results__content">{result}</div>
                             </div>
                         ) : null}
-                        {map ? (
+                        {withMap ? (
                             <div
                                 className={cl('demo__map', {
                                     'demo__map--small': result,
                                 })}
                             >
-                                {map}
+                                <div className="map" ref={this.mapDivRef} />
                             </div>
                         ) : null}
                         <div className="demo__api">
@@ -281,7 +289,7 @@ SkeletonDemo.defaultProps = {
     leftContent: null,
     className: '',
     result: null,
-    map: null,
+    withMap: false,
     request: null,
     response: {},
     params: {},
@@ -305,7 +313,7 @@ SkeletonDemo.propTypes = {
     headerFilters: PropTypes.array,
     footerFilters: PropTypes.array,
     result: PropTypes.node,
-    map: PropTypes.node,
+    withMap: PropTypes.bool,
     leftContent: PropTypes.node,
     request: PropTypes.string,
     referer: PropTypes.string,