@performant-software/semantic-components 0.5.9 → 0.5.12

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.9",
+  "version": "0.5.12",
   "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.9",
+    "@performant-software/shared-components": "^0.5.12",
     "@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.9",
+    "@performant-software/webpack-config": "^0.5.12",
     "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/KeyValuePairs.js

@@ -0,0 +1,79 @@
+// @flow
+
+import React, { type ComponentType } from 'react';
+import { Button, Grid, Input } from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import withBatchEdit, { type BatchEditProps } from '../hooks/BatchEdit';
+
+type Item = {
+  key: string,
+  value: string
+};
+
+type Props = BatchEditProps & {
+  items: Array<Item>,
+  onChange: (items: Array<Item>) => void
+};
+
+const KeyValuePairs: ComponentType<any> = withBatchEdit((props: Props) => (
+  <div>
+    <Button
+      basic
+      content={i18n.t('Common.buttons.add')}
+      icon='plus'
+      onClick={props.onAddItem.bind(this)}
+      type='button'
+    />
+    <Grid
+      padded='vertically'
+    >
+      { _.map(props.items, (item, index) => (
+        <Grid.Row
+          columns={3}
+        >
+          <Grid.Column
+            width={8}
+          >
+            <Input
+              fluid
+              onChange={props.onUpdateItem.bind(this, index, 'key')}
+              placeholder={i18n.t('KeyValuePairs.labels.key')}
+              value={item.key}
+            />
+          </Grid.Column>
+          <Grid.Column
+            width={7}
+          >
+            <Input
+              fluid
+              onChange={props.onUpdateItem.bind(this, index, 'value')}
+              placeholder={i18n.t('KeyValuePairs.labels.value')}
+              value={item.value}
+            />
+          </Grid.Column>
+          <Grid.Column
+            width={1}
+          >
+            <Button
+              color='red'
+              icon='trash'
+              onClick={props.onRemoveItem.bind(this, index)}
+            />
+          </Grid.Column>
+        </Grid.Row>
+      ))}
+      { _.isEmpty(props.items) && (
+        <Grid.Row
+          columns={1}
+        >
+          <Grid.Column>
+            { i18n.t('Common.labels.noRecords') }
+          </Grid.Column>
+        </Grid.Row>
+      )}
+    </Grid>
+  </div>
+));
+
+export default KeyValuePairs;

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/src/components/ReferenceCodeFormDropdown.js

@@ -0,0 +1,81 @@
+// @flow
+
+import { ReferenceTablesService } from '@performant-software/shared-components';
+import React, { type ComponentType, useEffect, useState } from 'react';
+import { Form } from 'semantic-ui-react';
+import EditModal from './EditModal';
+import ReferenceCodeDropdown from './ReferenceCodeDropdown';
+import ReferenceCodeFormLabel from './ReferenceCodeFormLabel';
+import ReferenceTableModal from './ReferenceTableModal';
+
+type Props = {
+  error?: boolean,
+  label?: string,
+  required?: boolean,
+  referenceTable: string
+};
+
+const ReferenceCodeFormDropdown: ComponentType<any> = (props: Props) => {
+  const {
+    error,
+    label,
+    required,
+    referenceTable: key,
+    ...rest
+  } = props;
+
+  const [modal, setModal] = useState(false);
+  const [dropdownKey, setDropdownKey] = useState(0);
+  const [referenceTable, setReferenceTable] = useState({ key });
+
+  /**
+   * Looks up the existing reference table base on the passed key.
+   */
+  useEffect(() => (
+    ReferenceTablesService
+      .fetchByKey(key)
+      .then(({ data }) => setReferenceTable((prevTable) => ({
+        ...prevTable,
+        ...data.reference_table
+      })))
+  ), [key]);
+
+  return (
+    <>
+      <Form.Input
+        error={error}
+        label={(
+          <ReferenceCodeFormLabel
+            label={label}
+            onClick={() => setModal(true)}
+            referenceTable={referenceTable.key}
+          />
+        )}
+        required={required}
+      >
+        <ReferenceCodeDropdown
+          {...rest}
+          id={referenceTable}
+          referenceTable={referenceTable.key}
+          key={dropdownKey}
+        />
+      </Form.Input>
+      { modal && (
+        <EditModal
+          component={ReferenceTableModal}
+          item={referenceTable}
+          onClose={() => setModal(false)}
+          onSave={(record) => (
+            ReferenceTablesService
+              .save(record)
+              .then(({ data }) => data.reference_table)
+              .then(() => setDropdownKey((prevKey) => prevKey + 1))
+              .finally(() => setModal(false))
+          )}
+        />
+      )}
+    </>
+  );
+};
+
+export default ReferenceCodeFormDropdown;

package/src/components/ReferenceCodeFormLabel.js

