From ff49e3477e155b94e752c516cf58fdea1ca19d54 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 9 Jun 2022 13:37:33 -0300 Subject: format amount so it is align to fractional digitls --- .../src/components/Amount.stories.tsx | 114 +++++++++++++++++++++ .../src/components/Amount.tsx | 94 +++++++++++++++-- .../src/components/BankDetailsByPaytoType.tsx | 8 +- .../src/components/index.stories.tsx | 5 +- 4 files changed, 210 insertions(+), 11 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/components/Amount.stories.tsx (limited to 'packages/taler-wallet-webextension/src/components') diff --git a/packages/taler-wallet-webextension/src/components/Amount.stories.tsx b/packages/taler-wallet-webextension/src/components/Amount.stories.tsx new file mode 100644 index 000000000..caf35d57e --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/Amount.stories.tsx @@ -0,0 +1,114 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { styled } from "@linaria/react"; +import { Fragment, h, VNode } from "preact"; +import { Amount } from "./Amount.js"; + +export default { + title: "components/amount", + component: Amount, +}; + +const Table = styled.table` + td { + padding: 4px; + } + td { + border-bottom: 1px solid black; + } +`; + +function ProductTable( + prods: string[], + AmountRender: (p: { value: string; index: number }) => VNode = Amount, +): VNode { + return ( + + + + + + {prods.map((value, i) => { + return ( + + + + + ); + })} +
productprice
p{i} + + {/* */} +
+ ); +} + +export const WithoutFixedSizeDefault = (): VNode => + ProductTable(["ARS:19", "ARS:0.1", "ARS:10.02"]); + +export const WithFixedSizeZero = (): VNode => + ProductTable(["ARS:19", "ARS:0.1", "ARS:10.02"], ({ value }) => { + return ; + }); + +export const WithFixedSizeFour = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value }) => { + return ; + }, + ); + +export const WithFixedSizeFourNegative = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + + ); + }, + ); + +export const WithFixedSizeFourOverflow = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10123123.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + + ); + }, + ); + +export const WithFixedSizeFourAccounting = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10123123.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + + ); + }, + ); 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 */ -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 ( - - {amount} {aj.currency} - + + + {negative ? (signType === "accounting" ? "(" : "-") : ""} + + {aj.value} + + + {s} + {negative && signType === "accounting" ? ")" : ""} + + + {hideCurrency ? undefined : ( + +   + {aj.currency} + + )} + ); } diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index ef2a9f243..ec5d1e7aa 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -77,12 +77,16 @@ export function BankDetailsByPaytoType({ - + {payto.segwitAddrs.map((addr, i) => ( - + ))}
{payto.targetPath}{Amounts.stringifyValue(amount)} BTC + BTC +
{addr}{Amounts.stringifyValue(min)} BTC + BTC +
diff --git a/packages/taler-wallet-webextension/src/components/index.stories.tsx b/packages/taler-wallet-webextension/src/components/index.stories.tsx index b98606f6f..053b27f79 100644 --- a/packages/taler-wallet-webextension/src/components/index.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/index.stories.tsx @@ -19,7 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import * as a1 from "./Banner.stories.js"; + import * as a1 from "./Banner.stories.js"; import * as a2 from "./PendingTransactions.stories.js"; +import * as a3 from "./Amount.stories.js"; -export default [a1, a2]; +export default [a1, a2, a3]; -- cgit v1.2.3