antd-img-crop 4.20.0 → 4.22.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 +28 -28
  2. package/README.zh-CN.md +28 -28
  3. package/dist/antd-img-crop.cjs.js +19 -12
  4. package/dist/antd-img-crop.esm.js +19 -12
  5. package/package.json +20 -19
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
 
@@ -42,34 +42,34 @@ const Demo = () => (
42
42
  );
43
43
  ```
44
44
 
45
- [![Edit antd-img-crop](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/antd-img-crop-4qoom5p9x4?fontsize=14&hidenavigation=1&theme=dark)
45
+ [![Edit antd-img-crop](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/antd-img-crop-5x4j3r)
46
46
 
47
47
  ## Props
48
48
 
49
- | Prop | Type | Default | Description |
50
- | -------------- | ---------- | -------------- | -------------------------------------------------------------------------- |
51
- | quality | `number` | `0.4` | Cropped image quality, `0` to `1` |
52
- | fillColor | `string` | `'white'` | Fill color for cropped image |
53
- | zoomSlider | `boolean` | `true` | Enable zoom adjustment |
54
- | rotationSlider | `boolean` | `false` | Enable rotation adjustment |
55
- | aspectSlider | `boolean` | `false` | Enable aspect adjustment |
56
- | showReset | `boolean` | `false` | Show reset button to reset zoom rotation aspect |
57
- | resetText | `string` | `Reset` | Reset button text |
58
- | aspect | `number` | `1 / 1` | Aspect of crop area , `width / height` |
59
- | minZoom | `number` | `1` | Minimum zoom factor |
60
- | maxZoom | `number` | `3` | Maximum zoom factor |
61
- | cropShape | `string` | `'rect'` | Shape of crop area, `'rect'` or `'round'` |
62
- | showGrid | `boolean` | `false` | Show grid of crop area (third-lines) |
63
- | cropperProps | `object` | - | [react-easy-crop] props (\* existing props cannot be overridden) |
64
- | modalClassName | `string` | `''` | Modal classname |
65
- | modalTitle | `string` | `'Edit image'` | Modal title |
66
- | modalWidth | `number` | `string` | Modal width |
67
- | modalOk | `string` | | Ok button text |
68
- | modalCancel | `string` | | Cancel button text |
69
- | onModalOk | `function` | - | Ok button callback |
70
- | onModalCancel | `function` | - | Cancel button, modal mask, top right "x" callback |
71
- | modalProps | `object` | | [Ant Design Modal] props (\* existing props cannot be overridden) |
72
- | beforeCrop | `function` | - | Upload button callback, if return `false` or `reject`, modal will not open |
49
+ | Prop | Type | Default | Description |
50
+ | -------------- | ---------- | -------------- | -------------------------------------------------------------------------------- |
51
+ | quality | `number` | `0.4` | Cropped image quality, `0` to `1` |
52
+ | fillColor | `string` | `'white'` | Fill color for cropped image |
53
+ | zoomSlider | `boolean` | `true` | Enable zoom adjustment |
54
+ | rotationSlider | `boolean` | `false` | Enable rotation adjustment |
55
+ | aspectSlider | `boolean` | `false` | Enable aspect adjustment |
56
+ | showReset | `boolean` | `false` | Show reset button to reset zoom rotation aspect |
57
+ | resetText | `string` | `Reset` | Reset button text |
58
+ | aspect | `number` | `1 / 1` | Aspect of crop area , `width / height` |
59
+ | minZoom | `number` | `1` | Minimum zoom factor |
60
+ | maxZoom | `number` | `3` | Maximum zoom factor |
61
+ | cropShape | `string` | `'rect'` | Shape of crop area, `'rect'` or `'round'` |
62
+ | showGrid | `boolean` | `false` | Show grid of crop area (third-lines) |
63
+ | cropperProps | `object` | - | [react-easy-crop] props (\* existing props cannot be overridden) |
64
+ | modalClassName | `string` | `''` | Modal classname |
65
+ | modalTitle | `string` | `'Edit image'` | Modal title |
66
+ | modalWidth | `number` | `string` | Modal width |
67
+ | modalOk | `string` | | Ok button text |
68
+ | modalCancel | `string` | | Cancel button text |
69
+ | onModalOk | `function` | - | Callback of click ok button |
70
+ | onModalCancel | `function` | - | Callback of click cancel button (or modal mask & top right "x") |
71
+ | modalProps | `object` | | [Ant Design Modal] props (\* existing props cannot be overridden) |
72
+ | beforeCrop | `function` | - | Callback before crop modal, if return `false` or `reject()`, modal will not open |
73
73
 
74
74
  ## FAQ
75
75
 
@@ -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
 
@@ -42,34 +42,34 @@ const Demo = () => (
42
42
  );
43
43
  ```
