@woosmap/ui 2.46.0 → 2.47.0

package/package.json

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

package/src/components/Dropdown/Dropdown.js

@@ -289,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;
@@ -329,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}
@@ -357,6 +381,7 @@ Dropdown.defaultProps = {
     label: null,
     className: null,
     closeCb: null,
+    openOnMouseEnter: false,
     btnFace: 'link-flex',
     btnFaceIcon: 'caret-bottom',
     btnFaceIconSize: 24,
@@ -369,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,

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();
+});