vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2025-10-16 12:05:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added missing percentCrop parameter to onChange and onComplete callback of react-image-crop. (#36824)

Browse Source
This commit is contained in:
Jonathan 2019-07-16 04:48:27 +12:00 committed by Andrew Branch
parent 74077379fc
commit 54f17bc05e
3 changed files with 92 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
types/react-image-crop/index.d.ts vendored
View File

@ -3,6 +3,7 @@
// Definitions by: Daniela Yassuda <https://github.com/danielasy>
// Elias Chaaya <https://github.com/chaaya>
// Søren Englund <https://github.com/englund0110>
// Jonathan Guo <https://github.com/JonathanGuo>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
@ -17,7 +18,11 @@ declare namespace ReactCrop {
y?: number;
width?: number;
height?: number;
unit?: "px" | "%";
unit?: 'px' | '%';
}
interface PercentCrop extends Crop {
unit?: '%';
}
interface ReactCropProps {
@ -29,8 +34,8 @@ declare namespace ReactCrop {
maxWidth?: number;
maxHeight?: number;
keepSelection?: boolean;
onChange: (crop: Crop) => void;
onComplete?: (crop: Crop) => void;
onChange: (crop: Crop, percentCrop: PercentCrop) => void;
onComplete?: (crop: Crop, percentCrop: PercentCrop) => void;
onImageLoaded?: (target: HTMLImageElement) => void;
onDragStart?: () => void;
onDragEnd?: () => void;

109
types/react-image-crop/test/react-image-crop-global-tests.ts
View File

@ -1,30 +1,35 @@
interface TestState {
crop?: ReactCrop.Crop;
percentCrop?: ReactCrop.PercentCrop;
}
const initialState = {
crop: {
x: 0,
y: 0
}
y: 0,
},
percentCrop: {
x: 0,
y: 0,
},
};
// Basic use case
class SimpleTest extends React.Component<{}, TestState> {
state = initialState;
onChange = (crop: ReactCrop.Crop) => {
this.setState({ crop });
onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
this.setState({
crop,
percentCrop,
});
}
render() {
return React.createElement(
ReactCrop,
{
src: 'imageSrc',
onChange: this.onChange,
crop: this.state.crop,
},
);
return React.createElement(ReactCrop, {
src: 'imageSrc',
onChange: this.onChange,
crop: this.state.crop,
});
}
}
@ -32,8 +37,11 @@ class SimpleTest extends React.Component<{}, TestState> {
class AspectRatioTest extends React.Component<{}, TestState> {
state = initialState;
onChange = (crop: ReactCrop.Crop) => {
this.setState({ crop });
onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
this.setState({
crop,
percentCrop,
});
}
onImageLoaded = (image: HTMLImageElement) => {
@ -44,24 +52,21 @@ class AspectRatioTest extends React.Component<{}, TestState> {
y: 0,
aspect: 16 / 9,
width: 50,
unit: "px",
unit: 'px',
},
image.width,
image.height,
image.height
),
});
}
render() {
return React.createElement(
ReactCrop,
{
src: 'imageSrc',
onChange: this.onChange,
onImageLoaded: this.onImageLoaded,
crop: this.state.crop,
},
);
return React.createElement(ReactCrop, {
src: 'imageSrc',
onChange: this.onChange,
onImageLoaded: this.onImageLoaded,
crop: this.state.crop,
});
}
}
@ -69,8 +74,11 @@ class AspectRatioTest extends React.Component<{}, TestState> {
class CompleteTest extends React.Component<{}, TestState> {
state = initialState;
onChange = (crop: ReactCrop.Crop) => {
this.setState({ crop });
onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
this.setState({
crop,
percentCrop,
});
}
onImageLoaded = (image: HTMLImageElement) => {
@ -81,10 +89,10 @@ class CompleteTest extends React.Component<{}, TestState> {
y: 0,
aspect: 16 / 9,
width: 20,
unit: "px",
unit: 'px',
},
image.width,
image.height,
image.height
),
});
}
@ -94,28 +102,25 @@ class CompleteTest extends React.Component<{}, TestState> {
}
render() {
return React.createElement(
ReactCrop,
{
src: 'imageSrc',
onChange: this.onChange,
onImageLoaded: this.onImageLoaded,
crop: this.state.crop,
minWidth: 30,
minHeight: 30,
maxWidth: 90,
maxHeight: 90,
keepSelection: true,
disabled: false,
style: { border: '1px solid black', position: 'relative' },
onComplete: () => console.log('Crop complete'),
onDragStart: () => console.log('Drag start'),
onDragEnd: () => console.log('Drag end'),
crossorigin: 'anonymous',
onImageError: this.onImageError,
className: 'my-cropper',
locked: false
},
);
return React.createElement(ReactCrop, {
src: 'imageSrc',
onChange: this.onChange,
onImageLoaded: this.onImageLoaded,
crop: this.state.crop,
minWidth: 30,
minHeight: 30,
maxWidth: 90,
maxHeight: 90,
keepSelection: true,
disabled: false,
style: { border: '1px solid black', position: 'relative' },
onComplete: () => console.log('Crop complete'),
onDragStart: () => console.log('Drag start'),
onDragEnd: () => console.log('Drag end'),
crossorigin: 'anonymous',
onImageError: this.onImageError,
className: 'my-cropper',
locked: false,
});
}
}

40
types/react-image-crop/test/react-image-crop-module-tests.tsx
View File

@ -3,21 +3,29 @@ import * as ReactCrop from 'react-image-crop';
interface TestState {
crop?: ReactCrop.Crop;
percentCrop?: ReactCrop.PercentCrop;
}
const initialState = {
crop: {
x: 100,
y: 200
}
y: 200,
},
percentCrop: {
x: 0,
y: 0,
},
};
// Basic use case
class SimpleTest extends React.Component<{}, TestState> {
state = initialState;
onChange = (crop: ReactCrop.Crop) => {
this.setState({ crop });
onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
this.setState({
crop,
percentCrop,
});
}
render() {
@ -29,8 +37,11 @@ class SimpleTest extends React.Component<{}, TestState> {
class AspectRatioTest extends React.Component<{}, TestState> {
state = initialState;
onChange = (crop: ReactCrop.Crop) => {
this.setState({ crop });
onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
this.setState({
crop,
percentCrop,
});
}
onImageLoaded = (image: HTMLImageElement) => {
@ -41,10 +52,10 @@ class AspectRatioTest extends React.Component<{}, TestState> {
y: 0,
aspect: 16 / 9,
width: 50,
unit: "px",
unit: 'px',
},
image.width,
image.height,
image.height
),
});
}
@ -73,7 +84,7 @@ class RenderComponentTest extends React.Component {
return (
<ReactCrop
src="imageSrc"
onChange={(crop) => console.log(crop)}
onChange={(crop, percentCrop) => console.log(crop, percentCrop)}
renderComponent={videoComponent}
/>
);
@ -84,8 +95,11 @@ class RenderComponentTest extends React.Component {
class CompleteTest extends React.Component<{}, TestState> {
state = initialState;
onChange = (crop: ReactCrop.Crop) => {
this.setState({ crop });
onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
this.setState({
crop,
percentCrop,
});
}
onImageLoaded = (image: HTMLImageElement) => {
@ -96,10 +110,10 @@ class CompleteTest extends React.Component<{}, TestState> {
y: 0,
aspect: 16 / 9,
width: 20,
unit: "px",
unit: 'px',
},
image.width,
image.height,
image.height
),
});
}