antd-img-crop 4.21.0 → 4.23.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 (5) hide show
  1. package/README.md +3 -3
  2. package/README.zh-CN.md +3 -3
  3. package/dist/antd-img-crop.cjs.js +6 -36
  4. package/dist/antd-img-crop.esm.js +6 -36
  5. package/package.json +25 -25
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  <div align="center">
2
- <p><a href="https://kee.so/" target="_blank"><img src="https://i.imgur.com/x5SRUoo.png" alt="kee.so" /></a></p>
3
2
 
4
- Create now âžŦ [🔗 kee.so](https://kee.so/)
3
+ Link in bio to **widgets**,
4
+ your online **home screen**. âžŦ [🔗 kee.so](https://kee.so/)
5
5
 
6
6
  </div>
7
7
 
@@ -98,5 +98,5 @@ import 'antd/es/slider/style';
98
98
 
99
99
  [MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)
100
100
 
101
- [react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
101
+ [react-easy-crop]: https://github.com/ValentinH/react-easy-crop#props
102
102
  [Ant Design Modal]: https://ant.design/components/modal#api
package/README.zh-CN.md CHANGED
@@ -1,7 +1,7 @@
1
1
  <div align="center">
2
- <p><a href="https://kee.so/" target="_blank"><img src="https://i.imgur.com/x5SRUoo.png" alt="kee.so" /></a></p>
3
2
 
4
- Create now âžŦ [🔗 kee.so](https://kee.so/)
3
+ Link in bio to **widgets**,
4
+ your online **home screen**. âžŦ [🔗 kee.so](https://kee.so/)
5
5
 
6
6
  </div>
7
7
 
@@ -98,5 +98,5 @@ import 'antd/es/slider/style';
98
98
 
99
99
  [MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)
100
100
 
101
- [react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
101
+ [react-easy-crop]: https://github.com/ValentinH/react-easy-crop#props
102
102
  [Ant Design Modal]: https://ant.design/components/modal-cn#api
package/dist/antd-img-crop.cjs.js CHANGED
@@ -2,10 +2,8 @@
2
2
 
3
3
  var tslib = require('tslib');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
- var antd = require('antd');
6
5
  var AntModal = require('antd/lib/modal');
7
6
  var AntUpload = require('antd/lib/upload');
8
- var compareVersions = require('compare-versions');
9
7
  var react = require('react');
10
8
  var AntButton = require('antd/lib/button');
11
9
  var AntSlider = require('antd/lib/slider');
@@ -55,7 +53,7 @@ const EasyCrop = react.forwardRef((props, ref) => {
55
53
  cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
56
54
  containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
57
55
  mediaClassName: `${PREFIX}-media`,
58
- } })), zoomSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(zoom - ZOOM_STEP), disabled: zoom - ZOOM_STEP < minZoom, children: "\uFF0D" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(zoom + ZOOM_STEP), disabled: zoom + ZOOM_STEP > maxZoom, children: "\uFF0B" })] })), rotationSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN, children: "\u21BA" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsxRuntime.jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX, children: "\u21BB" })] })), aspectSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(aspect - ASPECT_STEP), disabled: aspect - ASPECT_STEP < ASPECT_MIN, children: "\u2195\uFE0F" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: ASPECT_MIN, max: ASPECT_MAX, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(aspect + ASPECT_STEP), disabled: aspect + ASPECT_STEP > ASPECT_MAX, children: "\u2194\uFE0F" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsxRuntime.jsx(AntButton, { className: "[bottom:20px] [position:absolute]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
56
+ } })), 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 }))] }));
59
57
  });
60
58
  var EasyCrop$1 = react.memo(EasyCrop);
61
59
 
@@ -63,7 +61,7 @@ function styleInject(css, ref) {
63
61
  if ( ref === void 0 ) ref = {};
64
62
  var insertAt = ref.insertAt;
65
63
 
66
- if (!css || typeof document === 'undefined') { return; }
64
+ if (typeof document === 'undefined') { return; }
67
65
 
68
66
  var head = document.head || document.getElementsByTagName('head')[0];
69
67
  var style = document.createElement('style');
@@ -86,39 +84,11 @@ function styleInject(css, ref) {
86
84
  }
87
85
  }
88
86
 
