antd-img-crop 4.23.0 → 4.25.0

package/README.md

@@ -50,14 +50,16 @@ const Demo = () => (
 | -------------- | ---------- | -------------- | -------------------------------------------------------------------------------- |
 | quality        | `number`   | `0.4`          | Cropped image quality, `0` to `1`                                                |
 | fillColor      | `string`   | `'white'`      | Fill color for cropped image                                                     |
-| zoomSlider     | `boolean`  | `true`         | Enable zoom adjustment                                                           |
-| rotationSlider | `boolean`  | `false`        | Enable rotation adjustment                                                       |
-| aspectSlider   | `boolean`  | `false`        | Enable aspect adjustment                                                         |
-| showReset      | `boolean`  | `false`        | Show reset button to reset zoom rotation aspect                                  |
+| zoomSlider     | `boolean`  | `true`         | Enable zoom                                                                      |
+| rotationSlider | `boolean`  | `false`        | Enable rotation                                                                  |
+| aspectSlider   | `boolean`  | `false`        | Enable aspect                                                                    |
+| showReset      | `boolean`  | `false`        | Show reset button to reset zoom & rotation & aspect                              |
 | resetText      | `string`   | `Reset`        | Reset button text                                                                |
 | aspect         | `number`   | `1 / 1`        | Aspect of crop area , `width / height`                                           |
-| minZoom        | `number`   | `1`            | Minimum zoom factor                                                              |
-| maxZoom        | `number`   | `3`            | Maximum zoom factor                                                              |
+| minZoom        | `number`   | `1`            | Minimum zoom                                                                     |
+| maxZoom        | `number`   | `3`            | Maximum zoom                                                                     |
+| minAspect      | `number`   | `0.5`          | Minimum aspect                                                                   |
+| maxAspect      | `number`   | `2`            | Maximum aspect                                                                   |
 | cropShape      | `string`   | `'rect'`       | Shape of crop area, `'rect'` or `'round'`                                        |
 | showGrid       | `boolean`  | `false`        | Show grid of crop area (third-lines)                                             |
 | cropperProps   | `object`   | -              | [react-easy-crop] props (\* existing props cannot be overridden)                 |

package/README.zh-CN.md

@@ -50,14 +50,16 @@ const Demo = () => (
 | -------------- | -------------------- | ------------ | ---------------------------------------------------------------- |
 | quality        | `number`             | `0.4`        | 裁切图片质量，`0` 到 `1` 之间                                    |
 | fillColor      | `string`             | `'white'`    | 裁切图像填充色                                                   |
-| zoomSlider     | `boolean`            | `true`       | 图片缩放控制                                                     |
-| rotationSlider | `boolean`            | `false`      | 图片旋转控制                                                     |
-| aspectSlider   | `boolean`            | `false`      | 裁切比率控制                                                     |
-| showReset      | `boolean`            | `false`      | 显示重置按钮，重置缩放旋转及比率                                 |
+| zoomSlider     | `boolean`            | `true`       | 允许缩放                                                         |
+| rotationSlider | `boolean`            | `false`      | 允许旋转                                                         |
+| aspectSlider   | `boolean`            | `false`      | 允许调整裁切比                                                   |
+| showReset      | `boolean`            | `false`      | 显示重置按钮，重置缩放 & 旋转 & 裁切比                           |
 | resetText      | `string`             | `重置`       | 重置按钮文字                                                     |
 | aspect         | `number`             | `1 / 1`      | 裁切区域宽高比，`width / height`                                 |
-| minZoom        | `number`             | `1`          | 最小缩放倍数                                                     |
-| maxZoom        | `number`             | `3`          | 最大缩放倍数                                                     |
+| minZoom        | `number`             | `1`          | 最小缩放                                                         |
+| maxZoom        | `number`             | `3`          | 最大缩放                                                         |
+| minAspect      | `number`             | `0.5`        | 最小裁切比                                                       |
+| maxAspect      | `number`             | `2`          | 最大裁切比                                                       |
 | cropShape      | `string`             | `'rect'`     | 裁切区域形状，`'rect'` 或 `'round'`                              |
 | showGrid       | `boolean`            | `false`      | 显示裁切区域网格（九宫格）                                       |
 | cropperProps   | `object`             | -            | [react-easy-crop] 的 props（\* 已有 props 无法重写）             |

package/dist/antd-img-crop.cjs.js

@@ -16,22 +16,25 @@ const ROTATION_INITIAL = 0;
 const ROTATION_MIN = -180;
 const ROTATION_MAX = 180;
 const ROTATION_STEP = 1;
-const ASPECT_MIN = 0.5;
-const ASPECT_MAX = 2;
 const ASPECT_STEP = 0.01;
 
 const EasyCrop = react.forwardRef((props, ref) => {
-    const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps, } = props;
+    const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: propAspect, minZoom, maxZoom, minAspect, maxAspect, cropShape, showGrid, cropperProps, } = props;
     const [zoom, setZoom] = react.useState(ZOOM_INITIAL);
     const [rotation, setRotation] = react.useState(ROTATION_INITIAL);
-    const [aspect, setAspect] = react.useState(ASPECT_INITIAL);
+    const [aspect, setAspect] = react.useState(propAspect);
+    const prevPropAspect = react.useRef(propAspect);
+    if (prevPropAspect.current !== propAspect) {
+        prevPropAspect.current = propAspect;
+        setAspect(propAspect);
+    }
     const isResetActive = zoom !== ZOOM_INITIAL ||
         rotation !== ROTATION_INITIAL ||
-        aspect !== ASPECT_INITIAL;
+        aspect !== propAspect;
     const onReset = () => {
         setZoom(ZOOM_INITIAL);
         setRotation(ROTATION_INITIAL);
-        setAspect(ASPECT_INITIAL);
+        setAspect(propAspect);
     };
     const [crop, onCropChange] = react.useState({ x: 0, y: 0 });
     const cropPixelsRef = react.useRef({ width: 0, height: 0, x: 0, y: 0 });
@@ -53,7 +56,7 @@ const EasyCrop = react.forwardRef((props, ref) => {
                 cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
                     containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
                     mediaClassName: `${PREFIX}-media`,
-                } })), 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 }))] }));
+                } })), 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: "[position:absolute] [bottom:20px]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
 });
 var EasyCrop$1 = react.memo(EasyCrop);
 
