[WIP] docs view
This commit is contained in:
Piotr Janosz
committed by
fabioberger
fabioberger
parent
d56fb374a7
commit
8154209eab
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { match } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
|
||||
@@ -20,7 +20,7 @@ import { Heading, Paragraph } from 'ts/components/text';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
interface Props {
|
||||
interface IDocsViewProps {
|
||||
history: History;
|
||||
location: Location;
|
||||
match: match<any>;
|
||||
@@ -31,79 +31,59 @@ interface Props {
|
||||
};
|
||||
}
|
||||
|
||||
interface State {
|
||||
interface IDocsViewState {
|
||||
title: string;
|
||||
Component: JSX.Element | string;
|
||||
}
|
||||
|
||||
export class DocsView extends React.Component<Props, State> {
|
||||
public state = {
|
||||
title: '',
|
||||
Component: '',
|
||||
mdxComponents: {
|
||||
p: Paragraph,
|
||||
h1: LargeHeading,
|
||||
h2: H2,
|
||||
h3: H3,
|
||||
ol: TutorialSteps,
|
||||
ul: UnorderedList,
|
||||
code: Code,
|
||||
table: Table,
|
||||
hr: Separator,
|
||||
Notification,
|
||||
Tabs,
|
||||
TabList,
|
||||
Tab,
|
||||
TabPanel,
|
||||
},
|
||||
};
|
||||
public componentDidMount(): void {
|
||||
// tslint:disable-next-line: no-console
|
||||
console.log(this.props.match.params.page);
|
||||
this._addComponentAsync(this.props.match.params.page);
|
||||
}
|
||||
public componentDidUpdate(prevProps: Props, prevState: State): void {
|
||||
if (prevProps.match.params.page !== this.props.match.params.page) {
|
||||
this._addComponentAsync(this.props.match.params.page);
|
||||
}
|
||||
}
|
||||
public render(): React.ReactNode {
|
||||
const { title, Component, mdxComponents } = this.state;
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero isHome={false} title={title} />
|
||||
<Section maxWidth={'1030px'} isPadded={false} padding="0 0">
|
||||
<Columns>
|
||||
<aside>
|
||||
<h3>Sidebar</h3>
|
||||
</aside>
|
||||
<ContentWrapper>
|
||||
<MDXProvider components={mdxComponents}>{Component ? <Component /> : null}</MDXProvider>
|
||||
<HelpCallout />
|
||||
<HelpfulCta />
|
||||
</ContentWrapper>
|
||||
</Columns>
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
);
|
||||
}
|
||||
private async _addComponentAsync(name: string): Promise<void> {
|
||||
const component = await import(`../../../md/new-docs/${name}.mdx`).catch(e => {
|
||||
return null;
|
||||
});
|
||||
if (!component) {
|
||||
this.setState({
|
||||
Component: '',
|
||||
});
|
||||
}
|
||||
export const DocsView: React.FC<IDocsViewProps> = props => {
|
||||
const [state, setState] = useState<IDocsViewState>({
|
||||
title: 'Loading',
|
||||
Component: Separator,
|
||||
});
|
||||
|
||||
this.setState({
|
||||
title: component.meta.title,
|
||||
Component: component.default,
|
||||
});
|
||||
}
|
||||
}
|
||||
const { title, Component } = state;
|
||||
|
||||
useEffect(() => {
|
||||
// tslint:disable-next-line: no-console
|
||||
console.log(props.match.params.page);
|
||||
void addComponentAsync(props.match.params.page);
|
||||
}, [props.match.params.page]);
|
||||
|
||||
const addComponentAsync = async (name: string) => {
|
||||
const component = await import(`../../../md/new-docs/${name}.mdx`);
|
||||
// if (component) {
|
||||
// setState({
|
||||
// title: component.meta.title,
|
||||
// Component: component.default,
|
||||
// });
|
||||
// }
|
||||
// @TODO: add error handling, loading
|
||||
};
|
||||
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero isHome={false} title={title} />
|
||||
<Section maxWidth="1030px" isPadded={false} padding="0 0">
|
||||
<Columns>
|
||||
<aside>
|
||||
<h3>Sidebar</h3>
|
||||
</aside>
|
||||
<ContentWrapper>
|
||||
<MDXProvider components={mdxComponents}>
|
||||
{/*
|
||||
// @ts-ignore */}
|
||||
<Component />
|
||||
</MDXProvider>
|
||||
<HelpCallout />
|
||||
<HelpfulCta />
|
||||
</ContentWrapper>
|
||||
</Columns>
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
);
|
||||
};
|
||||
|
||||
const Columns = styled.div`
|
||||
display: grid;
|
||||
@@ -139,3 +119,20 @@ const H3 = styled(Heading).attrs({
|
||||
size: 'default',
|
||||
asElement: 'h3',
|
||||
})``;
|
||||
|
||||
const mdxComponents = {
|
||||
p: Paragraph,
|
||||
h1: LargeHeading,
|
||||
h2: H2,
|
||||
h3: H3,
|
||||
ol: TutorialSteps,
|
||||
ul: UnorderedList,
|
||||
code: Code,
|
||||
table: Table,
|
||||
hr: Separator,
|
||||
Notification,
|
||||
Tabs,
|
||||
TabList,
|
||||
Tab,
|
||||
TabPanel,
|
||||
};
|
||||
|
||||
141
packages/website/ts/pages/docs/view_OLDER.tsx
Normal file
141
packages/website/ts/pages/docs/view_OLDER.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import React from 'react';
|
||||
import { match } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
|
||||
import { Code } from 'ts/components/docs/code';
|
||||
import { HelpCallout } from 'ts/components/docs/help_callout';
|
||||
import { HelpfulCta } from 'ts/components/docs/helpful_cta';
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { Notification } from 'ts/components/docs/notification';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
import { Table } from 'ts/components/docs/table';
|
||||
import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
|
||||
import { TutorialSteps } from 'ts/components/docs/tutorial_steps';
|
||||
import { UnorderedList } from 'ts/components/docs/unordered_list';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Section } from 'ts/components/newLayout';
|
||||
import { Heading, Paragraph } from 'ts/components/text';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
interface Props {
|
||||
history: History;
|
||||
location: Location;
|
||||
match: match<any>;
|
||||
theme: {
|
||||
bgColor: string;
|
||||
textColor: string;
|
||||
linkColor: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface State {
|
||||
title: string;
|
||||
Component: JSX.Element | string;
|
||||
}
|
||||
|
||||
export class DocsView extends React.Component<Props, State> {
|
||||
public state = {
|
||||
title: '',
|
||||
Component: '',
|
||||
mdxComponents: {
|
||||
p: Paragraph,
|
||||
h1: LargeHeading,
|
||||
h2: H2,
|
||||
h3: H3,
|
||||
ol: TutorialSteps,
|
||||
ul: UnorderedList,
|
||||
code: Code,
|
||||
table: Table,
|
||||
hr: Separator,
|
||||
Notification,
|
||||
Tabs,
|
||||
TabList,
|
||||
Tab,
|
||||
TabPanel,
|
||||
},
|
||||
};
|
||||
public componentDidMount(): void {
|
||||
// tslint:disable-next-line: no-console
|
||||
console.log(this.props.match.params.page);
|
||||
this._addComponentAsync(this.props.match.params.page);
|
||||
}
|
||||
public componentDidUpdate(prevProps: Props, prevState: State): void {
|
||||
if (prevProps.match.params.page !== this.props.match.params.page) {
|
||||
this._addComponentAsync(this.props.match.params.page);
|
||||
}
|
||||
}
|
||||
public render(): React.ReactNode {
|
||||
const { title, Component, mdxComponents } = this.state;
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero isHome={false} title={title} />
|
||||
<Section maxWidth={'1030px'} isPadded={false} padding="0 0">
|
||||
<Columns>
|
||||
<aside>
|
||||
<h3>Sidebar</h3>
|
||||
</aside>
|
||||
<ContentWrapper>
|
||||
<MDXProvider components={mdxComponents}>{Component ? <Component /> : null}</MDXProvider>
|
||||
<HelpCallout />
|
||||
<HelpfulCta />
|
||||
</ContentWrapper>
|
||||
</Columns>
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
);
|
||||
}
|
||||
private async _addComponentAsync(name: string): Promise<void> {
|
||||
const component = await import(`../../../md/new-docs/${name}.mdx`).catch(e => {
|
||||
return null;
|
||||
});
|
||||
if (!component) {
|
||||
this.setState({
|
||||
Component: '',
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
title: component.meta.title,
|
||||
Component: component.default,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const Columns = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: 230px 1fr;
|
||||
grid-column-gap: 118px;
|
||||
grid-row-gap: 30px;
|
||||
`;
|
||||
|
||||
const ContentWrapper = styled.article`
|
||||
min-height: 300px;
|
||||
`;
|
||||
|
||||
const Separator = styled.hr`
|
||||
border-width: 0 0 1px;
|
||||
border-color: #e4e4e4;
|
||||
height: 0;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
`;
|
||||
|
||||
const LargeHeading = styled(Heading).attrs({
|
||||
asElement: 'h1',
|
||||
})`
|
||||
font-size: 2.125rem !important;
|
||||
`;
|
||||
|
||||
const H2 = styled(Heading).attrs({
|
||||
size: 'default',
|
||||
asElement: 'h2',
|
||||
})``;
|
||||
|
||||
const H3 = styled(Heading).attrs({
|
||||
size: 'default',
|
||||
asElement: 'h3',
|
||||
})``;
|
||||
Reference in New Issue
Block a user