86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
import classnames from 'classnames'
|
|
import { formatValue, formatValueOptions } from 'Engine/format'
|
|
import { EvaluatedRule } from 'Engine/types'
|
|
import { Unit } from 'Engine/units'
|
|
import React from 'react'
|
|
import { Trans, useTranslation } from 'react-i18next'
|
|
|
|
// let booleanTranslations = { true: '✅', false: '❌' }
|
|
|
|
let booleanTranslations = {
|
|
fr: { true: 'Oui', false: 'Non' },
|
|
en: { true: 'Yes', false: 'No' }
|
|
}
|
|
|
|
let style = customStyle => `
|
|
font-family: 'Courier New', Courier, monospace;
|
|
|
|
${customStyle}
|
|
`
|
|
|
|
export type ValueProps = Partial<
|
|
Pick<EvaluatedRule, 'nodeValue'> &
|
|
Pick<
|
|
formatValueOptions,
|
|
'maximumFractionDigits' | 'minimumFractionDigits'
|
|
> & {
|
|
nilValueSymbol: string
|
|
children: number
|
|
negative: boolean
|
|
unit: string | Unit
|
|
customCSS: string
|
|
className?: string
|
|
}
|
|
>
|
|
|
|
export default function Value({
|
|
nodeValue: value,
|
|
unit,
|
|
nilValueSymbol,
|
|
maximumFractionDigits,
|
|
minimumFractionDigits,
|
|
children,
|
|
className,
|
|
negative,
|
|
customCSS = ''
|
|
}: ValueProps) {
|
|
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
|
|
|
|
if (
|
|
(nilValueSymbol !== undefined && nodeValue === 0) ||
|
|
(nodeValue && Number.isNaN(nodeValue)) ||
|
|
nodeValue === null
|
|
)
|
|
return (
|
|
<span css={style(customCSS)} className={classnames('value', className)}>
|
|
-
|
|
</span>
|
|
)
|
|
let valueType = typeof nodeValue,
|
|
formattedValue =
|
|
valueType === 'string' ? (
|
|
<Trans>{nodeValue}</Trans>
|
|
) : valueType === 'object' ? (
|
|
(nodeValue as any).nom
|
|
) : valueType === 'boolean' ? (
|
|
booleanTranslations[language][nodeValue]
|
|
) : nodeValue !== undefined ? (
|
|
formatValue({
|
|
minimumFractionDigits,
|
|
maximumFractionDigits,
|
|
language,
|
|
unit,
|
|
value: nodeValue
|
|
})
|
|
) : null
|
|
return nodeValue == undefined ? null : (
|
|
<span css={style(customCSS)} className={classnames('value', className)}>
|
|
{negative ? '-' : ''}
|
|
{formattedValue}
|
|
</span>
|
|
)
|
|
}
|