@@ -0,0 +1,51 @@
+// @flow
+
+import React, { type ComponentType } from 'react';
+import { withTranslation } from 'react-i18next';
+import {
+  Button,
+  Header,
+  Icon,
+  Popup
+} from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+
+type Props = {
+  label: string,
+  onClick: () => void,
+  referenceTable: string
+};
+
+const ReferenceCodeFormLabel: ComponentType<any> = withTranslation()((props: Props) => (
+  <div>
+    <label
+      htmlFor={props.referenceTable}
+    >
+      { props.label }
+    </label>
+    <Popup
+      hoverable
+      trigger={(
+        <Icon
+          name='info circle'
+          style={{
+            marginLeft: '0.3em'
+          }}
+        />
+      )}
+    >
+      <Header
+        content={props.label}
+      />
+      <p>{ i18n.t('ReferenceCodeFormLabel.content', { name: props.label })}</p>
+      <Button
+        content={i18n.t('Common.buttons.edit')}
+        icon='edit'
+        primary
+        onClick={props.onClick}
+      />
+    </Popup>
+  </div>
+));
+
+export default ReferenceCodeFormLabel;

package/src/hooks/BatchEdit.js

@@ -0,0 +1,57 @@
+// @flow
+
+import React, { useCallback, type ComponentType } from 'react';
+import _ from 'underscore';
+
+type Props = {
+  items: Array<any>,
+  onChange: (items: Array<any>) => void
+};
+
+const withBatchEdit = (WrappedComponent: ComponentType<any>): any => (props: Props) => {
+  /**
+   * Adds a new item to the list.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onAddItem = useCallback(() => {
+    props.onChange([...props.items, {}]);
+  }, [props.items]);
+
+  /**
+   * Removes the item at the passed index from the list.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onRemoveItem = useCallback((findIndex) => {
+    props.onChange(_.reject(props.items, (item, index) => index === findIndex));
+  }, [props.items]);
+
+  /**
+   * Updates the passed attribute of the item at the passed index.
+   *
+   * @type {(function(number, string, ?Event, {value: *}): void)|*}
+   */
+  const onUpdateItem = useCallback((findIndex: number, attribute: string, e: ?Event, { value }) => {
+    props.onChange(_.map(props.items, (item, index) => (
+      index !== findIndex ? item : ({ ...item, [attribute]: value })
+    )));
+  }, [props.items]);
+
+  return (
+    <WrappedComponent
+      {...props}
+      onAddItem={onAddItem}
+      onRemoveItem={onRemoveItem}
+      onUpdateItem={onUpdateItem}
+    />
+  );
+};
+
+export default withBatchEdit;
+
+export type BatchEditProps = {
+  onAddItem: () => void,
+  onRemoveItem: (index: number) => void,
+  onUpdateItem: (index: number, attribute: string, e: Event, data: any) => void
+};

package/src/i18n/en.json

@@ -21,6 +21,9 @@
     "errors": {
       "title": "Oops!"
     },
+    "labels": {
+      "noRecords": "No records."
+    },
     "messages": {
       "error": {
         "header": "Oops!"
@@ -126,6 +129,12 @@
       "showKeyboard": "Show Keyboard"
     }
   },
+  "KeyValuePairs": {
+    "labels": {
+      "key": "Key",
+      "value": "Value"
+    }
+  },
   "LazyDocument": {
     "buttons": {
       "download": "Download"
@@ -184,6 +193,9 @@
     "loginErrorHeader": "Invalid Credentials",
     "password": "Password"
   },
+  "ReferenceCodeFormLabel": {
+    "content": "The values in this list can be edited via the {{name}} reference table."
+  },
   "ReferenceCodeModal": {
     "labels": {
       "name": "Name"

package/src/index.js

@@ -38,6 +38,7 @@ export { default as ItemCollection } from './components/ItemCollection';
 export { default as ItemList } from './components/ItemList';
 export { default as Items } from './components/Items';
 export { default as KeyboardField } from './components/KeyboardField';
+export { default as KeyValuePairs } from './components/KeyValuePairs';
 export { default as LazyDocument } from './components/LazyDocument';
 export { default as LazyImage } from './components/LazyImage';
 export { default as LazyVideo } from './components/LazyVideo';
@@ -59,6 +60,8 @@ export { default as NestedAccordion } from './components/NestedAccordion';
 export { default as PlayButton } from './components/PlayButton';
 export { default as PhotoViewer } from './components/PhotoViewer';
 export { default as ReferenceCodeDropdown } from './components/ReferenceCodeDropdown';
+export { default as ReferenceCodeFormDropdown } from './components/ReferenceCodeFormDropdown';
+export { default as ReferenceCodeFormLabel } from './components/ReferenceCodeFormLabel';
 export { default as ReferenceCodeModal } from './components/ReferenceCodeModal';
 export { default as ReferenceTableModal } from './components/ReferenceTableModal';
 export { default as ReferenceTablesList } from './components/ReferenceTablesList';
@@ -77,10 +80,14 @@ export { default as VideoPlayer } from './components/VideoPlayer';
 export { default as VideoPlayerButton } from './components/VideoPlayerButton';
 export { default as ViewXML } from './components/ViewXML';
 
+// Hooks
+export { default as BatchEdit } from './hooks/BatchEdit';
+
 // Types
 export type { EditPageProps } from './components/EditPage';
 export type { FileUploadProps } from './components/FileUploadModal';
 export type { Props as ListProps } from './components/List';
+export type { BatchEditProps } from './hooks/BatchEdit';
 
 // Constants
 export { SORT_ASCENDING, SORT_DESCENDING } from './components/DataList';