antd-img-crop 4.11.1 → 4.12.1

package/README.md

@@ -37,30 +37,29 @@ const Demo = () => (
 
 ## Props
 
-| Prop           | Type       | Default        | Description                                                       |
-| -------------- | ---------- | -------------- | ----------------------------------------------------------------- |
-| quality        | `number`   | `0.4`          | Cropped image quality, `0` to `1`                                 |
-| fillColor      | `string`   | `'white'`      | Fill color when cropped image smaller than canvas                 |
-| zoomSlider     | `boolean`  | `true`         | Enable zoom adjustment for image                                  |
-| rotationSlider | `boolean`  | `false`        | Enable rotation adjustment for image                              |
-| aspectSlider   | `boolean`  | `false`        | Enable aspect adjustment for crop area                            |
-| showReset      | `boolean`  | `false`        | show a reset button to reset zoom, rotation, aspect               |
-| aspect         | `number`   | `1 / 1`        | Aspect of crop area , `width / height`                            |
-| minZoom        | `number`   | `1`            | Minimum zoom factor                                               |
-| maxZoom        | `number`   | `3`            | Maximum zoom factor                                               |
-| 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)  |
-| modalClassName | `string`   | `''`           | Provide your own classname for the Modal container                |
-| modalTitle     | `string`   | `'Edit image'` | Title of modal                                                    |
-| modalWidth     | `number`   | `string`       | Width of modal in pixels number or percentages                    |
-| modalOk        | `string`   |                | Text of modal confirm button                                      |
-| modalCancel    | `string`   |                | Text of modal cancel button                                       |
-| onModalOk      | `function` | -              | Call when click modal confirm button                              |
-| onModalCancel  | `function` | -              | Call when click modal mask, top right "x", or cancel button       |
-| modalProps     | `object`   |                | [Ant Design Modal] props (\* existing props cannot be overridden) |
-| beforeCrop     | `function` | -              | Call before modal open, if return `false`, it'll not open         |
-| onUploadFail   | `function` | -              | Call when upload failed                                           |
+| Prop           | Type       | Default        | Description                                                         |
+| -------------- | ---------- | -------------- | ------------------------------------------------------------------- |
+| quality        | `number`   | `0.4`          | Cropped image quality, `0` to `1`                                   |
+| fillColor      | `string`   | `'white'`      | Fill color when cropped image smaller than canvas                   |
+| zoomSlider     | `boolean`  | `true`         | Enable zoom adjustment for image                                    |
+| rotationSlider | `boolean`  | `false`        | Enable rotation adjustment for image                                |
+| aspectSlider   | `boolean`  | `false`        | Enable aspect adjustment for crop area                              |
+| showReset      | `boolean`  | `false`        | show a reset button to reset zoom, rotation, aspect                 |
+| aspect         | `number`   | `1 / 1`        | Aspect of crop area , `width / height`                              |
+| minZoom        | `number`   | `1`            | Minimum zoom factor                                                 |
+| maxZoom        | `number`   | `3`            | Maximum zoom factor                                                 |
+| 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)    |
+| modalClassName | `string`   | `''`           | Provide your own classname for the Modal container                  |
+| modalTitle     | `string`   | `'Edit image'` | Title of modal                                                      |
+| modalWidth     | `number`   | `string`       | Width of modal in pixels number or percentages                      |
+| modalOk        | `string`   |                | Text of modal confirm button                                        |
+| modalCancel    | `string`   |                | Text of modal cancel button                                         |
+| onModalOk      | `function` | -              | Call when click modal confirm button                                |
+| onModalCancel  | `function` | -              | Call when click modal mask, top right "x", or cancel button         |
+| modalProps     | `object`   |                | [Ant Design Modal] props (\* existing props cannot be overridden)   |
+| beforeCrop     | `function` | -              | Call before modal open, if return `false` or reject, it'll not open |
 
 ## FAQ
 

package/README.zh-CN.md

