Implement a masked currency input (twentyhq#5010)

### Description Implement a masked currency input ### Refs twentyhq#4358 ### Demo https://jam.dev/c/93da117c-b193-488f-b9f9-906b33ac5190 Fixes twentyhq#4358 --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br> Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
c973447852 · Apr 18, 2024 · 168358a · 168358a
1 parent b08e954
commit 168358a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/.../twenty-front/src/modules/object-record/record-field/meta-types/hooks/useCurrencyField.ts b/.../twenty-front/src/modules/object-record/record-field/meta-types/hooks/useCurrencyField.ts
@@ -4,7 +4,6 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
-import { canBeCastAsIntegerOrNull } from '~/utils/cast-as-integer-or-null';
 import { convertCurrencyToCurrencyMicros } from '~/utils/convert-currency-amount';
 
 import { FieldContext } from '../../contexts/FieldContext';
@@ -41,9 +40,6 @@ export const useCurrencyField = () => {
     amountText: string;
     currencyCode: string;
   }) => {
-    if (!canBeCastAsIntegerOrNull(amountText)) {
-      return;
-    }
     const amount = parseFloat(amountText);
 
     const newCurrencyValue = {

diff --git a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
@@ -1,4 +1,5 @@
-import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { IMaskInput, IMaskInputProps } from 'react-imask';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
@@ -8,7 +9,10 @@ import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/S
 import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
 import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
 
-export const StyledInput = styled.input`
+type StyledInputProps = React.ComponentProps<'input'> &
+  IMaskInputProps<HTMLInputElement>;
+
+export const StyledIMaskInput = styled(IMaskInput)<StyledInputProps>`
   margin: 0;
   ${TEXT_INPUT_STYLE}
   width: 100%;
@@ -79,9 +83,9 @@ export const CurrencyInput = ({
 
   const wrapperRef = useRef<HTMLInputElement>(null);
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setInternalText(event.target.value);
-    onChange?.(event.target.value);
+  const handleChange = (value: string) => {
+    setInternalText(value);
+    onChange?.(value);
   };
 
   const handleCurrencyChange = (currency: Currency) => {
@@ -131,10 +135,15 @@ export const CurrencyInput = ({
           <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
         )}
       </StyledIcon>
-      <StyledInput
+      <StyledIMaskInput
+        mask={Number}
+        thousandsSeparator={','}
+        radix="."
+        unmask="typed"
+        onAccept={(value: string) => handleChange(value)}
+        inputRef={wrapperRef}
         autoComplete="off"
         placeholder={placeholder}
-        onChange={handleChange}
         autoFocus={autoFocus}
         value={value}
       />