woocommerce/plugins/woocommerce-blocks/assets/js/base/components/formatted-monetary-amount/index.js

83 lines
1.8 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import NumberFormat from 'react-number-format';
import classNames from 'classnames';
/**
* Internal dependencies
*/
import './style.scss';
/**
* Formats currency data into the expected format for NumberFormat.
*
* @param {Object} currency Currency data.
* @return {Object} Formatted props for NumberFormat.
*/
const currencyToNumberFormat = ( currency ) => {
return {
thousandSeparator: currency.thousandSeparator,
decimalSeparator: currency.decimalSeparator,
decimalScale: currency.minorUnit,
fixedDecimalScale: true,
prefix: currency.prefix,
suffix: currency.suffix,
isNumericString: true,
};
};
/**
* Formatted price component.
*
* Takes a price and returns a formatted price using the NumberFormat component.
*
* @param {Object} props Component props.
*/
const FormattedMonetaryAmount = ( {
className,
value,
currency,
onValueChange,
...props
} ) => {
if ( value === '-' ) {
return null;
}
const priceValue = value / 10 ** currency.minorUnit;
if ( ! Number.isFinite( priceValue ) ) {
return null;
}
const classes = classNames( 'wc-block-formatted-money-amount', className );
const numberFormatProps = {
displayType: 'text',
...props,
...currencyToNumberFormat( currency ),
value: undefined,
currency: undefined,
onValueChange: undefined,
};
// Wrapper for NumberFormat onValueChange which handles subunit conversion.
const onValueChangeWrapper = onValueChange
? ( values ) => {
const minorUnitValue = values.value * 10 ** currency.minorUnit;
onValueChange( minorUnitValue );
}
: () => {};
return (
<NumberFormat
className={ classes }
{ ...numberFormatProps }
value={ priceValue }
onValueChange={ onValueChangeWrapper }
/>
);
};
export default FormattedMonetaryAmount;