antd-img-crop 4.27.0 → 4.28.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/README.md +4 -2
- package/README.zh-CN.md +4 -2
- package/dist/antd-img-crop.cjs.js +31 -89
- package/dist/antd-img-crop.d.ts +4 -4
- package/dist/antd-img-crop.esm.js +1 -1
- package/package.json +33 -26
package/README.md
CHANGED
|
@@ -19,6 +19,10 @@ An image cropper for Ant Design [Upload](https://ant.design/components/upload/)
|
|
|
19
19
|
|
|
20
20
|
English | [简体中文](./README.zh-CN.md)
|
|
21
21
|
|
|
22
|
+
## Demo
|
|
23
|
+
|
|
24
|
+
[](https://codesandbox.io/p/sandbox/antd-img-crop-5x4j3r)
|
|
25
|
+
|
|
22
26
|
## Install
|
|
23
27
|
|
|
24
28
|
```sh
|
|
@@ -42,8 +46,6 @@ const Demo = () => (
|
|
|
42
46
|
);
|
|
43
47
|
```
|
|
44
48
|
|
|
45
|
-
[](https://codesandbox.io/p/sandbox/antd-img-crop-5x4j3r)
|
|
46
|
-
|
|
47
49
|
## Props
|
|
48
50
|
|
|
49
51
|
| Prop | Type | Default | Description |
|
package/README.zh-CN.md
CHANGED
|
@@ -19,6 +19,10 @@ your online **home screen**. ➫ [🔗 kee.so](https://kee.so/)
|
|
|
19
19
|
|
|
20
20
|
[English](./README.md) | 简体中文
|
|
21
21
|
|
|
22
|
+
## 示例
|
|
23
|
+
|
|
24
|
+
[](https://codesandbox.io/p/sandbox/antd-img-crop-5x4j3r)
|
|
25
|
+
|
|
22
26
|
## 安装
|
|
23
27
|
|
|
24
28
|
```sh
|
|
@@ -42,8 +46,6 @@ const Demo = () => (
|
|
|
42
46
|
);
|
|
43
47
|
```
|
|
44
48
|
|
|
45
|
-
[](https://codesandbox.io/p/sandbox/antd-img-crop-5x4j3r)
|
|
46
|
-
|
|
47
49
|
## Props
|
|
48
50
|
|
|
49
51
|
| 属性 | 类型 | 默认 | 说明 |
|
|
@@ -1,90 +1,33 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const
|
|
13
|
-
const ZOOM_INITIAL = 1;
|
|
14
|
-
const ZOOM_STEP = 0.1;
|
|
15
|
-
const ROTATION_INITIAL = 0;
|
|
16
|
-
const ROTATION_MIN = -180;
|
|
17
|
-
const ROTATION_MAX = 180;
|
|
18
|
-
const ROTATION_STEP = 1;
|
|
19
|
-
const ASPECT_STEP = 0.01;
|
|
20
|
-
|
|
21
|
-
const EasyCrop = react.forwardRef((props, ref) => {
|
|
22
|
-
const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: propAspect, minZoom, maxZoom, minAspect, maxAspect, cropShape, showGrid, cropperProps, } = props;
|
|
23
|
-
const [crop, setCrop] = react.useState({ x: 0, y: 0 });
|
|
24
|
-
const [zoom, setZoom] = react.useState(ZOOM_INITIAL);
|
|
25
|
-
const [rotation, setRotation] = react.useState(ROTATION_INITIAL);
|
|
26
|
-
const [aspect, setAspect] = react.useState(propAspect);
|
|
27
|
-
const cropPixelsRef = react.useRef({ width: 0, height: 0, x: 0, y: 0 });
|
|
28
|
-
const onCropComplete = react.useCallback((_, croppedAreaPixels) => {
|
|
29
|
-
cropPixelsRef.current = croppedAreaPixels;
|
|
30
|
-
}, []);
|
|
31
|
-
const prevPropAspect = react.useRef(propAspect);
|
|
32
|
-
if (prevPropAspect.current !== propAspect) {
|
|
33
|
-
prevPropAspect.current = propAspect;
|
|
34
|
-
setAspect(propAspect);
|
|
35
|
-
}
|
|
36
|
-
const isResetActive = zoom !== ZOOM_INITIAL ||
|
|
37
|
-
rotation !== ROTATION_INITIAL ||
|
|
38
|
-
aspect !== propAspect;
|
|
39
|
-
const onReset = () => {
|
|
40
|
-
setZoom(ZOOM_INITIAL);
|
|
41
|
-
setRotation(ROTATION_INITIAL);
|
|
42
|
-
setAspect(propAspect);
|
|
43
|
-
};
|
|
44
|
-
react.useImperativeHandle(ref, () => ({
|
|
45
|
-
rotation,
|
|
46
|
-
cropPixelsRef,
|
|
47
|
-
onReset,
|
|
48
|
-
}));
|
|
49
|
-
const wrapperClass = '[display:flex] [align-items:center] [width:60%] [margin-inline:auto]';
|
|
50
|
-
const buttonClass = '[display:flex] [align-items:center] [justify-content:center] [height:32px] [width:32px] [background:transparent] [border:0] [font-family:inherit] [font-size:18px] [cursor:pointer] disabled:[opacity:20%] disabled:[cursor:default]';
|
|
51
|
-
const sliderClass = '[flex:1]';
|
|
52
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Cropper, Object.assign({}, cropperProps, { ref: cropperRef, image: modalImage, crop: crop, zoom: zoom, rotation: rotation, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, zoomWithScroll: zoomSlider, cropShape: cropShape, showGrid: showGrid, onCropChange: setCrop, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
|
|
53
|
-
containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
|
|
54
|
-
mediaClassName: `${PREFIX}-media`,
|
|
55
|
-
} })), 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 < minAspect, children: "\u2195" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: minAspect, max: maxAspect, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect + ASPECT_STEP).toFixed(2)), disabled: aspect + ASPECT_STEP > maxAspect, children: "\u2194" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsxRuntime.jsx(AntButton, { className: "[position:absolute] [bottom:20px]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
|
|
56
|
-
});
|
|
57
|
-
var EasyCrop$1 = react.memo(EasyCrop);
|
|
58
|
-
|
|
59
|
-
var css_248z = "/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */.visible{visibility:visible}.\\!\\[position\\:relative\\]{position:relative!important}.\\[position\\:absolute\\]{position:absolute}.\\[bottom\\:20px\\]{bottom:20px}.container{width:100%}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[display\\:flex\\]{display:flex}.grid{display:grid}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.\\[width\\:100\\%\\]{width:100%}.\\[flex\\:1\\]{flex:1}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[align-items\\:center\\]{align-items:center}.\\[justify-content\\:center\\]{justify-content:center}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.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}}";
|
|
60
|
-
(function() {
|
|
61
|
-
if (typeof document === 'undefined') return;
|
|
62
|
-
const style = document.createElement('style');
|
|
63
|
-
const meta = document.querySelector('meta[name="csp-nonce"]');
|
|
64
|
-
if (meta && meta.content) style.setAttribute('nonce', meta.content);
|
|
65
|
-
style.textContent = css_248z;
|
|
66
|
-
document.head.appendChild(style);
|
|
67
|
-
})();
|
|
68
|
-
|
|
69
|
-
const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const modal_1 = tslib_1.__importDefault(require("antd/es/modal"));
|
|
7
|
+
const upload_1 = tslib_1.__importDefault(require("antd/es/upload"));
|
|
8
|
+
const react_1 = require("react");
|
|
9
|
+
const EasyCrop_1 = tslib_1.__importDefault(require("./EasyCrop"));
|
|
10
|
+
require("./ImgCrop.css");
|
|
11
|
+
const constants_1 = require("./constants");
|
|
12
|
+
const ImgCrop = (0, react_1.forwardRef)((props, cropperRef) => {
|
|
70
13
|
const { quality = 0.4, fillColor = 'white', zoomSlider = true, rotationSlider = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3, minAspect = 0.5, maxAspect = 2, cropShape = 'rect', showGrid = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
|
|
71
|
-
const cb =
|
|
14
|
+
const cb = (0, react_1.useRef)({});
|
|
72
15
|
cb.current.onModalOk = onModalOk;
|
|
73
16
|
cb.current.onModalCancel = onModalCancel;
|
|
74
17
|
cb.current.beforeCrop = beforeCrop;
|
|
75
18
|
/**
|
|
76
19
|
* crop
|
|
77
20
|
*/
|
|
78
|
-
const easyCropRef =
|
|
79
|
-
const getCropCanvas =
|
|
21
|
+
const easyCropRef = (0, react_1.useRef)(null);
|
|
22
|
+
const getCropCanvas = (0, react_1.useCallback)((target) => {
|
|
80
23
|
var _a;
|
|
81
24
|
const canvas = document.createElement('canvas');
|
|
82
25
|
const ctx = canvas.getContext('2d');
|
|
83
26
|
const context = ((_a = target === null || target === void 0 ? void 0 : target.getRootNode) === null || _a === void 0 ? void 0 : _a.call(target)) || document;
|
|
84
|
-
const imgSource = context.querySelector(`.${PREFIX}-media`);
|
|
27
|
+
const imgSource = context.querySelector(`.${constants_1.PREFIX}-media`);
|
|
85
28
|
const { width: cropWidth, height: cropHeight, x: cropX, y: cropY, } = easyCropRef.current.cropPixelsRef.current;
|
|
86
29
|
if (rotationSlider &&
|
|
87
|
-
easyCropRef.current.rotation !== ROTATION_INITIAL) {
|
|
30
|
+
easyCropRef.current.rotation !== constants_1.ROTATION_INITIAL) {
|
|
88
31
|
const { naturalWidth: imgWidth, naturalHeight: imgHeight } = imgSource;
|
|
89
32
|
const angle = easyCropRef.current.rotation * (Math.PI / 180);
|
|
90
33
|
// get container for rotated image
|
|
@@ -124,11 +67,11 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
124
67
|
/**
|
|
125
68
|
* upload
|
|
126
69
|
*/
|
|
127
|
-
const [modalOpen, setModalOpen] =
|
|
128
|
-
const [modalImage, setModalImage] =
|
|
129
|
-
const onCancel =
|
|
130
|
-
const onOk =
|
|
131
|
-
const runBeforeUpload =
|
|
70
|
+
const [modalOpen, setModalOpen] = (0, react_1.useState)(false);
|
|
71
|
+
const [modalImage, setModalImage] = (0, react_1.useState)('');
|
|
72
|
+
const onCancel = (0, react_1.useRef)(undefined);
|
|
73
|
+
const onOk = (0, react_1.useRef)(undefined);
|
|
74
|
+
const runBeforeUpload = (0, react_1.useCallback)((_a) => tslib_1.__awaiter(void 0, [_a], void 0, function* ({ beforeUpload, file, resolve, reject, }) {
|
|
132
75
|
const rawFile = file;
|
|
133
76
|
if (typeof beforeUpload !== 'function') {
|
|
134
77
|
resolve(rawFile);
|
|
@@ -149,9 +92,9 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
149
92
|
reject(err);
|
|
150
93
|
}
|
|
151
94
|
}), []);
|
|
152
|
-
const getNewBeforeUpload =
|
|
95
|
+
const getNewBeforeUpload = (0, react_1.useCallback)((beforeUpload) => {
|
|
153
96
|
return ((file, fileList) => {
|
|
154
|
-
return new Promise((resolve, reject) =>
|
|
97
|
+
return new Promise((resolve, reject) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
155
98
|
let processedFile = file;
|
|
156
99
|
if (typeof cb.current.beforeCrop === 'function') {
|
|
157
100
|
try {
|
|
@@ -190,17 +133,17 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
190
133
|
hasResolveCalled = true;
|
|
191
134
|
});
|
|
192
135
|
if (!hasResolveCalled) {
|
|
193
|
-
resolve(
|
|
136
|
+
resolve(upload_1.default.LIST_IGNORE);
|
|
194
137
|
}
|
|
195
138
|
};
|
|
196
139
|
// on modal confirm
|
|
197
|
-
onOk.current = (event) =>
|
|
140
|
+
onOk.current = (event) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
198
141
|
setModalOpen(false);
|
|
199
142
|
setModalImage('');
|
|
200
143
|
easyCropRef.current.onReset();
|
|
201
144
|
const canvas = getCropCanvas(event.target);
|
|
202
145
|
const { type, name, uid } = processedFile;
|
|
203
|
-
canvas.toBlob((blob) =>
|
|
146
|
+
canvas.toBlob((blob) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
204
147
|
const newFile = new File([blob], name, { type });
|
|
205
148
|
Object.assign(newFile, { uid });
|
|
206
149
|
runBeforeUpload({
|
|
@@ -222,15 +165,15 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
222
165
|
}));
|
|
223
166
|
});
|
|
224
167
|
}, [getCropCanvas, quality, runBeforeUpload]);
|
|
225
|
-
const getNewUpload =
|
|
168
|
+
const getNewUpload = (0, react_1.useCallback)((children) => {
|
|
226
169
|
const upload = Array.isArray(children) ? children[0] : children;
|
|
227
|
-
const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps =
|
|
170
|
+
const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps = tslib_1.__rest(_a, ["beforeUpload", "accept"]);
|
|
228
171
|
return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: getNewBeforeUpload(beforeUpload) }) });
|
|
229
172
|
}, [getNewBeforeUpload]);
|
|
230
173
|
/**
|
|
231
174
|
* modal
|
|
232
175
|
*/
|
|
233
|
-
const modalBaseProps =
|
|
176
|
+
const modalBaseProps = (0, react_1.useMemo)(() => {
|
|
234
177
|
const obj = {};
|
|
235
178
|
if (modalWidth !== undefined)
|
|
236
179
|
obj.width = modalWidth;
|
|
@@ -240,12 +183,11 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
240
183
|
obj.cancelText = modalCancel;
|
|
241
184
|
return obj;
|
|
242
185
|
}, [modalCancel, modalOk, modalWidth]);
|
|
243
|
-
const wrapClassName = `${PREFIX}-modal${modalClassName ? ` ${modalClassName}` : ''}`;
|
|
186
|
+
const wrapClassName = `${constants_1.PREFIX}-modal${modalClassName ? ` ${modalClassName}` : ''}`;
|
|
244
187
|
const lang = typeof window === 'undefined' ? '' : window.navigator.language;
|
|
245
188
|
const isCN = lang === 'zh-CN';
|
|
246
189
|
const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
|
|
247
190
|
const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
|
|
248
|
-
return (
|
|
191
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [getNewUpload(children), (0, jsx_runtime_1.jsx)(modal_1.default, Object.assign({}, modalProps, modalBaseProps, { open: modalOpen, title: title, onCancel: onCancel.current, onOk: onOk.current, wrapClassName: wrapClassName, maskClosable: false, destroyOnHidden: true, children: (0, jsx_runtime_1.jsx)(EasyCrop_1.default, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, resetBtnText: resetBtnText, modalImage: modalImage, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, minAspect: minAspect, maxAspect: maxAspect, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) }))] }));
|
|
249
192
|
});
|
|
250
|
-
|
|
251
|
-
module.exports = ImgCrop;
|
|
193
|
+
exports.default = ImgCrop;
|
package/dist/antd-img-crop.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { JSX } from 'react';
|
|
3
|
+
import Cropper, { CropperProps } from 'react-easy-crop';
|
|
3
4
|
import { UploadProps, ModalProps } from 'antd';
|
|
4
|
-
import { CropperProps } from 'react-easy-crop';
|
|
5
5
|
|
|
6
6
|
type BeforeUpload = Exclude<UploadProps['beforeUpload'], undefined>;
|
|
7
7
|
type BeforeUploadReturnType = ReturnType<BeforeUpload>;
|
|
8
|
-
type ImgCropProps
|
|
8
|
+
type ImgCropProps = {
|
|
9
9
|
quality?: number;
|
|
10
10
|
fillColor?: string;
|
|
11
11
|
zoomSlider?: boolean;
|
|
@@ -33,7 +33,7 @@ type ImgCropProps$1 = {
|
|
|
33
33
|
children: JSX.Element;
|
|
34
34
|
};
|
|
35
35
|
|
|
36
|
-
declare const ImgCrop: react.ForwardRefExoticComponent<
|
|
36
|
+
declare const ImgCrop: react.ForwardRefExoticComponent<ImgCropProps & react.RefAttributes<Cropper>>;
|
|
37
37
|
|
|
38
38
|
export { ImgCrop as default };
|
|
39
|
-
export type { ImgCropProps
|
|
39
|
+
export type { ImgCropProps };
|
|
@@ -54,7 +54,7 @@ const EasyCrop = forwardRef((props, ref) => {
|
|
|
54
54
|
});
|
|
55
55
|
var EasyCrop$1 = memo(EasyCrop);
|
|
56
56
|
|
|
57
|
-
var css_248z = "/*! tailwindcss v4.1.
|
|
57
|
+
var css_248z = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */.visible{visibility:visible}.\\!\\[position\\:relative\\]{position:relative!important}.\\[position\\:absolute\\]{position:absolute}.\\[bottom\\:20px\\]{bottom:20px}.container{width:100%}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[display\\:flex\\]{display:flex}.grid{display:grid}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.\\[width\\:100\\%\\]{width:100%}.\\[flex\\:1\\]{flex:1}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[align-items\\:center\\]{align-items:center}.\\[justify-content\\:center\\]{justify-content:center}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.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}}";
|
|
58
58
|
(function() {
|
|
59
59
|
if (typeof document === 'undefined') return;
|
|
60
60
|
const style = document.createElement('style');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "antd-img-crop",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.28.0",
|
|
4
4
|
"description": "An image cropper for Ant Design Upload",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -19,11 +19,18 @@
|
|
|
19
19
|
"main": "dist/antd-img-crop.cjs.js",
|
|
20
20
|
"module": "dist/antd-img-crop.esm.js",
|
|
21
21
|
"types": "dist/antd-img-crop.d.ts",
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"types": "./dist/antd-img-crop.d.ts",
|
|
25
|
+
"import": "./dist/antd-img-crop.esm.js",
|
|
26
|
+
"require": "./dist/antd-img-crop.cjs.js"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
22
29
|
"files": [
|
|
23
30
|
"dist"
|
|
24
31
|
],
|
|
25
32
|
"scripts": {
|
|
26
|
-
"build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript"
|
|
33
|
+
"build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript --bundleConfigAsCjs"
|
|
27
34
|
},
|
|
28
35
|
"peerDependencies": {
|
|
29
36
|
"antd": ">=4.0.0",
|
|
@@ -31,42 +38,42 @@
|
|
|
31
38
|
"react-dom": ">=16.8.0"
|
|
32
39
|
},
|
|
33
40
|
"dependencies": {
|
|
34
|
-
"react-easy-crop": "^5.5.
|
|
41
|
+
"react-easy-crop": "^5.5.6",
|
|
35
42
|
"tslib": "^2.8.1"
|
|
36
43
|
},
|
|
37
44
|
"devDependencies": {
|
|
38
|
-
"@eslint/compat": "^
|
|
39
|
-
"@eslint/eslintrc": "^3.3.
|
|
40
|
-
"@eslint/js": "^9.
|
|
41
|
-
"@rollup/plugin-replace": "^6.0.
|
|
42
|
-
"@rollup/plugin-typescript": "^12.
|
|
43
|
-
"@tailwindcss/postcss": "^4.1.
|
|
44
|
-
"@types/node": "^
|
|
45
|
-
"@types/react": "19.2.
|
|
46
|
-
"@types/react-dom": "19.2.
|
|
47
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
48
|
-
"@vitejs/plugin-react": "^5.
|
|
49
|
-
"antd": "^
|
|
50
|
-
"autoprefixer": "^10.4.
|
|
51
|
-
"eslint": "^9.
|
|
45
|
+
"@eslint/compat": "^2.0.2",
|
|
46
|
+
"@eslint/eslintrc": "^3.3.3",
|
|
47
|
+
"@eslint/js": "^9.39.2",
|
|
48
|
+
"@rollup/plugin-replace": "^6.0.3",
|
|
49
|
+
"@rollup/plugin-typescript": "^12.3.0",
|
|
50
|
+
"@tailwindcss/postcss": "^4.1.18",
|
|
51
|
+
"@types/node": "^25.2.0",
|
|
52
|
+
"@types/react": "19.2.11",
|
|
53
|
+
"@types/react-dom": "19.2.3",
|
|
54
|
+
"@typescript-eslint/eslint-plugin": "^8.54.0",
|
|
55
|
+
"@vitejs/plugin-react": "^5.1.3",
|
|
56
|
+
"antd": "^6.2.3",
|
|
57
|
+
"autoprefixer": "^10.4.24",
|
|
58
|
+
"eslint": "^9.39.2",
|
|
52
59
|
"eslint-config-prettier": "^10.1.8",
|
|
53
60
|
"eslint-config-react-app": "^7.0.1",
|
|
54
61
|
"eslint-plugin-flowtype": "^8.0.3",
|
|
55
62
|
"eslint-plugin-import": "^2.32.0",
|
|
56
63
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
57
64
|
"eslint-plugin-react": "^7.37.5",
|
|
58
|
-
"eslint-plugin-react-hooks": "^7.0.
|
|
65
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
59
66
|
"postcss": "^8.5.6",
|
|
60
|
-
"prettier": "^3.
|
|
67
|
+
"prettier": "^3.8.1",
|
|
61
68
|
"prettier-plugin-organize-imports": "^4.3.0",
|
|
62
|
-
"prettier-plugin-tailwindcss": "^0.
|
|
63
|
-
"react": "19.2.
|
|
64
|
-
"react-dom": "19.2.
|
|
65
|
-
"rollup": "4.
|
|
66
|
-
"rollup-plugin-dts": "^6.
|
|
69
|
+
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
70
|
+
"react": "19.2.4",
|
|
71
|
+
"react-dom": "19.2.4",
|
|
72
|
+
"rollup": "4.57.1",
|
|
73
|
+
"rollup-plugin-dts": "^6.3.0",
|
|
67
74
|
"rollup-plugin-postcss": "^4.0.2",
|
|
68
|
-
"tailwindcss": "^4.1.
|
|
75
|
+
"tailwindcss": "^4.1.18",
|
|
69
76
|
"typescript": "^5.9.3",
|
|
70
|
-
"vite": "^7.1
|
|
77
|
+
"vite": "^7.3.1"
|
|
71
78
|
}
|
|
72
79
|
}
|