@woosmap/ui 3.23.0 → 3.27.0

package/package.json

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

package/src/components/Demo/DistanceDemo.js

@@ -210,6 +210,7 @@ export default class DistanceDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.woosmapKey);
             this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestDistance();
         } else {
@@ -218,6 +219,9 @@ export default class DistanceDemo extends Component {
     };
 
     localitiesOnChangeCallBack = (type) => (item) => {
+        if (!item) {
+            return;
+        }
         const newState = {};
         newState[`${type}Location`] = item ? item.location : {};
         this.setState(newState, this.requestDistance);
@@ -346,7 +350,7 @@ export default class DistanceDemo extends Component {
         };
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     id="distance-demo"
                     className="demo--distance"

package/src/components/Demo/GeolocationDemo.js

@@ -180,6 +180,7 @@ export default class GeolocationDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.geolocationWoosmapSearchKey);
             this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestGeolocation();
         } else {
@@ -211,7 +212,7 @@ export default class GeolocationDemo extends Component {
         }
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.geolocationWoosmapSearchKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     className="demo--geolocation"
                     docLink="https://developers.woosmap.com/products/geolocation-api/location/"

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -328,6 +328,7 @@ export default class LocalitiesAddressDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.woosmapKey);
             this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestAddress();
         } else {
@@ -344,7 +345,7 @@ export default class LocalitiesAddressDemo extends Component {
         }
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     noheader={noheader}
                     header={headerLabels}

package/src/components/Demo/LocalitiesDemo.js

@@ -195,6 +195,7 @@ export default class LocalitiesDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.woosmapKey);
             this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestLocalities();
         } else {
@@ -268,7 +269,7 @@ export default class LocalitiesDemo extends Component {
         const { noheader, headerLabels, subHeader } = this.props;
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     id="localities-demo"
                     header={headerLabels}

package/src/components/Demo/MapDemo.js

@@ -2,7 +2,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Demo from './SkeletonDemo';
-import Constants from '../../Constants';
 import Button from '../Button/Button';
 import ButtonGroup from '../Button/ButtonGroup';
 import marker from '../../images/marker.png';
@@ -253,7 +252,7 @@ storesOverlay.setMap(map);
         };
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     ref={this.demoRef}
                     header={headerLabels}

package/src/components/Demo/SearchDemo.js

@@ -73,7 +73,7 @@ export default class SearchDemo extends Component {
             key: Constants.woosmapKey,
             lat: location.lat,
             lng: location.lng,
-            stores_by_page: maxStore,
+            stores_by_page: maxStore || '5',
             query,
         };
     };
@@ -190,6 +190,7 @@ export default class SearchDemo extends Component {
         if (this.timeoutMap) clearTimeout(this.timeoutMap);
 
         if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.woosmapKey);
             this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestSearch();
         } else {
@@ -310,7 +311,7 @@ export default class SearchDemo extends Component {
         };
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     id="search-demo"
                     className="demo--search"

package/src/components/Demo/SkeletonDemo.js

@@ -176,10 +176,12 @@ export default class SkeletonDemo extends Component {
                                 {filters2}
                             </div>
                         )}
-                        <div className="demo__map">
-                            {withMap && <div className="map" ref={this.mapDivRef} />}
-                            {mainContent}
-                        </div>
+                        {withMap && (
+                            <div className="demo__map">
+                                <div className="map" ref={this.mapDivRef} />
+                            </div>
+                        )}
+                        {mainContent && <div className="demo__content">{mainContent}</div>}
                     </div>
                     <div className="demo__data">
                         {result && (

package/src/components/Dropdown/Dropdown.js

@@ -313,7 +313,7 @@ class Dropdown extends Component {
             }
             this.mouseLeaveTimeout = setTimeout(() => {
                 this.setOpen(false);
-            }, 500);
+            }, 300);
         }
     };
 

package/src/components/Map/drawOnMap.js

@@ -126,6 +126,7 @@ export const createWoosmapMap = (node) => {
             ],
         });
     } catch (e) {
+        console.error('Cound not instantiate a Map');
         console.error(e);
         return null;
     }

package/src/index.js

@@ -46,6 +46,7 @@ export { default as withClickOutside } from './components/withClickOutside/withC
 export { default as withFormValidation } from './components/withFormValidation/withFormValidation';
 export { default as Marker } from './components/Map/Marker';
 export { default as LocalitiesDemo } from './components/Demo/LocalitiesDemo';
+export { default as LocalitiesAllDemo } from './components/Demo/LocalitiesAllDemo';
 export { default as MerchantDemo } from './components/Demo/MerchantDemo';
 export { default as GeolocationDemo } from './components/Demo/GeolocationDemo';
 export { default as DistanceDemo } from './components/Demo/DistanceDemo';