@@ -37,30 +37,29 @@ const Demo = () => (
 
 ## Props
 
-| 属性           | 类型                 | 默认         | 说明                                                  |
-| -------------- | -------------------- | ------------ | ----------------------------------------------------- |
-| quality        | `number`             | `0.4`        | 裁切图片质量，`0` 到 `1` 之间                         |
-| fillColor      | `string`             | `'white'`    | 裁切图像小于画布时的填充颜色                          |
-| zoomSlider     | `boolean`            | `true`       | 启用图片缩放调整                                      |
-| rotationSlider | `boolean`            | `false`      | 启用图片旋转调整                                      |
-| aspectSlider   | `boolean`            | `false`      | 启用裁切比率调整                                      |
-| showReset      | `boolean`            | `false`      | 显示重置按钮，用以重置缩放、旋转、比率                |
-| aspect         | `number`             | `1 / 1`      | 裁切区域宽高比，`width / height`                      |
-| minZoom        | `number`             | `1`          | 最小缩放倍数                                          |
-| maxZoom        | `number`             | `3`          | 最大缩放倍数                                          |
-| cropShape      | `string`             | `'rect'`     | 裁切区域形状，`'rect'` 或 `'round'`                   |
-| showGrid       | `boolean`            | `false`      | 显示裁切区域网格（九宫格）                            |
-| cropperProps   | `object`             | -            | [react-easy-crop] 的 props（\* 已有 props 无法重写）  |
-| modalClassName | `string`             | `''`         | 为 Modal 容器提供您自己的类名                         |
-| modalTitle     | `string`             | `'编辑图片'` | 弹窗标题                                              |
-| modalWidth     | `number` \| `string` |              | 弹窗宽度，`px` 的数值或百分比                         |
-| modalOk        | `string`             |              | 弹窗确定按钮文字                                      |
-| modalCancel    | `string`             |              | 弹窗取消按钮文字                                      |
-| onModalOK      | `function`           | -            | 点击弹窗确定回调                                      |
-| onModalCancel  | `function`           | -            | 点击弹窗遮罩层、右上角叉、取消的回调                  |
-| modalProps     | `object`             |              | [Ant Design Modal] 的 props（\* 已有 props 无法重写） |
-| beforeCrop     | `function`           | -            | 弹窗打开前调用，若返回 `false`，弹框将不会打开        |
-| onUploadFail   | `function`           | -            | 上传失败时的回调                                      |
+| 属性           | 类型                 | 默认         | 说明                                                     |
+| -------------- | -------------------- | ------------ | -------------------------------------------------------- |
+| quality        | `number`             | `0.4`        | 裁切图片质量，`0` 到 `1` 之间                            |
+| fillColor      | `string`             | `'white'`    | 裁切图像小于画布时的填充颜色                             |
+| zoomSlider     | `boolean`            | `true`       | 启用图片缩放调整                                         |
+| rotationSlider | `boolean`            | `false`      | 启用图片旋转调整                                         |
+| aspectSlider   | `boolean`            | `false`      | 启用裁切比率调整                                         |
+| showReset      | `boolean`            | `false`      | 显示重置按钮，用以重置缩放、旋转、比率                   |
+| aspect         | `number`             | `1 / 1`      | 裁切区域宽高比，`width / height`                         |
+| minZoom        | `number`             | `1`          | 最小缩放倍数                                             |
+| maxZoom        | `number`             | `3`          | 最大缩放倍数                                             |
+| cropShape      | `string`             | `'rect'`     | 裁切区域形状，`'rect'` 或 `'round'`                      |
+| showGrid       | `boolean`            | `false`      | 显示裁切区域网格（九宫格）                               |
+| cropperProps   | `object`             | -            | [react-easy-crop] 的 props（\* 已有 props 无法重写）     |
+| modalClassName | `string`             | `''`         | 为 Modal 容器提供您自己的类名                            |
+| modalTitle     | `string`             | `'编辑图片'` | 弹窗标题                                                 |
+| modalWidth     | `number` \| `string` |              | 弹窗宽度，`px` 的数值或百分比                            |
+| modalOk        | `string`             |              | 弹窗确定按钮文字                                         |
+| modalCancel    | `string`             |              | 弹窗取消按钮文字                                         |
+| onModalOK      | `function`           | -            | 点击弹窗确定回调                                         |
+| onModalCancel  | `function`           | -            | 点击弹窗遮罩层、右上角叉、取消的回调                     |
+| modalProps     | `object`             |              | [Ant Design Modal] 的 props（\* 已有 props 无法重写）    |
+| beforeCrop     | `function`           | -            | 弹窗打开前调用，若返回 `false` 或 reject，弹框将不会打开 |
 
 ## FAQ
 

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

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var antd = require('antd');
 var AntModal = require('antd/lib/modal');
+var AntUpload = require('antd/lib/upload');
 var compareVersions = require('compare-versions');
 var Cropper = require('react-easy-crop');
 var AntButton = require('antd/lib/button');
@@ -22,7 +23,7 @@ const ASPECT_MAX = 2;
 const ASPECT_STEP = 0.01;
 
 const EasyCrop = react.forwardRef((props, ref) => {
-    const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, image, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps, isCN, } = props;
+    const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps, isCN, } = props;
     const [zoom, setZoom] = react.useState(ZOOM_INITIAL);
     const [rotation, setRotation] = react.useState(ROTATION_INITIAL);
     const [aspect, setAspect] = react.useState(ASPECT_INITIAL);
@@ -40,22 +41,21 @@ const EasyCrop = react.forwardRef((props, ref) => {
         cropPixelsRef.current = croppedAreaPixels;
     }, []);
     react.useImperativeHandle(ref, () => ({
-        setZoom,
         rotation,
-        setRotation,
         cropPixelsRef,
+        onReset,
     }));
-    const wrapperClass = 'flex items-center w-3/5 mx-auto';
-    const buttonClass = 'flex items-center justify-center w-8 h-8 bg-transparent border-0 font-[inherit] text-[18px] cursor-pointer disabled:opacity-20 disabled:cursor-default';
-    const sliderClass = 'flex-1 mx-2';
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Cropper, Object.assign({}, cropperProps, { ref: cropperRef, image: image, crop: crop, 
+    const wrapperClass = '[display:flex] [align-items:center] [width:60%] [margin-inline:auto]';
+    const buttonClass = '[display:flex] [align-items:center] [justify-content:center] [height:32px] [width:32px] [background:transparent] [border:0] [font-family:inherit] [font-size:18px] [cursor:pointer] disabled:[opacity:20%] disabled:[cursor:default]';
+    const sliderClass = '[flex:1]';
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Cropper, Object.assign({}, cropperProps, { ref: cropperRef, image: modalImage, crop: crop, 
                 //
                 zoom: zoom, rotation: rotation, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, zoomWithScroll: zoomSlider, 
                 //
                 cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
-                    containerClassName: `${PREFIX}-container !relative w-full h-[40vh] [&~section:first-of-type]:mt-4 [&~section:last-of-type]:mb-4`,
+                    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", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}` }, { children: [jsxRuntime.jsx("button", Object.assign({ 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", Object.assign({ className: buttonClass, onClick: () => setZoom(zoom + ZOOM_STEP), disabled: zoom + ZOOM_STEP > maxZoom }, { children: "\uFF0B" }))] }))), rotationSlider && (jsxRuntime.jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${buttonClass} !text-[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", Object.assign({ className: `${buttonClass} !text-[16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX }, { children: "\u21BB" }))] }))), aspectSlider && (jsxRuntime.jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}` }, { children: [jsxRuntime.jsx("button", Object.assign({ 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", Object.assign({ className: buttonClass, onClick: () => setAspect(aspect + ASPECT_STEP), disabled: aspect + ASPECT_STEP > ASPECT_MAX }, { children: "\u2194\uFE0F" }))] }))), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsxRuntime.jsx(AntButton, Object.assign({ className: "absolute bottom-[20px]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset }, { children: isCN ? '重置' : 'Reset' })))] }));
+                } })), zoomSlider && (jsxRuntime.jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}` }, { children: [jsxRuntime.jsx("button", Object.assign({ 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", Object.assign({ className: buttonClass, onClick: () => setZoom(zoom + ZOOM_STEP), disabled: zoom + ZOOM_STEP > maxZoom }, { children: "\uFF0B" }))] }))), rotationSlider && (jsxRuntime.jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}` }, { children: [jsxRuntime.jsx("button", Object.assign({ 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", Object.assign({ className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX }, { children: "\u21BB" }))] }))), aspectSlider && (jsxRuntime.jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}` }, { children: [jsxRuntime.jsx("button", Object.assign({ 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", Object.assign({ className: buttonClass, onClick: () => setAspect(aspect + ASPECT_STEP), disabled: aspect + ASPECT_STEP > ASPECT_MAX }, { children: "\u2194\uFE0F" }))] }))), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsxRuntime.jsx(AntButton, Object.assign({ className: "[position:absolute] [bottom:20px]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset }, { children: isCN ? '重置' : 'Reset' })))] }));
 });
 var EasyCrop$1 = react.memo(EasyCrop);
 
@@ -86,7 +86,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.absolute{position:absolute}.\\!relative{position:relative!important}.bottom-\\[20px\\]{bottom:20px}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.grid{display:grid}.h-8{height:2rem}.h-\\[40vh\\]{height:40vh}.w-3\\/5{width:60%}.w-8{width:2rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.border-0{border-width:0}.bg-transparent{background-color:transparent}.font-\\[inherit\\]{font-family:inherit}.\\!text-\\[16px\\]{font-size:16px!important}.text-\\[18px\\]{font-size:18px}.disabled\\:cursor-default:disabled{cursor:default}.disabled\\:opacity-20:disabled{opacity:.2}.\\[\\&\\~section\\:first-of-type\\]\\:mt-4~section:first-of-type{margin-top:1rem}.\\[\\&\\~section\\:last-of-type\\]\\:mb-4~section:last-of-type{margin-bottom:1rem}";
+var css_248z = ".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.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}";
 styleInject(css_248z);
 
 const openKey = compareVersions.compareVersions(antd.version, '4.23.0') === -1 ? 'visible' : 'open';
@@ -106,96 +106,36 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
     // @ts-ignore
     cropShape: CROP_SHAPE = 'rect', 
     // @ts-ignore
-    showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, showReset = false, onModalOk, onModalCancel, modalProps, beforeCrop, onUploadFail, children, } = props;
+    showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, showReset = false, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
+    /**
+     * init
+     */
     const zoomSlider = deprecate(props, 'zoom', 'zoomSlider') || true;
     const rotationSlider = deprecate(props, 'rotate', 'rotationSlider') || false;
     const cropShape = deprecate(props, 'shape', 'cropShape') || 'rect';
     const showGrid = deprecate(props, 'grid', 'showGrid') || false;
+    if ('onUploadFail' in props) {
+        console.error(`\`onUploadFail\` is removed, because the only way it is called, is when the file is rejected by beforeUpload`);
+    }
     deprecate(props, 'modalMaskTransitionName', 'modalProps.maskTransitionName');
     deprecate(props, 'modalTransitionName', 'modalProps.transitionName');
     const cb = react.useRef({});
     cb.current.onModalOk = onModalOk;
     cb.current.onModalCancel = onModalCancel;
     cb.current.beforeCrop = beforeCrop;
-    cb.current.onUploadFail = onUploadFail;
-    /**
-     * upload
-     */
-    const [image, setImage] = react.useState('');
-    const fileRef = react.useRef({});
-    const beforeUploadRef = react.useRef();
-    const resolveRef = react.useRef(() => { });
-    const rejectRef = react.useRef(() => { });
-    const uploadComponent = react.useMemo(() => {
-        const upload = Array.isArray(children) ? children[0] : children;
-        const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps = tslib.__rest(_a, ["beforeUpload", "accept"]);
-        beforeUploadRef.current = beforeUpload;
-        return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: (file, fileList) => {
-                    return new Promise((resolve, reject) => tslib.__awaiter(void 0, void 0, void 0, function* () {
-                        if (typeof cb.current.beforeCrop === 'function') {
-                            const shouldCrop = yield cb.current.beforeCrop(file, fileList);
-                            if (!shouldCrop) {
-                                return reject();
-                            }
-                        }
-                        fileRef.current = file;
-                        resolveRef.current = (newFile) => {
-                            var _a, _b;
-                            (_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
-                            resolve(newFile);
-                        };
-                        rejectRef.current = (uploadErr) => {
-                            var _a, _b;
-                            (_b = (_a = cb.current).onUploadFail) === null || _b === void 0 ? void 0 : _b.call(_a, uploadErr);
-                            reject();
-                        };
-                        const reader = new FileReader();
-                        reader.addEventListener('load', () => {
-                            if (typeof reader.result === 'string') {
-                                setImage(reader.result);
-                            }
-                        });
-                        reader.readAsDataURL(file);
-                    }));
-                } }) });
-    }, [children]);
     /**
      * crop
      */
