@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.
2 lines (1 loc) • 1.27 kB
JavaScript
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"@mui/material/DialogContent";import a from"@mui/material/Stack";import i from"@mui/material/Slider";import t from"@mui/material/Typography";import m from"@mui/icons-material/Image";import l from"react-avatar-editor";const n="NexusImageCrop",d=({cropperRef:d,imageSrc:c,cropDimensions:s={width:200,height:200,border:20},cropShape:g="rectangle",imageScale:h,onImageScaleChange:p,onCancel:f,onSave:b,t:u,...S})=>e(o,{...S,"data-testid":"image-crop-root",children:[r(t,{variant:"body2",fontWeight:"bold",sx:{mb:4},display:"block",children:u("Drag to reposition image")}),r(a,{direction:"row",justifyContent:"center",sx:{backgroundColor:"rgba(0,0,0,0.75)"},children:r(l,{ref:d,image:c,width:s.width,height:s.height,border:0===s?.border?0:s?.border||20,borderRadius:"rectangle"===g?0:Math.max(s.width,s.height)/2,color:[0,0,0,.6],scale:h,rotate:0,style:{display:"block"},crossOrigin:"anonymous"})}),e(a,{direction:"row",alignItems:"center",sx:{mt:4},children:[r(m,{fontSize:"small",sx:{mr:4}}),r(i,{min:1,max:5,step:.1,value:h,onChange:(e,r)=>{p(r)},"aria-label":"Image Zoom Slider",className:`${n}-ImageZoomSlider`,"data-testid":`${n}-ImageZoomSlider`}),r(m,{fontSize:"large",sx:{ml:4}})]})]});export{d as default};