diff options
Diffstat (limited to 'src/webex/renderHtml.tsx')
-rw-r--r-- | src/webex/renderHtml.tsx | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/src/webex/renderHtml.tsx b/src/webex/renderHtml.tsx index 51f9019ef..2a5b50533 100644 --- a/src/webex/renderHtml.tsx +++ b/src/webex/renderHtml.tsx @@ -73,6 +73,8 @@ export function renderAmount(amount: AmountJson) { return <span>{x} {amount.currency}</span>; } +export const AmountDisplay = ({amount}: {amount: AmountJson}) => renderAmount(amount); + /** * Abbreviate a string to a given length, and show the full @@ -89,3 +91,40 @@ export function abbrev(s: string, n: number = 5) { </span> ); } + + + +interface CollapsibleState { + collapsed: boolean; +} + +interface CollapsibleProps { + initiallyCollapsed: boolean; + title: string; +} + +export class Collapsible extends React.Component<CollapsibleProps, CollapsibleState> { + constructor(props: CollapsibleProps) { + super(props); + this.state = { collapsed: props.initiallyCollapsed }; + } + render() { + const doOpen = (e: any) => { + this.setState({collapsed: false}); + e.preventDefault(); + }; + const doClose = (e: any) => { + this.setState({collapsed: true}); + e.preventDefault(); + }; + if (this.state.collapsed) { + return <h2><a className="opener opener-collapsed" href="#" onClick={doOpen}>{this.props.title}</a></h2>; + } + return ( + <div> + <h2><a className="opener opener-open" href="#" onClick={doClose}>{this.props.title}</a></h2> + {this.props.children} + </div> + ); + } +} |