@performant-software/semantic-components 0.5.7 → 0.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "0.5.7",
+  "version": "0.5.10",
   "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.7",
+    "@performant-software/shared-components": "^0.5.10",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",
@@ -32,7 +32,7 @@
     "react-dom": ">= 16.13.1 < 18.0.0"
   },
   "devDependencies": {
-    "@performant-software/webpack-config": "^0.5.7",
+    "@performant-software/webpack-config": "^0.5.10",
     "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

@@ -1,6 +1,6 @@
 // @flow
 
-import { Browser } from '@performant-software/shared-components';
+import { Browser, Object as ObjectUtils } from '@performant-software/shared-components';
 import React, { Component, createRef, type Element } from 'react';
 import {
   Checkbox,
@@ -122,6 +122,17 @@ class DataTable extends Component<Props, State> {
     }
   }
 
+  /**
+   * Reinitialize the column refs if the columns change.
+   *
+   * @param prevProps
+   */
+  componentDidUpdate(prevProps: Props) {
+    if (!ObjectUtils.isEqual(prevProps.columns, this.props.columns)) {
+      this.initializeColumnRefs();
+    }
+  }
+
   /**
    * Removes the mousemove and mouseup event listeners.
    */

package/src/components/DataTableColumnSelector.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { Object as ObjectUtils } from '@performant-software/shared-components';
 import React, { Component, type ComponentType, type Element } from 'react';
 import { Checkbox, Dropdown, Icon } from 'semantic-ui-react';
 import _ from 'underscore';
@@ -49,7 +50,7 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
      * @param prevProps
      */
     componentDidUpdate(prevProps: Props): * {
-      if (prevProps.columns !== this.props.columns) {
+      if (!ObjectUtils.isEqual(prevProps.columns, this.props.columns)) {
         this.setState({ columns: this.props.columns });
       }
     }

package/src/components/ListTable.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { Hooks, Object as ObjectUtils } from '@performant-software/shared-components';
 import React, { useEffect } from 'react';
 import _ from 'underscore';
 import DataTable from './DataTable';
@@ -20,6 +21,8 @@ type Props = {
 };
 
 const ListTable = (props: Props) => {
+  const prevColumns = Hooks.usePrevious(props.columns);
+
   /**
    * Sorts the list by the selected column, and/or reverse the direction.
    *
@@ -51,18 +54,24 @@ const ListTable = (props: Props) => {
    * sortable column.
    */
   useEffect(() => {
-    const { page, defaultSort, defaultSortDirection = SORT_ASCENDING } = props;
-
-    if (defaultSort) {
-      props.onSort(defaultSort, defaultSortDirection, page);
-    } else {
-      const sortableColumn = _.findWhere(props.columns, { sortable: true });
+    if (!ObjectUtils.isEqual(props.columns, prevColumns)) {
+      const {
+        page,
+        defaultSort,
+        defaultSortDirection = SORT_ASCENDING
+      } = props;
 
-      if (sortableColumn) {
-        onColumnClick(sortableColumn);
+      if (defaultSort) {
+        props.onSort(defaultSort, defaultSortDirection, page);
       } else {
-        // If no columns are sortable, load the data as is
-        props.onInit();
+        const sortableColumn = _.findWhere(props.columns, { sortable: true });
+
+        if (sortableColumn) {
+          onColumnClick(sortableColumn);
+        } else {
+          // If no columns are sortable, load the data as is
+          props.onInit();
+        }
       }
     }
   }, [props.columns]);

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

@@ -1,6 +1,6 @@
 // @flow
 
-import { Browser } from '@performant-software/shared-components';
+import { Browser, Object as ObjectUtils } from '@performant-software/shared-components';
 import React, { Component, createRef, type Element } from 'react';
 import {
   Checkbox,
@@ -122,6 +122,17 @@ class DataTable extends Component<Props, State> {
     }
   }
 
+  /**
+   * Reinitialize the column refs if the columns change.
+   *
+   * @param prevProps
+   */
+  componentDidUpdate(prevProps: Props) {
+    if (!ObjectUtils.isEqual(prevProps.columns, this.props.columns)) {
+      this.initializeColumnRefs();
+    }
+  }
+
   /**
    * Removes the mousemove and mouseup event listeners.
    */

package/types/components/DataTableColumnSelector.js.flow

@@ -1,5 +1,6 @@
 // @flow
 
+import { Object as ObjectUtils } from '@performant-software/shared-components';
 import React, { Component, type ComponentType, type Element } from 'react';
 import { Checkbox, Dropdown, Icon } from 'semantic-ui-react';
 import _ from 'underscore';
@@ -49,7 +50,7 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
      * @param prevProps
      */
     componentDidUpdate(prevProps: Props): * {
-      if (prevProps.columns !== this.props.columns) {
+      if (!ObjectUtils.isEqual(prevProps.columns, this.props.columns)) {
         this.setState({ columns: this.props.columns });
       }
     }

package/types/components/ListTable.js.flow

@@ -1,5 +1,6 @@
 // @flow
 
+import { Hooks, Object as ObjectUtils } from '@performant-software/shared-components';
 import React, { useEffect } from 'react';
 import _ from 'underscore';
 import DataTable from './DataTable';
@@ -20,6 +21,8 @@ type Props = {
 };
 
 const ListTable = (props: Props) => {
+  const prevColumns = Hooks.usePrevious(props.columns);
+
   /**
    * Sorts the list by the selected column, and/or reverse the direction.
    *
@@ -51,18 +54,24 @@ const ListTable = (props: Props) => {
    * sortable column.
    */
   useEffect(() => {
-    const { page, defaultSort, defaultSortDirection = SORT_ASCENDING } = props;
-
-    if (defaultSort) {
-      props.onSort(defaultSort, defaultSortDirection, page);
-    } else {
-      const sortableColumn = _.findWhere(props.columns, { sortable: true });
+    if (!ObjectUtils.isEqual(props.columns, prevColumns)) {
+      const {
+        page,
+        defaultSort,
+        defaultSortDirection = SORT_ASCENDING
+      } = props;
 
-      if (sortableColumn) {
-        onColumnClick(sortableColumn);
+      if (defaultSort) {
+        props.onSort(defaultSort, defaultSortDirection, page);
       } else {
-        // If no columns are sortable, load the data as is
-        props.onInit();
+        const sortableColumn = _.findWhere(props.columns, { sortable: true });
+
+        if (sortableColumn) {
+          onColumnClick(sortableColumn);
+        } else {
+          // If no columns are sortable, load the data as is
+          props.onInit();
+        }
       }
     }
   }, [props.columns]);