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

package/package.json

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

package/src/components/FileUploadModal.js

@@ -11,7 +11,8 @@ import {
   Dimmer,
   Form,
   Item,
-  Loader, Message,
+  Loader,
+  Message,
   Modal
 } from 'semantic-ui-react';
 import _ from 'underscore';
@@ -219,30 +220,40 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
   ), []);
 
   /**
-   * Updates the passed item with the passed props.
+   * Validates the passed item.
    *
-   * @type {(function(): void)|*}
+   * @type {function(*): *&{errors: []}}
    */
-  const onUpload = useCallback(() => {
-    // Set the uploading indicator
-    setUploading(true);
+  const validateItem = useCallback((item) => {
+    const errors = [];
 
-    // Upload the files
-    onValidate()
-      .then(() => (
-        props.strategy === Strategy.batch
-          ? onBatchUpload()
-          : onSingleUpload()
-      ))
-      .finally(onComplete);
-  }, [onBatchUpload, onComplete, onSingleUpload, props.strategy]);
+    _.each(_.keys(props.required), (key) => {
+      const value = item[key];
+      let invalid;
+
+      if (_.isNumber(value)) {
+        invalid = _.isEmpty(value.toString());
+      } else {
+        invalid = _.isEmpty(value);
+      }
+
+      if (invalid) {
+        errors.push(key);
+      }
+    });
+
+    return {
+      ...item,
+      errors
+    };
+  }, [props.required]);
 
   /**
    * Validates the items on the state.
    *
    * @type {function(): Promise<void>}
    */
-  const onValidate = useCallback(() => {
+  const onValidate = useCallback(() => new Promise((resolve, reject) => {
     let error = false;
 
     setItems((prevItems) => _.map(prevItems, (item) => {
@@ -255,8 +266,31 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
       return valid;
     }));
 
-    return error ? Promise.reject() : Promise.resolve();
-  }, [items]);
+    if (error) {
+      reject();
+    } else {
+      resolve();
+    }
+  }), []);
+
+  /**
+   * Updates the passed item with the passed props.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onUpload = useCallback(() => {
+    // Set the uploading indicator
+    setUploading(true);
+
+    // Upload the files
+    onValidate()
+      .then(() => (
+        props.strategy === Strategy.batch
+          ? onBatchUpload()
+          : onSingleUpload()
+      ))
+      .finally(onComplete);
+  }, [onBatchUpload, onComplete, onSingleUpload, onValidate, props.strategy]);
 
   /**
    * Renders the error message for the passed item.
@@ -268,7 +302,7 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
       return null;
     }
 
-    const filename = !_.isEmpty(item.name) ? item.name : `File ${index}`;
+    const filename = !_.isEmpty(item.name) ? item.name : index;
     const fields = _.map(item.errors, (e) => props.required[e]).join(', ');
 
     return (
@@ -279,35 +313,6 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
     );
   }, []);
 
-  /**
-   * Validates the passed item.
-   *
-   * @type {function(*): *&{errors: []}}
-   */
-  const validateItem = useCallback((item) => {
-    const errors = [];
-
-    _.each(_.keys(props.required), (key) => {
-      const value = item[key];
-      let invalid;
-
-      if (_.isNumber(value)) {
-        invalid = _.isEmpty(value.toString());
-      } else {
-        invalid = _.isEmpty(value);
-      }
-
-      if (invalid) {
-        errors.push(key);
-      }
-    });
-
-    return {
-      ...item,
-      errors
-    };
-  }, [props.required]);
-
   /**
    * Memoization and case correction for the <code>itemComponent</code> prop.
    *
@@ -352,7 +357,7 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
                 error
               >
                 <Message.Header
-                  content={'An error occurred'}
+                  content={i18n.t('FileUploadModal.errors.header')}
                 />
                 <Message.List>
                   { _.map(items, renderMessageItem) }
@@ -391,7 +396,7 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
           <Modal.Actions>
             <Button
               content={i18n.t('Common.buttons.upload')}
-              disabled={uploading || uploadCount > 0}
+              disabled={uploading || uploadCount > 0 || _.isEmpty(items)}
               icon='cloud upload'
               loading={uploading && !props.showPageLoader}
               onClick={onUpload}

package/src/i18n/en.json

@@ -128,7 +128,8 @@
   },
   "FileUploadModal": {
     "errors": {
-      "required": "{{filename}} - The following fields are required: {{fields}}"
+      "header": "There was an error processing your files",
+      "required": "File {{filename}} - The following fields are required: {{fields}}"
     },
     "loader": "Uploading files...",
     "title": "Upload Files"

package/types/components/FileUploadModal.js.flow

@@ -11,7 +11,8 @@ import {
   Dimmer,
   Form,
   Item,
-  Loader, Message,
+  Loader,
+  Message,
   Modal
 } from 'semantic-ui-react';
 import _ from 'underscore';
@@ -219,30 +220,40 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
   ), []);
 
   /**
-   * Updates the passed item with the passed props.
+   * Validates the passed item.
    *
-   * @type {(function(): void)|*}
+   * @type {function(*): *&{errors: []}}
    */
