@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
3 lines (2 loc) • 884 B
JavaScript
"use client";
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),r=require("./ImageCropDialog.component.js"),t=require("../locales/index.js"),o=require("./locale.json.js");exports.ImageCropDialog=n=>{const{initialPage:i="upload",...u}=n,[c,l]=a.useState(i),[s,p]=a.useState(n.initialImage),g=a.useRef(null),d=t.useTranslate(o.default);a.useEffect((()=>{p(n.initialImage)}),[n.initialImage]),a.useEffect((()=>{l(i)}),[n.open,l,i]);const m="crop"===i||"upload"===c?n.onCancel:()=>l("upload"),f="crop"===c?()=>{g&&g.current?n.onSave(g.current.getImageScaledToCanvas().toDataURL("image/png",.5)):n.onSave("")}:()=>l("crop");return e.jsx(r.default,{cropShape:"rectangle",cropDimensions:{width:200,height:200,border:20},...u,cropperRef:g,currentPage:c,onBack:m,onNext:f,currentImage:s,t:d,onImageUploaded:e=>{p(e)}})};