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