@hai-dev/ui-kit 1.0.7 → 1.0.9

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

@@ -1 +1,3 @@
+export type { Crop, PercentCrop, PixelCrop } from 'react-image-crop';
 export { PhotoCropUploader } from './photo-crop-uploader';
+export { drawCroppedImage } from './utils';

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

@@ -1,4 +1,6 @@
 import { PhotoCropUploader as p } from "./photo-crop-uploader.js";
+import { drawCroppedImage as a } from "./utils/draw-cropped-image.js";
 export {
-  p as PhotoCropUploader
+  p as PhotoCropUploader,
+  a as drawCroppedImage
 };

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

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

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

@@ -1,4 +1,5 @@
 import { DragEvent, InputHTMLAttributes, ReactNode } from 'react';
+import { PixelCrop } from 'react-image-crop';
 import { Locale } from '../../types';
 import { BMP_IMAGE_TYPE, GIF_IMAGE_TYPE, ICO_IMAGE_TYPE, JPEG_IMAGE_TYPE, JPG_IMAGE_TYPE, MICROSOFT_ICO_IMAGE_TYPE, PNG_IMAGE_TYPE, SVG_IMAGE_TYPE, WEBP_IMAGE_TYPE, ICO_IMAGE_EXT, BMP_IMAGE_EXT, GIF_IMAGE_EXT, JPEG_IMAGE_EXT, JPG_IMAGE_EXT, PNG_IMAGE_EXT, SVG_IMAGE_EXT, WEBP_IMAGE_EXT } from './constants';
 export type PhotoDataUrl = string;
@@ -14,14 +15,22 @@ export type PhotoFileOptions = {
     allowedExtensions?: PhotoExtension[];
     allowedMimeTypes?: PhotoMimeType[];
 };
+type WithNoReturnCropParamsProps = {
+    returnCropParams?: false;
+    onEndCrop?: (photoData: PhotoDataUrl) => unknown;
+    onClose?: (skipPhotosData: PhotoDataUrl[], sourcesData: PhotoDataUrl[]) => unknown;
+};
+type WithReturnCropParamsProps = {
+    returnCropParams: true;
+    onEndCrop?: (photoData: PixelCrop) => unknown;
+    onClose?: (skipPhotosData: PixelCrop[], sourcesData: PhotoDataUrl[]) => unknown;
+};
 export type PhotoCropUploaderCustomProps = {
     buttonClassname?: string;
     onStartUpload?: () => 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;
@@ -39,5 +48,6 @@ export type PhotoCropUploaderCustomProps = {
     uploadButton?: ReactNode;
     fromSources?: PhotoDataUrl[];
 };
-export type PhotoCropUploaderProps = PhotoCropUploaderCustomProps & InputHTMLAttributes<HTMLInputElement>;
+export type PhotoCropUploaderProps = PhotoCropUploaderCustomProps & (WithNoReturnCropParamsProps | WithReturnCropParamsProps) & InputHTMLAttributes<HTMLInputElement>;
 export type PhotoCropUploaderLocaleText = Record<Locale, Record<string, string>>;
+export {};

package/dist/components/photo-crop-uploader/utils/draw-cropped-image.d.ts

@@ -0,0 +1,3 @@
+import { Crop } from 'react-image-crop';
+import { Locale } from '../../../types';
+export declare const drawCroppedImage: (canvas: HTMLCanvasElement, source: string, crop: Crop, locale?: Locale) => Promise<void>;

package/dist/components/photo-crop-uploader/utils/draw-cropped-image.js

@@ -0,0 +1,33 @@
+import { D as h } from "../../../index-BiffjjQq.js";
+import { localizedText as w } from "../locale.js";
+import { EN_LOCALE as l } from "../../../constants.js";
+import { PHOTO_CANVAS_CONTEXT as x } from "../constants.js";
+const O = async (o, n, a, m = l) => {
+  new Promise((d, s) => {
+    const r = new Image();
+    r.src = n, r.addEventListener("load", () => {
+      const { width: e, height: c } = o, { naturalWidth: p, naturalHeight: g } = r, i = o.getContext(x);
+      if (i) {
+        const t = h(a, p, g);
+        i.drawImage(
+          r,
+          t.x,
+          t.y,
+          t.width,
+          t.height,
+          0,
+          0,
+          e,
+          c
+        );
+      }
+      d("");
+    }), r.addEventListener("error", () => {
+      const e = new Error(w[m]["paint-error"]);
+      s(e);
+    });
+  });
+};
+export {
+  O as drawCroppedImage
+};

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

@@ -0,0 +1,4 @@
+import { Crop } from 'react-image-crop';
+import { Locale } from '../../../types';
+import { PhotoDataUrl } from '../types';
+export declare const getCroppedSource: (photo: HTMLImageElement, canvas: HTMLCanvasElement, crop: Crop, locale?: Locale) => PhotoDataUrl;

package/dist/components/photo-crop-uploader/utils/{get-croped-photo.js → get-cropped-source.js}

@@ -22,5 +22,5 @@ const H = (c, o, d, m = O) => {
   ), t.restore(), o.toDataURL();
 };
 export {
-  H as getCropedPhoto
+  H as getCroppedSource
 };

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

