NumberInput: Allow to pass in a locale for improved number formatting

strapi · Aug 29, 2022 · fb61d61 · fb61d61
1 parent 170877d
commit fb61d61
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/packages/strapi-design-system/src/NumberInput/NumberInput.js b/packages/strapi-design-system/src/NumberInput/NumberInput.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import CarretDown from '@strapi/icons/CarretDown';
 import styled from 'styled-components';
@@ -36,6 +36,7 @@ export const NumberInput = React.forwardRef(
       error,
       label,
       labelAction,
+      locale: defaultLocale,
       id,
       onValueChange,
       value,
@@ -49,8 +50,9 @@ export const NumberInput = React.forwardRef(
     // inputValue should ALWAYS be a string. value should ALWAYS stay a number
     const [inputValue, setInputValue] = useState(value === undefined || value === null ? INITIAL_VALUE : String(value));
     const generatedId = useId('numberinput', id);
-    const numberParserRef = useRef(new NumberParser(getDefaultLocale()));
-    const numberFormaterRef = useRef(new NumberFormatter(getDefaultLocale(), { maximumSignificantDigits: 21 }));
+    const locale = useMemo(() => defaultLocale || getDefaultLocale(), [defaultLocale]);
+    const numberParserRef = useRef(new NumberParser(locale));
+    const numberFormaterRef = useRef(new NumberFormatter(locale, { maximumSignificantDigits: 21 }));
 
     const handleChange = (e) => {
       const nextValue = e.target.value;
@@ -242,6 +244,7 @@ NumberInput.propTypes = {
   id: PropTypes.string,
   label: PropTypes.string,
   labelAction: PropTypes.element,
+  locale: PropTypes.string,
   name: PropTypes.string.isRequired,
   onValueChange: PropTypes.func.isRequired,
   required: PropTypes.bool,

diff --git a/packages/strapi-design-system/src/NumberInput/NumberInput.stories.mdx b/packages/strapi-design-system/src/NumberInput/NumberInput.stories.mdx
@@ -81,7 +81,7 @@ NumberInputs can be used without a label.
 <Canvas>
   <Story name="withoutLabel">
     {() => {
-      const [content, setContent] = useState();
+      const [content, setContent] = useState(0);
       return (
         <Box padding={10}>
           <NumberInput
@@ -289,6 +289,31 @@ NumberInputs are always found in forms. They give users the possibility to add o
   </Story>
 </Canvas>
 
+## With locale
+
+<Canvas>
+  <Story name="locale">
+    {() => {
+      const [content, setContent] = useState();
+      return (
+        <Box padding={10}>
+          <NumberInput
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            locale="de"
+            onValueChange={(value) => setContent(value)}
+            value={content}
+          />
+          <Box as="p" padding={4} background="neutral100">
+            <Typography>{`The value is ${content}`}</Typography>
+          </Box>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Props
 
 <ArgsTable of={NumberInput} />