UNPKG

5.64 kBTypeScriptView Raw
1import { default as React, PureComponent } from 'react';
2import { Ords, XYOrds, Crop, PixelCrop, PercentCrop } from './types';
3
4interface EVData {
5 startClientX: number;
6 startClientY: number;
7 startCropX: number;
8 startCropY: number;
9 clientX: number;
10 clientY: number;
11 isResize: boolean;
12 ord?: Ords;
13}
14interface Rectangle {
15 x: number;
16 y: number;
17 width: number;
18 height: number;
19}
20export interface ReactCropProps {
21 /** An object of labels to override the built-in English ones */
22 ariaLabels?: {
23 cropArea: string;
24 nwDragHandle: string;
25 nDragHandle: string;
26 neDragHandle: string;
27 eDragHandle: string;
28 seDragHandle: string;
29 sDragHandle: string;
30 swDragHandle: string;
31 wDragHandle: string;
32 };
33 /** The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. */
34 aspect?: number;
35 /** Classes to pass to the `ReactCrop` element. */
36 className?: string;
37 /** The elements that you want to perform a crop on. For example
38 * an image or video. */
39 children?: React.ReactNode;
40 /** Show the crop area as a circle. If your aspect is not 1 (a square) then the circle will be warped into an oval shape. Defaults to false. */
41 circularCrop?: boolean;
42 /** Since v10 all crop params are required except for aspect. Omit the entire crop object if you don't want a crop. See README on how to create an aspect crop with a % crop. */
43 crop?: Crop;
44 /** If true then the user cannot resize or draw a new crop. A class of `ReactCrop--disabled` is also added to the container for user styling. */
45 disabled?: boolean;
46 /** If true then the user cannot create or resize a crop, but can still drag the existing crop around. A class of `ReactCrop--locked` is also added to the container for user styling. */
47 locked?: boolean;
48 /** If true is passed then selection can't be disabled if the user clicks outside the selection area. */
49 keepSelection?: boolean;
50 /** A minimum crop width, in pixels. */
51 minWidth?: number;
52 /** A minimum crop height, in pixels. */
53 minHeight?: number;
54 /** A maximum crop width, in pixels. */
55 maxWidth?: number;
56 /** A maximum crop height, in pixels. */
57 maxHeight?: number;
58 /** A callback which happens for every change of the crop. You should set the crop to state and pass it back into the library via the `crop` prop. */
59 onChange: (crop: PixelCrop, percentageCrop: PercentCrop) => void;
60 /** A callback which happens after a resize, drag, or nudge. Passes the current crop state object in pixels and percent. */
61 onComplete?: (crop: PixelCrop, percentageCrop: PercentCrop) => void;
62 /** A callback which happens when a user starts dragging or resizing. It is convenient to manipulate elements outside this component. */
63 onDragStart?: (e: PointerEvent) => void;
64 /** A callback which happens when a user releases the cursor or touch after dragging or resizing. */
65 onDragEnd?: (e: PointerEvent) => void;
66 /** Render a custom element in crop selection. */
67 renderSelectionAddon?: (state: ReactCropState) => React.ReactNode;
68 /** Show rule of thirds lines in the cropped area. Defaults to false. */
69 ruleOfThirds?: boolean;
70 /** Inline styles object to be passed to the `ReactCrop` element. */
71 style?: React.CSSProperties;
72}
73export interface ReactCropState {
74 cropIsActive: boolean;
75 newCropIsBeingDrawn: boolean;
76}
77export declare class ReactCrop extends PureComponent<ReactCropProps, ReactCropState> {
78 static xOrds: string[];
79 static yOrds: string[];
80 static xyOrds: string[];
81 static nudgeStep: number;
82 static nudgeStepMedium: number;
83 static nudgeStepLarge: number;
84 static defaultProps: {
85 ariaLabels: {
86 cropArea: string;
87 nwDragHandle: string;
88 nDragHandle: string;
89 neDragHandle: string;
90 eDragHandle: string;
91 seDragHandle: string;
92 sDragHandle: string;
93 swDragHandle: string;
94 wDragHandle: string;
95 };
96 };
97 get document(): Document;
98 docMoveBound: boolean;
99 mouseDownOnCrop: boolean;
100 dragStarted: boolean;
101 evData: EVData;
102 componentRef: React.RefObject<HTMLDivElement>;
103 mediaRef: React.RefObject<HTMLDivElement>;
104 resizeObserver?: ResizeObserver;
105 initChangeCalled: boolean;
106 instanceId: string;
107 state: ReactCropState;
108 getBox(): Rectangle;
109 componentDidUpdate(prevProps: ReactCropProps): void;
110 componentWillUnmount(): void;
111 bindDocMove(): void;
112 unbindDocMove(): void;
113 onCropPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
114 onComponentPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
115 onDocPointerMove: (e: PointerEvent) => void;
116 onComponentKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
117 onHandlerKeyDown: (e: React.KeyboardEvent<HTMLDivElement>, ord: Ords) => void;
118 onDocPointerDone: (e: PointerEvent) => void;
119 onDragFocus: () => void;
120 getCropStyle(): {
121 top: string;
122 left: string;
123 width: string;
124 height: string;
125 } | undefined;
126 dragCrop(): PixelCrop;
127 getPointRegion(box: Rectangle, origOrd: Ords | undefined, minWidth: number, minHeight: number): XYOrds;
128 resolveMinDimensions(box: Rectangle, aspect: number, minWidth?: number, minHeight?: number): number[];
129 resizeCrop(): PixelCrop;
130 renderCropSelection(): React.JSX.Element | undefined;
131 makePixelCrop(box: Rectangle): PixelCrop;
132 render(): React.JSX.Element;
133}
134export {};