Merge pull request #2987 from defencedigital/fix/number-input-floats-…

…varying-precision fix(NumberInputE): Enable stepping of floats with varying precision
Royal-Navy · Jan 18, 2022 · 544318b · 544318b
2 parents eee81e7 + efa3214
commit 544318b
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 26 deletions.
diff --git a/packages/react-component-library/package.json b/packages/react-component-library/package.json
@@ -167,6 +167,7 @@
     "autoprefixer": "^10.2.5",
     "classnames": "^2.2.6",
     "date-fns": "^2.9.0",
+    "decimal.js": "^10.3.1",
     "downshift": "^6.1.7",
     "polished": "^4.0.3",
     "postcss-flexbugs-fixes": "^5.0.2",

diff --git a/packages/react-component-library/src/components/NumberInputE/Buttons.tsx b/packages/react-component-library/src/components/NumberInputE/Buttons.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import capitalize from 'lodash/capitalize'
 import { IconAdd, IconRemove } from '@defencedigital/icon-library'
+import { Decimal } from 'decimal.js'
 
 import { ComponentSizeType } from '../Forms'
 import { InlineButton } from '../InlineButtons/InlineButton'
 import { NUMBER_INPUT_BUTTON_TYPE } from './constants'
 import { StyledDivider } from './partials/StyledDivider'
 import { StyledInlineButtons } from '../InlineButtons/partials/StyledInlineButtons'
-import { countDecimals } from '../../helpers'
 
 export interface ButtonsProps {
   isDisabled: boolean
@@ -35,8 +35,6 @@ export const Buttons: React.FC<ButtonsProps> = ({
   step,
   value,
 }) => {
-  const digits = countDecimals(step)
-
   function onButtonClick(getNewValue: () => string) {
     return (event: React.MouseEvent<HTMLButtonElement>) => {
       const newValue = getNewValue()
@@ -52,9 +50,9 @@ export const Buttons: React.FC<ButtonsProps> = ({
         )} the input value`}
         data-testid={`number-input-${NUMBER_INPUT_BUTTON_TYPE.DECREASE}`}
         isDisabled={isDisabled}
-        onClick={onButtonClick(() =>
-          ((parseFloat(value) || 0) - step).toFixed(digits)
-        )}
+        onClick={onButtonClick(() => {
+          return new Decimal(value || 0).minus(step).toString()
+        })}
         size={size}
       >
         {iconLookup[NUMBER_INPUT_BUTTON_TYPE.DECREASE]}
@@ -66,9 +64,9 @@ export const Buttons: React.FC<ButtonsProps> = ({
         )} the input value`}
         data-testid={`number-input-${NUMBER_INPUT_BUTTON_TYPE.INCREASE}`}
         isDisabled={isDisabled}
-        onClick={onButtonClick(() =>
-          ((parseFloat(value) || 0) + step).toFixed(digits)
-        )}
+        onClick={onButtonClick(() => {
+          return new Decimal(value || 0).plus(step).toString()
+        })}
         size={size}
       >
         {iconLookup[NUMBER_INPUT_BUTTON_TYPE.INCREASE]}

diff --git a/packages/react-component-library/src/components/NumberInputE/NumberInputE.stories.tsx b/packages/react-component-library/src/components/NumberInputE/NumberInputE.stories.tsx
@@ -10,6 +10,12 @@ export default {
   title: 'Number Input (Experimental)',
   parameters: {
     actions: { argTypesRegex: '^on.*' },
+    docs: {
+      description: {
+        component:
+          'This component leverages a [custom `Decimal` type](https://github.com/MikeMcl/decimal.js) for handling floating point arithmetic.',
+      },
+    },
   },
 } as Meta
 

diff --git a/packages/react-component-library/src/components/NumberInputE/NumberInputE.test.tsx b/packages/react-component-library/src/components/NumberInputE/NumberInputE.test.tsx
@@ -527,10 +527,10 @@ describe('NumberInputE', () => {
   })
 
   describe.each([
-    ['3', '0'],
-    ['0.1', '0.0'],
-    ['0.25', '0.00'],
-  ])('when a step of %s is specified', (step, zero) => {
+    [3, 0, 3],
+    [0.1, 0, 0.1],
+    [0.25, 0.9, 1.15],
+  ])('when a step of %s is specified', (step, initial, sum) => {
     beforeEach(() => {
       const props = {
         ...defaultProps,
@@ -539,7 +539,7 @@ describe('NumberInputE', () => {
 
       onChangeSpy = jest.spyOn(props, 'onChange')
 
-      wrapper = render(<NumberInputE {...props} />)
+      wrapper = render(<NumberInputE value={initial} {...props} />)
     })
 
     describe('and the increase button is clicked', () => {
@@ -548,15 +548,15 @@ describe('NumberInputE', () => {
         increase.click()
       })
 
-      assertInputValue(step)
+      assertInputValue(String(sum))
 
       describe('and the decrease button is clicked', () => {
         beforeEach(() => {
           const decrease = wrapper.getByTestId('number-input-decrease')
           decrease.click()
         })
 
-        assertInputValue(zero)
+        assertInputValue(String(initial))
       })
     })
   })

diff --git a/packages/react-component-library/src/helpers.ts b/packages/react-component-library/src/helpers.ts
@@ -63,14 +63,6 @@ function sleep(ms: number): Promise<undefined> {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }
 
-function countDecimals(value: number): number {
-  if (Math.floor(value) === value) {
-    return 0
-  }
-
-  return value.toString().split('.')[1].length || 0
-}
-
 export {
   getInitials,
   getId,
@@ -80,5 +72,4 @@ export {
   warnIfOverwriting,
   withKey,
   sleep,
-  countDecimals,
 }
diff --git a/yarn.lock b/yarn.lock
@@ -8057,7 +8057,7 @@ decamelize@^1.1.0, decamelize@^1.1.2, decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
-decimal.js@^10.2.1:
+decimal.js@^10.2.1, decimal.js@^10.3.1:
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
   integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==