Fix flow type errors of all viewers #2039
6 changed files with 55 additions and 29 deletions
|
@ -6,25 +6,34 @@ import remarkEmoji from 'remark-emoji';
|
||||||
import ExternalLink from 'component/externalLink';
|
import ExternalLink from 'component/externalLink';
|
||||||
import defaultSchema from 'hast-util-sanitize/lib/github.json';
|
import defaultSchema from 'hast-util-sanitize/lib/github.json';
|
||||||
|
|
||||||
|
type MarkdownProps = {
|
||||||
|
content: ?string,
|
||||||
|
promptLinks?: boolean,
|
||||||
|
};
|
||||||
|
|
||||||
|
type SimpleLinkProps = {
|
||||||
|
href?: string,
|
||||||
|
title?: string,
|
||||||
|
children?: React.Node,
|
||||||
|
};
|
||||||
|
|
||||||
|
const SimpleLink = (props: SimpleLinkProps) => {
|
||||||
|
const { href, title, children } = props;
|
||||||
|
return (
|
||||||
|
<a href={href} title={title}>
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
// Use github sanitation schema
|
// Use github sanitation schema
|
||||||
const schema = { ...defaultSchema };
|
const schema = { ...defaultSchema };
|
||||||
|
|
||||||
// Extend sanitation schema to support lbry protocol
|
// Extend sanitation schema to support lbry protocol
|
||||||
schema.protocols.href[3] = 'lbry';
|
schema.protocols.href[3] = 'lbry';
|
||||||
|
|
||||||
type MarkdownProps = {
|
|
||||||
content: string,
|
|
||||||
promptLinks?: boolean,
|
|
||||||
};
|
|
||||||
|
|
||||||
const SimpleLink = ({ href, title, children }) => (
|
|
||||||
<a href={href} title={title}>
|
|
||||||
{children}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
|
|
||||||
const MarkdownPreview = (props: MarkdownProps) => {
|
const MarkdownPreview = (props: MarkdownProps) => {
|
||||||
const { content, externalLinks, promptLinks } = props;
|
const { content, promptLinks } = props;
|
||||||
const remarkOptions = {
|
const remarkOptions = {
|
||||||
sanitize: schema,
|
sanitize: schema,
|
||||||
remarkReactComponents: {
|
remarkReactComponents: {
|
||||||
|
|
|
@ -10,11 +10,11 @@ import HtmlViewer from 'component/viewers/htmlViewer';
|
||||||
type Props = {
|
type Props = {
|
||||||
mediaType: string,
|
mediaType: string,
|
||||||
source: {
|
source: {
|
||||||
|
stream: string => void,
|
||||||
fileName: string,
|
fileName: string,
|
||||||
fileType: string,
|
fileType: string,
|
||||||
|
contentType: string,
|
||||||
downloadPath: string,
|
downloadPath: string,
|
||||||
stream: opts => void,
|
|
||||||
blob: callback => void,
|
|
||||||
},
|
},
|
||||||
currentTheme: string,
|
currentTheme: string,
|
||||||
};
|
};
|
||||||
|
|
|
@ -22,12 +22,12 @@ import 'codemirror/mode/javascript/javascript';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
theme: string,
|
theme: string,
|
||||||
value: string,
|
value: ?string,
|
||||||
contentType: string,
|
contentType: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
class CodeViewer extends React.PureComponent<Props> {
|
class CodeViewer extends React.PureComponent<Props> {
|
||||||
constructor(props) {
|
constructor(props: Props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.codeMirror = null;
|
this.codeMirror = null;
|
||||||
this.textarea = React.createRef();
|
this.textarea = React.createRef();
|
||||||
|
@ -54,6 +54,8 @@ class CodeViewer extends React.PureComponent<Props> {
|
||||||
this.codeMirror.on('contextmenu', openSnippetMenu);
|
this.codeMirror.on('contextmenu', openSnippetMenu);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
codeMirror: any;
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { value } = this.props;
|
const { value } = this.props;
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -8,19 +8,25 @@ import MarkdownPreview from 'component/common/markdown-preview';
|
||||||
type Props = {
|
type Props = {
|
||||||
theme: string,
|
theme: string,
|
||||||
source: {
|
source: {
|
||||||
stream: opts => void,
|
stream: string => any,
|
||||||
fileType: string,
|
fileType: string,
|
||||||
contentType: string,
|
contentType: string,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
class DocumentViewer extends React.PureComponent<Props> {
|
type State = {
|
||||||
constructor(props) {
|
error: boolean,
|
||||||
|
loading: boolean,
|
||||||
|
content: ?string,
|
||||||
|
};
|
||||||
|
|
||||||
|
class DocumentViewer extends React.PureComponent<Props, State> {
|
||||||
|
constructor(props: Props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
error: null,
|
error: false,
|
||||||
content: null,
|
|
||||||
loading: true,
|
loading: true,
|
||||||
|
content: null,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,13 +44,14 @@ class DocumentViewer extends React.PureComponent<Props> {
|
||||||
this.setState({ content: data, loading: false });
|
this.setState({ content: data, loading: false });
|
||||||
});
|
});
|
||||||
|
|
||||||
stream.on('error', error => {
|
stream.on('error', () => {
|
||||||
this.setState({ error: true, loading: false });
|
this.setState({ error: true, loading: false });
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
renderDocument(content = null) {
|
renderDocument() {
|
||||||
let viewer = null;
|
let viewer = null;
|
||||||
|
const { content } = this.state;
|
||||||
const { source, theme } = this.props;
|
const { source, theme } = this.props;
|
||||||
const { fileType, contentType } = source;
|
const { fileType, contentType } = source;
|
||||||
const markdownType = ['md', 'markdown'];
|
const markdownType = ['md', 'markdown'];
|
||||||
|
@ -70,7 +77,7 @@ class DocumentViewer extends React.PureComponent<Props> {
|
||||||
<div className="file-render__viewer document-viewer">
|
<div className="file-render__viewer document-viewer">
|
||||||
{loading && !error && <LoadingScreen status={loadingMessage} spinner />}
|
{loading && !error && <LoadingScreen status={loadingMessage} spinner />}
|
||||||
{error && <LoadingScreen status={errorMessage} spinner={!error} />}
|
{error && <LoadingScreen status={errorMessage} spinner={!error} />}
|
||||||
{isReady && this.renderDocument(content)}
|
{isReady && this.renderDocument()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,11 +10,17 @@ type Props = {
|
||||||
source: string,
|
source: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
class DocxViewer extends React.PureComponent<Props> {
|
type State = {
|
||||||
constructor(props) {
|
error: boolean,
|
||||||
|
loading: boolean,
|
||||||
|
content: ?string,
|
||||||
|
};
|
||||||
|
|
||||||
|
class DocxViewer extends React.PureComponent<Props, State> {
|
||||||
|
constructor(props: Props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
error: null,
|
error: false,
|
||||||
content: null,
|
content: null,
|
||||||
loading: true,
|
loading: true,
|
||||||
};
|
};
|
||||||
|
@ -46,7 +52,7 @@ class DocxViewer extends React.PureComponent<Props> {
|
||||||
const markdown = breakdance.render(result.value);
|
const markdown = breakdance.render(result.value);
|
||||||
this.setState({ content: markdown, loading: false });
|
this.setState({ content: markdown, loading: false });
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(() => {
|
||||||
this.setState({ error: true, loading: false });
|
this.setState({ error: true, loading: false });
|
||||||
})
|
})
|
||||||
.done();
|
.done();
|
||||||
|
|
|
@ -7,11 +7,13 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
class PdfViewer extends React.PureComponent<Props> {
|
class PdfViewer extends React.PureComponent<Props> {
|
||||||
constructor(props) {
|
constructor(props: Props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.viewer = React.createRef();
|
this.viewer = React.createRef();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
viewer: { current: any };
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { source } = this.props;
|
const { source } = this.props;
|
||||||
return (
|
return (
|
||||||
|
|
Loading…
Reference in a new issue