@@ -1,3 +1,4 @@
+import { Crop } from 'react-image-crop';
 import { Locale } from '../../../types';
 import { PhotoDataUrl } from '../types';
-export declare const getDefaultCroppedPhoto: (photoSourse: PhotoDataUrl, minDimension: number, aspectRatio: number, locale: Locale) => Promise<PhotoDataUrl>;
+export declare const getDefaultCroppedPhoto: (photoSourse: PhotoDataUrl, minDimension: number, aspectRatio: number, locale: Locale, returnCropParams: boolean) => Promise<PhotoDataUrl | Crop>;

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

@@ -1,32 +1,39 @@
-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) => {
+import { D as g } from "../../../index-BiffjjQq.js";
+import { getPhotoCrop as u } from "./get-photo-crop.js";
+import { getCroppedSource as C } from "./get-cropped-source.js";
+import { localizedText as l } from "../locale.js";
+const x = async (a, s, i, e, m) => new Promise((n, c) => {
   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
-    );
+    const { width: r, height: p } = o;
     try {
-      const r = g(
+      const t = u(
+        r,
+        p,
+        s,
+        i,
+        !0
+      );
+      if (m) {
+        const f = g(t, r, p);
+        n(f);
+        return;
+      }
+      const h = C(
         o,
         d,
-        i,
+        t,
         e
       );
-      p(r);
-    } catch (r) {
-      n(r);
+      n(h);
+    } catch (t) {
+      c(t);
     }
   }), o.addEventListener("error", () => {
-    const t = new Error(P[e]["paint-error"]);
-    n(t);
+    const r = new Error(l[e]["paint-error"]);
+    c(r);
   });
 });
 export {
-  w as getDefaultCroppedPhoto
+  x as getDefaultCroppedPhoto
 };

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

@@ -1,5 +1,6 @@
 export { readPhoto } from './read-photo';
 export { getPhotoCrop } from './get-photo-crop';
-export { getCropedPhoto } from './get-croped-photo';
+export { getCroppedSource } from './get-cropped-source';
 export { validatePhotoFile } from './validate-photo-file';
 export { getDefaultCroppedPhoto } from './get-default-cropped-photo';
+export { drawCroppedImage } from './draw-cropped-image';

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

@@ -1,12 +1,14 @@
 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";
+import { getCroppedSource as m } from "./get-cropped-source.js";
+import { validatePhotoFile as d } from "./validate-photo-file.js";
+import { getDefaultCroppedPhoto as g } from "./get-default-cropped-photo.js";
+import { drawCroppedImage as C } from "./draw-cropped-image.js";
 export {
-  h as getCropedPhoto,
-  a as getDefaultCroppedPhoto,
+  C as drawCroppedImage,
+  m as getCroppedSource,
+  g as getDefaultCroppedPhoto,
   p as getPhotoCrop,
   e as readPhoto,
-  x as validatePhotoFile
+  d as validatePhotoFile
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hai-dev/ui-kit",
   "private": false,
-  "version": "1.0.7",
+  "version": "1.0.9",
   "license": "UNLICENSED",
   "author": {
     "name": "Vladislav Knitrunov",

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

@@ -1,4 +0,0 @@
-import { Crop } from 'react-image-crop';
-import { Locale } from '../../../types';
-import { PhotoDataUrl } from '../types';
-export declare const getCropedPhoto: (photo: HTMLImageElement, canvas: HTMLCanvasElement, crop: Crop, locale?: Locale) => PhotoDataUrl;