lbry-desktop/ui/component/common/credit-amount.jsx

98 lines
2.1 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import React from 'react';
import classnames from 'classnames';
2019-08-27 16:43:42 +02:00
import { formatCredits, formatFullPrice } from 'lbry-redux';
2018-03-26 23:32:43 +02:00
type Props = {
amount: number,
precision: number,
showFree: boolean,
showFullPrice: boolean,
showPlus: boolean,
isEstimate?: boolean,
showLBC?: boolean,
2018-03-26 23:32:43 +02:00
fee?: boolean,
2018-10-19 22:38:07 +02:00
badge?: boolean,
className?: string,
2018-03-26 23:32:43 +02:00
};
class CreditAmount extends React.PureComponent<Props> {
static defaultProps = {
precision: 2,
showFree: false,
showFullPrice: false,
showPlus: false,
showLBC: true,
2019-01-08 19:48:09 +01:00
badge: true,
2018-03-26 23:32:43 +02:00
};
render() {
const {
amount,
precision,
showFullPrice,
showFree,
showPlus,
isEstimate,
fee,
showLBC,
badge,
className,
} = this.props;
2018-03-26 23:32:43 +02:00
const minimumRenderableAmount = 10 ** (-1 * precision);
const fullPrice = formatFullPrice(amount, 2);
const isFree = parseFloat(amount) === 0;
let formattedAmount;
if (showFullPrice) {
formattedAmount = fullPrice;
} else {
formattedAmount =
amount > 0 && amount < minimumRenderableAmount
? `<${minimumRenderableAmount}`
2019-08-27 16:43:42 +02:00
: formatCredits(amount, precision, true);
2018-03-26 23:32:43 +02:00
}
let amountText;
if (showFree && isFree) {
2019-07-02 23:00:05 +02:00
amountText = __('Free');
2018-03-26 23:32:43 +02:00
} else {
amountText = formattedAmount;
if (showPlus && amount > 0) {
amountText = `+${amountText}`;
}
if (showLBC) {
2020-01-03 22:58:12 +01:00
amountText = __('%amount% LBC', { amount: amountText });
2018-03-26 23:32:43 +02:00
}
if (fee) {
2020-01-03 22:58:12 +01:00
amountText = __('%amount% fee', { amount: amountText });
2018-03-26 23:32:43 +02:00
}
}
return (
<span
title={fullPrice}
className={classnames(className, {
2018-10-31 17:33:45 +01:00
badge,
'badge--cost': badge && amount > 0,
2018-10-19 22:38:07 +02:00
'badge--free': badge && isFree,
2018-03-26 23:32:43 +02:00
})}
>
<span>{amountText}</span>
2018-03-26 23:32:43 +02:00
{isEstimate ? (
2019-05-07 23:38:29 +02:00
<span className="credit-amount__estimate" title={__('This is an estimate and does not include data fees')}>
2018-03-26 23:32:43 +02:00
*
</span>
) : null}
</span>
);
}
}
export default CreditAmount;