antd-img-crop 4.22.0 → 4.24.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.
Files changed (6) hide show
  1. package/README.md +8 -6
  2. package/README.zh-CN.md +8 -6
  3. package/dist/antd-img-crop.cjs.js +5 -37
  4. package/dist/antd-img-crop.d.ts +3 -1
  5. package/dist/antd-img-crop.esm.js +5 -37
  6. package/package.json +28 -29
package/README.md CHANGED
@@ -50,14 +50,16 @@ const Demo = () => (
50
50
  | -------------- | ---------- | -------------- | -------------------------------------------------------------------------------- |
51
51
  | quality | `number` | `0.4` | Cropped image quality, `0` to `1` |
52
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 |
53
+ | zoomSlider | `boolean` | `true` | Enable zoom |
54
+ | rotationSlider | `boolean` | `false` | Enable rotation |
55
+ | aspectSlider | `boolean` | `false` | Enable aspect |
56
+ | showReset | `boolean` | `false` | Show reset button to reset zoom & rotation & aspect |
57
57
  | resetText | `string` | `Reset` | Reset button text |
58
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 |
59
+ | minZoom | `number` | `1` | Minimum zoom |
60
+ | maxZoom | `number` | `3` | Maximum zoom |
61
+ | minAspect | `number` | `0.5` | Minimum aspect |
62
+ | maxAspect | `number` | `2` | Maximum aspect |
61
63
  | cropShape | `string` | `'rect'` | Shape of crop area, `'rect'` or `'round'` |
62
64
  | showGrid | `boolean` | `false` | Show grid of crop area (third-lines) |
63
65
  | cropperProps | `object` | - | [react-easy-crop] props (\* existing props cannot be overridden) |
package/README.zh-CN.md CHANGED
@@ -50,14 +50,16 @@ const Demo = () => (
50
50
  | -------------- | -------------------- | ------------ | ---------------------------------------------------------------- |
51
51
  | quality | `number` | `0.4` | 裁切图片质量，`0` 到 `1` 之间 |
52
52
  | fillColor | `string` | `'white'` | 裁切图像填充色 |
53
- | zoomSlider | `boolean` | `true` | 图片缩放控制 |
54
- | rotationSlider | `boolean` | `false` | 图片旋转控制 |
55
- | aspectSlider | `boolean` | `false` | 裁切比率控制 |
56
- | showReset | `boolean` | `false` | 显示重置按钮，重置缩放旋转及比率 |
53
+ | zoomSlider | `boolean` | `true` | 允许缩放 |
54
+ | rotationSlider | `boolean` | `false` | 允许旋转 |
55
+ | aspectSlider | `boolean` | `false` | 允许调整裁切比 |
56
+ | showReset | `boolean` | `false` | 显示重置按钮，重置缩放 & 旋转 & 裁切比 |
57
57
  | resetText | `string` | `重置` | 重置按钮文字 |
58
58
  | aspect | `number` | `1 / 1` | 裁切区域宽高比，`width / height` |
59
- | minZoom | `number` | `1` | 最小缩放倍数 |
60
- | maxZoom | `number` | `3` | 最大缩放倍数 |
59
+ | minZoom | `number` | `1` | 最小缩放 |
60
+ | maxZoom | `number` | `3` | 最大缩放 |
61
+ | minAspect | `number` | `0.5` | 最小裁切比 |
62
+ | maxAspect | `number` | `2` | 最大裁切比 |
61
63
  | cropShape | `string` | `'rect'` | 裁切区域形状，`'rect'` 或 `'round'` |
62
64
  | showGrid | `boolean` | `false` | 显示裁切区域网格（九宫格） |
63
65
  | cropperProps | `object` | - | [react-easy-crop] 的 props（\* 已有 props 无法重写） |
package/dist/antd-img-crop.cjs.js CHANGED
@@ -2,10 +2,8 @@
2
2
 
3
3
  var tslib = require('tslib');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
- var antd = require('antd');
6
5
  var AntModal = require('antd/lib/modal');
7
6
  var AntUpload = require('antd/lib/upload');
8
- var compareVersions = require('compare-versions');
9
7
  var react = require('react');
10
8
  var AntButton = require('antd/lib/button');
11
9
  var AntSlider = require('antd/lib/slider');
@@ -18,12 +16,10 @@ const ROTATION_INITIAL = 0;
18
16
  const ROTATION_MIN = -180;
19
17
  const ROTATION_MAX = 180;
20
18
  const ROTATION_STEP = 1;
21
- const ASPECT_MIN = 0.5;
22
- const ASPECT_MAX = 2;
23
19
  const ASPECT_STEP = 0.01;
24
20
 
25
21
  const EasyCrop = react.forwardRef((props, ref) => {
26
- const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps, } = props;
22
+ const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, minAspect, maxAspect, cropShape, showGrid, cropperProps, } = props;
27
23
  const [zoom, setZoom] = react.useState(ZOOM_INITIAL);
28
24
  const [rotation, setRotation] = react.useState(ROTATION_INITIAL);
29
25
  const [aspect, setAspect] = react.useState(ASPECT_INITIAL);
@@ -55,7 +51,7 @@ const EasyCrop = react.forwardRef((props, ref) => {
55
51
  cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
56
52
  containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
57
53
  mediaClassName: `${PREFIX}-media`,
58
- } })), zoomSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom - ZOOM_STEP).toFixed(1)), 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).toFixed(1)), 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).toFixed(2)), 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).toFixed(2)), 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 }))] }));
54
+ } })), zoomSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom - ZOOM_STEP).toFixed(1)), 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).toFixed(1)), 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).toFixed(2)), disabled: aspect - ASPECT_STEP < minAspect, children: "\u2195" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: minAspect, max: maxAspect, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect + ASPECT_STEP).toFixed(2)), disabled: aspect + ASPECT_STEP > maxAspect, children: "\u2194" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsxRuntime.jsx(AntButton, { className: "[bottom:20px] [position:absolute]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
59
55
  });