-    const easyCropRef = react.useRef({});
-    /**
-     * modal
-     */
-    const modalBaseProps = react.useMemo(() => {
-        const obj = {};
-        if (modalWidth !== undefined)
-            obj.width = modalWidth;
-        if (modalOk !== undefined)
-            obj.okText = modalOk;
-        if (modalCancel !== undefined)
-            obj.cancelText = modalCancel;
-        return obj;
-    }, [modalCancel, modalOk, modalWidth]);
-    const onClose = () => {
-        setImage('');
-        easyCropRef.current.setZoom(ZOOM_INITIAL);
-        easyCropRef.current.setRotation(ROTATION_INITIAL);
-    };
-    const onCancel = react.useCallback(() => {
-        var _a, _b;
-        (_b = (_a = cb.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
-        onClose();
-    }, []);
-    const onOk = react.useCallback((event) => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const easyCropRef = react.useRef(null);
+    const getCropCanvas = react.useCallback((target) => {
         var _a;
-        onClose();
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
-        const target = event.target;
         const context = ((_a = target === null || target === void 0 ? void 0 : target.getRootNode) === null || _a === void 0 ? void 0 : _a.call(target)) || document;
         const imgSource = context.querySelector(`.${PREFIX}-media`);
         const { width: cropWidth, height: cropHeight, x: cropX, y: cropY, } = easyCropRef.current.cropPixelsRef.current;
-        if (rotationSlider && easyCropRef.current.rotation !== ROTATION_INITIAL) {
+        if (rotationSlider &&
+            easyCropRef.current.rotation !== ROTATION_INITIAL) {
             const { naturalWidth: imgWidth, naturalHeight: imgHeight } = imgSource;
             const angle = easyCropRef.current.rotation * (Math.PI / 180);
             // get container for rotated image
@@ -230,40 +170,97 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
             ctx.fillRect(0, 0, cropWidth, cropHeight);
             ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
         }
-        // get the new image
-        const { type, name, uid } = fileRef.current;
-        canvas.toBlob((blob) => tslib.__awaiter(void 0, void 0, void 0, function* () {
-            const newFile = new File([blob], name, { type });
-            Object.assign(newFile, { uid });
-            if (typeof beforeUploadRef.current !== 'function') {
-                resolveRef.current(newFile);
-                return;
-            }
-            // https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx
-            // https://ant.design/components/upload-cn#api
-            try {
-                const rcFile = newFile;
-                const result = yield beforeUploadRef.current(rcFile, [rcFile]);
-                if (result === true) {
-                    resolveRef.current(newFile); // true
-                }
-                else if (result === false) {
-                    rejectRef.current(new Error('beforeUpload → false')); // false
-                }
-                else {
-                    resolveRef.current(result); // File, Upload.LIST_IGNORE
+        return canvas;
+    }, [fillColor, rotationSlider]);
+    /**
+     * upload
+     */
+    const [modalImage, setModalImage] = react.useState('');
+    const onCancel = react.useRef();
+    const onOk = react.useRef();
+    const uploadComponent = react.useMemo(() => {
+        const upload = Array.isArray(children) ? children[0] : children;
+        const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps = tslib.__rest(_a, ["beforeUpload", "accept"]);
+        const innerBeforeUpload = (file, fileList) => {
+            return new Promise((resolve) => tslib.__awaiter(void 0, void 0, void 0, function* () {
+                if (typeof cb.current.beforeCrop === 'function') {
+                    try {
+                        const result = yield cb.current.beforeCrop(file, fileList);
+                        if (result !== true) {
+                            return resolve(result);
+                        }
+                    }
+                    catch (err) {
+                        return resolve(err);
+                    }
                 }
-            }
-            catch (err) {
-                rejectRef.current(new Error('beforeUpload → reject')); // reject
-            }
-        }), type, quality);
-    }), [fillColor, quality, rotationSlider]);
+                // get file result
+                const reader = new FileReader();
+                reader.addEventListener('load', () => {
+                    if (typeof reader.result === 'string') {
+                        setModalImage(reader.result); // open modal
+                    }
+                });
+                reader.readAsDataURL(file);
+                // on modal cancel
+                onCancel.current = () => {
+                    var _a, _b;
+                    setModalImage('');
+                    easyCropRef.current.onReset();
+                    resolve(AntUpload.LIST_IGNORE);
+                    (_b = (_a = cb.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
+                };
+                // on modal confirm
+                onOk.current = (event) => tslib.__awaiter(void 0, void 0, void 0, function* () {
+                    setModalImage('');
+                    easyCropRef.current.onReset();
+                    const canvas = getCropCanvas(event.target);
+                    const { type, name, uid } = file;
+                    canvas.toBlob((blob) => tslib.__awaiter(void 0, void 0, void 0, function* () {
+                        var _a, _b, _c, _d, _e, _f;
+                        const newFile = new File([blob], name, { type });
+                        Object.assign(newFile, { uid });
+                        if (typeof beforeUpload !== 'function') {
+                            resolve(newFile);
+                            (_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
+                            return;
+                        }
+                        try {
+                            // https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx#L128-L148
+                            // https://ant.design/components/upload-cn#api
+                            const result = yield beforeUpload(newFile, [newFile]);
+                            const value = result === true ? newFile : result;
+                            resolve(value);
+                            (_d = (_c = cb.current).onModalOk) === null || _d === void 0 ? void 0 : _d.call(_c, value);
+                        }
+                        catch (err) {
+                            resolve(err);
+                            (_f = (_e = cb.current).onModalOk) === null || _f === void 0 ? void 0 : _f.call(_e, err);
+                        }
+                    }), type, quality);
+                });
+            }));
+        };
+        return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: innerBeforeUpload }) });
+    }, [children, getCropCanvas, quality]);
+    /**
+     * modal
+     */
+    const modalBaseProps = react.useMemo(() => {
+        const obj = {};
+        if (modalWidth !== undefined)
+            obj.width = modalWidth;
+        if (modalOk !== undefined)
+            obj.okText = modalOk;
+        if (modalCancel !== undefined)
+            obj.cancelText = modalCancel;
+        return obj;
+    }, [modalCancel, modalOk, modalWidth]);
     const wrapClassName = `${PREFIX}-modal${modalClassName ? ` ${modalClassName}` : ''}`;
     const lang = typeof window === 'undefined' ? '' : window.navigator.language;
     const isCN = lang === 'zh-CN';
     const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [uploadComponent, image && (jsxRuntime.jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { [openKey]: true }, { title: title, onOk: onOk, onCancel: onCancel, wrapClassName: wrapClassName, maskClosable: false, destroyOnClose: true }, { children: jsxRuntime.jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, image: image, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps, isCN: isCN }) })))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [uploadComponent, modalImage && (jsxRuntime.jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { [openKey]: 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, modalImage: modalImage, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps, isCN: isCN }) })))] }));
 });
 
 module.exports = ImgCrop;

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

