@woosmap/ui 3.120.0 → 3.121.0

package/package.json

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

package/src/components/Modal/Modal.js

@@ -6,6 +6,7 @@ import Animate, { AnimatePresence } from '../Animate/Animate';
 import Button from '../Button/Button';
 import withClickOutside from '../withClickOutside/withClickOutside';
 import { tr } from '../utils/locale';
+import Icon from '../Icon/Icon';
 
 class Modal extends Component {
     constructor(props) {
@@ -13,6 +14,7 @@ class Modal extends Component {
         const { defaultIsOpen } = this.props;
         this.state = { open: defaultIsOpen, isLoading: false };
         this.modalRef = React.createRef();
+        this.clickOutsideRef = null;
     }
 
     componentDidMount() {
@@ -72,6 +74,11 @@ class Modal extends Component {
         }
     };
 
+    displayCloseButton = () => {
+        const { isFull, disableCloseOutside, displayCloseButtonOutside } = this.props;
+        return !isFull && !disableCloseOutside && displayCloseButtonOutside;
+    };
+
     renderFooter = () => {
         const { footer, labelValidate, errorLabel, validateCb, validateBtnProps, mainButtonType, testId } = this.props;
         const { isLoading } = this.state;
@@ -107,10 +114,19 @@ class Modal extends Component {
         return <div className="modal__footer">{footer}</div>;
     };
 
+    getRef = () => {
+        if (this.displayCloseButton()) {
+            this.clickOutsideRef = this.modalRef;
+        } else {
+            this.clickOutsideRef = null;
+        }
+        return this.modalRef;
+    };
+
     render() {
         const { open } = this.state;
 
-        const { title, children, className, isFull, header, disableCloseOutside, testId } = this.props;
+        const { title, children, className, isFull, header, testId } = this.props;
         const tit = open && title;
         return ReactDOM.createPortal(
             <AnimatePresence>
@@ -122,19 +138,13 @@ class Modal extends Component {
                         data-testid={testId}
                     >
                         <Animate className="modal__wrapper">
-                            <div ref={this.modalRef} className="modal__content">
-                                <div className="modal__header">
-                                    {header || <h1 className="title">{tit}</h1>}
-                                    {!disableCloseOutside && (
-                                        <Button
-                                            testId={`${testId}-close-button`}
-                                            className="modal__close"
-                                            icon="close"
-                                            type="link-flex"
-                                            onClick={this.close}
-                                        />
-                                    )}
+                            {this.displayCloseButton() && (
+                                <div className="modal__close--outside">
+                                    <Icon size={30} icon="close" />
                                 </div>
+                            )}
+                            <div ref={this.getRef()} className="modal__content">
+                                <div className="modal__header">{header || <h1 className="title">{tit}</h1>}</div>
                                 <div className="modal__body">{children}</div>
                                 {this.renderFooter()}
                             </div>
@@ -164,6 +174,7 @@ Modal.defaultProps = {
     mainButtonType: 'primary',
     testId: 'modal',
     closesWithEscape: false,
+    displayCloseButtonOutside: false,
 };
 
 Modal.propTypes = {
@@ -184,6 +195,7 @@ Modal.propTypes = {
     mainButtonType: PropTypes.string,
     testId: PropTypes.string,
     closesWithEscape: PropTypes.bool,
+    displayCloseButtonOutside: PropTypes.bool,
 };
 
 export default withClickOutside(Modal, '.ignore-click-outside-modal');

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

@@ -12,11 +12,13 @@ export default Story;
 
 const Template = () => {
     const modalRef = React.createRef();
+
     function open() {
         if (modalRef.current) {
             modalRef.current.open();
         }
     }
+
     function validate() {
         if (modalRef.current) {
             setTimeout(() => {
@@ -24,6 +26,7 @@ const Template = () => {
             }, 2000);
         }
     }
+
     return (
         <div style={{ paddingLeft: '50px' }}>
             <Button onClick={open} label="Open modal" />
@@ -84,9 +87,25 @@ const TemplateEscapeModal = () => {
     return (
         <div style={{ paddingLeft: '50px' }}>
             <Button onClick={() => modalRef.current.open()} label="Open modal" />
-            <Modal ref={modalRef} closesWithEscape title="My modal" />
+            <Modal ref={modalRef} closesWithEscape title="My modal">
+                content
+            </Modal>
         </div>
     );
 };
 export const ModalEscape = TemplateEscapeModal.bind({});
 Default.args = {};
+
+const TemplateClickOutsideModal = () => {
+    const modalRef = React.createRef();
+    return (
+        <div style={{ paddingLeft: '50px' }}>
+            <Button onClick={() => modalRef.current.open()} label="Open modal" />
+            <Modal ref={modalRef} displayCloseButtonOutside title="My modal">
+                content
+            </Modal>
+        </div>
+    );
+};
+export const ModalClickOutside = TemplateClickOutsideModal.bind({});
+Default.args = {};

package/src/components/Modal/Modal.styl

@@ -37,6 +37,14 @@
 		overflow-y auto
 		.modal--full &
 			padding 0
+	&__close
+		&--outside
+			position fixed
+			top 2rem
+			right 2rem
+			cursor pointer
+			.icon
+				fill $light
 	&__footer
 	&__header
 		padding 1.8rem 2.4rem

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

@@ -17,25 +17,6 @@ it('renders a Modal component ', () => {
     expect(modal).toHaveClass('modal');
 });
 
-it('is hidden after clicking close', () => {
-    const modalRef = React.createRef();
-    render(<Modal ref={modalRef}>content</Modal>);
-    act(() => {
-        modalRef.current.open();
-    });
-    const modal = screen.getByTestId('modal');
-    expect(modal).toHaveClass('modal');
-
-    const close = screen.getByTestId('modal-close-button');
-    userEvent.click(close);
-    try {
-        screen.getByTestId('modal');
-        expect('Modal displayed').toBeFalsy();
-    } catch (e) {
-        // nothink
-    }
-});
-
 it('is hidden after clicking cancel', () => {
     const modalRef = React.createRef();
     render(
@@ -88,3 +69,22 @@ it('is closing after escaping if it is set to be closed with it', () => {
     fireEvent.keyDown(document, { keyCode: 27 });
     expect(closeCb).toHaveBeenCalled();
 });
+
+it('is closing after click outside if it is set to bet closed with it', () => {
+    const modalRef = React.createRef();
+    const closeCb = jest.fn();
+    render(
+        <Modal ref={modalRef} displayCloseButtonOutside closeCb={closeCb}>
+            content
+        </Modal>
+    );
+    act(() => {
+        modalRef.current.open();
+    });
+    expect(closeCb).not.toHaveBeenCalled();
+    fireEvent.mouseDown(screen.getByText('content'));
+    fireEvent.mouseDown(screen.getByText('Validate'));
+    expect(closeCb).not.toHaveBeenCalled();
+    fireEvent.mouseDown(screen.queryByTestId('icon-close'));
+    expect(closeCb).toHaveBeenCalled();
+});