/* This file is part of TALER (C) 2016 INRIA 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. 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 TALER; see the file COPYING. If not, see */ /** * Helpers functions to render Taler-related data structures to HTML. * * @author Florian Dold */ /** * Imports. */ import { AmountJson, Amounts, amountFractionalBase, } from "@gnu-taler/taler-util"; import { Component, ComponentChildren, JSX } from "preact"; import { JSXInternal } from "preact/src/jsx"; /** * Render amount as HTML, which non-breaking space between * decimal value and currency. */ export function renderAmount(amount: AmountJson | string): JSX.Element { let a; if (typeof amount === "string") { a = Amounts.parse(amount); } else { a = amount; } if (!a) { return (invalid amount); } const x = a.value + a.fraction / amountFractionalBase; return ( {x} {a.currency} ); } export const AmountView = ({ amount, }: { amount: AmountJson | string; }): JSX.Element => renderAmount(amount); /** * Abbreviate a string to a given length, and show the full * string on hover as a tooltip. */ export function abbrev(s: string, n = 5): JSX.Element { let sAbbrev = s; if (s.length > n) { sAbbrev = s.slice(0, n) + ".."; } return ( {sAbbrev} ); } interface CollapsibleState { collapsed: boolean; } interface CollapsibleProps { initiallyCollapsed: boolean; title: string; } /** * Component that shows/hides its children when clicking * a heading. */ export class Collapsible extends Component< CollapsibleProps, CollapsibleState > { constructor(props: CollapsibleProps) { super(props); this.state = { collapsed: props.initiallyCollapsed }; } render(): JSX.Element { const doOpen = (e: any): void => { this.setState({ collapsed: false }); e.preventDefault(); }; const doClose = (e: any): void => { this.setState({ collapsed: true }); e.preventDefault(); }; if (this.state.collapsed) { return (

{" "} {this.props.title}

); } return (

{" "} {this.props.title}

{this.props.children}
); } } interface ExpanderTextProps { text: string; } /** * Show a heading with a toggle to show/hide the expandable content. */ export function ExpanderText({ text }: ExpanderTextProps): JSX.Element { return {text}; } export interface LoadingButtonProps extends JSX.HTMLAttributes { isLoading: boolean; } export function ProgressButton({isLoading, ...rest}: LoadingButtonProps): JSX.Element { return (