44
44
 
45
- [![Edit antd-img-crop](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/antd-img-crop-4qoom5p9x4?fontsize=14&hidenavigation=1&theme=dark)
45
+ [![Edit antd-img-crop](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/antd-img-crop-5x4j3r)
46
46
 
47
47
  ## Props
48
48
 
49
- | 属性 | 类型 | 默认 | 说明 |
50
- | -------------- | -------------------- | ------------ | -------------------------------------------------------- |
51
- | quality | `number` | `0.4` | 裁切图片质量，`0` 到 `1` 之间 |
52
- | fillColor | `string` | `'white'` | 裁切图像填充色 |
53
- | zoomSlider | `boolean` | `true` | 图片缩放控制 |
54
- | rotationSlider | `boolean` | `false` | 图片旋转控制 |
55
- | aspectSlider | `boolean` | `false` | 裁切比率控制 |
56
- | showReset | `boolean` | `false` | 显示重置按钮，重置缩放旋转及比率 |
57
- | resetText | `string` | `重置` | 重置按钮文字 |
58
- | aspect | `number` | `1 / 1` | 裁切区域宽高比，`width / height` |
59
- | minZoom | `number` | `1` | 最小缩放倍数 |
60
- | maxZoom | `number` | `3` | 最大缩放倍数 |
61
- | cropShape | `string` | `'rect'` | 裁切区域形状，`'rect'` 或 `'round'` |
62
- | showGrid | `boolean` | `false` | 显示裁切区域网格（九宫格） |
63
- | cropperProps | `object` | - | [react-easy-crop] 的 props（\* 已有 props 无法重写） |
64
- | modalClassName | `string` | `''` | 弹窗 className |
65
- | modalTitle | `string` | `'编辑图片'` | 弹窗标题 |
66
- | modalWidth | `number` \| `string` | | 弹窗宽度 |
67
- | modalOk | `string` | | 确定按钮文字 |
68
- | modalCancel | `string` | | 取消按钮文字 |
69
- | onModalOK | `function` | - | 确定按钮回调 |
70
- | onModalCancel | `function` | - | 取消按钮、遮罩层、或右上角叉回调 |
71
- | modalProps | `object` | | [Ant Design Modal] 的 props（\* 已有 props 无法重写） |
72
- | beforeCrop | `function` | - | 上传按钮回调，若返回 `false` 或 `reject`，弹窗将不会打开 |
49
+ | 属性 | 类型 | 默认 | 说明 |
50
+ | -------------- | -------------------- | ------------ | ---------------------------------------------------------------- |
51
+ | quality | `number` | `0.4` | 裁切图片质量，`0` 到 `1` 之间 |
52
+ | fillColor | `string` | `'white'` | 裁切图像填充色 |
53
+ | zoomSlider | `boolean` | `true` | 图片缩放控制 |
54
+ | rotationSlider | `boolean` | `false` | 图片旋转控制 |
55
+ | aspectSlider | `boolean` | `false` | 裁切比率控制 |
56
+ | showReset | `boolean` | `false` | 显示重置按钮，重置缩放旋转及比率 |
57
+ | resetText | `string` | `重置` | 重置按钮文字 |
58
+ | aspect | `number` | `1 / 1` | 裁切区域宽高比，`width / height` |
59
+ | minZoom | `number` | `1` | 最小缩放倍数 |
60
+ | maxZoom | `number` | `3` | 最大缩放倍数 |
61
+ | cropShape | `string` | `'rect'` | 裁切区域形状，`'rect'` 或 `'round'` |
62
+ | showGrid | `boolean` | `false` | 显示裁切区域网格（九宫格） |
63
+ | cropperProps | `object` | - | [react-easy-crop] 的 props（\* 已有 props 无法重写） |
64
+ | modalClassName | `string` | `''` | 弹窗 className |
65
+ | modalTitle | `string` | `'编辑图片'` | 弹窗标题 |
66
+ | modalWidth | `number` \| `string` | | 弹窗宽度 |
67
+ | modalOk | `string` | | 确定按钮文字 |
68
+ | modalCancel | `string` | | 取消按钮文字 |
69
+ | onModalOK | `function` | - | 点击确定按钮的回调 |
70
+ | onModalCancel | `function` | - | 点击取消按钮、遮罩层、或右上角 'x' 的回调 |
71
+ | modalProps | `object` | | [Ant Design Modal] 的 props（\* 已有 props 无法重写） |
72
+ | beforeCrop | `function` | - | 裁切弹窗打开前的回调，若返回 `false` 或 `reject`，弹窗将不会打开 |
73
73
 
74
74
  ## FAQ
75
75
 
@@ -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
@@ -55,7 +55,7 @@ const EasyCrop = react.forwardRef((props, ref) => {
55
55
  cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
56
56
  containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
57
57
  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 }))] }));
