@performant-software/semantic-components 0.5.10 → 0.5.11

package/build/main.css

@@ -436,6 +436,10 @@ div.react-calendar {
   padding-bottom: 20%;
   text-align: center;
 }
+.lazy-document .react-pdf__Page__canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
 
 .photo-viewer {
   padding: 30px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "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": "^0.5.10",
+    "@performant-software/shared-components": "^0.5.11",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",
@@ -21,6 +21,7 @@
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
     "react-i18next": "^11.4.0",
+    "react-pdf": "^5.7.2",
     "react-syntax-highlighter": "^15.5.0",
     "react-uuid": "^1.0.2",
     "semantic-ui-less": "^2.4.1",
@@ -32,7 +33,7 @@
     "react-dom": ">= 16.13.1 < 18.0.0"
   },
   "devDependencies": {
-    "@performant-software/webpack-config": "^0.5.10",
+    "@performant-software/webpack-config": "^0.5.11",
     "flow-copy-source": "^2.0.9",
     "less": "^4.1.2",
     "less-loader": "^11.0.0",

package/src/components/DataTable.js

@@ -437,7 +437,7 @@ class DataTable extends Component<Props, State> {
         <Table.HeaderCell
           key={column.name}
           sorted={this.props.sortColumn === column.name ? this.props.sortDirection : null}
-          onClick={this.props.onColumnClick.bind(this, column)}
+          onClick={() => this.props.onColumnClick(column)}
         >
           { column.label }
           <ColumnResize

package/src/components/EmbeddedList.js

@@ -25,6 +25,8 @@ type Props = {
   className?: string,
   columns: Array<Column>,
   configurable: boolean,
+  defaultSort?: string,
+  defaultSortDirection?: string,
   items: Array<any>,
   modal?: {
     component: ComponentType<any>,
@@ -77,10 +79,16 @@ class EmbeddedList extends Component<Props, State> {
    * Sorts the table by the first column.
    */
   componentDidMount() {
-    const column = _.find(this.props.columns, (c) => c.sortable !== false);
+    let column;
+
+    if (this.props.defaultSort) {
+      column = _.findWhere(this.props.columns, { name: this.props.defaultSort });
+    } else {
+      column = _.find(this.props.columns, (c) => c.sortable !== false);
+    }
 
     if (column) {
-      this.onColumnClick(column);
+      this.onColumnClick(column, this.props.defaultSortDirection);
     }
   }
 
@@ -101,7 +109,7 @@ class EmbeddedList extends Component<Props, State> {
    *
    * @param column
    */
-  onColumnClick(column: Column) {
+  onColumnClick(column: Column, direction: string = SORT_ASCENDING) {
     /*
      * We'll disable the column sorting if the table rows are draggable. Making the table rows draggable implies
      * that the sorting will be done manually. Allowing column click sorting could make things confusing.
@@ -119,7 +127,7 @@ class EmbeddedList extends Component<Props, State> {
     }
 
     const sortColumn = column.name;
-    let sortDirection = SORT_ASCENDING;
+    let sortDirection = direction || SORT_ASCENDING;
 
     if (column.name === this.state.sortColumn) {
       sortDirection = this.state.sortDirection === SORT_ASCENDING ? SORT_DESCENDING : SORT_ASCENDING;
@@ -276,3 +284,8 @@ EmbeddedList.defaultProps = {
 };
 
 export default EmbeddedList;
+
+export {
+  SORT_ASCENDING,
+  SORT_DESCENDING
+};

package/src/components/LazyDocument.css

@@ -18,4 +18,9 @@
   padding-top: 20%;
   padding-bottom: 20%;
   text-align: center;
-}
+}
+
+.lazy-document .react-pdf__Page__canvas {
+  width: 100% !important;
+  height: 100% !important;
+}

package/src/components/LazyDocument.js

@@ -1,6 +1,7 @@
 // @flow
 
-import React, { useState, type Node } from 'react';
+import React, { useState, useEffect, type Node } from 'react';
+import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
 import {
   Dimmer,
   Icon,
@@ -27,6 +28,15 @@ type Props = {
 const LazyDocument = (props: Props) => {
   const [visible, setVisible] = useState(false);
   const [dimmer, setDimmer] = useState(false);
+  const [contentType, setContentType] = useState('');
+
+  useEffect(() => {
+    if (props.src && !props.preview) {
+      fetch(props.src)
+        .then((response) => response.blob())
+        .then((blob) => setContentType(blob.type));
+    }
+  }, [props.preview, props.src]);
 
   if (!visible) {
     return (
@@ -65,7 +75,21 @@ const LazyDocument = (props: Props) => {
               size={props.size}
             />
           )}
-          { !props.preview && (
+          { !props.preview && props.src && contentType === 'application/pdf' && (
+            <Image
+              {...props.image}
+              size={props.size}
+            >
+              <Document
+                file={props.src}
+              >
+                <Page
+                  pageNumber={1}
+                />
+              </Document>
+            </Image>
+          )}
+          { !props.preview && (!props.src || contentType !== 'application/pdf') && (
             <Image
               {...props.image}
               className='placeholder-image'

package/src/components/LazyVideo.js

@@ -70,7 +70,17 @@ const LazyVideo = (props: Props) => {
               size={props.size}
             />
           )}
-          { !props.preview && (
+          { !props.preview && props.src && (
+            <Image
+              {...props.image}
+              size={props.size}
+            >
+              <video
+                src={props.src}
+              />
+            </Image>
+          )}
+          { !props.preview && !props.src && (
             <Image
               {...props.image}
               className='placeholder-image'

package/types/components/DataTable.js.flow

@@ -437,7 +437,7 @@ class DataTable extends Component<Props, State> {
         <Table.HeaderCell
           key={column.name}
           sorted={this.props.sortColumn === column.name ? this.props.sortDirection : null}
-          onClick={this.props.onColumnClick.bind(this, column)}
+          onClick={() => this.props.onColumnClick(column)}
         >
           { column.label }
           <ColumnResize

package/types/components/EmbeddedList.js.flow

@@ -25,6 +25,8 @@ type Props = {
   className?: string,
   columns: Array<Column>,
   configurable: boolean,
+  defaultSort?: string,
+  defaultSortDirection?: string,
   items: Array<any>,
   modal?: {
     component: ComponentType<any>,
@@ -77,10 +79,16 @@ class EmbeddedList extends Component<Props, State> {
    * Sorts the table by the first column.
    */
   componentDidMount() {
-    const column = _.find(this.props.columns, (c) => c.sortable !== false);
+    let column;
+
+    if (this.props.defaultSort) {
+      column = _.findWhere(this.props.columns, { name: this.props.defaultSort });
+    } else {
+      column = _.find(this.props.columns, (c) => c.sortable !== false);
+    }
 
     if (column) {
-      this.onColumnClick(column);
+      this.onColumnClick(column, this.props.defaultSortDirection);
     }
   }
 
@@ -101,7 +109,7 @@ class EmbeddedList extends Component<Props, State> {
    *
    * @param column
    */
-  onColumnClick(column: Column) {
+  onColumnClick(column: Column, direction: string = SORT_ASCENDING) {
     /*
      * We'll disable the column sorting if the table rows are draggable. Making the table rows draggable implies
      * that the sorting will be done manually. Allowing column click sorting could make things confusing.
@@ -119,7 +127,7 @@ class EmbeddedList extends Component<Props, State> {
     }
 
     const sortColumn = column.name;
-    let sortDirection = SORT_ASCENDING;
+    let sortDirection = direction || SORT_ASCENDING;
 
     if (column.name === this.state.sortColumn) {
       sortDirection = this.state.sortDirection === SORT_ASCENDING ? SORT_DESCENDING : SORT_ASCENDING;
@@ -276,3 +284,8 @@ EmbeddedList.defaultProps = {
 };
 
 export default EmbeddedList;
+
+export {
+  SORT_ASCENDING,
+  SORT_DESCENDING
+};

package/types/components/LazyDocument.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
-import React, { useState, type Node } from 'react';
+import React, { useState, useEffect, type Node } from 'react';
+import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
 import {
   Dimmer,
   Icon,
@@ -27,6 +28,15 @@ type Props = {
 const LazyDocument = (props: Props) => {
   const [visible, setVisible] = useState(false);
   const [dimmer, setDimmer] = useState(false);
+  const [contentType, setContentType] = useState('');
+
+  useEffect(() => {
+    if (props.src && !props.preview) {
+      fetch(props.src)
+        .then((response) => response.blob())
+        .then((blob) => setContentType(blob.type));
+    }
+  }, [props.preview, props.src]);
 
   if (!visible) {
     return (
@@ -65,7 +75,21 @@ const LazyDocument = (props: Props) => {
               size={props.size}
             />
           )}
-          { !props.preview && (
+          { !props.preview && props.src && contentType === 'application/pdf' && (
+            <Image
+              {...props.image}
+              size={props.size}
+            >
+              <Document
+                file={props.src}
+              >
+                <Page
+                  pageNumber={1}
+                />
+              </Document>
+            </Image>
+          )}
+          { !props.preview && (!props.src || contentType !== 'application/pdf') && (
             <Image
               {...props.image}
               className='placeholder-image'

package/types/components/LazyVideo.js.flow

@@ -70,7 +70,17 @@ const LazyVideo = (props: Props) => {
               size={props.size}
             />
           )}
-          { !props.preview && (
+          { !props.preview && props.src && (
+            <Image
+              {...props.image}
+              size={props.size}
+            >
+              <video
+                src={props.src}
+              />
+            </Image>
+          )}
+          { !props.preview && !props.src && (
             <Image
               {...props.image}
               className='placeholder-image'