89
- var css_248z = ".visible{visibility:visible}.grid{display:grid}.\\!\\[position\\:relative\\]{position:relative!important}.\\[align-items\\:center\\]{align-items:center}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.\\[bottom\\:20px\\]{bottom:20px}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[display\\:flex\\]{display:flex}.\\[flex\\:1\\]{flex:1}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[justify-content\\:center\\]{justify-content:center}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[position\\:absolute\\]{position:absolute}.\\[width\\:100\\%\\]{width:100%}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.disabled\\:\\[cursor\\:default\\]:disabled{cursor:default}.disabled\\:\\[opacity\\:20\\%\\]:disabled{opacity:20%}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]~section:first-of-type{margin-top:16px}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]~section:last-of-type{margin-bottom:16px}";
87
+ 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
88
  styleInject(css_248z,{"insertAt":"top"});
91
89
 
92
- const openProp = compareVersions.compareVersions(antd.version, '4.23.0') === -1 ? 'visible' : 'open';
93
- const deprecate = (obj, old, now) => {
94
- if (old in obj) {
95
- console.error(`\`${old}\` is deprecated, please use \`${now}\` instead`);
96
- return obj[old];
97
- }
98
- return obj[now];
99
- };
100
90
  const ImgCrop = react.forwardRef((props, cropperRef) => {
101
- const { quality = 0.4, fillColor = 'white',
102
- // @ts-ignore
103
- zoomSlider: ZOOM_SLIDER = true,
104
- // @ts-ignore
105
- rotationSlider: ROTATION_SLIDER = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3,
106
- // @ts-ignore
107
- cropShape: CROP_SHAPE = 'rect',
108
- // @ts-ignore
109
- showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
110
- /**
111
- * init
112
- */
113
- const zoomSlider = deprecate(props, 'zoom', 'zoomSlider') || true;
114
- const rotationSlider = deprecate(props, 'rotate', 'rotationSlider') || false;
115
- const cropShape = deprecate(props, 'shape', 'cropShape') || 'rect';
116
- const showGrid = deprecate(props, 'grid', 'showGrid') || false;
117
- if ('onUploadFail' in props) {
118
- console.error(`\`onUploadFail\` is removed, because the only way it is called, is when the file is rejected by beforeUpload`);
119
- }
120
- deprecate(props, 'modalMaskTransitionName', 'modalProps.maskTransitionName');
121
- deprecate(props, 'modalTransitionName', 'modalProps.transitionName');
91
+ 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;
122
92
  const cb = react.useRef({});
123
93
  cb.current.onModalOk = onModalOk;
124
94
  cb.current.onModalCancel = onModalCancel;
@@ -178,7 +148,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
178
148
  const [modalImage, setModalImage] = react.useState('');
179
149
  const onCancel = react.useRef();
180
150
  const onOk = react.useRef();
181
- const runBeforeUpload = react.useCallback(({ beforeUpload, file, resolve, reject, }) => tslib.__awaiter(void 0, void 0, void 0, function* () {
151
+ const runBeforeUpload = react.useCallback((_a) => tslib.__awaiter(void 0, [_a], void 0, function* ({ beforeUpload, file, resolve, reject, }) {
182
152
  const rawFile = file;
183
153
  if (typeof beforeUpload !== 'function') {
184
154
  resolve(rawFile);
@@ -290,7 +260,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
290
260
  const isCN = lang === 'zh-CN';
291
261
  const title = modalTitle || (isCN ? 'įž–čū‘å›ūį‰‡' : 'Edit image');
292
262
  const resetBtnText = resetText || (isCN ? '重į―Ū' : 'Reset');
293
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getNewUpload(children), modalImage && (jsxRuntime.jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { [openProp]: true, title: title, onCancel: onCancel.current, onOk: onOk.current, wrapClassName: wrapClassName, maskClosable: false, destroyOnClose: true, children: jsxRuntime.jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, resetBtnText: resetBtnText, modalImage: modalImage, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) })))] }));
263
+ 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 }) })))] }));
294
264
  });
295
265
 
296
266
  module.exports = ImgCrop;
package/dist/antd-img-crop.esm.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import { __awaiter, __rest } from 'tslib';
2
2
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
- import { version } from 'antd';
4
3
  import AntModal from 'antd/es/modal';
5
4
  import AntUpload from 'antd/es/upload';
6
- import { compareVersions } from 'compare-versions';
7
5
  import { forwardRef, useState, useRef, useCallback, useImperativeHandle, memo, useMemo } from 'react';
8
6
  import AntButton from 'antd/es/button';
9
7
  import AntSlider from 'antd/es/slider';
