antd-img-crop 4.22.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 (3) hide show
  1. package/dist/antd-img-crop.cjs.js +3 -33
  2. package/dist/antd-img-crop.esm.js +3 -33
  3. package/package.json +18 -19
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');
@@ -86,39 +84,11 @@ function styleInject(css, ref) {
86
84
  }
87
85
  }
88
86
 
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}";
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;
@@ -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';
@@ -84,39 +82,11 @@ function styleInject(css, ref) {
84
82
  }
85
83
  }
86
84
 
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}";
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;
@@ -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.22.0",
3
+ "version": "4.23.0",
4
4
  "description": "An image cropper for Ant Design Upload",
5
5
  "keywords": [
6
6
  "react",
@@ -32,33 +32,32 @@
32
32
  "react-dom": ">=16.8.0"
33
33
  },
34
34
  "dependencies": {
35
- "compare-versions": "6.1.0",
36
- "react-easy-crop": "^5.0.7",
37
- "tslib": "^2.6.2"
35
+ "react-easy-crop": "^5.0.8",
36
+ "tslib": "^2.6.3"
38
37
  },
39
38
  "devDependencies": {
40
- "@rollup/plugin-replace": "^5.0.5",
39
+ "@rollup/plugin-replace": "^5.0.7",
41
40
  "@rollup/plugin-typescript": "^11.1.6",
42
- "@types/node": "^20.12.11",
43
- "@types/react": "^18.3.2",
41
+ "@types/node": "^22.3.0",
42
+ "@types/react": "^18.3.3",
44
43
  "@types/react-dom": "^18.3.0",
45
- "@vitejs/plugin-react": "^4.2.1",
46
- "antd": "^5.17.0",
47
- "autoprefixer": "^10.4.19",
44
+ "@vitejs/plugin-react": "^4.3.1",
45
+ "antd": "^5.20.1",
46
+ "autoprefixer": "^10.4.20",
48
47
  "eslint": "^8.57.0",
49
48
  "eslint-config-prettier": "^9.1.0",
50
49
  "eslint-config-react-app": "^7.0.1",
51
- "postcss": "^8.4.38",
52
- "prettier": "^3.2.5",
53
- "prettier-plugin-organize-imports": "^3.2.4",
54
- "prettier-plugin-tailwindcss": "^0.5.14",
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",
55
54
  "react": "^18.3.1",
56
55
  "react-dom": "^18.3.1",
57
- "rollup": "4.17.2",
58
- "rollup-plugin-dts": "^6.1.0",
56
+ "rollup": "4.20.0",
57
+ "rollup-plugin-dts": "^6.1.1",
59
58
  "rollup-plugin-postcss": "^4.0.2",
60
- "tailwindcss": "^3.4.3",
61
- "typescript": "^5.4.5",
62
- "vite": "^5.2.11"
59
+ "tailwindcss": "^3.4.10",
60
+ "typescript": "^5.5.4",
61
+ "vite": "^5.4.0"
63
62
  }
64
63
  }