FIO-9173: Allow Scientific Notations (#5878)

* FIO-9173: Allow Scientific Notations

* FIO-9173: Fixing index

* FIO-9173: Adding more tests & using parseFloat instead of Number

Changelog.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased: 5.0.0-rc.95]
+### Changed
+ - FIO-9173: Allow Scientific Notations
+
 ## 5.0.0-rc.94
 ### Changed
  - Updated @formio/bootstrap@3.0.0-rc.41

src/components/number/Number.js

@@ -195,7 +195,12 @@ export default class NumberComponent extends Input {
     let value = parseFloat(input);
 
     if (!_.isNaN(value)) {
-      value = String(value).replace('.', this.decimalSeparator);
+      // Format scientific notation
+      if (/e/i.test(String(value))) {
+        value = value.toExponential(this.decimalLimit);
+      } else {
+        value = String(value).replace('.', this.decimalSeparator);
+      }
     }
     else {
       value = null;

src/components/number/Number.unit.js

@@ -16,7 +16,8 @@ import {
   comp8,
   comp9,
   comp10,
-  comp11
+  comp11,
+  scientificNotation
 } from './fixtures';
 
 describe('Number Component', () => {
@@ -26,6 +27,26 @@ describe('Number Component', () => {
     });
   });
 
+  it('Should correctly handle scientific notation', () => {
+    return Harness.testCreate(NumberComponent, scientificNotation, { allowScientificNotation: true }).then((component) => {
+      const testCases = [
+        [6.54635E+12, 6546350000000, '6546350000000'],
+        [1.23e-5, 0.0000123, '0.0000123'],
+        [3.14159e2, 314.159, '314.159'],
+        [2e-3, 0.002, '0.002'],
+        [7.5e5, 750000, '750000'],
+        [1.2345e10, 12345000000, '12345000000'],
+      ];
+
+      testCases.forEach(([input, expectedValue, expectedDisplayValue]) => {
+
+        component.setValue(input);
+        assert.equal(component.dataValue, expectedValue, `setValue: ${input} should result in ${expectedValue}`);
+        assert.equal(component.getValueAsString(input), expectedDisplayValue, `getValueAsString: ${input} should result in ${expectedDisplayValue}`);
+      });
+    });
+  });
+
   it('Should format submissions for table view for French locale', () => {
     return Harness.testCreate(NumberComponent, comp4, { language: 'fr' }).then((component) => {
       const value1 = component.getValueAsString(1);

src/components/number/fixtures/index.js

@@ -9,4 +9,4 @@ import comp8 from './comp8';
 import comp9 from './comp9';
 import comp10 from './comp10';
 import comp11 from './comp11';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, scientificNotation };

src/components/number/fixtures/scientificNotation.js

@@ -0,0 +1,13 @@
+export default {
+  'label': 'Number',
+  'mask': false,
+  'spellcheck': true,
+  'tableView': true,
+  'delimiter': true,
+  'requireDecimal': true,
+  'inputFormat': 'plain',
+  'key': 'number',
+  'type': 'number',
+  'decimalLimit': 2,
+  'input': true
+};