@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) • 819 B
JavaScript
"use client";
import{jsx as o}from"react/jsx-runtime";import{useState as e,useRef as r,useEffect as a}from"react";import n from"./ImageCropDialog.component.js";import{useTranslate as t}from"../locales/index.js";import i from"./locale.json.js";const c=c=>{const{initialPage:p="upload",...m}=c,[l,g]=e(p),[s,u]=e(c.initialImage),d=r(null),I=t(i);a((()=>{u(c.initialImage)}),[c.initialImage]),a((()=>{g(p)}),[c.open,g,p]);const f="crop"===p||"upload"===l?c.onCancel:()=>g("upload"),j="crop"===l?()=>{d&&d.current?c.onSave(d.current.getImageScaledToCanvas().toDataURL("image/png",.5)):c.onSave("")}:()=>g("crop");return o(n,{cropShape:"rectangle",cropDimensions:{width:200,height:200,border:20},...m,cropperRef:d,currentPage:l,onBack:f,onNext:j,currentImage:s,t:I,onImageUploaded:o=>{u(o)}})};export{c as ImageCropDialog};