@nexusui/components/core/ImageCropDialog/ImageCropDialog.container.d.ts

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.

import { MutableRefObject } from 'react';
import { DialogProps } from '@mui/material/Dialog';
import AvatarEditor from 'react-avatar-editor';
import { ICropDimensions } from './model';
import { TranslateFuncType } from '../util/models';
export type Page = 'upload' | 'crop';
/** The props type of [[`ImageCropDialogContainer`]]. */
export interface IImageCropDialog extends DialogProps {
    /**
     *  Screen to display when first loading the dialog.
     *  @default 'upload'
     */
    initialPage?: Page;
    /**
     *  Title to display on the image upload screen.
     *  @default Update part thumbnail
     */
    imageUploadTitle?: string;
    /**
     *  Title to display on the image crop screen.
     *  @default Edit selected image
     */
    imageCropTitle?: string;
    /**
     *  Initial image to load if one has already been preselected. This can be a string for a local file import, a URL, a File, or a ReactNode to display custom components like an Avatar. If starting from the crop screen, initialImage must be a string.
     */
    initialImage?: string | File | React.ReactNode;
    /**
     *  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?: ICropDimensions;
    /**
     *  FUTURE: Maximum image upload size (in MB).
     */
    /**
     *  FUTURE: Maximum image upload size (in MB).
     */
    /**
     *  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;
    /**
     *  Function to call when the user clicks the close icon (X) (typically this will dismiss the entire workflow the user is working within).
     */
    onClose: () => void;
}
export interface IImageCropDialogComponent extends Omit<IImageCropDialog, 'initialPage'> {
    /**
     * ref to use for the AvatarEditor canvas
     */
    cropperRef: MutableRefObject<AvatarEditor>;
    /**
     *  Function called when the dialog page is changed.
     */
    onBack: () => void;
    /**
     *  Current page to display.
     */
    currentPage: Page;
    /**
     *  Current image that has been uploaded.
     */
    currentImage: File | string | React.ReactNode | null | undefined;
    /**
     *  Current image that has been uploaded.
     */
    onImageUploaded: (file: File | null) => void;
    /**
     *  Callback to execute when the Next button is pressed.
     */
    onNext: () => void;
    /**
     *  translate function
     */
    t: TranslateFuncType;
}
export declare const ImageCropDialog: (props: IImageCropDialog) => import("react/jsx-runtime").JSX.Element;