From 0c8a6e21f0324e25d1ec59bcdddf8c5c49b01421 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Wed, 5 Oct 2016 17:38:02 +0200 Subject: prettier syntax (JSX) for rendering --- gulpfile.js | 1 + lib/decl/preact.d.ts | 4 ++++ lib/vendor/preact.js | 1 + lib/wallet/renderHtml.ts | 49 --------------------------------------------- lib/wallet/renderHtml.tsx | 50 ++++++++++++++++++++++++++++++++++++++++++++++ pages/confirm-contract.tsx | 17 ++++++++-------- tsconfig.json | 3 ++- 7 files changed, 67 insertions(+), 58 deletions(-) delete mode 100644 lib/wallet/renderHtml.ts create mode 100644 lib/wallet/renderHtml.tsx diff --git a/gulpfile.js b/gulpfile.js index 40461b27a..fabfcbdeb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -121,6 +121,7 @@ const paths = { const tsBaseArgs = { target: "es6", jsx: "react", + reactNamespace: "preact", experimentalDecorators: true, module: "system", sourceMap: true, diff --git a/lib/decl/preact.d.ts b/lib/decl/preact.d.ts index fb8a0b764..dfa094e0e 100644 --- a/lib/decl/preact.d.ts +++ b/lib/decl/preact.d.ts @@ -56,12 +56,16 @@ declare namespace preact { function h(node:ComponentConstructor, params:PropsType, ...children:(JSX.Element|string)[]):JSX.Element; function h(node:string, params:JSX.HTMLAttributes|JSX.SVGAttributes, ...children:(JSX.Element|string)[]):JSX.Element; + function createElement(node:ComponentConstructor, params:PropsType, ...children:(JSX.Element|string)[]):JSX.Element; + function createElement(node:string, params:JSX.HTMLAttributes|JSX.SVGAttributes, ...children:(JSX.Element|string)[]):JSX.Element; + function render(node:JSX.Element, parent:Element, merge?:boolean):Element; function rerender():void; function cloneElement(element:JSX.Element, props:any):JSX.Element; + var options:{ syncComponentUpdates?:boolean; debounceRendering?:(render:() => void) => void; diff --git a/lib/vendor/preact.js b/lib/vendor/preact.js index 3b06bb6af..e0239355e 100644 --- a/lib/vendor/preact.js +++ b/lib/vendor/preact.js @@ -460,6 +460,7 @@ render: function() {} }); exports.h = h; + exports.createElement = h; exports.cloneElement = cloneElement; exports.Component = Component; exports.render = render; diff --git a/lib/wallet/renderHtml.ts b/lib/wallet/renderHtml.ts deleted file mode 100644 index 022bce113..000000000 --- a/lib/wallet/renderHtml.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* - 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 - */ - - -import {AmountJson, Contract} from "./types"; - - -let h = preact.h; - -export function prettyAmount(amount: AmountJson) { - let v = amount.value + amount.fraction / 1e6; - return `${v.toFixed(2)} ${amount.currency}`; -} - -export function renderContract(contract: Contract): JSX.Element { - let merchantName = m("strong", contract.merchant.name); - let amount = m("strong", prettyAmount(contract.amount)); - - return h("div", {}, - h("p", {}, - i18n.parts`${merchantName} - wants to enter a contract over ${amount} - with you.`), - h("p", {}, - i18n`You are about to purchase:`), - h('ul', {}, - ...contract.products.map( - (p: any) => h("li", {}, - `${p.description}: ${prettyAmount(p.price)}`)))); -} \ No newline at end of file diff --git a/lib/wallet/renderHtml.tsx b/lib/wallet/renderHtml.tsx new file mode 100644 index 000000000..f3059f940 --- /dev/null +++ b/lib/wallet/renderHtml.tsx @@ -0,0 +1,50 @@ +/* + 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 + */ + + +import {AmountJson, Contract} from "./types"; + +export function prettyAmount(amount: AmountJson) { + let v = amount.value + amount.fraction / 1e6; + return `${v.toFixed(2)} ${amount.currency}`; +} + +export function renderContract(contract: Contract): JSX.Element { + let merchantName = m("strong", contract.merchant.name); + let amount = m("strong", prettyAmount(contract.amount)); + + return ( +
+

{ + i18n.parts`${merchantName} + wants to enter a contract over ${amount} + with you.`} +

+

{i18n`You are about to purchase:`}

+
    + {contract.products.map( + (p: any) => (
  • {`${p.description}: ${prettyAmount(p.price)}`}
    • )) + } +
+
+ ); +} \ No newline at end of file diff --git a/pages/confirm-contract.tsx b/pages/confirm-contract.tsx index 8e553b05b..9c1752568 100644 --- a/pages/confirm-contract.tsx +++ b/pages/confirm-contract.tsx @@ -51,13 +51,14 @@ class Details extends preact.Component { render(props: DetailProps, state: DetailState) { if (state.collapsed) { - return h("div", {}, - h("button", { - className: "linky", - onClick: () => { - this.setState({collapsed: false}); - } - }, "show more details")); + return ( +
+ +
+ ); } else { return h("div", {}, h("button", { @@ -167,7 +168,7 @@ class ContractPrompt extends preact.Component