✨ Formate la valeur affichée dans le champ NumberInput (#659)

incubateur-ademe · Sep 2, 2024 · bd708d5 · bd708d5
2 parents fc79617 + 16130d7
commit bd708d5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "react-hook-form": "^7.51.2",
     "react-i18next": "^14.0.5",
     "react-modal": "^3.16.1",
+    "react-number-format": "^5.4.1",
     "react-select": "^5.8.0",
     "react-toastify": "^10.0.5",
     "react-tooltip": "^5.26.3",

diff --git a/src/components/form/question/NumberInput.tsx b/src/components/form/question/NumberInput.tsx
@@ -1,7 +1,7 @@
 import Trans from '@/components/translation/Trans'
-import { useLocale } from '@/hooks/useLocale'
 import { HTMLAttributes } from 'react'
 import { DebounceInput } from 'react-debounce-input'
+import { NumericFormat } from 'react-number-format'
 import { twMerge } from 'tailwind-merge'
 
 type Props = {
@@ -12,51 +12,48 @@ type Props = {
   min?: number
   id?: string
   className?: string
+  defaultValue?: string | number | null | undefined
+}
+
+function unformatNumber(number: string) {
+  // Supprimer les séparateurs de milliers
+  return Number(number.replace(/[^0-9.-]+/g, ''))
 }
 
 export default function NumberInput({
   unit,
   value = '',
   isMissing,
   setValue,
-  min = 0,
   className,
   id,
   ...props
 }: HTMLAttributes<HTMLInputElement> & Props) {
-  const locale = useLocale()
-
   const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value
+
     if (inputValue === '') {
       setValue(undefined)
     } else {
-      setValue(Number(inputValue))
+      setValue(unformatNumber(inputValue))
     }
   }
 
   return (
     <div
       className={twMerge(`flex items-center justify-start gap-1`, className)}>
-      <DebounceInput
-        debounceTimeout={300}
-        className={`focus:ring-primary max-w-[8rem] rounded-xl border-2 border-primary-200 bg-white p-2 text-right transition-colors focus:border-primary-700 focus:ring-2 md:max-w-full`}
-        type="number"
-        inputMode="numeric"
-        min={min}
+      <NumericFormat
         value={isMissing ? '' : value}
-        placeholder={
-          isMissing
-            ? value?.toLocaleString(locale, {
-                maximumFractionDigits: 1,
-              }) ?? '0'
-            : '0'
-        }
+        placeholder={isMissing ? '0' : ''}
+        className={`focus:ring-primary max-w-[8rem] rounded-xl border-2 border-primary-200 bg-white p-2 text-right transition-colors focus:border-primary-700 focus:ring-2 md:max-w-full`}
+        customInput={DebounceInput}
+        thousandSeparator={' '}
+        allowNegative={false}
         onChange={handleValueChange}
-        onInput={handleValueChange}
         id={id}
         {...props}
       />
+
       {unit ? (
         <span className="whitespace-nowrap">
           &nbsp;

diff --git a/yarn.lock b/yarn.lock
@@ -8735,6 +8735,11 @@ react-move@^2.7.0:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
+react-number-format@^5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-5.4.1.tgz#ca191af06c4618a823874efa486df50a1abbfc18"
+  integrity sha512-NICOjo/70dcAiwVmH6zMWoZrTQDlBrEXV/f7S0t/ewlpzp4z00pasg5G1yBX6NHLafwOF3QZ+VvK/XApwSKxdA==
+
 react-select@^5.8.0:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"