fix(numberInput): avoid parsing value (#102)

* feat(numberInput): change to accept decimals * feat(numberInput): change to accept decimals * feat(numberInput): remove step * fix(numberInput): add onHandleChange function * fix(numberInput): add onHandleChange function * fix(numberInput): changes in handleChangeValue * fix(numberInput): changes in handleChangeValue * fix(numberInput): fix tests * refactor(numberInput): change const name * chore(package): bump version --------- Co-authored-by: Maximiliano forlenza <[email protected]>
indec-it · Apr 17, 2023 · 7756528 · 7756528
1 parent 6b2b7a5
commit 7756528
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@indec/react-commons",
-  "version": "5.6.1",
+  "version": "5.7.0",
   "description": "Common reactjs components for apps",
   "private": false,
   "main": "index.js",

diff --git a/src/components/NumberInput/NumberInput.js b/src/components/NumberInput/NumberInput.js
@@ -23,6 +23,7 @@ const NumberInput = ({
     quote,
     containerStyle,
     onChange,
+    hasDecimal,
     iconLeft,
     iconRight,
     hasError,
@@ -36,6 +37,19 @@ const NumberInput = ({
     const [handleChange, error, setField] = useError(hasError);
     const isEmptyStringFieldValue = field?.value === '';
 
+    const handleChangeValue = newValue => {
+        const formatedValue = hasDecimal ? newValue : Number(newValue);
+        const changedValue = newValue === '' ? '' : formatedValue;
+        if (field) {
+            setField(field.name, changedValue, form.setFieldValue);
+        } else {
+            handleChange(
+                {target: {id: name, value: changedValue}},
+                onChange
+            );
+        }
+    };
+
     return (
         <FormControl
             name={field?.name || name}
@@ -53,16 +67,7 @@ const NumberInput = ({
                 variant={variant}
                 value={field?.value === 0 ? field.value : field?.value || value}
                 onKeyDown={e => e.key === 'e' && e.preventDefault()}
-                onChange={newValue => {
-                    if (field) {
-                        setField(field.name, newValue === '' ? '' : Number(newValue), form.setFieldValue);
-                    } else {
-                        handleChange(
-                            {target: {id: name, value: newValue === '' ? '' : Number(newValue)}},
-                            onChange
-                        );
-                    }
-                }}
+                onChange={handleChangeValue}
                 {...props}
             >
                 <NumberInputField data-testid={`input-${field?.name || name}`} placeholder={placeholder}/>
@@ -79,6 +84,7 @@ const NumberInput = ({
 
 NumberInput.propTypes = {
     name: PropTypes.string,
+    hasDecimal: PropTypes.bool,
     placeholder: PropTypes.string,
     variant: PropTypes.string,
     isDisabled: PropTypes.bool,
@@ -105,6 +111,7 @@ NumberInput.propTypes = {
 };
 
 NumberInput.defaultProps = {
+    hasDecimal: false,
     name: undefined,
     width: undefined,
     containerStyle: {},

diff --git a/src/components/NumberInput/NumberInput.test.js b/src/components/NumberInput/NumberInput.test.js
@@ -1,13 +1,13 @@
-import {getByTestId} from '@testing-library/react';
-
+import {fireEvent, getByTestId} from '@testing-library/react';
 import {NumberInput} from '@/components';
 
 describe('<NumberInput>', () => {
     let props;
     const getComponent = () => render(NumberInput, props, {formik: {}});
     beforeEach(() => {
         props = {
-            name: 'test'
+            name: 'test',
+            onChange: jest.fn()
         };
     });
     afterEach(tearDown);
@@ -34,4 +34,32 @@ describe('<NumberInput>', () => {
             expect(label).toHaveTextContent('Test');
         });
     });
+
+    describe('when `props.hasDecimal` is `true`', () => {
+        beforeEach(() => {
+            props.hasDecimal = true;
+            const {container} = getComponent();
+            const input = getByTestId(container, 'input-test');
+            fireEvent.change(input, {target: {value: 11.22}});
+        });
+
+        it('should fire `props.onChange` with value as string', () => {
+            expect(props.onChange).toHaveBeenCalled();
+            expect(props.onChange).toHaveBeenCalledWith({target: {id: 'test', value: '11.22'}});
+        });
+    });
+
+    describe('when `props.hasDecimal` is `false`', () => {
+        beforeEach(() => {
+            props.hasDecimal = false;
+            const {container} = getComponent();
+            const input = getByTestId(container, 'input-test');
+            fireEvent.change(input, {target: {value: 11.22}});
+        });
+
+        it('should fire `props.onChange` with value as number', () => {
+            expect(props.onChange).toHaveBeenCalled();
+            expect(props.onChange).toHaveBeenCalledWith({target: {id: 'test', value: 11.22}});
+        });
+    });
 });