@teselagen/ui 0.3.85 → 0.4.2

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.3.85",
+  "version": "0.4.2",
   "main": "./src/index.js",
   "exports": {
     ".": {
       "import": "./index.es.js",
       "require": "./index.cjs.js"
-    }
+    },
+    "./style.css": "./style.css"
   },
   "dependencies": {
     "@teselagen/file-utils": "0.3.16",
@@ -18,6 +19,7 @@
     "@teselagen/react-table": "6.10.16",
     "bluebird": "3.7.2",
     "buffer": "5.7.1",
+    "classnames": "^2.3.2",
     "color": "^3.2.1",
     "copy-to-clipboard": "^3.3.1",
     "dayjs": "^1.10.4",

package/src/DataTable/validateTableWideErrors.js

@@ -28,7 +28,10 @@ export function validateTableWideErrors({
     });
   }
   const displayNameMap = {};
+  const fieldUpperToPath = {};
+
   forEach(schema.fields, f => {
+    fieldUpperToPath[f.path.toUpperCase()] = f.path;
     displayNameMap[f.path] = f.displayName || startCase(camelCase(f.path));
   });
   function getDisplayName(path) {
@@ -80,6 +83,28 @@ export function validateTableWideErrors({
       });
     });
   }
+
+  const requireIfs = [];
+  schema.fields.forEach(col => {
+    const { path, requireIf } = col;
+    if (requireIf) {
+      const requireIfPath = fieldUpperToPath[requireIf.toUpperCase()];
+      requireIfs.push([requireIfPath, path]);
+    }
+  });
+  requireIfs.forEach(([requireIfPath, path]) => {
+    entities.forEach(entity => {
+      const requireIfVal = getCellVal(entity, requireIfPath);
+      const pathVal = getCellVal(entity, path);
+      if (requireIfVal && !pathVal) {
+        const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+        newCellValidate[cellId] = {
+          message: `This field is required if ${displayNameMap[requireIfPath]} is present`,
+          _isTableWideError: true
+        };
+      }
+    });
+  });
   if (schema.requireAllOrNone) {
     (isArray(schema.requireAllOrNone[0])
       ? schema.requireAllOrNone

package/src/FormComponents/Uploader.js

@@ -148,8 +148,8 @@ function UploaderInner({
 }) {
   let dropzoneDisabled = _disabled;
   let _accept = __accept;
-  //on component did mount
   const validateAgainstSchemaStore = useRef(new ValidateAgainstSchema());
+  const [acceptLoading, setAcceptLoading] = useState();
   const [resolvedAccept, setResolvedAccept] = useState();
   if (resolvedAccept) {
     _accept = resolvedAccept;
@@ -157,16 +157,19 @@ function UploaderInner({
   const isAcceptPromise =
     __accept?.then ||
     (Array.isArray(__accept) ? __accept.some(a => a?.then) : false);
-  const acceptLoading =
-    !resolvedAccept && isAcceptPromise && `Accept Loading...`;
-
+  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);
+        }
+      );
+    }
+  }, [__accept, isAcceptPromise]);
   if (isAcceptPromise && !resolvedAccept) {
-    Promise.allSettled(Array.isArray(__accept) ? __accept : [__accept]).then(
-      results => {
-        const resolved = flatMap(results, r => r.value);
-        setResolvedAccept(resolved);
-      }
-    );
     _accept = [];
   }
   if (acceptLoading) dropzoneDisabled = true;
@@ -499,7 +502,7 @@ function UploaderInner({
               className={Classes.TEXT_MUTED}
               style={{ fontSize: 11, marginBottom: 5 }}
             >
-              {advancedAccept ? (
+              {advancedAccept && !acceptLoading ? (
                 <div style={{}}>
                   Accepts &nbsp;
                   <span style={{}}>

package/src/index.js

@@ -1,3 +1,6 @@
+import "@blueprintjs/core/lib/css/blueprint.css";
+import "@blueprintjs/datetime/lib/css/blueprint-datetime.css";
+import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 import "./style.css";
 import "./autoTooltip";
 export { LoadingDots } from "./FormComponents/LoadingDots";