@woosmap/ui 3.119.0 → 3.122.0

package/package.json

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

package/src/components/DynamicTag/DynamicTag.js

@@ -5,14 +5,15 @@ import Input from '../Input/Input';
 import Button from '../Button/Button';
 import Label from '../Label/Label';
 import { tr } from '../utils/locale';
+import Select from '../Select/Select';
 
 export default class DynamicTag extends Component {
     constructor(props) {
         super(props);
-        const { defaultTags } = props;
+        const { defaultTags, isSelector } = props;
         this.state = {
             inputValue: '',
-            tags: defaultTags,
+            tags: isSelector ? defaultTags.map((tag) => tag.value) : defaultTags,
             error: null,
         };
     }
@@ -43,6 +44,10 @@ export default class DynamicTag extends Component {
         });
     }
 
+    handleChange = (tags) => {
+        this.setState({ tags: tags.map((tag) => tag.value) });
+    };
+
     getTags = () => {
         const { tags } = this.state;
         return tags;
@@ -50,9 +55,23 @@ export default class DynamicTag extends Component {
 
     renderInput = () => {
         const { inputValue, error } = this.state;
-        const { placeholder, testId } = this.props;
+        const { placeholder, testId, isSelector, label, options, defaultTags, color } = this.props;
 
-        return (
+        return isSelector ? (
+            <Select
+                aria-label={`${testId}-select`}
+                color={color}
+                label={label}
+                isMulti
+                isCreatable
+                options={options}
+                closeMenuOnSelect={false}
+                noOptionsMessage={() => tr('No options found')}
+                placeholder={placeholder}
+                defaultValue={defaultTags}
+                onChange={this.handleChange}
+            />
+        ) : (
             <>
                 <Input
                     placeholder={placeholder}
@@ -70,24 +89,26 @@ export default class DynamicTag extends Component {
 
     render() {
         const { tags } = this.state;
-        const { color, testId } = this.props;
+        const { color, testId, isSelector } = this.props;
         return (
             <div className={cl('dynamic-tag')} data-testid={testId}>
                 <div className={cl('dynamic-tag__input')}>{this.renderInput()}</div>
-                <div className={cl('dynamic-tag__tags')}>
-                    {tags.map((item) => (
-                        <Label
-                            color={color}
-                            key={`label_${item}`}
-                            closable
-                            label={item}
-                            closeCb={() => {
-                                this.handleTagRemove(item);
-                            }}
-                            testId={`${testId}-label`}
-                        />
-                    ))}
-                </div>
+                {!isSelector && (
+                    <div className={cl('dynamic-tag__tags')}>
+                        {tags.map((item) => (
+                            <Label
+                                color={color}
+                                key={`label_${item}`}
+                                closable
+                                label={item}
+                                closeCb={() => {
+                                    this.handleTagRemove(item);
+                                }}
+                                testId={`${testId}-label`}
+                            />
+                        ))}
+                    </div>
+                )}
             </div>
         );
     }
@@ -98,6 +119,7 @@ DynamicTag.defaultProps = {
     placeholder: '',
     color: '',
     testId: 'dynamic-tag',
+    isSelector: false,
 };
 
 DynamicTag.propTypes = {
@@ -105,4 +127,6 @@ DynamicTag.propTypes = {
     placeholder: PropTypes.string,
     color: PropTypes.string,
     testId: PropTypes.string,
+    isSelector: PropTypes.bool,
+    ...Select.propTypes,
 };

package/src/components/DynamicTag/DynamicTag.stories.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import DynamicTag from './DynamicTag';
+
+const Story = {
+    title: 'base/DynamicTag',
+    component: DynamicTag,
+};
+
+export default Story;
+
+const Template = (arg) => {
+    const { isSelector } = arg;
+    const options = [
+        { value: 'java', label: 'Java' },
+        { value: 'swift', label: 'Swift' },
+        { value: 'js', label: 'Js' },
+        {
+            value: 'python',
+            label: 'Python',
+        },
+    ];
+    return (
+        <div>
+            <DynamicTag
+                color="mauve"
+                defaultTags={
+                    isSelector
+                        ? [
+                              { label: 'Js', value: 'js' },
+                              {
+                                  label: 'Python',
+                                  value: 'python',
+                              },
+                          ]
+                        : ['js', 'python']
+                }
+                isSelector={isSelector}
+                isMulti
+                options={options}
+            />
+        </div>
+    );
+};
+export const Default = Template.bind({});
+Default.args = {
+    isSelector: false,
+};

package/src/components/DynamicTag/DynamicTag.test.js

@@ -1,11 +1,21 @@
 import React from 'react';
-import { render, screen, getByRole } from '@testing-library/react';
+import { render, screen, getByRole, fireEvent } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import '@testing-library/jest-dom/extend-expect';
 import userEvent from '@testing-library/user-event';
 
 import DynamicTag from './DynamicTag';
 
+const options = [
+    { value: 'java', label: 'java' },
+    { value: 'swift', label: 'swift' },
+    { value: 'js', label: 'js' },
+    {
+        value: 'python',
+        label: 'python',
+    },
+];
+
 it('renders a DynamicTag component with default tags', () => {
     const { container } = render(<DynamicTag defaultTags={['tag1', 'tag 2']} />);
     expect(container.firstChild).toHaveClass('dynamic-tag');
@@ -68,3 +78,37 @@ it('cant add the same value twice', () => {
     expect(screen.getByTestId('input-error')).toHaveTextContent('The value you’ve entered is already in the list');
     expect(ref.current.getTags()).toEqual(['mytag']);
 });
+
+it(
+    'should render DynamicTag with Select behavior and default tags and ' +
+        'should add a new option when enter a value not present in options',
+    () => {
+        const ref = React.createRef();
+        const { container } = render(
+            <DynamicTag
+                color="mauve"
+                defaultTags={[
+                    { label: 'js', value: 'js' },
+                    {
+                        label: 'python',
+                        value: 'python',
+                    },
+                ]}
+                isSelector
+                isMulti
+                options={options}
+                ref={ref}
+            />
+        );
+        const select = screen.getByLabelText('dynamic-tag-select');
+        expect(select).toBeInTheDocument();
+        expect(ref.current.getTags()).toEqual(['js', 'python']);
+        fireEvent.change(select, { target: { value: 'c' } });
+        fireEvent.keyDown(select, { key: 'Enter', code: 'Enter', charCode: 13 });
+        expect(ref.current.getTags()).toEqual(['js', 'python', 'c']);
+        fireEvent.click(select);
+        expect(screen.getByText('java')).toBeInTheDocument();
+        expect(screen.getByText('swift')).toBeInTheDocument();
+        expect(container.querySelectorAll('div.select__item--mauve')[0]).toBeInTheDocument();
+    }
+);

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, noHeader } = this.props;
         const tit = open && title;
         return ReactDOM.createPortal(
             <AnimatePresence>
@@ -122,19 +138,15 @@ 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">
+                                {!noHeader && (
+                                    <div className="modal__header">{header || <h1 className="title">{tit}</h1>}</div>
+                                )}
                                 <div className="modal__body">{children}</div>
                                 {this.renderFooter()}
                             </div>
@@ -164,6 +176,8 @@ Modal.defaultProps = {
     mainButtonType: 'primary',
     testId: 'modal',
     closesWithEscape: false,
+    displayCloseButtonOutside: false,
+    noHeader: false,
 };
 
 Modal.propTypes = {
@@ -184,6 +198,8 @@ Modal.propTypes = {
     mainButtonType: PropTypes.string,
     testId: PropTypes.string,
     closesWithEscape: PropTypes.bool,
+    displayCloseButtonOutside: PropTypes.bool,
+    noHeader: 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();
+});

package/src/components/Select/Select.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactSelect from 'react-select';
 import PropTypes from 'prop-types';
 import cl from 'classnames';
+import CreatableSelect from 'react-select/creatable';
 
 /**
  * https://react-select.com/styles#styles
@@ -9,9 +10,17 @@ import cl from 'classnames';
  */
 export default class Select extends Component {
     renderInput = (props) => {
-        const { error, ...rest } = props;
+        const { error, isCreatable, color, ...rest } = props;
 
-        return (
+        return isCreatable ? (
+            <CreatableSelect
+                className={cl('select__item', color ? `select__item--${color}` : null, {
+                    error,
+                })}
+                classNamePrefix="select"
+                {...rest}
+            />
+        ) : (
             <ReactSelect
                 className={cl('select__item', {
                     error,
@@ -56,6 +65,8 @@ Select.defaultProps = {
     icon: null,
     label: null,
     error: null,
+    isCreatable: false,
+    color: undefined,
 };
 Select.propTypes = {
     className: PropTypes.string,
@@ -64,4 +75,6 @@ Select.propTypes = {
     error: PropTypes.string,
     hideLabel: PropTypes.bool,
     icon: PropTypes.string,
+    isCreatable: PropTypes.bool,
+    color: PropTypes.oneOf(['bleu', 'mauve', 'green', 'grey', 'orange', 'red', 'white', undefined, '']),
 };

package/src/styles/console/select.styl

@@ -67,9 +67,20 @@ select
 			background-color $primary15 !important
 			color $secondary !important
 	&__multi-value
+		display flex
+		align-items center
 		background-color $primary !important
 		border-radius .4rem !important
-		flexMiddle()
+		.select__item--mauve &
+				background-color $labelMauve !important
+		.select__item--green &
+				background-color $labelGreen !important
+		.select__item--grey &
+				background-color $labelGrey !important
+		.select__item--orange &
+				background-color $labelOrange !important
+		.select__item--red &
+				background-color $labelRed !important
 		&--is-disabled
 			opacity .6
 		&__label

package/src/components/DynamicTag/DynalicTag.stories.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import DynamicTag from './DynamicTag';
-
-const Story = {
-    title: 'base/DynamicTag',
-    component: DynamicTag,
-};
-
-export default Story;
-
-const Template = () => (
-    <div>
-        <DynamicTag color="color1" defaultTags={['js', 'python']} />
-    </div>
-);
-export const Default = Template.bind({});
-Default.args = {};