@performant-software/semantic-components 0.5.7 → 0.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "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.8",
     "@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.8",
     "flow-copy-source": "^2.0.9",
     "less": "^4.1.2",
     "less-loader": "^11.0.0",

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/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]);