@performant-software/semantic-components 1.0.23-beta.3 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.23-beta.3",
+  "version": "1.0.23",
   "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": "^1.0.23-beta.3",
+    "@performant-software/shared-components": "^1.0.23",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

package/src/components/List.js

@@ -83,6 +83,7 @@ type Props = {
    * If provided, a CSV export button will be rendered in the list header.
    */
   csvExportButton?: {
+    basic: boolean,
     color: string,
     location: string,
     onClick?: () => void
@@ -357,14 +358,21 @@ const useList = (WrappedComponent: ComponentType<any>) => (
      * @param items
      */
     onCsvExportButton() {
-      let csv = `${this.props.columns.map((col) => `"${col.label}"`).join(',')}\n`;
+      const visibleColumns = _.filter(this.props.columns, (col) => !col.hidden);
+
+      let csv = `${_.map(visibleColumns, (col) => `"${col.label}"`).join(',')}\n`;
 
-      this.props.items.forEach((item) => {
-        csv = csv.concat(`${this.props.columns.map((col) => {
+      _.each(this.props.items, (item) => {
+        csv = csv.concat(`${visibleColumns.map((col) => {
           if (col.resolve) {
             return `"${col.resolve(item)}"`;
           }
-          return `"${item[col.name]}"`;
+
+          if (item[col.name]) {
+            return `"${item[col.name]}"`;
+          }
+
+          return '';
         }).join(',')}\n`);
       });
 
@@ -594,12 +602,12 @@ const useList = (WrappedComponent: ComponentType<any>) => (
 
       return (
         <Button
-          basic
+          basic={this.props.csvExportButton.basic}
           color={this.props.csvExportButton.color}
           key={BUTTON_KEY_CSV_EXPORT}
           onClick={this.onCsvExportButton.bind(this)}
         >
-          <Icon name='shopping basket' />
+          <Icon name='download' />
           { i18n.t('List.buttons.csvExport') }
         </Button>
       );

package/src/components/ListTable.js

@@ -14,15 +14,6 @@ type Props = DataListProps & DataTableProps & {
    */
   configurable?: boolean,
 
-  /**
-   * If provided, a CSV export button will be rendered in the list header.
-   */
-  csvExportButton?: {
-    color: string,
-    location: string,
-    onClick?: () => void
-  },
-
   /**
    * The name of the default sort column.
    */

package/types/components/List.js.flow

@@ -83,6 +83,7 @@ type Props = {
    * If provided, a CSV export button will be rendered in the list header.
    */
   csvExportButton?: {
+    basic: boolean,
     color: string,
     location: string,
     onClick?: () => void
@@ -357,14 +358,21 @@ const useList = (WrappedComponent: ComponentType<any>) => (
      * @param items
      */
     onCsvExportButton() {
-      let csv = `${this.props.columns.map((col) => `"${col.label}"`).join(',')}\n`;
+      const visibleColumns = _.filter(this.props.columns, (col) => !col.hidden);
+
+      let csv = `${_.map(visibleColumns, (col) => `"${col.label}"`).join(',')}\n`;
 
-      this.props.items.forEach((item) => {
-        csv = csv.concat(`${this.props.columns.map((col) => {
+      _.each(this.props.items, (item) => {
+        csv = csv.concat(`${visibleColumns.map((col) => {
           if (col.resolve) {
             return `"${col.resolve(item)}"`;
           }
-          return `"${item[col.name]}"`;
+
+          if (item[col.name]) {
+            return `"${item[col.name]}"`;
+          }
+
+          return '';
         }).join(',')}\n`);
       });
 
@@ -594,12 +602,12 @@ const useList = (WrappedComponent: ComponentType<any>) => (
 
       return (
         <Button
-          basic
+          basic={this.props.csvExportButton.basic}
           color={this.props.csvExportButton.color}
           key={BUTTON_KEY_CSV_EXPORT}
           onClick={this.onCsvExportButton.bind(this)}
         >
-          <Icon name='shopping basket' />
+          <Icon name='download' />
           { i18n.t('List.buttons.csvExport') }
         </Button>
       );

package/types/components/ListTable.js.flow

@@ -14,15 +14,6 @@ type Props = DataListProps & DataTableProps & {
    */
   configurable?: boolean,
 
-  /**
-   * If provided, a CSV export button will be rendered in the list header.
-   */
-  csvExportButton?: {
-    color: string,
-    location: string,
-    onClick?: () => void
-  },
-
   /**
    * The name of the default sort column.
    */