2 * ============LICENSE_START========================================================================
3 * ONAP : ccsdk feature sdnr wt odlux
4 * =================================================================================================
5 * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
6 * =================================================================================================
7 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
8 * in compliance with the License. You may obtain a copy of the License at
10 * http://www.apache.org/licenses/LICENSE-2.0
12 * Unless required by applicable law or agreed to in writing, software distributed under the License
13 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
14 * or implied. See the License for the specific language governing permissions and limitations under
16 * ============LICENSE_END==========================================================================
18 import React from 'react';
19 import * as marked from 'marked';
21 import { resolvePath } from '../utilities/path';
23 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
24 import { connect, Connect } from '../../../../framework/src/flux/connect';
26 import { Markdown } from "../components/markdown";
28 import '!style-loader!css-loader!github-markdown-css/github-markdown.css'
30 const mapProps = (state: IApplicationStoreState) => ({
31 content: state.help.content,
32 currentPath: state.help.currentPath
35 const containerStyle = {
47 type HelpApplicationComponentProps = Connect<typeof mapProps>;
49 class HelpApplicationComponent extends React.Component<HelpApplicationComponentProps> {
52 * Initializes a new instance.
54 constructor(props: HelpApplicationComponentProps) {
57 this.renderer = new marked.Renderer();
59 this.renderer.link = (href: string, title: string, text: string) => {
60 // check if href is rel or abs
61 const absUrlMatch = href.trim().match(/^https?:\/\//i);
62 return `<a href="${absUrlMatch ? href : resolvePath('#/help/', this.props.currentPath || '/', href)}" title="${title}" >${text}</a>`
65 this.renderer.image = (href: string, title: string) => {
66 return `<img src="${resolvePath('/help/', this.props.currentPath || '/', href)}" alt="${title}" />`
71 render(): JSX.Element {
72 return this.props.content ? (
73 <div style={containerStyle}>
74 <Markdown text={this.props.content} markedOptions={{ renderer: this.renderer }} className="markdown-body"
77 ) : (<h2>Loading ...</h2>)
80 private renderer: marked.Renderer;
83 export const HelpApplication = connect(mapProps)(HelpApplicationComponent);
84 export default HelpApplication;