@woosmap/ui 2.43.0 → 2.47.0

package/package.json

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

package/src/components/Demo/DistanceDemo.js

@@ -16,6 +16,7 @@ import WalkingImg from '../../images/walk.png';
 import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
 import Script from '../utils/Script';
+import { createWoosmapMap } from '../Map/drawOnMap';
 
 const languages = [
     { value: 'fr', label: 'French' },
@@ -209,7 +210,7 @@ export default class DistanceDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestDistance();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/GeolocationDemo.js

@@ -6,12 +6,12 @@ import Demo from './SkeletonDemo';
 
 import Constants from '../../Constants';
 import { tr } from '../utils/locale';
-import markerIcon from '../../images/marker.png';
-import markerIconAlt from '../../images/marker-alt.png';
+import markerIcon from '../../images/marker-dot.svg';
+import markerGeolocationIcon from '../../images/marker-alt.png';
 import Script from '../utils/Script';
 import Input from '../Input/Input';
 
-import { WoosmapMapBoundingBox, woosmapBoundsFromViewport } from '../Map/drawOnMap';
+import { WoosmapMapBoundingBox, woosmapBoundsFromViewport, createWoosmapMap } from '../Map/drawOnMap';
 
 export default class GeolocationDemo extends Component {
     constructor(props) {
@@ -56,20 +56,17 @@ export default class GeolocationDemo extends Component {
     getRequestparams = () => ({
         key: Constants.geolocationWoosmapSearchKey,
         radius: 200000,
+        limit: 20,
     });
 
-    processMarker = (latLng, icon, forceMap = null) => {
+    processMarker = (latLng, icon, forceMap = null, scaledSize = { height: 24, width: 24 }) => {
         const { showStores } = this.state;
 
         let map;
         if (!forceMap) map = showStores ? this.map : null;
         else map = forceMap;
 
-        return new window.woosmap.map.Marker({
-            icon: { url: icon, scaledSize: { height: 46, width: 30 } },
-            position: latLng,
-            map,
-        });
+        return new window.woosmap.map.Marker({ icon: { url: icon, scaledSize }, position: latLng, map });
     };
 
     displayOnMap = () => {
@@ -93,8 +90,6 @@ export default class GeolocationDemo extends Component {
                 this.overlay = null;
             }
 
-            this.marker = this.processMarker(location, markerIconAlt, this.map);
-
             if (geolocation?.stores?.features) {
                 geolocation.stores.features.forEach((feature) => {
                     const [lng, lat] = feature.geometry.coordinates;
@@ -102,6 +97,8 @@ export default class GeolocationDemo extends Component {
                 });
             }
 
+            this.marker = this.processMarker(location, markerGeolocationIcon, this.map, { height: 46, width: 30 });
+
             const bounds = woosmapBoundsFromViewport(geolocation.viewport);
 
             this.overlay = new WoosmapMapBoundingBox(bounds, { top: 55, left: 30, bottom: 10, right: 30 });
@@ -182,7 +179,7 @@ export default class GeolocationDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestGeolocation();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -10,6 +10,7 @@ import { tr } from '../utils/locale';
 import Input from '../Input/Input';
 import markerIcon from '../../images/marker.png';
 import Script from '../utils/Script';
+import { createWoosmapMap } from '../Map/drawOnMap';
 
 export default class LocalitiesAddressDemo extends Component {
     constructor(props) {
@@ -326,7 +327,7 @@ export default class LocalitiesAddressDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestAddress();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/LocalitiesDemo.js

@@ -13,7 +13,7 @@ import Constants from '../../Constants';
 import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
 import Script from '../utils/Script';
-import { WoosmapMapBoundingBox } from '../Map/drawOnMap';
+import { WoosmapMapBoundingBox, createWoosmapMap } from '../Map/drawOnMap';
 
 const languages = [
     { value: 'fr', label: 'French' },
@@ -195,7 +195,7 @@ export default class LocalitiesDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestLocalities();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/SearchDemo.js

@@ -11,6 +11,7 @@ import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
 import markerIconAlt from '../../images/marker-alt.png';
 import Script from '../utils/Script';
+import { createWoosmapMap } from '../Map/drawOnMap';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
 export default class SearchDemo extends Component {
@@ -189,7 +190,7 @@ export default class SearchDemo extends Component {
         if (this.timeoutMap) clearTimeout(this.timeoutMap);
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestSearch();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Dropdown/Dropdown.js

@@ -45,9 +45,20 @@ class DropdownMenu extends Component {
     };
 
     render() {
-        const { direction, children, closeCb, testId, ...rest } = this.props;
+        const { direction, children, closeCb, testId, isSection, ...rest } = this.props;
         const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
-
+        if (isSection) {
+            return (
+                <div
+                    role="menu"
+                    className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
+                    data-testid={testId}
+                    {...rest}
+                >
+                    {childrenWithProps}
+                </div>
+            );
+        }
         return (
             <ul role="menu" className={cl('dropdown__menu', direction)} data-testid={testId} {...rest}>
                 {childrenWithProps}
@@ -60,15 +71,50 @@ DropdownMenu.defaultProps = {
     direction: 'sw',
     closeCb: null,
     testId: 'dropdown-menu',
+    isSection: false,
 };
 
 DropdownMenu.propTypes = {
     children: PropTypes.node.isRequired,
     closeCb: PropTypes.func,
     testId: PropTypes.string,
+    isSection: PropTypes.bool,
     direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
 };
 
+class DropdownMenuSection extends Component {
+    constructor(props) {
+        super(props);
+        this.childrenRefs = {};
+    }
+
+    close = () => {
+        closeChildren(this.childrenRefs);
+    };
+
+    render() {
+        const { title, children, closeCb, ...rest } = this.props;
+        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
+        return (
+            <div className="dropdown__menu__section">
+                {title && <div className="dropdown__menu__section__title">{title}</div>}
+                <ul {...rest}>{childrenWithProps}</ul>
+            </div>
+        );
+    }
+}
+
+DropdownMenuSection.defaultProps = {
+    title: null,
+    closeCb: null,
+};
+
+DropdownMenuSection.propTypes = {
+    children: PropTypes.node.isRequired,
+    title: PropTypes.string,
+    closeCb: PropTypes.func,
+};
+
 class DropdownSeparator extends Component {
     render() {
         const { testId } = this.props;
@@ -243,6 +289,28 @@ class Dropdown extends Component {
         this.setOpen(false);
     };
 
+    onMouseEnter = () => {
+        const { openOnMouseEnter } = this.props;
+        if (openOnMouseEnter) {
+            if (this.mouseLeaveTimeout) {
+                clearTimeout(this.mouseLeaveTimeout);
+            }
+            this.setOpen(true);
+        }
+    };
+
+    onMouseLeave = () => {
+        const { openOnMouseEnter } = this.props;
+        if (openOnMouseEnter) {
+            if (this.mouseLeaveTimeout) {
+                clearTimeout(this.mouseLeaveTimeout);
+            }
+            this.mouseLeaveTimeout = setTimeout(() => {
+                this.setOpen(false);
+            }, 500);
+        }
+    };
+
     onClick = (e) => {
         const { onClick } = this.props;
         const { open } = this.state;
@@ -283,6 +351,8 @@ class Dropdown extends Component {
                 ref={this.clickOutsideRef}
                 className={cl('dropdown', { open }, `dropdown--${size}`, className)}
                 {...rest}
+                onMouseEnter={this.onMouseEnter}
+                onMouseLeave={this.onMouseLeave}
             >
                 <Button
                     disabled={disabled}
@@ -311,6 +381,7 @@ Dropdown.defaultProps = {
     label: null,
     className: null,
     closeCb: null,
+    openOnMouseEnter: false,
     btnFace: 'link-flex',
     btnFaceIcon: 'caret-bottom',
     btnFaceIconSize: 24,
@@ -323,6 +394,7 @@ Dropdown.propTypes = {
     onDoubleClick: PropTypes.func,
     disabled: PropTypes.bool,
     disableCloseOutside: PropTypes.bool,
+    openOnMouseEnter: PropTypes.bool,
     label: PropTypes.string,
     testId: PropTypes.string,
     children: PropTypes.node.isRequired,
@@ -336,6 +408,7 @@ Dropdown.propTypes = {
 
 export default Object.assign(withClickOutside(Dropdown, '.popover__content'), {
     Menu: DropdownMenu,
+    MenuSection: DropdownMenuSection,
     Item: DropdownItem,
     ButtonItem: DropdownButtonItem,
     ConfirmButtonItem: DropdownConfirmButtonItem,

package/src/components/Dropdown/Dropdown.stories.js

@@ -52,3 +52,32 @@ const Template = () => (
 );
 export const Default = Template.bind({});
 Default.args = {};
+
+const MultiMenuTemplate = () => (
+    <div className="mbi" id="menuid">
+        <Dropdown btnFace="link" btnFaceIcon="clock" label="My dropdown">
+            <Dropdown.Menu isSection direction="se">
+                <Dropdown.MenuSection title="Section title">
+                    <Dropdown.ButtonItem btnIcon="delete" isImportant btnLabel="Delete" />
+                    <Dropdown.ConfirmButtonItem
+                        btnIcon="delete"
+                        isImportant
+                        btnLabel="Delete confirm"
+                        onConfirm={() => null}
+                    />
+                </Dropdown.MenuSection>
+                <Dropdown.MenuSection title="Section title 2">
+                    <Dropdown.ButtonItem btnIcon="delete" isImportant btnLabel="Delete" />
+                    <Dropdown.ConfirmButtonItem
+                        btnIcon="delete"
+                        isImportant
+                        btnLabel="Delete confirm"
+                        onConfirm={() => null}
+                    />
+                </Dropdown.MenuSection>
+            </Dropdown.Menu>
+        </Dropdown>
+    </div>
+);
+export const MultiMenuTemplateDropdown = MultiMenuTemplate.bind({});
+MultiMenuTemplateDropdown.args = {};

package/src/components/Dropdown/Dropdown.styl

@@ -50,9 +50,12 @@
 			right 0
 			left auto
 
+
 	&.open
 		.dropdown__menu
 			display block
+			&--section
+				display flex
 
 	&__item
 		flexMiddle()

package/src/components/Icon/Icon.js

@@ -114,6 +114,9 @@ import { ReactComponent as Localities } from '../../icons/localities.svg';
 import { ReactComponent as Map } from '../../icons/map.svg';
 import { ReactComponent as Merchant } from '../../icons/merchant.svg';
 import { ReactComponent as Traffic } from '../../icons/traffic.svg';
+import { ReactComponent as SocialFacebook } from '../../icons/social-facebook.svg';
+import { ReactComponent as SocialLinkedin } from '../../icons/social-linkedin.svg';
+import { ReactComponent as SocialTwitter } from '../../icons/social-twitter.svg';
 
 const Icons = {
     access: Access,
@@ -229,6 +232,9 @@ const Icons = {
     maps: Map,
     merchant: Merchant,
     traffic: Traffic,
+    'social-facebook': SocialFacebook,
+    'social-linkedin': SocialLinkedin,
+    'social-twitter': SocialTwitter,
 };
 
 class Icon extends Component {

package/src/components/Map/drawOnMap.js

@@ -84,6 +84,46 @@ export const woosmapBoundsFromViewport = function woosmapBoundsFromViewport(view
     );
 };
 
+export const createWoosmapMap = (node) =>
+    new window.woosmap.map.Map(node, {
+        styles: [
+            {
+                featureType: 'administrative',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 20 }],
+            },
+            {
+                featureType: 'road',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 40 }],
+            },
+            {
+                featureType: 'water',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -10 }, { lightness: 30 }],
+            },
+            {
+                featureType: 'landscape.man_made',
+                elementType: 'all',
+                stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 10 }],
+            },
+            {
+                featureType: 'landscape.natural',
+                elementType: 'all',
+                stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 60 }],
+            },
+            {
+                featureType: 'poi',
+                elementType: 'all',
+                stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
+            },
+            {
+                featureType: 'transit',
+                elementType: 'all',
+                stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
+            },
+        ],
+    });
 export class WoosmapMapBoundingBox {
     constructor(bounds, padding) {
         this.overlayView = new window.woosmap.map.OverlayView();

package/src/components/Modal/Modal.js

@@ -15,6 +15,10 @@ class Modal extends Component {
         this.modalRef = React.createRef();
     }
 
+    componentDidMount() {
+        this.handleEscFunction('add');
+    }
+
     componentDidUpdate() {
         const { isLoading } = this.state;
         const { hasErrors } = this.props;
@@ -23,6 +27,10 @@ class Modal extends Component {
         }
     }
 
+    componentWillUnmount() {
+        this.handleEscFunction();
+    }
+
     handleClickOutside = () => {
         this.close();
     };
@@ -31,6 +39,20 @@ class Modal extends Component {
         this.setState({ isLoading: loading });
     }
 
+    handleEscFunction = (key) => {
+        const { closesWithEscape } = this.props;
+        if (closesWithEscape) {
+            if (key === 'add') document.addEventListener('keydown', this.escFunction, false);
+            else document.removeEventListener('keydown', this.escFunction, false);
+        }
+    };
+
+    escFunction = (event) => {
+        if (event.keyCode === 27) {
+            this.close();
+        }
+    };
+
     open = () => {
         this.setState({ open: true });
     };
@@ -141,6 +163,7 @@ Modal.defaultProps = {
     validateBtnProps: {},
     mainButtonType: 'primary',
     testId: 'modal',
+    closesWithEscape: false,
 };
 
 Modal.propTypes = {
@@ -160,6 +183,7 @@ Modal.propTypes = {
     validateBtnProps: PropTypes.object,
     mainButtonType: PropTypes.string,
     testId: PropTypes.string,
+    closesWithEscape: PropTypes.bool,
 };
 
 export default withClickOutside(Modal, '.ignore-click-outside-modal');

package/src/components/Modal/Modal.stories.js

@@ -78,3 +78,15 @@ const TemplateConfirmationModal = () => {
 };
 export const ModalConfirmation = TemplateConfirmationModal.bind({});
 Default.args = {};
+
+const TemplateEscapeModal = () => {
+    const modalRef = React.createRef();
+    return (
+        <div style={{ paddingLeft: '50px' }}>
+            <Button onClick={() => modalRef.current.open()} label="Open modal" />
+            <Modal ref={modalRef} closesWithEscape title="My modal" />
+        </div>
+    );
+};
+export const ModalEscape = TemplateEscapeModal.bind({});
+Default.args = {};

package/src/components/Modal/Modal.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { act } from 'react-dom/test-utils';
 import userEvent from '@testing-library/user-event';
@@ -56,7 +56,7 @@ it('is hidden after clicking cancel', () => {
     }
 });
 
-it('is hidden after clicking cancel', () => {
+it('is hidden after clicking validate', () => {
     const modalRef = React.createRef();
     const validateCb = jest.fn();
     render(
@@ -72,3 +72,19 @@ it('is hidden after clicking cancel', () => {
     userEvent.click(validate);
     expect(validateCb.mock.calls.length).toBe(1);
 });
+
+it('is closing after escaping if it is set to be closed with it', () => {
+    const modalRef = React.createRef();
+    const closeCb = jest.fn();
+    render(
+        <Modal ref={modalRef} closesWithEscape closeCb={closeCb}>
+            content
+        </Modal>
+    );
+    act(() => {
+        modalRef.current.open();
+    });
+    expect(closeCb).not.toHaveBeenCalled();
+    fireEvent.keyDown(document, { keyCode: 27 });
+    expect(closeCb).toHaveBeenCalled();
+});

package/src/icons/social-facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.426 1.66H4.661a3 3 0 0 0-3 3v14.766a3 3 0 0 0 3 3H12.7v-8.095H10v-3.1h2.7V8.93a3.76 3.76 0 0 1 3.37-4.113 3.823 3.823 0 0 1 .642-.009 18.532 18.532 0 0 1 2.413.124v2.779H17.46c-1.3 0-1.53.607-1.53 1.516v2h3.075l-.4 3.1h-2.676v8.1h3.5a3 3 0 0 0 3-3V4.66a3 3 0 0 0-3.003-3Z" fill-rule="evenodd"/></svg>

package/src/icons/social-linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.426 1.66H4.661a3 3 0 0 0-3 3v14.766a3 3 0 0 0 3 3h14.765a3 3 0 0 0 3-3V4.66a3 3 0 0 0-3-3ZM7.8 19.281H4.721V9.409H7.8ZM6.26 8.072h-.012a1.778 1.778 0 0 1-1.761-1.793v-.006a1.786 1.786 0 1 1 1.772 1.8Zm9.961 11.21v-4.8c0-1.144-.028-2.62-1.6-2.62-1.6 0-1.834 1.255-1.834 2.537v4.88H9.726v-9.87h2.935v1.349h.032a3.225 3.225 0 0 1 2.9-1.586c3.115 0 3.68 2.04 3.68 4.7l.007 5.41Z" fill-rule="evenodd"/></svg>

package/src/icons/social-twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.066 5.136a8.972 8.972 0 0 1-2.61.715 4.552 4.552 0 0 0 2-2.511 9.083 9.083 0 0 1-2.884 1.1 4.545 4.545 0 0 0-7.741 4.142 12.9 12.9 0 0 1-9.357-4.744A4.544 4.544 0 0 0 3.879 9.9a4.542 4.542 0 0 1-2.058-.567v.057a4.542 4.542 0 0 0 3.642 4.453 4.519 4.519 0 0 1-1.2.159 4.441 4.441 0 0 1-.853-.08 4.549 4.549 0 0 0 4.241 3.153 9.112 9.112 0 0 1-5.639 1.944 9.559 9.559 0 0 1-1.082-.062A12.88 12.88 0 0 0 7.892 21 12.832 12.832 0 0 0 20.814 8.254v-.179c0-.2 0-.393-.014-.588a9.2 9.2 0 0 0 2.267-2.348Z"/></svg>

package/src/images/marker-dot.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.64 32.64" width="32.64" height="32.64">
+<defs>
+	<filter id="dropshadow" height="130%">
+		<feGaussianBlur in="SourceAlpha" stdDeviation="1.6"/>
+		<feOffset dx="0" dy="1" result="offsetblur"/>
+		<feComponentTransfer>
+			<feFuncA type="linear" slope="0.4"/>
+		</feComponentTransfer>
+		<feMerge>
+			<feMergeNode/>
+			<feMergeNode in="SourceGraphic"/>
+		</feMerge>
+	</filter>
+</defs>
+<path d="M16.15,27.67a12.486,12.486,0,0,1-8.857-3.663,12.637,12.637,0,0,1,.1-17.714A12.49,12.49,0,1,1,16.15,27.67Z" fill="#fff" filter="url(#dropshadow)" /><path d="M23.593,7.707a10.468,10.468,0,0,0-14.786,0A10.629,10.629,0,0,0,8.715,22.6,10.526,10.526,0,0,0,23.593,7.707Z" fill="#5587fd"/><path d="M16.3,7.9A5.335,5.335,0,0,0,11,13.2c0,3.8,4.8,5.8,4.8,9.4,0,.3.2.4.5.4a.458.458,0,0,0,.5-.4c0-3.5,4.8-5.5,4.8-9.4A5.271,5.271,0,0,0,16.3,7.9Z" fill="#fff"/><circle cx="16.3" cy="13.4" r="2.1" fill="#5587fd"/><rect width="32.6" height="32.6" fill="none"/></svg>

package/src/styles/commons/base.styl

@@ -1,10 +1,10 @@
 html
-	font-size: 62.5%
-	width: 100%
-	height: 100%
-	-moz-text-size-adjust: 100%
-	-webkit-text-size-adjust: 100%
-	-ms-text-size-adjust: 100%
+	font-size 62.5%
+	width 100%
+	height 100%
+	-moz-text-size-adjust 100%
+	-webkit-text-size-adjust 100%
+	-ms-text-size-adjust 100%
 
 body
 	width 100%