From 7fb527b0009a29605c32e663ab9e6a812a8cc5a8 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Wed, 5 Oct 2016 17:04:57 +0200 Subject: refactor confirm-contract rendering --- lib/decl/preact.d.ts | 556 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 556 insertions(+) create mode 100644 lib/decl/preact.d.ts (limited to 'lib/decl') diff --git a/lib/decl/preact.d.ts b/lib/decl/preact.d.ts new file mode 100644 index 000000000..fb8a0b764 --- /dev/null +++ b/lib/decl/preact.d.ts @@ -0,0 +1,556 @@ +declare namespace preact { + interface ComponentProps { + children?:JSX.Element[]; + key?:string; + } + + interface PreactHTMLAttributes { + key?:string; + } + + interface VNode { + nodeName:ComponentConstructor|string; + attributes:{[name:string]:any}; + children:VNode[]; + key:string; + } + + interface ComponentLifecycle { + componentWillMount?():void; + + componentDidMount?():void; + + componentWillUnmount?():void; + + componentDidUnmount?():void; + + componentWillReceiveProps?(props:PropsType):void; + + shouldComponentUpdate?(props:PropsType):boolean; + + componentWillUpdate?():void; + + componentDidUpdate?():void; + } + + interface ComponentConstructor { + new (props?:PropsType):Component; + } + + abstract class Component implements ComponentLifecycle { + constructor(props?:PropsType); + + state:StateType; + props:PropsType & ComponentProps; + base:HTMLElement; + + linkState:(name:string) => void; + + setState(state:StateType, opts?:any):void; + + forceUpdate():void; + + abstract render(props:PropsType & ComponentProps, state:any):JSX.Element; + } + + 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 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; + vnode?:(vnode:VNode) => void; + event?:(event:Event) => Event; + }; +} + +declare module "preact" { + export = preact; +} + +declare namespace JSX { + interface Element extends preact.VNode { + + } + + interface ElementClass extends preact.Component { + + } + + interface ElementAttributesProperty { + props:any; + } + + interface SVGAttributes { + clipPath?:string; + cx?:number | string; + cy?:number | string; + d?:string; + dx?:number | string; + dy?:number | string; + fill?:string; + fillOpacity?:number | string; + fontFamily?:string; + fontSize?:number | string; + fx?:number | string; + fy?:number | string; + gradientTransform?:string; + gradientUnits?:string; + markerEnd?:string; + markerMid?:string; + markerStart?:string; + offset?:number | string; + opacity?:number | string; + patternContentUnits?:string; + patternUnits?:string; + points?:string; + preserveAspectRatio?:string; + r?:number | string; + rx?:number | string; + ry?:number | string; + spreadMethod?:string; + stopColor?:string; + stopOpacity?:number | string; + stroke?:string; + strokeDasharray?:string; + strokeLinecap?:string; + strokeMiterlimit?:string; + strokeOpacity?:number | string; + strokeWidth?:number | string; + textAnchor?:string; + transform?:string; + version?:string; + viewBox?:string; + x1?:number | string; + x2?:number | string; + x?:number | string; + xlinkActuate?:string; + xlinkArcrole?:string; + xlinkHref?:string; + xlinkRole?:string; + xlinkShow?:string; + xlinkTitle?:string; + xlinkType?:string; + xmlBase?:string; + xmlLang?:string; + xmlSpace?:string; + y1?:number | string; + y2?:number | string; + y?:number | string; + } + + interface PathAttributes { + d:string; + } + + interface EventHandler { + (event:E):void; + } + + type ClipboardEventHandler = EventHandler; + type CompositionEventHandler = EventHandler; + type DragEventHandler = EventHandler; + type FocusEventHandler = EventHandler; + type KeyboardEventHandler = EventHandler; + type MouseEventHandler = EventHandler; + type TouchEventHandler = EventHandler; + type UIEventHandler = EventHandler; + type WheelEventHandler = EventHandler; + type AnimationEventHandler = EventHandler; + type TransitionEventHandler = EventHandler; + + type GenericEventHandler = EventHandler; + + interface DOMAttributed { + // Clipboard Events + onCopy?:ClipboardEventHandler; + onCut?:ClipboardEventHandler; + onPaste?:ClipboardEventHandler; + + // Composition Events + onCompositionEnd?:CompositionEventHandler; + onCompositionStart?:CompositionEventHandler; + onCompositionUpdate?:CompositionEventHandler; + + // Focus Events + onFocus?:FocusEventHandler; + onBlur?:FocusEventHandler; + + // Form Events + onChange?:GenericEventHandler; + onInput?:GenericEventHandler; + onSubmit?:GenericEventHandler; + + // Keyboard Events + onKeyDown?:KeyboardEventHandler; + onKeyPress?:KeyboardEventHandler; + onKeyUp?:KeyboardEventHandler; + + // Media Events + onAbort?:GenericEventHandler; + onCanPlay?:GenericEventHandler; + onCanPlayThrough?:GenericEventHandler; + onDurationChange?:GenericEventHandler; + onEmptied?:GenericEventHandler; + onEncrypted?:GenericEventHandler; + onEnded?:GenericEventHandler; + onLoadedData?:GenericEventHandler; + onLoadedMetadata?:GenericEventHandler; + onLoadStart?:GenericEventHandler; + onPause?:GenericEventHandler; + onPlay?:GenericEventHandler; + onPlaying?:GenericEventHandler; + onProgress?:GenericEventHandler; + onRateChange?:GenericEventHandler; + onSeeked?:GenericEventHandler; + onSeeking?:GenericEventHandler; + onStalled?:GenericEventHandler; + onSuspend?:GenericEventHandler; + onTimeUpdate?:GenericEventHandler; + onVolumeChange?:GenericEventHandler; + onWaiting?:GenericEventHandler; + + // MouseEvents + onClick?:MouseEventHandler; + onContextMenu?:MouseEventHandler; + onDoubleClick?:MouseEventHandler; + onDrag?:DragEventHandler; + onDragEnd?:DragEventHandler; + onDragEnter?:DragEventHandler; + onDragExit?:DragEventHandler; + onDragLeave?:DragEventHandler; + onDragOver?:DragEventHandler; + onDragStart?:DragEventHandler; + onDrop?:DragEventHandler; + onMouseDown?:MouseEventHandler; + onMouseEnter?:MouseEventHandler; + onMouseLeave?:MouseEventHandler; + onMouseMove?:MouseEventHandler; + onMouseOut?:MouseEventHandler; + onMouseOver?:MouseEventHandler; + onMouseUp?:MouseEventHandler; + + // Selection Events + onSelect?:GenericEventHandler; + + // Touch Events + onTouchCancel?:TouchEventHandler; + onTouchEnd?:TouchEventHandler; + onTouchMove?:TouchEventHandler; + onTouchStart?:TouchEventHandler; + + // UI Events + onScroll?:UIEventHandler; + + // Wheel Events + onWheel?:WheelEventHandler; + + // Animation Events + onAnimationStart?:AnimationEventHandler; + onAnimationEnd?:AnimationEventHandler; + onAnimationIteration?:AnimationEventHandler; + + // Transition Events + onTransitionEnd?:TransitionEventHandler; + } + + interface HTMLAttributes extends preact.PreactHTMLAttributes, DOMAttributed { + // Standard HTML Attributes + accept?:string; + acceptCharset?:string; + accessKey?:string; + action?:string; + allowFullScreen?:boolean; + allowTransparency?:boolean; + alt?:string; + async?:boolean; + autocomplete?:string; + autofocus?:boolean; + autoPlay?:boolean; + capture?:boolean; + cellPadding?:number | string; + cellSpacing?:number | string; + charSet?:string; + challenge?:string; + checked?:boolean; + class?:string; + className?:string; + cols?:number; + colSpan?:number; + content?:string; + contentEditable?:boolean; + contextMenu?:string; + controls?:boolean; + coords?:string; + crossOrigin?:string; + data?:string; + dateTime?:string; + default?:boolean; + defer?:boolean; + dir?:string; + disabled?:boolean; + download?:any; + draggable?:boolean; + encType?:string; + form?:string; + formAction?:string; + formEncType?:string; + formMethod?:string; + formNoValidate?:boolean; + formTarget?:string; + frameBorder?:number | string; + headers?:string; + height?:number | string; + hidden?:boolean; + high?:number; + href?:string; + hrefLang?:string; + for?:string; + httpEquiv?:string; + icon?:string; + id?:string; + inputMode?:string; + integrity?:string; + is?:string; + keyParams?:string; + keyType?:string; + kind?:string; + label?:string; + lang?:string; + list?:string; + loop?:boolean; + low?:number; + manifest?:string; + marginHeight?:number; + marginWidth?:number; + max?:number | string; + maxLength?:number; + media?:string; + mediaGroup?:string; + method?:string; + min?:number | string; + minLength?:number; + multiple?:boolean; + muted?:boolean; + name?:string; + noValidate?:boolean; + open?:boolean; + optimum?:number; + pattern?:string; + placeholder?:string; + poster?:string; + preload?:string; + radioGroup?:string; + readOnly?:boolean; + rel?:string; + required?:boolean; + role?:string; + rows?:number; + rowSpan?:number; + sandbox?:string; + scope?:string; + scoped?:boolean; + scrolling?:string; + seamless?:boolean; + selected?:boolean; + shape?:string; + size?:number; + sizes?:string; + span?:number; + spellCheck?:boolean; + src?:string; + srcset?:string; + srcDoc?:string; + srcLang?:string; + srcSet?:string; + start?:number; + step?:number | string; + style?:any; + summary?:string; + tabIndex?:number; + target?:string; + title?:string; + type?:string; + useMap?:string; + value?:string | string[]; + width?:number | string; + wmode?:string; + wrap?:string; + + // RDFa Attributes + about?:string; + datatype?:string; + inlist?:any; + prefix?:string; + property?:string; + resource?:string; + typeof?:string; + vocab?:string; + } + + interface IntrinsicElements { + // HTML + a:HTMLAttributes; + abbr:HTMLAttributes; + address:HTMLAttributes; + area:HTMLAttributes; + article:HTMLAttributes; + aside:HTMLAttributes; + audio:HTMLAttributes; + b:HTMLAttributes; + base:HTMLAttributes; + bdi:HTMLAttributes; + bdo:HTMLAttributes; + big:HTMLAttributes; + blockquote:HTMLAttributes; + body:HTMLAttributes; + br:HTMLAttributes; + button:HTMLAttributes; + canvas:HTMLAttributes; + caption:HTMLAttributes; + cite:HTMLAttributes; + code:HTMLAttributes; + col:HTMLAttributes; + colgroup:HTMLAttributes; + data:HTMLAttributes; + datalist:HTMLAttributes; + dd:HTMLAttributes; + del:HTMLAttributes; + details:HTMLAttributes; + dfn:HTMLAttributes; + dialog:HTMLAttributes; + div:HTMLAttributes; + dl:HTMLAttributes; + dt:HTMLAttributes; + em:HTMLAttributes; + embed:HTMLAttributes; + fieldset:HTMLAttributes; + figcaption:HTMLAttributes; + figure:HTMLAttributes; + footer:HTMLAttributes; + form:HTMLAttributes; + h1:HTMLAttributes; + h2:HTMLAttributes; + h3:HTMLAttributes; + h4:HTMLAttributes; + h5:HTMLAttributes; + h6:HTMLAttributes; + head:HTMLAttributes; + header:HTMLAttributes; + hr:HTMLAttributes; + html:HTMLAttributes; + i:HTMLAttributes; + iframe:HTMLAttributes; + img:HTMLAttributes; + input:HTMLAttributes; + ins:HTMLAttributes; + kbd:HTMLAttributes; + keygen:HTMLAttributes; + label:HTMLAttributes; + legend:HTMLAttributes; + li:HTMLAttributes; + link:HTMLAttributes; + main:HTMLAttributes; + map:HTMLAttributes; + mark:HTMLAttributes; + menu:HTMLAttributes; + menuitem:HTMLAttributes; + meta:HTMLAttributes; + meter:HTMLAttributes; + nav:HTMLAttributes; + noscript:HTMLAttributes; + object:HTMLAttributes; + ol:HTMLAttributes; + optgroup:HTMLAttributes; + option:HTMLAttributes; + output:HTMLAttributes; + p:HTMLAttributes; + param:HTMLAttributes; + picture:HTMLAttributes; + pre:HTMLAttributes; + progress:HTMLAttributes; + q:HTMLAttributes; + rp:HTMLAttributes; + rt:HTMLAttributes; + ruby:HTMLAttributes; + s:HTMLAttributes; + samp:HTMLAttributes; + script:HTMLAttributes; + section:HTMLAttributes; + select:HTMLAttributes; + small:HTMLAttributes; + source:HTMLAttributes; + span:HTMLAttributes; + strong:HTMLAttributes; + style:HTMLAttributes; + sub:HTMLAttributes; + summary:HTMLAttributes; + sup:HTMLAttributes; + table:HTMLAttributes; + tbody:HTMLAttributes; + td:HTMLAttributes; + textarea:HTMLAttributes; + tfoot:HTMLAttributes; + th:HTMLAttributes; + thead:HTMLAttributes; + time:HTMLAttributes; + title:HTMLAttributes; + tr:HTMLAttributes; + track:HTMLAttributes; + u:HTMLAttributes; + ul:HTMLAttributes; + "var":HTMLAttributes; + video:HTMLAttributes; + wbr:HTMLAttributes; + + //SVG + svg:SVGAttributes; + + circle:SVGAttributes; + clipPath:SVGAttributes; + defs:SVGAttributes; + ellipse:SVGAttributes; + feBlend:SVGAttributes; + feColorMatrix:SVGAttributes; + feComponentTransfer:SVGAttributes; + feComposite:SVGAttributes; + feConvolveMatrix:SVGAttributes; + feDiffuseLighting:SVGAttributes; + feDisplacementMap:SVGAttributes; + feFlood:SVGAttributes; + feGaussianBlur:SVGAttributes; + feImage:SVGAttributes; + feMerge:SVGAttributes; + feMergeNode:SVGAttributes; + feMorphology:SVGAttributes; + feOffset:SVGAttributes; + feSpecularLighting:SVGAttributes; + feTile:SVGAttributes; + feTurbulence:SVGAttributes; + filter:SVGAttributes; + foreignObject:SVGAttributes; + g:SVGAttributes; + image:SVGAttributes; + line:SVGAttributes; + linearGradient:SVGAttributes; + marker:SVGAttributes; + mask:SVGAttributes; + path:SVGAttributes; + pattern:SVGAttributes; + polygon:SVGAttributes; + polyline:SVGAttributes; + radialGradient:SVGAttributes; + rect:SVGAttributes; + stop:SVGAttributes; + symbol:SVGAttributes; + text:SVGAttributes; + tspan:SVGAttributes; + use:SVGAttributes; + } +} -- cgit v1.2.3 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 (limited to 'lib/decl') 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