@hai-dev/ui-kit 1.0.2 → 1.0.4

package/dist/components/photo-crop-uploader/photo-crop-uploader.js

@@ -1,154 +1,205 @@
-import { jsxs as Y, Fragment as $, jsx as s } from "react/jsx-runtime";
-import { useState as a, useRef as S } from "react";
+import { jsxs as io, Fragment as ho, jsx as h } from "react/jsx-runtime";
+import { useState as s, useRef as M } from "react";
 import "../../index-BiffjjQq.js";
-import { c as oo } from "../../index-B2JRaoNz.js";
-import { localizedText as to } from "./locale.js";
-import { EN_LOCALE as ro } from "../../constants.js";
-import { DEFAULT_MIN_DIMENSION as eo, DEFAULT_ASPECT_RATIO as ao, DEFAULT_TIMEOUT as no, DEFAULT_FILE_MAX_SIZE as so } from "./constants.js";
-import { UploadDialog as po } from "./components/upload-dialog/upload-dialog.js";
-import { UploadButton as lo } from "./components/upload-button/upload-button.js";
-import { ErrorUploadDialog as io } from "./components/error-upload-dialog/error-upload-dialog.js";
-import { validatePhotoFile as co } from "./utils/validate-photo-file.js";
-import { readPhoto as ho } from "./utils/read-photo.js";
-import { getPhotoCrop as mo } from "./utils/get-photo-crop.js";
-import { getCropedPhoto as fo } from "./utils/get-croped-photo.js";
-import '../../assets/photo-crop-uploader.css';const uo = "_photoCropCanvas_1i4lr_1", Co = {
-  photoCropCanvas: uo
-}, Io = (U) => {
+import { c as mo } from "../../index-B2JRaoNz.js";
+import { localizedText as fo } from "./locale.js";
+import { EN_LOCALE as Co } from "../../constants.js";
+import { DEFAULT_MIN_DIMENSION as uo, DEFAULT_ASPECT_RATIO as go, DEFAULT_TIMEOUT as Po, DEFAULT_FILE_MAX_SIZE as Eo } from "./constants.js";
+import { UploadDialog as Do } from "./components/upload-dialog/upload-dialog.js";
+import { UploadButton as So } from "./components/upload-button/upload-button.js";
+import { ErrorUploadDialog as Lo } from "./components/error-upload-dialog/error-upload-dialog.js";
+import { validatePhotoFile as N } from "./utils/validate-photo-file.js";
+import { readPhoto as R } from "./utils/read-photo.js";
+import { getPhotoCrop as wo } from "./utils/get-photo-crop.js";
+import { getCropedPhoto as Uo } from "./utils/get-croped-photo.js";
+import { getDefaultCroppedPhoto as _o } from "./utils/get-default-cropped-photo.js";
+import '../../assets/photo-crop-uploader.css';const xo = "_photoCropCanvas_1i4lr_1", yo = {
+  photoCropCanvas: xo
+}, Xo = (k) => {
   const {
-    buttonClassname: _ = "",
-    onStartUpload: T = () => {
+    buttonClassname: z = "",
+    onStartUpload: H = () => {
     },
-    onEndUpload: v = () => {
+    onEndUpload: j = () => {
     },
-    onError: w = () => {
+    onError: B = () => {
     },
-    onStartCrop: x = () => {
+    onStartCrop: X = () => {
     },
-    onEndCrop: A = () => {
+    onEndCrop: Z = () => {
     },
-    onDragOver: F = () => {
+    onDragOver: q = () => {
     },
-    onDragLeave: I = () => {
+    onDragLeave: G = () => {
     },
-    onDragDrop: O = () => {
+    onDragDrop: J = () => {
     },
-    showErrorPopup: b = !1,
-    minDimension: n = eo,
-    aspectRatio: i = ao,
-    locale: e = ro,
-    timeout: y = no,
-    fileMaxSize: M = so,
-    allowedExtensions: c,
-    allowedMimeTypes: N,
-    circular: R,
-    width: z,
-    keepSelection: H,
-    photoCropUploaderSlots: j,
-    ...k
-  } = U, [B, p] = a(!1), [X, h] = a(""), [l, d] = a(), m = S(null), f = S(null), [u, C] = a(!1), [E, g] = a(""), [Z, P] = a(!1), D = () => {
-    p(!1);
-  }, q = () => {
-    P(!1);
-  }, G = (o) => {
-    v(o), h(o), p(!0), g("");
-  }, L = (o) => {
-    o instanceof Error && (console.warn(o.message), w(o), g(o.message), P(!0), h(""), p(!1));
-  }, J = async (o) => {
-    const r = o.target.files?.[0];
-    if (r)
+    onClose: P = () => {
+    },
+    showErrorPopup: K = !1,
+    minDimension: a = uo,
+    aspectRatio: m = go,
+    locale: e = Co,
+    timeout: E = Po,
+    fileMaxSize: D = Eo,
+    allowedExtensions: d,
+    allowedMimeTypes: S,
+    circular: Q,
+    width: V,
+    keepSelection: W,
+    photoCropUploaderSlots: Y,
+    multiple: L,
+    fromSources: $,
+    ...oo
+  } = k, [to, i] = s(!1), [p, w] = s([]), [f, C] = s([]), [l, U] = s(0), _ = M(null), x = M(null), [y, A] = s(!1), [T, v] = s(""), [ro, I] = s(!1), F = (o = []) => {
+    P(o, p), i(!1);
+  }, eo = () => {
+    P([], p), i(!1);
+  }, no = () => {
+    I(!1);
+  }, u = (o) => {
+    j(o), w(o), C(Array(o.length)), U(0), i(!0), v("");
+  }, g = (o) => {
+    o instanceof Error && (console.warn(o.message), B(o), v(o.message), I(!0), w([]), i(!1));
+  }, ao = async (o) => {
+    const { files: r } = o.target;
+    if (r?.length)
       try {
-        C(!0), T(), co(
-          r,
-          { maxSize: M, allowedExtensions: c, allowedMimeTypes: N },
-          e
-        );
-        const t = await ho(r, n, e, y);
-        G(t);
+        if (A(!0), H(), L) {
+          const t = Array.from(r);
+          t.forEach((c) => {
+            N(
+              c,
+              { maxSize: D, allowedExtensions: d, allowedMimeTypes: S },
+              e
+            );
+          });
+          const n = await Promise.all(
+            t.map(
+              (c) => R(c, a, e, E)
+            )
+          );
+          u(n);
+        } else {
+          const t = r[0];
+          N(
+            t,
+            { maxSize: D, allowedExtensions: d, allowedMimeTypes: S },
+            e
+          );
+          const n = await R(t, a, e, E);
+          u([n]);
+        }
       } catch (t) {
-        L(t);
+        g(t);
       } finally {
-        o.target.value = "", C(!1);
+        o.target.value = "", A(!1);
       }
-  }, K = (o) => {
-    const { width: r, height: t } = o.currentTarget, W = mo(r, t, n, i);
-    d(W);
-  }, Q = (o, r) => {
-    d(r);
-  }, V = () => {
-    const o = f.current, r = m.current;
-    if (o && r && l)
+  }, so = (o) => {
+    const { width: r, height: t } = o.currentTarget, n = wo(r, t, a, m);
+    C((c) => {
+      const b = [...c];
+      return b[l] = n, b;
+    });
+  }, lo = (o, r) => {
+    C((t) => {
+      const n = [...t];
+      return n[l] = r, n;
+    });
+  }, O = () => {
+    const o = x.current, r = _.current;
+    if (o && r && f)
       try {
-        x();
-        const t = fo(
+        X();
+        const t = Uo(
           r,
           o,
-          l,
+          f[l],
           e
         );
-        A(t), D();
+        Z(t), l >= p.length - 1 && F();
       } catch (t) {
-        t instanceof Error && (console.warn(t), L(t));
+        t instanceof Error && (console.warn(t), g(t));
       }
+  }, po = () => {
+    O(), U((o) => o + 1);
+  }, co = async () => {
+    const o = p.slice(l);
+    try {
+      const r = await Promise.all(
+        o.map(
+          (t) => _o(t, a, m, e)
+        )
+      );
+      F(r);
+    } catch (r) {
+      g(r);
+    }
   };
-  return /* @__PURE__ */ Y($, { children: [
-    /* @__PURE__ */ s(
-      lo,
+  return /* @__PURE__ */ io(ho, { children: [
+    /* @__PURE__ */ h(
+      So,
       {
-        onChange: J,
-        buttonClassname: _,
-        disabled: u,
-        buttonDisabled: u,
+        onChange: ao,
+        onPhotoDataLoaded: u,
+        buttonClassname: z,
+        disabled: y,
+        buttonDisabled: y,
         locale: e,
-        width: z,
-        allowedExtensions: c,
-        onDragDrop: O,
-        onDragLeave: I,
-        onDragOver: F,
-        button: j?.button,
-        ...k,
-        children: to[e].upload
+        width: V,
+        allowedExtensions: d,
+        onDragDrop: J,
+        onDragLeave: G,
+        onDragOver: q,
+        button: Y?.button,
+        multiple: L,
+        fromSources: $,
+        ...oo,
+        children: fo[e].upload
       }
     ),
-    /* @__PURE__ */ s(
-      po,
+    /* @__PURE__ */ h(
+      Do,
       {
-        open: B,
-        photoCrop: l,
-        photoSource: X,
-        photoError: E,
-        onCloseDialogHandler: D,
-        onCropChange: Q,
-        onPhotoCrop: V,
-        onPhotoLoad: K,
-        imageRef: m,
-        minDimension: n,
-        aspectRatio: i,
+        open: to,
+        photoCrops: f,
+        photoSources: p,
+        onNextPhoto: po,
+        onSkipCrop: co,
+        photoError: T,
+        onCloseDialogHandler: eo,
+        onCropChange: lo,
+        onPhotoCrop: O,
+        onPhotoLoad: so,
+        imageRef: _,
+        minDimension: a,
+        aspectRatio: m,
         locale: e,
-        circular: R,
-        keepSelection: H
+        circular: Q,
+        keepSelection: W,
+        photoIndex: l
       }
     ),
-    /* @__PURE__ */ s(
-      io,
+    /* @__PURE__ */ h(
+      Lo,
       {
-        open: b && Z,
-        photoError: E,
-        onCloseErrorDialog: q,
+        open: K && ro,
+        photoError: T,
+        onCloseErrorDialog: no,
         locale: e
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ h(
       "canvas",
       {
-        className: oo(Co.photoCropCanvas),
-        width: n,
-        height: n,
-        ref: f
+        className: mo(yo.photoCropCanvas),
+        width: a,
+        height: a,
+        ref: x
       }
     )
   ] });
 };
 export {
-  Io as PhotoCropUploader
+  Xo as PhotoCropUploader
 };

package/dist/components/photo-crop-uploader/types.d.ts

@@ -16,10 +16,11 @@ export type PhotoCropUploaderSlots = {
 export type PhotoCropUploaderCustomProps = {
     buttonClassname?: string;
     onStartUpload?: () => unknown;
-    onEndUpload?: (photoData: PhotoDataUrl) => unknown;
+    onEndUpload?: (photoData: PhotoDataUrl[]) => unknown;
     onError?: (error: Error) => unknown;
     onStartCrop?: () => unknown;
     onEndCrop?: (photoData: PhotoDataUrl) => unknown;
+    onClose?: (skipPhotosData: PhotoDataUrl[], sourcesData: PhotoDataUrl[]) => unknown;
     onDragOver?: (event: DragEvent<HTMLDivElement>) => unknown;
     onDragLeave?: (event: DragEvent<HTMLDivElement>) => unknown;
     onDragDrop?: (event: DragEvent<HTMLDivElement>) => unknown;
@@ -35,6 +36,7 @@ export type PhotoCropUploaderCustomProps = {
     keepSelection?: boolean;
     width?: number;
     photoCropUploaderSlots?: PhotoCropUploaderSlots;
+    fromSources?: PhotoDataUrl[];
 };
 export type PhotoCropUploaderProps = PhotoCropUploaderCustomProps & InputHTMLAttributes<HTMLInputElement>;
 export type PhotoCropUploaderLocaleText = Record<Locale, Record<string, string>>;

package/dist/components/photo-crop-uploader/utils/get-default-cropped-photo.d.ts

@@ -0,0 +1,3 @@
+import { Locale } from '../../../types';
+import { PhotoDataUrl } from '../types';
+export declare const getDefaultCroppedPhoto: (photoSourse: PhotoDataUrl, minDimension: number, aspectRatio: number, locale: Locale) => Promise<PhotoDataUrl>;

package/dist/components/photo-crop-uploader/utils/get-default-cropped-photo.js

@@ -0,0 +1,32 @@
+import { getPhotoCrop as m } from "./get-photo-crop.js";
+import { getCropedPhoto as g } from "./get-croped-photo.js";
+import { localizedText as P } from "../locale.js";
+const w = async (a, c, s, e) => new Promise((p, n) => {
+  const o = new Image(), d = document.createElement("canvas");
+  o.src = a, o.addEventListener("load", () => {
+    const { width: t, height: h } = o, i = m(
+      t,
+      h,
+      c,
+      s,
+      !0
+    );
+    try {
+      const r = g(
+        o,
+        d,
+        i,
+        e
+      );
+      p(r);
+    } catch (r) {
+      n(r);
+    }
+  }), o.addEventListener("error", () => {
+    const t = new Error(P[e]["paint-error"]);
+    n(t);
+  });
+});
+export {
+  w as getDefaultCroppedPhoto
+};

package/dist/components/photo-crop-uploader/utils/get-photo-crop.d.ts

@@ -1,2 +1,2 @@
 import { Crop } from 'react-image-crop';
-export declare const getPhotoCrop: (width: number, height: number, minDimension?: number, aspectRatio?: number) => Crop;
+export declare const getPhotoCrop: (width: number, height: number, minDimension?: number, aspectRatio?: number, maxSize?: boolean) => Crop;

package/dist/components/photo-crop-uploader/utils/get-photo-crop.js

@@ -1,18 +1,18 @@
-import { B as I, L as E } from "../../../index-BiffjjQq.js";
-import { DEFAULT_MIN_DIMENSION as T, DEFAULT_ASPECT_RATIO as C, PRECENT_UNIT as N } from "../constants.js";
-const A = (o, r, t = T, c = C) => {
-  const e = t / o * 100, n = t / r * 100, p = I(
+import { B as _, L as C } from "../../../index-BiffjjQq.js";
+import { DEFAULT_MIN_DIMENSION as P, DEFAULT_ASPECT_RATIO as T, FULL_CROP_SIZE as o, PRECENT_UNIT as s } from "../constants.js";
+const U = (r, t, c = P, n = T, e = !1) => {
+  const p = c / r * o, I = c / t * o, E = _(
     {
-      unit: N,
-      width: e,
-      height: n
+      unit: s,
+      width: e ? o : p,
+      height: e ? o : I
     },
-    c,
-    o,
-    r
+    n,
+    r,
+    t
   );
-  return E(p, o, r);
+  return C(E, r, t);
 };
 export {
-  A as getPhotoCrop
+  U as getPhotoCrop
 };

package/dist/components/photo-crop-uploader/utils/index.d.ts

@@ -2,3 +2,4 @@ export { readPhoto } from './read-photo';
 export { getPhotoCrop } from './get-photo-crop';
 export { getCropedPhoto } from './get-croped-photo';
 export { validatePhotoFile } from './validate-photo-file';
+export { getDefaultCroppedPhoto } from './get-default-cropped-photo';

package/dist/components/photo-crop-uploader/utils/index.js

@@ -1,10 +1,12 @@
-import { readPhoto as t } from "./read-photo.js";
+import { readPhoto as e } from "./read-photo.js";
 import { getPhotoCrop as p } from "./get-photo-crop.js";
 import { getCropedPhoto as h } from "./get-croped-photo.js";
 import { validatePhotoFile as x } from "./validate-photo-file.js";
+import { getDefaultCroppedPhoto as a } from "./get-default-cropped-photo.js";
 export {
   h as getCropedPhoto,
+  a as getDefaultCroppedPhoto,
   p as getPhotoCrop,
-  t as readPhoto,
+  e as readPhoto,
   x as validatePhotoFile
 };

package/dist/components/photo-crop-uploader/utils/read-photo.js

@@ -1,51 +1,54 @@
-import { localizedText as d } from "../locale.js";
-import { EN_LOCALE as l } from "../../../constants.js";
-import { DEFAULT_MIN_DIMENSION as I, DEFAULT_TIMEOUT as c, MS_UNIT as p } from "../constants.js";
+import { localizedText as s } from "../locale.js";
+import { EN_LOCALE as c } from "../../../constants.js";
+import { DEFAULT_MIN_DIMENSION as p, DEFAULT_TIMEOUT as A, MS_UNIT as _, MAX_ASPECT_RATIO as w, MIN_ASPECT_RATIO as l } from "../constants.js";
 import { PhotoSizeError as v } from "../errors/photo-size.error.js";
-const N = async (f, s = I, o = l, u = c) => new Promise(
-  (m, t) => {
-    const e = new FileReader();
+const S = async (L, d = p, o = c, T = A) => new Promise(
+  (m, e) => {
+    const t = new FileReader();
     let r = !1;
     const E = setTimeout(() => {
-      r || (r = !0, e.abort(), t(
+      r || (r = !0, t.abort(), e(
         new Error(
-          `${d[o]["timeout-error"]}: ${u}${p}`
+          `${s[o]["timeout-error"]}: ${T}${_}`
         )
       ));
-    }, u);
-    e.addEventListener("load", () => {
+    }, T);
+    t.addEventListener("load", () => {
       if (r) return;
       r = !0, clearTimeout(E);
-      const a = e.result?.toString() || "";
+      const a = t.result?.toString() || "";
       if (!a) {
         m("");
         return;
       }
-      const n = new Image();
-      n.src = a, n.addEventListener("load", () => {
-        const { naturalWidth: i, naturalHeight: L } = n;
-        if (i < s || L < s) {
-          const T = v.get(s, o);
-          t(T);
+      const i = new Image();
+      i.src = a, i.addEventListener("load", () => {
+        const { naturalWidth: n, naturalHeight: f } = i, I = f / n;
+        if (n < d || f < d) {
+          const u = v.get(d, o);
+          e(u);
+        } else if (I > w || I < l) {
+          const u = new Error(s[o].aspect);
+          e(u);
         } else
           m(a);
-      }), n.addEventListener("error", () => {
-        const i = new Error(d[o]["paint-error"]);
-        t(i);
-      }), n.addEventListener("abort", () => {
-        const i = new Error(d[o]["read-abort"]);
-        t(i);
+      }), i.addEventListener("error", () => {
+        const n = new Error(s[o]["paint-error"]);
+        e(n);
+      }), i.addEventListener("abort", () => {
+        const n = new Error(s[o]["read-abort"]);
+        e(n);
       });
-    }), e.addEventListener("error", () => {
-      r || (r = !0, clearTimeout(E), t(e.error));
-    }), e.addEventListener("abort", () => {
+    }), t.addEventListener("error", () => {
+      r || (r = !0, clearTimeout(E), e(t.error));
+    }), t.addEventListener("abort", () => {
       if (r) return;
       r = !0, clearTimeout(E);
-      const a = new Error(d[o]["paint-abort"]);
-      t(a);
-    }), e.readAsDataURL(f);
+      const a = new Error(s[o]["paint-abort"]);
+      e(a);
+    }), t.readAsDataURL(L);
   }
 );
 export {
-  N as readPhoto
+  S as readPhoto
 };