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

107 lines
2.5 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import React from 'react';
import classnames from 'classnames';
2020-09-02 22:08:37 +02:00
import LbcSymbol from 'component/common/lbc-symbol';
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,
className?: string,
noFormat?: boolean,
2021-04-23 21:59:48 +02:00
size?: number,
superChat?: boolean,
superChatLight?: boolean,
2021-07-17 18:08:53 +02:00
isFiat?: boolean,
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,
noFormat: false,
2018-03-26 23:32:43 +02:00
};
render() {
const {
amount,
precision,
showFullPrice,
showFree,
showPlus,
isEstimate,
fee,
showLBC,
className,
noFormat,
2021-04-23 21:59:48 +02:00
size,
superChat,
superChatLight,
isFiat,
} = 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 = noFormat ? amount : formattedAmount;
2018-03-26 23:32:43 +02:00
if (showPlus && amount > 0) {
amountText = `+${amountText}`;
}
if (showLBC && !isFiat) {
2021-04-23 21:59:48 +02:00
amountText = <LbcSymbol postfix={amountText} size={size} />;
} else if (showLBC && isFiat) {
2021-07-17 18:52:36 +02:00
amountText = <p style={{display: 'inline'}}> ${(Math.round(Number(amountText) * 100) / 100).toFixed(2)}</p>;
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 (
2021-04-23 21:59:48 +02:00
<span
title={fullPrice}
className={classnames(className, {
'super-chat': superChat,
'super-chat--light': superChatLight,
})}
>
2020-05-21 17:38:28 +02:00
<span className="credit-amount">{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;