knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: PdfViewer component API and docs improvements

Browse Source
This commit is contained in:
Demenech 2024-04-09 16:20:01 -03:00
parent b7ee5a1869
commit d9c20528c5
2 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/components/src/components/PdfViewer.tsx
View File

@ -1,22 +1,24 @@
// Core viewer
import { Viewer, Worker, SpecialZoomLevel } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import { Data } from '../types/properties';
// Import styles
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
export interface PdfViewerProps {
url: string;
data: Required<Pick<Data, 'url'>>;
layout: boolean;
parentClassName?: string;
}
export function PdfViewer({
url,
data,
layout = false,
parentClassName,
parentClassName = 'h-screen',
}: PdfViewerProps) {
const url = data.url;
const defaultLayoutPluginInstance = defaultLayoutPlugin();
return (
<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.15.349/build/pdf.worker.js">

49
packages/components/stories/PdfViewer.stories.ts
View File

@ -7,15 +7,17 @@ const meta: Meta = {
component: PdfViewer,
tags: ['autodocs'],
argTypes: {
url: {
description: 'URL to PDF file',
data: {
description:
'Object with a `url` property pointing to the PDF file to be displayed, e.g.: `{ url: "https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK" }`.',
},
parentClassName: {
description: 'Classname for the parent div of the pdf viewer',
},
layour: {
description:
'Set to true if you want to have a layout with zoom level, page count, printing button etc',
'HTML classes to be applied to the container of the PDF viewer. [Tailwind](https://tailwindcss.com/) classes, such as `h-96` to define the height of the component, can be used on this field.',
},
layout: {
description:
'Set to `true` if you want to display a layout with zoom level, page count, printing button and other controls.',
defaultValue: false,
},
},
@ -25,26 +27,23 @@ export default meta;
type Story = StoryObj<PdfViewerProps>;
export const PdfViewerStory: Story = {
name: 'PdfViewer',
export const PdfViewerStoryWithoutControlsLayout: Story = {
name: 'PDF Viewer without controls layout',
args: {
url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
},
};
export const PdfViewerStoryWithLayout: Story = {
name: 'PdfViewer with the default layout',
args: {
url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
layout: true,
},
};
export const PdfViewerStoryWithHeight: Story = {
name: 'PdfViewer with a custom height',
args: {
url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
data: {
url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
},
parentClassName: 'h-96',
},
};
export const PdfViewerStoryWithControlsLayout: Story = {
name: 'PdfViewer with controls layout',
args: {
data: {
url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
},
layout: true,
parentClassName: 'h-96',
layout: true,
},
};