feat(amount-input): delete zero minor part in passed amount (#484)

core-ds · Jan 27, 2021 · b787cb1 · b787cb1
1 parent df3e7c8
commit b787cb1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/packages/amount-input/src/Component.test.tsx b/packages/amount-input/src/Component.test.tsx
@@ -8,9 +8,9 @@ import userEvent from '@testing-library/user-event';
 import { CurrencyCodes } from '@alfalab/data';
 import { AmountInput } from './index';
 
-const THINSP = String.fromCharCode(8201);
-
 describe('AmountInput', () => {
+    const THINSP = String.fromCharCode(8201);
+
     function renderAmountInput(value: number | null, currency: CurrencyCodes | null = 'RUR') {
         // TODO: почему тесты в кор компонентах цепляются к data-test-id вместо label?
         const dataTestId = 'test-id';
@@ -64,18 +64,23 @@ describe('AmountInput', () => {
     });
 
     it('should render passed amount', () => {
+        const input = renderAmountInput(1234567);
+        expect(input.value).toBe(`12${THINSP}345,67`);
+    });
+
+    it('should render passed amount without zero minor part', () => {
         const input = renderAmountInput(1234500);
-        expect(input.value).toBe(`12${THINSP}345,00`);
+        expect(input.value).toBe(`12${THINSP}345`);
     });
 
     it('should render empty input if passed amount.value is null', () => {
         const input = renderAmountInput(null);
         expect(input.value).toBe('');
     });
 
-    it('should render 0,00 in input if passed amount.value is 0', () => {
+    it('should render 0 in input if passed amount.value is 0', () => {
         const input = renderAmountInput(0);
-        expect(input.value).toBe('0,00');
+        expect(input.value).toBe('0');
     });
 
     it('should render passed decimal amount', () => {
@@ -118,13 +123,13 @@ describe('AmountInput', () => {
     });
 
     it('should prevent input of incorrect amounts', () => {
-        const input = renderAmountInput(1234500);
+        const input = renderAmountInput(1234567);
 
         fireEvent.change(input, { target: { value: 'f' } });
-        expect(input.value).toBe(`12${THINSP}345,00`);
+        expect(input.value).toBe(`12${THINSP}345,67`);
 
         fireEvent.change(input, { target: { value: '!' } });
-        expect(input.value).toBe(`12${THINSP}345,00`);
+        expect(input.value).toBe(`12${THINSP}345,67`);
     });
 
     it('should avoid inserting leading zero before number, but allow inserting zero', async () => {
@@ -143,13 +148,13 @@ describe('AmountInput', () => {
     });
 
     it('should allow replace minor part without deleting', async () => {
-        const input = renderAmountInput(1234500);
+        const input = renderAmountInput(1234567);
 
         input.focus();
         input.setSelectionRange(7, 7);
 
-        await userEvent.type(input, '6', { initialSelectionStart: 7, initialSelectionEnd: 7 });
-        expect(input.value).toBe(`12${THINSP}345,60`);
+        await userEvent.type(input, '8', { initialSelectionStart: 7, initialSelectionEnd: 7 });
+        expect(input.value).toBe(`12${THINSP}345,86`);
     });
 
     it('should allow to past value with spaces', async () => {

diff --git a/packages/amount-input/src/Component.tsx b/packages/amount-input/src/Component.tsx
@@ -4,7 +4,7 @@ import { Input, InputProps } from '@alfalab/core-components-input';
 import { THINSP, formatAmount, getCurrencySymbol } from '@alfalab/utils';
 import { CurrencyCodes } from '@alfalab/data';
 import { withSuffix } from '@alfalab/core-components-with-suffix';
-import { getFormatedValue, getAmountValueFromStr } from './utils';
+import { getFormattedValue, getAmountValueFromStr } from './utils';
 
 import styles from './index.module.css';
 
@@ -87,6 +87,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
                 value: value as number,
                 currency,
                 minority,
+                view: 'default',
             }).formated,
         );
 
@@ -101,6 +102,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
                         value: value as number,
                         currency,
                         minority,
+                        view: 'default',
                     }).formated,
                 );
             }
@@ -117,9 +119,9 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             ).test(enteredValue);
 
             if (isCorrectEnteredValue) {
-                const newFormatedValue = getFormatedValue(enteredValue, currency, minority);
+                const newFormattedValue = getFormattedValue(enteredValue, currency, minority);
 
-                if (newFormatedValue === inputValue) {
+                if (newFormattedValue === inputValue) {
                     const caret = input.selectionStart;
                     window.requestAnimationFrame(() => {
                         input.selectionStart = caret;
@@ -141,19 +143,19 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
                         notFormattedEnteredValueLength += tail.slice(0, 2).length; // только 2 символа в минорной части
                     }
 
-                    const diff = newFormatedValue.length - notFormattedEnteredValueLength;
+                    const diff = newFormattedValue.length - notFormattedEnteredValueLength;
                     const caret = (input.selectionStart as number) + diff;
                     window.requestAnimationFrame(() => {
                         input.selectionStart = caret;
                         input.selectionEnd = caret;
                     });
                 }
 
-                setInputValue(newFormatedValue);
+                setInputValue(newFormattedValue);
                 if (onChange) {
                     onChange(e, {
-                        value: getAmountValueFromStr(newFormatedValue, minority),
-                        valueString: newFormatedValue,
+                        value: getAmountValueFromStr(newFormattedValue, minority),
+                        valueString: newFormattedValue,
                     });
                 }
             } else {

diff --git a/packages/amount-input/src/utils/index.ts b/packages/amount-input/src/utils/index.ts
@@ -12,7 +12,7 @@ import { CurrencyCodes } from '@alfalab/data';
  * @param currency валюта
  * @param minority количество минорных единиц
  */
-export function getFormatedValue(enteredValue: string, currency: CurrencyCodes, minority: number) {
+export function getFormattedValue(enteredValue: string, currency: CurrencyCodes, minority: number) {
     const [head, tail] = enteredValue.split(',');
     const { majorPart } = formatAmount({
         value: Number(head) * minority,