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 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
+ [![Edit antd-img-crop](https://codesandbox.io/static/img/play-codesandbox.svg)](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
- [![Edit antd-img-crop](https://codesandbox.io/static/img/play-codesandbox.svg)](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
+ [![Edit antd-img-crop](https://codesandbox.io/static/img/play-codesandbox.svg)](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
- [![Edit antd-img-crop](https://codesandbox.io/static/img/play-codesandbox.svg)](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
- var tslib = require('tslib');
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var AntModal = require('antd/lib/modal');
6
- var AntUpload = require('antd/lib/upload');
7
- var react = require('react');
8
- var AntButton = require('antd/lib/button');
9
- var AntSlider = require('antd/lib/slider');
10
- var Cropper = require('react-easy-crop');
11
-
12
- const PREFIX = 'img-crop';
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 = react.useRef({});
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 = react.useRef(null);
79
- const getCropCanvas = react.useCallback((target) => {
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] = react.useState(false);
128
- const [modalImage, setModalImage] = react.useState('');
129
- const onCancel = react.useRef(undefined);
130
- const onOk = react.useRef(undefined);
131
- const runBeforeUpload = react.useCallback((_a) => tslib.__awaiter(void 0, [_a], void 0, function* ({ beforeUpload, file, resolve, reject, }) {
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 = react.useCallback((beforeUpload) => {
95
+ const getNewBeforeUpload = (0, react_1.useCallback)((beforeUpload) => {
153
96
  return ((file, fileList) => {
154
- return new Promise((resolve, reject) => tslib.__awaiter(void 0, void 0, void 0, function* () {
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(AntUpload.LIST_IGNORE);
136
+ resolve(upload_1.default.LIST_IGNORE);
194
137
  }
195
138
  };
196
139
  // on modal confirm
197
- onOk.current = (event) => tslib.__awaiter(void 0, void 0, void 0, function* () {
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) => tslib.__awaiter(void 0, void 0, void 0, function* () {
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 = react.useCallback((children) => {
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 = tslib.__rest(_a, ["beforeUpload", "accept"]);
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 = react.useMemo(() => {
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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getNewUpload(children), jsxRuntime.jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { open: modalOpen, title: title, onCancel: onCancel.current, onOk: onOk.current, wrapClassName: wrapClassName, maskClosable: false, destroyOnHidden: 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, minAspect: minAspect, maxAspect: maxAspect, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) }))] }));
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;
@@ -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$1 = {
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<Omit<ImgCropProps, "ref"> & react.RefAttributes<CropperRef>>;
36
+ declare const ImgCrop: react.ForwardRefExoticComponent<ImgCropProps & react.RefAttributes<Cropper>>;
37
37
 
38
38
  export { ImgCrop as default };
39
- export type { ImgCropProps$1 as 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.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}}";
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.27.0",
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.3",
41
+ "react-easy-crop": "^5.5.6",
35
42
  "tslib": "^2.8.1"
36
43
  },
37
44
  "devDependencies": {
38
- "@eslint/compat": "^1.4.0",
39
- "@eslint/eslintrc": "^3.3.1",
40
- "@eslint/js": "^9.37.0",
41
- "@rollup/plugin-replace": "^6.0.2",
42
- "@rollup/plugin-typescript": "^12.1.4",
43
- "@tailwindcss/postcss": "^4.1.14",
44
- "@types/node": "^24.7.1",
45
- "@types/react": "19.2.2",
46
- "@types/react-dom": "19.2.1",
47
- "@typescript-eslint/eslint-plugin": "^8.46.0",
48
- "@vitejs/plugin-react": "^5.0.4",
49
- "antd": "^5.27.4",
50
- "autoprefixer": "^10.4.21",
51
- "eslint": "^9.37.0",
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.0",
65
+ "eslint-plugin-react-hooks": "^7.0.1",
59
66
  "postcss": "^8.5.6",
60
- "prettier": "^3.6.2",
67
+ "prettier": "^3.8.1",
61
68
  "prettier-plugin-organize-imports": "^4.3.0",
62
- "prettier-plugin-tailwindcss": "^0.6.14",
63
- "react": "19.2.0",
64
- "react-dom": "19.2.0",
65
- "rollup": "4.52.4",
66
- "rollup-plugin-dts": "^6.2.3",
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.14",
75
+ "tailwindcss": "^4.1.18",
69
76
  "typescript": "^5.9.3",
70
- "vite": "^7.1.9"
77
+ "vite": "^7.3.1"
71
78
  }
72
79
  }