@woosmap/ui 3.119.0 → 3.120.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.119.0",
+  "version": "3.120.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/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 = {};