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