{getAmount}

import React from 'react' import classnames from 'classnames' import { globalProps } from '../utilities/globalProps' import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props' import Body from '../pb_body/_body' import Caption from '../pb_caption/_caption' import Title from '../pb_title/_title' type CurrencyProps = { abbreviate?: boolean, align?: 'center' | 'left' | 'right', amount: string, aria?: {[key:string]:string}, className?: string, dark?: boolean, data?: {[key:string]:string}, decimals?: 'default' | 'matching', emphasized?: boolean, htmlOptions?: {[key: string]: string | number | boolean | (() => void)}, id?: string, label?: string, size?: 'sm' | 'md' | 'lg', symbol?: string, variant?: 'default' | 'light' | 'bold', unit?: string, unstyled?: boolean, commaSeparator?: boolean, } const sizes: {lg: 1, md: 3, sm: 4} = { lg: 1, md: 3, sm: 4, } const Currency = (props: CurrencyProps): React.ReactElement => { const { abbreviate = false, align = 'left', aria = {}, amount, data = {}, decimals = 'default', emphasized = true, htmlOptions = {}, id, unit, className, label = '', size = 'sm', symbol = '$', variant = 'default', dark = false, unstyled = false, commaSeparator = false, } = props const emphasizedClass = emphasized ? '' : '_deemphasized' let variantClass if (variant === 'light') { variantClass = '_light' } else if (variant === 'bold') { variantClass = '_bold' } const [whole, decimal = '00'] = amount.split('.') const ariaProps = buildAriaProps(aria) const dataProps = buildDataProps(data) const htmlProps = buildHtmlProps(htmlOptions) const classes = classnames( buildCss('pb_currency_kit', align, size), globalProps(props), className ) const getFormattedNumber = (input: number | any) => new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1, }).format(input) type AbbrType = 'amount' | 'unit' const getAbbreviatedValue = (abbrType: AbbrType) => { const num = `${getFormattedNumber(whole.split(',').join(''))}`, isAmount = abbrType === 'amount', isUnit = abbrType === 'unit' return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : '' } const getMatchingDecimalAmount = decimals === "matching" ? amount : whole const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}` const formatAmount = (amount: string) => { if (!commaSeparator) return amount; const [wholePart, decimalPart] = amount.split('.'); const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart)); return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole; } const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount) const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue return (

{label}

{unstyled ? ( <>

{symbol}

{getAmount}

{getAbbreviation} {unit ? unit : getDecimalValue}

) : ( <> {symbol} {getAmount} {getAbbreviation} {unit ? unit : getDecimalValue} )}

) } export default Currency