@@ -1,8 +1,9 @@
 import * as react from 'react';
 import Cropper, { CropperProps } from 'react-easy-crop';
-import { ModalProps } from 'antd';
-import { RcFile } from 'antd/es/upload/interface';
+import { ModalProps, UploadProps } from 'antd';
 
+type BeforeUpload = Exclude<UploadProps['beforeUpload'], undefined>;
+type BeforeUploadReturnType = ReturnType<BeforeUpload>;
 type ImgCropProps = {
     quality?: number;
     fillColor?: string;
@@ -21,11 +22,10 @@ type ImgCropProps = {
     modalWidth?: number | string;
     modalOk?: string;
     modalCancel?: string;
-    onModalOk?: (file: void | boolean | string | Blob | File) => void;
+    onModalOk?: (value: BeforeUploadReturnType) => void;
     onModalCancel?: () => void;
     modalProps?: Omit<ModalProps, 'className' | 'title' | 'width' | 'okText' | 'cancelText' | 'onOk' | 'onCancel' | 'open' | 'visible' | 'wrapClassName' | 'maskClosable' | 'destroyOnClose'>;
-    beforeCrop?: (file: RcFile, fileList: RcFile[]) => boolean | Promise<boolean>;
-    onUploadFail?: (err: Error) => void;
+    beforeCrop?: BeforeUpload;
     children: JSX.Element;
 };
 

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

@@ -3,6 +3,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useCallback, useImperativeHandle, memo, useMemo } from 'react';
 import { version } from 'antd';
 import AntModal from 'antd/es/modal';