@@ -53,7 +51,7 @@ const EasyCrop = forwardRef((props, ref) => {
53
51
  cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
54
52
  containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
55
53
  mediaClassName: `${PREFIX}-media`,
56
- } })), zoomSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setZoom(zoom - ZOOM_STEP), disabled: zoom - ZOOM_STEP < minZoom, children: "\uFF0D" }), jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsx("button", { className: buttonClass, onClick: () => setZoom(zoom + ZOOM_STEP), disabled: zoom + ZOOM_STEP > maxZoom, children: "\uFF0B" })] })), rotationSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}`, children: [jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN, children: "\u21BA" }), jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX, children: "\u21BB" })] })), aspectSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setAspect(aspect - ASPECT_STEP), disabled: aspect - ASPECT_STEP < ASPECT_MIN, children: "\u2195\uFE0F" }), jsx(AntSlider, { className: sliderClass, min: ASPECT_MIN, max: ASPECT_MAX, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsx("button", { className: buttonClass, onClick: () => setAspect(aspect + ASPECT_STEP), disabled: aspect + ASPECT_STEP > ASPECT_MAX, children: "\u2194\uFE0F" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsx(AntButton, { className: "[bottom:20px] [position:absolute]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
54
+ } })), 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 }))] }));
57
55
  });
58
56
  var EasyCrop$1 = memo(EasyCrop);
59
57
 
@@ -61,7 +59,7 @@ function styleInject(css, ref) {
61
59
  if ( ref === void 0 ) ref = {};
62
60
  var insertAt = ref.insertAt;
63
61
 
64
- if (!css || typeof document === 'undefined') { return; }
62
+ if (typeof document === 'undefined') { return; }
65
63
 
66
64
  var head = document.head || document.getElementsByTagName('head')[0];
67
65
  var style = document.createElement('style');
@@ -84,39 +82,11 @@ function styleInject(css, ref) {
84
82
  }
85
83
  }
86
84
 
87
- var css_248z = ".visible{visibility:visible}.grid{display:grid}.\\!\\[position\\:relative\\]{position:relative!important}.\\[align-items\\:center\\]{align-items:center}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.\\[bottom\\:20px\\]{bottom:20px}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[display\\:flex\\]{display:flex}.\\[flex\\:1\\]{flex:1}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[justify-content\\:center\\]{justify-content:center}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[position\\:absolute\\]{position:absolute}.\\[width\\:100\\%\\]{width:100%}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.disabled\\:\\[cursor\\:default\\]:disabled{cursor:default}.disabled\\:\\[opacity\\:20\\%\\]:disabled{opacity:20%}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]~section:first-of-type{margin-top:16px}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]~section:last-of-type{margin-bottom:16px}";
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}";
88
86
  styleInject(css_248z,{"insertAt":"top"});
89
87
 
90
- const openProp = compareVersions(version, '4.23.0') === -1 ? 'visible' : 'open';
91
- const deprecate = (obj, old, now) => {
92
- if (old in obj) {
93
- console.error(`\`${old}\` is deprecated, please use \`${now}\` instead`);
94
- return obj[old];
95
- }
96
- return obj[now];
97
- };
98
88
  const ImgCrop = forwardRef((props, cropperRef) => {
99
- const { quality = 0.4, fillColor = 'white',
100
- // @ts-ignore
101
- zoomSlider: ZOOM_SLIDER = true,
102
- // @ts-ignore
103
- rotationSlider: ROTATION_SLIDER = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3,
104
- // @ts-ignore
105
- cropShape: CROP_SHAPE = 'rect',
106
- // @ts-ignore
107
- showGrid: SHOW_GRID = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
108
- /**
109
- * init
110
- */
111
- const zoomSlider = deprecate(props, 'zoom', 'zoomSlider') || true;
112
- const rotationSlider = deprecate(props, 'rotate', 'rotationSlider') || false;
113
- const cropShape = deprecate(props, 'shape', 'cropShape') || 'rect';
114
- const showGrid = deprecate(props, 'grid', 'showGrid') || false;
115
- if ('onUploadFail' in props) {
116
- console.error(`\`onUploadFail\` is removed, because the only way it is called, is when the file is rejected by beforeUpload`);
117
- }
118
- deprecate(props, 'modalMaskTransitionName', 'modalProps.maskTransitionName');
119
- deprecate(props, 'modalTransitionName', 'modalProps.transitionName');
89
+ 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;
120
90
  const cb = useRef({});
121
91
  cb.current.onModalOk = onModalOk;
122
92
  cb.current.onModalCancel = onModalCancel;
@@ -176,7 +146,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
176
146
  const [modalImage, setModalImage] = useState('');
177
147
  const onCancel = useRef();
178
148
  const onOk = useRef();
179
- const runBeforeUpload = useCallback(({ beforeUpload, file, resolve, reject, }) => __awaiter(void 0, void 0, void 0, function* () {
149
+ const runBeforeUpload = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ beforeUpload, file, resolve, reject, }) {
180
150
  const rawFile = file;
181
151
  if (typeof beforeUpload !== 'function') {
182
152
  resolve(rawFile);
@@ -288,7 +258,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
288
258
  const isCN = lang === 'zh-CN';
289
259
  const title = modalTitle || (isCN ? 'įž–čū‘å›ūį‰‡' : 'Edit image');
290
260
  const resetBtnText = resetText || (isCN ? '重į―Ū' : 'Reset');
291
- return (jsxs(Fragment, { children: [getNewUpload(children), modalImage && (jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { [openProp]: true, title: title, onCancel: onCancel.current, onOk: onOk.current, wrapClassName: wrapClassName, maskClosable: false, destroyOnClose: true, children: jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, resetBtnText: resetBtnText, modalImage: modalImage, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) })))] }));
261
+ 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 }) })))] }));
292
262
  });
