@woosmap/ui 2.60.0 → 2.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "2.60.0",
+  "version": "2.64.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);
@@ -345,7 +349,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

@@ -179,6 +179,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 {
@@ -210,7 +211,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

@@ -327,6 +327,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 {
@@ -343,7 +344,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 {
@@ -270,7 +271,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

@@ -251,7 +251,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/Icon/Icon.js

@@ -7,6 +7,7 @@ import { ReactComponent as Battery } from '../../icons/battery.svg';
 import { ReactComponent as Cars } from '../../icons/cars.svg';
 import { ReactComponent as Github } from '../../icons/github.svg';
 import { ReactComponent as Green } from '../../icons/green.svg';
+import { ReactComponent as Integrations } from '../../icons/integrations.svg';
 import { ReactComponent as Like } from '../../icons/like.svg';
 import { ReactComponent as MapHd } from '../../icons/map-hd.svg';
 import { ReactComponent as Markers } from '../../icons/markers.svg';
@@ -89,7 +90,10 @@ import { ReactComponent as Manage } from '../../icons/manage.svg';
 import { ReactComponent as Marker } from '../../icons/marker.svg';
 import { ReactComponent as Members } from '../../icons/members.svg';
 import { ReactComponent as Member } from '../../icons/member.svg';
-import { ReactComponent as Menu } from '../../icons/menu.svg';
+import { ReactComponent as MenuVertical } from '../../icons/menu-vertical.svg';
+import { ReactComponent as MenuCircleVertical } from '../../icons/menu-circle-vertical.svg';
+import { ReactComponent as MenuHorizontal } from '../../icons/menu-horizontal.svg';
+import { ReactComponent as MenuCircleHorizontal } from '../../icons/menu-circle-horizontal.svg';
 import { ReactComponent as Metrics } from '../../icons/metrics.svg';
 import { ReactComponent as Organization } from '../../icons/organization.svg';
 import { ReactComponent as Organizations } from '../../icons/organizations.svg';
@@ -138,6 +142,7 @@ const Icons = {
     cars: Cars,
     github: Github,
     green: Green,
+    integrations: Integrations,
     like: Like,
     'map-hd': MapHd,
     markers: Markers,
@@ -221,7 +226,10 @@ const Icons = {
     members: Members,
     member: Member,
     metrics: Metrics,
-    menu: Menu,
+    'menu-vertical': MenuVertical,
+    'menu-circle-vertical': MenuCircleVertical,
+    'menu-horizontal': MenuHorizontal,
+    'menu-circle-horizontal': MenuCircleHorizontal,
     organization: Organization,
     organizations: Organizations,
     phone: Phone,

package/src/components/Popover/Popover.js

@@ -58,11 +58,11 @@ function withLayer(MyComponent) {
         function close() {
             setOpen(false);
         }
-        const { forwardedRef, container, placement, ...rest } = props;
+        const { forwardedRef, container, placement, disableClickOutside, ...rest } = props;
         const { renderLayer, triggerProps, layerProps, arrowProps } = useLayer({
             isOpen,
             container,
-            onOutsideClick: close, // close the menu when the user clicks outside
+            onOutsideClick: disableClickOutside ? null : close, // close the menu when the user clicks outside
             onDisappear: close, // close the menu when the menu gets scrolled out of sight
             overflowContainer: true, // keep the menu positioned inside the container
             auto: true, // automatically find the best placement
@@ -87,11 +87,13 @@ function withLayer(MyComponent) {
     WrappedComponent.defaultProps = {
         container: null,
         placement: 'bottom-center',
+        disableClickOutside: false,
     };
     WrappedComponent.propTypes = {
         forwardedRef: PropTypes.object.isRequired,
         container: PropTypes.string,
         placement: PropTypes.string,
+        disableClickOutside: PropTypes.bool,
     };
     return React.forwardRef((props, ref) => <WrappedComponent {...props} forwardedRef={ref} />);
 }

package/src/components/Popover/Popover.stories.js

@@ -3,6 +3,12 @@ import Popover from './Popover';
 import ConfirmationPopover from './ConfirmationPopover';
 import Button from '../Button/Button';
 
+const toggle = (ref) => {
+    if (ref.current) {
+        ref.current.toggle();
+    }
+};
+
 const Story = {
     title: 'base/Popover',
     component: Popover,
@@ -12,15 +18,10 @@ export default Story;
 
 const Template = () => {
     const popoverRef = React.createRef();
-    function toggle() {
-        if (popoverRef.current) {
-            popoverRef.current.toggle();
-        }
-    }
     return (
         <div style={{ paddingLeft: '50px' }}>
             <Popover ref={popoverRef} content="My popover">
-                <Button label="my button" onClick={toggle} />
+                <Button label="my button" onClick={() => toggle(popoverRef)} />
             </Popover>
         </div>
     );
@@ -34,15 +35,10 @@ const TemplateConfirmPopover = (args) => {
     const confirmCb = () => {
         // confirm action
     };
-    function toggleConfirm() {
-        if (popoverConfirmRef.current) {
-            popoverConfirmRef.current.toggle();
-        }
-    }
     return (
         <div style={{ paddingLeft: '50px' }}>
             <ConfirmationPopover ref={popoverConfirmRef} text={text} confirmCb={confirmCb}>
-                <Button label="my button" onClick={toggleConfirm} />
+                <Button label="my button" onClick={() => toggle(popoverConfirmRef)} />
             </ConfirmationPopover>
         </div>
     );
@@ -51,3 +47,16 @@ export const ConfirmationPopoverTemplate = TemplateConfirmPopover.bind({});
 ConfirmationPopoverTemplate.args = {
     text: 'Do you confirm?',
 };
+
+const TemplatePopoverNoClickOutside = () => {
+    const popoverRef = React.createRef();
+
+    return (
+        <div style={{ paddingLeft: '50px' }}>
+            <Popover ref={popoverRef} content="My popover, no click outside" disableClickOutside>
+                <Button label="my button 2" onClick={() => toggle(popoverRef)} />
+            </Popover>
+        </div>
+    );
+};
+export const TemplatePopoverClickOutsideDisabled = TemplatePopoverNoClickOutside.bind({});

package/src/icons/integrations.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M79.267 11.367H20.733a9.393 9.393 0 0 0-9.381 9.383v58.5a9.393 9.393 0 0 0 9.381 9.383h58.534a9.393 9.393 0 0 0 9.381-9.383v-58.5a9.393 9.393 0 0 0-9.381-9.383Zm-27.763 3h27.763a6.389 6.389 0 0 1 6.381 6.383v27.738H75.6a1.5 1.5 0 0 0-1.146.531 1.419 1.419 0 0 0-.105.14 1.5 1.5 0 0 0-.252.831 5.523 5.523 0 0 1-11.045 0 1.5 1.5 0 0 0-.252-.831 1.52 1.52 0 0 0-.375-.388 1.5 1.5 0 0 0-.877-.283H51.5V39.83a8.524 8.524 0 0 0 0-16.781Zm-30.771 0H48.5v10.047a1.5 1.5 0 0 0 .072.432 1.48 1.48 0 0 0 .274.511l.018.024.017.016a1.4 1.4 0 0 0 .095.109c.017.016.041.022.058.037a1.474 1.474 0 0 0 .382.243c.031.013.062.02.094.032a1.5 1.5 0 0 0 .482.092h.009a5.523 5.523 0 0 1 0 11.045h-.009a1.5 1.5 0 0 0-.481.092c-.033.012-.065.019-.1.033a1.481 1.481 0 0 0-.379.242c-.019.015-.043.022-.06.038a1.215 1.215 0 0 0-.095.109l-.016.015-.017.022a1.515 1.515 0 0 0-.276.514 1.5 1.5 0 0 0-.072.433v10.035h-8.682a8.524 8.524 0 0 0-16.781 0h-8.681V20.75a6.389 6.389 0 0 1 6.381-6.383ZM48.5 85.633H20.733a6.389 6.389 0 0 1-6.381-6.383V51.512H24.4a1.5 1.5 0 0 0 1.146-.531 1.419 1.419 0 0 0 .105-.14 1.5 1.5 0 0 0 .252-.831 5.523 5.523 0 0 1 11.045 0 1.5 1.5 0 0 0 .252.831 1.52 1.52 0 0 0 .375.388 1.5 1.5 0 0 0 .877.283H48.5v8.658a8.524 8.524 0 0 0 0 16.781Zm30.771 0H51.5V75.586a1.5 1.5 0 0 0-.072-.432 1.48 1.48 0 0 0-.274-.511l-.018-.024-.017-.016a1.4 1.4 0 0 0-.095-.109c-.017-.016-.041-.022-.058-.037a1.474 1.474 0 0 0-.382-.243c-.031-.013-.062-.02-.094-.032a1.5 1.5 0 0 0-.482-.092h-.009a5.523 5.523 0 0 1 0-11.045h.009a1.5 1.5 0 0 0 .481-.092c.033-.012.065-.019.1-.033a1.486 1.486 0 0 0 .38-.242c.018-.016.042-.022.059-.038a1.4 1.4 0 0 0 .095-.109l.016-.015.017-.022a1.515 1.515 0 0 0 .276-.514 1.5 1.5 0 0 0 .072-.433V51.512h8.682a8.524 8.524 0 0 0 16.781 0h8.681V79.25a6.389 6.389 0 0 1-6.381 6.383Z"/></svg>

package/src/icons/menu-circle-horizontal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.994 12.081A1.984 1.984 0 0 1 6.762 14.1c-1.2.425-2.718.208-3.156-1.033C3.18 11.86 3.4 10.344 4.638 9.9c1.2-.426 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.148Zm-1.6.958c.589-.208.558-1.137.35-1.728a.691.691 0 0 0-.589-.452 2.2 2.2 0 0 0-1.139.1c-.589.209-.559 1.137-.35 1.728s1.136.559 1.728.35Zm7.9-.958a1.986 1.986 0 0 1-1.232 2.019c-1.2.425-2.718.208-3.157-1.033-.426-1.2-.208-2.718 1.033-3.157 1.2-.425 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.138Zm-1.605.958c.588-.208.558-1.137.35-1.728s-1.136-.559-1.728-.35-.558 1.135-.35 1.728 1.136.559 1.728.35Zm7.905-.958a1.986 1.986 0 0 1-1.232 2.019c-1.2.426-2.718.208-3.157-1.033-.426-1.2-.208-2.718 1.033-3.157 1.2-.425 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.138Zm-3.47-.183a2.467 2.467 0 0 0 .137.791.692.692 0 0 0 .589.452 2.2 2.2 0 0 0 1.139-.1c.589-.208.557-1.137.35-1.728s-1.136-.559-1.728-.35a.9.9 0 0 0-.487.937Z"/></svg>

package/src/icons/{menu.svg → menu-circle-vertical.svg}

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.919 7.994A1.984 1.984 0 0 1 9.9 6.762c-.425-1.2-.208-2.718 1.033-3.156 1.2-.426 2.718-.209 3.157 1.032.426 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199zm-.958-1.6c.208.589 1.137.558 1.728.35a.691.691 0 0 0 .452-.589 2.2 2.2 0 0 0-.1-1.139c-.209-.589-1.137-.559-1.728-.35s-.559 1.136-.35 1.728zm.958 7.9A1.986 1.986 0 0 1 9.9 13.062c-.425-1.2-.208-2.718 1.033-3.157 1.2-.426 2.718-.208 3.157 1.033.425 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199zm-.958-1.605c.208.588 1.137.558 1.728.35s.559-1.136.35-1.728-1.135-.558-1.728-.35-.559 1.136-.35 1.728zm.958 7.905A1.986 1.986 0 0 1 9.9 19.362c-.426-1.2-.208-2.718 1.033-3.157 1.2-.426 2.718-.208 3.157 1.033.425 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199zm.183-3.47a2.467 2.467 0 0 0-.791.137.692.692 0 0 0-.452.589 2.2 2.2 0 0 0 .1 1.139c.208.589 1.137.557 1.728.35s.559-1.136.35-1.728a.9.9 0 0 0-.937-.487z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.919 7.994A1.984 1.984 0 0 1 9.9 6.762c-.425-1.2-.208-2.718 1.033-3.156 1.2-.426 2.718-.209 3.157 1.032.426 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199Zm-.958-1.6c.208.589 1.137.558 1.728.35a.691.691 0 0 0 .452-.589 2.2 2.2 0 0 0-.1-1.139c-.209-.589-1.137-.559-1.728-.35s-.559 1.136-.35 1.728Zm.958 7.9A1.986 1.986 0 0 1 9.9 13.062c-.425-1.2-.208-2.718 1.033-3.157 1.2-.426 2.718-.208 3.157 1.033.425 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199Zm-.958-1.605c.208.588 1.137.558 1.728.35s.559-1.136.35-1.728-1.135-.558-1.728-.35-.559 1.136-.35 1.728Zm.958 7.905A1.986 1.986 0 0 1 9.9 19.362c-.426-1.2-.208-2.718 1.033-3.157 1.2-.426 2.718-.208 3.157 1.033.425 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199Zm.183-3.47a2.467 2.467 0 0 0-.791.137.692.692 0 0 0-.452.589 2.2 2.2 0 0 0 .1 1.139c.208.589 1.137.557 1.728.35s.559-1.136.35-1.728a.9.9 0 0 0-.937-.487Z"/></svg>

package/src/icons/menu-horizontal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.994 12.081A1.984 1.984 0 0 1 6.762 14.1c-1.2.425-2.718.208-3.156-1.033C3.18 11.86 3.4 10.344 4.638 9.9c1.2-.426 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.148Zm6.3 0a1.986 1.986 0 0 1-1.232 2.019c-1.2.425-2.718.208-3.157-1.033-.426-1.2-.208-2.718 1.033-3.157 1.2-.425 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.138Zm6.3 0a1.986 1.986 0 0 1-1.232 2.019c-1.2.426-2.718.208-3.157-1.033-.426-1.2-.208-2.718 1.033-3.157 1.2-.425 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.138Z"/></svg>

package/src/icons/menu-vertical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.081 16.006a1.984 1.984 0 0 1 2.019 1.232c.425 1.2.208 2.718-1.033 3.156-1.2.426-2.718.209-3.157-1.032-.426-1.2-.208-2.718 1.033-3.157a3.467 3.467 0 0 1 1.138-.199Zm0-6.3a1.986 1.986 0 0 1 2.019 1.232c.425 1.2.208 2.718-1.033 3.157-1.2.426-2.718.208-3.157-1.033-.425-1.2-.208-2.718 1.033-3.157a3.467 3.467 0 0 1 1.138-.199Zm0-6.3A1.986 1.986 0 0 1 14.1 4.638c.426 1.2.208 2.718-1.033 3.157C11.86 8.221 10.344 8 9.9 6.762c-.425-1.2-.208-2.718 1.033-3.157a3.467 3.467 0 0 1 1.148-.199Z"/></svg>

package/src/styles/console/colors.styl

@@ -303,3 +303,40 @@ $merchant10 = rgba(120, 144, 156, .1)
 $trafficDark = rgba(2165, 46, 111, 1)// #D82E6F
 $traffic = rgba(255, 124, 129, 1) // #ff7c81
 $traffic10 = rgba(255, 124, 129, .1)
+
+
+// Products
+
+$stores = #388aff
+$stores10 = rgba($stores, .1)
+$storesDark = #0D63DD
+
+$localities = #009DFF
+$localities10 = rgba($localities, .1)
+$localitiesDark = #0085D8
+
+$geolocation = #506BDE
+$geolocation10 = rgba($geolocation, .1)
+$geolocationDark = #1F40CC
+
+$address = #4AC6F2
+$address10 = rgba($address, .1)
+$addressDark = #0D9ED1
+
+$distance = #FF8A65
+$distance10 = rgba($distance, .1)
+$distanceDark = #E06138
+
+$traffic = #FF6565
+$traffic10 = rgba($traffic, .1)
+$trafficDark = #E04B4B
+
+$map = #A1887F
+$map10 = rgba($map, .1)
+$mapDark = #906455
+
+$merchant = #08A278
+$merchant10 = rgba($merchant, .1)
+$merchantDark = #008863
+
+