@duetds/components 4.32.0 → 4.33.0

package/lib/collection/components/duet-upload/duet-upload-validators.js

@@ -0,0 +1,93 @@
+/*!
+ * Built with Duet Design System
+ */
+import { getLocaleString } from "../../utils/language-utils";
+import { getError } from "./errorcodes.utils";
+export const validateFileExtension = (name, allowedExtensions) => {
+  if (!allowedExtensions) {
+    return true;
+  }
+  const ext = name.split(".");
+  const validExtension = allowedExtensions.split(",");
+  const extension = ext[ext.length - 1];
+  return validExtension.includes(extension);
+};
+export const validateFileMime = (type, allowedMimetypes) => {
+  if (!allowedMimetypes || !type) {
+    return true;
+  }
+  const validMimeTypes = allowedMimetypes.split(",");
+  let valid = false;
+  validMimeTypes.forEach(mimeType => {
+    const allowedTypes = mimeType.split("/");
+    const fileType = type.split("/");
+    if (allowedTypes[0] === fileType[0] && (allowedTypes[1] === fileType[1] || allowedTypes[1] === "*")) {
+      valid = true;
+    }
+  });
+  return valid;
+};
+export const validateFileSize = (size, maxBytes) => {
+  if (!maxBytes || !size) {
+    return true;
+  }
+  return maxBytes >= size;
+};
+export const validateFile = (item, validators) => {
+  const { allowedMimetypes, allowedExtensions, maxBytes } = validators;
+  let valid = false;
+  let errorMessage = getError("default");
+  if (item) {
+    const { name, type, size } = item;
+    const mime = validateFileMime(type, allowedMimetypes);
+    const ext = validateFileExtension(name, allowedExtensions);
+    const bytes = validateFileSize(size, maxBytes);
+    if (!mime) {
+      errorMessage = getError("duet-upload-101");
+    }
+    if (!ext) {
+      errorMessage = getError("duet-upload-100");
+    }
+    if (!bytes) {
+      errorMessage = getError("duet-upload-201");
+    }
+    valid = mime && ext && bytes;
+  }
+  else {
+    valid = false;
+  }
+  return {
+    valid,
+    errorMessage: valid ? undefined : getLocaleString(errorMessage.message),
+    errorSystem: valid ? undefined : errorMessage.system_message,
+    errorType: valid ? undefined : errorMessage.type,
+  };
+};
+export const validateTotalSizeIsAboveMax = (filelist, maxTotalBytes) => {
+  let total = 0;
+  if (maxTotalBytes) {
+    filelist.forEach(item => {
+      if (item.valid && item.size) {
+        total += item.size;
+      }
+    });
+    if (total < maxTotalBytes) {
+      return true;
+    }
+  }
+  return false;
+};
+export const validateTotalAmountIsAboveMax = (filelist, maxFiles) => {
+  let total = 0;
+  if (maxFiles) {
+    filelist.forEach(item => {
+      if (item.valid) {
+        total++;
+      }
+    });
+    if (total > maxFiles) {
+      return true;
+    }
+  }
+  return false;
+};

package/lib/collection/components/duet-upload/duet-upload.css

@@ -0,0 +1,64 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+::slotted([slot=header]) {
+  margin-bottom: 16px;
+}
+
+::slotted([slot=fileheader]) {
+  margin: 16px 0 0 0;
+}
+
+::slotted([slot=filefooter]) {
+  margin-top: 16px;
+}
+
+.duet-upload {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.duet-upload-item-size {
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+.duet-upload-filelist {
+  margin-bottom: 25px;
+}
+.duet-upload-filelist-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 75px;
+  margin: 0 auto;
+  font-size: 1rem;
+  font-weight: 400;
+  background-color: #f5f8fa;
+}