Merge pull request #10 from trussworks/pm-add-xls-unsupported-view

update unsupported view

README.md

@@ -114,6 +114,23 @@ case 'rtf':
   return RtfViewer;
 ```
 
+### Viewing local changes in a secondary repo
+
+If you are working on a feature branch and need to see changes introduced in that branch in another repo that using this library, here are the steps:
+
+1. Run `yarn build` in this react-file-viewer repo
+2. In the secondary repo, update `package.json` to point the trussworks/react-file-viewer declaration to your branch in the react-file-viewer repo:
+
+```
+"@trussworks/react-file-viewer": "git+https://github.com/trussworks react-file-viewer#your-branch-name"
+```
+
+3. In the secondary repo, reinstall frontend packages and then run the client.
+
+4. When your react-file-viewer branch is merged into main, update the `package.json` in the secondary repo to declare the react-file-viewer libary normally
+
+`"@trussworks/react-file-viewer": "git+https://github.com/trussworks react-file-viewer"`
+
 ## Roadmap
 
 - [ ] Remove ignored linting rules and fix them

dist/index.js.LICENSE.txt

@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2010-2022 Three.js Authors
+ * SPDX-License-Identifier: MIT
+ */

package.json

@@ -77,7 +77,7 @@
     "sass-loader": "^10.1.1",
     "style-loader": "^1.2.1",
     "url-loader": "^4.1.0",
-    "webpack": "^4.43.0",
+    "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"

src/components/drivers/unsupported-viewer.jsx

@@ -1,16 +1,22 @@
 // Copyright (c) 2017 PlanGrid, Inc.
 
-import React from 'react';
-import 'styles/unsupported.scss';
+import React from 'react'
+import 'styles/unsupported.scss'
 
-const UnsupportedViewer = props => (
+const UnsupportedViewer = (props) => (
   <div className="pg-driver-view">
     <div className="unsupported-message">
-      {props.unsupportedComponent
-        ? <props.unsupportedComponent {...props} />
-        : <p className="alert"><b>{`.${props.fileType}`}</b> is not supported.</p>}
+      {props.unsupportedComponent ? (
+        <props.unsupportedComponent {...props} />
+      ) : (
+        <p>
+          No preview available for this kind of file.
+          <br />
+          Download file to see the contents.
+        </p>
+      )}
     </div>
   </div>
-);
+)
 
-export default UnsupportedViewer;
+export default UnsupportedViewer

src/styles/unsupported.scss

@@ -2,7 +2,12 @@
 
 .unsupported-message {
   padding: 46px;
-  background: white;
+  background: #DCDEE0;
+  color: #3D4551;
   margin: auto;
   text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }