mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
fix: remove react-pdf
This commit is contained in:
parent
d73925b454
commit
03bb1eb5f1
@ -3,7 +3,6 @@ import * as Constants from "~/common/constants";
|
||||
import * as Validations from "~/common/validations";
|
||||
|
||||
import UnityFrame from "~/components/core/UnityFrame";
|
||||
import PDFViewer from "~/components/system/components/PDFViewer";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -65,10 +64,12 @@ export default class SlateMediaObject extends React.Component {
|
||||
|
||||
if (type.startsWith("application/pdf")) {
|
||||
return (
|
||||
<PDFViewer
|
||||
file={url}
|
||||
key={url}
|
||||
<object
|
||||
css={STYLES_OBJECT}
|
||||
style={{ width: "calc(100% - 64px)" }}
|
||||
data={url}
|
||||
type={type}
|
||||
key={url}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
|
@ -190,7 +190,6 @@ export default class SystemPage extends React.Component {
|
||||
<SidebarLink url={url} href="/_/system/toggles" title="Toggles" />
|
||||
<SidebarLink url={url} href="/_/system/tooltips" title="Tooltips" />
|
||||
<SidebarLink url={url} href="/_/system/typography" title="Typography" />
|
||||
<SidebarLink url={url} href="/_/system/pdf-viewer" title="Pdf Viewer" />
|
||||
|
||||
<div
|
||||
css={STYLES_SMALL_LINK}
|
||||
|
@ -1,57 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Document, Page, pdfjs } from "react-pdf";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
|
||||
|
||||
const STYLES_DOCUMENT = css`
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin: 0;
|
||||
padding: 20px 0 0;
|
||||
width: 100%;
|
||||
min-height: 10%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
overflow-y: scroll;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_PAGE = css`
|
||||
margin-bottom: 20px;
|
||||
`;
|
||||
|
||||
export default class PDFViewer extends React.Component {
|
||||
state = {
|
||||
numPages: 0,
|
||||
};
|
||||
|
||||
onDocumentLoadSuccess({ numPages }) {
|
||||
this.setState({
|
||||
numPages,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { numPages } = this.state;
|
||||
|
||||
return (
|
||||
<Document
|
||||
file={this.props.file}
|
||||
onLoadSuccess={this.onDocumentLoadSuccess.bind(this)}
|
||||
{...this.props}
|
||||
css={STYLES_DOCUMENT}
|
||||
>
|
||||
{Array.from(new Array(numPages), (el, index) => (
|
||||
<Page key={`page_${index + 1}`} pageNumber={index + 1} css={STYLES_PAGE} />
|
||||
))}
|
||||
</Document>
|
||||
);
|
||||
}
|
||||
}
|
@ -62,7 +62,6 @@ import { Table } from "~/components/system/components/Table";
|
||||
import { Textarea } from "~/components/system/components/Textarea";
|
||||
import { Toggle } from "~/components/system/components/Toggle";
|
||||
import { H1, H2, H3, H4, P, UL, OL, LI } from "~/components/system/components/Typography";
|
||||
import PDFViewer from "~/components/system/components/PDFViewer";
|
||||
|
||||
// NOTE(jim): Fragments
|
||||
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
||||
@ -141,7 +140,6 @@ export {
|
||||
UL,
|
||||
OL,
|
||||
LI,
|
||||
PDFViewer,
|
||||
// NOTE(jim): Fragments, not meant to be used.
|
||||
Boundary,
|
||||
DescriptionGroup,
|
||||
|
@ -53,7 +53,6 @@
|
||||
"react-blurhash": "github:zeroxme/react-blurhash#master",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-draggable": "^4.4.3",
|
||||
"react-pdf": "^5.1.0",
|
||||
"remark-emoji": "^2.1.0",
|
||||
"remark-gfm": "^1.0.0",
|
||||
"remark-linkify-regex": "^1.0.0",
|
||||
|
@ -1,55 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import CodeBlock from "~/components/system/CodeBlock";
|
||||
|
||||
export default class SystemPDFViewer extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<SystemPage
|
||||
title="SDS: Pdf Viewer"
|
||||
description="..."
|
||||
url="https://slate.host/_/system/pdf-viewer"
|
||||
>
|
||||
<System.H1>PDF Viewer</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>
|
||||
The PDFViewer component is a way to render PDF files consistently across browsers.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Imports</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Import React and the PDFViewer Component.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<CodeBlock>
|
||||
{`import * as React from "react";
|
||||
import PDFViewer from "~/components/system/components/PDFViewer";`}
|
||||
</CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>
|
||||
Declare the PDFViewer component and pass the url of the PDF file to the PDFViewer
|
||||
component as file prop.
|
||||
</System.P>
|
||||
<br />
|
||||
<CodeBlock>{`<PDFViewer file={url} />`}</CodeBlock>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.PDFViewer file="https://slate.textile.io/ipfs/bafybeibyeaznm4iaungi6cfxpy75mnkpn64c3zw2kgq7qkpvecvqlrpw6u" />
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user