mimir-ui-kit 1.34.4-t → 1.34.4

package/dist/components/UniversalUploader/UniversalUploader.js

@@ -1,78 +1,106 @@
-import { jsxs as I, jsx as f } from "react/jsx-runtime";
-import { c as L } from "../../index-DIxK0V-G.js";
-import { forwardRef as R, useState as b, useEffect as j, useMemo as N } from "react";
-import { imageTypes as c } from "./constants.js";
-import { ListFiles as _ } from "../ListFiles/ListFiles.js";
-import { ListPhotos as D } from "../ListPhotos/ListPhotos.js";
-import { Uploader as M } from "../Uploader/Uploader.js";
-import '../../assets/UploaderPhotos.css';const y = {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef, useState, useEffect, useMemo } from "react";
+import { imageTypes } from "./constants.js";
+import { ListFiles } from "../ListFiles/ListFiles.js";
+import { ListPhotos } from "../ListPhotos/ListPhotos.js";
+import { Uploader } from "../Uploader/Uploader.js";
+import '../../assets/UploaderPhotos.css';const cls = {
   "upload-file-wrapper": "_upload-file-wrapper_1a115_2"
-}, n = (i) => "file" in i && i.file instanceof File ? c.includes(i.file.type) : "type" in i && typeof i.type == "string" ? c.includes(i.type) : !1, q = R(
-  (i, h) => {
+};
+const isImageFile = (file) => {
+  if ("file" in file && file.file instanceof File) {
+    return imageTypes.includes(file.file.type);
+  }
+  if ("type" in file && typeof file.type === "string") {
+    return imageTypes.includes(file.type);
+  }
+  return false;
+};
+const UniversalUploader = forwardRef(
+  (props, ref) => {
     const {
-      type: s,
-      filesType: v,
-      arrayName: g,
-      maxSize: x,
-      onChange: r,
-      value: l,
-      maxFiles: m,
-      titleUploader: F
-    } = i, [a, p] = b(
-      l || []
-    ), d = a.length >= m;
-    j(() => {
-      l && p(l);
-    }, [l]);
-    const U = (t) => {
-      const o = t.value.map((e) => n(e.file) ? {
-        id: e.id,
-        url: URL.createObjectURL(e.file),
-        type: e.file.type,
-        name: e.file.name,
-        size: e.file.size
-      } : {
-        id: e.id,
-        url: "",
-        size: e.file.size,
-        name: e.file.name,
-        type: e.file.type
+      type,
+      filesType,
+      arrayName,
+      maxSize,
+      onChange,
+      value,
+      maxFiles,
+      titleUploader
+    } = props;
+    const [items, setItems] = useState(
+      value || []
+    );
+    const isMaxFilesReached = items.length >= maxFiles;
+    useEffect(() => {
+      if (value) {
+        setItems(value);
+      }
+    }, [value]);
+    const onChangeValue = (e) => {
+      const newItems = e.value.map((el) => {
+        if (isImageFile(el.file)) {
+          return {
+            id: el.id,
+            url: URL.createObjectURL(el.file),
+            type: el.file.type,
+            name: el.file.name,
+            size: el.file.size
+          };
+        } else {
+          return {
+            id: el.id,
+            url: "",
+            size: el.file.size,
+            name: el.file.name,
+            type: el.file.type
+          };
+        }
       });
-      p((e) => [...e, ...o]), r == null || r({ type: "add", data: t.value });
-    }, u = (t) => {
-      p((o) => o.filter((e) => e.id !== t)), r == null || r({ type: "delete", data: t });
-    }, { photos: w, files: z } = N(() => {
-      const t = () => a.filter((e) => !n(e)), o = () => a.filter(n);
-      return s === "all" ? { files: t(), photos: o() } : s === "files" ? { photos: [], files: t() } : s === "photos" ? { files: [], photos: o() } : { files: [], photos: [] };
-    }, [a, s]);
-    return /* @__PURE__ */ I(
+      setItems((prev) => [...prev, ...newItems]);
+      onChange == null ? void 0 : onChange({ type: "add", data: e.value });
+    };
+    const onDelete = (deleteId) => {
+      setItems((prev) => prev.filter((item) => item.id !== deleteId));
+      onChange == null ? void 0 : onChange({ type: "delete", data: deleteId });
+    };
+    const { photos, files } = useMemo(() => {
+      const getFiles = () => items.filter((item) => !isImageFile(item));
+      const getPhotos = () => items.filter(isImageFile);
+      if (type === "all") return { files: getFiles(), photos: getPhotos() };
+      if (type === "files") return { photos: [], files: getFiles() };
+      if (type === "photos") return { files: [], photos: getPhotos() };
+      return { files: [], photos: [] };
+    }, [items, type]);
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: L(
-          y["upload-file-wrapper"],
-          d && y.disabled
+        className: classNames(
+          cls["upload-file-wrapper"],
+          isMaxFilesReached && cls.disabled
         ),
         children: [
-          /* @__PURE__ */ f(
-            M,
+          /* @__PURE__ */ jsx(
+            Uploader,
             {
-              filesType: v,
-              arrayName: g,
-              maxSize: x,
-              onChangeValue: U,
-              ref: h,
-              maxFiles: m,
-              isDisabled: d,
-              titleUploader: F
+              filesType,
+              arrayName,
+              maxSize,
+              onChangeValue,
+              ref,
+              maxFiles,
+              isDisabled: isMaxFilesReached,
+              titleUploader
             }
           ),
-          (s === "files" || s === "all") && /* @__PURE__ */ f(_, { value: z, onChange: (t) => u(t.deleteId) }),
-          (s === "photos" || s === "all") && /* @__PURE__ */ f(D, { value: w, onChange: (t) => u(t.deleteId) })
+          (type === "files" || type === "all") && /* @__PURE__ */ jsx(ListFiles, { value: files, onChange: (j) => onDelete(j.deleteId) }),
+          (type === "photos" || type === "all") && /* @__PURE__ */ jsx(ListPhotos, { value: photos, onChange: (j) => onDelete(j.deleteId) })
         ]
       }
     );
   }
 );
 export {
-  q as UniversalUploader
+  UniversalUploader
 };

package/dist/components/UniversalUploader/constants.js

@@ -1,5 +1,10 @@
-var i = /* @__PURE__ */ ((g) => (g.FILES = "files", g.PHOTOS = "photos", g.ALL = "all", g))(i || {});
-const e = [
+var EUploaderType = /* @__PURE__ */ ((EUploaderType2) => {
+  EUploaderType2["FILES"] = "files";
+  EUploaderType2["PHOTOS"] = "photos";
+  EUploaderType2["ALL"] = "all";
+  return EUploaderType2;
+})(EUploaderType || {});
+const imageTypes = [
   "image/jpg",
   "image/jpeg",
   "image/png",
@@ -8,6 +13,6 @@ const e = [
   "image/heic"
 ];
 export {
-  i as EUploaderType,
-  e as imageTypes
+  EUploaderType,
+  imageTypes
 };

package/dist/components/UniversalUploader/index.js

@@ -1,6 +1,6 @@
-import { UniversalUploader as o } from "./UniversalUploader.js";
-import { EUploaderType as a } from "./constants.js";
+import { UniversalUploader } from "./UniversalUploader.js";
+import { EUploaderType } from "./constants.js";
 export {
-  a as EUploaderType,
-  o as UniversalUploader
+  EUploaderType,
+  UniversalUploader
 };

package/dist/components/Uploader/Uploader.js

@@ -1,12 +1,13 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import { forwardRef as R, useRef as m, useId as z } from "react";
-import { Icon as C } from "../../icons/Icon.js";
-import { Button as E } from "../Button/Button.js";
-import '../../assets/Uploader.css';const p = {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useId } from "react";
+import { Icon } from "../../icons/Icon.js";
+import { Button } from "../Button/Button.js";
+import '../../assets/Uploader.css';const cls = {
   "upload-file-wrapper": "_upload-file-wrapper_bplvw_2",
   "upload-text": "_upload-text_bplvw_25",
   "upload-file-input": "_upload-file-input_bplvw_35"
-}, u = {
+};
+const MIME = {
   jpeg: "image/jpeg",
   jpg: "image/jpg",
   png: "image/png",
@@ -20,83 +21,104 @@ import '../../assets/Uploader.css';const p = {
   xls: "application/excel",
   txt: "text/plain",
   xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-}, F = [
+};
+const filesTyps = [
   "jpeg",
   "jpg",
   "png",
   "tiff",
   "gif",
   "heic"
-], U = () => {
-  let t = 0;
-  return () => (t = (t + 1) % Number.MAX_SAFE_INTEGER, t);
-}, A = U(), G = R(
-  (t, g) => {
+];
+const createIdGenerator = () => {
+  let id = 0;
+  return () => {
+    id = (id + 1) % Number.MAX_SAFE_INTEGER;
+    return id;
+  };
+};
+const generateId = createIdGenerator();
+const Uploader = forwardRef(
+  (props, ref) => {
     const {
-      filesType: n = F,
-      onChangeValue: x,
-      arrayName: h,
-      maxSize: r = 15,
-      maxFiles: b,
-      isDisabled: s,
-      titleUploader: w = "Или перетащите сюда"
-    } = t, c = m(null), l = m(null), d = z(), y = (e) => {
-      var i;
-      return e.type ? e.type : ((i = e.name.split(".").pop()) == null ? void 0 : i.toLowerCase()) === "heic" ? "image/heic" : "";
-    }, _ = (e) => {
+      filesType = filesTyps,
+      onChangeValue,
+      arrayName,
+      maxSize = 15,
+      maxFiles,
+      isDisabled,
+      titleUploader = "Или перетащите сюда"
+    } = props;
+    const uploaderRef = useRef(null);
+    const inputRef = useRef(null);
+    const idImg = useId();
+    const getFileType = (file) => {
+      var _a;
+      if (file.type) return file.type;
+      const extension = (_a = file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+      if (extension === "heic") return "image/heic";
+      return "";
+    };
+    const onChange = (e) => {
       if (e.target.files && e.target.files[0]) {
-        const f = Array.from(e.target.files).filter((i) => {
-          const v = y(i), I = n.map((T) => u[T]).includes(v), N = i.size / 1024 ** 2 <= r;
-          return I && N;
-        }).slice(0, b).map((i) => ({ file: i, id: A() }));
-        x({ arrayName: h, value: f }), l.current && (l.current.value = "");
+        const list = Array.from(e.target.files).filter((el) => {
+          const fileType = getFileType(el);
+          const isValidType = filesType.map((name) => MIME[name]).includes(fileType);
+          const isValidSize = el.size / 1024 ** 2 <= maxSize;
+          return isValidType && isValidSize;
+        }).slice(0, maxFiles).map((el) => ({ file: el, id: generateId() }));
+        onChangeValue({ arrayName, value: list });
+        if (inputRef.current) {
+          inputRef.current.value = "";
+        }
       }
-    }, j = () => {
-      var e;
-      (e = c.current) == null || e.click();
     };
-    return /* @__PURE__ */ o("div", { className: p["upload-file-wrapper"], ref: g, children: [
-      /* @__PURE__ */ a(
+    const onOpen = () => {
+      var _a;
+      (_a = uploaderRef.current) == null ? void 0 : _a.click();
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cls["upload-file-wrapper"], ref, children: [
+      /* @__PURE__ */ jsx(
         "input",
         {
-          ref: l,
+          ref: inputRef,
           type: "file",
-          className: p["upload-file-input"],
+          className: cls["upload-file-input"],
           "aria-label": "Upload",
           name: "image[]",
-          multiple: !0,
-          onChange: _,
+          multiple: true,
+          onChange,
           title: "",
-          id: d,
-          accept: n.map((e) => u[e]).join(),
-          disabled: s
+          id: idImg,
+          accept: filesType.map((i) => MIME[i]).join(),
+          disabled: isDisabled
         }
       ),
-      /* @__PURE__ */ o("label", { htmlFor: d, ref: c, children: [
-        /* @__PURE__ */ a(
-          E,
+      /* @__PURE__ */ jsxs("label", { htmlFor: idImg, ref: uploaderRef, children: [
+        /* @__PURE__ */ jsx(
+          Button,
           {
             size: "m",
             variant: "secondary-asphalt",
-            leftIcon: /* @__PURE__ */ a(C, { iconName: "UnionIcon16px" }),
-            onClick: j,
-            disabled: s,
+            leftIcon: /* @__PURE__ */ jsx(Icon, { iconName: "UnionIcon16px" }),
+            onClick: onOpen,
+            disabled: isDisabled,
             children: "Выберите файлы"
           }
         ),
-        /* @__PURE__ */ a("b", { children: w }),
-        /* @__PURE__ */ o("span", { className: p["upload-text"], children: [
+        /* @__PURE__ */ jsx("b", { children: titleUploader }),
+        /* @__PURE__ */ jsxs("span", { className: cls["upload-text"], children: [
           "Максимальный размер одного файла – ",
-          r,
+          maxSize,
           " Мб",
-          /* @__PURE__ */ a("br", {}),
+          /* @__PURE__ */ jsx("br", {}),
           "Загрузить можно файлы следующих форматов: ",
-          n.join(", ")
+          filesType.join(", ")
         ] })
       ] })
     ] });
   }
 );
 export {
-  G as Uploader
+  Uploader
 };

package/dist/components/Uploader/constants.js

@@ -1,18 +1,20 @@
-const e = [
+const imageFileTypes = [
   "jpeg",
   "jpg",
   "png",
   "tiff",
   "gif",
   "heic"
-], s = [
+];
+const docsFileTypes = [
   "doc",
   "xls",
   "pdf",
   "docx",
   "txt",
   "xlsx"
-], p = [
+];
+const AllFileTypes = [
   "jpeg",
   "jpg",
   "png",
@@ -25,13 +27,14 @@ const e = [
   "docx",
   "txt",
   "xlsx"
-], c = {
-  images: e,
-  docs: s,
-  all: p
+];
+const TypeFilesArray = {
+  images: imageFileTypes,
+  docs: docsFileTypes,
+  all: AllFileTypes
 };
 export {
-  p as AllFileTypes,
-  c as TypeFilesArray,
-  e as imageFileTypes
+  AllFileTypes,
+  TypeFilesArray,
+  imageFileTypes
 };

package/dist/components/Uploader/index.js

@@ -1,6 +1,6 @@
-import { Uploader as r } from "./Uploader.js";
-import { imageFileTypes as m } from "./constants.js";
+import { Uploader } from "./Uploader.js";
+import { imageFileTypes } from "./constants.js";
 export {
-  r as Uploader,
-  m as imageFileTypes
+  Uploader,
+  imageFileTypes
 };

package/dist/components/UploaderFiles/UploaderFiles.js

@@ -1,60 +1,68 @@
-import { jsxs as N, jsx as m } from "react/jsx-runtime";
-import { c as _ } from "../../index-DIxK0V-G.js";
-import { forwardRef as b, useState as h, useEffect as D } from "react";
-import { ListFiles as I } from "../ListFiles/ListFiles.js";
-import { Uploader as R } from "../Uploader/Uploader.js";
-import '../../assets/UploaderPhotos.css';const c = {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef, useState, useEffect } from "react";
+import { ListFiles } from "../ListFiles/ListFiles.js";
+import { Uploader } from "../Uploader/Uploader.js";
+import '../../assets/UploaderPhotos.css';const cls = {
   "upload-file-wrapper": "_upload-file-wrapper_1a115_2"
-}, T = b(
-  (n, u) => {
-    const { filesType: x, arrayName: y, maxSize: F, onChange: a, value: i, maxFiles: o } = n, [t, r] = h(i || []), d = t.length >= o;
-    D(() => {
-      i && r(i);
-    }, [i]);
-    const v = (s) => {
-      const z = [
-        ...t,
-        ...s.value.map((e) => {
-          var p, l, f;
+};
+const UploaderFiles = forwardRef(
+  (props, ref) => {
+    const { filesType, arrayName, maxSize, onChange, value, maxFiles } = props;
+    const [files, setFiles] = useState(value || []);
+    const isMaxFilesReached = files.length >= maxFiles;
+    useEffect(() => {
+      if (value) {
+        setFiles(value);
+      }
+    }, [value]);
+    const onChangeValue = (e) => {
+      const newFiles = [
+        ...files,
+        ...e.value.map((el) => {
+          var _a, _b, _c;
           return {
-            id: e.id,
+            id: el.id,
             url: "",
-            size: (p = e == null ? void 0 : e.file) == null ? void 0 : p.size,
-            name: (l = e == null ? void 0 : e.file) == null ? void 0 : l.name,
-            type: (f = e == null ? void 0 : e.file) == null ? void 0 : f.type
+            size: (_a = el == null ? void 0 : el.file) == null ? void 0 : _a.size,
+            name: (_b = el == null ? void 0 : el.file) == null ? void 0 : _b.name,
+            type: (_c = el == null ? void 0 : el.file) == null ? void 0 : _c.type
           };
         })
       ];
-      r(z), a == null || a({ type: "add", data: s.value });
-    }, w = (s) => {
-      r(s.list), s.deleteId && (a == null || a({ type: "delete", data: s.deleteId }));
+      setFiles(newFiles);
+      onChange == null ? void 0 : onChange({ type: "add", data: e.value });
+    };
+    const onDelete = (j) => {
+      setFiles(j.list);
+      if (j.deleteId) onChange == null ? void 0 : onChange({ type: "delete", data: j.deleteId });
     };
-    return /* @__PURE__ */ N(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: _(
-          c["upload-file-wrapper"],
-          d && c.disabled
+        className: classNames(
+          cls["upload-file-wrapper"],
+          isMaxFilesReached && cls.disabled
         ),
         children: [
-          /* @__PURE__ */ m(
-            R,
+          /* @__PURE__ */ jsx(
+            Uploader,
             {
-              filesType: x,
-              arrayName: y,
-              maxSize: F,
-              onChangeValue: v,
-              ref: u,
-              maxFiles: o,
-              isDisabled: d
+              filesType,
+              arrayName,
+              maxSize,
+              onChangeValue,
+              ref,
+              maxFiles,
+              isDisabled: isMaxFilesReached
             }
           ),
-          /* @__PURE__ */ m(I, { value: t, onChange: w })
+          /* @__PURE__ */ jsx(ListFiles, { value: files, onChange: onDelete })
         ]
       }
     );
   }
 );
 export {
-  T as UploaderFiles
+  UploaderFiles
 };

package/dist/components/UploaderFiles/index.js

@@ -1,4 +1,4 @@
-import { UploaderFiles as r } from "./UploaderFiles.js";
+import { UploaderFiles } from "./UploaderFiles.js";
 export {
-  r as UploaderFiles
+  UploaderFiles
 };