@@ -84,11 +87,11 @@ function styleInject(css, ref) {
   }
 }
 
-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}";
+var css_248z = "/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */.visible{visibility:visible}.\\!\\[position\\:relative\\]{position:relative!important}.\\[position\\:absolute\\]{position:absolute}.\\[bottom\\:20px\\]{bottom:20px}.container{width:100%}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[display\\:flex\\]{display:flex}.grid{display:grid}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.\\[width\\:100\\%\\]{width:100%}.\\[flex\\:1\\]{flex:1}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[align-items\\:center\\]{align-items:center}.\\[justify-content\\:center\\]{justify-content:center}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.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}}";
 styleInject(css_248z,{"insertAt":"top"});
 
 const ImgCrop = react.forwardRef((props, cropperRef) => {
-    const { quality = 0.4, fillColor = 'white', zoomSlider = true, rotationSlider = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3, cropShape = 'rect', showGrid = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
+    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;
     const cb = react.useRef({});
     cb.current.onModalOk = onModalOk;
     cb.current.onModalCancel = onModalCancel;
@@ -146,8 +149,8 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
      * upload
      */
     const [modalImage, setModalImage] = react.useState('');
-    const onCancel = react.useRef();
-    const onOk = react.useRef();
+    const onCancel = react.useRef(undefined);
+    const onOk = react.useRef(undefined);
     const runBeforeUpload = react.useCallback((_a) => tslib.__awaiter(void 0, [_a], void 0, function* ({ beforeUpload, file, resolve, reject, }) {
         const rawFile = file;
         if (typeof beforeUpload !== 'function') {
@@ -260,7 +263,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
     const isCN = lang === 'zh-CN';
     const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
     const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
-    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, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) })))] }));
+    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 }) })))] }));
 });
 
 module.exports = ImgCrop;

package/dist/antd-img-crop.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
+import { JSX } from 'react';
 import Cropper, { CropperProps } from 'react-easy-crop';
-import { ModalProps, UploadProps } from 'antd';
+import { UploadProps, ModalProps } from 'antd';
 
 type BeforeUpload = Exclude<UploadProps['beforeUpload'], undefined>;
 type BeforeUploadReturnType = ReturnType<BeforeUpload>;
