Files
klz-cables.com/.pnpm-store/v10/files/e8/1ae0abef299a24bb6a7941c847b8e524fde0c795ea4091cc7bb14543fdd61c02984f7dd3661f6554219909368c5ff2c18f744e7ad6f619bf6624629df37220
Marc Mintel 5397309103
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
fix(products): fix breadcrumbs and product filtering (backport from main)
2026-02-24 16:04:21 +01:00

133 lines
5.5 KiB
Plaintext

import React, { PureComponent } from 'react';
import { Ords, XYOrds, Crop, PixelCrop, PercentCrop } from './types';
interface EVData {
startClientX: number;
startClientY: number;
startCropX: number;
startCropY: number;
clientX: number;
clientY: number;
isResize: boolean;
ord?: Ords;
}
interface Rectangle {
x: number;
y: number;
width: number;
height: number;
}
export interface ReactCropProps {
/** An object of labels to override the built-in English ones */
ariaLabels?: {
cropArea: string;
nwDragHandle: string;
nDragHandle: string;
neDragHandle: string;
eDragHandle: string;
seDragHandle: string;
sDragHandle: string;
swDragHandle: string;
wDragHandle: string;
};
/** The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. */
aspect?: number;
/** Classes to pass to the `ReactCrop` element. */
className?: string;
/** The elements that you want to perform a crop on. For example
* an image or video. */
children?: React.ReactNode;
/** 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. */
circularCrop?: boolean;
/** 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. */
crop?: Crop;
/** 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. */
disabled?: boolean;
/** 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. */
locked?: boolean;
/** If true is passed then selection can't be disabled if the user clicks outside the selection area. */
keepSelection?: boolean;
/** A minimum crop width, in pixels. */
minWidth?: number;
/** A minimum crop height, in pixels. */
minHeight?: number;
/** A maximum crop width, in pixels. */
maxWidth?: number;
/** A maximum crop height, in pixels. */
maxHeight?: number;
/** 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. */
onChange: (crop: PixelCrop, percentageCrop: PercentCrop) => void;
/** A callback which happens after a resize, drag, or nudge. Passes the current crop state object in pixels and percent. */
onComplete?: (crop: PixelCrop, percentageCrop: PercentCrop) => void;
/** A callback which happens when a user starts dragging or resizing. It is convenient to manipulate elements outside this component. */
onDragStart?: (e: PointerEvent) => void;
/** A callback which happens when a user releases the cursor or touch after dragging or resizing. */
onDragEnd?: (e: PointerEvent) => void;
/** Render a custom element in crop selection. */
renderSelectionAddon?: (state: ReactCropState) => React.ReactNode;
/** Show rule of thirds lines in the cropped area. Defaults to false. */
ruleOfThirds?: boolean;
/** Inline styles object to be passed to the `ReactCrop` element. */
style?: React.CSSProperties;
}
export interface ReactCropState {
cropIsActive: boolean;
newCropIsBeingDrawn: boolean;
}
export declare class ReactCrop extends PureComponent<ReactCropProps, ReactCropState> {
static xOrds: string[];
static yOrds: string[];
static xyOrds: string[];
static nudgeStep: number;
static nudgeStepMedium: number;
static nudgeStepLarge: number;
static defaultProps: {
ariaLabels: {
cropArea: string;
nwDragHandle: string;
nDragHandle: string;
neDragHandle: string;
eDragHandle: string;
seDragHandle: string;
sDragHandle: string;
swDragHandle: string;
wDragHandle: string;
};
};
get document(): Document;
docMoveBound: boolean;
mouseDownOnCrop: boolean;
dragStarted: boolean;
evData: EVData;
componentRef: React.RefObject<HTMLDivElement>;
mediaRef: React.RefObject<HTMLDivElement>;
resizeObserver?: ResizeObserver;
initChangeCalled: boolean;
state: ReactCropState;
getBox(): Rectangle;
componentDidUpdate(prevProps: ReactCropProps): void;
componentWillUnmount(): void;
bindDocMove(): void;
unbindDocMove(): void;
onCropPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
onComponentPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
onDocPointerMove: (e: PointerEvent) => void;
onComponentKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
onHandlerKeyDown: (e: React.KeyboardEvent<HTMLDivElement>, ord: Ords) => void;
onDocPointerDone: (e: PointerEvent) => void;
onDragFocus: (e: React.FocusEvent<HTMLDivElement, Element>) => void;
getCropStyle(): {
top: string;
left: string;
width: string;
height: string;
} | undefined;
dragCrop(): PixelCrop;
getPointRegion(box: Rectangle, origOrd: Ords | undefined, minWidth: number, minHeight: number): XYOrds;
resolveMinDimensions(box: Rectangle, aspect: number, minWidth?: number, minHeight?: number): number[];
resizeCrop(): PixelCrop;
createCropSelection(): React.JSX.Element | undefined;
makePixelCrop(box: Rectangle): PixelCrop;
render(): React.JSX.Element;
}
export {};