@woosmap/ui 2.45.0 → 2.49.0

package/package.json

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

package/src/components/Button/Button.js

@@ -25,12 +25,14 @@ export default class Button extends Component {
             active,
             children,
             testId,
+            iconRight,
             ...rest
         } = this.props;
         const classes = cl(
             'btn',
             { 'btn--has-icon': icon || isLoading },
             { 'btn--icon': isBtnIcon || (icon && !label) },
+            { 'btn--icon-right': iconRight },
             size ? `btn--${size}` : null,
             type ? `btn--${type}` : null,
             { active },
@@ -54,8 +56,9 @@ export default class Button extends Component {
                 className={classes}
                 data-testid={testId}
             >
-                {iconComponent}
+                {!iconRight ? iconComponent : null}
                 {label && <span className="btn__label">{isLoading ? tr('Loading...') : label}</span>}
+                {iconRight ? iconComponent : null}
                 {children}
             </button>
         );
@@ -76,6 +79,7 @@ Button.defaultProps = {
     isLoading: false,
     active: false,
     onClick: null,
+    iconRight: false,
 };
 
 Button.propTypes = {
@@ -104,10 +108,11 @@ 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,
     onClick: PropTypes.func,
     children: PropTypes.node,
+    iconRight: PropTypes.bool,
 };

package/src/components/Button/Button.stories.js

@@ -23,7 +23,7 @@ const Template = (args) => {
             <div className="flex mbi">
                 <Button icon="add" />
                 <Button label={label} />
-                <Button label={label} icon="marker" />
+                <Button label={label} icon="marker" iconRight />
                 <Button label={label} isLoading />
                 <Button label={label} disabled />
             </div>
@@ -82,7 +82,7 @@ const Template = (args) => {
                 </span>
                 <span>
                     There is a labeled and iconed button link here : &nbsp;
-                    <Button label={label} icon="marker" type="link" />
+                    <Button label={label} icon="marker" iconRight type="link" />
                 </span>
                 <span>
                     There is a iconed button link here : &nbsp; <Button label={label} icon="clock" type="link" />

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

@@ -16,6 +16,7 @@ import { ReactComponent as ArrowBotton } from '../../icons/arrow-bottom.svg';
 import { ReactComponent as ArrowLeft } from '../../icons/arrow-left.svg';
 import { ReactComponent as ArrowRight } from '../../icons/arrow-right.svg';
 import { ReactComponent as ArrowTop } from '../../icons/arrow-top.svg';
+import { ReactComponent as ArrowLink } from '../../icons/arrow-link.svg';
 import { ReactComponent as Asset } from '../../icons/asset.svg';
 import { ReactComponent as AssetAddFile } from '../../icons/asset-add-file.svg';
 import { ReactComponent as AssetAdd } from '../../icons/asset-add.svg';
@@ -134,6 +135,7 @@ const Icons = {
     'arrow-left': ArrowLeft,
     'arrow-right': ArrowRight,
     'arrow-top': ArrowTop,
+    'arrow-link': ArrowLink,
     asset: Asset,
     'asset-add-file': AssetAddFile,
     'asset-add': AssetAdd,

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/arrow-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20.217 11.6-4.708-4.7a.56.56 0 1 0-.792.792l3.753 3.748H4.179a.56.56 0 1 0 0 1.12H18.47l-3.753 3.752a.56.56 0 0 0 .792.792l4.708-4.704a.559.559 0 0 0 0-.8Z"/></svg>

package/src/styles/console/button.styl

@@ -256,8 +256,12 @@
 			padding 0
 			text-decoration none
 		&.btn--has-icon
-			.icon
-				margin-right .3rem
+			&:not(.btn--icon-right)
+				.icon
+					margin-right .3rem
+			&.btn--icon-right
+				.icon
+					margin-left .3rem
 	&--link
 	&--link-primary
 	&--link-info
@@ -265,15 +269,28 @@
 			trans()
 			position relative
 			top .7rem
-			left -.3rem
-		&.btn--small
+		&:not(.btn--icon-right)
 			.icon
-				top .5rem
 				left -.3rem
-		&.btn--large
+			&.btn--small
+				.icon
+					top .5rem
+					left -.3rem
+			&.btn--large
+				.icon
+					top 1.2rem
+					left -.3rem
+		&.btn--icon-right
 			.icon
-				top 1.2rem
-				left -.3rem
+				right -.3rem
+			&.btn--small
+				.icon
+					top .5rem
+					rigth -.3rem
+			&.btn--large
+				.icon
+					top 1.2rem
+					rigth -.3rem
 	&--link-flex
 	&--link-flex-info
 		display flex
@@ -340,8 +357,11 @@
 			trans()
 
 	&--has-icon
-		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link)
+		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link):not(.btn--icon-right)
 			padding 0 $padding 0 $padding - .6
+		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link)
+			&.btn--icon-right
+				padding 0 $padding - .6 0 $padding
 	&--loading
 		&:not(.btn--icon):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--sidebar-link)
 			padding-left $padding - .4