xtreme-ui/dist/components/layout/ImageEditor/ImageEditor.cjs

Collection of reusable components that can be used in web projects

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),L=require("clsx"),N=require("react-easy-crop"),l=require("../../base/Icon/Icon.cjs"),R=require("../../base/Spinner/Spinner.cjs"),d=require("../../../utils/helper/imageHelper.cjs");;/* empty css                   */const f=1,Z=h=>{const{className:y,file:n,clearFile:r,minImageSize:s,cropShape:j="round",aspect:q=1,zoomSpeed:k=1,onChange:v}=h,[g,u]=t.useState(),[z,m]=t.useState(!0),[E,p]=t.useState(f),[b,S]=t.useState({x:0,y:0}),[C,a]=t.useState(0),[w,I]=t.useState(),M=L("xtrImageEditor",y),P=async()=>{try{const e=await d.getCroppedImg(g,w,C);e&&v(e)}catch(e){console.error(e)}c()},c=t.useCallback(()=>{u(void 0),S({x:0,y:0}),p(f),a(0),I(void 0),r==null||r(),m(!0)},[r]);return t.useEffect(()=>{(async()=>{if(!n)return;const i=await d.readImageFile(n),x=await d.getImageSize(i);if(s&&Math.min(x.width,x.height)<s)return c(),console.log(`Image should be at least ${s}x${s}`);u(i)})()},[c,n,s]),n?o.jsxs("div",{className:M,children:[o.jsx(N,{image:g,onMediaLoaded:()=>m(!1),cropShape:j,aspect:q,zoom:E,zoomSpeed:k,onZoomChange:p,rotation:C,onRotationChange:a,crop:b,onCropChange:S,onCropComplete:(e,i)=>I(i)}),o.jsxs("div",{className:"editorControls",children:[o.jsx(l.Icon,{code:"f00d",type:"solid",onClick:c}),o.jsx(l.Icon,{code:"f2ea",type:"solid",onClick:()=>a(e=>e-90)}),o.jsx(l.Icon,{code:"f2f9",type:"solid",onClick:()=>a(e=>e+90)}),o.jsx(l.Icon,{code:"f00c",type:"solid",onClick:P})]}),z&&o.jsx(R.Spinner,{fullpage:!0})]}):null};exports.ImageEditor=Z;