@woosmap/ui 2.44.0 → 2.48.0

package/package.json

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

package/src/components/Button/Button.js

@@ -104,7 +104,7 @@ Button.propTypes = {
     ]),
     isLoading: PropTypes.bool,
     active: PropTypes.bool,
-    label: PropTypes.string,
+    label: PropTypes.oneOfType(PropTypes.string, PropTypes.node),
     icon: PropTypes.string,
     iconSize: PropTypes.number,
     className: PropTypes.string,

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;
@@ -273,6 +341,7 @@ class Dropdown extends Component {
             closeCb,
             disableCloseOutside,
             testId,
+            openOnMouseEnter,
             ...rest
         } = this.props;
         const { open } = this.state;
@@ -283,6 +352,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 +382,7 @@ Dropdown.defaultProps = {
     label: null,
     className: null,
     closeCb: null,
+    openOnMouseEnter: false,
     btnFace: 'link-flex',
     btnFaceIcon: 'caret-bottom',
     btnFaceIconSize: 24,
@@ -323,7 +395,8 @@ Dropdown.propTypes = {
     onDoubleClick: PropTypes.func,
     disabled: PropTypes.bool,
     disableCloseOutside: PropTypes.bool,
-    label: PropTypes.string,
+    openOnMouseEnter: PropTypes.bool,
+    label: PropTypes.oneOfType(PropTypes.string, PropTypes.node),
     testId: PropTypes.string,
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
@@ -336,6 +409,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" openOnMouseEnter>
+            <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/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/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%