58
+ } })), zoomSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom - ZOOM_STEP).toFixed(1)), disabled: zoom - ZOOM_STEP < minZoom, children: "\uFF0D" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom + ZOOM_STEP).toFixed(1)), disabled: zoom + ZOOM_STEP > maxZoom, children: "\uFF0B" })] })), rotationSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN, children: "\u21BA" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsxRuntime.jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX, children: "\u21BB" })] })), aspectSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect - ASPECT_STEP).toFixed(2)), disabled: aspect - ASPECT_STEP < ASPECT_MIN, children: "\u2195\uFE0F" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: ASPECT_MIN, max: ASPECT_MAX, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect + ASPECT_STEP).toFixed(2)), disabled: aspect + ASPECT_STEP > ASPECT_MAX, children: "\u2194\uFE0F" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsxRuntime.jsx(AntButton, { className: "[bottom:20px] [position:absolute]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
59
59
  });
60
60
  var EasyCrop$1 = react.memo(EasyCrop);
61
61
 
@@ -63,7 +63,7 @@ function styleInject(css, ref) {
63
63
  if ( ref === void 0 ) ref = {};
64
64
  var insertAt = ref.insertAt;
65
65
 
66
- if (!css || typeof document === 'undefined') { return; }
66
+ if (typeof document === 'undefined') { return; }
67
67
 
68
68
  var head = document.head || document.getElementsByTagName('head')[0];
69
69
  var style = document.createElement('style');
@@ -86,7 +86,7 @@ function styleInject(css, ref) {
86
86
  }
87
87
  }
88
88
 
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}";
89
+ var css_248z = ".visible{visibility:visible}.grid{display:grid}.\\[align-items\\:center\\]{align-items:center}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.\\[bottom\\:20px\\]{bottom:20px}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[display\\:flex\\]{display:flex}.\\[flex\\:1\\]{flex:1}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[justify-content\\:center\\]{justify-content:center}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[position\\:absolute\\]{position:absolute}.\\!\\[position\\:relative\\]{position:relative!important}.\\[width\\:100\\%\\]{width:100%}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.disabled\\:\\[cursor\\:default\\]:disabled{cursor:default}.disabled\\:\\[opacity\\:20\\%\\]:disabled{opacity:20%}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]~section:first-of-type{margin-top:16px}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]~section:last-of-type{margin-bottom:16px}";
90
90
  styleInject(css_248z,{"insertAt":"top"});
91
91
 
92
92
  const openProp = compareVersions.compareVersions(antd.version, '4.23.0') === -1 ? 'visible' : 'open';
@@ -178,7 +178,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
178
178
  const [modalImage, setModalImage] = react.useState('');
179
179
  const onCancel = react.useRef();
180
180
  const onOk = react.useRef();
