@teselagen/ui 0.7.6 → 0.7.7-beta.2

package/index.cjs.js

@@ -67289,6 +67289,21 @@ function getNewName(list2, targetName) {
   return newName;
 }
 __name(getNewName, "getNewName");
+const useTraceUpdate = /* @__PURE__ */ __name((props) => {
+  const prev = React$1.useRef(props);
+  React$1.useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k2, v2]) => {
+      if (prev.current[k2] !== v2) {
+        ps[k2] = [prev.current[k2], v2];
+      }
+      return ps;
+    }, {});
+    if (Object.keys(changedProps).length > 0) {
+      console.log("Changed props:", changedProps);
+    }
+    prev.current = props;
+  });
+}, "useTraceUpdate");
 const manualEnterMessage = "Build CSV File";
 const manualEnterSubMessage = "Paste or type data to build a CSV file";
 const helperText = [
@@ -67458,7 +67473,7 @@ const Uploader = /* @__PURE__ */ __name(({
 }) => {
   var _a, _b;
   const dispatch = reactRedux.useDispatch();
-  const [acceptLoading, setAcceptLoading] = React$1.useState();
+  const [acceptLoading, setAcceptLoading] = React$1.useState(true);
   const [resolvedAccept, setResolvedAccept] = React$1.useState();
   const [loading, setLoading] = React$1.useState(false);
   const filesToClean = React$1.useRef([]);
@@ -67548,16 +67563,24 @@ const Uploader = /* @__PURE__ */ __name(({
     }
     return __accept;
   }, [__accept, isAcceptPromise, resolvedAccept]);
+  useTraceUpdate({
+    __accept,
+    isAcceptPromise
+  });
   React$1.useEffect(() => {
     if (isAcceptPromise) {
       setAcceptLoading(true);
       Promise.allSettled(Array.isArray(__accept) ? __accept : [__accept]).then(
         (results) => {
           const resolved = flatMap(results, (r2) => r2.value);
-          setAcceptLoading(false);
           setResolvedAccept(resolved);
+          setTimeout(() => {
+            setAcceptLoading(false);
+          }, 0);
         }
       );
+    } else {
+      setAcceptLoading(false);
     }
   }, [__accept, isAcceptPromise]);
   let dropzoneDisabled = disabled;
@@ -73690,21 +73713,6 @@ const CmdButton = withCommand({
   icon: "icon",
   disabled: "isDisabled"
 })(core.Button);
-const useTraceUpdate = /* @__PURE__ */ __name((props) => {
-  const prev = React$1.useRef(props);
-  React$1.useEffect(() => {
-    const changedProps = Object.entries(props).reduce((ps, [k2, v2]) => {
-      if (prev.current[k2] !== v2) {
-        ps[k2] = [prev.current[k2], v2];
-      }
-      return ps;
-    }, {});
-    if (Object.keys(changedProps).length > 0) {
-      console.log("Changed props:", changedProps);
-    }
-    prev.current = props;
-  });
-}, "useTraceUpdate");
 const showProgressToast = /* @__PURE__ */ __name((message, value, key, opts) => {
   return window.toastr.default(
     /* @__PURE__ */ React$1.createElement("div", null, /* @__PURE__ */ React$1.createElement("div", { style: { marginBottom: 10 } }, message), /* @__PURE__ */ React$1.createElement(

package/index.es.js

@@ -67271,6 +67271,21 @@ function getNewName(list2, targetName) {
   return newName;
 }
 __name(getNewName, "getNewName");
+const useTraceUpdate = /* @__PURE__ */ __name((props) => {
+  const prev = useRef(props);
+  useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k2, v2]) => {
+      if (prev.current[k2] !== v2) {
+        ps[k2] = [prev.current[k2], v2];
+      }
+      return ps;
+    }, {});
+    if (Object.keys(changedProps).length > 0) {
+      console.log("Changed props:", changedProps);
+    }
+    prev.current = props;
+  });
+}, "useTraceUpdate");
 const manualEnterMessage = "Build CSV File";
 const manualEnterSubMessage = "Paste or type data to build a CSV file";
 const helperText = [
@@ -67440,7 +67455,7 @@ const Uploader = /* @__PURE__ */ __name(({
 }) => {
   var _a, _b;
   const dispatch = useDispatch();
-  const [acceptLoading, setAcceptLoading] = useState();
+  const [acceptLoading, setAcceptLoading] = useState(true);
   const [resolvedAccept, setResolvedAccept] = useState();
   const [loading, setLoading] = useState(false);
   const filesToClean = useRef([]);
@@ -67530,16 +67545,24 @@ const Uploader = /* @__PURE__ */ __name(({
     }
     return __accept;
   }, [__accept, isAcceptPromise, resolvedAccept]);
+  useTraceUpdate({
+    __accept,
+    isAcceptPromise
+  });
   useEffect(() => {
     if (isAcceptPromise) {
       setAcceptLoading(true);
       Promise.allSettled(Array.isArray(__accept) ? __accept : [__accept]).then(
         (results) => {
           const resolved = flatMap(results, (r2) => r2.value);
-          setAcceptLoading(false);
           setResolvedAccept(resolved);
+          setTimeout(() => {
+            setAcceptLoading(false);
+          }, 0);
         }
       );
+    } else {
+      setAcceptLoading(false);
     }
   }, [__accept, isAcceptPromise]);
   let dropzoneDisabled = disabled;
@@ -73672,21 +73695,6 @@ const CmdButton = withCommand({
   icon: "icon",
   disabled: "isDisabled"
 })(Button);
-const useTraceUpdate = /* @__PURE__ */ __name((props) => {
-  const prev = useRef(props);
-  useEffect(() => {
-    const changedProps = Object.entries(props).reduce((ps, [k2, v2]) => {
-      if (prev.current[k2] !== v2) {
-        ps[k2] = [prev.current[k2], v2];
-      }
-      return ps;
-    }, {});
-    if (Object.keys(changedProps).length > 0) {
-      console.log("Changed props:", changedProps);
-    }
-    prev.current = props;
-  });
-}, "useTraceUpdate");
 const showProgressToast = /* @__PURE__ */ __name((message, value, key, opts) => {
   return window.toastr.default(
     /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { style: { marginBottom: 10 } }, message), /* @__PURE__ */ React__default.createElement(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.7.6",
+  "version": "0.7.7-beta.2",
   "main": "./src/index.js",
   "exports": {
     ".": {

package/src/FormComponents/Uploader.js

@@ -49,6 +49,8 @@ import { LoadingDots } from "./LoadingDots";
 import { useDispatch } from "react-redux";
 import { flushSync } from "react-dom";
 import { useStableReference } from "../utils/hooks/useStableReference";
+import useDeepCompareEffect from "use-deep-compare-effect";
+import { useTraceUpdate } from "../utils/useTraceUpdate";
 
 const manualEnterMessage = "Build CSV File";
 const manualEnterSubMessage = "Paste or type data to build a CSV file";
@@ -252,7 +254,7 @@ const Uploader = ({
   validateAgainstSchema: _validateAgainstSchema
 }) => {
   const dispatch = useDispatch();
-  const [acceptLoading, setAcceptLoading] = useState();
+  const [acceptLoading, setAcceptLoading] = useState(true); // set to true by default to prevent the dropzone from being actionable until the accept is resolved
   const [resolvedAccept, setResolvedAccept] = useState();
   const [loading, setLoading] = useState(false);
   const filesToClean = useRef([]);
@@ -362,17 +364,26 @@ const Uploader = ({
     }
     return __accept;
   }, [__accept, isAcceptPromise, resolvedAccept]);
-
+  useTraceUpdate({
+    __accept,
+    isAcceptPromise
+  });
   useEffect(() => {
     if (isAcceptPromise) {
       setAcceptLoading(true);
       Promise.allSettled(Array.isArray(__accept) ? __accept : [__accept]).then(
         results => {
           const resolved = flatMap(results, r => r.value);
-          setAcceptLoading(false);
           setResolvedAccept(resolved);
+          setTimeout(() => {
+            // give the resolved accept a full JS cycle to update before allowing actionability on the dropzone
+            setAcceptLoading(false);
+          }, 0);
         }
       );
+    } else {
+      // set this to false since it is defaulted to true
+      setAcceptLoading(false);
     }
   }, [__accept, isAcceptPromise]);