added basePath to markdown components in order to allow navigation between md files

This commit is contained in:
Sebastian Sdorra
2020-05-19 15:52:11 +02:00
parent d1f10ec5a7
commit ffd04eb55b
3 changed files with 22 additions and 12 deletions

View File

@@ -29,13 +29,14 @@ import styled from "styled-components";
type Props = {
file: File;
basePath: string;
};
const MarkdownContent = styled.div`
padding: 0.5rem;
`;
const MarkdownViewer: FC<Props> = ({ file }) => {
const MarkdownViewer: FC<Props> = ({ file, basePath }) => {
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | undefined>(undefined);
const [content, setContent] = useState("");
@@ -62,7 +63,7 @@ const MarkdownViewer: FC<Props> = ({ file }) => {
return (
<MarkdownContent>
<MarkdownView content={content} />
<MarkdownView content={content} basePath={basePath} />
</MarkdownContent>
);
};

View File

@@ -21,13 +21,13 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC, useState } from "react";
import React, {FC, useState} from "react";
import styled from "styled-components";
import MarkdownViewer from "./MarkdownViewer";
import SourcecodeViewer from "./SourcecodeViewer";
import { File } from "@scm-manager/ui-types";
import { Button } from "@scm-manager/ui-components";
import { useTranslation } from "react-i18next";
import {File} from "@scm-manager/ui-types";
import {Button} from "@scm-manager/ui-components";
import {useTranslation} from "react-i18next";
const ToggleButton = styled(Button)`
max-width: 1rem;
@@ -43,10 +43,11 @@ const Container = styled.div`
type Props = {
file: File;
basePath: string;
};
const SwitchableMarkdownViewer: FC<Props> = ({ file }) => {
const { t } = useTranslation("repos");
const SwitchableMarkdownViewer: FC<Props> = ({file, basePath}) => {
const {t} = useTranslation("repos");
const [renderMarkdown, setRenderMarkdown] = useState(true);
const toggleMarkdown = () => {
@@ -64,9 +65,10 @@ const SwitchableMarkdownViewer: FC<Props> = ({ file }) => {
: t("sources.content.toggleButton.showMarkdown")
}
>
<i className="fab fa-markdown" />
<i className="fab fa-markdown"/>
</ToggleButton>
{renderMarkdown ? <MarkdownViewer file={file} /> : <SourcecodeViewer file={file} language={"MARKDOWN"} />}
{renderMarkdown ? <MarkdownViewer file={file} basePath={basePath}/> :
<SourcecodeViewer file={file} language={"MARKDOWN"}/>}
</Container>
);
};