Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-number-format
Advanced tools
react-number-format - npm Package Compare versions
Comparing version 1.1.0-alpha2 to 1.1.0
| /*! | ||
| * react-number-format - 1.1.0-alpha2 | ||
| * react-number-format - 1.1.0 | ||
| * Author : Sudhanshu Yadav | ||
@@ -123,3 +123,2 @@ * Copyright (c) 2016,2017 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license. | ||
| _this.onChange = _this.onChange.bind(_this); | ||
| _this.onInput = _this.onInput.bind(_this); | ||
| _this.onKeyDown = _this.onKeyDown.bind(_this); | ||
@@ -336,7 +335,2 @@ return _this; | ||
| }, { | ||
| key: 'onInput', | ||
| value: function onInput(e) { | ||
| this.onChangeHandler(e, this.props.onInput); | ||
| } | ||
| }, { | ||
| key: 'onKeyDown', | ||
@@ -381,5 +375,4 @@ value: function onKeyDown(e) { | ||
| var inputProps = _extends({}, props, { | ||
| type: 'tel', | ||
| type: 'text', | ||
| value: this.state.value, | ||
| onInput: this.onChange, | ||
| onChange: this.onChange, | ||
@@ -386,0 +379,0 @@ onKeyDown: this.onKeyDown |
| /*! | ||
| * react-number-format - 1.1.0-alpha2 | ||
| * react-number-format - 1.1.0 | ||
| * Author : Sudhanshu Yadav | ||
| * Copyright (c) 2016,2017 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license. | ||
| */ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.NumberFormat=t(require("react")):e.NumberFormat=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(1)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}var p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),f=r(2),l=n(f),c={thousandSeparator:f.PropTypes.oneOfType([f.PropTypes.string,f.PropTypes.bool]),decimalSeparator:f.PropTypes.oneOfType([f.PropTypes.string,f.PropTypes.bool]),decimalPrecision:f.PropTypes.oneOfType([f.PropTypes.number,f.PropTypes.bool]),displayType:f.PropTypes.oneOf(["input","text"]),prefix:f.PropTypes.string,suffix:f.PropTypes.string,format:f.PropTypes.oneOfType([f.PropTypes.string,f.PropTypes.func]),mask:f.PropTypes.string,value:f.PropTypes.oneOfType([f.PropTypes.number,f.PropTypes.string]),customInput:f.PropTypes.func},y={displayType:"input",decimalSeparator:".",decimalPrecision:!1},h=function(e){function t(e){o(this,t);var r=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={value:r.formatInput(e.value).formattedValue},r.onChange=r.onChange.bind(r),r.onInput=r.onInput.bind(r),r.onKeyDown=r.onKeyDown.bind(r),r}return i(t,e),u(t,[{key:"componentWillReceiveProps",value:function(e){e.value!==this.props.value&&this.setState({value:this.formatInput(e.value).formattedValue})}},{key:"getSeparators",value:function(){var e=this.props,t=e.thousandSeparator,r=e.decimalSeparator;return t===!0&&(t=","),r&&t&&"string"!=typeof r&&(r="."===t?",":"."),r===!0&&(r="."),{decimalSeparator:r,thousandSeparator:t}}},{key:"getNumberRegex",value:function(e,t){var r=this.getSeparators(),n=r.decimalSeparator;return new RegExp("\\d"+(n&&!t?"|"+s(n):""),e?"g":void 0)}},{key:"setCaretPosition",value:function(e,t){if(e.value=e.value,null!==e){if(e.createTextRange){var r=e.createTextRange();return r.move("character",t),r.select(),!0}return e.selectionStart||0===e.selectionStart?(e.focus(),e.setSelectionRange(t,t),!0):(e.focus(),!1)}}},{key:"formatWithPattern",value:function(e){var t=this.props,r=t.format,n=t.mask;if(!r)return e;for(var o=r.split("#").length-1,a=0,i=r,s=0,p=e.length;s<p;s++)s<o&&(a=i.indexOf("#"),i=i.replace("#",e[s]));var u=i.lastIndexOf("#");return n?i.replace(/#/g,n):i.substring(0,a+1)+(u!==-1?i.substring(u+1,i.length):"")}},{key:"formatInput",value:function(e){var t=this.props,r=t.prefix,n=t.suffix,o=(t.mask,t.format),a=this.getSeparators(),i=a.thousandSeparator,s=a.decimalSeparator,p=this.props.decimalPrecision,u=this.getNumberRegex(!0);if("number"==typeof e&&(e+=""),!e||!e.match(u))return{value:"",formattedValue:""};var f=e.match(u).join(""),l=f;if(o)"string"==typeof o?l=this.formatWithPattern(l):"function"==typeof o&&(l=o(l));else{var c=l,y="",h=l.indexOf(s)!==-1||p!==!1;if(s&&h){var v=void 0;if(p!==!1){var d=p===!0?2:p;v=parseFloat(l).toFixed(d).split(s)}else v=l.split(s);c=v[0],y=v[1]}i&&(c=c.replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1"+i)),r&&(c=r+c),n&&(y+=n),l=c+(h&&s||"")+y}return{value:l.match(u).join(""),formattedValue:l}}},{key:"getCursorPosition",value:function(e,t,r){for(var n=this.getNumberRegex(),o=0,a=0;a<r;a++)if(e[a].match(n)||e[a]===t[o]){for(;e[a]!==t[o]&&o<t.length;)o++;o++}return o}},{key:"onChangeHandler",value:function(e,t){var r=this;e.persist();var n=e.target,o=n.value,a=this.formatInput(o),i=a.formattedValue,s=a.value,p=n.selectionStart;return this.setState({value:i},function(){p=r.getCursorPosition(o,i,p),setTimeout(function(){return r.setCaretPosition(n,p)},0),t&&t(e,s)}),s}},{key:"onChange",value:function(e){this.onChangeHandler(e,this.props.onChange)}},{key:"onInput",value:function(e){this.onChangeHandler(e,this.props.onInput)}},{key:"onKeyDown",value:function(e){var t=e.target,r=t.selectionStart,n=t.selectionEnd,o=t.value,a=this.props.decimalPrecision,i=e.key,s=this.getNumberRegex(!1,a!==!1);if(n-r===0)if("Delete"!==i||s.test(o[r])){if("Backspace"===i&&!s.test(o[r-1])){e.preventDefault();for(var p=r;!s.test(o[p-1])&&p>0;)p--;this.setCaretPosition(t,p)}}else{e.preventDefault();for(var u=r;!s.test(o[u])&&u<o.length;)u++;this.setCaretPosition(t,u)}this.props.onKeyDown&&this.props.onKeyDown(e)}},{key:"render",value:function(){var e=p({},this.props);Object.keys(c).forEach(function(t){delete e[t]});var t=p({},e,{type:"tel",value:this.state.value,onInput:this.onChange,onChange:this.onChange,onKeyDown:this.onKeyDown});if("text"===this.props.displayType)return l.default.createElement("span",e,this.state.value);if(this.props.customInput){var r=this.props.customInput;return l.default.createElement(r,t)}return l.default.createElement("input",t)}}]),t}(l.default.Component);h.propTypes=c,h.defaultProps=y,e.exports=h},function(t,r){t.exports=e}])}); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.NumberFormat=t(require("react")):e.NumberFormat=t(e.React)}(this,function(e){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(1)},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}var p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},u=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),f=r(2),l=o(f),c={thousandSeparator:f.PropTypes.oneOfType([f.PropTypes.string,f.PropTypes.bool]),decimalSeparator:f.PropTypes.oneOfType([f.PropTypes.string,f.PropTypes.bool]),decimalPrecision:f.PropTypes.oneOfType([f.PropTypes.number,f.PropTypes.bool]),displayType:f.PropTypes.oneOf(["input","text"]),prefix:f.PropTypes.string,suffix:f.PropTypes.string,format:f.PropTypes.oneOfType([f.PropTypes.string,f.PropTypes.func]),mask:f.PropTypes.string,value:f.PropTypes.oneOfType([f.PropTypes.number,f.PropTypes.string]),customInput:f.PropTypes.func},y={displayType:"input",decimalSeparator:".",decimalPrecision:!1},h=function(e){function t(e){n(this,t);var r=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={value:r.formatInput(e.value).formattedValue},r.onChange=r.onChange.bind(r),r.onKeyDown=r.onKeyDown.bind(r),r}return i(t,e),u(t,[{key:"componentWillReceiveProps",value:function(e){e.value!==this.props.value&&this.setState({value:this.formatInput(e.value).formattedValue})}},{key:"getSeparators",value:function(){var e=this.props,t=e.thousandSeparator,r=e.decimalSeparator;return t===!0&&(t=","),r&&t&&"string"!=typeof r&&(r="."===t?",":"."),r===!0&&(r="."),{decimalSeparator:r,thousandSeparator:t}}},{key:"getNumberRegex",value:function(e,t){var r=this.getSeparators(),o=r.decimalSeparator;return new RegExp("\\d"+(o&&!t?"|"+s(o):""),e?"g":void 0)}},{key:"setCaretPosition",value:function(e,t){if(e.value=e.value,null!==e){if(e.createTextRange){var r=e.createTextRange();return r.move("character",t),r.select(),!0}return e.selectionStart||0===e.selectionStart?(e.focus(),e.setSelectionRange(t,t),!0):(e.focus(),!1)}}},{key:"formatWithPattern",value:function(e){var t=this.props,r=t.format,o=t.mask;if(!r)return e;for(var n=r.split("#").length-1,a=0,i=r,s=0,p=e.length;s<p;s++)s<n&&(a=i.indexOf("#"),i=i.replace("#",e[s]));var u=i.lastIndexOf("#");return o?i.replace(/#/g,o):i.substring(0,a+1)+(u!==-1?i.substring(u+1,i.length):"")}},{key:"formatInput",value:function(e){var t=this.props,r=t.prefix,o=t.suffix,n=(t.mask,t.format),a=this.getSeparators(),i=a.thousandSeparator,s=a.decimalSeparator,p=this.props.decimalPrecision,u=this.getNumberRegex(!0);if("number"==typeof e&&(e+=""),!e||!e.match(u))return{value:"",formattedValue:""};var f=e.match(u).join(""),l=f;if(n)"string"==typeof n?l=this.formatWithPattern(l):"function"==typeof n&&(l=n(l));else{var c=l,y="",h=l.indexOf(s)!==-1||p!==!1;if(s&&h){var v=void 0;if(p!==!1){var d=p===!0?2:p;v=parseFloat(l).toFixed(d).split(s)}else v=l.split(s);c=v[0],y=v[1]}i&&(c=c.replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1"+i)),r&&(c=r+c),o&&(y+=o),l=c+(h&&s||"")+y}return{value:l.match(u).join(""),formattedValue:l}}},{key:"getCursorPosition",value:function(e,t,r){for(var o=this.getNumberRegex(),n=0,a=0;a<r;a++)if(e[a].match(o)||e[a]===t[n]){for(;e[a]!==t[n]&&n<t.length;)n++;n++}return n}},{key:"onChangeHandler",value:function(e,t){var r=this;e.persist();var o=e.target,n=o.value,a=this.formatInput(n),i=a.formattedValue,s=a.value,p=o.selectionStart;return this.setState({value:i},function(){p=r.getCursorPosition(n,i,p),setTimeout(function(){return r.setCaretPosition(o,p)},0),t&&t(e,s)}),s}},{key:"onChange",value:function(e){this.onChangeHandler(e,this.props.onChange)}},{key:"onKeyDown",value:function(e){var t=e.target,r=t.selectionStart,o=t.selectionEnd,n=t.value,a=this.props.decimalPrecision,i=e.key,s=this.getNumberRegex(!1,a!==!1);if(o-r===0)if("Delete"!==i||s.test(n[r])){if("Backspace"===i&&!s.test(n[r-1])){e.preventDefault();for(var p=r;!s.test(n[p-1])&&p>0;)p--;this.setCaretPosition(t,p)}}else{e.preventDefault();for(var u=r;!s.test(n[u])&&u<n.length;)u++;this.setCaretPosition(t,u)}this.props.onKeyDown&&this.props.onKeyDown(e)}},{key:"render",value:function(){var e=p({},this.props);Object.keys(c).forEach(function(t){delete e[t]});var t=p({},e,{type:"text",value:this.state.value,onChange:this.onChange,onKeyDown:this.onKeyDown});if("text"===this.props.displayType)return l.default.createElement("span",e,this.state.value);if(this.props.customInput){var r=this.props.customInput;return l.default.createElement(r,t)}return l.default.createElement("input",t)}}]),t}(l.default.Component);h.propTypes=c,h.defaultProps=y,e.exports=h},function(t,r){t.exports=e}])}); |
@@ -18,3 +18,4 @@ var webpack = require('webpack'); | ||
| loaders: [ | ||
| {test: /\.js$/, exclude: /node_modules/, loaders: ['babel']} | ||
| {test: /\.js$/, exclude: /node_modules/, loaders: ['babel']}, | ||
| {test: /\.json$/, loaders: ['json-loader']} | ||
| ] | ||
@@ -21,0 +22,0 @@ }, |
@@ -55,3 +55,2 @@ 'use strict'; | ||
| _this.onChange = _this.onChange.bind(_this); | ||
| _this.onInput = _this.onInput.bind(_this); | ||
| _this.onKeyDown = _this.onKeyDown.bind(_this); | ||
@@ -268,7 +267,2 @@ return _this; | ||
| }, { | ||
| key: 'onInput', | ||
| value: function onInput(e) { | ||
| this.onChangeHandler(e, this.props.onInput); | ||
| } | ||
| }, { | ||
| key: 'onKeyDown', | ||
@@ -313,5 +307,4 @@ value: function onKeyDown(e) { | ||
| var inputProps = _extends({}, props, { | ||
| type: 'tel', | ||
| type: 'text', | ||
| value: this.state.value, | ||
| onInput: this.onChange, | ||
| onChange: this.onChange, | ||
@@ -318,0 +311,0 @@ onKeyDown: this.onKeyDown |
| { | ||
| "name": "react-number-format", | ||
| "description": "React component to format number in an input or as a text.", | ||
| "version": "1.1.0-alpha2", | ||
| "version": "1.1.0", | ||
| "main": "lib/number_format.js", | ||
@@ -43,2 +43,3 @@ "author": "Sudhanshu Yadav", | ||
| "cross-env": "^3.1.4", | ||
| "enzyme": "^2.7.1", | ||
| "eslint": "^2.5.3", | ||
@@ -64,3 +65,2 @@ "eslint-config-standard": "^5.1.0", | ||
| "react": "^15.0.1", | ||
| "react-addons-test-utils": "^15.0.1", | ||
| "react-dom": "^15.0.1", | ||
@@ -67,0 +67,0 @@ "react-transform-hmr": "^1.0.4", |
@@ -29,3 +29,3 @@ # react-number-format | ||
| | mask | String (ex : _) | none | If mask defined, component will show non entered placed with masked value. | ||
| | customInput | Component Reference | input | This allow supporting custom inputs with number format. See details | ||
| | customInput | Component Reference | input | This allow supporting custom inputs with number format. | ||
| | onChange | (e, value) => {} | none | onChange handler accepts event object through which you can get formattedValue (e.targe.value # $2,223) and second parameter non formatted value (ie: 2223) | ||
@@ -115,2 +115,8 @@ | ||
| ### Major Updates | ||
| ### v1.1.0 | ||
| - Support custom input | ||
| - Support custom decimal / thousandSeparator | ||
| - Support providing decimal precision | ||
| - Bug fixes ([See release notes](https://github.com/s-yadav/react-number-format/releases)) | ||
| ### v1.0.0 | ||
@@ -117,0 +123,0 @@ - Support decimals |
@@ -40,3 +40,2 @@ //const React = require('react'); | ||
| this.onChange = this.onChange.bind(this); | ||
| this.onInput = this.onInput.bind(this); | ||
| this.onKeyDown = this.onKeyDown.bind(this); | ||
@@ -216,5 +215,2 @@ } | ||
| } | ||
| onInput(e) { | ||
| this.onChangeHandler(e,this.props.onInput); | ||
| } | ||
| onKeyDown(e) { | ||
@@ -251,5 +247,4 @@ const el = e.target; | ||
| const inputProps = Object.assign({}, props, { | ||
| type:'tel', | ||
| type:'text', | ||
| value:this.state.value, | ||
| onInput:this.onChange, | ||
| onChange:this.onChange, | ||
@@ -256,0 +251,0 @@ onKeyDown:this.onKeyDown, |
| import React from 'react'; | ||
| import ReactTestUtils from 'react-addons-test-utils'; | ||
| import FormatNumberInput from '../src/number_format'; | ||
| import { shallow, mount } from 'enzyme'; | ||
| import NumberFormat from '../src/number_format'; | ||
| import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; | ||
| import TextField from 'material-ui/TextField'; | ||
| function getCustomEvent(value) { | ||
| return { | ||
| persist: function(){}, | ||
| preventDefault: function(){}, | ||
| target: { | ||
| value, | ||
| focus: function(){} | ||
| } | ||
| } | ||
| } | ||
| /*** format_number input as input ****/ | ||
| describe('FormatNumberInput as input', () => { | ||
| describe('NumberFormat as input', () => { | ||
| it('should have initial value', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value={2456981} thousandSeparator={true} prefix={'$'} />); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| expect(input.value).toEqual("$2,456,981"); | ||
| const wrapper = mount(<NumberFormat value={2456981} thousandSeparator={true} prefix={'$'} />); | ||
| expect(wrapper.state().value).toEqual("$2,456,981"); | ||
| expect(wrapper.find('input').get(0).value).toEqual("$2,456,981"); | ||
| }); | ||
| it('show the initial value as $0 when number 0 is passed', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value={0} thousandSeparator={true} prefix={'$'} />); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| expect(input.value).toEqual("$0"); | ||
| const wrapper = shallow(<NumberFormat value={0} thousandSeparator={true} prefix={'$'} />); | ||
| expect(wrapper.state().value).toEqual("$0"); | ||
| }); | ||
@@ -32,179 +40,148 @@ | ||
| render() { | ||
| return (<FormatNumberInput thousandSeparator={true} prefix={'$'}/>) | ||
| return (<NumberFormat thousandSeparator={true} prefix={'$'}/>) | ||
| } | ||
| } | ||
| const component = ReactTestUtils.renderIntoDocument(<WrapperComponent />); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| const wrapper = mount(<WrapperComponent />); | ||
| const input = wrapper.find('input'); | ||
| const domInput = input.get(0); | ||
| input.value = "2456981"; | ||
| input.simulate('change', getCustomEvent('2456981')); | ||
| ReactTestUtils.Simulate.input(input); | ||
| expect(domInput.value).toEqual("$2,456,981"); | ||
| expect(input.value).toEqual("$2,456,981"); | ||
| wrapper.setState({testState: true}); | ||
| component.setState({testState: true}); | ||
| expect(input.value).toEqual("$2,456,981"); | ||
| expect(domInput.value).toEqual("$2,456,981"); | ||
| }); | ||
| it('should listen input event and formmat currency properly', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput thousandSeparator={true} prefix={'$'} />); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| it('should listen change event and formmat currency properly', () => { | ||
| const wrapper = shallow(<NumberFormat thousandSeparator={true} prefix={'$'} />); | ||
| input.value = "2456981"; | ||
| wrapper.find('input').simulate('change', getCustomEvent('2456981')); | ||
| ReactTestUtils.Simulate.input(input); | ||
| expect(input.value).toEqual("$2,456,981"); | ||
| expect(wrapper.state().value).toEqual("$2,456,981"); | ||
| }); | ||
| it('should listen change event and format currency properly', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput thousandSeparator={true} prefix={'$'} />); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| it('should maintain decimal points', () => { | ||
| const wrapper = shallow(<NumberFormat thousandSeparator={true} prefix={'$'} />); | ||
| input.value = "2456981"; | ||
| wrapper.find('input').simulate('change', getCustomEvent('2456981.89')); | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("$2,456,981"); | ||
| expect(wrapper.state().value).toEqual("$2,456,981.89"); | ||
| }); | ||
| it('should maintain decimal points', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput thousandSeparator={true} prefix={'$'} />); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| it('should support custom thousand seperator', () => { | ||
| const wrapper = shallow(<NumberFormat thousandSeparator={'.'} decimalSeparator={','} prefix={'$'} />); | ||
| const input = wrapper.find('input'); | ||
| input.value = "2456981.89"; | ||
| input.simulate('change', getCustomEvent('2456981,89')); | ||
| ReactTestUtils.Simulate.input(input); | ||
| expect(wrapper.state().value).toEqual('$2.456.981,89'); | ||
| expect(input.value).toEqual("$2,456,981.89"); | ||
| }); | ||
| wrapper.setProps({thousandSeparator: "'"}); | ||
| it('should support custom thousand seperator', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput thousandSeparator={'.'} decimalSeparator={','} prefix={'$'} />); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| /** TODO : Failing testcases, changing thousand seperator, decimal seperator on the fly fails **/ | ||
| //expect(wrapper.state().value).toEqual("$2'456'981,89"); | ||
| input.value = "2456981,89"; | ||
| input.simulate('change', getCustomEvent('2456981,89')); | ||
| expect(wrapper.state().value).toEqual("$2'456'981,89"); | ||
| ReactTestUtils.Simulate.input(input); | ||
| wrapper.setProps({thousandSeparator: " ", decimalSeparator:"'" }); | ||
| input.simulate('change', getCustomEvent("2456981'89")); | ||
| expect(wrapper.state().value).toEqual("$2 456 981'89"); | ||
| expect(input.value).toEqual("$2.456.981,89"); | ||
| }); | ||
| it('should have proper intermediate formatting', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput format="#### #### #### ####" />); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| const wrapper = shallow(<NumberFormat format="#### #### #### ####" />); | ||
| const input = wrapper.find('input'); | ||
| //case 1st - if entered a number where formatting should happen | ||
| input.value = "41111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111 1"); | ||
| input.simulate('change', getCustomEvent('41111')); | ||
| expect(wrapper.state().value).toEqual('4111 1'); | ||
| //case 2st - if pressed backspace at formatting point | ||
| input.value = "411 1"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111"); | ||
| input.simulate('change', getCustomEvent('411 1')); | ||
| expect(wrapper.state().value).toEqual('4111'); | ||
| //case 3rd - if something entered before formatting point | ||
| input.value = "41111 1"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111 11"); | ||
| input.simulate('change', getCustomEvent('41111 1')); | ||
| expect(wrapper.state().value).toEqual('4111 11'); | ||
| //case 4th - if something entered when maximum numbers are input | ||
| input.value = "41112 1111 1111 1111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111 2111 1111 1111"); | ||
| input.simulate('change', getCustomEvent('41112 1111 1111 1111')); | ||
| expect(wrapper.state().value).toEqual('4111 2111 1111 1111'); | ||
| //case 5th - if something removed after empty space | ||
| input.value = "4111 2111 211 1111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111 2111 2111 111"); | ||
| input.simulate('change', getCustomEvent('4111 2111 211 1111')); | ||
| expect(wrapper.state().value).toEqual('4111 2111 2111 111'); | ||
| //case 6th - if space is removed | ||
| input.value = "41112111 1211 1111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111 2111 1211 1111"); | ||
| input.simulate('change', getCustomEvent('41112111 1211 1111')); | ||
| expect(wrapper.state().value).toEqual('4111 2111 1211 1111'); | ||
| }); | ||
| it('should have proper intermediate masking', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput format="#### #### #### ####" mask="_"/>); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| const wrapper = shallow(<NumberFormat format="#### #### #### ####" mask="_"/>); | ||
| const input = wrapper.find('input'); | ||
| //case 1st - if entered a number where formatting should happen | ||
| input.value = "41111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111 1___ ____ ____"); | ||
| input.simulate('change', getCustomEvent('41111')); | ||
| expect(wrapper.state().value).toEqual('4111 1___ ____ ____'); | ||
| //case 2st - if pressed backspace at formatting point | ||
| input.value = "411 1"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111 ____ ____ ____"); | ||
| input.simulate('change', getCustomEvent('411 1')); | ||
| expect(wrapper.state().value).toEqual('4111 ____ ____ ____'); | ||
| //case 3rd - if something entered before formatting point | ||
| input.value = "41111 1"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111 11__ ____ ____"); | ||
| input.simulate('change', getCustomEvent('41111 1')); | ||
| expect(wrapper.state().value).toEqual('4111 11__ ____ ____'); | ||
| //case 4th - if something entered when maximum numbers are input | ||
| input.value = "41112 1111 1111 1111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111 2111 1111 1111"); | ||
| input.simulate('change', getCustomEvent('41112 1111 1111 1111')); | ||
| expect(wrapper.state().value).toEqual('4111 2111 1111 1111'); | ||
| //case 5th - if something removed after empty space | ||
| input.value = "4111 2111 211 1111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111 2111 2111 111_"); | ||
| input.simulate('change', getCustomEvent('4111 2111 211 1111')); | ||
| expect(wrapper.state().value).toEqual('4111 2111 2111 111_'); | ||
| //case 6th - if space is removed | ||
| input.value = "41112111 1211 1111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111 2111 1211 1111"); | ||
| input.simulate('change', getCustomEvent('41112111 1211 1111')); | ||
| expect(wrapper.state().value).toEqual('4111 2111 1211 1111'); | ||
| }); | ||
| it('should round to passed decimal precision', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput decimalPrecision={4}/>); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| const wrapper = shallow(<NumberFormat decimalPrecision={4}/>); | ||
| const input = wrapper.find('input'); | ||
| //case 1st - already exactly precision 4 should stay that way | ||
| input.value = "4111.1111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111.1111"); | ||
| input.simulate('change', getCustomEvent('4111.1111')); | ||
| expect(wrapper.state().value).toEqual("4111.1111"); | ||
| //case 2nd - longer precision should round | ||
| input.value = "4111.11111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111.1111"); | ||
| input.simulate('change', getCustomEvent('4111.11111')); | ||
| expect(wrapper.state().value).toEqual("4111.1111"); | ||
| /** TODO: Failing test case **/ | ||
| /** Only initial value should round off not while input **/ | ||
| // input.simulate('change', getCustomEvent('4111.11118')); | ||
| // expect(wrapper.state().value).toEqual("4111.1112"); | ||
| //case 3rd - shorter precision adds 0 | ||
| input.value = "4111.111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111.1110"); | ||
| input.simulate('change', getCustomEvent('4111.111')); | ||
| expect(wrapper.state().value).toEqual("4111.1110"); | ||
| //case 4th - no decimal should round with 4 zeros | ||
| input.value = "4111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111.0000"); | ||
| input.simulate('change', getCustomEvent('4111')); | ||
| expect(wrapper.state().value).toEqual("4111.0000"); | ||
| //case 5 - round with two decimal precision | ||
| wrapper.setProps({decimalPrecision: 2}); | ||
| input.simulate('change', getCustomEvent('4111.111')); | ||
| expect(wrapper.state().value).toEqual("4111.11"); | ||
| }); | ||
@@ -214,106 +191,83 @@ | ||
| it('should not round by default', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput />); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| const wrapper = shallow(<NumberFormat/>); | ||
| const input = wrapper.find('input'); | ||
| //case 1st - no rounding with long decimal | ||
| input.value = "4111.111111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111.111111"); | ||
| input.simulate('change', getCustomEvent('4111.111111')); | ||
| expect(wrapper.state().value).toEqual("4111.111111"); | ||
| //case 2nd - no rounding with whole numbers | ||
| input.value = "4111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111"); | ||
| input.simulate('change', getCustomEvent('4111')); | ||
| expect(wrapper.state().value).toEqual("4111"); | ||
| //case 3rd - no rounding on single place decimals | ||
| input.value = "4111.1"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111.1"); | ||
| input.simulate('change', getCustomEvent('4111.1')); | ||
| expect(wrapper.state().value).toEqual("4111.1"); | ||
| }); | ||
| it('should round default 2 places', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput decimalPrecision={true} />); | ||
| const input = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'input' | ||
| ); | ||
| it('works with custom input', () => { | ||
| //case 1st - auto round to 2 places | ||
| input.value = "4111.1111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111.11"); | ||
| const WrapperComponent = (props) => { | ||
| return ( | ||
| <MuiThemeProvider> | ||
| <NumberFormat {...props} /> | ||
| </MuiThemeProvider> | ||
| ) | ||
| } | ||
| //case 2nd - auto round whole integers | ||
| input.value = "4111"; | ||
| ReactTestUtils.Simulate.change(input); | ||
| expect(input.value).toEqual("4111.00"); | ||
| const wrapper = mount(<WrapperComponent customInput={TextField} thousandSeparator={'.'} decimalSeparator={','}/>); | ||
| const input = wrapper.find('input'); | ||
| input.simulate('change', getCustomEvent('2456981,89')); | ||
| expect(input.get(0).value).toEqual('2.456.981,89'); | ||
| wrapper.setProps({format: '#### #### #### ####', mask: '_', thousandSeparator: false, decimalSeparator: false}); | ||
| input.simulate('change', getCustomEvent('41111 1')); | ||
| expect(input.get(0).value).toEqual('4111 11__ ____ ____'); | ||
| }); | ||
| }); | ||
| /*** format_number input as text ****/ | ||
| describe('FormatNumberInput as text', () => { | ||
| describe('NumberFormat as text', () => { | ||
| it('should format numbers to currency', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />); | ||
| const span = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'span' | ||
| ); | ||
| expect(span.textContent).toEqual("$2,456,981"); | ||
| const wrapper = shallow(<NumberFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />); | ||
| expect(wrapper.find('span').text()).toEqual("$2,456,981"); | ||
| }); | ||
| it('should format as given format', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value={4111111111111111} displayType={'text'} format="#### #### #### ####" />); | ||
| const span = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'span' | ||
| ); | ||
| expect(span.textContent).toEqual("4111 1111 1111 1111"); | ||
| const wrapper = shallow(<NumberFormat value={4111111111111111} displayType={'text'} format="#### #### #### ####" />); | ||
| expect(wrapper.find('span').text()).toEqual("4111 1111 1111 1111"); | ||
| }); | ||
| it('should format as given format when input is string', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value="4111111111111111" displayType={'text'} format="#### #### #### ####" />); | ||
| const span = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'span' | ||
| ); | ||
| expect(span.textContent).toEqual("4111 1111 1111 1111"); | ||
| const wrapper = shallow(<NumberFormat value="4111111111111111" displayType={'text'} format="#### #### #### ####" />); | ||
| expect(wrapper.find('span').text()).toEqual("4111 1111 1111 1111"); | ||
| }); | ||
| it('should format as given format when input length is less than format length', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value="41111111111111" displayType={'text'} format="#### #### #### ####" />); | ||
| const span = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'span' | ||
| ); | ||
| expect(span.textContent).toEqual("4111 1111 1111 11"); | ||
| const wrapper = shallow(<NumberFormat value="41111111111111" displayType={'text'} format="#### #### #### ####" />); | ||
| expect(wrapper.find('span').text()).toEqual("4111 1111 1111 11"); | ||
| }); | ||
| it('should format as given format with mask', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value="41111111111111" displayType={'text'} format="#### #### #### ####" mask="_" />); | ||
| const span = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'span' | ||
| ); | ||
| expect(span.textContent).toEqual("4111 1111 1111 11__"); | ||
| const wrapper = shallow(<NumberFormat value="41111111111111" displayType={'text'} format="#### #### #### ####" mask="_" />); | ||
| expect(wrapper.find('span').text()).toEqual("4111 1111 1111 11__"); | ||
| }); | ||
| it('should not round decimals by defualt', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value="4111" displayType={'text'} />); | ||
| const span = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'span' | ||
| ); | ||
| expect(span.textContent).toEqual("4111"); | ||
| const wrapper = shallow(<NumberFormat value="4111" displayType={'text'} />); | ||
| expect(wrapper.find('span').text()).toEqual("4111"); | ||
| }); | ||
| it('should round to 2 decimals if passed true', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value="4111" displayType={'text'} decimalPrecision={true} />); | ||
| const span = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'span' | ||
| ); | ||
| expect(span.textContent).toEqual("4111.00"); | ||
| const wrapper = shallow(<NumberFormat value="4111" displayType={'text'} decimalPrecision={true} />); | ||
| expect(wrapper.find('span').text()).toEqual("4111.00"); | ||
| }); | ||
| it('should round to 4 decimals if passed 4', () => { | ||
| const component = ReactTestUtils.renderIntoDocument(<FormatNumberInput value="4111.11" displayType={'text'} decimalPrecision={4} />); | ||
| const span = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
| component, 'span' | ||
| ); | ||
| expect(span.textContent).toEqual("4111.1100"); | ||
| const wrapper = shallow(<NumberFormat value="4111.11" displayType={'text'} decimalPrecision={4} />); | ||
| expect(wrapper.find('span').text()).toEqual("4111.1100"); | ||
| }); | ||
| }); |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-33.33%
2
- Number of lines in readme file
- increased by4.55%
138
Worsened metrics
- Total package byte prevSize
- decreased by-1.68%
87053
- Lines of code
- decreased by-3.88%
1637
No dependency changes