react-advanced-cropper
Version:
The react cropper library that gives the possibility to create croppers exactly suited for your website design
61 lines (60 loc) • 3.71 kB
TypeScript
import React, { CSSProperties } from 'react';
import { DrawOptions, DefaultSettings, CoreSettings, CropperImage, CropperState, CropperTransitions, ModifierSettings, InitializeSettings } from 'advanced-cropper';
import { CropperBackgroundWrapperComponent, CropperWrapperComponent, StencilComponent, CropperBackgroundComponent, ArbitraryProps, StencilConstraints, ExtendedSettings, CustomCropperRef, CropperBoundaryComponent } from '../types';
import { CropperStateHook, CropperInstanceSettings, CropperInstanceSettingsProp } from '../hooks/useCropperInstance';
import { AbstractCropperHookProps } from '../hooks/useAbstractCropper';
export declare type AbstractCropperSettingsProp<Settings extends CropperInstanceSettings> = CropperInstanceSettingsProp<Settings>;
export declare type AbstractCropperSettings = DefaultSettings & CoreSettings & ModifierSettings & InitializeSettings;
export interface AbstractCropperRef<Settings extends AbstractCropperSettings = AbstractCropperSettings> {
reset: () => void;
refresh: () => void;
clear: () => void;
setCoordinates: CropperStateHook['setCoordinates'];
setState: CropperStateHook['setState'];
setImage: (image: CropperImage) => void;
flipImage: CropperStateHook['flipImage'];
zoomImage: CropperStateHook['zoomImage'];
rotateImage: CropperStateHook['rotateImage'];
reconcileState: CropperStateHook['reconcileState'];
moveImage: CropperStateHook['moveImage'];
moveCoordinates: CropperStateHook['moveCoordinates'];
moveCoordinatesEnd: CropperStateHook['moveCoordinatesEnd'];
resizeCoordinates: CropperStateHook['resizeCoordinates'];
resizeCoordinatesEnd: CropperStateHook['resizeCoordinatesEnd'];
transformImage: CropperStateHook['transformImage'];
transformImageEnd: CropperStateHook['transformImageEnd'];
getCoordinates: CropperStateHook['getCoordinates'];
getVisibleArea: CropperStateHook['getVisibleArea'];
getTransforms: CropperStateHook['getTransforms'];
getStencilCoordinates: CropperStateHook['getStencilCoordinates'];
getDefaultState: () => CropperState | null;
getCanvas: (options?: DrawOptions) => HTMLCanvasElement | null;
getSettings: () => Settings;
getImage: () => CropperImage | null;
getState: () => CropperState | null;
getTransitions: () => CropperTransitions;
isLoading: () => boolean;
isLoaded: () => boolean;
}
export interface AbstractCropperProps<Settings extends AbstractCropperSettings> extends Omit<AbstractCropperHookProps<Settings>, 'settings'> {
backgroundComponent?: CropperBackgroundComponent;
backgroundProps?: ArbitraryProps;
backgroundClassName?: string;
backgroundWrapperComponent?: CropperBackgroundWrapperComponent;
backgroundWrapperProps?: ArbitraryProps;
backgroundWrapperClassName?: string;
wrapperComponent?: CropperWrapperComponent;
wrapperProps?: ArbitraryProps;
stencilComponent?: StencilComponent;
stencilProps?: ArbitraryProps;
stencilConstraints?: StencilConstraints<AbstractCropperSettingsProp<Settings>>;
className?: string;
boundaryComponent?: CropperBoundaryComponent;
boundaryProps?: ArbitraryProps;
boundaryClassName?: string;
style?: CSSProperties;
settings: CropperInstanceSettingsProp<Settings>;
disabled?: boolean;
}
export declare type AbstractCropperIntrinsicProps<Settings extends AbstractCropperSettings> = Omit<AbstractCropperProps<Settings>, 'settings'>;
export declare const AbstractCropper: <Extension extends object = {}>(props: AbstractCropperProps<ExtendedSettings<Extension>> & React.RefAttributes<CustomCropperRef<Extension>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;