@woosmap/ui 4.107.3 → 4.109.0

package/package.json

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

package/src/components/Demo/W3WDemo.js

@@ -80,7 +80,7 @@ export default class W3WDemo extends Component {
         const { input } = this.state;
         axios
             .get(`${this.baseRequestUrl}autosuggest`, {
-                params: this.getRequestparams({ input }),
+                params: this.getRequestparams({ input, 'clip-to-country': 'GB,FR' }),
             })
             .then((response) => {
                 if (this.mounted) {

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

@@ -52,8 +52,8 @@ it('add a tag by clicking the OK btn', () => {
 
 it('cant add the same value twice', () => {
     const ref = React.createRef();
-    render(<DynamicTag ref={ref} placeholder="tags" />);
-    const input = screen.getByPlaceholderText('tags');
+    render(<DynamicTag ref={ref} placeholder="tags" testId="dt" />);
+    const input = screen.getByTestId('dt-input');
     expect(input).toBeTruthy();
 
     fireEvent.change(input, { target: { value: 'mytag' } });
@@ -61,13 +61,16 @@ it('cant add the same value twice', () => {
     expect(input).toHaveValue('mytag');
 
     expect(ref.current.getTags()).toEqual([]);
-    const ok = screen.getByRole('button');
+    const ok = screen.getByTestId('dt-button');
     act(() => {
         fireEvent.click(ok);
     });
     expect(ref.current.getTags()).toEqual(['mytag']);
 
-    fireEvent.change(input, { target: { value: 'mytag' } });
+    act(() => {
+        fireEvent.change(input, { target: { value: 'mytag' } });
+    });
+
     expect(input).toHaveValue('mytag');
 
     act(() => {

package/src/components/Input/Input.js

@@ -9,7 +9,7 @@ export default class Input extends Component {
         super(props);
         this.inputId = uniqueId();
         this.inputRef = React.createRef();
-        this.state = { showPassword: false };
+        this.state = { showPassword: false, value: null };
     }
 
     componentDidMount() {
@@ -27,6 +27,30 @@ export default class Input extends Component {
         }
     };
 
+    increment = () => {
+        const { onChange, value: oldValue, name, step, max } = this.props;
+        const { value: stateValue } = this.state;
+        const theValue = oldValue || stateValue;
+        const newValue = !isNaN(theValue) ? theValue + step : step;
+        if (onChange) {
+            onChange({ target: { name, value: max ? Math.min(max, newValue) : newValue } });
+        } else {
+            this.setState({ value: newValue });
+        }
+    };
+
+    decrement = () => {
+        const { onChange, value: oldValue, name, step, min } = this.props;
+        const { value: stateValue } = this.state;
+        const theValue = oldValue || stateValue;
+        const newValue = !isNaN(theValue) ? theValue - step : 0;
+        if (onChange) {
+            onChange({ target: { name, value: min ? Math.max(min, newValue) : newValue } });
+        } else {
+            this.setState({ value: newValue });
+        }
+    };
+
     renderInput = () => {
         const {
             type,
@@ -45,9 +69,10 @@ export default class Input extends Component {
             icon,
             isInputIconFill,
             enableTogglePassword,
+            testId,
         } = this.props;
 
-        const { showPassword } = this.state;
+        const { showPassword, value: stateValue } = this.state;
 
         let iconSize = size;
 
@@ -73,7 +98,7 @@ export default class Input extends Component {
                     }),
                     id: this.inputId,
                     ref: this.inputRef,
-                    'data-testid': 'input',
+                    'data-testid': testId,
                     name,
                     checked,
                     autoComplete: autocomplete ? '' : 'off',
@@ -82,11 +107,21 @@ export default class Input extends Component {
                     onFocus,
                     onKeyDown: this.onKeyDown,
                     type: type === 'password' && showPassword ? 'text' : type,
-                    value,
+                    value: value !== undefined ? value : stateValue,
                     size: length,
                     disabled,
                     onChange,
                 })}
+                {type === 'number' && (
+                    <div>
+                        <button onClick={this.increment} type="button" disabled={disabled}>
+                            +
+                        </button>
+                        <button onClick={this.decrement} type="button" disabled={disabled}>
+                            -
+                        </button>
+                    </div>
+                )}
                 {type === 'password' && enableTogglePassword && (
                     <span
                         onKeyDown={() => ({})}
@@ -182,6 +217,10 @@ Input.propTypes = {
     onPressEnter: PropTypes.func,
     enableTogglePassword: PropTypes.bool,
     isInputIconFill: PropTypes.bool,
+    step: PropTypes.number,
+    testId: PropTypes.string,
+    min: PropTypes.number,
+    max: PropTypes.number,
 };
 
 Input.defaultProps = {
@@ -208,4 +247,8 @@ Input.defaultProps = {
     onFocus: null,
     enableTogglePassword: false,
     isInputIconFill: false,
+    step: 1,
+    testId: 'input',
+    min: null,
+    max: null,
 };

package/src/components/Input/Input.stories.js

@@ -94,6 +94,7 @@ const Template = (args) => {
                 enableTogglePassword
             />
             <Input placeholder="Type search" type="search" label="Search" />
+            <Input placeholder="Number input" type="number" label="Number" />
         </div>
     );
 };