antd-img-crop 4.24.0 → 4.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/antd-img-crop.cjs.js +13 -8
  2. package/dist/antd-img-crop.d.ts +5 -3
  3. package/dist/antd-img-crop.esm.js +13 -8
  4. package/package.json +34 -25
package/dist/antd-img-crop.cjs.js CHANGED
@@ -19,17 +19,22 @@ const ROTATION_STEP = 1;
19
19
  const ASPECT_STEP = 0.01;
20
20
 
21
21
  const EasyCrop = react.forwardRef((props, ref) => {
22
- const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, minAspect, maxAspect, cropShape, showGrid, cropperProps, } = props;
22
+ const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: propAspect, minZoom, maxZoom, minAspect, maxAspect, cropShape, showGrid, cropperProps, } = props;
23
23
  const [zoom, setZoom] = react.useState(ZOOM_INITIAL);
24
24
  const [rotation, setRotation] = react.useState(ROTATION_INITIAL);
25
- const [aspect, setAspect] = react.useState(ASPECT_INITIAL);
25
+ const [aspect, setAspect] = react.useState(propAspect);
26
+ const prevPropAspect = react.useRef(propAspect);
27
+ if (prevPropAspect.current !== propAspect) {
28
+ prevPropAspect.current = propAspect;
29
+ setAspect(propAspect);
30
+ }
26
31
  const isResetActive = zoom !== ZOOM_INITIAL ||
27
32
  rotation !== ROTATION_INITIAL ||
28
- aspect !== ASPECT_INITIAL;
33
+ aspect !== propAspect;
29
34
  const onReset = () => {
30
35
  setZoom(ZOOM_INITIAL);
31
36
  setRotation(ROTATION_INITIAL);
32
- setAspect(ASPECT_INITIAL);
37
+ setAspect(propAspect);
33
38
  };
34
39
  const [crop, onCropChange] = react.useState({ x: 0, y: 0 });
35
40
  const cropPixelsRef = react.useRef({ width: 0, height: 0, x: 0, y: 0 });
@@ -51,7 +56,7 @@ const EasyCrop = react.forwardRef((props, ref) => {
51
56
  cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
52
57
  containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
53
58
  mediaClassName: `${PREFIX}-media`,
54
- } })), zoomSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom - ZOOM_STEP).toFixed(1)), disabled: zoom - ZOOM_STEP < minZoom, children: "\uFF0D" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom + ZOOM_STEP).toFixed(1)), disabled: zoom + ZOOM_STEP > maxZoom, children: "\uFF0B" })] })), rotationSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN, children: "\u21BA" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsxRuntime.jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX, children: "\u21BB" })] })), aspectSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect - ASPECT_STEP).toFixed(2)), disabled: aspect - ASPECT_STEP < minAspect, children: "\u2195" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: minAspect, max: maxAspect, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect + ASPECT_STEP).toFixed(2)), disabled: aspect + ASPECT_STEP > maxAspect, children: "\u2194" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsxRuntime.jsx(AntButton, { className: "[bottom:20px] [position:absolute]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
59
+ } })), 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 }))] }));
55
60
  });
56
61
  var EasyCrop$1 = react.memo(EasyCrop);
57
62
 
@@ -82,7 +87,7 @@ function styleInject(css, ref) {
82
87
  }
83
88
  }
84
89
 
85
- var css_248z = ".\\[align-items\\:center\\]{align-items:center}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.\\[bottom\\:20px\\]{bottom:20px}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[display\\:flex\\]{display:flex}.\\[flex\\:1\\]{flex:1}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[justify-content\\:center\\]{justify-content:center}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[position\\:absolute\\]{position:absolute}.\\!\\[position\\:relative\\]{position:relative!important}.\\[width\\:100\\%\\]{width:100%}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.disabled\\:\\[cursor\\:default\\]:disabled{cursor:default}.disabled\\:\\[opacity\\:20\\%\\]:disabled{opacity:20%}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]~section:first-of-type{margin-top:16px}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]~section:last-of-type{margin-bottom:16px}";
90
+ 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}}";
86
91
  styleInject(css_248z,{"insertAt":"top"});
87
92
 
