filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-28 19:42:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #531 from filecoin-project/@akuokojnr/pdf-changes

Browse Source 
revert pdf preview changes
This commit is contained in:
CAKE 2021-02-15 01:08:08 -08:00 committed by GitHub
commit 3a31f0594a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 33 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/core/SlateMediaObject.js
View File

@ -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";
@ -56,23 +55,44 @@ const typeMap = {
};
export default class SlateMediaObject extends React.Component {
openLink = (url) => {
let { isMobile } = this.props;
if (isMobile) {
window.open(url, "_blank");
}
};
componentDidMount() {
const url = this.props.data.url;
this.openLink(url);
}
render() {
const url = this.props.data.url;
const type = this.props.data.type ? this.props.data.type : "LEGACY_NO_TYPE";
const playType = typeMap[type] ? typeMap[type] : type;
let { isMobile } = this.props;
let element = <div css={STYLES_FAILURE}>No Preview</div>;
if (type.startsWith("application/pdf")) {
return (
<PDFViewer
file={url}
key={url}
style={{ width: "calc(100% - 64px)" }}
onClick={(e) => {
e.stopPropagation();
}}
/>
<>
{!isMobile && (
<object
css={STYLES_OBJECT}
style={{ width: "calc(100% - 64px)" }}
data={url}
type={type}
key={url}
onClick={(e) => {
e.stopPropagation();
}}
/>
)}
</>
);
}

1
components/system/SystemPage.js
View File

@ -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}

5
components/system/components/GlobalCarousel.js
View File

@ -260,7 +260,10 @@ export class GlobalCarousel extends React.Component {
} else if (this.props.carouselType === "DATA") {
data.url = Strings.getCIDGatewayURL(data.cid);
}
let slide = <SlateMediaObject data={data} />;
let { mobile } = this.props;
let slide = <SlateMediaObject data={data} isMobile={mobile} />;
return (
<div css={STYLES_ROOT}>
<Alert

57
components/system/components/PDFViewer.js
View File

@ -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>
);
}
}

2
components/system/index.js
View File

@ -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,

1
package.json
View File

@ -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",

55
pages/_/system/pdf-viewer.js
View File

@ -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>
);
}
}