made preparatives for first publish

omarefg · Sep 9, 2019 · 6bdd195 · 6bdd195
1 parent 80e0b78
commit 6bdd195
Show file tree

Hide file tree

Showing 33 changed files with 567 additions and 372 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -24,6 +24,7 @@
     "import"
   ],
   "rules": {
+    "react/jsx-props-no-spreading": [2, {"exceptions": ["ReactTable"]}],
     "no-useless-catch": 0,
     "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "never" }],
     "semi": [2, "never"],

diff --git a/README.md b/README.md
@@ -1,4 +1,12 @@
 # react-file-preview
 
 
-Component to render and preview some kind of documents
+Component to render and preview some kind of documents.
+
+You should not use this dependency in production.
+
+Tests are not developed yet.
+
+Documentation is coming soon.
+
+Feel free to pull request.
diff --git a/package.json b/package.json
@@ -2,7 +2,9 @@
   "name": "@omarefg/react-file-preview",
   "version": "0.1.0",
   "description": "Component to render and preview some kind of documents",
-  "main": "server.js",
+  "private": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/omarefg/react-file-preview.git"
@@ -22,16 +24,18 @@
     "mammoth": "^1.4.8",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
-    "react-data-grid": "^6.1.0",
     "react-dom": "^16.9.0",
     "react-pdf": "^4.1.0",
     "react-scripts": "3.1.1",
+    "react-table": "^6.10.3",
+    "styled-components": "^4.3.2",
     "three": "^0.108.0",
     "xlsx": "^0.15.1"
   },
   "scripts": {
     "start": "PORT=54321 react-scripts start",
     "build": "react-scripts build",
+    "publish:npm": "SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components/Viewer.jsx --out-dir dist --copy-files",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -45,6 +49,9 @@
     "viewer",
     "files viewer"
   ],
+  "babel": {
+    "presets": [ "@babel/react" ]
+  },
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -61,6 +68,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/cli": "^7.6.0",
     "eslint": "^6.3.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.18.2",

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>React File Preview</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Viewer } from './components'
 
-import jpg from './samples/sample.jpg'
+import jpg from './samples/sample.jpeg'
 import jpg360 from './samples/sample360.jpg'
 import docx from './samples/sample.docx'
 import pdf from './samples/sample.pdf'
@@ -13,55 +13,48 @@ import mp4 from './samples/sample.mp4'
 export const App = () => {
     return (
         <div>
-            {/* <h1>JPG</h1>
+            <h1>JPG</h1>
             <Viewer
                 type='jpg'
                 path={jpg}
-                width='100%'
-                height='100%'
-            /> */}
-            {/* <h1>JPG 360</h1>
+            />
+            <h1>JPG 360</h1>
             <Viewer
                 type='jpg'
                 path={jpg360}
                 width={500}
                 height={500}
-                style={{
-                    border: '2px solid red',
-                }}
-            /> */}
-            {/* <h1>DOCX</h1>
+            />
+            <h1>DOCX</h1>
             <Viewer
                 type='docx'
                 path={docx}
-            /> */}
-            {/* <h1>PDF</h1>
+            />
+            <h1>PDF</h1>
             <Viewer
                 type='pdf'
                 path={pdf}
-            /> */}
+            />
             <h1>CSV</h1>
             <Viewer
                 type='csv'
                 path={csv}
-                onGridSort={() => null}
             />
             <h1>XLSX</h1>
             <Viewer
                 type='xlsx'
                 path={xlsx}
-                onGridSort={() => null}
             />
-            {/* <h1>MP3</h1>
+            <h1>MP3</h1>
             <Viewer
                 type='mp3'
                 path={mp3}
-            /> */}
-            {/* <h1>MP4</h1>
+            />
+            <h1>MP4</h1>
             <Viewer
                 type='mp4'
                 path={mp4}
-            /> */}
+            />
         </div>
     )
 }
diff --git a/src/components/Audio.jsx b/src/components/Audio.jsx
@@ -2,7 +2,9 @@ import React, { useState } from 'react'
 import { Loader } from './Loader'
 import { ErrorBoundary } from './ErrorBoundary'
 
