Regroupe les fonctions de formatage

Par ailleurs ce commit formate les taux les tableaux des barèmes linéaires

source/components/PercentageField.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react'
+import { formatPercentage } from 'Engine/format'
 import './PercentageField.css'
 
 export default function PercentageField({ onChange, value, debounce }) {
@@ -25,7 +26,7 @@ export default function PercentageField({ onChange, value, debounce }) {
 				max="1"
 			/>
 			<span style={{ display: 'inline-block', width: '3em' }}>
-				{Math.round(localValue * 100)} %
+				{formatPercentage(localValue)} %
 			</span>
 		</div>
 	)

source/components/TargetSelection.js

@@ -12,6 +12,7 @@ import emoji from 'react-easy-emoji'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { formatCurrency } from 'Engine/format'
 import {
 	analysisWithDefaultsSelector,
 	useSituation,
@@ -206,19 +207,6 @@ let Header = withSitePaths(({ target, sitePaths }) => {
 	)
 })
 
-export const formatCurrency = (value, language) => {
-	return value == null
-		? ''
-		: Intl.NumberFormat(language, {
-				style: 'currency',
-				currency: 'EUR',
-				maximumFractionDigits: 0,
-				minimumFractionDigits: 0
-		  })
-				.format(value)
-				.replace(/^€/, '€ ')
-}
-
 let TargetInputOrValue = ({ target, isActiveInput, isSmallTarget }) => {
 	const { i18n } = useTranslation()
 	const colors = useContext(ThemeColoursContext)

source/components/Value.js

@@ -1,25 +1,7 @@
 import { React, T } from 'Components'
 import { serialiseUnit } from 'Engine/units'
-import { memoizeWith } from 'ramda'
 import { useTranslation } from 'react-i18next'
-
-const NumberFormat = memoizeWith(
-	(...args) => JSON.stringify(args),
-	Intl.NumberFormat
-)
-
-export let numberFormatter = ({
-	style,
-	maximumFractionDigits,
-	minimumFractionDigits = 0,
-	language
-}) => value =>
-	NumberFormat(language, {
-		style,
-		currency: 'EUR',
-		maximumFractionDigits,
-		minimumFractionDigits
-	}).format(value)
+import { formatValue } from 'Engine/format'
 
 // let booleanTranslations = { true: '✅', false: '❌' }
 
@@ -34,7 +16,7 @@ let style = customStyle => `
 		${customStyle}
 `
 
-export default ({
+export default function Value({
 	nodeValue: value,
 	unit,
 	nilValueSymbol,
@@ -43,10 +25,8 @@ export default ({
 	children,
 	negative,
 	customCSS = ''
-}) => {
-	const {
-		i18n: { language }
-	} = useTranslation()
+}) {
+	const { language } = useTranslation().i18n
 
 	/* Either an entire rule object is passed, or just the right attributes and the value as a JSX  child*/
 	let nodeValue = value === undefined ? children : value
@@ -71,27 +51,14 @@ export default ({
 				nodeValue.nom
 			) : valueType === 'boolean' ? (
 				booleanTranslations[language][nodeValue]
-			) : unitText === '€' ? (
-				numberFormatter({
-					style: 'currency',
-					maximumFractionDigits,
-					minimumFractionDigits,
-					language
-				})(nodeValue)
-			) : unitText === '%' ? (
-				numberFormatter({ style: 'percent', maximumFractionDigits: 3 })(
-					nodeValue
-				)
 			) : (
-				<>
-					{numberFormatter({
-						style: 'decimal',
-						minimumFractionDigits,
-						maximumFractionDigits
-					})(nodeValue)}
-					&nbsp;
-					{unitText}
-				</>
+				formatValue({
+					minimumFractionDigits,
+					maximumFractionDigits,
+					language,
+					value: nodeValue,
+					unit: unitText
+				})
 			)
 
 	return nodeValue == undefined ? null : (

source/components/conversation/FormDecorator.js

@@ -1,6 +1,7 @@
 import { updateSituation } from 'Actions/actions'
 import classNames from 'classnames'
 import Explicable from 'Components/conversation/Explicable'
+import { getFormatersFromUnit } from 'Engine/format'
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { situationSelector } from 'Selectors/analyseSelectors'
@@ -29,8 +30,7 @@ export const FormDecorator = formType => RenderField =>
 			dispatch(updateSituation(fieldName, normalize(value)))
 		}
 
-		const format = x => (unit === '%' && x ? +(x * 100).toFixed(2) : x)
-		const normalize = x => (unit === '%' ? x / 100 : x)
+		const { format, normalize } = getFormatersFromUnit(unit)
 		const value = format(situation[fieldName])
 
 		return (

source/components/ui/AnimatedTargetValue.js

@@ -2,6 +2,7 @@
 import React, { useRef } from 'react'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 import { useTranslation } from 'react-i18next'
+import { formatCurrency } from 'Engine/format'
 import './AnimatedTargetValue.css'
 
 type Props = {
@@ -10,13 +11,7 @@ type Props = {
 
 function formatDifference(difference, language) {
 	const prefix = difference > 0 ? '+' : ''
-	const formatedValue = Intl.NumberFormat(language, {
-		style: 'currency',
-		currency: 'EUR',
-		maximumFractionDigits: 0,
-		minimumFractionDigits: 0
-	}).format(difference)
-	return prefix + formatedValue
+	return prefix + formatCurrency(difference, language)
 }
 
 export default function AnimatedTargetValue({ value, children }: Props) {

source/engine/mecanismViews/Barème.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import { ShowValuesConsumer } from 'Components/rule/ShowValuesContext'
-import { numberFormatter } from 'Components/Value'
+import { numberFormatter } from 'Engine/format'
 import { trancheValue } from 'Engine/mecanisms/barème'
 import { inferUnit, serialiseUnit } from 'Engine/units'
 import { identity } from 'ramda'
@@ -165,7 +165,7 @@ let Tranche = ({
 			<td key="taux"> {taux != null ? makeJsx(taux) : montant}</td>
 			{showValues && taux != null && (
 				<td key="value">
-					<NodeValuePointer data={trancheValue} />
+					<NodeValuePointer data={trancheValue} unit={tranchesUnit} />
 				</td>
 			)}
 		</tr>

source/engine/mecanismViews/BarèmeContinu.js

@@ -5,6 +5,7 @@ import { Trans } from 'react-i18next'
 import { BarèmeAttributes } from './Barème'
 import './Barème.css'
 import { Node } from './common'
+import { formatPercentage } from 'Engine/format'
 
 let Comp = function Barème({ nodeValue, explanation, unit }) {
 	return (
@@ -43,7 +44,7 @@ let Comp = function Barème({ nodeValue, explanation, unit }) {
 									<b>
 										<Trans>Votre taux </Trans> :{' '}
 									</b>
-									{(100 * explanation.taux).toFixed(2)} %
+									{formatPercentage(explanation.taux)} %
 								</span>
 							)}
 							{explanation.returnRate && (

source/engine/parse.js

@@ -44,6 +44,7 @@ import {
 	mecanismSynchronisation
 } from './mecanisms'
 import { parseReferenceTransforms } from './parseReference'
+import { formatValue } from 'Engine/format'
 
 export let parse = (rules, rule, parsedRules) => rawNode => {
 	let onNodeType = cond([
@@ -159,7 +160,11 @@ export let parseObject = (rules, rule, parsedRules) => rawNode => {
 				nodeValue: v.nodeValue,
 				unit: v.unit,
 				// eslint-disable-next-line
-				jsx: () => <span className={v.type}>{v.nodeValue}</span>
+				jsx: () => (
+					<span className={v.type}>
+						{formatValue({ unit: v.unit, value: v.nodeValue })}
+					</span>
+				)
 			})
 		},
 		action = propOr(mecanismError, k, dispatch)