formik-form-components 0.2.15 → 0.2.17

package/dist/index.js

@@ -13071,50 +13071,84 @@ function MultiFilePreview({
 function SingleFilePreview({
   file
 }) {
+  var _a;
   if (!file) {
     return null;
   }
-  const imgUrl = (typeof file === "string" ? file : file.preview) || "";
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const imgUrl = typeof file === "string" ? file : file.preview;
+  const isImage = typeof file === "string" ? /\\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file) : (_a = file.type) == null ? void 0 : _a.startsWith("image/");
+  const fileName = typeof file === "string" ? file.split("/").pop() : file.name || "file";
+  const fileSize = typeof file === "string" ? null : file.size ? formatFileSize(file.size) : null;
+  if (isImage && imgUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        sx: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          "& .wrapper": {
+            width: "100%",
+            height: "100%",
+            position: "relative"
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Image_default,
+          {
+            src: imgUrl,
+            effect: "opacity",
+            wrapperProps: {
+              style: {
+                width: "100%",
+                height: "100%",
+                position: "relative",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "background.paper"
+              }
+            },
+            style: {
+              maxWidth: "100%",
+              maxHeight: "100%",
+              objectFit: "contain",
+              borderRadius: 1
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Box,
     {
       sx: {
-        position: "relative",
+        p: 2,
         width: "100%",
         height: "100%",
-        "& .wrapper": {
-          width: "100%",
-          height: "100%",
-          position: "relative"
-        }
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Image_default,
-        {
-          src: imgUrl,
-          effect: "opacity",
-          wrapperProps: {
-            style: {
-              width: "100%",
-              height: "100%",
-              position: "relative"
-            }
-          },
-          style: {
-            top: 8,
-            left: 8,
-            zIndex: 8,
-            borderRadius: 1,
-            position: "absolute",
-            width: "calc(100% - 16px)",
-            height: "calc(100% - 16px)",
-            objectFit: "cover"
-          }
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Iconify_default, { icon: "eva:file-text-outline", width: 40, sx: { mb: 1 } }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", noWrap: true, children: fileName }),
+        fileSize && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: fileSize })
+      ]
     }
   );
 }
+function formatFileSize(bytes) {
+  if (bytes === 0)
+    return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
 function BackgroundIllustration() {
   const theme = styles.useTheme();
   const PRIMARY_MAIN = theme.palette.primary.main;
@@ -13759,16 +13793,7 @@ function Upload({
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Placeholder,
-            {
-              sx: {
-                ...hasFile && {
-                  opacity: 0
-                }
-              }
-            }
-          ),
+          hasFile ? null : /* @__PURE__ */ jsxRuntime.jsx(Placeholder, {}),
           hasFile && /* @__PURE__ */ jsxRuntime.jsx(SingleFilePreview, { file })
         ]
       }
@@ -13865,21 +13890,8 @@ function Placeholder({ sx, ...other }) {
     }
   );
 }
-async function blobToBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onloadend = function() {
-      const base64data = reader.result;
-      resolve(base64data);
-    };
-    reader.onerror = function(err) {
-      reject(err);
-    };
-  });
-}
 var AppUploadFile = ({ name, ...rest }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c;
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
   const fieldError = _19__default.default.get(errors, name);
   const isTouched = _19__default.default.get(touched, name);
@@ -13889,37 +13901,42 @@ var AppUploadFile = ({ name, ...rest }) => {
   } else if (!((_b = rest.multiple) != null ? _b : false) && _19__default.default.isArray(val)) {
     val = val[0];
   }
-  const value = ((_c = rest.multiple) != null ? _c : false) ? (val != null ? val : []).map((__) => (__ == null ? void 0 : __.file) ? __ == null ? void 0 : __.file : __) : val;
+  ((_c = rest.multiple) != null ? _c : false) ? (val != null ? val : []).map((__) => (__ == null ? void 0 : __.file) ? __ == null ? void 0 : __.file : __) : val;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Upload,
       {
         ...rest,
-        file: ((_d = rest.multiple) != null ? _d : false) ? void 0 : value,
-        files: ((_e = rest.multiple) != null ? _e : false) ? value : void 0,
+        file: rest.multiple ? void 0 : val,
+        files: rest.multiple ? val : void 0,
         error: Boolean(fieldError) && isTouched,
-        disabled: (rest == null ? void 0 : rest.maxFiles) !== null && (rest == null ? void 0 : rest.maxFiles) !== void 0 && (value == null ? void 0 : value.length) >= (rest == null ? void 0 : rest.maxFiles),
-        onDrop: (fileVal) => {
-          (async () => {
-            var _a2;
-            const images = await Promise.all(
-              fileVal.map(async (single) => {
-                var _a3;
-                return {
-                  preview: ((_a3 = single == null ? void 0 : single.type) == null ? void 0 : _a3.includes("image")) ? await blobToBase64(single) : void 0,
-                  file: single
-                };
-              })
-            );
-            const currentValue = Array.isArray(value) ? value : [];
-            if (rest.multiple === true) {
-              if (currentValue.length >= ((_a2 = rest.maxFiles) != null ? _a2 : Infinity))
-                return;
-              setFieldValue(name, [...currentValue, ...images], true);
-            } else {
-              setFieldValue(name, images[0], true);
-            }
-          })();
+        disabled: (rest == null ? void 0 : rest.maxFiles) !== null && (rest == null ? void 0 : rest.maxFiles) !== void 0 && (Array.isArray(val) ? val.length : val ? 1 : 0) >= (rest == null ? void 0 : rest.maxFiles),
+        onDrop: async (fileVal) => {
+          var _a2;
+          const processFiles = await Promise.all(
+            fileVal.map(async (file) => {
+              const preview = await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.readAsDataURL(file);
+              });
+              return {
+                file,
+                preview,
+                name: file.name,
+                size: file.size,
+                type: file.type
+              };
+            })
+          );
+          if (rest.multiple) {
+            const currentValue = Array.isArray(val) ? val : [];
+            if (currentValue.length + processFiles.length > ((_a2 = rest.maxFiles) != null ? _a2 : Infinity))
+              return;
+            setFieldValue(name, [...currentValue, ...processFiles], true);
+          } else if (processFiles.length > 0) {
+            setFieldValue(name, processFiles[0], true);
+          }
         },
         onDelete: () => {
           var _a2;
@@ -13929,15 +13946,22 @@ var AppUploadFile = ({ name, ...rest }) => {
             setFieldValue(name, "", true);
           }
         },
-        onRemove: (e) => {
-          const afterFilter = val.filter((file) => {
-            var _a2;
-            if ((_a2 = file.file) != null ? _a2 : false) {
-              return !_19__default.default.isEqual(e, file.file);
-            }
-            return !_19__default.default.isEqual(e, file);
-          });
-          setFieldValue(name, afterFilter, true);
+        onRemove: (fileToRemove) => {
+          if (rest.multiple) {
+            const currentFiles = Array.isArray(val) ? val : [];
+            const updatedFiles = currentFiles.filter((f) => {
+              if (f.file && f.file === fileToRemove)
+                return false;
+              if (f === fileToRemove)
+                return false;
+              if (f.preview === fileToRemove)
+                return false;
+              return true;
+            });
+            setFieldValue(name, updatedFiles, true);
+          } else {
+            setFieldValue(name, null, true);
+          }
         }
       }
     ),