@woosmap/ui 3.25.0 → 3.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.25.0",
+  "version": "3.29.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/Dropdown/Dropdown.js

@@ -6,14 +6,14 @@ import Button from '../Button/Button';
 import ConfirmationPopover from '../Popover/ConfirmationPopover';
 import withClickOutside from '../withClickOutside/withClickOutside';
 
-function mapChildrenWithProps(children, childrenRefs, closeCb) {
+function mapChildrenWithProps(children, childrenRefs, props) {
     if (children) {
         return React.Children.map(children, (child, index) => {
             if (React.isValidElement(child)) {
                 // only add ref to non functional components
                 return React.cloneElement(child, {
                     ...child.props,
-                    closeCb,
+                    ...props,
                     ref:
                         !child.type.prototype || (child.type.prototype && child.type.prototype.render)
                             ? (elem) => {
@@ -49,8 +49,8 @@ class DropdownMenu extends Component {
     };
 
     render() {
-        const { direction, children, closeCb, testId, isSection, ...rest } = this.props;
-        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
+        const { direction, children, closeCb, onMouseEnter, onMouseLeave, testId, isSection, ...rest } = this.props;
+        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, { closeCb });
         if (isSection) {
             return (
                 <div className="dropdown__container">
@@ -58,6 +58,9 @@ class DropdownMenu extends Component {
                         role="menu"
                         className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
                         data-testid={testId}
+                        tabIndex="-1"
+                        onMouseEnter={onMouseEnter}
+                        onMouseLeave={onMouseLeave}
                         {...rest}
                     >
                         {childrenWithProps}
@@ -66,7 +69,14 @@ class DropdownMenu extends Component {
             );
         }
         return (
-            <ul role="menu" className={cl('dropdown__menu', direction)} data-testid={testId} {...rest}>
+            <ul
+                role="menu"
+                className={cl('dropdown__menu', direction)}
+                data-testid={testId}
+                {...rest}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+            >
                 {childrenWithProps}
             </ul>
         );
@@ -76,6 +86,8 @@ class DropdownMenu extends Component {
 DropdownMenu.defaultProps = {
     direction: 'sw',
     closeCb: null,
+    onMouseEnter: null,
+    onMouseLeave: null,
     testId: 'dropdown-menu',
     isSection: false,
 };
@@ -83,6 +95,8 @@ DropdownMenu.defaultProps = {
 DropdownMenu.propTypes = {
     children: PropTypes.node.isRequired,
     closeCb: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
     testId: PropTypes.string,
     isSection: PropTypes.bool,
     direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
@@ -100,7 +114,7 @@ class DropdownMenuSection extends Component {
 
     render() {
         const { title, children, closeCb, ...rest } = this.props;
-        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
+        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, { closeCb });
         return (
             <div className="dropdown__menu__section">
                 {title && <div className="dropdown__menu__item dropdown__menu__item__title">{title}</div>}
@@ -313,7 +327,7 @@ class Dropdown extends Component {
             }
             this.mouseLeaveTimeout = setTimeout(() => {
                 this.setOpen(false);
-            }, 500);
+            }, 300);
         }
     };
 
@@ -351,15 +365,17 @@ class Dropdown extends Component {
             ...rest
         } = this.props;
         const { open } = this.state;
-        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, this.handleClickOutside);
+        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, {
+            closeCb: this.handleClickOutside,
+            onMouseEnter: this.onMouseEnter,
+            onMouseLeave: this.onMouseLeave,
+        });
 
         return (
             <div
                 ref={openOnMouseEnter ? null : this.clickOutsideRef}
                 className={cl('dropdown', { open }, `dropdown--${size}`, className)}
                 {...rest}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
             >
                 <Button
                     disabled={disabled}
@@ -371,6 +387,8 @@ class Dropdown extends Component {
                     iconSize={btnFaceIconSize}
                     label={label}
                     testId={testId}
+                    onMouseEnter={this.onMouseEnter}
+                    onMouseLeave={this.onMouseLeave}
                 />
                 {childrenWithProps}
             </div>

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,8 @@ 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 LocalitiesAddressDemo } from './components/Demo/LocalitiesAddressDemo';
+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

@@ -9,7 +9,8 @@ html
 body
 	width 100%
 	height 100%
-
+body
+	font()
 pre
 code
 	box-sizing border-box

package/src/styles/console/fonts.styl

@@ -1,7 +1 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
-
-body
-input
-textarea
-select
-	font()

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/font.styl

@@ -1,4 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;0,500;1,600;1,700;1,900&family=Roboto+Mono&display=swap');
-
-body
-	font()
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;0,500;1,600;1,700;1,900&family=Roboto+Mono&display=swap');

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/fonts.styl

@@ -1,7 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
-
-body
-input
-textarea
-select
-	font()
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

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