@performant-software/semantic-components 1.0.4-beta.7 → 1.0.4-beta.9

package/package.json

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

package/src/components/FileUploadModal.js

@@ -179,7 +179,7 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
       const item = items[i];
 
       // Update the status for the item
-      setStatus(item, Status.processing);
+      setStatus(i, Status.processing);
 
       let error;
 
@@ -193,9 +193,9 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
 
       // Update the status for the item
       if (error) {
-        setStatus(item, Status.error);
+        setStatus(i, Status.error);
       } else {
-        setStatus(item, Status.complete);
+        setStatus(i, Status.complete);
       }
 
       // Update the upload count
@@ -326,6 +326,23 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
     );
   }, []);
 
+  /**
+   * Renders the status component for the passed index.
+   *
+   * @type {(function(*): (null|*))|*}
+   */
+  const renderStatus = useCallback((index) => {
+    if (props.strategy !== Strategy.single) {
+      return null;
+    }
+
+    return (
+      <FileUploadStatus
+        status={statuses[index]}
+      />
+    );
+  }, [statuses, props.strategy]);
+
   /**
    * Memoization and case correction for the <code>itemComponent</code> prop.
    *
@@ -403,13 +420,8 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
                   onDelete={onDelete.bind(this, item)}
                   onTextInputChange={onTextInputChange.bind(this, item)}
                   onUpdate={onUpdate.bind(this, item)}
-                >
-                  { props.strategy === Strategy.single && (
-                    <FileUploadStatus
-                      status={statuses[index]}
-                    />
-                  )}
-                </UploadItem>
+                  renderStatus={renderStatus.bind(this, index)}
+                />
               ))}
             </Item.Group>
           </Modal.Content>

package/types/components/FileUploadModal.js.flow

@@ -179,7 +179,7 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
       const item = items[i];
 
       // Update the status for the item
-      setStatus(item, Status.processing);
+      setStatus(i, Status.processing);
 
       let error;
 
@@ -193,9 +193,9 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
 
       // Update the status for the item
       if (error) {
-        setStatus(item, Status.error);
+        setStatus(i, Status.error);
       } else {
-        setStatus(item, Status.complete);
+        setStatus(i, Status.complete);
       }
 
       // Update the upload count
@@ -326,6 +326,23 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
     );
   }, []);
 
+  /**
+   * Renders the status component for the passed index.
+   *
+   * @type {(function(*): (null|*))|*}
+   */
+  const renderStatus = useCallback((index) => {
+    if (props.strategy !== Strategy.single) {
+      return null;
+    }
+
+    return (
+      <FileUploadStatus
+        status={statuses[index]}
+      />
+    );
+  }, [statuses, props.strategy]);
+
   /**
    * Memoization and case correction for the <code>itemComponent</code> prop.
    *
@@ -403,13 +420,8 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
                   onDelete={onDelete.bind(this, item)}
                   onTextInputChange={onTextInputChange.bind(this, item)}
                   onUpdate={onUpdate.bind(this, item)}
-                >
-                  { props.strategy === Strategy.single && (
-                    <FileUploadStatus
-                      status={statuses[index]}
-                    />
-                  )}
-                </UploadItem>
+                  renderStatus={renderStatus.bind(this, index)}
+                />
               ))}
             </Item.Group>
           </Modal.Content>