summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/helpApp/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'sdnr/wt/odlux/apps/helpApp/src/components')
-rw-r--r--sdnr/wt/odlux/apps/helpApp/src/components/markdown.tsx60
-rw-r--r--sdnr/wt/odlux/apps/helpApp/src/components/subMenuEntry.tsx37
2 files changed, 97 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/apps/helpApp/src/components/markdown.tsx b/sdnr/wt/odlux/apps/helpApp/src/components/markdown.tsx
new file mode 100644
index 000000000..ea272bc4d
--- /dev/null
+++ b/sdnr/wt/odlux/apps/helpApp/src/components/markdown.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+import * as marked from 'marked';
+import * as hljs from 'highlight.js';
+
+type MarkdownComponentProps = {
+ text: string;
+ className?: string;
+ markedOptions?: marked.MarkedOptions;
+ style?: React.CSSProperties
+}
+
+const defaultRenderer = new marked.Renderer();
+defaultRenderer.link = (href, title, text) => (
+ `<a target="_blank" rel="noopener noreferrer" href="${ href }" title="${ title }">${ text }</a>`
+);
+
+
+class MarkdownComponent extends React.Component<MarkdownComponentProps> {
+ constructor(props: MarkdownComponentProps) {
+ super(props);
+
+ const markedOptions: marked.MarkedOptions = {
+ gfm: true,
+ tables: true,
+ breaks: false,
+ pedantic: false,
+ sanitize: true,
+ smartLists: true,
+ smartypants: false,
+ langPrefix: 'hljs ',
+ ...(this.props.markedOptions || {}),
+ highlight: (code, lang) => {
+ if (!!(lang && hljs.getLanguage(lang))) {
+ return hljs.highlight(lang, code).value;
+ }
+ return code;
+ }
+ };
+
+ marked.setOptions(markedOptions);
+ }
+ render() {
+ const { text, className, style } = this.props;
+
+
+ const html = (marked(text || '', { renderer: this.props.markedOptions && this.props.markedOptions.renderer || defaultRenderer }));
+
+ return (
+ <div
+ dangerouslySetInnerHTML={ { __html: html } }
+ className={ className }
+ style={ style }
+ />
+ );
+ }
+}
+
+export const Markdown = MarkdownComponent;
+
diff --git a/sdnr/wt/odlux/apps/helpApp/src/components/subMenuEntry.tsx b/sdnr/wt/odlux/apps/helpApp/src/components/subMenuEntry.tsx
new file mode 100644
index 000000000..72bb39e39
--- /dev/null
+++ b/sdnr/wt/odlux/apps/helpApp/src/components/subMenuEntry.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
+import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
+import { TreeView, TreeViewCtorType } from '../../../../framework/src/components/material-ui/treeView';
+
+import { ListItemText } from '@material-ui/core';
+
+import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
+
+import { TocTreeNode } from '../models/tocNode';
+
+const TocTree = TreeView as any as TreeViewCtorType<TocTreeNode>;
+
+const mapProps = (state: IApplicationStoreState) => ({
+ helpToc: state.helpApp.toc,
+ helpBusy: state.helpApp.busy
+});
+
+const mapDisp = (dispatcher: IDispatcher) => ({
+ requestDocument: (node: TocTreeNode) => dispatcher.dispatch(new NavigateToApplication("helpApp", node.uri))
+});
+
+const SubMenuEntryComponent: React.SFC<Connect<typeof mapProps, typeof mapDisp>> = (props) => {
+ return props.helpToc
+ ? (
+ <TocTree items={ props.helpToc } contentProperty={ "label" } childrenProperty={ "nodes" } depthOffset={ 1 }
+ useFolderIcons={ false } enableSearchBar={ false } onItemClick={ props.requestDocument } />
+ )
+ : (
+ <ListItemText >Loading ...</ListItemText>
+ )
+};
+
+export const SubMenuEntry = connect(mapProps, mapDisp)(SubMenuEntryComponent);
+export default SubMenuEntry;
+