88
93
  const ImgCrop = react.forwardRef((props, cropperRef) => {
@@ -144,8 +149,8 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
144
149
  * upload
145
150
  */
146
151
  const [modalImage, setModalImage] = react.useState('');
147
- const onCancel = react.useRef();
148
- const onOk = react.useRef();
152
+ const onCancel = react.useRef(undefined);
153
+ const onOk = react.useRef(undefined);
149
154
  const runBeforeUpload = react.useCallback((_a) => tslib.__awaiter(void 0, [_a], void 0, function* ({ beforeUpload, file, resolve, reject, }) {
150
155
  const rawFile = file;
151
156
  if (typeof beforeUpload !== 'function') {
package/dist/antd-img-crop.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as react from 'react';
2
+ import { JSX } from 'react';
2
3
  import Cropper, { CropperProps } from 'react-easy-crop';
3
- import { ModalProps, UploadProps } from 'antd';
4
+ import { UploadProps, ModalProps } from 'antd';
4
5
 
5
6
  type BeforeUpload = Exclude<UploadProps['beforeUpload'], undefined>;
6
7
  type BeforeUploadReturnType = ReturnType<BeforeUpload>;
@@ -19,7 +20,7 @@ type ImgCropProps = {
19
20
  maxAspect?: number;
20
21
  cropShape?: 'rect' | 'round';
21
22
  showGrid?: boolean;
22
- cropperProps?: Omit<CropperProps, 'image' | 'crop' | 'zoom' | 'rotation' | 'aspect' | 'minZoom' | 'maxZoom' | 'minAspect' | 'maxAspect' | 'zoomWithScroll' | 'cropShape' | 'showGrid' | 'onCropChange' | 'onZoomChange' | 'onRotationChange' | 'onCropComplete' | 'classes'>;
23
+ 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'>>;
23
24
  modalClassName?: string;
24
25
  modalTitle?: string;
25
26
  modalWidth?: number | string;
@@ -34,4 +35,5 @@ type ImgCropProps = {
34
35
 
35
36
  declare const ImgCrop: react.ForwardRefExoticComponent<ImgCropProps & react.RefAttributes<Cropper>>;
36
37
 
37
- export { type ImgCropProps, ImgCrop as default };
38
+ export { ImgCrop as default };
39
+ export type { ImgCropProps };
package/dist/antd-img-crop.esm.js CHANGED
@@ -17,17 +17,22 @@ const ROTATION_STEP = 1;
17
17
  const ASPECT_STEP = 0.01;
18
18
 
19
19
  const EasyCrop = forwardRef((props, ref) => {
20
- const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: ASPECT_INITIAL, minZoom, maxZoom, minAspect, maxAspect, cropShape, showGrid, cropperProps, } = props;
20
+ const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: propAspect, minZoom, maxZoom, minAspect, maxAspect, cropShape, showGrid, cropperProps, } = props;
21
21
  const [zoom, setZoom] = useState(ZOOM_INITIAL);
22
22
  const [rotation, setRotation] = useState(ROTATION_INITIAL);
23
- const [aspect, setAspect] = useState(ASPECT_INITIAL);
23
+ const [aspect, setAspect] = useState(propAspect);
24
+ const prevPropAspect = useRef(propAspect);
25
+ if (prevPropAspect.current !== propAspect) {
26
+ prevPropAspect.current = propAspect;
27
+ setAspect(propAspect);
28
+ }
24
29
  const isResetActive = zoom !== ZOOM_INITIAL ||
25
30
  rotation !== ROTATION_INITIAL ||
26
- aspect !== ASPECT_INITIAL;
31
+ aspect !== propAspect;
27
32
  const onReset = () => {
28
33
  setZoom(ZOOM_INITIAL);
29
34
  setRotation(ROTATION_INITIAL);
30
- setAspect(ASPECT_INITIAL);
35
+ setAspect(propAspect);
31
36
  };
32
37
  const [crop, onCropChange] = useState({ x: 0, y: 0 });
33
38
  const cropPixelsRef = useRef({ width: 0, height: 0, x: 0, y: 0 });
@@ -49,7 +54,7 @@ const EasyCrop = forwardRef((props, ref) => {
49
54
  cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
50
55
  containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
51
56
  mediaClassName: `${PREFIX}-media`,
52
- } })), zoomSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom - ZOOM_STEP).toFixed(1)), disabled: zoom - ZOOM_STEP < minZoom, children: "\uFF0D" }), jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom + ZOOM_STEP).toFixed(1)), disabled: zoom + ZOOM_STEP > maxZoom, children: "\uFF0B" })] })), rotationSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}`, children: [jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN, children: "\u21BA" }), jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX, children: "\u21BB" })] })), aspectSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect - ASPECT_STEP).toFixed(2)), disabled: aspect - ASPECT_STEP < minAspect, children: "\u2195" }), jsx(AntSlider, { className: sliderClass, min: minAspect, max: maxAspect, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect + ASPECT_STEP).toFixed(2)), disabled: aspect + ASPECT_STEP > maxAspect, children: "\u2194" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsx(AntButton, { className: "[bottom:20px] [position:absolute]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
57
+ } })), 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 }))] }));
53
58
  });
54
59
  var EasyCrop$1 = memo(EasyCrop);
55
60
 
@@ -80,7 +85,7 @@ function styleInject(css, ref) {
80
85
  }
81
86
  }
82
87
 
83
- var css_248z = ".\\[align-items\\:center\\]{align-items:center}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.\\[bottom\\:20px\\]{bottom:20px}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[display\\:flex\\]{display:flex}.\\[flex\\:1\\]{flex:1}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[justify-content\\:center\\]{justify-content:center}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[position\\:absolute\\]{position:absolute}.\\!\\[position\\:relative\\]{position:relative!important}.\\[width\\:100\\%\\]{width:100%}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.disabled\\:\\[cursor\\:default\\]:disabled{cursor:default}.disabled\\:\\[opacity\\:20\\%\\]:disabled{opacity:20%}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]~section:first-of-type{margin-top:16px}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]~section:last-of-type{margin-bottom:16px}";
88
+ 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}}";
84
89
  styleInject(css_248z,{"insertAt":"top"});
85
90
 
86
91
  const ImgCrop = forwardRef((props, cropperRef) => {
@@ -142,8 +147,8 @@ const ImgCrop = forwardRef((props, cropperRef) => {
142
147
  * upload
143
148
  */
144
149
  const [modalImage, setModalImage] = useState('');
145
- const onCancel = useRef();
146
- const onOk = useRef();
150
+ const onCancel = useRef(undefined);
151
+ const onOk = useRef(undefined);
147
152
  const runBeforeUpload = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ beforeUpload, file, resolve, reject, }) {
148
153
  const rawFile = file;
149
154
  if (typeof beforeUpload !== 'function') {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "antd-img-crop",
3
- "version": "4.24.0",
3
+ "version": "4.25.0",
4
4
  "description": "An image cropper for Ant Design Upload",
5
5
  "keywords": [
6
6
  "react",
@@ -22,42 +22,51 @@
22
22
  "files": [
23
23
  "dist"
24
24
  ],
25
+ "scripts": {
26
+ "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript"
27
+ },
25
28
  "peerDependencies": {
26
29
  "antd": ">=4.0.0",
27
30
  "react": ">=16.8.0",
28
31
  "react-dom": ">=16.8.0"
29
32
  },
30
33
  "dependencies": {
31
- "react-easy-crop": "^5.2.0",
34
+ "react-easy-crop": "^5.4.1",
32
35
  "tslib": "^2.8.1"
33
36
  },
34
37
  "devDependencies": {
38
+ "@eslint/compat": "^1.2.8",
39
+ "@eslint/eslintrc": "^3.3.1",
40
+ "@eslint/js": "^9.25.1",
35
41
  "@rollup/plugin-replace": "^6.0.2",
36
42
  "@rollup/plugin-typescript": "^12.1.2",
37
- "@types/node": "^22.10.2",
38
- "@types/react": "18.3.18",
39
- "@types/react-dom": "18.3.5",
40
- "@vitejs/plugin-react": "^4.3.4",
41
- "antd": "^5.22.5",
42
- "autoprefixer": "^10.4.20",
43
- "eslint": "^8.57.1",
44
- "eslint-config-prettier": "^9.1.0",
43
+ "@tailwindcss/postcss": "^4.1.4",
44
+ "@types/node": "^22.15.3",
45
+ "@types/react": "19.1.2",
46
+ "@types/react-dom": "19.1.2",
47
+ "@typescript-eslint/eslint-plugin": "^8.31.1",
48
+ "@vitejs/plugin-react": "^4.4.1",
49
+ "antd": "^5.24.9",
50
+ "autoprefixer": "^10.4.21",
51
+ "eslint": "^9.25.1",
52
+ "eslint-config-prettier": "^10.1.2",
45
53
  "eslint-config-react-app": "^7.0.1",
46
- "postcss": "^8.4.49",
47
- "prettier": "^3.4.2",
54
+ "eslint-plugin-flowtype": "^8.0.3",
55
+ "eslint-plugin-import": "^2.31.0",
56
+ "eslint-plugin-jsx-a11y": "^6.10.2",
57
+ "eslint-plugin-react": "^7.37.5",
58
+ "eslint-plugin-react-hooks": "^5.2.0",
59
+ "postcss": "^8.5.3",
60
+ "prettier": "^3.5.3",
48
61
  "prettier-plugin-organize-imports": "^4.1.0",
49
- "prettier-plugin-tailwindcss": "^0.6.9",
50
- "react": "18.3.1",
51
- "react-dom": "18.3.1",
52
- "rollup": "4.29.0",
53
- "rollup-plugin-dts": "^6.1.1",
62
+ "prettier-plugin-tailwindcss": "^0.6.11",
63
+ "react": "19.1.0",
64
+ "react-dom": "19.1.0",
65
+ "rollup": "4.40.1",
66
+ "rollup-plugin-dts": "^6.2.1",
54
67
  "rollup-plugin-postcss": "^4.0.2",
55
- "tailwindcss": "^3.4.17",
56
- "typescript": "^5.7.2",
57
- "vite": "^6.0.5"
58
- },
59
- "scripts": {
60
- "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript",
61
- "u": "pnpm update --latest !eslint !react !react-dom !@types/react !@types/react-dom"
68
+ "tailwindcss": "^4.1.4",
69
+ "typescript": "^5.8.3",
70
+ "vite": "^6.3.3"
62
71
  }
63
- }
72
+ }