aboutsummaryrefslogtreecommitdiff
path: root/src/webex/renderHtml.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/webex/renderHtml.tsx')
-rw-r--r--src/webex/renderHtml.tsx39
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}&nbsp;{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>
+ );
+ }
+}