Compare commits
6 Commits
feature/pd
...
feature/ex
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8086e2a2d1 | ||
|
|
537d19cb2a | ||
|
|
ea6f6a219f | ||
|
|
af548c56fd | ||
|
|
990939175e | ||
|
|
cbe693825c |
@@ -47,9 +47,6 @@
|
|||||||
"vega": "5.25.0",
|
"vega": "5.25.0",
|
||||||
"vega-lite": "5.1.0",
|
"vega-lite": "5.1.0",
|
||||||
"vitest": "^0.31.4",
|
"vitest": "^0.31.4",
|
||||||
"@react-pdf-viewer/core": "3.6.0",
|
|
||||||
"@react-pdf-viewer/default-layout": "3.6.0",
|
|
||||||
"pdfjs-dist": "2.15.349",
|
|
||||||
"xlsx": "^0.18.5"
|
"xlsx": "^0.18.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@@ -1,32 +0,0 @@
|
|||||||
// Core viewer
|
|
||||||
import { Viewer, Worker, SpecialZoomLevel } from '@react-pdf-viewer/core';
|
|
||||||
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
layout: boolean;
|
|
||||||
parentClassName?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function PdfViewer({
|
|
||||||
url,
|
|
||||||
layout = false,
|
|
||||||
parentClassName,
|
|
||||||
}: PdfViewerProps) {
|
|
||||||
const defaultLayoutPluginInstance = defaultLayoutPlugin();
|
|
||||||
return (
|
|
||||||
<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.15.349/build/pdf.worker.js">
|
|
||||||
<div className={parentClassName}>
|
|
||||||
<Viewer
|
|
||||||
defaultScale={SpecialZoomLevel.PageWidth}
|
|
||||||
fileUrl={url}
|
|
||||||
plugins={layout ? [defaultLayoutPluginInstance] : []}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Worker>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,10 +1,9 @@
|
|||||||
export * from './components/Table';
|
export * from "./components/Table";
|
||||||
export * from './components/Catalog';
|
export * from "./components/Catalog";
|
||||||
export * from './components/LineChart';
|
export * from "./components/LineChart";
|
||||||
export * from './components/Vega';
|
export * from "./components/Vega";
|
||||||
export * from './components/VegaLite';
|
export * from "./components/VegaLite";
|
||||||
export * from './components/FlatUiTable';
|
export * from "./components/FlatUiTable";
|
||||||
export * from './components/OpenLayers/OpenLayers';
|
export * from './components/OpenLayers/OpenLayers';
|
||||||
export * from './components/Map';
|
export * from "./components/Map";
|
||||||
export * from './components/PdfViewer';
|
|
||||||
export * from "./components/Excel";
|
export * from "./components/Excel";
|
||||||
|
|||||||
@@ -1,50 +0,0 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react';
|
|
||||||
|
|
||||||
import { PdfViewer, PdfViewerProps } from '../src/components/PdfViewer';
|
|
||||||
|
|
||||||
const meta: Meta = {
|
|
||||||
title: 'Components/PdfViewer',
|
|
||||||
component: PdfViewer,
|
|
||||||
tags: ['autodocs'],
|
|
||||||
argTypes: {
|
|
||||||
url: {
|
|
||||||
description: 'URL to PDF file',
|
|
||||||
},
|
|
||||||
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',
|
|
||||||
defaultValue: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<PdfViewerProps>;
|
|
||||||
|
|
||||||
export const PdfViewerStory: Story = {
|
|
||||||
name: 'PdfViewer',
|
|
||||||
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',
|
|
||||||
parentClassName: 'h-96',
|
|
||||||
layout: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,10 +1,6 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
content: [
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
'./index.html',
|
|
||||||
'./src/**/*.{js,ts,jsx,tsx}',
|
|
||||||
'./stories/*.{js,ts,jsx,tsx}',
|
|
||||||
],
|
|
||||||
theme: {},
|
theme: {},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { defineConfig } from 'vitest/config';
|
|||||||
import dts from 'vite-plugin-dts';
|
import dts from 'vite-plugin-dts';
|
||||||
import tailwindcss from 'tailwindcss';
|
import tailwindcss from 'tailwindcss';
|
||||||
import { UserConfigExport } from 'vite';
|
import { UserConfigExport } from 'vite';
|
||||||
|
import replace from 'rollup-plugin-re';
|
||||||
|
|
||||||
const app = async (): Promise<UserConfigExport> => {
|
const app = async (): Promise<UserConfigExport> => {
|
||||||
return defineConfig({
|
return defineConfig({
|
||||||
@@ -36,7 +37,7 @@ const app = async (): Promise<UserConfigExport> => {
|
|||||||
'vega',
|
'vega',
|
||||||
'react-vega',
|
'react-vega',
|
||||||
'ol',
|
'ol',
|
||||||
'leaflet',
|
'leaflet'
|
||||||
],
|
],
|
||||||
output: {
|
output: {
|
||||||
manualChunks: undefined,
|
manualChunks: undefined,
|
||||||
@@ -47,7 +48,7 @@ const app = async (): Promise<UserConfigExport> => {
|
|||||||
'react-vega': 'react-vega',
|
'react-vega': 'react-vega',
|
||||||
'react-dom': 'ReactDOM',
|
'react-dom': 'ReactDOM',
|
||||||
tailwindcss: 'tailwindcss',
|
tailwindcss: 'tailwindcss',
|
||||||
leaflet: 'leaflet',
|
leaflet: 'leaflet'
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user