antd-img-crop 4.12.1 → 4.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -33
- package/README.zh-CN.md +22 -18
- package/dist/antd-img-crop.cjs.js +11 -10
- package/dist/antd-img-crop.d.ts +2 -1
- package/dist/antd-img-crop.esm.js +11 -10
- package/package.json +22 -22
package/README.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<p><a href="https://kee.so/" target="_blank"><img src="https://i.imgur.com/x5SRUoo.png" alt="kee.so" /></a></p>
|
|
3
|
+
|
|
4
|
+
Create now ➫ [🔗 kee.so](https://kee.so/)
|
|
5
|
+
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
1
10
|
# antd-img-crop
|
|
2
11
|
|
|
3
12
|
An image cropper for Ant Design [Upload](https://ant.design/components/upload/)
|
|
@@ -37,29 +46,30 @@ const Demo = () => (
|
|
|
37
46
|
|
|
38
47
|
## Props
|
|
39
48
|
|
|
40
|
-
| Prop | Type | Default | Description
|
|
41
|
-
| -------------- | ---------- | -------------- |
|
|
42
|
-
| quality | `number` | `0.4` | Cropped image quality, `0` to `1`
|
|
43
|
-
| fillColor | `string` | `'white'` | Fill color
|
|
44
|
-
| zoomSlider | `boolean` | `true` | Enable zoom adjustment
|
|
45
|
-
| rotationSlider | `boolean` | `false` | Enable rotation adjustment
|
|
46
|
-
| aspectSlider | `boolean` | `false` | Enable aspect adjustment
|
|
47
|
-
| showReset | `boolean` | `false` |
|
|
48
|
-
|
|
|
49
|
-
|
|
|
50
|
-
|
|
|
51
|
-
|
|
|
52
|
-
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
49
|
+
| Prop | Type | Default | Description |
|
|
50
|
+
| -------------- | ---------- | -------------- | -------------------------------------------------------------------------- |
|
|
51
|
+
| quality | `number` | `0.4` | Cropped image quality, `0` to `1` |
|
|
52
|
+
| fillColor | `string` | `'white'` | Fill color for cropped image |
|
|
53
|
+
| zoomSlider | `boolean` | `true` | Enable zoom adjustment |
|
|
54
|
+
| rotationSlider | `boolean` | `false` | Enable rotation adjustment |
|
|
55
|
+
| aspectSlider | `boolean` | `false` | Enable aspect adjustment |
|
|
56
|
+
| showReset | `boolean` | `false` | Show reset button to reset zoom rotation aspect |
|
|
57
|
+
| resetText | `string` | `Reset` | Reset button text |
|
|
58
|
+
| aspect | `number` | `1 / 1` | Aspect of crop area , `width / height` |
|
|
59
|
+
| minZoom | `number` | `1` | Minimum zoom factor |
|
|
60
|
+
| maxZoom | `number` | `3` | Maximum zoom factor |
|
|
61
|
+
| cropShape | `string` | `'rect'` | Shape of crop area, `'rect'` or `'round'` |
|
|
62
|
+
| showGrid | `boolean` | `false` | Show grid of crop area (third-lines) |
|
|
63
|
+
| cropperProps | `object` | - | [react-easy-crop] props (\* existing props cannot be overridden) |
|
|
64
|
+
| modalClassName | `string` | `''` | Modal classname |
|
|
65
|
+
| modalTitle | `string` | `'Edit image'` | Modal title |
|
|
66
|
+
| modalWidth | `number` | `string` | Modal width |
|
|
67
|
+
| modalOk | `string` | | Ok button text |
|
|
68
|
+
| modalCancel | `string` | | Cancel button text |
|
|
69
|
+
| onModalOk | `function` | - | Ok button callback |
|
|
70
|
+
| onModalCancel | `function` | - | Cancel button, modal mask, top right "x" callback |
|
|
71
|
+
| modalProps | `object` | | [Ant Design Modal] props (\* existing props cannot be overridden) |
|
|
72
|
+
| beforeCrop | `function` | - | Upload button callback, if return `false` or `reject`, modal will not open |
|
|
63
73
|
|
|
64
74
|
## FAQ
|
|
65
75
|
|
|
@@ -90,13 +100,3 @@ import 'antd/es/slider/style';
|
|
|
90
100
|
|
|
91
101
|
[react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
|
|
92
102
|
[Ant Design Modal]: https://ant.design/components/modal#api
|
|
93
|
-
|
|
94
|
-
## FUTAKE
|
|
95
|
-
|
|
96
|
-
Try [**FUTAKE**](https://sotake.com/futake) in WeChat. A mini app for your inspiration moments. 🌈
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
```
|
package/README.zh-CN.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<p><a href="https://kee.so/" target="_blank"><img src="https://i.imgur.com/x5SRUoo.png" alt="kee.so" /></a></p>
|
|
3
|
+
|
|
4
|
+
Create now ➫ [🔗 kee.so](https://kee.so/)
|
|
5
|
+
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
1
10
|
# antd-img-crop
|
|
2
11
|
|
|
3
12
|
图片裁切工具，用于 Ant Design [Upload](https://ant.design/components/upload-cn/) 组件
|
|
@@ -40,26 +49,27 @@ const Demo = () => (
|
|
|
40
49
|
| 属性 | 类型 | 默认 | 说明 |
|
|
41
50
|
| -------------- | -------------------- | ------------ | -------------------------------------------------------- |
|
|
42
51
|
| quality | `number` | `0.4` | 裁切图片质量，`0` 到 `1` 之间 |
|
|
43
|
-
| fillColor | `string` | `'white'` |
|
|
44
|
-
| zoomSlider | `boolean` | `true` |
|
|
45
|
-
| rotationSlider | `boolean` | `false` |
|
|
46
|
-
| aspectSlider | `boolean` | `false` |
|
|
47
|
-
| showReset | `boolean` | `false` |
|
|
52
|
+
| fillColor | `string` | `'white'` | 裁切图像填充色 |
|
|
53
|
+
| zoomSlider | `boolean` | `true` | 图片缩放控制 |
|
|
54
|
+
| rotationSlider | `boolean` | `false` | 图片旋转控制 |
|
|
55
|
+
| aspectSlider | `boolean` | `false` | 裁切比率控制 |
|
|
56
|
+
| showReset | `boolean` | `false` | 显示重置按钮，重置缩放旋转及比率 |
|
|
57
|
+
| resetText | `string` | `重置` | 重置按钮文字 |
|
|
48
58
|
| aspect | `number` | `1 / 1` | 裁切区域宽高比，`width / height` |
|
|
49
59
|
| minZoom | `number` | `1` | 最小缩放倍数 |
|
|
50
60
|
| maxZoom | `number` | `3` | 最大缩放倍数 |
|
|
51
61
|
| cropShape | `string` | `'rect'` | 裁切区域形状，`'rect'` 或 `'round'` |
|
|
52
62
|
| showGrid | `boolean` | `false` | 显示裁切区域网格（九宫格） |
|
|
53
63
|
| cropperProps | `object` | - | [react-easy-crop] 的 props（\* 已有 props 无法重写） |
|
|
54
|
-
| modalClassName | `string` | `''` |
|
|
64
|
+
| modalClassName | `string` | `''` | 弹窗 className |
|
|
55
65
|
| modalTitle | `string` | `'编辑图片'` | 弹窗标题 |
|
|
56
|
-
| modalWidth | `number` \| `string` | |
|
|
57
|
-
| modalOk | `string` | |
|
|
58
|
-
| modalCancel | `string` | |
|
|
59
|
-
| onModalOK | `function` | - |
|
|
60
|
-
| onModalCancel | `function` | - |
|
|
66
|
+
| modalWidth | `number` \| `string` | | 弹窗宽度 |
|
|
67
|
+
| modalOk | `string` | | 确定按钮文字 |
|
|
68
|
+
| modalCancel | `string` | | 取消按钮文字 |
|
|
69
|
+
| onModalOK | `function` | - | 确定按钮回调 |
|
|
70
|
+
| onModalCancel | `function` | - | 取消按钮、遮罩层、或右上角叉回调 |
|
|
61
71
|
| modalProps | `object` | | [Ant Design Modal] 的 props（\* 已有 props 无法重写） |
|
|
62
|
-
| beforeCrop | `function` | - |
|
|
72
|
+
| beforeCrop | `function` | - | 上传按钮回调，若返回 `false` 或 `reject`，弹窗将不会打开 |
|
|
63
73
|
|
|
64
74
|
## FAQ
|
|
65
75
|
|
|
@@ -90,9 +100,3 @@ import 'antd/es/slider/style';
|
|
|
90
100
|
|
|
91
101
|
[react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
|
|
92
102
|
[Ant Design Modal]: https://ant.design/components/modal-cn#api
|
|
93
|
-
|
|
94
|
-
## FUTAKE
|
|
95
|
-
|
|
96
|
-
试试 [**FUTAKE**](https://sotake.com/futake) 小程序，你的灵感相册。🌈
|
|
97
|
-
|
|
98
|
-
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
var tslib = require('tslib');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var react = require('react');
|
|
6
5
|
var antd = require('antd');
|
|
7
6
|
var AntModal = require('antd/lib/modal');
|
|
8
7
|
var AntUpload = require('antd/lib/upload');
|
|
9
8
|
var compareVersions = require('compare-versions');
|
|
10
|
-
var
|
|
9
|
+
var react = require('react');
|
|
11
10
|
var AntButton = require('antd/lib/button');
|
|
12
11
|
var AntSlider = require('antd/lib/slider');
|
|
12
|
+
var Cropper = require('react-easy-crop');
|
|
13
13
|
|
|
14
14
|
const PREFIX = 'img-crop';
|
|
15
15
|
const ZOOM_INITIAL = 1;
|
|
@@ -23,7 +23,7 @@ const ASPECT_MAX = 2;
|
|
|
23
23
|
const ASPECT_STEP = 0.01;
|
|
24
24
|
|
|
25
25
|
const EasyCrop = react.forwardRef((props, ref) => {
|
|
26
|
-
const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps,
|
|
26
|
+
const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps, } = props;
|
|
27
27
|
const [zoom, setZoom] = react.useState(ZOOM_INITIAL);
|
|
28
28
|
const [rotation, setRotation] = react.useState(ROTATION_INITIAL);
|
|
29
29
|
const [aspect, setAspect] = react.useState(ASPECT_INITIAL);
|
|
@@ -55,7 +55,7 @@ const EasyCrop = react.forwardRef((props, ref) => {
|
|
|
55
55
|
cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
|
|
56
56
|
containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
|
|
57
57
|
mediaClassName: `${PREFIX}-media`,
|
|
58
|
-
} })), zoomSlider && (jsxRuntime.jsxs("section",
|
|
58
|
+
} })), zoomSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(zoom - ZOOM_STEP), disabled: zoom - ZOOM_STEP < minZoom, children: "\uFF0D" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(zoom + ZOOM_STEP), disabled: zoom + ZOOM_STEP > maxZoom, children: "\uFF0B" })] })), rotationSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN, children: "\u21BA" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsxRuntime.jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX, children: "\u21BB" })] })), aspectSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(aspect - ASPECT_STEP), disabled: aspect - ASPECT_STEP < ASPECT_MIN, children: "\u2195\uFE0F" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: ASPECT_MIN, max: ASPECT_MAX, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(aspect + ASPECT_STEP), disabled: aspect + ASPECT_STEP > ASPECT_MAX, children: "\u2194\uFE0F" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsxRuntime.jsx(AntButton, { className: "[bottom:20px] [position:absolute]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
|
|
59
59
|
});
|
|
60
60
|
var EasyCrop$1 = react.memo(EasyCrop);
|
|
61
61
|
|
|
@@ -86,10 +86,10 @@ function styleInject(css, ref) {
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
var css_248z = ".
|
|
90
|
-
styleInject(css_248z);
|
|
89
|
+
var css_248z = ".visible{visibility:visible}.grid{display:grid}.\\!\\[position\\:relative\\]{position:relative!important}.\\[align-items\\:center\\]{align-items:center}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.\\[bottom\\:20px\\]{bottom:20px}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[display\\:flex\\]{display:flex}.\\[flex\\:1\\]{flex:1}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[justify-content\\:center\\]{justify-content:center}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[position\\:absolute\\]{position:absolute}.\\[width\\:100\\%\\]{width:100%}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.disabled\\:\\[cursor\\:default\\]:disabled{cursor:default}.disabled\\:\\[opacity\\:20\\%\\]:disabled{opacity:20%}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]~section:first-of-type{margin-top:16px}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]~section:last-of-type{margin-bottom:16px}";
|
|
90
|
+
styleInject(css_248z,{"insertAt":"top"});
|
|
91
91
|
|
|
92
|
-
const
|
|
92
|
+
const openProp = compareVersions.compareVersions(antd.version, '4.23.0') === -1 ? 'visible' : 'open';
|
|
93
93
|
const deprecate = (obj, old, now) => {
|
|
94
94
|
if (old in obj) {
|
|
95
95
|
console.error(`\`${old}\` is deprecated, please use \`${now}\` instead`);
|
|
@@ -102,11 +102,11 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
102
102
|
// @ts-ignore
|
|
103
103
|
zoomSlider: ZOOM_SLIDER = true,
|
|
104
104
|
// @ts-ignore
|
|
105
|
-
rotationSlider: ROTATION_SLIDER = false, aspectSlider = false, aspect = 1, minZoom = 1, maxZoom = 3,
|
|
105
|
+
rotationSlider: ROTATION_SLIDER = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3,
|
|
106
106
|
// @ts-ignore
|
|
107
107
|
cropShape: CROP_SHAPE = 'rect',
|
|
108
108
|
// @ts-ignore
|
|
109
|
-
showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel,
|
|
109
|
+
showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
|
|
110
110
|
/**
|
|
111
111
|
* init
|
|
112
112
|
*/
|
|
@@ -260,7 +260,8 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
260
260
|
const lang = typeof window === 'undefined' ? '' : window.navigator.language;
|
|
261
261
|
const isCN = lang === 'zh-CN';
|
|
262
262
|
const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
|
|
263
|
-
|
|
263
|
+
const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
|
|
264
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [uploadComponent, modalImage && (jsxRuntime.jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { [openProp]: true, title: title, onCancel: onCancel.current, onOk: onOk.current, wrapClassName: wrapClassName, maskClosable: false, destroyOnClose: true, children: jsxRuntime.jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, resetBtnText: resetBtnText, modalImage: modalImage, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) })))] }));
|
|
264
265
|
});
|
|
265
266
|
|
|
266
267
|
module.exports = ImgCrop;
|
package/dist/antd-img-crop.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ type ImgCropProps = {
|
|
|
11
11
|
rotationSlider?: boolean;
|
|
12
12
|
aspectSlider?: boolean;
|
|
13
13
|
showReset?: boolean;
|
|
14
|
+
resetText?: string;
|
|
14
15
|
aspect?: number;
|
|
15
16
|
minZoom?: number;
|
|
16
17
|
maxZoom?: number;
|
|
@@ -31,4 +32,4 @@ type ImgCropProps = {
|
|
|
31
32
|
|
|
32
33
|
declare const ImgCrop: react.ForwardRefExoticComponent<ImgCropProps & react.RefAttributes<Cropper>>;
|
|
33
34
|
|
|
34
|
-
export { ImgCropProps, ImgCrop as default };
|
|
35
|
+
export { type ImgCropProps, ImgCrop as default };
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { __rest, __awaiter } from 'tslib';
|
|
2
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { forwardRef, useState, useRef, useCallback, useImperativeHandle, memo, useMemo } from 'react';
|
|
4
3
|
import { version } from 'antd';
|
|
5
4
|
import AntModal from 'antd/es/modal';
|
|
6
5
|
import AntUpload from 'antd/es/upload';
|
|
7
6
|
import { compareVersions } from 'compare-versions';
|
|
8
|
-
import
|
|
7
|
+
import { forwardRef, useState, useRef, useCallback, useImperativeHandle, memo, useMemo } from 'react';
|
|
9
8
|
import AntButton from 'antd/es/button';
|
|
10
9
|
import AntSlider from 'antd/es/slider';
|
|
10
|
+
import Cropper from 'react-easy-crop';
|
|
11
11
|
|
|
12
12
|
const PREFIX = 'img-crop';
|
|
13
13
|
const ZOOM_INITIAL = 1;
|
|
@@ -21,7 +21,7 @@ const ASPECT_MAX = 2;
|
|
|
21
21
|
const ASPECT_STEP = 0.01;
|
|
22
22
|
|
|
23
23
|
const EasyCrop = forwardRef((props, ref) => {
|
|
24
|
-
const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps,
|
|
24
|
+
const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps, } = props;
|
|
25
25
|
const [zoom, setZoom] = useState(ZOOM_INITIAL);
|
|
26
26
|
const [rotation, setRotation] = useState(ROTATION_INITIAL);
|
|
27
27
|
const [aspect, setAspect] = useState(ASPECT_INITIAL);
|
|
@@ -53,7 +53,7 @@ const EasyCrop = forwardRef((props, ref) => {
|
|
|
53
53
|
cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
|
|
54
54
|
containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
|
|
55
55
|
mediaClassName: `${PREFIX}-media`,
|
|
56
|
-
} })), zoomSlider && (jsxs("section",
|
|
56
|
+
} })), zoomSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setZoom(zoom - ZOOM_STEP), disabled: zoom - ZOOM_STEP < minZoom, children: "\uFF0D" }), jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsx("button", { className: buttonClass, onClick: () => setZoom(zoom + ZOOM_STEP), disabled: zoom + ZOOM_STEP > maxZoom, children: "\uFF0B" })] })), rotationSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}`, children: [jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN, children: "\u21BA" }), jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX, children: "\u21BB" })] })), aspectSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setAspect(aspect - ASPECT_STEP), disabled: aspect - ASPECT_STEP < ASPECT_MIN, children: "\u2195\uFE0F" }), jsx(AntSlider, { className: sliderClass, min: ASPECT_MIN, max: ASPECT_MAX, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsx("button", { className: buttonClass, onClick: () => setAspect(aspect + ASPECT_STEP), disabled: aspect + ASPECT_STEP > ASPECT_MAX, children: "\u2194\uFE0F" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsx(AntButton, { className: "[bottom:20px] [position:absolute]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
|
|
57
57
|
});
|
|
58
58
|
var EasyCrop$1 = memo(EasyCrop);
|
|
59
59
|
|
|
@@ -84,10 +84,10 @@ function styleInject(css, ref) {
|
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
var css_248z = ".
|
|
88
|
-
styleInject(css_248z);
|
|
87
|
+
var css_248z = ".visible{visibility:visible}.grid{display:grid}.\\!\\[position\\:relative\\]{position:relative!important}.\\[align-items\\:center\\]{align-items:center}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.\\[bottom\\:20px\\]{bottom:20px}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[display\\:flex\\]{display:flex}.\\[flex\\:1\\]{flex:1}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[justify-content\\:center\\]{justify-content:center}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[position\\:absolute\\]{position:absolute}.\\[width\\:100\\%\\]{width:100%}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.disabled\\:\\[cursor\\:default\\]:disabled{cursor:default}.disabled\\:\\[opacity\\:20\\%\\]:disabled{opacity:20%}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]~section:first-of-type{margin-top:16px}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]~section:last-of-type{margin-bottom:16px}";
|
|
88
|
+
styleInject(css_248z,{"insertAt":"top"});
|
|
89
89
|
|
|
90
|
-
const
|
|
90
|
+
const openProp = compareVersions(version, '4.23.0') === -1 ? 'visible' : 'open';
|
|
91
91
|
const deprecate = (obj, old, now) => {
|
|
92
92
|
if (old in obj) {
|
|
93
93
|
console.error(`\`${old}\` is deprecated, please use \`${now}\` instead`);
|
|
@@ -100,11 +100,11 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
100
100
|
// @ts-ignore
|
|
101
101
|
zoomSlider: ZOOM_SLIDER = true,
|
|
102
102
|
// @ts-ignore
|
|
103
|
-
rotationSlider: ROTATION_SLIDER = false, aspectSlider = false, aspect = 1, minZoom = 1, maxZoom = 3,
|
|
103
|
+
rotationSlider: ROTATION_SLIDER = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3,
|
|
104
104
|
// @ts-ignore
|
|
105
105
|
cropShape: CROP_SHAPE = 'rect',
|
|
106
106
|
// @ts-ignore
|
|
107
|
-
showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel,
|
|
107
|
+
showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
|
|
108
108
|
/**
|
|
109
109
|
* init
|
|
110
110
|
*/
|
|
@@ -258,7 +258,8 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
258
258
|
const lang = typeof window === 'undefined' ? '' : window.navigator.language;
|
|
259
259
|
const isCN = lang === 'zh-CN';
|
|
260
260
|
const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
|
|
261
|
-
|
|
261
|
+
const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
|
|
262
|
+
return (jsxs(Fragment, { children: [uploadComponent, modalImage && (jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { [openProp]: true, title: title, onCancel: onCancel.current, onOk: onOk.current, wrapClassName: wrapClassName, maskClosable: false, destroyOnClose: true, children: jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, resetBtnText: resetBtnText, modalImage: modalImage, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) })))] }));
|
|
262
263
|
});
|
|
263
264
|
|
|
264
265
|
export { ImgCrop as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "antd-img-crop",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.13.0",
|
|
4
4
|
"description": "An image cropper for Ant Design Upload",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -31,33 +31,33 @@
|
|
|
31
31
|
"react-dom": ">=16.8.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"compare-versions": "6.
|
|
35
|
-
"react-easy-crop": "^
|
|
36
|
-
"tslib": "^2.
|
|
34
|
+
"compare-versions": "6.1.0",
|
|
35
|
+
"react-easy-crop": "^5.0.2",
|
|
36
|
+
"tslib": "^2.6.2"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@rollup/plugin-replace": "^5.0.2",
|
|
40
|
-
"@rollup/plugin-typescript": "^11.1.
|
|
41
|
-
"@
|
|
42
|
-
"@types/
|
|
43
|
-
"@types/react": "^18.
|
|
44
|
-
"@
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"eslint": "^
|
|
49
|
-
"eslint-config-prettier": "^8.8.0",
|
|
40
|
+
"@rollup/plugin-typescript": "^11.1.3",
|
|
41
|
+
"@types/node": "^20.6.2",
|
|
42
|
+
"@types/react": "^18.2.21",
|
|
43
|
+
"@types/react-dom": "^18.2.7",
|
|
44
|
+
"@vitejs/plugin-react": "^4.0.4",
|
|
45
|
+
"antd": "^5.9.1",
|
|
46
|
+
"autoprefixer": "^10.4.15",
|
|
47
|
+
"eslint": "^8.49.0",
|
|
48
|
+
"eslint-config-prettier": "^9.0.0",
|
|
50
49
|
"eslint-config-react-app": "^7.0.1",
|
|
51
|
-
"postcss": "^8.4.
|
|
52
|
-
"prettier": "^
|
|
53
|
-
"prettier-plugin-
|
|
50
|
+
"postcss": "^8.4.29",
|
|
51
|
+
"prettier": "^3.0.3",
|
|
52
|
+
"prettier-plugin-organize-imports": "^3.2.3",
|
|
53
|
+
"prettier-plugin-tailwindcss": "^0.5.4",
|
|
54
54
|
"react": "^18.2.0",
|
|
55
55
|
"react-dom": "^18.2.0",
|
|
56
|
-
"rollup": "3.
|
|
57
|
-
"rollup-plugin-dts": "^
|
|
56
|
+
"rollup": "3.29.2",
|
|
57
|
+
"rollup-plugin-dts": "^6.0.2",
|
|
58
58
|
"rollup-plugin-postcss": "^4.0.2",
|
|
59
|
-
"tailwindcss": "^3.3.
|
|
60
|
-
"typescript": "^5.
|
|
61
|
-
"vite": "^4.
|
|
59
|
+
"tailwindcss": "^3.3.3",
|
|
60
|
+
"typescript": "^5.2.2",
|
|
61
|
+
"vite": "^4.4.9"
|
|
62
62
|
}
|
|
63
63
|
}
|