antd-img-crop 4.10.2 → 4.11.1
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.
- package/dist/antd-img-crop.cjs.js +23 -23
- package/dist/antd-img-crop.esm.js +23 -23
- package/package.json +10 -10
|
@@ -5,7 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var react = require('react');
|
|
6
6
|
var antd = require('antd');
|
|
7
7
|
var AntModal = require('antd/lib/modal');
|
|
8
|
-
var AntUpload = require('antd/lib/upload');
|
|
9
8
|
var compareVersions = require('compare-versions');
|
|
10
9
|
var Cropper = require('react-easy-crop');
|
|
11
10
|
var AntButton = require('antd/lib/button');
|
|
@@ -56,7 +55,7 @@ const EasyCrop = react.forwardRef((props, ref) => {
|
|
|
56
55
|
cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
|
|
57
56
|
containerClassName: `${PREFIX}-container !relative w-full h-[40vh] [&~section:first-of-type]:mt-4 [&~section:last-of-type]:mb-4`,
|
|
58
57
|
mediaClassName: `${PREFIX}-media`,
|
|
59
|
-
} })), zoomSlider && (jsxRuntime.jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: buttonClass, onClick: () => setZoom(zoom - ZOOM_STEP), disabled:
|
|
58
|
+
} })), zoomSlider && (jsxRuntime.jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: buttonClass, onClick: () => setZoom(zoom - ZOOM_STEP), disabled: zoom - ZOOM_STEP < minZoom }, { children: "\uFF0D" })), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsxRuntime.jsx("button", Object.assign({ className: buttonClass, onClick: () => setZoom(zoom + ZOOM_STEP), disabled: zoom + ZOOM_STEP > maxZoom }, { children: "\uFF0B" }))] }))), rotationSlider && (jsxRuntime.jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${buttonClass} !text-[16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN }, { children: "\u21BA" })), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsxRuntime.jsx("button", Object.assign({ className: `${buttonClass} !text-[16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX }, { children: "\u21BB" }))] }))), aspectSlider && (jsxRuntime.jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: buttonClass, onClick: () => setAspect(aspect - ASPECT_STEP), disabled: aspect - ASPECT_STEP < ASPECT_MIN }, { children: "\u2195\uFE0F" })), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: ASPECT_MIN, max: ASPECT_MAX, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsxRuntime.jsx("button", Object.assign({ className: buttonClass, onClick: () => setAspect(aspect + ASPECT_STEP), disabled: aspect + ASPECT_STEP > ASPECT_MAX }, { children: "\u2194\uFE0F" }))] }))), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsxRuntime.jsx(AntButton, Object.assign({ className: "absolute bottom-[20px]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset }, { children: isCN ? '重置' : 'Reset' })))] }));
|
|
60
59
|
});
|
|
61
60
|
var EasyCrop$1 = react.memo(EasyCrop);
|
|
62
61
|
|
|
@@ -133,7 +132,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
133
132
|
beforeUploadRef.current = beforeUpload;
|
|
134
133
|
return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: (file, fileList) => {
|
|
135
134
|
return new Promise((resolve, reject) => tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
136
|
-
if (cb.current.beforeCrop) {
|
|
135
|
+
if (typeof cb.current.beforeCrop === 'function') {
|
|
137
136
|
const shouldCrop = yield cb.current.beforeCrop(file, fileList);
|
|
138
137
|
if (!shouldCrop) {
|
|
139
138
|
return reject();
|
|
@@ -234,28 +233,29 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
234
233
|
// get the new image
|
|
235
234
|
const { type, name, uid } = fileRef.current;
|
|
236
235
|
canvas.toBlob((blob) => tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
237
|
-
const newFile =
|
|
238
|
-
|
|
239
|
-
|
|
236
|
+
const newFile = new File([blob], name, { type });
|
|
237
|
+
Object.assign(newFile, { uid });
|
|
238
|
+
if (typeof beforeUploadRef.current !== 'function') {
|
|
239
|
+
resolveRef.current(newFile);
|
|
240
|
+
return;
|
|
240
241
|
}
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
242
|
+
// https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx
|
|
243
|
+
// https://ant.design/components/upload-cn#api
|
|
244
|
+
try {
|
|
245
|
+
const rcFile = newFile;
|
|
246
|
+
const result = yield beforeUploadRef.current(rcFile, [rcFile]);
|
|
247
|
+
if (result === true) {
|
|
248
|
+
resolveRef.current(newFile); // true
|
|
249
|
+
}
|
|
250
|
+
else if (result === false) {
|
|
251
|
+
rejectRef.current(new Error('beforeUpload → false')); // false
|
|
252
|
+
}
|
|
253
|
+
else {
|
|
254
|
+
resolveRef.current(result); // File, Upload.LIST_IGNORE
|
|
255
|
+
}
|
|
245
256
|
}
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
}
|
|
249
|
-
delete newFile[AntUpload.LIST_IGNORE];
|
|
250
|
-
if (result === AntUpload.LIST_IGNORE) {
|
|
251
|
-
Object.defineProperty(newFile, AntUpload.LIST_IGNORE, {
|
|
252
|
-
value: true,
|
|
253
|
-
configurable: true,
|
|
254
|
-
});
|
|
255
|
-
return rejectRef.current(new Error('beforeUpload return LIST_IGNORE'));
|
|
256
|
-
}
|
|
257
|
-
if (typeof result === 'object' && result !== null) {
|
|
258
|
-
return resolveRef.current(result);
|
|
257
|
+
catch (err) {
|
|
258
|
+
rejectRef.current(new Error('beforeUpload → reject')); // reject
|
|
259
259
|
}
|
|
260
260
|
}), type, quality);
|
|
261
261
|
}), [fillColor, quality, rotationSlider]);
|
|
@@ -3,7 +3,6 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef, useState, useRef, useCallback, useImperativeHandle, memo, useMemo } from 'react';
|
|
4
4
|
import { version } from 'antd';
|
|
5
5
|
import AntModal from 'antd/es/modal';
|
|
6
|
-
import AntUpload from 'antd/es/upload';
|
|
7
6
|
import { compareVersions } from 'compare-versions';
|
|
8
7
|
import Cropper from 'react-easy-crop';
|
|
9
8
|
import AntButton from 'antd/es/button';
|
|
@@ -54,7 +53,7 @@ const EasyCrop = forwardRef((props, ref) => {
|
|
|
54
53
|
cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
|
|
55
54
|
containerClassName: `${PREFIX}-container !relative w-full h-[40vh] [&~section:first-of-type]:mt-4 [&~section:last-of-type]:mb-4`,
|
|
56
55
|
mediaClassName: `${PREFIX}-media`,
|
|
57
|
-
} })), zoomSlider && (jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}` }, { children: [jsx("button", Object.assign({ className: buttonClass, onClick: () => setZoom(zoom - ZOOM_STEP), disabled:
|
|
56
|
+
} })), zoomSlider && (jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}` }, { children: [jsx("button", Object.assign({ className: buttonClass, onClick: () => setZoom(zoom - ZOOM_STEP), disabled: zoom - ZOOM_STEP < minZoom }, { children: "\uFF0D" })), jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsx("button", Object.assign({ className: buttonClass, onClick: () => setZoom(zoom + ZOOM_STEP), disabled: zoom + ZOOM_STEP > maxZoom }, { children: "\uFF0B" }))] }))), rotationSlider && (jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}` }, { children: [jsx("button", Object.assign({ className: `${buttonClass} !text-[16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN }, { children: "\u21BA" })), jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsx("button", Object.assign({ className: `${buttonClass} !text-[16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX }, { children: "\u21BB" }))] }))), aspectSlider && (jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}` }, { children: [jsx("button", Object.assign({ className: buttonClass, onClick: () => setAspect(aspect - ASPECT_STEP), disabled: aspect - ASPECT_STEP < ASPECT_MIN }, { children: "\u2195\uFE0F" })), jsx(AntSlider, { className: sliderClass, min: ASPECT_MIN, max: ASPECT_MAX, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsx("button", Object.assign({ className: buttonClass, onClick: () => setAspect(aspect + ASPECT_STEP), disabled: aspect + ASPECT_STEP > ASPECT_MAX }, { children: "\u2194\uFE0F" }))] }))), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsx(AntButton, Object.assign({ className: "absolute bottom-[20px]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset }, { children: isCN ? '重置' : 'Reset' })))] }));
|
|
58
57
|
});
|
|
59
58
|
var EasyCrop$1 = memo(EasyCrop);
|
|
60
59
|
|
|
@@ -131,7 +130,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
131
130
|
beforeUploadRef.current = beforeUpload;
|
|
132
131
|
return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: (file, fileList) => {
|
|
133
132
|
return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
|
|
134
|
-
if (cb.current.beforeCrop) {
|
|
133
|
+
if (typeof cb.current.beforeCrop === 'function') {
|
|
135
134
|
const shouldCrop = yield cb.current.beforeCrop(file, fileList);
|
|
136
135
|
if (!shouldCrop) {
|
|
137
136
|
return reject();
|
|
@@ -232,28 +231,29 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
232
231
|
// get the new image
|
|
233
232
|
const { type, name, uid } = fileRef.current;
|
|
234
233
|
canvas.toBlob((blob) => __awaiter(void 0, void 0, void 0, function* () {
|
|
235
|
-
const newFile =
|
|
236
|
-
|
|
237
|
-
|
|
234
|
+
const newFile = new File([blob], name, { type });
|
|
235
|
+
Object.assign(newFile, { uid });
|
|
236
|
+
if (typeof beforeUploadRef.current !== 'function') {
|
|
237
|
+
resolveRef.current(newFile);
|
|
238
|
+
return;
|
|
238
239
|
}
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
240
|
+
// https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx
|
|
241
|
+
// https://ant.design/components/upload-cn#api
|
|
242
|
+
try {
|
|
243
|
+
const rcFile = newFile;
|
|
244
|
+
const result = yield beforeUploadRef.current(rcFile, [rcFile]);
|
|
245
|
+
if (result === true) {
|
|
246
|
+
resolveRef.current(newFile); // true
|
|
247
|
+
}
|
|
248
|
+
else if (result === false) {
|
|
249
|
+
rejectRef.current(new Error('beforeUpload → false')); // false
|
|
250
|
+
}
|
|
251
|
+
else {
|
|
252
|
+
resolveRef.current(result); // File, Upload.LIST_IGNORE
|
|
253
|
+
}
|
|
243
254
|
}
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
}
|
|
247
|
-
delete newFile[AntUpload.LIST_IGNORE];
|
|
248
|
-
if (result === AntUpload.LIST_IGNORE) {
|
|
249
|
-
Object.defineProperty(newFile, AntUpload.LIST_IGNORE, {
|
|
250
|
-
value: true,
|
|
251
|
-
configurable: true,
|
|
252
|
-
});
|
|
253
|
-
return rejectRef.current(new Error('beforeUpload return LIST_IGNORE'));
|
|
254
|
-
}
|
|
255
|
-
if (typeof result === 'object' && result !== null) {
|
|
256
|
-
return resolveRef.current(result);
|
|
255
|
+
catch (err) {
|
|
256
|
+
rejectRef.current(new Error('beforeUpload → reject')); // reject
|
|
257
257
|
}
|
|
258
258
|
}), type, quality);
|
|
259
259
|
}), [fillColor, quality, rotationSlider]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "antd-img-crop",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.11.1",
|
|
4
4
|
"description": "An image cropper for Ant Design Upload",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -36,26 +36,26 @@
|
|
|
36
36
|
"@rollup/plugin-replace": "^5.0.2",
|
|
37
37
|
"@rollup/plugin-typescript": "^11.0.0",
|
|
38
38
|
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
|
|
39
|
-
"@types/node": "^18.15.
|
|
40
|
-
"@types/react": "^18.0.
|
|
39
|
+
"@types/node": "^18.15.11",
|
|
40
|
+
"@types/react": "^18.0.31",
|
|
41
41
|
"@types/react-dom": "^18.0.11",
|
|
42
42
|
"@vitejs/plugin-react": "^3.1.0",
|
|
43
|
-
"antd": "^5.3.
|
|
43
|
+
"antd": "^5.3.3",
|
|
44
44
|
"autoprefixer": "^10.4.14",
|
|
45
|
-
"eslint": "^8.
|
|
46
|
-
"eslint-config-prettier": "^8.
|
|
45
|
+
"eslint": "^8.37.0",
|
|
46
|
+
"eslint-config-prettier": "^8.8.0",
|
|
47
47
|
"eslint-config-react-app": "^7.0.1",
|
|
48
48
|
"postcss": "^8.4.21",
|
|
49
|
-
"prettier": "^2.8.
|
|
49
|
+
"prettier": "^2.8.7",
|
|
50
50
|
"prettier-plugin-tailwindcss": "^0.2.5",
|
|
51
51
|
"react": "^18.2.0",
|
|
52
52
|
"react-dom": "^18.2.0",
|
|
53
|
-
"rollup": "3.
|
|
53
|
+
"rollup": "3.20.2",
|
|
54
54
|
"rollup-plugin-dts": "^5.3.0",
|
|
55
55
|
"rollup-plugin-postcss": "^4.0.2",
|
|
56
|
-
"tailwindcss": "^3.
|
|
56
|
+
"tailwindcss": "^3.3.0",
|
|
57
57
|
"typescript": "^5.0.2",
|
|
58
|
-
"vite": "^4.2.
|
|
58
|
+
"vite": "^4.2.1"
|
|
59
59
|
},
|
|
60
60
|
"scripts": {
|
|
61
61
|
"build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript"
|