diff --git a/package.json b/package.json index 9c9f024..406eda4 100644 --- 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 index 2dfa274..5f9fea3 100644 --- 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 ( 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} > @@ -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 index 513fd56..5eb8609 100644 --- a/src/components/NumberInput/NumberInput.test.js +++ b/src/components/NumberInput/NumberInput.test.js @@ -1,5 +1,4 @@ -import {getByTestId} from '@testing-library/react'; - +import {fireEvent, getByTestId} from '@testing-library/react'; import {NumberInput} from '@/components'; describe('', () => { @@ -7,7 +6,8 @@ describe('', () => { const getComponent = () => render(NumberInput, props, {formik: {}}); beforeEach(() => { props = { - name: 'test' + name: 'test', + onChange: jest.fn() }; }); afterEach(tearDown); @@ -34,4 +34,32 @@ describe('', () => { 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}}); + }); + }); });