@@ -15,9 +16,11 @@ type ImgCropProps = {
     aspect?: number;
     minZoom?: number;
     maxZoom?: number;
+    minAspect?: number;
+    maxAspect?: number;
     cropShape?: 'rect' | 'round';
     showGrid?: boolean;
-    cropperProps?: Omit<CropperProps, 'image' | 'crop' | 'zoom' | 'rotation' | 'aspect' | 'minZoom' | 'maxZoom' | 'zoomWithScroll' | 'cropShape' | 'showGrid' | 'onCropChange' | 'onZoomChange' | 'onRotationChange' | 'onCropComplete' | 'classes'>;
+    cropperProps?: Omit<CropperProps, 'image' | 'crop' | 'zoom' | 'rotation' | 'aspect' | 'minZoom' | 'maxZoom' | 'minAspect' | 'maxAspect' | 'zoomWithScroll' | 'cropShape' | 'showGrid' | 'onCropChange' | 'onZoomChange' | 'onRotationChange' | 'onCropComplete' | 'classes' | 'keyboardStep'> & Partial<Pick<CropperProps, 'keyboardStep'>>;
     modalClassName?: string;
     modalTitle?: string;
     modalWidth?: number | string;
@@ -32,4 +35,5 @@ type ImgCropProps = {
 
 declare const ImgCrop: react.ForwardRefExoticComponent<ImgCropProps & react.RefAttributes<Cropper>>;
 
-export { type ImgCropProps, ImgCrop as default };
+export { ImgCrop as default };
+export type { ImgCropProps };

package/dist/antd-img-crop.esm.js

@@ -14,22 +14,25 @@ const ROTATION_INITIAL = 0;
 const ROTATION_MIN = -180;
 const ROTATION_MAX = 180;
 const ROTATION_STEP = 1;
-const ASPECT_MIN = 0.5;
-const ASPECT_MAX = 2;
 const ASPECT_STEP = 0.01;
 
 const EasyCrop = forwardRef((props, ref) => {
-    const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps, } = props;
+    const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: propAspect, minZoom, maxZoom, minAspect, maxAspect, cropShape, showGrid, cropperProps, } = props;
     const [zoom, setZoom] = useState(ZOOM_INITIAL);
     const [rotation, setRotation] = useState(ROTATION_INITIAL);
-    const [aspect, setAspect] = useState(ASPECT_INITIAL);
+    const [aspect, setAspect] = useState(propAspect);
+    const prevPropAspect = useRef(propAspect);
+    if (prevPropAspect.current !== propAspect) {
+        prevPropAspect.current = propAspect;
+        setAspect(propAspect);
+    }
     const isResetActive = zoom !== ZOOM_INITIAL ||
         rotation !== ROTATION_INITIAL ||
-        aspect !== ASPECT_INITIAL;
+        aspect !== propAspect;
     const onReset = () => {
         setZoom(ZOOM_INITIAL);
         setRotation(ROTATION_INITIAL);
-        setAspect(ASPECT_INITIAL);
+        setAspect(propAspect);
     };
     const [crop, onCropChange] = useState({ x: 0, y: 0 });
     const cropPixelsRef = useRef({ width: 0, height: 0, x: 0, y: 0 });
@@ -51,7 +54,7 @@ const EasyCrop = forwardRef((props, ref) => {
                 cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
                     containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
                     mediaClassName: `${PREFIX}-media`,
-                } })), 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 }))] }));
+                } })), 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: "[position:absolute] [bottom:20px]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
 });
 var EasyCrop$1 = memo(EasyCrop);
 
@@ -82,11 +85,11 @@ function styleInject(css, ref) {
   }
 }
 
-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}";
+var css_248z = "/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */.visible{visibility:visible}.\\!\\[position\\:relative\\]{position:relative!important}.\\[position\\:absolute\\]{position:absolute}.\\[bottom\\:20px\\]{bottom:20px}.container{width:100%}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[display\\:flex\\]{display:flex}.grid{display:grid}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.\\[width\\:100\\%\\]{width:100%}.\\[flex\\:1\\]{flex:1}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[align-items\\:center\\]{align-items:center}.\\[justify-content\\:center\\]{justify-content:center}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.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}}";
 styleInject(css_248z,{"insertAt":"top"});
 
 const ImgCrop = forwardRef((props, cropperRef) => {
-    const { quality = 0.4, fillColor = 'white', zoomSlider = true, rotationSlider = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3, cropShape = 'rect', showGrid = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
+    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;
     const cb = useRef({});
     cb.current.onModalOk = onModalOk;
     cb.current.onModalCancel = onModalCancel;
@@ -144,8 +147,8 @@ const ImgCrop = forwardRef((props, cropperRef) => {
      * upload
      */
     const [modalImage, setModalImage] = useState('');
-    const onCancel = useRef();
-    const onOk = useRef();
+    const onCancel = useRef(undefined);
+    const onOk = useRef(undefined);
     const runBeforeUpload = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ beforeUpload, file, resolve, reject, }) {
         const rawFile = file;
         if (typeof beforeUpload !== 'function') {
@@ -258,7 +261,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
     const isCN = lang === 'zh-CN';
     const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
     const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
-    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, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) })))] }));
+    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 }) })))] }));
 });
 
 export { ImgCrop as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-img-crop",
-  "version": "4.23.0",
+  "version": "4.25.0",
   "description": "An image cropper for Ant Design Upload",
   "keywords": [
     "react",
@@ -23,8 +23,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript",
-    "u": "pnpm update --latest && pnpm add eslint@8.57.0"
+    "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript"
   },
   "peerDependencies": {
     "antd": ">=4.0.0",
@@ -32,32 +31,42 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "react-easy-crop": "^5.0.8",
-    "tslib": "^2.6.3"
+    "react-easy-crop": "^5.4.1",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^5.0.7",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/node": "^22.3.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.20.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "@eslint/compat": "^1.2.8",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.25.1",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@types/node": "^22.15.3",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "@vitejs/plugin-react": "^4.4.1",
+    "antd": "^5.24.9",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.25.1",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-config-react-app": "^7.0.1",
-    "postcss": "^8.4.41",
-    "prettier": "^3.3.3",
-    "prettier-plugin-organize-imports": "^4.0.0",
-    "prettier-plugin-tailwindcss": "^0.6.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup": "4.20.0",
-    "rollup-plugin-dts": "^6.1.1",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "rollup": "4.40.1",
+    "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.0"
+    "tailwindcss": "^4.1.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.3"
   }
 }