diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/Amount.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/Amount.tsx | 94 |
1 files changed, 87 insertions, 7 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Amount.tsx b/packages/taler-wallet-webextension/src/components/Amount.tsx index 8b97896bb..09f65473c 100644 --- a/packages/taler-wallet-webextension/src/components/Amount.tsx +++ b/packages/taler-wallet-webextension/src/components/Amount.tsx @@ -13,15 +13,95 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AmountJson, Amounts, AmountString } from "@gnu-taler/taler-util"; -import { h, VNode, Fragment } from "preact"; +import { + amountFractionalBase, + amountFractionalLength, + AmountJson, + Amounts, + AmountString, +} from "@gnu-taler/taler-util"; +import { Fragment, h, VNode } from "preact"; -export function Amount({ value }: { value: AmountJson | AmountString }): VNode { +export function Amount({ + value, + maxFracSize, + negative, + hideCurrency, + signType = "standard", + signDisplay = "auto", +}: { + negative?: boolean; + value: AmountJson | AmountString; + maxFracSize?: number; + hideCurrency?: boolean; + signType?: "accounting" | "standard"; + signDisplay?: "auto" | "always" | "never" | "exceptZero"; +}): VNode { const aj = Amounts.jsonifyAmount(value); - const amount = Amounts.stringifyValue(aj, 2); + const minFractional = + maxFracSize !== undefined && maxFracSize < 2 ? maxFracSize : 2; + const af = aj.fraction % amountFractionalBase; + let s = ""; + if ((af && maxFracSize) || minFractional > 0) { + s += "."; + let n = af; + for ( + let i = 0; + (maxFracSize === undefined || i < maxFracSize) && + i < amountFractionalLength; + i++ + ) { + if (!n && i >= minFractional) { + break; + } + s = s + Math.floor((n / amountFractionalBase) * 10).toString(); + n = (n * 10) % amountFractionalBase; + } + } + const fontSize = 18; + const letterSpacing = 0; + const mult = 0.7; return ( - <Fragment> - {amount} {aj.currency} - </Fragment> + <span style={{ textAlign: "right", whiteSpace: "nowrap" }}> + <span + style={{ + display: "inline-block", + fontFamily: "monospace", + fontSize, + }} + > + {negative ? (signType === "accounting" ? "(" : "-") : ""} + <span + style={{ + display: "inline-block", + textAlign: "right", + fontFamily: "monospace", + fontSize, + letterSpacing, + }} + > + {aj.value} + </span> + <span + style={{ + display: "inline-block", + width: !maxFracSize ? undefined : `${(maxFracSize + 1) * mult}em`, + textAlign: "left", + fontFamily: "monospace", + fontSize, + letterSpacing, + }} + > + {s} + {negative && signType === "accounting" ? ")" : ""} + </span> + </span> + {hideCurrency ? undefined : ( + <Fragment> + + <span>{aj.currency}</span> + </Fragment> + )} + </span> ); } |