@performant-software/semantic-components 1.0.23-beta.2 → 1.0.24-beta.0

package/package.json

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

package/src/components/DataTable.js

@@ -633,7 +633,6 @@ DataTable.defaultProps = {
   buttons: [],
   count: 0,
   className: '',
-  csvExportButton: undefined,
   expandableRows: false,
   expandPanel: undefined,
   filters: undefined,

package/src/components/FileUploadModal.js

@@ -48,6 +48,11 @@ type Props = {
    */
   onClose: () => void,
 
+  /**
+   * Callback fired when the upload has completed.
+   */
+  onComplete: () => void,
+
   /**
    * Callback fired when the save button is clicked. See <code>strategy</code> prop.
    */
@@ -151,6 +156,10 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
   const onComplete = useCallback(() => {
     setUploading(false);
 
+    if (props.onComplete) {
+      props.onComplete();
+    }
+
     if (props.closeOnComplete) {
       props.onClose();
     }

package/src/components/List.js

@@ -79,15 +79,6 @@ type Props = {
    */
   className?: string,
 
-  /**
-   * If provided, a CSV export button will be rendered in the list header.
-   */
-  csvExportButton?: {
-    color: string,
-    location: string,
-    onClick?: () => void
-  },
-
   /**
    * If provided, a "delete all" button will be rendered in the list header.
    */
@@ -217,7 +208,6 @@ type State = {
 };
 
 const BUTTON_KEY_ADD = 'add';
-const BUTTON_KEY_CSV_EXPORT = 'csv-export';
 const BUTTON_KEY_DELETE_ALL = 'delete-all';
 
 /**
@@ -239,7 +229,6 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       },
       buttons: [],
       className: '',
-      csvExportButton: undefined,
       filters: undefined,
       modal: undefined,
       page: 1,
@@ -280,7 +269,6 @@ const useList = (WrappedComponent: ComponentType<any>) => (
 
       const {
         addButton = {},
-        csvExportButton = {},
         deleteButton = {},
         modal,
         selectable
@@ -300,13 +288,6 @@ const useList = (WrappedComponent: ComponentType<any>) => (
         });
       }
 
-      // Add the CSV export button to the list if the csvExport prop is passed
-      if (csvExportButton.location === location && !selectable) {
-        buttons.push({
-          render: this.renderCsvExportButton.bind(this)
-        });
-      }
-
       // Resolve the array of other buttons
       buttons.push(..._.filter(this.props.buttons, (button) => {
         let include = false;
@@ -350,36 +331,6 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       this.setState({ selectedItem: copy, modalEdit: true });
     }
 
-    /**
-     * Generates and downloads a CSV file containing all
-     * the data in the table.
-     *
-     * @param items
-     */
-    onCsvExportButton() {
-      let csv = `${this.props.columns.map((col) => `"${col.label}"`).join(',')}\n`;
-
-      this.props.items.forEach((item) => {
-        csv = csv.concat(`${this.props.columns.map((col) => {
-          if (col.resolve) {
-            return col.resolve(item);
-          }
-          return `"${item[col.name]}"`;
-        }).join(',')}\n`);
-      });
-
-      const element = document.createElement('a');
-      element.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(csv)}`);
-      element.setAttribute('download', `${this.props.collectionName || 'table'}.csv`);
-
-      element.style.display = 'none';
-      document.body.appendChild(element);
-
-      element.click();
-
-      document.body.removeChild(element);
-    }
-
     /**
      * Deletes the currently selected item and clears the state.
      *
@@ -582,29 +533,6 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       );
     }
 
-    /**
-   * Renders the CSV export button.
-   *
-   * @returns {null|*}
-   */
-    renderCsvExportButton() {
-      if (!this.props.csvExportButton) {
-        return null;
-      }
-
-      return (
-        <Button
-          basic
-          color={this.props.csvExportButton.color}
-          key={BUTTON_KEY_CSV_EXPORT}
-          onClick={this.onCsvExportButton.bind(this)}
-        >
-          <Icon name='shopping basket' />
-          { i18n.t('List.buttons.csvExport') }
-        </Button>
-      );
-    }
-
     /**
      * Renders the delete all 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/src/i18n/en.json

@@ -233,7 +233,6 @@
   "List": {
     "buttons": {
       "add": "Add",
-      "csvExport": "CSV Export",
       "deleteAll": "Delete all"
     },
     "deleteAllContent": "Are you sure you want to remove all records? This action cannot be undone.",

package/types/components/DataTable.js.flow

@@ -633,7 +633,6 @@ DataTable.defaultProps = {
   buttons: [],
   count: 0,
   className: '',
-  csvExportButton: undefined,
   expandableRows: false,
   expandPanel: undefined,
   filters: undefined,

package/types/components/FileUploadModal.js.flow

@@ -48,6 +48,11 @@ type Props = {
    */
   onClose: () => void,
 
+  /**
+   * Callback fired when the upload has completed.
+   */
+  onComplete: () => void,
+
   /**
    * Callback fired when the save button is clicked. See <code>strategy</code> prop.
    */
@@ -151,6 +156,10 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
   const onComplete = useCallback(() => {
     setUploading(false);
 
+    if (props.onComplete) {
+      props.onComplete();
+    }
+
     if (props.closeOnComplete) {
       props.onClose();
     }

package/types/components/List.js.flow

@@ -79,15 +79,6 @@ type Props = {
    */
   className?: string,
 
-  /**
-   * If provided, a CSV export button will be rendered in the list header.
-   */
-  csvExportButton?: {
-    color: string,
-    location: string,
-    onClick?: () => void
-  },
-
   /**
    * If provided, a "delete all" button will be rendered in the list header.
    */
@@ -217,7 +208,6 @@ type State = {
 };
 
 const BUTTON_KEY_ADD = 'add';
-const BUTTON_KEY_CSV_EXPORT = 'csv-export';
 const BUTTON_KEY_DELETE_ALL = 'delete-all';
 
 /**
@@ -239,7 +229,6 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       },
       buttons: [],
       className: '',
-      csvExportButton: undefined,
       filters: undefined,
       modal: undefined,
       page: 1,
@@ -280,7 +269,6 @@ const useList = (WrappedComponent: ComponentType<any>) => (
 
       const {
         addButton = {},
-        csvExportButton = {},
         deleteButton = {},
         modal,
         selectable
@@ -300,13 +288,6 @@ const useList = (WrappedComponent: ComponentType<any>) => (
         });
       }
 
-      // Add the CSV export button to the list if the csvExport prop is passed
-      if (csvExportButton.location === location && !selectable) {
-        buttons.push({
-          render: this.renderCsvExportButton.bind(this)
-        });
-      }
-
       // Resolve the array of other buttons
       buttons.push(..._.filter(this.props.buttons, (button) => {
         let include = false;
@@ -350,36 +331,6 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       this.setState({ selectedItem: copy, modalEdit: true });
     }
 
-    /**
-     * Generates and downloads a CSV file containing all
-     * the data in the table.
-     *
-     * @param items
-     */
-    onCsvExportButton() {
-      let csv = `${this.props.columns.map((col) => `"${col.label}"`).join(',')}\n`;
-
-      this.props.items.forEach((item) => {
-        csv = csv.concat(`${this.props.columns.map((col) => {
-          if (col.resolve) {
-            return col.resolve(item);
-          }
-          return `"${item[col.name]}"`;
-        }).join(',')}\n`);
-      });
-
-      const element = document.createElement('a');
-      element.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(csv)}`);
-      element.setAttribute('download', `${this.props.collectionName || 'table'}.csv`);
-
-      element.style.display = 'none';
-      document.body.appendChild(element);
-
-      element.click();
-
-      document.body.removeChild(element);
-    }
-
     /**
      * Deletes the currently selected item and clears the state.
      *
@@ -582,29 +533,6 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       );
     }
 
-    /**
-   * Renders the CSV export button.
-   *
-   * @returns {null|*}
-   */
-    renderCsvExportButton() {
-      if (!this.props.csvExportButton) {
-        return null;
-      }
-
-      return (
-        <Button
-          basic
-          color={this.props.csvExportButton.color}
-          key={BUTTON_KEY_CSV_EXPORT}
-          onClick={this.onCsvExportButton.bind(this)}
-        >
-          <Icon name='shopping basket' />
-          { i18n.t('List.buttons.csvExport') }
-        </Button>
-      );
-    }
-
     /**
      * Renders the delete all 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.
    */