60
56
  var EasyCrop$1 = react.memo(EasyCrop);
61
57
 
@@ -86,39 +82,11 @@ function styleInject(css, ref) {
86
82
  }
87
83
  }
88
84
 
89
- var css_248z = ".visible{visibility:visible}.grid{display:grid}.\\[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}.\\!\\[position\\:relative\\]{position:relative!important}.\\[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}";
85
+ var css_248z = ".\\[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}.\\!\\[position\\:relative\\]{position:relative!important}.\\[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
86
  styleInject(css_248z,{"insertAt":"top"});
91
87
 
92
- const openProp = compareVersions.compareVersions(antd.version, '4.23.0') === -1 ? 'visible' : 'open';
93
- const deprecate = (obj, old, now) => {
94
- if (old in obj) {
95
- console.error(`\`${old}\` is deprecated, please use \`${now}\` instead`);
96
- return obj[old];
97
- }
98
- return obj[now];
99
- };
100
88
  const ImgCrop = react.forwardRef((props, cropperRef) => {
101
- const { quality = 0.4, fillColor = 'white',
102
- // @ts-ignore
103
- zoomSlider: ZOOM_SLIDER = true,
104
- // @ts-ignore
105
- rotationSlider: ROTATION_SLIDER = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3,
106
- // @ts-ignore
107
- cropShape: CROP_SHAPE = 'rect',
108
- // @ts-ignore
109
- showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
110
- /**
111
- * init
112
- */
113
- const zoomSlider = deprecate(props, 'zoom', 'zoomSlider') || true;
114
- const rotationSlider = deprecate(props, 'rotate', 'rotationSlider') || false;
115
- const cropShape = deprecate(props, 'shape', 'cropShape') || 'rect';
116
- const showGrid = deprecate(props, 'grid', 'showGrid') || false;
117
- if ('onUploadFail' in props) {
118
- console.error(`\`onUploadFail\` is removed, because the only way it is called, is when the file is rejected by beforeUpload`);
119
- }
120
- deprecate(props, 'modalMaskTransitionName', 'modalProps.maskTransitionName');
121
- deprecate(props, 'modalTransitionName', 'modalProps.transitionName');
89
+ const { quality = 0.4, fillColor = 'white', zoomSlider = true, rotationSlider = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3, minAspect = 0.5, maxAspect = 2, cropShape = 'rect', showGrid = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
122
90
  const cb = react.useRef({});
123
91
  cb.current.onModalOk = onModalOk;
124
92
  cb.current.onModalCancel = onModalCancel;
@@ -290,7 +258,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
290
258
  const isCN = lang === 'zh-CN';
291
259
  const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
292
260
  const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
293
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getNewUpload(children), 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 }) })))] }));
261
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getNewUpload(children), modalImage && (jsxRuntime.jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { open: 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, minAspect: minAspect, maxAspect: maxAspect, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) })))] }));
294
262
  });
295
263
 
296
264
  module.exports = ImgCrop;
