Merge pull request #139 from silinternational/feature/improve-MoneyIn…

…put-step

fix(MoneyInput): fix 1x10e-n not being caught by step

components/mdc/TextInput/MoneyInput.svelte

@@ -1,7 +1,8 @@
 <!-- https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield -->
 <script>
-import { MDCTextField } from '@material/textfield'
+import { getDecimalPlacesLength } from './helpers'
 import { generateRandomID } from '../../../random'
+import { MDCTextField } from '@material/textfield'
 import { afterUpdate, onMount } from 'svelte'
 
 export let label = ''
@@ -31,7 +32,9 @@ $: isLowerThanMinValue = minValue && internalValue < minValue
 $: showErrorIcon = hasExceededMaxValue || isLowerThanMinValue || hasExceededMaxLength || valueNotDivisibleByStep
 $: error = showErrorIcon || (hasFocused && hasBlurred && required && !internalValue)
 $: showCounter = maxlength && valueLength / maxlength > 0.85
-$: valueNotDivisibleByStep = internalValue && (internalValue / Number(step)).toFixed(2) % 1 !== 0
+$: valueHasTooManyDecPlaces = getDecimalPlacesLength(internalValue) > getDecimalPlacesLength(step)
+$: valueNotDivisibleByStep =
+  (internalValue && (internalValue / Number(step)).toFixed(2) % 1 !== 0) || valueHasTooManyDecPlaces
 $: internalValue = Number(value) || 0
 
 onMount(() => {

components/mdc/TextInput/helpers.js

@@ -1,3 +1,9 @@
 export const addOrRemoveInvalidClass = async (isInvalid, element) => {
   isInvalid ? element.classList?.add('mdc-text-field--invalid') : element.classList?.remove('mdc-text-field--invalid')
 }
+
+export function getDecimalPlacesLength(number = 0) {
+  const string = String(number)
+  const length = string.includes('e-') ? string.split('e-')?.[1] : string.split('.')[1]?.length
+  return Number(length || 0)
+}

stories/MoneyInput.stories.svelte

@@ -1,8 +1,12 @@
 <script>
-import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
 import { MoneyInput } from '../components/mdc'
 import { copyAndModifyArgs } from './helpers.js'
+import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+import { getDecimalPlacesLength } from '../components/mdc/TextInput/helpers'
 
+let arrayOfValues = []
+let dynamicValue
+let lastKey = ''
 let title = 'MoneyInput'
 
 const args = {
@@ -14,14 +18,45 @@ const args = {
   maxValue: 100,
   step: '.01',
 }
+$: arrayOfValues.forEach((v) =>
+  setTimeout(() => {
+    dynamicValue = v
+  }, 100)
+)
 
-let lastKey = ''
+//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#sequence_generator_range
+function range(start, stop, step) {
+  const numberOfDecToFix = getDecimalPlacesLength(step)
+  return Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + (i * step).toFixed(numberOfDecToFix))
+}
+
+function setValues(max, step) {
+  arrayOfValues = range(0, max, step)
+}
 </script>
 
+<style>
+  .d-none {
+  display: none;
+}
+
+</style>
+
 <Meta title="Atoms/MoneyInput" component={MoneyInput} />
 
 <Template let:args>
-  <MoneyInput {...args} on:keydown={args['on:keydown']} on:keypress={args['on:keypress']} on:keyup={args['on:keyup']} />
+  {#if !args.label}
+    <div class="d-none">
+      {setValues(args.maxValue, args.step)}
+    </div>
+  {/if}
+  <MoneyInput
+    value={!args.label && dynamicValue}
+    {...args}
+    on:keydown={args['on:keydown']}
+    on:keypress={args['on:keypress']}
+    on:keyup={args['on:keyup']}
+  />
   {#if lastKey}
     <p>Last key pressed: {lastKey}</p>
   {/if}
@@ -46,3 +81,5 @@ let lastKey = ''
 <Story name="Disabled" args={copyAndModifyArgs(args, { disabled: true })} />
 
 <Story name="Description" args={copyAndModifyArgs(args, { description: 'a description' })} />
+
+<Story name="Test step" args={{ ...args, label: '' }} />