293
263
 
294
264
  export { ImgCrop as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "antd-img-crop",
3
- "version": "4.21.0",
3
+ "version": "4.23.0",
4
4
  "description": "An image cropper for Ant Design Upload",
5
5
  "keywords": [
6
6
  "react",
@@ -23,7 +23,8 @@
23
23
  "dist"
24
24
  ],
25
25
  "scripts": {
26
- "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript"
26
+ "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript",
27
+ "u": "pnpm update --latest && pnpm add eslint@8.57.0"
27
28
  },
28
29
  "peerDependencies": {
29
30
  "antd": ">=4.0.0",
@@ -31,33 +32,32 @@
31
32
  "react-dom": ">=16.8.0"
32
33
  },
33
34
  "dependencies": {
34
- "compare-versions": "6.1.0",
35
- "react-easy-crop": "^5.0.4",
36
- "tslib": "^2.6.2"
35
+ "react-easy-crop": "^5.0.8",
36
+ "tslib": "^2.6.3"
37
37
  },
38
38
  "devDependencies": {
39
- "@rollup/plugin-replace": "^5.0.5",
40
- "@rollup/plugin-typescript": "^11.1.5",
41
- "@types/node": "^20.10.6",
42
- "@types/react": "^18.2.46",
43
- "@types/react-dom": "^18.2.18",
44
- "@vitejs/plugin-react": "^4.2.1",
45
- "antd": "^5.12.5",
46
- "autoprefixer": "^10.4.16",
47
- "eslint": "^8.56.0",
39
+ "@rollup/plugin-replace": "^5.0.7",
40
+ "@rollup/plugin-typescript": "^11.1.6",
41
+ "@types/node": "^22.3.0",
42
+ "@types/react": "^18.3.3",
43
+ "@types/react-dom": "^18.3.0",
44
+ "@vitejs/plugin-react": "^4.3.1",
45
+ "antd": "^5.20.1",
46
+ "autoprefixer": "^10.4.20",
47
+ "eslint": "^8.57.0",
48
48
  "eslint-config-prettier": "^9.1.0",
49
49
  "eslint-config-react-app": "^7.0.1",
50
- "postcss": "^8.4.32",
51
- "prettier": "^3.1.1",
52
- "prettier-plugin-organize-imports": "^3.2.4",
53
- "prettier-plugin-tailwindcss": "^0.5.10",
54
- "react": "^18.2.0",
55
- "react-dom": "^18.2.0",
56
- "rollup": "4.9.2",
57
- "rollup-plugin-dts": "^6.1.0",
50
+ "postcss": "^8.4.41",
51
+ "prettier": "^3.3.3",
52
+ "prettier-plugin-organize-imports": "^4.0.0",
53
+ "prettier-plugin-tailwindcss": "^0.6.6",
54
+ "react": "^18.3.1",
55
+ "react-dom": "^18.3.1",
56
+ "rollup": "4.20.0",
57
+ "rollup-plugin-dts": "^6.1.1",
58
58
  "rollup-plugin-postcss": "^4.0.2",
59
- "tailwindcss": "^3.4.0",
60
- "typescript": "^5.3.3",
61
- "vite": "^5.0.10"
59
+ "tailwindcss": "^3.4.10",
60
+ "typescript": "^5.5.4",
61
+ "vite": "^5.4.0"
62
62
  }
63
63
  }