package/dist/antd-img-crop.d.ts CHANGED
@@ -15,9 +15,11 @@ type ImgCropProps = {
15
15
  aspect?: number;
16
16
  minZoom?: number;
17
17
  maxZoom?: number;
18
+ minAspect?: number;
19
+ maxAspect?: number;
18
20
  cropShape?: 'rect' | 'round';
19
21
  showGrid?: boolean;
20
- cropperProps?: Omit<CropperProps, 'image' | 'crop' | 'zoom' | 'rotation' | 'aspect' | 'minZoom' | 'maxZoom' | 'zoomWithScroll' | 'cropShape' | 'showGrid' | 'onCropChange' | 'onZoomChange' | 'onRotationChange' | 'onCropComplete' | 'classes'>;
22
+ cropperProps?: Omit<CropperProps, 'image' | 'crop' | 'zoom' | 'rotation' | 'aspect' | 'minZoom' | 'maxZoom' | 'minAspect' | 'maxAspect' | 'zoomWithScroll' | 'cropShape' | 'showGrid' | 'onCropChange' | 'onZoomChange' | 'onRotationChange' | 'onCropComplete' | 'classes'>;
21
23
  modalClassName?: string;
22
24
  modalTitle?: string;
23
25
  modalWidth?: number | string;
package/dist/antd-img-crop.esm.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import { __awaiter, __rest } from 'tslib';
2
2
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
- import { version } from 'antd';
4
3
  import AntModal from 'antd/es/modal';
5
4
  import AntUpload from 'antd/es/upload';
6
- import { compareVersions } from 'compare-versions';
7
5
  import { forwardRef, useState, useRef, useCallback, useImperativeHandle, memo, useMemo } from 'react';
8
6
  import AntButton from 'antd/es/button';
9
7
  import AntSlider from 'antd/es/slider';
@@ -16,12 +14,10 @@ const ROTATION_INITIAL = 0;
16
14
  const ROTATION_MIN = -180;
17
15
  const ROTATION_MAX = 180;
18
16
  const ROTATION_STEP = 1;
19
- const ASPECT_MIN = 0.5;
20
- const ASPECT_MAX = 2;
21
17
  const ASPECT_STEP = 0.01;
22
18
 
23
19
  const EasyCrop = forwardRef((props, ref) => {
24
- const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps, } = props;
20
+ const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, minAspect, maxAspect, cropShape, showGrid, cropperProps, } = props;
25
21
  const [zoom, setZoom] = useState(ZOOM_INITIAL);
26
22
  const [rotation, setRotation] = useState(ROTATION_INITIAL);
27
23
  const [aspect, setAspect] = useState(ASPECT_INITIAL);
@@ -53,7 +49,7 @@ const EasyCrop = forwardRef((props, ref) => {
53
49
  cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
54
50
  containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
55
51
  mediaClassName: `${PREFIX}-media`,
56
- } })), zoomSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom - ZOOM_STEP).toFixed(1)), 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).toFixed(1)), 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).toFixed(2)), 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).toFixed(2)), 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 }))] }));
52
+ } })), zoomSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom - ZOOM_STEP).toFixed(1)), 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).toFixed(1)), 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).toFixed(2)), disabled: aspect - ASPECT_STEP < minAspect, children: "\u2195" }), jsx(AntSlider, { className: sliderClass, min: minAspect, max: maxAspect, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect + ASPECT_STEP).toFixed(2)), disabled: aspect + ASPECT_STEP > maxAspect, children: "\u2194" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsx(AntButton, { className: "[bottom:20px] [position:absolute]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
57
53
  });
58
54
  var EasyCrop$1 = memo(EasyCrop);
59
55
 
@@ -84,39 +80,11 @@ function styleInject(css, ref) {
84
80
  }
85
81
  }
86
82
 
87
- var css_248z = ".visible{visibility:visible}.grid{display:grid}.\\[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}.\\!\\[position\\:relative\\]{position:relative!important}.\\[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}";
83
+ var css_248z = ".\\[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}.\\!\\[position\\:relative\\]{position:relative!important}.\\[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
84
  styleInject(css_248z,{"insertAt":"top"});
89
85
 
