@performant-software/semantic-components 0.5.8 → 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.8",
+  "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.8",
+    "@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.8",
+    "@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/AssociatedDropdown.js

@@ -63,6 +63,7 @@ class AssociatedDropdown extends Component<Props, State> {
       items: [],
       loading: false,
       modalAdd: false,
+      modalEdit: false,
       options: [],
       saved: false,
       searchQuery: props.searchQuery || '',
@@ -208,7 +209,7 @@ class AssociatedDropdown extends Component<Props, State> {
           { this.renderAddButton() }
           { this.renderClearButton() }
         </Button.Group>
-        { this.renderAddModal() }
+        { this.renderModal() }
         { this.state.saved && (
           <Toaster
             onDismiss={() => this.setState({ saved: false })}
@@ -247,6 +248,27 @@ class AssociatedDropdown extends Component<Props, State> {
     );
   }
 
+  /**
+   * Renders the clear button.
+   *
+   * @returns {*}
+   */
+  renderClearButton() {
+    if (this.props.required) {
+      return null;
+    }
+
+    return (
+      <Button
+        basic
+        content={i18n.t('Common.buttons.clear')}
+        icon='times'
+        onClick={this.onClear.bind(this)}
+        type='button'
+      />
+    );
+  }
+
   /**
    * Renders the edit button (if applicable).
    *
@@ -262,7 +284,7 @@ class AssociatedDropdown extends Component<Props, State> {
         basic
         content={i18n.t('Common.buttons.edit')}
         icon='pencil'
-        onClick={() => this.setState({ modalAdd: true })}
+        onClick={() => this.setState({ modalEdit: true })}
         type='button'
       />
     );
@@ -273,51 +295,37 @@ class AssociatedDropdown extends Component<Props, State> {
    *
    * @returns {null|*}
    */
-  renderAddModal() {
-    if (!(this.state.modalAdd && this.props.modal)) {
+  renderModal() {
+    if (!((this.state.modalAdd || this.state.modalEdit) && this.props.modal)) {
       return null;
     }
 
-    const {
-      component, props, onSave
-    } = this.props.modal;
+    const { component, props, onSave } = this.props.modal;
+
+    // If we're editing the existing record, pass the ID to the modal in order to retrieve the full record.
+    let item;
+
+    if (this.state.modalEdit) {
+      item = {
+        id: this.state.value
+      };
+    }
 
     return (
       <EditModal
         component={component}
-        item={{ id: this.state.value }}
-        onClose={() => this.setState({ modalAdd: false })}
-        onSave={(item) => onSave(item)
+        item={item}
+        onClose={() => this.setState({ modalAdd: false, modalEdit: false })}
+        onSave={(data) => onSave(data)
           .then((record) => {
             this.props.onSelection(record);
-            this.setState({ modalAdd: false, saved: true });
+            this.setState({ modalAdd: false, modalEdit: false, saved: true });
           })}
         {...props}
       />
     );
   }
 
-  /**
-   * Renders the clear button.
-   *
-   * @returns {*}
-   */
-  renderClearButton() {
-    if (this.props.required) {
-      return null;
-    }
-
-    return (
-      <Button
-        basic
-        content={i18n.t('Common.buttons.clear')}
-        icon='times'
-        onClick={this.onClear.bind(this)}
-        type='button'
-      />
-    );
-  }
-
   /**
    * Sets the search timer.
    */

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/AssociatedDropdown.js.flow

@@ -63,6 +63,7 @@ class AssociatedDropdown extends Component<Props, State> {
       items: [],
       loading: false,
       modalAdd: false,
+      modalEdit: false,
       options: [],
       saved: false,
       searchQuery: props.searchQuery || '',
@@ -208,7 +209,7 @@ class AssociatedDropdown extends Component<Props, State> {
           { this.renderAddButton() }
           { this.renderClearButton() }
         </Button.Group>
-        { this.renderAddModal() }
+        { this.renderModal() }
         { this.state.saved && (
           <Toaster
             onDismiss={() => this.setState({ saved: false })}
@@ -247,6 +248,27 @@ class AssociatedDropdown extends Component<Props, State> {
     );
   }
 
+  /**
+   * Renders the clear button.
+   *
+   * @returns {*}
+   */
+  renderClearButton() {
+    if (this.props.required) {
+      return null;
+    }
+
+    return (
+      <Button
+        basic
+        content={i18n.t('Common.buttons.clear')}
+        icon='times'
+        onClick={this.onClear.bind(this)}
+        type='button'
+      />
+    );
+  }
+
   /**
    * Renders the edit button (if applicable).
    *
@@ -262,7 +284,7 @@ class AssociatedDropdown extends Component<Props, State> {
         basic
         content={i18n.t('Common.buttons.edit')}
         icon='pencil'
-        onClick={() => this.setState({ modalAdd: true })}
+        onClick={() => this.setState({ modalEdit: true })}
         type='button'
       />
     );
@@ -273,51 +295,37 @@ class AssociatedDropdown extends Component<Props, State> {
    *
    * @returns {null|*}
    */
-  renderAddModal() {
-    if (!(this.state.modalAdd && this.props.modal)) {
+  renderModal() {
+    if (!((this.state.modalAdd || this.state.modalEdit) && this.props.modal)) {
       return null;
     }
 
-    const {
-      component, props, onSave
-    } = this.props.modal;
+    const { component, props, onSave } = this.props.modal;
+
+    // If we're editing the existing record, pass the ID to the modal in order to retrieve the full record.
+    let item;
+
+    if (this.state.modalEdit) {
+      item = {
+        id: this.state.value
+      };
+    }
 
     return (
       <EditModal
         component={component}
-        item={{ id: this.state.value }}
-        onClose={() => this.setState({ modalAdd: false })}
-        onSave={(item) => onSave(item)
+        item={item}
+        onClose={() => this.setState({ modalAdd: false, modalEdit: false })}
+        onSave={(data) => onSave(data)
           .then((record) => {
             this.props.onSelection(record);
-            this.setState({ modalAdd: false, saved: true });
+            this.setState({ modalAdd: false, modalEdit: false, saved: true });
           })}
         {...props}
       />
     );
   }
 
-  /**
-   * Renders the clear button.
-   *
-   * @returns {*}
-   */
-  renderClearButton() {
-    if (this.props.required) {
-      return null;
-    }
-
-    return (
-      <Button
-        basic
-        content={i18n.t('Common.buttons.clear')}
-        icon='times'
-        onClick={this.onClear.bind(this)}
-        type='button'
-      />
-    );
-  }
-
   /**
    * Sets the search timer.
    */

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'