From 5935dafd645473fb075732bada2345bd724ddcce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20D=C5=82uski?= Date: Wed, 23 Jun 2021 12:16:35 +0200 Subject: [PATCH 1/5] add support for paste event given allowedDecimalSeparators --- example/src/index.js | 10 ++++++++++ src/number_format.js | 10 ++++++++++ test/library/input_numeric_format.spec.js | 16 ++++++++++++++++ 3 files changed, 36 insertions(+) diff --git a/example/src/index.js b/example/src/index.js index a65b070c..e3f16300 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -113,6 +113,16 @@ class App extends React.Component { /> +
+

Custom allowed decimal separators with decimal precision

+ +
+

Format with pattern : Format credit card in an input

diff --git a/src/number_format.js b/src/number_format.js index cd4a38e7..85b97d50 100644 --- a/src/number_format.js +++ b/src/number_format.js @@ -671,6 +671,16 @@ class NumberFormat extends React.Component { ); } + /** Check for "paste event" with, replace any allowed decimal separator with desired decimal separator */ + if (!format && decimalScale !== 0 && allowedDecimalSeparators.some(separator => value.indexOf(separator) !== -1)) { + const separator = decimalScale === 0 ? '' : decimalSeparator + let result = value; + allowedDecimalSeparators.forEach(v => { + result = result.replace(v, separator); + }) + value = result; + } + const leftBound = !!format ? 0 : prefix.length; const rightBound = lastValue.length - (!!format ? 0 : suffix.length); diff --git a/test/library/input_numeric_format.spec.js b/test/library/input_numeric_format.spec.js index 3dc13eea..3196ee4d 100644 --- a/test/library/input_numeric_format.spec.js +++ b/test/library/input_numeric_format.spec.js @@ -603,6 +603,22 @@ describe('Test NumberFormat as input with numeric format options', () => { expect(wrapper.state().value).toEqual('23,4456 Sq. ft'); }); + + it('should allow pasting 123,45 with decimal separator set to . and allowedDecimalSeparators=["," , "."]', () => { + const wrapper = shallow( + , + ); + simulateKeyInput(wrapper.find('input'), '123,45'); + expect(wrapper.state().value).toEqual('123.45'); + }); + it('should not break if suffix/prefix has negation sign. Issue #245', () => { const wrapper = shallow(); From 10b28fa68dbcdb3ff246f8c296b76ce92880734b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20D=C5=82uski?= Date: Thu, 24 Jun 2021 22:44:56 +0200 Subject: [PATCH 2/5] Update test/library/input_numeric_format.spec.js Co-authored-by: Nikhil Varma --- test/library/input_numeric_format.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/library/input_numeric_format.spec.js b/test/library/input_numeric_format.spec.js index 3196ee4d..bd2be02e 100644 --- a/test/library/input_numeric_format.spec.js +++ b/test/library/input_numeric_format.spec.js @@ -604,7 +604,7 @@ describe('Test NumberFormat as input with numeric format options', () => { }); - it('should allow pasting 123,45 with decimal separator set to . and allowedDecimalSeparators=["," , "."]', () => { + it('should work with the configured decimal separators based on the allowedDecimalSeparators prop', () => { const wrapper = shallow( Date: Thu, 24 Jun 2021 22:52:34 +0200 Subject: [PATCH 3/5] fix: pasting with allowedDecimalSeparators #349 --- example/src/index.js | 2 +- src/number_format.js | 5 ++--- test/library/input_numeric_format.spec.js | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/example/src/index.js b/example/src/index.js index e3f16300..e86e1eec 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -116,7 +116,7 @@ class App extends React.Component {

Custom allowed decimal separators with decimal precision

value.indexOf(separator) !== -1)) { - const separator = decimalScale === 0 ? '' : decimalSeparator let result = value; allowedDecimalSeparators.forEach(v => { - result = result.replace(v, separator); + result = result.replace(v, decimalSeparator); }) value = result; } diff --git a/test/library/input_numeric_format.spec.js b/test/library/input_numeric_format.spec.js index bd2be02e..b4d7a4b4 100644 --- a/test/library/input_numeric_format.spec.js +++ b/test/library/input_numeric_format.spec.js @@ -604,7 +604,7 @@ describe('Test NumberFormat as input with numeric format options', () => { }); - it('should work with the configured decimal separators based on the allowedDecimalSeparators prop', () => { + it('should work with the configured decimal separators based on the allowedDecimalSeparators prop. Issue #349', () => { const wrapper = shallow( Date: Thu, 24 Jun 2021 22:57:53 +0200 Subject: [PATCH 4/5] chore(readme): update docs for allowedDecimalSeparators --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index df5deab1..d020ddbc 100755 --- a/README.md +++ b/README.md @@ -64,7 +64,7 @@ In typescript you also have to enable `"esModuleInterop": true` in your tsconfig | isAllowed | ([values](#values-object)) => true or false | none | A checker function to check if input value is valid or not. If this function returns false, the onChange method will not get triggered | | renderText | (formattedValue, customProps) => React Element | null | A renderText method useful if you want to render formattedValue in different element other than span. It also returns the custom props that are added to the component which can allow passing down props to the rendered element | | getInputRef | (elm) => void | null | Method to get reference of input, span (based on displayType prop) or the customInput's reference. See [Getting reference](#getting-reference) -| allowedDecimalSeparators | array of char | none | Characters which when pressed result in a decimal separator. When missing, decimal separator and '.' are used | +| allowedDecimalSeparators | array of char | none | Characters which when pressed or pasted from the clipboard will result in a decimal separator. When missing, decimal separator and '.' are used | **Other than this it accepts all the props which can be given to a input or span based on displayType you selected.** From 81fce434ef4357f0438a4187ac625a1eda57ae9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20D=C5=82uski?= Date: Fri, 2 Jul 2021 22:18:06 +0200 Subject: [PATCH 5/5] change decimalSeparator replace function + add prefix and suffix test (failing) --- src/number_format.js | 9 +++------ test/library/input_numeric_format.spec.js | 17 +++++++++++++++++ 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/number_format.js b/src/number_format.js index b42aec2c..5d5a151f 100644 --- a/src/number_format.js +++ b/src/number_format.js @@ -671,13 +671,10 @@ class NumberFormat extends React.Component { ); } + const decimalSeparatorRegex = new RegExp(allowedDecimalSeparators.map(escapeRegExp).join('|'), 'g'); /** Check for "paste event" with, replace any allowed decimal separator with desired decimal separator. Issue #349 */ - if (!format && decimalScale !== 0 && allowedDecimalSeparators.some(separator => value.indexOf(separator) !== -1)) { - let result = value; - allowedDecimalSeparators.forEach(v => { - result = result.replace(v, decimalSeparator); - }) - value = result; + if (!format && decimalScale !== 0 && value.match(decimalSeparatorRegex)) { + value = value.replace(decimalSeparatorRegex, decimalSeparator); } const leftBound = !!format ? 0 : prefix.length; diff --git a/test/library/input_numeric_format.spec.js b/test/library/input_numeric_format.spec.js index b4d7a4b4..d507eb90 100644 --- a/test/library/input_numeric_format.spec.js +++ b/test/library/input_numeric_format.spec.js @@ -618,6 +618,23 @@ describe('Test NumberFormat as input with numeric format options', () => { simulateKeyInput(wrapper.find('input'), '123,45'); expect(wrapper.state().value).toEqual('123.45'); }); + + it('should work with the configured decimal separators based on the allowedDecimalSeparators prop and should not replace prefix and suffix. Issue #349', () => { + const wrapper = shallow( + , + ); + simulateKeyInput(wrapper.find('input'), '123,45'); + expect(wrapper.state().value).toEqual('prefix,987 123.45suffix,'); + }); it('should not break if suffix/prefix has negation sign. Issue #245', () => { const wrapper = shallow();