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

package/package.json

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

package/src/components/DataTable.js

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

package/src/components/EmbeddedList.js

@@ -271,7 +271,3 @@ export {
   SORT_ASCENDING,
   SORT_DESCENDING
 };
-
-export type {
-  Props
-};

package/src/components/FacetSlider.js

@@ -32,7 +32,7 @@ const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLEl
    *
    * @type {unknown}
    */
-  const visible = useMemo(() => range.min === 0 && range.max === 0, [range.min, range.max]);
+  const visible = useMemo(() => range.min !== 0 && range.max !== 0, [range.min, range.max]);
 
   /**
    * Resets the value and valueView when the current refinement is cleared.

package/src/components/FileUploadModal.js

@@ -48,11 +48,6 @@ 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.
    */
@@ -156,10 +151,6 @@ 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,6 +79,16 @@ type Props = {
    */
   className?: string,
 
+  /**
+   * If provided, a CSV export button will be rendered in the list header.
+   */
+  csvExportButton?: {
+    basic: boolean,
+    color: string,
+    location: string,
+    onClick?: () => void
+  },
+
   /**
    * If provided, a "delete all" button will be rendered in the list header.
    */
@@ -208,6 +218,7 @@ type State = {
 };
 
 const BUTTON_KEY_ADD = 'add';
+const BUTTON_KEY_CSV_EXPORT = 'csv-export';
 const BUTTON_KEY_DELETE_ALL = 'delete-all';
 
 /**
@@ -229,6 +240,7 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       },
       buttons: [],
       className: '',
+      csvExportButton: undefined,
       filters: undefined,
       modal: undefined,
       page: 1,
@@ -269,6 +281,7 @@ const useList = (WrappedComponent: ComponentType<any>) => (
 
       const {
         addButton = {},
+        csvExportButton = {},
         deleteButton = {},
         modal,
         selectable
@@ -288,6 +301,13 @@ 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;
@@ -331,6 +351,43 @@ 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() {
+      const visibleColumns = _.filter(this.props.columns, (col) => !col.hidden);
+
+      let csv = `${_.map(visibleColumns, (col) => `"${col.label}"`).join(',')}\n`;
+
+      _.each(this.props.items, (item) => {
+        csv = csv.concat(`${visibleColumns.map((col) => {
+          if (col.resolve) {
+            return `"${col.resolve(item)}"`;
+          }
+
+          if (item[col.name]) {
+            return `"${item[col.name]}"`;
+          }
+
+          return '';
+        }).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.
      *
@@ -533,6 +590,29 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       );
     }
 
+    /**
+   * Renders the CSV export button.
+   *
+   * @returns {null|*}
+   */
+    renderCsvExportButton() {
+      if (!this.props.csvExportButton) {
+        return null;
+      }
+
+      return (
+        <Button
+          basic={this.props.csvExportButton.basic}
+          color={this.props.csvExportButton.color}
+          key={BUTTON_KEY_CSV_EXPORT}
+          onClick={this.onCsvExportButton.bind(this)}
+        >
+          <Icon name='download' />
+          { i18n.t('List.buttons.csvExport') }
+        </Button>
+      );
+    }
+
     /**
      * Renders the delete all button.
      *

package/src/components/ListTable.js

@@ -131,7 +131,3 @@ ListTable.defaultProps = {
 };
 
 export default ListTable;
-
-export type {
-  Props
-};

package/src/i18n/en.json

@@ -233,6 +233,7 @@
   "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/src/index.js

@@ -109,10 +109,8 @@ export { default as BatchEdit } from './hooks/BatchEdit';
 
 // Types
 export type { EditPageProps } from './components/EditPage';
-export type { Props as EmbeddedListProps } from './components/EmbeddedList';
 export type { FileUploadProps } from './components/FileUploadModal';
 export type { Props as ListProps } from './components/List';
-export type { Props as ListTableProps } from './components/ListTable';
 export type { BatchEditProps } from './hooks/BatchEdit';
 
 // Constants

package/types/components/DataTable.js.flow

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

package/types/components/EmbeddedList.js.flow

@@ -271,7 +271,3 @@ export {
   SORT_ASCENDING,
   SORT_DESCENDING
 };
-
-export type {
-  Props
-};

package/types/components/FacetSlider.js.flow

@@ -32,7 +32,7 @@ const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLEl
    *
    * @type {unknown}
    */
-  const visible = useMemo(() => range.min === 0 && range.max === 0, [range.min, range.max]);
+  const visible = useMemo(() => range.min !== 0 && range.max !== 0, [range.min, range.max]);
 
   /**
    * Resets the value and valueView when the current refinement is cleared.

package/types/components/FileUploadModal.js.flow

@@ -48,11 +48,6 @@ 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.
    */
@@ -156,10 +151,6 @@ 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,6 +79,16 @@ type Props = {
    */
   className?: string,
 
+  /**
+   * If provided, a CSV export button will be rendered in the list header.
+   */
+  csvExportButton?: {
+    basic: boolean,
+    color: string,
+    location: string,
+    onClick?: () => void
+  },
+
   /**
    * If provided, a "delete all" button will be rendered in the list header.
    */
@@ -208,6 +218,7 @@ type State = {
 };
 
 const BUTTON_KEY_ADD = 'add';
+const BUTTON_KEY_CSV_EXPORT = 'csv-export';
 const BUTTON_KEY_DELETE_ALL = 'delete-all';
 
 /**
@@ -229,6 +240,7 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       },
       buttons: [],
       className: '',
+      csvExportButton: undefined,
       filters: undefined,
       modal: undefined,
       page: 1,
@@ -269,6 +281,7 @@ const useList = (WrappedComponent: ComponentType<any>) => (
 
       const {
         addButton = {},
+        csvExportButton = {},
         deleteButton = {},
         modal,
         selectable
@@ -288,6 +301,13 @@ 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;
@@ -331,6 +351,43 @@ 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() {
+      const visibleColumns = _.filter(this.props.columns, (col) => !col.hidden);
+
+      let csv = `${_.map(visibleColumns, (col) => `"${col.label}"`).join(',')}\n`;
+
+      _.each(this.props.items, (item) => {
+        csv = csv.concat(`${visibleColumns.map((col) => {
+          if (col.resolve) {
+            return `"${col.resolve(item)}"`;
+          }
+
+          if (item[col.name]) {
+            return `"${item[col.name]}"`;
+          }
+
+          return '';
+        }).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.
      *
@@ -533,6 +590,29 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       );
     }
 
+    /**
+   * Renders the CSV export button.
+   *
+   * @returns {null|*}
+   */
+    renderCsvExportButton() {
+      if (!this.props.csvExportButton) {
+        return null;
+      }
+
+      return (
+        <Button
+          basic={this.props.csvExportButton.basic}
+          color={this.props.csvExportButton.color}
+          key={BUTTON_KEY_CSV_EXPORT}
+          onClick={this.onCsvExportButton.bind(this)}
+        >
+          <Icon name='download' />
+          { i18n.t('List.buttons.csvExport') }
+        </Button>
+      );
+    }
+
     /**
      * Renders the delete all button.
      *

package/types/components/ListTable.js.flow

@@ -131,7 +131,3 @@ ListTable.defaultProps = {
 };
 
 export default ListTable;
-
-export type {
-  Props
-};

package/types/index.js.flow

@@ -109,10 +109,8 @@ export { default as BatchEdit } from './hooks/BatchEdit';
 
 // Types
 export type { EditPageProps } from './components/EditPage';
-export type { Props as EmbeddedListProps } from './components/EmbeddedList';
 export type { FileUploadProps } from './components/FileUploadModal';
 export type { Props as ListProps } from './components/List';
-export type { Props as ListTableProps } from './components/ListTable';
 export type { BatchEditProps } from './hooks/BatchEdit';
 
 // Constants