+import AntUpload from 'antd/es/upload';
 import { compareVersions } from 'compare-versions';
 import Cropper from 'react-easy-crop';
 import AntButton from 'antd/es/button';
@@ -20,7 +21,7 @@ const ASPECT_MAX = 2;
 const ASPECT_STEP = 0.01;
 
 const EasyCrop = forwardRef((props, ref) => {
-    const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, image, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps, isCN, } = props;
+    const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, cropShape, showGrid, cropperProps, isCN, } = props;
     const [zoom, setZoom] = useState(ZOOM_INITIAL);
     const [rotation, setRotation] = useState(ROTATION_INITIAL);
     const [aspect, setAspect] = useState(ASPECT_INITIAL);
@@ -38,22 +39,21 @@ const EasyCrop = forwardRef((props, ref) => {
         cropPixelsRef.current = croppedAreaPixels;
     }, []);
     useImperativeHandle(ref, () => ({
-        setZoom,
         rotation,
-        setRotation,
         cropPixelsRef,
+        onReset,
     }));
-    const wrapperClass = 'flex items-center w-3/5 mx-auto';
-    const buttonClass = 'flex items-center justify-center w-8 h-8 bg-transparent border-0 font-[inherit] text-[18px] cursor-pointer disabled:opacity-20 disabled:cursor-default';
-    const sliderClass = 'flex-1 mx-2';
-    return (jsxs(Fragment, { children: [jsx(Cropper, Object.assign({}, cropperProps, { ref: cropperRef, image: image, crop: crop, 
+    const wrapperClass = '[display:flex] [align-items:center] [width:60%] [margin-inline:auto]';
+    const buttonClass = '[display:flex] [align-items:center] [justify-content:center] [height:32px] [width:32px] [background:transparent] [border:0] [font-family:inherit] [font-size:18px] [cursor:pointer] disabled:[opacity:20%] disabled:[cursor:default]';
+    const sliderClass = '[flex:1]';
+    return (jsxs(Fragment, { children: [jsx(Cropper, Object.assign({}, cropperProps, { ref: cropperRef, image: modalImage, crop: crop, 
                 //
                 zoom: zoom, rotation: rotation, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, zoomWithScroll: zoomSlider, 
                 //
                 cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
-                    containerClassName: `${PREFIX}-container !relative w-full h-[40vh] [&~section:first-of-type]:mt-4 [&~section:last-of-type]:mb-4`,
+                    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", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}` }, { children: [jsx("button", Object.assign({ 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", Object.assign({ className: buttonClass, onClick: () => setZoom(zoom + ZOOM_STEP), disabled: zoom + ZOOM_STEP > maxZoom }, { children: "\uFF0B" }))] }))), rotationSlider && (jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}` }, { children: [jsx("button", Object.assign({ className: `${buttonClass} !text-[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", Object.assign({ className: `${buttonClass} !text-[16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX }, { children: "\u21BB" }))] }))), aspectSlider && (jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}` }, { children: [jsx("button", Object.assign({ 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", Object.assign({ className: buttonClass, onClick: () => setAspect(aspect + ASPECT_STEP), disabled: aspect + ASPECT_STEP > ASPECT_MAX }, { children: "\u2194\uFE0F" }))] }))), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsx(AntButton, Object.assign({ className: "absolute bottom-[20px]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset }, { children: isCN ? '重置' : 'Reset' })))] }));
+                } })), zoomSlider && (jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}` }, { children: [jsx("button", Object.assign({ 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", Object.assign({ className: buttonClass, onClick: () => setZoom(zoom + ZOOM_STEP), disabled: zoom + ZOOM_STEP > maxZoom }, { children: "\uFF0B" }))] }))), rotationSlider && (jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}` }, { children: [jsx("button", Object.assign({ 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", Object.assign({ className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX }, { children: "\u21BB" }))] }))), aspectSlider && (jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}` }, { children: [jsx("button", Object.assign({ 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", Object.assign({ className: buttonClass, onClick: () => setAspect(aspect + ASPECT_STEP), disabled: aspect + ASPECT_STEP > ASPECT_MAX }, { children: "\u2194\uFE0F" }))] }))), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsx(AntButton, Object.assign({ className: "[position:absolute] [bottom:20px]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset }, { children: isCN ? '重置' : 'Reset' })))] }));
 });
 var EasyCrop$1 = memo(EasyCrop);
 
@@ -84,7 +84,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.absolute{position:absolute}.\\!relative{position:relative!important}.bottom-\\[20px\\]{bottom:20px}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.grid{display:grid}.h-8{height:2rem}.h-\\[40vh\\]{height:40vh}.w-3\\/5{width:60%}.w-8{width:2rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.border-0{border-width:0}.bg-transparent{background-color:transparent}.font-\\[inherit\\]{font-family:inherit}.\\!text-\\[16px\\]{font-size:16px!important}.text-\\[18px\\]{font-size:18px}.disabled\\:cursor-default:disabled{cursor:default}.disabled\\:opacity-20:disabled{opacity:.2}.\\[\\&\\~section\\:first-of-type\\]\\:mt-4~section:first-of-type{margin-top:1rem}.\\[\\&\\~section\\:last-of-type\\]\\:mb-4~section:last-of-type{margin-bottom:1rem}";
+var css_248z = ".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.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}";
 styleInject(css_248z);
 
 const openKey = compareVersions(version, '4.23.0') === -1 ? 'visible' : 'open';
@@ -104,96 +104,36 @@ const ImgCrop = forwardRef((props, cropperRef) => {
     // @ts-ignore
     cropShape: CROP_SHAPE = 'rect', 
     // @ts-ignore
-    showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, showReset = false, onModalOk, onModalCancel, modalProps, beforeCrop, onUploadFail, children, } = props;
+    showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, showReset = false, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
+    /**
+     * init
+     */
     const zoomSlider = deprecate(props, 'zoom', 'zoomSlider') || true;
     const rotationSlider = deprecate(props, 'rotate', 'rotationSlider') || false;
     const cropShape = deprecate(props, 'shape', 'cropShape') || 'rect';
     const showGrid = deprecate(props, 'grid', 'showGrid') || false;
+    if ('onUploadFail' in props) {
+        console.error(`\`onUploadFail\` is removed, because the only way it is called, is when the file is rejected by beforeUpload`);
+    }
     deprecate(props, 'modalMaskTransitionName', 'modalProps.maskTransitionName');
     deprecate(props, 'modalTransitionName', 'modalProps.transitionName');
     const cb = useRef({});
     cb.current.onModalOk = onModalOk;
     cb.current.onModalCancel = onModalCancel;
     cb.current.beforeCrop = beforeCrop;
-    cb.current.onUploadFail = onUploadFail;
-    /**
-     * upload
-     */
-    const [image, setImage] = useState('');
-    const fileRef = useRef({});
-    const beforeUploadRef = useRef();
-    const resolveRef = useRef(() => { });
-    const rejectRef = useRef(() => { });
-    const uploadComponent = useMemo(() => {
-        const upload = Array.isArray(children) ? children[0] : children;
-        const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps = __rest(_a, ["beforeUpload", "accept"]);
-        beforeUploadRef.current = beforeUpload;
-        return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: (file, fileList) => {
-                    return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
-                        if (typeof cb.current.beforeCrop === 'function') {
-                            const shouldCrop = yield cb.current.beforeCrop(file, fileList);
-                            if (!shouldCrop) {
-                                return reject();
-                            }
-                        }
-                        fileRef.current = file;
-                        resolveRef.current = (newFile) => {
-                            var _a, _b;
-                            (_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
-                            resolve(newFile);
-                        };
-                        rejectRef.current = (uploadErr) => {
-                            var _a, _b;
-                            (_b = (_a = cb.current).onUploadFail) === null || _b === void 0 ? void 0 : _b.call(_a, uploadErr);
-                            reject();
-                        };
-                        const reader = new FileReader();
-                        reader.addEventListener('load', () => {
-                            if (typeof reader.result === 'string') {
-                                setImage(reader.result);
-                            }
-                        });
-                        reader.readAsDataURL(file);
-                    }));
-                } }) });
-    }, [children]);
     /**
      * crop
      */