package/src/styles/commons/base.styl

@@ -10,8 +10,6 @@ body
 	width 100%
 	height 100%
 body
-input
-textaera
 	font()
 pre
 code

package/src/styles/console/input.styl

@@ -1,3 +1,5 @@
+input
+	font()
 .input
 	width 100%
 	&__container

package/src/styles/console/select.styl

@@ -1,3 +1,5 @@
+select
+	font()
 .asyncselect__control--is-focused .asyncselect__single-value
 	display none
 

package/src/styles/next-website/demo.styl

@@ -1,7 +1,7 @@
 
 .demo
 	fullwh()
-	margin 6rem auto
+	margin auto
 	color $secondary
 	.title
 		font-size $title3
@@ -44,6 +44,7 @@
 		.map
 			width 100%
 			height 100%
+			background-color $inputDemoBgColor
 	&__results
 		width $demofilterWidth
 		display flex
@@ -93,7 +94,7 @@
 			br($demoBr)
 			background-color $inputDemoBgColor !important
 			border-color $inputDemoBorderColor
-			font-size $inputFontSizeDemo
+			font-size $inputFontSizeDemo !important
 			height $inputDemoHeight
 			padding 0 1rem 0 1rem
 	.mbi
@@ -101,15 +102,15 @@
 	.input
 		&__label
 			inputFont()
-			font-size $inputFontSizeDemo
+			font-size $inputFontSizeDemo !important
 	.select
 	.asyncselect
-		inputFont()
-		font-size $inputFontSizeDemo
 		&__control
+			inputFont()
+			font-size $inputFontSizeDemo !important
 			border-radius $demoBr !important
 			background-color $inputDemoBgColor !important
-			min-height 2.4rem !important
+			min-height $inputDemoHeight !important
 			height auto !important
 			&:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
 				border-color $inputDemoBorderColor !important
@@ -167,7 +168,7 @@
 	&__filters
 		.btn
 			br(.2)
-			font-size $inputFontSizeDemo
+			font-size $inputFontSizeDemo !important
 			line-height 2.2rem
 			padding 0 .8rem
 			height $inputDemoHeight
@@ -193,18 +194,18 @@
 							color $inputDemoBgColor
 					&.language
 					&.transportation
-						mbi(.4)
+						mbi(.6)
 						.btn
 							br(.3)
 							border 0
-							height 1.9rem
-							padding .2rem
+							height 2.2rem
+							padding .4rem
 							&.active
 								background-color $light
 								box-shadow 0 0 .1rem .1rem $activeColorDark
 						.flag
-							width 2.2rem
-							height 1.5rem
+							width 2.4rem
+							height 1.6rem
 						&.transportation
 							.btn
 								height 2.8rem
@@ -232,9 +233,16 @@
 					br(2)
 					inputFont()
 					padding 0 1rem
-					font-size $inputFontSizeDemo
+					font-size $inputFontSizeDemo !important
 					border .1rem solid $activeColor
 					color darken($activeColor, 20%)
+	&--address
+		&__formcontainer
+			mbib(.9)
+			.input
+				&__label
+					margin-bottom .2rem
+
 @media screen and (max-width 769px)
 	.demo__showcase
 		max-height 100%

package/src/styles/next-website/input.styl

@@ -2,6 +2,8 @@
 	width 100%
 	&__container
 		position relative
+		inputFont()
+		font-size 1.3rem
 	&__label
 		display block
 		margin-bottom 1rem

package/src/styles/next-website/mixins.styl

@@ -47,7 +47,7 @@ trans()
 	transition all .3s
 
 inputFont()
-	font-family 'Roboto Mono', monospace
+	font-family $fontFamily2
 btn()
 	br()
 	flexBtn()

package/src/styles/next-website/select.styl

@@ -14,6 +14,8 @@
 		margin-top 1rem
 		color $error
 	&__control
+		inputFont()
+		font-size 1.3rem
 		min-width $inputMinWidth
 		min-height $inputHeight !important
 		border-radius .6rem !important

package/src/styles/next-website/variables.styl

@@ -1,4 +1,5 @@
 $fontFamily = "Poppins", arial, sans-serif
+$fontFamily2 = 'Roboto Mono', monospace
 $fontSize = 1.8rem
 $lineHeight = $fontSize * 2 - .8
 $fontSizeSmall = $fontSize - .2

package/src/styles/website/input.styl

@@ -1,3 +1,5 @@
+input
+	font()
 .input
 	width 100%
 	&__container

package/src/styles/website/select.styl

@@ -1,3 +1,5 @@
+select
+	font()
 .asyncselect__control--is-focused .asyncselect__single-value
 	display none