90
- const openProp = compareVersions(version, '4.23.0') === -1 ? 'visible' : 'open';
91
- const deprecate = (obj, old, now) => {
92
- if (old in obj) {
93
- console.error(`\`${old}\` is deprecated, please use \`${now}\` instead`);
94
- return obj[old];
95
- }
96
- return obj[now];
97
- };
98
86
  const ImgCrop = forwardRef((props, cropperRef) => {
99
- const { quality = 0.4, fillColor = 'white',
100
- // @ts-ignore
101
- zoomSlider: ZOOM_SLIDER = true,
102
- // @ts-ignore
103
- rotationSlider: ROTATION_SLIDER = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3,
104
- // @ts-ignore
105
- cropShape: CROP_SHAPE = 'rect',
106
- // @ts-ignore
107
- showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
108
- /**
109
- * init
110
- */
111
- const zoomSlider = deprecate(props, 'zoom', 'zoomSlider') || true;
112
- const rotationSlider = deprecate(props, 'rotate', 'rotationSlider') || false;
113
- const cropShape = deprecate(props, 'shape', 'cropShape') || 'rect';
114
- const showGrid = deprecate(props, 'grid', 'showGrid') || false;
115
- if ('onUploadFail' in props) {
116
- console.error(`\`onUploadFail\` is removed, because the only way it is called, is when the file is rejected by beforeUpload`);
117
- }
118
- deprecate(props, 'modalMaskTransitionName', 'modalProps.maskTransitionName');
119
- deprecate(props, 'modalTransitionName', 'modalProps.transitionName');
87
+ const { quality = 0.4, fillColor = 'white', zoomSlider = true, rotationSlider = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3, minAspect = 0.5, maxAspect = 2, cropShape = 'rect', showGrid = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
120
88
  const cb = useRef({});
121
89
  cb.current.onModalOk = onModalOk;
122
90
  cb.current.onModalCancel = onModalCancel;
@@ -288,7 +256,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
288
256
  const isCN = lang === 'zh-CN';
289
257
  const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
290
258
  const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
291
- return (jsxs(Fragment, { children: [getNewUpload(children), 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 }) })))] }));
259
+ return (jsxs(Fragment, { children: [getNewUpload(children), modalImage && (jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { open: 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, minAspect: minAspect, maxAspect: maxAspect, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) })))] }));
292
260
  });
293
261
 
294
262
  export { ImgCrop as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "antd-img-crop",
3
- "version": "4.22.0",
3
+ "version": "4.24.0",
4
4
  "description": "An image cropper for Ant Design Upload",
5
5
  "keywords": [
6
6
  "react",
@@ -22,43 +22,42 @@
22
22
  "files": [
23
23
  "dist"
24
24
  ],
25
- "scripts": {
26
- "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript",
27
- "u": "pnpm update --latest && pnpm add eslint@8.57.0"
28
- },
29
25
  "peerDependencies": {
30
26
  "antd": ">=4.0.0",
31
27
  "react": ">=16.8.0",
32
28
  "react-dom": ">=16.8.0"
33
29
  },
34
30
  "dependencies": {
35
- "compare-versions": "6.1.0",
36
- "react-easy-crop": "^5.0.7",
37
- "tslib": "^2.6.2"
31
+ "react-easy-crop": "^5.2.0",
32
+ "tslib": "^2.8.1"
38
33
  },
39
34
  "devDependencies": {
40
- "@rollup/plugin-replace": "^5.0.5",
41
- "@rollup/plugin-typescript": "^11.1.6",
42
- "@types/node": "^20.12.11",
43
- "@types/react": "^18.3.2",
44
- "@types/react-dom": "^18.3.0",
45
- "@vitejs/plugin-react": "^4.2.1",
46
- "antd": "^5.17.0",
47
- "autoprefixer": "^10.4.19",
48
- "eslint": "^8.57.0",
35
+ "@rollup/plugin-replace": "^6.0.2",
36
+ "@rollup/plugin-typescript": "^12.1.2",
37
+ "@types/node": "^22.10.2",
38
+ "@types/react": "18.3.18",
39
+ "@types/react-dom": "18.3.5",
40
+ "@vitejs/plugin-react": "^4.3.4",
41
+ "antd": "^5.22.5",
42
+ "autoprefixer": "^10.4.20",
43
+ "eslint": "^8.57.1",
49
44
  "eslint-config-prettier": "^9.1.0",
50
45
  "eslint-config-react-app": "^7.0.1",
51
- "postcss": "^8.4.38",
52
- "prettier": "^3.2.5",
53
- "prettier-plugin-organize-imports": "^3.2.4",
54
- "prettier-plugin-tailwindcss": "^0.5.14",
55
- "react": "^18.3.1",
56
- "react-dom": "^18.3.1",
57
- "rollup": "4.17.2",
58
- "rollup-plugin-dts": "^6.1.0",
46
+ "postcss": "^8.4.49",
47
+ "prettier": "^3.4.2",
48
+ "prettier-plugin-organize-imports": "^4.1.0",
49
+ "prettier-plugin-tailwindcss": "^0.6.9",
50
+ "react": "18.3.1",
51
+ "react-dom": "18.3.1",
52
+ "rollup": "4.29.0",
53
+ "rollup-plugin-dts": "^6.1.1",
59
54
  "rollup-plugin-postcss": "^4.0.2",
60
- "tailwindcss": "^3.4.3",
61
- "typescript": "^5.4.5",
62
- "vite": "^5.2.11"
55
+ "tailwindcss": "^3.4.17",
56
+ "typescript": "^5.7.2",
57
+ "vite": "^6.0.5"
58
+ },
59
+ "scripts": {
60
+ "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript",
61
+ "u": "pnpm update --latest !eslint !react !react-dom !@types/react !@types/react-dom"
63
62
  }
64
- }
63
+ }