flip/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/FlipsideCrypto/DefinitelyTyped.git synced 2026-02-06 10:56:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added typings for npm package 'pdf-viewer-reactjs' (#43412)

Browse Source
This commit is contained in:
Ansuman Ghosh 2020-04-01 01:38:04 +05:30 committed by GitHub
parent 68217d01ac
commit 898b20d7f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 259 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
types/pdf-viewer-reactjs/index.d.ts vendored Executable file
View File

@ -0,0 +1,64 @@
// Type definitions for pdf-viewer-reactjs 2.0
// Project: https://github.com/ansu5555/pdf-viewer-reactjs#readme
// Definitions by: Ansuman Ghosh <https://github.com/ansu5555>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
import { Component, Props } from 'react';
interface Document {
url?: string;
base64?: string;
}
interface Watermark {
text?: string;
diagonal?: boolean;
opacity?: string;
size?: string;
color?: string;
}
interface Err {
message: string;
}
type DocClickHandler = () => void;
type BtnClickHandler = (page: number) => void;
type ZoomClickHandler = (scale: number) => void;
type RotationClickHandler = (angle: number) => void;
type AlertHandler = (err: Err) => React.ReactNode;
interface PDFViewerProps extends Props<PDFViewer> {
document: Document;
loader?: React.ReactNode;
page?: number;
scale?: number;
defaultScale?: number;
scaleStep?: number;
maxScale?: number;
minScale?: number;
css?: string;
canvasCss?: string;
rotationAngle?: number;
onDocumentClick?: DocClickHandler;
onPrevBtnClick?: BtnClickHandler;
onNextBtnClick?: BtnClickHandler;
onZoom?: ZoomClickHandler;
onRotation?: RotationClickHandler;
hideNavbar?: boolean;
navbarOnTop?: boolean;
hideZoom?: boolean;
hideRotation?: boolean;
protectContent?: boolean;
watermark?: Watermark;
alert?: AlertHandler;
navigation?: any;
}
declare class PDFViewer extends Component<PDFViewerProps> {
static defaultProps: Partial<PDFViewerProps>;
static propTypes: PDFViewerProps;
}
export = PDFViewer;

169
types/pdf-viewer-reactjs/pdf-viewer-reactjs-tests.tsx Executable file
View File

@ -0,0 +1,169 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import PDFViewer = require('pdf-viewer-reactjs');
const sources = {
url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
base64: 'FtDWVuZG9iag1zdGFydHhyZWYNCjExNg0KJSVFT0YNCg==',
};
class Example extends React.Component {
render() {
return (
<div>
<div>
<PDFViewer
document={{
url: sources.url,
}}
/>
</div>
<div>
<PDFViewer
document={{
base64: sources.base64,
}}
/>
</div>
<div>
<PDFViewer
document={{
url: 'https://somewrongurl/tsjydyd.pdf',
}}
/>
</div>
<div>
<PDFViewer
document={{
url: 'https://somewrongurl/tsjydyd.pdf',
}}
alert={err => (
<div
style={{
color: '#fa5b35',
backgroundColor: '#0c0c0c',
}}
>
<h3 style={{ fontWeight: 'bolder' }}>Failed To load !!!</h3>
<h6>{err.message}</h6>
</div>
)}
/>
</div>
<div>
<PDFViewer
document={{
url: sources.url,
}}
loader={<h2 style={{ color: '#fa5b35' }}>Custom loader element</h2>}
/>
</div>
<div>
<PDFViewer
document={{
url: sources.url,
}}
page={5}
/>
</div>
<div>
<PDFViewer
document={{
url: sources.url,
}}
scale={2}
scaleStep={0.5}
maxScale={5}
minScale={0.5}
/>
</div>
<div>
<PDFViewer
document={{
url: sources.url,
}}
css="customViewer"
canvasCss="customCanvas"
navigation={{
css: {
navbarWrapper: 'customWrapper',
zoomOutBtn: 'customPrevBtn',
resetZoomBtn: 'customResetBtn',
zoomInBtn: 'customNextBtn',
previousPageBtn: 'customPrevBtn',
pageIndicator: 'customPages',
nextPageBtn: 'customNextBtn',
rotateLeftBtn: 'customPrevBtn',
resetRotationBtn: 'customResetBtn',
rotateRightBtn: 'customNextBtn',
},
}}
/>
</div>
<div>
<PDFViewer
document={{
url: sources.url,
}}
css="customViewer"
navigation={<div>-</div>}
/>
</div>
<div>
<PDFViewer
document={{
url: sources.url,
}}
onDocumentClick={() => alert('Document was clicked')}
onPrevBtnClick={page => alert(`Page ${page} selected`)}
onNextBtnClick={page => alert(`Page ${page} selected`)}
onZoom={scale => alert(`Zoom scale is ${scale}`)}
onRotation={angle => alert(`Page angle is ${angle}`)}
/>
</div>
<div>
<PDFViewer
document={{
url: sources.url,
}}
hideNavbar
/>
</div>
<div>
<PDFViewer
document={{
url: sources.url,
}}
hideZoom
hideRotation
/>
</div>
<div>
<PDFViewer
document={{
url: sources.url,
}}
navbarOnTop
/>
</div>
<div>
<PDFViewer
document={{
url: sources.url,
}}
protectContent
watermark={{
text: 'WaterMark Demo !!!',
diagonal: true,
opacity: '0.5',
size: '72',
color: '#FF5733',
}}
/>
</div>
</div>
);
}
}
ReactDOM.render(<Example />, document.getElementById('root'));

25
types/pdf-viewer-reactjs/tsconfig.json Executable file
View File

@ -0,0 +1,25 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"dom"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"typeRoots": [
"../"
],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react"
},
"files": [
"index.d.ts",
"pdf-viewer-reactjs-tests.tsx"
]
}

1
types/pdf-viewer-reactjs/tslint.json Executable file
View File

@ -0,0 +1 @@
{ "extends": "dtslint/dt.json" }