antd-img-crop 4.12.2 → 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 -34
- package/README.zh-CN.md +21 -18
- package/dist/antd-img-crop.cjs.js +6 -6
- package/dist/antd-img-crop.d.ts +1 -1
- package/dist/antd-img-crop.esm.js +6 -6
- 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,30 +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` | Show
|
|
48
|
-
| resetText | `string` | `Reset` | Reset button text
|
|
49
|
-
| aspect | `number` | `1 / 1` | Aspect of crop area , `width / height`
|
|
50
|
-
| minZoom | `number` | `1` | Minimum zoom factor
|
|
51
|
-
| maxZoom | `number` | `3` | Maximum zoom factor
|
|
52
|
-
| cropShape | `string` | `'rect'` | Shape of crop area, `'rect'` or `'round'`
|
|
53
|
-
| showGrid | `boolean` | `false` | Show grid of crop area (third-lines)
|
|
54
|
-
| cropperProps | `object` | - | [react-easy-crop] props (\* existing props cannot be overridden)
|
|
55
|
-
| modalClassName | `string` | `''` |
|
|
56
|
-
| modalTitle | `string` | `'Edit image'` |
|
|
57
|
-
| modalWidth | `number` | `string` |
|
|
58
|
-
| modalOk | `string` | |
|
|
59
|
-
| modalCancel | `string` | |
|
|
60
|
-
| onModalOk | `function` | - |
|
|
61
|
-
| onModalCancel | `function` | - |
|
|
62
|
-
| modalProps | `object` | | [Ant Design Modal] props (\* existing props cannot be overridden)
|
|
63
|
-
| beforeCrop | `function` | - |
|
|
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 |
|
|
64
73
|
|
|
65
74
|
## FAQ
|
|
66
75
|
|
|
@@ -91,13 +100,3 @@ import 'antd/es/slider/style';
|
|
|
91
100
|
|
|
92
101
|
[react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
|
|
93
102
|
[Ant Design Modal]: https://ant.design/components/modal#api
|
|
94
|
-
|
|
95
|
-
## FUTAKE
|
|
96
|
-
|
|
97
|
-
Try [**FUTAKE**](https://sotake.com/futake) in WeChat. A mini app for your inspiration moments. 🌈
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
```
|
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,11 +49,11 @@ 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` | 显示重置按钮，重置缩放旋转及比率 |
|
|
48
57
|
| resetText | `string` | `重置` | 重置按钮文字 |
|
|
49
58
|
| aspect | `number` | `1 / 1` | 裁切区域宽高比，`width / height` |
|
|
50
59
|
| minZoom | `number` | `1` | 最小缩放倍数 |
|
|
@@ -52,15 +61,15 @@ const Demo = () => (
|
|
|
52
61
|
| cropShape | `string` | `'rect'` | 裁切区域形状，`'rect'` 或 `'round'` |
|
|
53
62
|
| showGrid | `boolean` | `false` | 显示裁切区域网格（九宫格） |
|
|
54
63
|
| cropperProps | `object` | - | [react-easy-crop] 的 props（\* 已有 props 无法重写） |
|
|
55
|
-
| modalClassName | `string` | `''` |
|
|
64
|
+
| modalClassName | `string` | `''` | 弹窗 className |
|
|
56
65
|
| modalTitle | `string` | `'编辑图片'` | 弹窗标题 |
|
|
57
|
-
| modalWidth | `number` \| `string` | |
|
|
58
|
-
| modalOk | `string` | |
|
|
59
|
-
| modalCancel | `string` | |
|
|
60
|
-
| onModalOK | `function` | - |
|
|
61
|
-
| onModalCancel | `function` | - |
|
|
66
|
+
| modalWidth | `number` \| `string` | | 弹窗宽度 |
|
|
67
|
+
| modalOk | `string` | | 确定按钮文字 |
|
|
68
|
+
| modalCancel | `string` | | 取消按钮文字 |
|
|
69
|
+
| onModalOK | `function` | - | 确定按钮回调 |
|
|
70
|
+
| onModalCancel | `function` | - | 取消按钮、遮罩层、或右上角叉回调 |
|
|
62
71
|
| modalProps | `object` | | [Ant Design Modal] 的 props（\* 已有 props 无法重写） |
|
|
63
|
-
| beforeCrop | `function` | - |
|
|
72
|
+
| beforeCrop | `function` | - | 上传按钮回调，若返回 `false` 或 `reject`，弹窗将不会打开 |
|
|
64
73
|
|
|
65
74
|
## FAQ
|
|
66
75
|
|
|
@@ -91,9 +100,3 @@ import 'antd/es/slider/style';
|
|
|
91
100
|
|
|
92
101
|
[react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
|
|
93
102
|
[Ant Design Modal]: https://ant.design/components/modal-cn#api
|
|
94
|
-
|
|
95
|
-
## FUTAKE
|
|
96
|
-
|
|
97
|
-
试试 [**FUTAKE**](https://sotake.com/futake) 小程序，你的灵感相册。🌈
|
|
98
|
-
|
|
99
|
-
|
|
@@ -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;
|
|
@@ -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,8 +86,8 @@ 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
92
|
const openProp = compareVersions.compareVersions(antd.version, '4.23.0') === -1 ? 'visible' : 'open';
|
|
93
93
|
const deprecate = (obj, old, now) => {
|
|
@@ -261,7 +261,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
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
|
|
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 }) })))] }));
|
|
265
265
|
});
|
|
266
266
|
|
|
267
267
|
module.exports = ImgCrop;
|
package/dist/antd-img-crop.d.ts
CHANGED
|
@@ -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;
|
|
@@ -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,8 +84,8 @@ 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
90
|
const openProp = compareVersions(version, '4.23.0') === -1 ? 'visible' : 'open';
|
|
91
91
|
const deprecate = (obj, old, now) => {
|
|
@@ -259,7 +259,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
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
|
|
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 }) })))] }));
|
|
263
263
|
});
|
|
264
264
|
|
|
265
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
|
}
|