antd-img-crop 4.15.0 → 4.17.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 +38 -29
- package/dist/antd-img-crop.esm.js +39 -30
- package/package.json +5 -5
|
@@ -178,20 +178,34 @@ 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
|
-
const
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
return
|
|
181
|
+
const runRawBeforeUpload = react.useCallback((beforeUpload, file, pass, fail) => tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
182
|
+
const rawFile = file;
|
|
183
|
+
if (typeof beforeUpload !== 'function') {
|
|
184
|
+
pass(rawFile);
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
try {
|
|
188
|
+
// https://ant.design/components/upload-cn#api
|
|
189
|
+
// https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx#L152-L178
|
|
190
|
+
const result = yield beforeUpload(file, [file]);
|
|
191
|
+
pass(result !== true ? result : rawFile);
|
|
192
|
+
}
|
|
193
|
+
catch (err) {
|
|
194
|
+
fail(err);
|
|
195
|
+
}
|
|
196
|
+
}), []);
|
|
197
|
+
const getNewBeforeUpload = react.useCallback((beforeUpload) => {
|
|
198
|
+
return ((file, fileList) => {
|
|
199
|
+
return new Promise((resolve, reject) => tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
186
200
|
if (typeof cb.current.beforeCrop === 'function') {
|
|
187
201
|
try {
|
|
188
202
|
const result = yield cb.current.beforeCrop(file, fileList);
|
|
189
203
|
if (result === false) {
|
|
190
|
-
return
|
|
204
|
+
return runRawBeforeUpload(beforeUpload, file, resolve, reject);
|
|
191
205
|
}
|
|
192
206
|
}
|
|
193
207
|
catch (err) {
|
|
194
|
-
return
|
|
208
|
+
return runRawBeforeUpload(beforeUpload, file, resolve, reject);
|
|
195
209
|
}
|
|
196
210
|
}
|
|
197
211
|
// get file result
|
|
@@ -217,32 +231,27 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
217
231
|
const canvas = getCropCanvas(event.target);
|
|
218
232
|
const { type, name, uid } = file;
|
|
219
233
|
canvas.toBlob((blob) => tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
220
|
-
var _a, _b, _c, _d, _e, _f;
|
|
221
234
|
const newFile = new File([blob], name, { type });
|
|
222
235
|
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
|
-
}
|
|
236
|
+
runRawBeforeUpload(beforeUpload, newFile, (parsedFile) => {
|
|
237
|
+
var _a, _b;
|
|
238
|
+
resolve(parsedFile);
|
|
239
|
+
(_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, parsedFile);
|
|
240
|
+
}, (rejectErr) => {
|
|
241
|
+
var _a, _b;
|
|
242
|
+
reject(rejectErr);
|
|
243
|
+
(_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, rejectErr);
|
|
244
|
+
});
|
|
240
245
|
}), type, quality);
|
|
241
246
|
});
|
|
242
247
|
}));
|
|
243
|
-
};
|
|
244
|
-
|
|
245
|
-
|
|
248
|
+
});
|
|
249
|
+
}, [getCropCanvas, quality, runRawBeforeUpload]);
|
|
250
|
+
const getNewUpload = react.useCallback((children) => {
|
|
251
|
+
const upload = Array.isArray(children) ? children[0] : children;
|
|
252
|
+
const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps = tslib.__rest(_a, ["beforeUpload", "accept"]);
|
|
253
|
+
return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: getNewBeforeUpload(beforeUpload) }) });
|
|
254
|
+
}, [getNewBeforeUpload]);
|
|
246
255
|
/**
|
|
247
256
|
* modal
|
|
248
257
|
*/
|
|
@@ -261,7 +270,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
261
270
|
const isCN = lang === 'zh-CN';
|
|
262
271
|
const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
|
|
263
272
|
const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
|
|
264
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
273
|
+
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
274
|
});
|
|
266
275
|
|
|
267
276
|
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,34 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
176
176
|
const [modalImage, setModalImage] = useState('');
|
|
177
177
|
const onCancel = useRef();
|
|
178
178
|
const onOk = useRef();
|
|
179
|
-
const
|
|
180
|
-
const
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
return
|
|
179
|
+
const runRawBeforeUpload = useCallback((beforeUpload, file, pass, fail) => __awaiter(void 0, void 0, void 0, function* () {
|
|
180
|
+
const rawFile = file;
|
|
181
|
+
if (typeof beforeUpload !== 'function') {
|
|
182
|
+
pass(rawFile);
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
try {
|
|
186
|
+
// https://ant.design/components/upload-cn#api
|
|
187
|
+
// https://github.com/ant-design/ant-design/blob/master/components/upload/Upload.tsx#L152-L178
|
|
188
|
+
const result = yield beforeUpload(file, [file]);
|
|
189
|
+
pass(result !== true ? result : rawFile);
|
|
190
|
+
}
|
|
191
|
+
catch (err) {
|
|
192
|
+
fail(err);
|
|
193
|
+
}
|
|
194
|
+
}), []);
|
|
195
|
+
const getNewBeforeUpload = useCallback((beforeUpload) => {
|
|
196
|
+
return ((file, fileList) => {
|
|
197
|
+
return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
|
|
184
198
|
if (typeof cb.current.beforeCrop === 'function') {
|
|
185
199
|
try {
|
|
186
200
|
const result = yield cb.current.beforeCrop(file, fileList);
|
|
187
201
|
if (result === false) {
|
|
188
|
-
return
|
|
202
|
+
return runRawBeforeUpload(beforeUpload, file, resolve, reject);
|
|
189
203
|
}
|
|
190
204
|
}
|
|
191
205
|
catch (err) {
|
|
192
|
-
return
|
|
206
|
+
return runRawBeforeUpload(beforeUpload, file, resolve, reject);
|
|
193
207
|
}
|
|
194
208
|
}
|
|
195
209
|
// get file result
|
|
@@ -215,32 +229,27 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
215
229
|
const canvas = getCropCanvas(event.target);
|
|
216
230
|
const { type, name, uid } = file;
|
|
217
231
|
canvas.toBlob((blob) => __awaiter(void 0, void 0, void 0, function* () {
|
|
218
|
-
var _a, _b, _c, _d, _e, _f;
|
|
219
232
|
const newFile = new File([blob], name, { type });
|
|
220
233
|
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
|
-
}
|
|
234
|
+
runRawBeforeUpload(beforeUpload, newFile, (parsedFile) => {
|
|
235
|
+
var _a, _b;
|
|
236
|
+
resolve(parsedFile);
|
|
237
|
+
(_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, parsedFile);
|
|
238
|
+
}, (rejectErr) => {
|
|
239
|
+
var _a, _b;
|
|
240
|
+
reject(rejectErr);
|
|
241
|
+
(_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, rejectErr);
|
|
242
|
+
});
|
|
238
243
|
}), type, quality);
|
|
239
244
|
});
|
|
240
245
|
}));
|
|
241
|
-
};
|
|
242
|
-
|
|
243
|
-
|
|
246
|
+
});
|
|
247
|
+
}, [getCropCanvas, quality, runRawBeforeUpload]);
|
|
248
|
+
const getNewUpload = useCallback((children) => {
|
|
249
|
+
const upload = Array.isArray(children) ? children[0] : children;
|
|
250
|
+
const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps = __rest(_a, ["beforeUpload", "accept"]);
|
|
251
|
+
return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: getNewBeforeUpload(beforeUpload) }) });
|
|
252
|
+
}, [getNewBeforeUpload]);
|
|
244
253
|
/**
|
|
245
254
|
* modal
|
|
246
255
|
*/
|
|
@@ -259,7 +268,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
259
268
|
const isCN = lang === 'zh-CN';
|
|
260
269
|
const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
|
|
261
270
|
const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
|
|
262
|
-
return (jsxs(Fragment, { children: [
|
|
271
|
+
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
272
|
});
|
|
264
273
|
|
|
265
274
|
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.17.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",
|