diff options
author | Sebastian <sebasjm@gmail.com> | 2022-06-09 13:37:33 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-06-09 13:37:33 -0300 |
commit | ff49e3477e155b94e752c516cf58fdea1ca19d54 (patch) | |
tree | c47cdb74081caf6e703306f8f9f15669d1cdd30b /packages/taler-wallet-webextension/src/components | |
parent | eb8bcc95324f3282003b4870d890d0b9f570ee46 (diff) | |
download | wallet-core-ff49e3477e155b94e752c516cf58fdea1ca19d54.tar.xz |
format amount so it is align to fractional digitls
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
4 files changed, 210 insertions, 11 deletions
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 <http://www.gnu.org/licenses/> + */ + +/** + * + * @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 ( + <Table> + <tr> + <td>product</td> + <td>price</td> + </tr> + {prods.map((value, i) => { + return ( + <tr key={i}> + <td>p{i}</td> + <td> + <AmountRender value={value} index={i} /> + {/* <Amount value={value} fracSize={fracSize} /> */} + </td> + </tr> + ); + })} + </Table> + ); +} + +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 <Amount value={value} maxFracSize={0} />; + }); + +export const WithFixedSizeFour = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value }) => { + return <Amount value={value} maxFracSize={4} />; + }, + ); + +export const WithFixedSizeFourNegative = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + <Amount value={value} maxFracSize={4} negative={index % 2 === 0} /> + ); + }, + ); + +export const WithFixedSizeFourOverflow = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10123123.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + <Amount value={value} maxFracSize={4} negative={index % 2 === 0} /> + ); + }, + ); + +export const WithFixedSizeFourAccounting = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10123123.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + <Amount + value={value} + signType="accounting" + maxFracSize={4} + negative={index % 2 === 0} + /> + ); + }, + ); 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> ); } 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({ <table> <tr> <td>{payto.targetPath}</td> - <td>{Amounts.stringifyValue(amount)} BTC</td> + <td> + <Amount value={amount} hideCurrency /> BTC + </td> </tr> {payto.segwitAddrs.map((addr, i) => ( <tr key={i}> <td>{addr}</td> - <td>{Amounts.stringifyValue(min)} BTC</td> + <td> + <Amount value={min} hideCurrency /> BTC + </td> </tr> ))} </table> 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]; |