aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/helpApp/src/views/helpApplication.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'sdnr/wt/odlux/apps/helpApp/src/views/helpApplication.tsx')
-rw-r--r--sdnr/wt/odlux/apps/helpApp/src/views/helpApplication.tsx53
1 files changed, 53 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/apps/helpApp/src/views/helpApplication.tsx b/sdnr/wt/odlux/apps/helpApp/src/views/helpApplication.tsx
new file mode 100644
index 000000000..dedb93607
--- /dev/null
+++ b/sdnr/wt/odlux/apps/helpApp/src/views/helpApplication.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as marked from 'marked';
+
+import { resolvePath } from '../utilities/path';
+
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+import connect, { Connect } from '../../../../framework/src/flux/connect';
+
+import { Markdown } from "../components/markdown";
+
+import '!style-loader!css-loader!github-markdown-css/github-markdown.css'
+
+const mapProps = (state: IApplicationStoreState) => ({
+ content: state.helpApp.content,
+ currentPath: state.helpApp.currentPath
+});
+
+type HelpApplicationComponentProps = Connect<typeof mapProps>;
+
+class HelpApplicationComponent extends React.Component<HelpApplicationComponentProps> {
+
+ /**
+ * Initializes a new instance.
+ */
+ constructor(props: HelpApplicationComponentProps) {
+ super(props);
+
+ this.renderer = new marked.Renderer();
+
+ this.renderer.link = (href: string, title: string, text: string) => {
+ // check if href is rel or abs
+ const absUrlMatch = href.trim().match(/^https?:\/\//i);
+ return `<a href="${ absUrlMatch ? href : resolvePath('#/helpApp/', this.props.currentPath || '/', href) }" title="${ title }" >${ text }</a>`
+ };
+
+ this.renderer.image = (href: string, title: string) => {
+ return `<img src="${ resolvePath('/help/', this.props.currentPath || '/', href) }" alt="${ title }" />`
+ };
+
+ }
+
+ render(): JSX.Element {
+ return this.props.content ? (
+ <Markdown text={ this.props.content } markedOptions={ { renderer: this.renderer } } className="markdown-body"
+ style={{ maxWidth: "960px", margin: "1.5em auto" }} />
+ ) : (<h2>Loading ...</h2>)
+ }
+
+ private renderer: marked.Renderer;
+}
+
+export const HelpApplication = connect(mapProps)(HelpApplicationComponent);
+export default HelpApplication; \ No newline at end of file