-    const easyCropRef = useRef({});
-    /**
-     * modal
-     */
-    const modalBaseProps = useMemo(() => {
-        const obj = {};
-        if (modalWidth !== undefined)
-            obj.width = modalWidth;
-        if (modalOk !== undefined)
-            obj.okText = modalOk;
-        if (modalCancel !== undefined)
-            obj.cancelText = modalCancel;
-        return obj;
-    }, [modalCancel, modalOk, modalWidth]);
-    const onClose = () => {
-        setImage('');
-        easyCropRef.current.setZoom(ZOOM_INITIAL);
-        easyCropRef.current.setRotation(ROTATION_INITIAL);
-    };
-    const onCancel = useCallback(() => {
-        var _a, _b;
-        (_b = (_a = cb.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
-        onClose();
-    }, []);
-    const onOk = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
+    const easyCropRef = useRef(null);
+    const getCropCanvas = useCallback((target) => {
         var _a;
-        onClose();
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
-        const target = event.target;
         const context = ((_a = target === null || target === void 0 ? void 0 : target.getRootNode) === null || _a === void 0 ? void 0 : _a.call(target)) || document;
         const imgSource = context.querySelector(`.${PREFIX}-media`);
         const { width: cropWidth, height: cropHeight, x: cropX, y: cropY, } = easyCropRef.current.cropPixelsRef.current;
-        if (rotationSlider && easyCropRef.current.rotation !== ROTATION_INITIAL) {
+        if (rotationSlider &&
+            easyCropRef.current.rotation !== ROTATION_INITIAL) {
             const { naturalWidth: imgWidth, naturalHeight: imgHeight } = imgSource;
             const angle = easyCropRef.current.rotation * (Math.PI / 180);
             // get container for rotated image
@@ -228,40 +168,97 @@ const ImgCrop = forwardRef((props, cropperRef) => {
             ctx.fillRect(0, 0, cropWidth, cropHeight);
             ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
         }
-        // get the new image
-        const { type, name, uid } = fileRef.current;
-        canvas.toBlob((blob) => __awaiter(void 0, void 0, void 0, function* () {
-            const newFile = new File([blob], name, { type });
-            Object.assign(newFile, { uid });
-            if (typeof beforeUploadRef.current !== 'function') {
-                resolveRef.current(newFile);
-                return;
-            }
-            // https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx
-            // https://ant.design/components/upload-cn#api
-            try {
-                const rcFile = newFile;
-                const result = yield beforeUploadRef.current(rcFile, [rcFile]);
-                if (result === true) {
-                    resolveRef.current(newFile); // true
-                }
-                else if (result === false) {
-                    rejectRef.current(new Error('beforeUpload → false')); // false
-                }
-                else {
-                    resolveRef.current(result); // File, Upload.LIST_IGNORE
+        return canvas;
+    }, [fillColor, rotationSlider]);
+    /**
+     * upload
+     */
+    const [modalImage, setModalImage] = useState('');
+    const onCancel = useRef();
+    const onOk = useRef();
+    const uploadComponent = useMemo(() => {
+        const upload = Array.isArray(children) ? children[0] : children;
+        const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps = __rest(_a, ["beforeUpload", "accept"]);
+        const innerBeforeUpload = (file, fileList) => {
+            return new Promise((resolve) => __awaiter(void 0, void 0, void 0, function* () {
+                if (typeof cb.current.beforeCrop === 'function') {
+                    try {
+                        const result = yield cb.current.beforeCrop(file, fileList);
+                        if (result !== true) {
+                            return resolve(result);
+                        }
+                    }
+                    catch (err) {
+                        return resolve(err);
+                    }
                 }
-            }
-            catch (err) {
-                rejectRef.current(new Error('beforeUpload → reject')); // reject
-            }
-        }), type, quality);
-    }), [fillColor, quality, rotationSlider]);
+                // get file result
+                const reader = new FileReader();
+                reader.addEventListener('load', () => {
+                    if (typeof reader.result === 'string') {
+                        setModalImage(reader.result); // open modal
+                    }
+                });
+                reader.readAsDataURL(file);
+                // on modal cancel
+                onCancel.current = () => {
+                    var _a, _b;
+                    setModalImage('');
+                    easyCropRef.current.onReset();
+                    resolve(AntUpload.LIST_IGNORE);
+                    (_b = (_a = cb.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
+                };
+                // on modal confirm
+                onOk.current = (event) => __awaiter(void 0, void 0, void 0, function* () {
+                    setModalImage('');
+                    easyCropRef.current.onReset();
+                    const canvas = getCropCanvas(event.target);
+                    const { type, name, uid } = file;
+                    canvas.toBlob((blob) => __awaiter(void 0, void 0, void 0, function* () {
+                        var _a, _b, _c, _d, _e, _f;
+                        const newFile = new File([blob], name, { type });
+                        Object.assign(newFile, { uid });
+                        if (typeof beforeUpload !== 'function') {
+                            resolve(newFile);
+                            (_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
+                            return;
+                        }
+                        try {
+                            // https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx#L128-L148
+                            // https://ant.design/components/upload-cn#api
+                            const result = yield beforeUpload(newFile, [newFile]);
+                            const value = result === true ? newFile : result;
+                            resolve(value);
+                            (_d = (_c = cb.current).onModalOk) === null || _d === void 0 ? void 0 : _d.call(_c, value);
+                        }
+                        catch (err) {
+                            resolve(err);
+                            (_f = (_e = cb.current).onModalOk) === null || _f === void 0 ? void 0 : _f.call(_e, err);
+                        }
+                    }), type, quality);
+                });
+            }));
+        };
+        return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: innerBeforeUpload }) });
+    }, [children, getCropCanvas, quality]);
+    /**
+     * modal
+     */
+    const modalBaseProps = useMemo(() => {
+        const obj = {};
+        if (modalWidth !== undefined)
+            obj.width = modalWidth;
+        if (modalOk !== undefined)
+            obj.okText = modalOk;
+        if (modalCancel !== undefined)
+            obj.cancelText = modalCancel;
+        return obj;
+    }, [modalCancel, modalOk, modalWidth]);
     const wrapClassName = `${PREFIX}-modal${modalClassName ? ` ${modalClassName}` : ''}`;
     const lang = typeof window === 'undefined' ? '' : window.navigator.language;
     const isCN = lang === 'zh-CN';
     const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
-    return (jsxs(Fragment, { children: [uploadComponent, image && (jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { [openKey]: true }, { title: title, onOk: onOk, onCancel: onCancel, wrapClassName: wrapClassName, maskClosable: false, destroyOnClose: true }, { children: jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, image: image, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps, isCN: isCN }) })))] }));
+    return (jsxs(Fragment, { children: [uploadComponent, modalImage && (jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { [openKey]: 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, modalImage: modalImage, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps, isCN: isCN }) })))] }));
 });
 
 export { ImgCrop as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-img-crop",
-  "version": "4.11.1",
+  "version": "4.12.1",
   "description": "An image cropper for Ant Design Upload",
   "keywords": [
     "react",
@@ -22,6 +22,9 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript"
+  },
   "peerDependencies": {
     "antd": ">=4.0.0",
     "react": ">=16.8.0",
@@ -34,30 +37,27 @@
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-typescript": "^11.0.0",
+    "@rollup/plugin-typescript": "^11.1.0",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/node": "^18.15.11",
-    "@types/react": "^18.0.31",
+    "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
-    "antd": "^5.3.3",
+    "antd": "^5.4.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
     "postcss": "^8.4.21",
     "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.5",
+    "prettier-plugin-tailwindcss": "^0.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "3.20.2",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5.0.2",
+    "tailwindcss": "^3.3.1",
+    "typescript": "^5.0.3",
     "vite": "^4.2.1"
-  },
-  "scripts": {
-    "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript"
   }
-}
+}