@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.
59 lines (58 loc) • 2.06 kB
TypeScript
import { MutableRefObject } from 'react';
import { DialogContentProps } from '@mui/material/DialogContent';
import AvatarEditor from 'react-avatar-editor';
import { TranslateFuncType } from '../../util/models';
/** The props type of [[`ImageCropContainer`]]. */
export interface IImageCrop extends DialogContentProps {
/**
* ref to use for the AvatarEditor canvas
*/
cropperRef: MutableRefObject<AvatarEditor>;
/**
* Source for the currently selected image, if any.
*/
imageSrc?: string;
/**
* Shape to use for the crop behavior.
* This does not actually change the resulting image (it will still be rectangular - you'll need to match this shape when you use it elsewhere to see the desired effect).
* @default 'rectangle'
*/
cropShape?: 'circle' | 'rectangle';
/**
* Initial image to load if one has already been preselected.
* @default {width: 200,height: 200,border: 20}
*/
cropDimensions?: {
width: number;
height: number;
border?: number;
};
/**
* Function to call when the cropped image is saved. Returns a DataURL base 64 representation of the image in png format or empty string if there is an error.
*/
onSave: (image: string) => void;
/**
* Function to call when the user clicks the back arrow (typically this will dismiss the ImageCropDialog and restore any prior dialog into the view).
*/
onCancel: () => void;
/**
* translate function
*/
t: TranslateFuncType;
}
/** The props type of [[`ImageCropContainer`]]. */
export interface IImageCropComponent extends IImageCrop {
/**
* Zoom level for the image.
*/
imageScale?: number | ReadonlyArray<number>;
/**
* Callback fired when the zoom slider value changes.
*/
onImageScaleChange: (val: number | number[]) => void;
/**
* translate function
*/
t: TranslateFuncType;
}
export declare const ImageCrop: (props: IImageCrop) => import("react/jsx-runtime").JSX.Element;