Merge pull request #253 from performant-software/feat/pdf-viewer

Updated Lazy document to handle viewing PDF's without downloading.

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+"typescript.validate.enable": false,
+"javascript.validate.enable": false
+}

packages/controlled-vocabulary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,8 +12,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.1.3",
-    "@performant-software/shared-components": "^1.1.3",
+    "@performant-software/semantic-components": "^1.1.4",
+    "@performant-software/shared-components": "^1.1.4",
     "i18next": "^21.9.2",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

packages/geospatial/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/geospatial",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "TODO: ADD",
   "license": "MIT",
   "main": "./build/index.js",

packages/semantic-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.1.3",
+    "@performant-software/shared-components": "^1.1.4",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

packages/semantic-ui/src/components/FacetSlider.css

@@ -1,3 +1,5 @@
+@import 'rc-slider/assets/index.css';
+
 .facet-slider > .ui.grid {
   margin-top: 0em;
 }

packages/semantic-ui/src/components/FacetSlider.js

@@ -10,7 +10,7 @@ import React, {
 import { Grid } from 'semantic-ui-react';
 import Facet, { type Props as FacetProps } from './Facet';
 import { type RangeSliderProps } from '../types/InstantSearch';
-import 'rc-slider/assets/index.css';
+
 import './FacetSlider.css';
 
 type Props = FacetProps & RangeSliderProps;
@@ -25,7 +25,7 @@ const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLEl
     refine,
   } = useRangeSlider(props);
 
-  const [valueView, setValueView] = useState<Array<number>>([range.min, range.max]);
+  const [valueView, setValueView] = useState < Array < number >> ([range.min, range.max]);
 
   /**
    * Sets the visibility variable based on the range min and max.
@@ -72,12 +72,12 @@ const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLEl
           columns={2}
         >
           <Grid.Column>
-            { valueView[0] }
+            {valueView[0]}
           </Grid.Column>
           <Grid.Column
             textAlign='right'
           >
-            { valueView[1] }
+            {valueView[1]}
           </Grid.Column>
         </Grid>
       </div>

packages/semantic-ui/src/components/LazyDocument.css

@@ -7,6 +7,7 @@
 .lazy-document.ui.segment .buttons {
   display: flex;
   flex-direction: column;
+  z-index: 1000;
 }
 
 .lazy-document.ui.segment .buttons .ui.button {
@@ -30,3 +31,8 @@
 .lazy-document > .image.hidden {
   display: none;
 }
+
+.pdf-container {
+  width: 200px;
+  height: 300px;
+}

packages/semantic-ui/src/components/LazyDocument.js

@@ -14,8 +14,6 @@ import {
 import DownloadButton from './DownloadButton';
 import LazyLoader from './LazyLoader';
 
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-import 'react-pdf/dist/esm/Page/TextLayer.css';
 import './LazyDocument.css';
 
 type Props = {
@@ -87,13 +85,13 @@ const LazyDocument = (props: Props) => {
           onMouseEnter={() => setDimmer(true)}
           onMouseLeave={() => setDimmer(false)}
         >
-          { !loaded && (
+          {!loaded && (
             <LazyLoader
               active
               size={props.size}
             />
           )}
-          { !error && props.preview && (
+          {!error && props.preview && (
             <Image
               {...props.image}
               className={getClassNames()}
@@ -109,7 +107,7 @@ const LazyDocument = (props: Props) => {
               size={props.size}
             />
           )}
-          { !error && loaded && !props.preview && props.src && props.pdf && (
+          {!error && loaded && !props.preview && props.src && props.pdf && (
             <Image
               {...props.image}
               className={getClassNames()}
@@ -121,11 +119,13 @@ const LazyDocument = (props: Props) => {
               >
                 <Page
                   pageNumber={1}
+                  renderTextLayer={false}
+                  renderAnnotationLayer={false}
                 />
               </Document>
             </Image>
           )}
-          { (error || (!props.preview && !(props.src && props.pdf))) && (
+          {(error || (!props.preview && !(props.src && props.pdf))) && (
             <Image
               {...props.image}
               className={getClassNames('placeholder-image')}
@@ -137,20 +137,20 @@ const LazyDocument = (props: Props) => {
               />
             </Image>
           )}
-          { (props.download || props.src || props.children) && props.dimmable && (
+          {(props.download || props.src || props.children) && props.dimmable && (
             <Dimmer
               active={dimmer}
             >
               <div
                 className='buttons'
               >
-                { props.download && (
+                {props.download && (
                   <DownloadButton
                     primary
                     url={props.download || props.src}
                   />
                 )}
-                { props.children }
+                {props.children}
               </div>
             </Dimmer>
           )}

packages/semantic-ui/src/components/ViewPDFButton.js

@@ -0,0 +1,68 @@
+// @flow
+
+import React, { useMemo } from 'react';
+import { Icon, Button } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+
+type Props = {
+  basic?: boolean,
+  className?: string,
+  color?: string,
+  compact?: boolean,
+  primary?: boolean,
+  size?: string,
+  secondary?: boolean,
+  url: string,
+};
+
+const ViewPDFButton = (props: Props) => {
+  /**
+   * Sets the appropriate class names based on the formatting props.
+   *
+   * @type {string}
+   */
+  const className = useMemo(() => {
+    const classNames = ['ui', 'button'];
+
+    if (props.basic) {
+      classNames.push('basic');
+    }
+
+    if (props.className) {
+      classNames.push(...props.className.split(' '));
+    }
+
+    if (props.color) {
+      classNames.push(props.color);
+    }
+
+    if (props.compact) {
+      classNames.push('compact');
+    }
+
+    if (props.primary) {
+      classNames.push('primary');
+    }
+
+    if (props.secondary) {
+      classNames.push('secondary');
+    }
+
+    if (props.size) {
+      classNames.push(props.size);
+    }
+
+    return classNames.join(' ');
+  }, [props.basic, props.color]);
+
+  return (
+    <Button className={className} onClick={() => window.open(props.url, '_blank')}>
+      <Icon
+        name='file pdf'
+      />
+      {i18n.t('Common.buttons.pdf')}
+    </Button>
+  );
+};
+
+export default ViewPDFButton;

