antd-img-crop 4.15.0 → 4.16.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.
- package/dist/antd-img-crop.cjs.js +37 -29
- package/dist/antd-img-crop.esm.js +38 -30
- package/package.json +5 -5
|
@@ -178,20 +178,33 @@ 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
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
181
|
+
const runRawBeforeUpload = react.useCallback((beforeUpload, file, pass, fail) => tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
182
|
+
if (typeof beforeUpload !== 'function') {
|
|
183
|
+
pass(file);
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
try {
|
|
187
|
+
// https://ant.design/components/upload-cn#api
|
|
188
|
+
// https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx#L152-L178
|
|
189
|
+
const result = yield beforeUpload(file, [file]);
|
|
190
|
+
pass(result !== true ? result : file);
|
|
191
|
+
}
|
|
192
|
+
catch (err) {
|
|
193
|
+
fail(err);
|
|
194
|
+
}
|
|
195
|
+
}), []);
|
|
196
|
+
const getNewBeforeUpload = react.useCallback((beforeUpload) => {
|
|
197
|
+
return ((file, fileList) => {
|
|
198
|
+
return new Promise((resolve, reject) => tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
186
199
|
if (typeof cb.current.beforeCrop === 'function') {
|
|
187
200
|
try {
|
|
188
201
|
const result = yield cb.current.beforeCrop(file, fileList);
|
|
189
202
|
if (result === false) {
|
|
190
|
-
return
|
|
203
|
+
return runRawBeforeUpload(beforeUpload, file, resolve, reject);
|
|
191
204
|
}
|
|
192
205
|
}
|
|
193
206
|
catch (err) {
|
|
194
|
-
return
|
|
207
|
+
return runRawBeforeUpload(beforeUpload, file, resolve, reject);
|
|
195
208
|
}
|
|
196
209
|
}
|
|
197
210
|
// get file result
|
|
@@ -217,32 +230,27 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
217
230
|
const canvas = getCropCanvas(event.target);
|
|
218
231
|
const { type, name, uid } = file;
|
|
219
232
|
canvas.toBlob((blob) => tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
220
|
-
var _a, _b, _c, _d, _e, _f;
|
|
221
233
|
const newFile = new File([blob], name, { type });
|
|
222
234
|
Object.assign(newFile, { uid });
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
(
|
|
226
|
-
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
const value = result === true ? newFile : result;
|
|
233
|
-
resolve(value);
|
|
234
|
-
(_d = (_c = cb.current).onModalOk) === null || _d === void 0 ? void 0 : _d.call(_c, value);
|
|
235
|
-
}
|
|
236
|
-
catch (err) {
|
|
237
|
-
resolve(err);
|
|
238
|
-
(_f = (_e = cb.current).onModalOk) === null || _f === void 0 ? void 0 : _f.call(_e, err);
|
|
239
|
-
}
|
|
235
|
+
runRawBeforeUpload(beforeUpload, newFile, (parsedFile) => {
|
|
236
|
+
var _a, _b;
|
|
237
|
+
resolve(parsedFile);
|
|
238
|
+
(_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, parsedFile);
|
|
239
|
+
}, (rejectErr) => {
|
|
240
|
+
var _a, _b;
|
|
241
|
+
reject(rejectErr);
|
|
242
|
+
(_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, rejectErr);
|
|
243
|
+
});
|
|
240
244
|
}), type, quality);
|
|
241
245
|
});
|
|
242
246
|
}));
|
|
243
|
-
};
|
|
244
|
-
|
|
245
|
-
|
|
247
|
+
});
|
|
248
|
+
}, [getCropCanvas, quality, runRawBeforeUpload]);
|
|
249
|
+
const getNewUpload = react.useCallback((children) => {
|
|
250
|
+
const upload = Array.isArray(children) ? children[0] : children;
|
|
251
|
+
const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps = tslib.__rest(_a, ["beforeUpload", "accept"]);
|
|
252
|
+
return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: getNewBeforeUpload(beforeUpload) }) });
|
|
253
|
+
}, [getNewBeforeUpload]);
|
|
246
254
|
/**
|
|
247
255
|
* modal
|
|
248
256
|
*/
|
|
@@ -261,7 +269,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
261
269
|
const isCN = lang === 'zh-CN';
|
|
262
270
|
const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
|
|
263
271
|
const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
|
|
264
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
272
|
+
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 }) })))] }));
|
|
265
273
|
});
|
|
266
274
|
|
|
267
275
|
module.exports = ImgCrop;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __awaiter, __rest } from 'tslib';
|
|
2
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { version } from 'antd';
|
|
4
4
|
import AntModal from 'antd/es/modal';
|
|
@@ -176,20 +176,33 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
176
176
|
const [modalImage, setModalImage] = useState('');
|
|
177
177
|
const onCancel = useRef();
|
|
178
178
|
const onOk = useRef();
|
|
179
|
-
const
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
179
|
+
const runRawBeforeUpload = useCallback((beforeUpload, file, pass, fail) => __awaiter(void 0, void 0, void 0, function* () {
|
|
180
|
+
if (typeof beforeUpload !== 'function') {
|
|
181
|
+
pass(file);
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
184
|
+
try {
|
|
185
|
+
// https://ant.design/components/upload-cn#api
|
|
186
|
+
// https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx#L152-L178
|
|
187
|
+
const result = yield beforeUpload(file, [file]);
|
|
188
|
+
pass(result !== true ? result : file);
|
|
189
|
+
}
|
|
190
|
+
catch (err) {
|
|
191
|
+
fail(err);
|
|
192
|
+
}
|
|
193
|
+
}), []);
|
|
194
|
+
const getNewBeforeUpload = useCallback((beforeUpload) => {
|
|
195
|
+
return ((file, fileList) => {
|
|
196
|
+
return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
|
|
184
197
|
if (typeof cb.current.beforeCrop === 'function') {
|
|
185
198
|
try {
|
|
186
199
|
const result = yield cb.current.beforeCrop(file, fileList);
|
|
187
200
|
if (result === false) {
|
|
188
|
-
return
|
|
201
|
+
return runRawBeforeUpload(beforeUpload, file, resolve, reject);
|
|
189
202
|
}
|
|
190
203
|
}
|
|
191
204
|
catch (err) {
|
|
192
|
-
return
|
|
205
|
+
return runRawBeforeUpload(beforeUpload, file, resolve, reject);
|
|
193
206
|
}
|
|
194
207
|
}
|
|
195
208
|
// get file result
|
|
@@ -215,32 +228,27 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
215
228
|
const canvas = getCropCanvas(event.target);
|
|
216
229
|
const { type, name, uid } = file;
|
|
217
230
|
canvas.toBlob((blob) => __awaiter(void 0, void 0, void 0, function* () {
|
|
218
|
-
var _a, _b, _c, _d, _e, _f;
|
|
219
231
|
const newFile = new File([blob], name, { type });
|
|
220
232
|
Object.assign(newFile, { uid });
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
(
|
|
224
|
-
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
const value = result === true ? newFile : result;
|
|
231
|
-
resolve(value);
|
|
232
|
-
(_d = (_c = cb.current).onModalOk) === null || _d === void 0 ? void 0 : _d.call(_c, value);
|
|
233
|
-
}
|
|
234
|
-
catch (err) {
|
|
235
|
-
resolve(err);
|
|
236
|
-
(_f = (_e = cb.current).onModalOk) === null || _f === void 0 ? void 0 : _f.call(_e, err);
|
|
237
|
-
}
|
|
233
|
+
runRawBeforeUpload(beforeUpload, newFile, (parsedFile) => {
|
|
234
|
+
var _a, _b;
|
|
235
|
+
resolve(parsedFile);
|
|
236
|
+
(_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, parsedFile);
|
|
237
|
+
}, (rejectErr) => {
|
|
238
|
+
var _a, _b;
|
|
239
|
+
reject(rejectErr);
|
|
240
|
+
(_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, rejectErr);
|
|
241
|
+
});
|
|
238
242
|
}), type, quality);
|
|
239
243
|
});
|
|
240
244
|
}));
|
|
241
|
-
};
|
|
242
|
-
|
|
243
|
-
|
|
245
|
+
});
|
|
246
|
+
}, [getCropCanvas, quality, runRawBeforeUpload]);
|
|
247
|
+
const getNewUpload = useCallback((children) => {
|
|
248
|
+
const upload = Array.isArray(children) ? children[0] : children;
|
|
249
|
+
const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps = __rest(_a, ["beforeUpload", "accept"]);
|
|
250
|
+
return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: getNewBeforeUpload(beforeUpload) }) });
|
|
251
|
+
}, [getNewBeforeUpload]);
|
|
244
252
|
/**
|
|
245
253
|
* modal
|
|
246
254
|
*/
|
|
@@ -259,7 +267,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
259
267
|
const isCN = lang === 'zh-CN';
|
|
260
268
|
const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
|
|
261
269
|
const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
|
|
262
|
-
return (jsxs(Fragment, { children: [
|
|
270
|
+
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 }) })))] }));
|
|
263
271
|
});
|
|
264
272
|
|
|
265
273
|
export { ImgCrop as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "antd-img-crop",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.16.0",
|
|
4
4
|
"description": "An image cropper for Ant Design Upload",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@rollup/plugin-replace": "^5.0.5",
|
|
40
40
|
"@rollup/plugin-typescript": "^11.1.5",
|
|
41
|
-
"@types/node": "^20.
|
|
42
|
-
"@types/react": "^18.2.
|
|
43
|
-
"@types/react-dom": "^18.2.
|
|
41
|
+
"@types/node": "^20.9.0",
|
|
42
|
+
"@types/react": "^18.2.37",
|
|
43
|
+
"@types/react-dom": "^18.2.15",
|
|
44
44
|
"@vitejs/plugin-react": "^4.1.1",
|
|
45
45
|
"antd": "^5.11.0",
|
|
46
46
|
"autoprefixer": "^10.4.16",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"postcss": "^8.4.31",
|
|
51
51
|
"prettier": "^3.0.3",
|
|
52
52
|
"prettier-plugin-organize-imports": "^3.2.3",
|
|
53
|
-
"prettier-plugin-tailwindcss": "^0.5.
|
|
53
|
+
"prettier-plugin-tailwindcss": "^0.5.7",
|
|
54
54
|
"react": "^18.2.0",
|
|
55
55
|
"react-dom": "^18.2.0",
|
|
56
56
|
"rollup": "4.3.0",
|