-  const onUpload = useCallback(() => {
-    // Set the uploading indicator
-    setUploading(true);
+  const validateItem = useCallback((item) => {
+    const errors = [];
 
-    // Upload the files
-    onValidate()
-      .then(() => (
-        props.strategy === Strategy.batch
-          ? onBatchUpload()
-          : onSingleUpload()
-      ))
-      .finally(onComplete);
-  }, [onBatchUpload, onComplete, onSingleUpload, props.strategy]);
+    _.each(_.keys(props.required), (key) => {
+      const value = item[key];
+      let invalid;
+
+      if (_.isNumber(value)) {
+        invalid = _.isEmpty(value.toString());
+      } else {
+        invalid = _.isEmpty(value);
+      }
+
+      if (invalid) {
+        errors.push(key);
+      }
+    });
+
+    return {
+      ...item,
+      errors
+    };
+  }, [props.required]);
 
   /**
    * Validates the items on the state.
    *
    * @type {function(): Promise<void>}
    */
-  const onValidate = useCallback(() => {
+  const onValidate = useCallback(() => new Promise((resolve, reject) => {
     let error = false;
 
     setItems((prevItems) => _.map(prevItems, (item) => {
@@ -255,8 +266,31 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
       return valid;
     }));
 
-    return error ? Promise.reject() : Promise.resolve();
-  }, [items]);
+    if (error) {
+      reject();
+    } else {
+      resolve();
+    }
+  }), []);
+
+  /**
+   * Updates the passed item with the passed props.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onUpload = useCallback(() => {
+    // Set the uploading indicator
+    setUploading(true);
+
+    // Upload the files
+    onValidate()
+      .then(() => (
+        props.strategy === Strategy.batch
+          ? onBatchUpload()
+          : onSingleUpload()
+      ))
+      .finally(onComplete);
+  }, [onBatchUpload, onComplete, onSingleUpload, onValidate, props.strategy]);
 
   /**
    * Renders the error message for the passed item.
@@ -268,7 +302,7 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
       return null;
     }
 
-    const filename = !_.isEmpty(item.name) ? item.name : `File ${index}`;
+    const filename = !_.isEmpty(item.name) ? item.name : index;
     const fields = _.map(item.errors, (e) => props.required[e]).join(', ');
 
     return (
@@ -279,35 +313,6 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
     );
   }, []);
 
-  /**
-   * Validates the passed item.
-   *
-   * @type {function(*): *&{errors: []}}
-   */
-  const validateItem = useCallback((item) => {
-    const errors = [];
-
-    _.each(_.keys(props.required), (key) => {
-      const value = item[key];
-      let invalid;
-
-      if (_.isNumber(value)) {
-        invalid = _.isEmpty(value.toString());
-      } else {
-        invalid = _.isEmpty(value);
-      }
-
-      if (invalid) {
-        errors.push(key);
-      }
-    });
-
-    return {
-      ...item,
-      errors
-    };
-  }, [props.required]);
-
   /**
    * Memoization and case correction for the <code>itemComponent</code> prop.
    *
@@ -352,7 +357,7 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
                 error
               >
                 <Message.Header
-                  content={'An error occurred'}
+                  content={i18n.t('FileUploadModal.errors.header')}
                 />
                 <Message.List>
                   { _.map(items, renderMessageItem) }
@@ -391,7 +396,7 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
           <Modal.Actions>
             <Button
               content={i18n.t('Common.buttons.upload')}
-              disabled={uploading || uploadCount > 0}
+              disabled={uploading || uploadCount > 0 || _.isEmpty(items)}
               icon='cloud upload'
               loading={uploading && !props.showPageLoader}
               onClick={onUpload}