xtreme-ui
Version:
Collection of reusable components that can be used in web projects
63 lines (62 loc) • 2.19 kB
JavaScript
"use client";
import { jsxs as I, jsx as o } from "react/jsx-runtime";
import { useState as t, useCallback as b, useEffect as j } from "react";
import A from "clsx";
import F from "react-easy-crop";
import { Icon as m } from "../../base/Icon/Icon.js";
import { Spinner as R } from "../../base/Spinner/Spinner.js";
import { readImageFile as $, getImageSize as _, getCroppedImg as q } from "../../../utils/helper/imageHelper.js";
/* empty css */
const S = 1, T = (x) => {
const { className: y, file: i, clearFile: a, minImageSize: r, cropShape: k = "round", aspect: z = 1, zoomSpeed: v = 1, onChange: w } = x, [d, l] = t(), [E, p] = t(!0), [L, g] = t(S), [M, f] = t({ x: 0, y: 0 }), [C, c] = t(0), [N, u] = t(), P = A(
"xtrImageEditor",
y
), Z = async () => {
try {
const e = await q(d, N, C);
e && w(e);
} catch (e) {
console.error(e);
}
n();
}, n = b(() => {
l(void 0), f({ x: 0, y: 0 }), g(S), c(0), u(void 0), a == null || a(), p(!0);
}, [a]);
return j(() => {
(async () => {
if (!i) return;
const s = await $(i), h = await _(s);
if (r && Math.min(h.width, h.height) < r)
return n(), console.log(`Image should be at least ${r}x${r}`);
l(s);
})();
}, [n, i, r]), i ? /* @__PURE__ */ I("div", { className: P, children: [
/* @__PURE__ */ o(
F,
{
image: d,
onMediaLoaded: () => p(!1),
cropShape: k,
aspect: z,
zoom: L,
zoomSpeed: v,
onZoomChange: g,
rotation: C,
onRotationChange: c,
crop: M,
onCropChange: f,
onCropComplete: (e, s) => u(s)
}
),
/* @__PURE__ */ I("div", { className: "editorControls", children: [
/* @__PURE__ */ o(m, { code: "f00d", type: "solid", onClick: n }),
/* @__PURE__ */ o(m, { code: "f2ea", type: "solid", onClick: () => c((e) => e - 90) }),
/* @__PURE__ */ o(m, { code: "f2f9", type: "solid", onClick: () => c((e) => e + 90) }),
/* @__PURE__ */ o(m, { code: "f00c", type: "solid", onClick: Z })
] }),
E && /* @__PURE__ */ o(R, { fullpage: !0 })
] }) : null;
};
export {
T as ImageEditor
};