packages/semantic-ui/src/i18n/en.json

@@ -57,7 +57,8 @@
       "save": "Save",
       "search": "Search",
       "show": "Show",
-      "upload": "Upload"
+      "upload": "Upload",
+      "pdf": "View PDF"
     },
     "errors": {
       "save": "There was an error saving the record.",
@@ -331,4 +332,4 @@
     },
     "title": "XML"
   }
-}
+}

packages/semantic-ui/src/index.js

@@ -99,6 +99,7 @@ export { default as Toaster } from './components/Toaster';
 export { default as VideoFrameSelector } from './components/VideoFrameSelector';
 export { default as VideoPlayer } from './components/VideoPlayer';
 export { default as VideoPlayerButton } from './components/VideoPlayerButton';
+export { default as ViewPDFButton } from './components/ViewPDFButton';
 export { default as ViewXML } from './components/ViewXML';
 
 // Context

packages/semantic-ui/webpack.config.js

@@ -10,6 +10,10 @@ module.exports = configure(__dirname, {
       './react-calendar/dist/Calendar.css$': path.resolve(
         __dirname,
         '../../node_modules/react-calendar/dist/Calendar.css'
+      ),
+      './rc-slider/assets/index.css$': path.resolve(
+        __dirname,
+        '../../node_modules/rc-slider/assets/index.css'
       )
     }
   },

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/shared-components",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
   "main": "./build/index.js",

packages/storybook/src/semantic-ui/LazyDocument.stories.js

@@ -4,9 +4,11 @@ import React, { useState } from 'react';
 import { Card, Item } from 'semantic-ui-react';
 import _ from 'underscore';
 import FileInputButton from '../../../semantic-ui/src/components/FileInputButton';
+import ViewPDFButton from '../../../semantic-ui/src/components/ViewPDFButton';
 import image from '../assets/test-image.jpg';
 import LazyDocument from '../../../semantic-ui/src/components/LazyDocument';
 import portraitImage from '../assets/portrait-test-image.jpg';
+import pdf from '../assets/test.pdf';
 
 export default {
   title: 'Components/Semantic UI/LazyDocument'
@@ -85,6 +87,23 @@ export const CardContent = () => (
   </Card.Group>
 );
 
+export const ViewContent = () => (
+  <LazyDocument
+    pdf
+    src={pdf}
+    view
+    viewUrl={pdf}
+  >
+    <ViewPDFButton url={pdf} primary />
+  </LazyDocument>
+);
+
+export const DownloadContent = () => (
+  <LazyDocument
+    download={pdf}
+  />
+);
+
 export const ListContent = () => (
   <Item.Group>
     <Item>

packages/user-defined-fields/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/user-defined-fields",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A package of components used for allowing end users to define fields on models. Use with the \"user_defined_fields\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -9,8 +9,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.1.3",
-    "@performant-software/shared-components": "^1.1.3",
+    "@performant-software/semantic-components": "^1.1.4",
+    "@performant-software/shared-components": "^1.1.4",
     "i18next": "^21.9.1",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

packages/visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/visualize",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A package of components used for data visualization",
   "license": "MIT",
   "main": "./build/index.js",

react-components.json

@@ -7,5 +7,5 @@
     "packages/user-defined-fields",
     "packages/visualize"
   ],
-  "version": "1.1.3"
-}
+  "version": "1.1.4"
+}