-export const Audio = ({ path, ErrorComponent, onError }) => {
+import styles from '../styles/Audio.module.scss'
+
+export const Audio = ({ path, ErrorComponent, onError, style }) => {
     const [loading, setLoader] = useState(true)
     const visibility = loading ? 'hidden' : 'visible'
     const onCanPlay = () => setLoader(false)
@@ -20,7 +22,8 @@ export const Audio = ({ path, ErrorComponent, onError }) => {
                     />
                 )}
                 <audio
-                    style={{ visibility }}
+                    className={styles.audio}
+                    style={{ ...style, visibility }}
                     controls
                     onCanPlay={onCanPlay}
                     src={path}

diff --git a/src/components/Csv.jsx b/src/components/Csv.jsx
@@ -1,12 +1,14 @@
 import React from 'react'
-import ReactDataGrid from 'react-data-grid'
+import ReactTable from 'react-table'
 import { useCsvData } from '../hooks'
 import { Loader } from './Loader'
 import { ErrorBoundary } from './ErrorBoundary'
 
+import 'react-table/react-table.css'
+
 export const Csv = props => {
     const state = useCsvData(props)
-    const { height, onGridSort, ErrorComponent, onError } = props
+    const { reactTableProps, ErrorComponent, onError } = props
     const { rows, columns, isLoading } = state
 
     if (isLoading) {
@@ -23,12 +25,11 @@ export const Csv = props => {
             ErrorComponent={ErrorComponent}
             onError={onError}
         >
-            <ReactDataGrid
+            <ReactTable
                 columns={columns}
-                rowsCount={rows.length}
-                rowGetter={i => rows[i]}
-                minHeight={height || 650}
-                onGridSort={onGridSort}
+                data={rows}
+                defaultPageSize={10}
+                {...reactTableProps}
             />
         </ErrorBoundary>
     )

diff --git a/src/components/Docx.jsx b/src/components/Docx.jsx
@@ -2,25 +2,28 @@ import React from 'react'
 import { Loader } from './Loader'
 import { useDocxData } from '../hooks'
 import { ErrorBoundary } from './ErrorBoundary'
-import styles from '../styles/docx.module.scss'
+import { DocxStyles } from '../styles/Docx'
 
-export const Docx = ({ path, ErrorComponent, onError }) => {
+export const Docx = ({ path, ErrorComponent, onError, style }) => {
     const container = useDocxData(path)
 
     return (
         <ErrorBoundary
             ErrorComponent={ErrorComponent}
             onError={onError}
         >
-            <div
-                className={styles['document-container']}
-                ref={container}
-            >
-                <Loader
-                    ErrorComponent={ErrorComponent}
-                    onError={onError}
-                />
-            </div>
+            <DocxStyles>
+                <div
+                    className='document-container'
+                    ref={container}
+                    style={style}
+                >
+                    <Loader
+                        ErrorComponent={ErrorComponent}
+                        onError={onError}
+                    />
+                </div>
+            </DocxStyles>
         </ErrorBoundary>
     )
 }
diff --git a/src/components/Pdf.jsx b/src/components/Pdf.jsx
@@ -1,62 +1,62 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSearchPlus, faSearchMinus, faUndoAlt } from '@fortawesome/free-solid-svg-icons'
 import { usePdf } from '../hooks'
 import { PdfPage } from './PdfPage'
 import { Loader } from './Loader'
 import { ErrorBoundary } from './ErrorBoundary'
+import { PdfMenu } from './PdfMenu'
 import { INCREASE_PERCENTAGE } from '../utils'
 
-export const Pdf = ({ path, ErrorComponent, onError }) => {
-    const { state, container, reduceZoom, increaseZoom, resetZoom } = usePdf(path)
-    const { pdf, zoom, containerWidth, pages } = state
+export const Pdf = ({ path, ErrorComponent, onError, showPdfMenu, style }) => {
+    const {
+        state,
+        container,
+        reduceZoom,
+        increaseZoom,
+        resetZoom,
+        reducePage,
+        increasePage,
+        print,
+    } = usePdf(path)
+    const { pdf, zoom, containerWidth, page } = state
 
     return (
         <ErrorBoundary
             ErrorComponent={ErrorComponent}
             onError={onError}
         >
             <div>
-                <div ref={container} >
-                    <div>
-                        <button
-                            onClick={increaseZoom}
-                            type='button'
-                        >
-                            <FontAwesomeIcon icon={faSearchPlus}/>
-                        </button>
-                        <button
-                            onClick={resetZoom}
-                            type='button'
-                        >
-                            <FontAwesomeIcon icon={faUndoAlt}/>
-                        </button>
-                        <button
-                            onClick={reduceZoom}
-                            type='button'
-                        >
-                            <FontAwesomeIcon icon={faSearchMinus}/>
-                        </button>
-                    </div>
+                <div
+                    ref={container}
+                    style={style}
+                >
+                    {showPdfMenu && (
+                        <PdfMenu
+                            reduceZoom={reduceZoom}
+                            increaseZoom={increaseZoom}
+                            resetZoom={resetZoom}
+                            reducePage={reducePage}
+                            increasePage={increasePage}
+                            print={print}
+                            page={page}
+                        />
+                    )}
                     {!pdf && (
                         <Loader
                             ErrorComponent={ErrorComponent}
                             onError={onError}
                         />
                     )}
-                    {pdf && pages.map(v => {
-                        return (
-                            <PdfPage
-                                index={v + 1}
-                                pdf={pdf}
-                                containerWidth={containerWidth}
-                                zoom={zoom * INCREASE_PERCENTAGE}
-                                key={v}
-                                ErrorComponent={ErrorComponent}
-                                onError={onError}
-                            />
-                        )
-                    })}
+                    {pdf && (
+                        <PdfPage
+                            index={page}
+                            pdf={pdf}
+                            containerWidth={containerWidth}
+                            zoom={zoom * INCREASE_PERCENTAGE}
+                            ErrorComponent={ErrorComponent}
+                            onError={onError}
+                        />
+
+                    )}
                 </div>
             </div>
         </ErrorBoundary>