181
- const runBeforeUpload = react.useCallback(({ beforeUpload, file, resolve, reject, }) => tslib.__awaiter(void 0, void 0, void 0, function* () {
181
+ const runBeforeUpload = react.useCallback((_a) => tslib.__awaiter(void 0, [_a], void 0, function* ({ beforeUpload, file, resolve, reject, }) {
182
182
  const rawFile = file;
183
183
  if (typeof beforeUpload !== 'function') {
184
184
  resolve(rawFile);
@@ -189,10 +189,11 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
189
189
  // https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx#L152-L178
190
190
  const result = yield beforeUpload(file, [file]);
191
191
  if (result === false) {
192
- reject(rawFile);
193
- return;
192
+ resolve(false);
193
+ }
194
+ else {
195
+ resolve((result !== true && result) || rawFile);
194
196
  }
195
- resolve((result !== true && result) || rawFile);
196
197
  }
197
198
  catch (err) {
198
199
  reject(err);
@@ -206,14 +207,14 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
206
207
  try {
207
208
  const result = yield cb.current.beforeCrop(file, fileList);
208
209
  if (result === false) {
209
- return runBeforeUpload({ beforeUpload, file, resolve, reject });
210
+ return runBeforeUpload({ beforeUpload, file, resolve, reject }); // not open modal
210
211
  }
211
212
  if (result !== true) {
212
- processedFile = result || file;
213
+ processedFile = result || file; // will open modal
213
214
  }
214
215
  }
215
216
  catch (err) {
216
- return runBeforeUpload({ beforeUpload, file, resolve, reject });
217
+ return runBeforeUpload({ beforeUpload, file, resolve, reject }); // not open modal
217
218
  }
218
219
  }
219
220
  // read file
@@ -229,8 +230,14 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
229
230
  var _a, _b;
230
231
  setModalImage('');
231
232
  easyCropRef.current.onReset();
232
- resolve(AntUpload.LIST_IGNORE);
233
- (_b = (_a = cb.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a, resolve);
233
+ let hasResolveCalled = false;
234
+ (_b = (_a = cb.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a, (LIST_IGNORE) => {
235
+ resolve(LIST_IGNORE);
236
+ hasResolveCalled = true;
237
+ });
238
+ if (!hasResolveCalled) {
239
+ resolve(AntUpload.LIST_IGNORE);
240
+ }
234
241
  };
235
242
  // on modal confirm
236
243
  onOk.current = (event) => tslib.__awaiter(void 0, void 0, void 0, function* () {
package/dist/antd-img-crop.esm.js CHANGED
@@ -53,7 +53,7 @@ const EasyCrop = forwardRef((props, ref) => {
53
53
  cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
54
54
  containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
55
55
  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 }))] }));
56
+ } })), zoomSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom - ZOOM_STEP).toFixed(1)), disabled: zoom - ZOOM_STEP < minZoom, children: "\uFF0D" }), jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom + ZOOM_STEP).toFixed(1)), disabled: zoom + ZOOM_STEP > maxZoom, children: "\uFF0B" })] })), rotationSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}`, children: [jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN, children: "\u21BA" }), jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX, children: "\u21BB" })] })), aspectSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect - ASPECT_STEP).toFixed(2)), disabled: aspect - ASPECT_STEP < ASPECT_MIN, children: "\u2195\uFE0F" }), jsx(AntSlider, { className: sliderClass, min: ASPECT_MIN, max: ASPECT_MAX, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect + ASPECT_STEP).toFixed(2)), disabled: aspect + ASPECT_STEP > ASPECT_MAX, children: "\u2194\uFE0F" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsx(AntButton, { className: "[bottom:20px] [position:absolute]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
57
57
  });
58
58
  var EasyCrop$1 = memo(EasyCrop);
59
59
 
@@ -61,7 +61,7 @@ function styleInject(css, ref) {
61
61
  if ( ref === void 0 ) ref = {};
62
62
  var insertAt = ref.insertAt;
63
63
 
64
- if (!css || typeof document === 'undefined') { return; }
64
+ if (typeof document === 'undefined') { return; }
65
65
 
66
66
  var head = document.head || document.getElementsByTagName('head')[0];
67
67
  var style = document.createElement('style');
@@ -84,7 +84,7 @@ function styleInject(css, ref) {
84
84
  }
85
85
  }
86
86
 
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}";
87
+ var css_248z = ".visible{visibility:visible}.grid{display:grid}.\\[align-items\\:center\\]{align-items:center}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.\\[bottom\\:20px\\]{bottom:20px}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[display\\:flex\\]{display:flex}.\\[flex\\:1\\]{flex:1}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[justify-content\\:center\\]{justify-content:center}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[position\\:absolute\\]{position:absolute}.\\!\\[position\\:relative\\]{position:relative!important}.\\[width\\:100\\%\\]{width:100%}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.disabled\\:\\[cursor\\:default\\]:disabled{cursor:default}.disabled\\:\\[opacity\\:20\\%\\]:disabled{opacity:20%}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]~section:first-of-type{margin-top:16px}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]~section:last-of-type{margin-bottom:16px}";
88
88
  styleInject(css_248z,{"insertAt":"top"});
89
89
 
90
90
  const openProp = compareVersions(version, '4.23.0') === -1 ? 'visible' : 'open';
@@ -176,7 +176,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
176
176
  const [modalImage, setModalImage] = useState('');
177
177
  const onCancel = useRef();
178
178
  const onOk = useRef();
179
- const runBeforeUpload = useCallback(({ beforeUpload, file, resolve, reject, }) => __awaiter(void 0, void 0, void 0, function* () {
179
+ const runBeforeUpload = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ beforeUpload, file, resolve, reject, }) {
180
180
  const rawFile = file;
181
181
  if (typeof beforeUpload !== 'function') {
182
182
  resolve(rawFile);
@@ -187,10 +187,11 @@ const ImgCrop = forwardRef((props, cropperRef) => {
187
187
  // https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx#L152-L178
188
188
  const result = yield beforeUpload(file, [file]);
189
189
  if (result === false) {
190
- reject(rawFile);
191
- return;
190
+ resolve(false);
191
+ }
192
+ else {
193
+ resolve((result !== true && result) || rawFile);
192
194
  }
193
- resolve((result !== true && result) || rawFile);
194
195
  }
195
196
  catch (err) {
196
197
  reject(err);
@@ -204,14 +205,14 @@ const ImgCrop = forwardRef((props, cropperRef) => {
204
205
  try {
205
206
  const result = yield cb.current.beforeCrop(file, fileList);
206
207
  if (result === false) {
207
- return runBeforeUpload({ beforeUpload, file, resolve, reject });
208
+ return runBeforeUpload({ beforeUpload, file, resolve, reject }); // not open modal
208
209
  }
209
210
  if (result !== true) {
210
- processedFile = result || file;
211
+ processedFile = result || file; // will open modal
211
212
  }
212
213
  }
213
214
  catch (err) {
214
- return runBeforeUpload({ beforeUpload, file, resolve, reject });
215
+ return runBeforeUpload({ beforeUpload, file, resolve, reject }); // not open modal
215
216
  }
216
217
  }
217
218
  // read file
@@ -227,8 +228,14 @@ const ImgCrop = forwardRef((props, cropperRef) => {
227
228
  var _a, _b;
228
229
  setModalImage('');
229
230
  easyCropRef.current.onReset();
230
- resolve(AntUpload.LIST_IGNORE);
231
- (_b = (_a = cb.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a, resolve);
231
+ let hasResolveCalled = false;
232
+ (_b = (_a = cb.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a, (LIST_IGNORE) => {
233
+ resolve(LIST_IGNORE);
234
+ hasResolveCalled = true;
235
+ });
236
+ if (!hasResolveCalled) {
237
+ resolve(AntUpload.LIST_IGNORE);
238
+ }
232
239
  };
233
240
  // on modal confirm
234
241
  onOk.current = (event) => __awaiter(void 0, void 0, void 0, function* () {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "antd-img-crop",
3
- "version": "4.20.0",
3
+ "version": "4.22.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",
@@ -32,32 +33,32 @@
32
33
  },
33
34
  "dependencies": {
34
35
  "compare-versions": "6.1.0",
35
- "react-easy-crop": "^5.0.4",
36
+ "react-easy-crop": "^5.0.7",
36
37
  "tslib": "^2.6.2"
37
38
  },
38
39
  "devDependencies": {
39
40
  "@rollup/plugin-replace": "^5.0.5",
40
- "@rollup/plugin-typescript": "^11.1.5",
41
- "@types/node": "^20.10.5",
42
- "@types/react": "^18.2.46",
43
- "@types/react-dom": "^18.2.18",
41
+ "@rollup/plugin-typescript": "^11.1.6",
42
+ "@types/node": "^20.12.11",
43
+ "@types/react": "^18.3.2",
44
+ "@types/react-dom": "^18.3.0",
44
45
  "@vitejs/plugin-react": "^4.2.1",
45
- "antd": "^5.12.5",
46
- "autoprefixer": "^10.4.16",
47
- "eslint": "^8.56.0",
46
+ "antd": "^5.17.0",
47
+ "autoprefixer": "^10.4.19",
48
+ "eslint": "^8.57.0",
48
49
  "eslint-config-prettier": "^9.1.0",
49
50
  "eslint-config-react-app": "^7.0.1",
50
- "postcss": "^8.4.32",
51
- "prettier": "^3.1.1",
51
+ "postcss": "^8.4.38",
52
+ "prettier": "^3.2.5",
52
53
  "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.1",
54
+ "prettier-plugin-tailwindcss": "^0.5.14",
55
+ "react": "^18.3.1",
56
+ "react-dom": "^18.3.1",
57
+ "rollup": "4.17.2",
57
58
  "rollup-plugin-dts": "^6.1.0",
58
59
  "rollup-plugin-postcss": "^4.0.2",
59
- "tailwindcss": "^3.4.0",
60
- "typescript": "^5.3.3",
61
- "vite": "^5.0.10"
60
+ "tailwindcss": "^3.4.3",
61
+ "typescript": "^5.4.5",
62
+ "vite": "^5.2.11"
62
63
  }
63
64
  }