antd-img-crop 4.3.0 → 4.5.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.
Files changed (7) hide show
  1. package/README.md +4 -6
  2. package/README.zh-CN.md +4 -6
  3. package/dist/antd-img-crop.cjs.js +158 -261
  4. package/dist/antd-img-crop.d.ts +32 -0
  5. package/dist/antd-img-crop.esm.js +153 -256
  6. package/package.json +12 -13
  7. package/index.d.ts +0 -37
package/README.md CHANGED
@@ -6,7 +6,7 @@ An image cropper for Ant Design [Upload](https://ant.design/components/upload/)
6
6
  [![npm](https://img.shields.io/npm/dt/antd-img-crop?style=flat-square)](https://www.npmtrends.com/antd-img-crop)
7
7
  [![npm bundle size](https://img.shields.io/bundlephobia/minzip/antd-img-crop?style=flat-square)](https://bundlephobia.com/result?p=antd-img-crop)
8
8
  [![GitHub](https://img.shields.io/github/license/nanxiaobei/antd-img-crop?style=flat-square)](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE)
9
- [![npm type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)](https://github.com/nanxiaobei/antd-img-crop/blob/main/index.d.ts)
9
+ [![npm type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)](https://github.com/nanxiaobei/antd-img-crop/blob/main/src/types.ts)
10
10
 
11
11
  English | [简体中文](./README.zh-CN.md)
12
12
 
@@ -25,8 +25,8 @@ yarn add antd-img-crop
25
25
  ## Usage
26
26
 
27
27
  ```jsx harmony
28
- import ImgCrop from 'antd-img-crop';
29
28
  import { Upload } from 'antd';
29
+ import ImgCrop from 'antd-img-crop';
30
30
 
31
31
  const Demo = () => (
32
32
  <ImgCrop>
@@ -61,11 +61,9 @@ const Demo = () => (
61
61
  | onUploadFail | `function` | - | Call when upload failed |
62
62
  | cropperProps | `object` | - | Props of [react-easy-crop] (\* [existing props] cannot be overridden) |
63
63
 
64
- ## Styles
65
-
66
- To prevent overwriting the custom styles to `antd`, `antd-img-crop` does not import the style files of components.
64
+ ## Styles (before antd v5)
67
65
 
68
- Therefore, if you configured `babel-plugin-import` and no `Modal` or `Slider` were used, please import the styles manually:
66
+ Before antd v5, if you use `babel-plugin-import` and no `Modal` or `Slider` were used, please import the styles manually:
69
67
 
70
68
  ```js
71
69
  import 'antd/es/modal/style';
package/README.zh-CN.md CHANGED
@@ -6,7 +6,7 @@
6
6
  [![npm](https://img.shields.io/npm/dt/antd-img-crop?style=flat-square)](https://www.npmtrends.com/antd-img-crop)
7
7
  [![npm bundle size](https://img.shields.io/bundlephobia/minzip/antd-img-crop?style=flat-square)](https://bundlephobia.com/result?p=antd-img-crop)
8
8
  [![GitHub](https://img.shields.io/github/license/nanxiaobei/antd-img-crop?style=flat-square)](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE)
9
- [![npm type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)](https://github.com/nanxiaobei/antd-img-crop/blob/main/index.d.ts)
9
+ [![npm type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)](https://github.com/nanxiaobei/antd-img-crop/blob/main/src/types.ts)
10
10
 
11
11
  [English](./README.md) | 简体中文
12
12
 
@@ -25,8 +25,8 @@ yarn add antd-img-crop
25
25
  ## 使用
26
26
 
27
27
  ```jsx harmony
28
- import ImgCrop from 'antd-img-crop';
29
28
  import { Upload } from 'antd';
29
+ import ImgCrop from 'antd-img-crop';
30
30
 
31
31
  const Demo = () => (
32
32
  <ImgCrop>
@@ -61,11 +61,9 @@ const Demo = () => (
61
61
  | onUploadFail | `function` | - | 上传失败时的回调 |
62
62
  | cropperProps | `object` | - | [react-easy-crop] 的 props（\* [已有 props] 无法重写） |
63
63
 
64
- ## 样式
65
-
66
- 为防止覆盖 `antd` 自定义样式，`antd-img-crop` 没有引入组件样式。
64
+ ## 样式 (antd v5 之前)
67
65
 
68
- 因此，若项目配置了 `babel-plugin-import` 且未使用 `Modal` 或 `Slider`，请手动引入样式：
66
+ 在 antd v5 之前，若项目使用 `babel-plugin-import` 且未引入 `Modal` 或 `Slider`，请手动引入样式：
69
67
 
70
68
  ```js
71
69
  import 'antd/es/modal/style';
package/dist/antd-img-crop.cjs.js CHANGED
@@ -14,149 +14,66 @@ function __$styleInject(css) {
14
14
  return css;
15
15
  }
16
16
 
17
- var React = require('react');
17
+ var tslib = require('tslib');
18
+ var jsxRuntime = require('react/jsx-runtime');
19
+ var react = require('react');
18
20
  var antd = require('antd');
19
- var LocaleReceiver = require('antd/lib/locale-provider/LocaleReceiver');
20
- var AntModal = require('antd/lib/modal');
21
- var AntUpload = require('antd/lib/upload');
21
+ var LocaleReceiver = require('antd/es/locale-provider/LocaleReceiver');
22
+ var AntModal = require('antd/es/modal');
23
+ var AntUpload = require('antd/es/upload');
22
24
  var compareVersions = require('compare-versions');
23
25
  var Cropper = require('react-easy-crop');
24
- var AntSlider = require('antd/lib/slider');
26
+ var AntSlider = require('antd/es/slider');
25
27
 
26
- /******************************************************************************
27
- Copyright (c) Microsoft Corporation.
28
-
29
- Permission to use, copy, modify, and/or distribute this software for any
30
- purpose with or without fee is hereby granted.
31
-
32
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
33
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
34
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
35
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
36
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
37
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
38
- PERFORMANCE OF THIS SOFTWARE.
39
- ***************************************************************************** */
40
-
41
- var __assign = function() {
42
- __assign = Object.assign || function __assign(t) {
43
- for (var s, i = 1, n = arguments.length; i < n; i++) {
44
- s = arguments[i];
45
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
46
- }
47
- return t;
48
- };
49
- return __assign.apply(this, arguments);
50
- };
51
-
52
- function __rest(s, e) {
53
- var t = {};
54
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
55
- t[p] = s[p];
56
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
57
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
58
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
59
- t[p[i]] = s[p[i]];
60
- }
61
- return t;
62
- }
63
-
64
- function __awaiter(thisArg, _arguments, P, generator) {
65
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
66
- return new (P || (P = Promise))(function (resolve, reject) {
67
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
68
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
69
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
70
- step((generator = generator.apply(thisArg, _arguments || [])).next());
71
- });
72
- }
73
-
74
- function __generator(thisArg, body) {
75
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
76
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
77
- function verb(n) { return function (v) { return step([n, v]); }; }
78
- function step(op) {
79
- if (f) throw new TypeError("Generator is already executing.");
80
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
81
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
82
- if (y = 0, t) op = [op[0] & 2, t.value];
83
- switch (op[0]) {
84
- case 0: case 1: t = op; break;
85
- case 4: _.label++; return { value: op[1], done: false };
86
- case 5: _.label++; y = op[1]; op = [0]; continue;
87
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
88
- default:
89
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
90
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
91
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
92
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
93
- if (t[2]) _.ops.pop();
94
- _.trys.pop(); continue;
95
- }
96
- op = body.call(thisArg, _);
97
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
98
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
99
- }
100
- }
101
-
102
- var PREFIX = 'img-crop';
103
- var INIT_ZOOM = 1;
104
- var ZOOM_STEP = 0.1;
105
- var INIT_ROTATE = 0;
106
- var ROTATE_STEP = 1;
107
- var MIN_ROTATE = -180;
108
- var MAX_ROTATE = 180;
28
+ const PREFIX = 'img-crop';
29
+ const INIT_ZOOM = 1;
30
+ const ZOOM_STEP = 0.1;
31
+ const INIT_ROTATE = 0;
32
+ const ROTATE_STEP = 1;
33
+ const MIN_ROTATE = -180;
34
+ const MAX_ROTATE = 180;
109
35
 
110
- var EasyCrop = React.forwardRef(function (props, ref) {
111
- var cropperRef = props.cropperRef, image = props.image, aspect = props.aspect, shape = props.shape, grid = props.grid, zoom = props.zoom, rotate = props.rotate, minZoom = props.minZoom, maxZoom = props.maxZoom, cropperProps = props.cropperProps;
112
- var _a = React.useState({ x: 0, y: 0 }), crop = _a[0], onCropChange = _a[1];
113
- var _b = React.useState({ width: 0, height: 0 }), cropSize = _b[0], setCropSize = _b[1];
114
- var _c = React.useState(INIT_ZOOM), zoomVal = _c[0], setZoomVal = _c[1];
115
- var _d = React.useState(INIT_ROTATE), rotateVal = _d[0], setRotateVal = _d[1];
116
- var cropPixelsRef = React.useRef({ width: 0, height: 0, x: 0, y: 0 });
117
- var onMediaLoaded = React.useCallback(function (mediaSize) {
118
- var width = mediaSize.width, height = mediaSize.height;
119
- var ratioWidth = height * aspect;
36
+ const EasyCrop = react.forwardRef((props, ref) => {
37
+ const { cropperRef, image, aspect, shape, grid, zoom, rotate, minZoom, maxZoom, cropperProps, } = props;
38
+ const [crop, onCropChange] = react.useState({ x: 0, y: 0 });
39
+ const [cropSize, setCropSize] = react.useState({ width: 0, height: 0 });
40
+ const [zoomVal, setZoomVal] = react.useState(INIT_ZOOM);
41
+ const [rotateVal, setRotateVal] = react.useState(INIT_ROTATE);
42
+ const cropPixelsRef = react.useRef({ width: 0, height: 0, x: 0, y: 0 });
43
+ const onMediaLoaded = react.useCallback((mediaSize) => {
44
+ const { width, height } = mediaSize;
45
+ const ratioWidth = height * aspect;
120
46
  if (width > ratioWidth) {
121
- setCropSize({ width: ratioWidth, height: height });
47
+ setCropSize({ width: ratioWidth, height });
122
48
  }
123
49
  else {
124
- setCropSize({ width: width, height: width / aspect });
50
+ setCropSize({ width, height: width / aspect });
125
51
  }
126
52
  }, [aspect]);
127
- var onCropComplete = React.useCallback(function (croppedArea, croppedAreaPixels) {
53
+ const onCropComplete = react.useCallback((_, croppedAreaPixels) => {
128
54
  cropPixelsRef.current = croppedAreaPixels;
129
55
  }, []);
130
- React.useImperativeHandle(ref, function () { return ({
131
- rotateVal: rotateVal,
132
- setZoomVal: setZoomVal,
133
- setRotateVal: setRotateVal,
134
- cropPixelsRef: cropPixelsRef
135
- }); });
136
- return (React.createElement(React.Fragment, null,
137
- React.createElement(Cropper, __assign({}, cropperProps, { ref: cropperRef, image: image, crop: crop, cropSize: cropSize, onCropChange: onCropChange, aspect: aspect, cropShape: shape, showGrid: grid, zoomWithScroll: zoom, zoom: zoomVal, rotation: rotateVal, onZoomChange: setZoomVal, onRotationChange: setRotateVal, minZoom: minZoom, maxZoom: maxZoom, onMediaLoaded: onMediaLoaded, onCropComplete: onCropComplete, classes: {
138
- containerClassName: "".concat(PREFIX, "-container"),
139
- mediaClassName: "".concat(PREFIX, "-media")
140
- } })),
141
- zoom && (React.createElement("section", { className: "".concat(PREFIX, "-control ").concat(PREFIX, "-control-zoom") },
142
- React.createElement("button", { onClick: function () { return setZoomVal(zoomVal - ZOOM_STEP); }, disabled: zoomVal - ZOOM_STEP < minZoom }, "\uFF0D"),
143
- React.createElement(AntSlider, { min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoomVal, onChange: setZoomVal }),
144
- React.createElement("button", { onClick: function () { return setZoomVal(zoomVal + ZOOM_STEP); }, disabled: zoomVal + ZOOM_STEP > maxZoom }, "\uFF0B"))),
145
- rotate && (React.createElement("section", { className: "".concat(PREFIX, "-control ").concat(PREFIX, "-control-rotate") },
146
- React.createElement("button", { onClick: function () { return setRotateVal(rotateVal - ROTATE_STEP); }, disabled: rotateVal === MIN_ROTATE }, "\u21BA"),
147
- React.createElement(AntSlider, { min: MIN_ROTATE, max: MAX_ROTATE, step: ROTATE_STEP, value: rotateVal, onChange: setRotateVal }),
148
- React.createElement("button", { onClick: function () { return setRotateVal(rotateVal + ROTATE_STEP); }, disabled: rotateVal === MAX_ROTATE }, "\u21BB")))));
56
+ react.useImperativeHandle(ref, () => ({
57
+ rotateVal,
58
+ setZoomVal,
59
+ setRotateVal,
60
+ cropPixelsRef,
61
+ }));
62
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Cropper, Object.assign({}, cropperProps, { ref: cropperRef, image: image, crop: crop, cropSize: cropSize, onCropChange: onCropChange, aspect: aspect, cropShape: shape, showGrid: grid, zoomWithScroll: zoom, zoom: zoomVal, rotation: rotateVal, onZoomChange: setZoomVal, onRotationChange: setRotateVal, minZoom: minZoom, maxZoom: maxZoom, onMediaLoaded: onMediaLoaded, onCropComplete: onCropComplete, classes: {
63
+ containerClassName: `${PREFIX}-container`,
64
+ mediaClassName: `${PREFIX}-media`,
65
+ } })), zoom && (jsxRuntime.jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-zoom` }, { children: [jsxRuntime.jsx("button", Object.assign({ onClick: () => setZoomVal(zoomVal - ZOOM_STEP), disabled: zoomVal - ZOOM_STEP < minZoom }, { children: "\uFF0D" })), jsxRuntime.jsx(AntSlider, { min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoomVal, onChange: setZoomVal }), jsxRuntime.jsx("button", Object.assign({ onClick: () => setZoomVal(zoomVal + ZOOM_STEP), disabled: zoomVal + ZOOM_STEP > maxZoom }, { children: "\uFF0B" }))] }))), rotate && (jsxRuntime.jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-rotate` }, { children: [jsxRuntime.jsx("button", Object.assign({ onClick: () => setRotateVal(rotateVal - ROTATE_STEP), disabled: rotateVal === MIN_ROTATE }, { children: "\u21BA" })), jsxRuntime.jsx(AntSlider, { min: MIN_ROTATE, max: MAX_ROTATE, step: ROTATE_STEP, value: rotateVal, onChange: setRotateVal }), jsxRuntime.jsx("button", Object.assign({ onClick: () => setRotateVal(rotateVal + ROTATE_STEP), disabled: rotateVal === MAX_ROTATE }, { children: "\u21BB" }))] })))] }));
149
66
  });
150
- var EasyCrop$1 = React.memo(EasyCrop);
67
+ var EasyCrop$1 = react.memo(EasyCrop);
151
68
 
152
69
  __$styleInject(".img-crop-modal .img-crop-container {\n position: relative;\n width: 100%;\n height: 40vh;\n}\n.img-crop-modal .img-crop-control {\n display: flex;\n align-items: center;\n width: 60%;\n margin-left: auto;\n margin-right: auto;\n}\n.img-crop-modal .img-crop-control:first-of-type {\n margin-top: 16px;\n}\n.img-crop-modal .img-crop-control:last-of-type {\n margin-bottom: -8px;\n}\n.img-crop-modal .img-crop-control button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 34px;\n height: 34px;\n padding: 0;\n font-style: normal;\n background: transparent;\n border: 0;\n outline: 0;\n cursor: pointer;\n}\n.img-crop-modal .img-crop-control button[disabled] {\n cursor: default;\n}\n.img-crop-modal .img-crop-control button + div:only-of-type {\n flex: 1;\n margin: 0 8px;\n}\n.img-crop-modal .img-crop-control-zoom button {\n font-size: 18px;\n}\n.img-crop-modal .img-crop-control-rotate button {\n font-size: 16px;\n}\n.img-crop-modal .img-crop-control-rotate button:first-of-type {\n transform: rotate(-20deg);\n}\n.img-crop-modal .img-crop-control-rotate button:last-of-type {\n transform: rotate(20deg);\n}\n");
153
70
 
154
- var propVisible = compareVersions.compareVersions(antd.version, '4.23.0') === -1
71
+ const modalVisibleProp = compareVersions.compareVersions(antd.version, '4.23.0') === -1
155
72
  ? { visible: true }
156
73
  : { open: true };
157
- var ImgCrop = React.forwardRef(function (props, ref) {
158
- var _a = props.aspect, aspect = _a === void 0 ? 1 : _a, _b = props.shape, shape = _b === void 0 ? 'rect' : _b, _c = props.grid, grid = _c === void 0 ? false : _c, _d = props.quality, quality = _d === void 0 ? 0.4 : _d, _e = props.fillColor, fillColor = _e === void 0 ? 'white' : _e, _f = props.zoom, zoom = _f === void 0 ? true : _f, _g = props.rotate, rotate = _g === void 0 ? false : _g, _h = props.minZoom, minZoom = _h === void 0 ? 1 : _h, _j = props.maxZoom, maxZoom = _j === void 0 ? 3 : _j, modalTitle = props.modalTitle, modalWidth = props.modalWidth, modalOk = props.modalOk, modalCancel = props.modalCancel, modalMaskTransitionName = props.modalMaskTransitionName, modalTransitionName = props.modalTransitionName, modalClassName = props.modalClassName, onModalOk = props.onModalOk, onModalCancel = props.onModalCancel, beforeCrop = props.beforeCrop, onUploadFail = props.onUploadFail, cropperProps = props.cropperProps, children = props.children;
159
- var cb = React.useRef({});
74
+ const ImgCrop = react.forwardRef((props, cropperRef) => {
75
+ const { aspect = 1, shape = 'rect', grid = false, quality = 0.4, fillColor = 'white', zoom = true, rotate = false, minZoom = 1, maxZoom = 3, modalTitle, modalWidth, modalOk, modalCancel, modalMaskTransitionName, modalTransitionName, modalClassName, onModalOk, onModalCancel, beforeCrop, onUploadFail, cropperProps, children, } = props;
76
+ const cb = react.useRef({});
160
77
  cb.current.onModalOk = onModalOk;
161
78
  cb.current.onModalCancel = onModalCancel;
162
79
  cb.current.beforeCrop = beforeCrop;
@@ -164,72 +81,64 @@ var ImgCrop = React.forwardRef(function (props, ref) {
164
81
  /**
165
82
  * Upload
166
83
  */
167
- var _k = React.useState(''), image = _k[0], setImage = _k[1];
168
- var fileRef = React.useRef();
169
- var beforeUploadRef = React.useRef();
170
- var resolveRef = React.useRef();
171
- var rejectRef = React.useRef();
172
- var uploadComponent = React.useMemo(function () {
173
- var upload = Array.isArray(children) ? children[0] : children;
174
- var _a = upload.props, beforeUpload = _a.beforeUpload, accept = _a.accept, restUploadProps = __rest(_a, ["beforeUpload", "accept"]);
84
+ const [image, setImage] = react.useState('');
85
+ const fileRef = react.useRef({});
86
+ const beforeUploadRef = react.useRef();
87
+ const resolveRef = react.useRef(() => { });
88
+ const rejectRef = react.useRef(() => { });
89
+ const uploadComponent = react.useMemo(() => {
90
+ const upload = Array.isArray(children) ? children[0] : children;
91
+ const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps = tslib.__rest(_a, ["beforeUpload", "accept"]);
175
92
  beforeUploadRef.current = beforeUpload;
176
- return __assign(__assign({}, upload), { props: __assign(__assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: function (file, fileList) {
177
- return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
178
- var shouldCrop, reader;
179
- return __generator(this, function (_a) {
180
- switch (_a.label) {
181
- case 0:
182
- if (!cb.current.beforeCrop) return [3 /*break*/, 2];
183
- return [4 /*yield*/, cb.current.beforeCrop(file, fileList)];
184
- case 1:
185
- shouldCrop = _a.sent();
186
- if (!shouldCrop) {
187
- return [2 /*return*/, reject()];
188
- }
189
- _a.label = 2;
190
- case 2:
191
- fileRef.current = file;
192
- resolveRef.current = function (newFile) {
193
- var _a, _b;
194
- (_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
195
- resolve(newFile);
196
- };
197
- rejectRef.current = function (uploadErr) {
198
- var _a, _b;
199
- (_b = (_a = cb.current).onUploadFail) === null || _b === void 0 ? void 0 : _b.call(_a, uploadErr);
200
- reject();
201
- };
202
- reader = new FileReader();
203
- reader.addEventListener('load', function () {
204
- if (typeof reader.result === 'string') {
205
- setImage(reader.result);
206
- }
207
- });
208
- reader.readAsDataURL(file);
209
- return [2 /*return*/];
93
+ return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: (file, fileList) => {
94
+ return new Promise((resolve, reject) => tslib.__awaiter(void 0, void 0, void 0, function* () {
95
+ if (cb.current.beforeCrop) {
96
+ const shouldCrop = yield cb.current.beforeCrop(file, fileList);
97
+ if (!shouldCrop) {
98
+ return reject();
99
+ }
100
+ }
101
+ fileRef.current = file;
102
+ resolveRef.current = (newFile) => {
103
+ var _a, _b;
104
+ (_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
105
+ resolve(newFile);
106
+ };
107
+ rejectRef.current = (uploadErr) => {
108
+ var _a, _b;
109
+ (_b = (_a = cb.current).onUploadFail) === null || _b === void 0 ? void 0 : _b.call(_a, uploadErr);
110
+ reject();
111
+ };
112
+ const reader = new FileReader();
113
+ reader.addEventListener('load', () => {
114
+ if (typeof reader.result === 'string') {
115
+ setImage(reader.result);
210
116
  }
211
117
  });
212
- }); });
118
+ reader.readAsDataURL(file);
119
+ }));
213
120
  } }) });
214
121
  }, [children]);
215
122
  /**
216
123
  * Crop
217
124
  */
218
- var easyCropRef = React.useRef({});
125
+ const easyCropRef = react.useRef({});
219
126
  /**
220
127
  * Modal
221
128
  */
222
- var modalProps = React.useMemo(function () {
223
- var obj = {
129
+ const modalProps = react.useMemo(() => {
130
+ const obj = {
224
131
  width: modalWidth,
225
132
  okText: modalOk,
226
133
  cancelText: modalCancel,
227
134
  maskTransitionName: modalMaskTransitionName,
228
- transitionName: modalTransitionName
135
+ transitionName: modalTransitionName,
229
136
  };
230
- Object.keys(obj).forEach(function (key) {
231
- if (!obj[key])
137
+ Object.keys(obj).forEach((prop) => {
138
+ const key = prop;
139
+ if (obj[key] === undefined) {
232
140
  delete obj[key];
141
+ }
233
142
  });
234
143
  return obj;
235
144
  }, [
@@ -239,107 +148,95 @@ var ImgCrop = React.forwardRef(function (props, ref) {
239
148
  modalTransitionName,
240
149
  modalWidth,
241
150
  ]);
242
- var onClose = function () {
151
+ const onClose = () => {
243
152
  setImage('');
244
153
  easyCropRef.current.setZoomVal(INIT_ZOOM);
245
154
  easyCropRef.current.setRotateVal(INIT_ROTATE);
246
155
  };
247
- var onCancel = React.useCallback(function () {
156
+ const onCancel = react.useCallback(() => {
248
157
  var _a, _b;
249
158
  (_b = (_a = cb.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
250
159
  onClose();
251
160
  }, []);
252
- var onOk = React.useCallback(function (event) { return __awaiter(void 0, void 0, void 0, function () {
253
- var canvas, ctx, target, context, imgSource, _a, cropWidth, cropHeight, cropX, cropY, imgWidth, imgHeight, angle, sine, cosine, squareWidth, squareHeight, squareHalfWidth, squareHalfHeight, imgX, imgY, imgData, _b, type, name, uid;
254
- var _c;
255
- return __generator(this, function (_d) {
256
- onClose();
257
- canvas = document.createElement('canvas');
258
- ctx = canvas.getContext('2d');
259
- target = event.target;
260
- context = ((_c = target === null || target === void 0 ? void 0 : target.getRootNode) === null || _c === void 0 ? void 0 : _c.call(target)) || document;
261
- imgSource = context.querySelector(".".concat(PREFIX, "-media"));
262
- _a = easyCropRef.current.cropPixelsRef.current, cropWidth = _a.width, cropHeight = _a.height, cropX = _a.x, cropY = _a.y;
263
- if (rotate && easyCropRef.current.rotateVal !== INIT_ROTATE) {
264
- imgWidth = imgSource.naturalWidth, imgHeight = imgSource.naturalHeight;
265
- angle = easyCropRef.current.rotateVal * (Math.PI / 180);
266
- sine = Math.abs(Math.sin(angle));
267
- cosine = Math.abs(Math.cos(angle));
268
- squareWidth = imgWidth * cosine + imgHeight * sine;
269
- squareHeight = imgHeight * cosine + imgWidth * sine;
270
- canvas.width = squareWidth;
271
- canvas.height = squareHeight;
272
- ctx.fillStyle = fillColor;
273
- ctx.fillRect(0, 0, squareWidth, squareHeight);
274
- squareHalfWidth = squareWidth / 2;
275
- squareHalfHeight = squareHeight / 2;
276
- ctx.translate(squareHalfWidth, squareHalfHeight);
277
- ctx.rotate(angle);
278
- ctx.translate(-squareHalfWidth, -squareHalfHeight);
279
- imgX = (squareWidth - imgWidth) / 2;
280
- imgY = (squareHeight - imgHeight) / 2;
281
- ctx.drawImage(imgSource, 0, 0, imgWidth, imgHeight, imgX, imgY, imgWidth, imgHeight);
282
- imgData = ctx.getImageData(0, 0, squareWidth, squareHeight);
283
- canvas.width = cropWidth;
284
- canvas.height = cropHeight;
285
- ctx.putImageData(imgData, -cropX, -cropY);
161
+ const onOk = react.useCallback((event) => tslib.__awaiter(void 0, void 0, void 0, function* () {
162
+ var _a;
163
+ onClose();
164
+ const canvas = document.createElement('canvas');
165
+ const ctx = canvas.getContext('2d');
166
+ const target = event.target;
167
+ const context = ((_a = target === null || target === void 0 ? void 0 : target.getRootNode) === null || _a === void 0 ? void 0 : _a.call(target)) || document;
168
+ const imgSource = context.querySelector(`.${PREFIX}-media`);
169
+ const { width: cropWidth, height: cropHeight, x: cropX, y: cropY, } = easyCropRef.current.cropPixelsRef.current;
170
+ if (rotate && easyCropRef.current.rotateVal !== INIT_ROTATE) {
171
+ const { naturalWidth: imgWidth, naturalHeight: imgHeight } = imgSource;
172
+ const angle = easyCropRef.current.rotateVal * (Math.PI / 180);
173
+ // get container for rotated image
174
+ const sine = Math.abs(Math.sin(angle));
175
+ const cosine = Math.abs(Math.cos(angle));
176
+ const squareWidth = imgWidth * cosine + imgHeight * sine;
177
+ const squareHeight = imgHeight * cosine + imgWidth * sine;
178
+ canvas.width = squareWidth;
179
+ canvas.height = squareHeight;
180
+ ctx.fillStyle = fillColor;
181
+ ctx.fillRect(0, 0, squareWidth, squareHeight);
182
+ // rotate container
183
+ const squareHalfWidth = squareWidth / 2;
184
+ const squareHalfHeight = squareHeight / 2;
185
+ ctx.translate(squareHalfWidth, squareHalfHeight);
186
+ ctx.rotate(angle);
187
+ ctx.translate(-squareHalfWidth, -squareHalfHeight);
188
+ // draw rotated image
189
+ const imgX = (squareWidth - imgWidth) / 2;
190
+ const imgY = (squareHeight - imgHeight) / 2;
191
+ ctx.drawImage(imgSource, 0, 0, imgWidth, imgHeight, imgX, imgY, imgWidth, imgHeight);
192
+ // crop rotated image
193
+ const imgData = ctx.getImageData(0, 0, squareWidth, squareHeight);
194
+ canvas.width = cropWidth;
195
+ canvas.height = cropHeight;
196
+ ctx.putImageData(imgData, -cropX, -cropY);
197
+ }
198
+ else {
199
+ canvas.width = cropWidth;
200
+ canvas.height = cropHeight;
201
+ ctx.fillStyle = fillColor;
202
+ ctx.fillRect(0, 0, cropWidth, cropHeight);
203
+ ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
204
+ }
205
+ // get the new image
206
+ const { type, name, uid, lastModifiedDate } = fileRef.current;
207
+ canvas.toBlob((blob) => tslib.__awaiter(void 0, void 0, void 0, function* () {
208
+ const newFile = Object.assign(new File([blob], name, { type }), { uid, lastModifiedDate });
209
+ if (!beforeUploadRef.current) {
210
+ return resolveRef.current(newFile);
286
211
  }
287
- else {
288
- canvas.width = cropWidth;
289
- canvas.height = cropHeight;
290
- ctx.fillStyle = fillColor;
291
- ctx.fillRect(0, 0, cropWidth, cropHeight);
292
- ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
212
+ const rcFile = newFile;
213
+ const result = yield beforeUploadRef.current(rcFile, [rcFile]);
214
+ if (result === true) {
215
+ return resolveRef.current(newFile);
293
216
  }
294
- _b = fileRef.current, type = _b.type, name = _b.name, uid = _b.uid;
295
- canvas.toBlob(function (blob) { return __awaiter(void 0, void 0, void 0, function () {
296
- var newFile, result;
297
- return __generator(this, function (_a) {
298
- switch (_a.label) {
299
- case 0:
300
- newFile = Object.assign(new File([blob], name, { type: type }), {
301
- uid: uid
302
- });
303
- if (!beforeUploadRef.current) {
304
- return [2 /*return*/, resolveRef.current(newFile)];
305
- }
306
- return [4 /*yield*/, beforeUploadRef.current(newFile, [newFile])];
307
- case 1:
308
- result = _a.sent();
309
- if (result === true) {
310
- return [2 /*return*/, resolveRef.current(newFile)];
311
- }
312
- if (result === false) {
313
- return [2 /*return*/, rejectRef.current(new Error('beforeUpload return false'))];
314
- }
315
- delete newFile[AntUpload.LIST_IGNORE];
316
- if (result === AntUpload.LIST_IGNORE) {
317
- Object.defineProperty(newFile, AntUpload.LIST_IGNORE, {
318
- value: true,
319
- configurable: true
320
- });
321
- return [2 /*return*/, rejectRef.current(new Error('beforeUpload return LIST_IGNORE'))];
322
- }
323
- if (typeof result === 'object' && result !== null) {
324
- return [2 /*return*/, resolveRef.current(result)];
325
- }
326
- return [2 /*return*/];
327
- }
217
+ if (result === false) {
218
+ return rejectRef.current(new Error('beforeUpload return false'));
219
+ }
220
+ delete newFile[AntUpload.LIST_IGNORE];
221
+ if (result === AntUpload.LIST_IGNORE) {
222
+ Object.defineProperty(newFile, AntUpload.LIST_IGNORE, {
223
+ value: true,
224
+ configurable: true,
328
225
  });
329
- }); }, type, quality);
330
- return [2 /*return*/];
331
- });
332
- }); }, [fillColor, quality, rotate]);
333
- var getComponent = function (titleOfModal) { return (React.createElement(React.Fragment, null,
334
- uploadComponent,
335
- image && (React.createElement(AntModal, __assign({}, propVisible, { wrapClassName: "".concat(PREFIX, "-modal ").concat(modalClassName || ''), title: titleOfModal, onOk: onOk, onCancel: onCancel, maskClosable: false, destroyOnClose: true }, modalProps),
336
- React.createElement(EasyCrop$1, { ref: easyCropRef, cropperRef: ref, image: image, aspect: aspect, shape: shape, grid: grid, zoom: zoom, rotate: rotate, minZoom: minZoom, maxZoom: maxZoom, cropperProps: cropperProps }))))); };
226
+ return rejectRef.current(new Error('beforeUpload return LIST_IGNORE'));
227
+ }
228
+ if (typeof result === 'object' && result !== null) {
229
+ return resolveRef.current(result);
230
+ }
231
+ }), type, quality);
232
+ }), [fillColor, quality, rotate]);
233
+ const getComponent = (titleOfModal) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [uploadComponent, image && (jsxRuntime.jsx(AntModal, Object.assign({}, modalVisibleProp, { wrapClassName: `${PREFIX}-modal ${modalClassName || ''}`, title: titleOfModal, onOk: onOk, onCancel: onCancel, maskClosable: false, destroyOnClose: true }, modalProps, { children: jsxRuntime.jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, image: image, aspect: aspect, shape: shape, grid: grid, zoom: zoom, rotate: rotate, minZoom: minZoom, maxZoom: maxZoom, cropperProps: cropperProps }) })))] }));
337
234
  if (modalTitle) {
338
235
  return getComponent(modalTitle);
339
236
  }
340
- return (React.createElement(LocaleReceiver.default, null, function (locale, code) {
341
- return getComponent(code === 'zh-cn' ? '编辑图片' : 'Edit image');
342
- }));
237
+ return (jsxRuntime.jsx(LocaleReceiver, { children: (_, code) => {
238
+ return getComponent(code === 'zh-cn' ? '编辑图片' : 'Edit image');
239
+ } }));
343
240
  });
344
241
 
345
242
  module.exports = ImgCrop;
package/dist/antd-img-crop.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ import * as react from 'react';
2
+ import Cropper, { CropperProps } from 'react-easy-crop';
3
+ import { RcFile } from 'antd/es/upload/interface';
4
+
5
+ type ImgCropProps = {
6
+ aspect?: number;
7
+ shape?: 'rect' | 'round';
8
+ grid?: boolean;
9
+ quality?: number;
10
+ fillColor?: string;
11
+ zoom?: boolean;
12
+ rotate?: boolean;
13
+ minZoom?: number;
14
+ maxZoom?: number;
15
+ modalTitle?: string;
16
+ modalWidth?: number | string;
17
+ modalOk?: string;
18
+ modalCancel?: string;
19
+ modalMaskTransitionName?: string;
20
+ modalClassName?: string;
21
+ modalTransitionName?: string;
22
+ onModalOk?: (file: void | boolean | string | Blob | File) => void;
23
+ onModalCancel?: () => void;
24
+ beforeCrop?: (file: RcFile, fileList: RcFile[]) => boolean | Promise<boolean>;
25
+ onUploadFail?: (err: Error) => void;
26
+ cropperProps?: Partial<CropperProps>;
27
+ children: JSX.Element;
28
+ };
29
+
30
+ declare const ImgCrop: react.ForwardRefExoticComponent<ImgCropProps & react.RefAttributes<Cropper>>;
31
+
32
+ export { ImgCrop as default };
package/dist/antd-img-crop.esm.js CHANGED
@@ -10,7 +10,9 @@ function __$styleInject(css) {
10
10
  return css;
11
11
  }
12
12
 
13
- import React, { forwardRef, useState, useRef, useCallback, useImperativeHandle, memo, useMemo } from 'react';
13
+ import { __rest, __awaiter } from 'tslib';
14
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
15
+ import { forwardRef, useState, useRef, useCallback, useImperativeHandle, memo, useMemo } from 'react';
14
16
  import { version } from 'antd';
15
17
  import LocaleReceiver from 'antd/es/locale-provider/LocaleReceiver';
16
18
  import AntModal from 'antd/es/modal';
@@ -19,140 +21,55 @@ import { compareVersions } from 'compare-versions';
19
21
  import Cropper from 'react-easy-crop';
20
22
  import AntSlider from 'antd/es/slider';
21
23
 
22
- /******************************************************************************
23
- Copyright (c) Microsoft Corporation.
24
-
25
- Permission to use, copy, modify, and/or distribute this software for any
26
- purpose with or without fee is hereby granted.
27
-
28
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
29
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
30
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
31
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
32
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
33
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
34
- PERFORMANCE OF THIS SOFTWARE.
35
- ***************************************************************************** */
36
-
37
- var __assign = function() {
38
- __assign = Object.assign || function __assign(t) {
39
- for (var s, i = 1, n = arguments.length; i < n; i++) {
40
- s = arguments[i];
41
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
42
- }
43
- return t;
44
- };
45
- return __assign.apply(this, arguments);
46
- };
47
-
48
- function __rest(s, e) {
49
- var t = {};
50
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
51
- t[p] = s[p];
52
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
53
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
54
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
55
- t[p[i]] = s[p[i]];
56
- }
57
- return t;
58
- }
59
-
60
- function __awaiter(thisArg, _arguments, P, generator) {
61
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
62
- return new (P || (P = Promise))(function (resolve, reject) {
63
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
64
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
65
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
66
- step((generator = generator.apply(thisArg, _arguments || [])).next());
67
- });
68
- }
69
-
70
- function __generator(thisArg, body) {
71
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
72
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
73
- function verb(n) { return function (v) { return step([n, v]); }; }
74
- function step(op) {
75
- if (f) throw new TypeError("Generator is already executing.");
76
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
77
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
78
- if (y = 0, t) op = [op[0] & 2, t.value];
79
- switch (op[0]) {
80
- case 0: case 1: t = op; break;
81
- case 4: _.label++; return { value: op[1], done: false };
82
- case 5: _.label++; y = op[1]; op = [0]; continue;
83
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
84
- default:
85
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
86
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
87
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
88
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
89
- if (t[2]) _.ops.pop();
90
- _.trys.pop(); continue;
91
- }
92
- op = body.call(thisArg, _);
93
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
94
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
95
- }
96
- }
97
-
98
- var PREFIX = 'img-crop';
99
- var INIT_ZOOM = 1;
100
- var ZOOM_STEP = 0.1;
101
- var INIT_ROTATE = 0;
102
- var ROTATE_STEP = 1;
103
- var MIN_ROTATE = -180;
104
- var MAX_ROTATE = 180;
24
+ const PREFIX = 'img-crop';
25
+ const INIT_ZOOM = 1;
26
+ const ZOOM_STEP = 0.1;
27
+ const INIT_ROTATE = 0;
28
+ const ROTATE_STEP = 1;
29
+ const MIN_ROTATE = -180;
30
+ const MAX_ROTATE = 180;
105
31
 
106
- var EasyCrop = forwardRef(function (props, ref) {
107
- var cropperRef = props.cropperRef, image = props.image, aspect = props.aspect, shape = props.shape, grid = props.grid, zoom = props.zoom, rotate = props.rotate, minZoom = props.minZoom, maxZoom = props.maxZoom, cropperProps = props.cropperProps;
108
- var _a = useState({ x: 0, y: 0 }), crop = _a[0], onCropChange = _a[1];
109
- var _b = useState({ width: 0, height: 0 }), cropSize = _b[0], setCropSize = _b[1];
110
- var _c = useState(INIT_ZOOM), zoomVal = _c[0], setZoomVal = _c[1];
111
- var _d = useState(INIT_ROTATE), rotateVal = _d[0], setRotateVal = _d[1];
112
- var cropPixelsRef = useRef({ width: 0, height: 0, x: 0, y: 0 });
113
- var onMediaLoaded = useCallback(function (mediaSize) {
114
- var width = mediaSize.width, height = mediaSize.height;
115
- var ratioWidth = height * aspect;
32
+ const EasyCrop = forwardRef((props, ref) => {
33
+ const { cropperRef, image, aspect, shape, grid, zoom, rotate, minZoom, maxZoom, cropperProps, } = props;
34
+ const [crop, onCropChange] = useState({ x: 0, y: 0 });
35
+ const [cropSize, setCropSize] = useState({ width: 0, height: 0 });
36
+ const [zoomVal, setZoomVal] = useState(INIT_ZOOM);
37
+ const [rotateVal, setRotateVal] = useState(INIT_ROTATE);
38
+ const cropPixelsRef = useRef({ width: 0, height: 0, x: 0, y: 0 });
39
+ const onMediaLoaded = useCallback((mediaSize) => {
40
+ const { width, height } = mediaSize;
41
+ const ratioWidth = height * aspect;
116
42
  if (width > ratioWidth) {
117
- setCropSize({ width: ratioWidth, height: height });
43
+ setCropSize({ width: ratioWidth, height });
118
44
  }
119
45
  else {
120
- setCropSize({ width: width, height: width / aspect });
46
+ setCropSize({ width, height: width / aspect });
121
47
  }
122
48
  }, [aspect]);
123
- var onCropComplete = useCallback(function (croppedArea, croppedAreaPixels) {
49
+ const onCropComplete = useCallback((_, croppedAreaPixels) => {
124
50
  cropPixelsRef.current = croppedAreaPixels;
125
51
  }, []);
126
- useImperativeHandle(ref, function () { return ({
127
- rotateVal: rotateVal,
128
- setZoomVal: setZoomVal,
129
- setRotateVal: setRotateVal,
130
- cropPixelsRef: cropPixelsRef
131
- }); });
132
- return (React.createElement(React.Fragment, null,
133
- React.createElement(Cropper, __assign({}, cropperProps, { ref: cropperRef, image: image, crop: crop, cropSize: cropSize, onCropChange: onCropChange, aspect: aspect, cropShape: shape, showGrid: grid, zoomWithScroll: zoom, zoom: zoomVal, rotation: rotateVal, onZoomChange: setZoomVal, onRotationChange: setRotateVal, minZoom: minZoom, maxZoom: maxZoom, onMediaLoaded: onMediaLoaded, onCropComplete: onCropComplete, classes: {
134
- containerClassName: "".concat(PREFIX, "-container"),
135
- mediaClassName: "".concat(PREFIX, "-media")
136
- } })),
137
- zoom && (React.createElement("section", { className: "".concat(PREFIX, "-control ").concat(PREFIX, "-control-zoom") },
138
- React.createElement("button", { onClick: function () { return setZoomVal(zoomVal - ZOOM_STEP); }, disabled: zoomVal - ZOOM_STEP < minZoom }, "\uFF0D"),
139
- React.createElement(AntSlider, { min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoomVal, onChange: setZoomVal }),
140
- React.createElement("button", { onClick: function () { return setZoomVal(zoomVal + ZOOM_STEP); }, disabled: zoomVal + ZOOM_STEP > maxZoom }, "\uFF0B"))),
141
- rotate && (React.createElement("section", { className: "".concat(PREFIX, "-control ").concat(PREFIX, "-control-rotate") },
142
- React.createElement("button", { onClick: function () { return setRotateVal(rotateVal - ROTATE_STEP); }, disabled: rotateVal === MIN_ROTATE }, "\u21BA"),
143
- React.createElement(AntSlider, { min: MIN_ROTATE, max: MAX_ROTATE, step: ROTATE_STEP, value: rotateVal, onChange: setRotateVal }),
144
- React.createElement("button", { onClick: function () { return setRotateVal(rotateVal + ROTATE_STEP); }, disabled: rotateVal === MAX_ROTATE }, "\u21BB")))));
52
+ useImperativeHandle(ref, () => ({
53
+ rotateVal,
54
+ setZoomVal,
55
+ setRotateVal,
56
+ cropPixelsRef,
57
+ }));
58
+ return (jsxs(Fragment, { children: [jsx(Cropper, Object.assign({}, cropperProps, { ref: cropperRef, image: image, crop: crop, cropSize: cropSize, onCropChange: onCropChange, aspect: aspect, cropShape: shape, showGrid: grid, zoomWithScroll: zoom, zoom: zoomVal, rotation: rotateVal, onZoomChange: setZoomVal, onRotationChange: setRotateVal, minZoom: minZoom, maxZoom: maxZoom, onMediaLoaded: onMediaLoaded, onCropComplete: onCropComplete, classes: {
59
+ containerClassName: `${PREFIX}-container`,
60
+ mediaClassName: `${PREFIX}-media`,
61
+ } })), zoom && (jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-zoom` }, { children: [jsx("button", Object.assign({ onClick: () => setZoomVal(zoomVal - ZOOM_STEP), disabled: zoomVal - ZOOM_STEP < minZoom }, { children: "\uFF0D" })), jsx(AntSlider, { min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoomVal, onChange: setZoomVal }), jsx("button", Object.assign({ onClick: () => setZoomVal(zoomVal + ZOOM_STEP), disabled: zoomVal + ZOOM_STEP > maxZoom }, { children: "\uFF0B" }))] }))), rotate && (jsxs("section", Object.assign({ className: `${PREFIX}-control ${PREFIX}-control-rotate` }, { children: [jsx("button", Object.assign({ onClick: () => setRotateVal(rotateVal - ROTATE_STEP), disabled: rotateVal === MIN_ROTATE }, { children: "\u21BA" })), jsx(AntSlider, { min: MIN_ROTATE, max: MAX_ROTATE, step: ROTATE_STEP, value: rotateVal, onChange: setRotateVal }), jsx("button", Object.assign({ onClick: () => setRotateVal(rotateVal + ROTATE_STEP), disabled: rotateVal === MAX_ROTATE }, { children: "\u21BB" }))] })))] }));
145
62
  });
146
63
  var EasyCrop$1 = memo(EasyCrop);
147
64
 
148
65
  __$styleInject(".img-crop-modal .img-crop-container {\n position: relative;\n width: 100%;\n height: 40vh;\n}\n.img-crop-modal .img-crop-control {\n display: flex;\n align-items: center;\n width: 60%;\n margin-left: auto;\n margin-right: auto;\n}\n.img-crop-modal .img-crop-control:first-of-type {\n margin-top: 16px;\n}\n.img-crop-modal .img-crop-control:last-of-type {\n margin-bottom: -8px;\n}\n.img-crop-modal .img-crop-control button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 34px;\n height: 34px;\n padding: 0;\n font-style: normal;\n background: transparent;\n border: 0;\n outline: 0;\n cursor: pointer;\n}\n.img-crop-modal .img-crop-control button[disabled] {\n cursor: default;\n}\n.img-crop-modal .img-crop-control button + div:only-of-type {\n flex: 1;\n margin: 0 8px;\n}\n.img-crop-modal .img-crop-control-zoom button {\n font-size: 18px;\n}\n.img-crop-modal .img-crop-control-rotate button {\n font-size: 16px;\n}\n.img-crop-modal .img-crop-control-rotate button:first-of-type {\n transform: rotate(-20deg);\n}\n.img-crop-modal .img-crop-control-rotate button:last-of-type {\n transform: rotate(20deg);\n}\n");
149
66
 
150
- var propVisible = compareVersions(version, '4.23.0') === -1
67
+ const modalVisibleProp = compareVersions(version, '4.23.0') === -1
151
68
  ? { visible: true }
152
69
  : { open: true };
153
- var ImgCrop = forwardRef(function (props, ref) {
154
- var _a = props.aspect, aspect = _a === void 0 ? 1 : _a, _b = props.shape, shape = _b === void 0 ? 'rect' : _b, _c = props.grid, grid = _c === void 0 ? false : _c, _d = props.quality, quality = _d === void 0 ? 0.4 : _d, _e = props.fillColor, fillColor = _e === void 0 ? 'white' : _e, _f = props.zoom, zoom = _f === void 0 ? true : _f, _g = props.rotate, rotate = _g === void 0 ? false : _g, _h = props.minZoom, minZoom = _h === void 0 ? 1 : _h, _j = props.maxZoom, maxZoom = _j === void 0 ? 3 : _j, modalTitle = props.modalTitle, modalWidth = props.modalWidth, modalOk = props.modalOk, modalCancel = props.modalCancel, modalMaskTransitionName = props.modalMaskTransitionName, modalTransitionName = props.modalTransitionName, modalClassName = props.modalClassName, onModalOk = props.onModalOk, onModalCancel = props.onModalCancel, beforeCrop = props.beforeCrop, onUploadFail = props.onUploadFail, cropperProps = props.cropperProps, children = props.children;
155
- var cb = useRef({});
70
+ const ImgCrop = forwardRef((props, cropperRef) => {
71
+ const { aspect = 1, shape = 'rect', grid = false, quality = 0.4, fillColor = 'white', zoom = true, rotate = false, minZoom = 1, maxZoom = 3, modalTitle, modalWidth, modalOk, modalCancel, modalMaskTransitionName, modalTransitionName, modalClassName, onModalOk, onModalCancel, beforeCrop, onUploadFail, cropperProps, children, } = props;
72
+ const cb = useRef({});
156
73
  cb.current.onModalOk = onModalOk;
157
74
  cb.current.onModalCancel = onModalCancel;
158
75
  cb.current.beforeCrop = beforeCrop;
@@ -160,72 +77,64 @@ var ImgCrop = forwardRef(function (props, ref) {
160
77
  /**
161
78
  * Upload
162
79
  */
163
- var _k = useState(''), image = _k[0], setImage = _k[1];
164
- var fileRef = useRef();
165
- var beforeUploadRef = useRef();
166
- var resolveRef = useRef();
167
- var rejectRef = useRef();
168
- var uploadComponent = useMemo(function () {
169
- var upload = Array.isArray(children) ? children[0] : children;
170
- var _a = upload.props, beforeUpload = _a.beforeUpload, accept = _a.accept, restUploadProps = __rest(_a, ["beforeUpload", "accept"]);
80
+ const [image, setImage] = useState('');
81
+ const fileRef = useRef({});
82
+ const beforeUploadRef = useRef();
83
+ const resolveRef = useRef(() => { });
84
+ const rejectRef = useRef(() => { });
85
+ const uploadComponent = useMemo(() => {
86
+ const upload = Array.isArray(children) ? children[0] : children;
87
+ const _a = upload.props, { beforeUpload, accept } = _a, restUploadProps = __rest(_a, ["beforeUpload", "accept"]);
171
88
  beforeUploadRef.current = beforeUpload;
172
- return __assign(__assign({}, upload), { props: __assign(__assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: function (file, fileList) {
173
- return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
174
- var shouldCrop, reader;
175
- return __generator(this, function (_a) {
176
- switch (_a.label) {
177
- case 0:
178
- if (!cb.current.beforeCrop) return [3 /*break*/, 2];
179
- return [4 /*yield*/, cb.current.beforeCrop(file, fileList)];
180
- case 1:
181
- shouldCrop = _a.sent();
182
- if (!shouldCrop) {
183
- return [2 /*return*/, reject()];
184
- }
185
- _a.label = 2;
186
- case 2:
187
- fileRef.current = file;
188
- resolveRef.current = function (newFile) {
189
- var _a, _b;
190
- (_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
191
- resolve(newFile);
192
- };
193
- rejectRef.current = function (uploadErr) {
194
- var _a, _b;
195
- (_b = (_a = cb.current).onUploadFail) === null || _b === void 0 ? void 0 : _b.call(_a, uploadErr);
196
- reject();
197
- };
198
- reader = new FileReader();
199
- reader.addEventListener('load', function () {
200
- if (typeof reader.result === 'string') {
201
- setImage(reader.result);
202
- }
203
- });
204
- reader.readAsDataURL(file);
205
- return [2 /*return*/];
89
+ return Object.assign(Object.assign({}, upload), { props: Object.assign(Object.assign({}, restUploadProps), { accept: accept || 'image/*', beforeUpload: (file, fileList) => {
90
+ return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
91
+ if (cb.current.beforeCrop) {
92
+ const shouldCrop = yield cb.current.beforeCrop(file, fileList);
93
+ if (!shouldCrop) {
94
+ return reject();
95
+ }
96
+ }
97
+ fileRef.current = file;
98
+ resolveRef.current = (newFile) => {
99
+ var _a, _b;
100
+ (_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
101
+ resolve(newFile);
102
+ };
103
+ rejectRef.current = (uploadErr) => {
104
+ var _a, _b;
105
+ (_b = (_a = cb.current).onUploadFail) === null || _b === void 0 ? void 0 : _b.call(_a, uploadErr);
106
+ reject();
107
+ };
108
+ const reader = new FileReader();
109
+ reader.addEventListener('load', () => {
110
+ if (typeof reader.result === 'string') {
111
+ setImage(reader.result);
206
112
  }
207
113
  });
208
- }); });
114
+ reader.readAsDataURL(file);
115
+ }));
209
116
  } }) });
210
117
  }, [children]);
211
118
  /**
212
119
  * Crop
213
120
  */
214
- var easyCropRef = useRef({});
121
+ const easyCropRef = useRef({});
215
122
  /**
216
123
  * Modal
217
124
  */
218
- var modalProps = useMemo(function () {
219
- var obj = {
125
+ const modalProps = useMemo(() => {
126
+ const obj = {
220
127
  width: modalWidth,
221
128
  okText: modalOk,
222
129
  cancelText: modalCancel,
223
130
  maskTransitionName: modalMaskTransitionName,
224
- transitionName: modalTransitionName
131
+ transitionName: modalTransitionName,
225
132
  };
226
- Object.keys(obj).forEach(function (key) {
227
- if (!obj[key])
133
+ Object.keys(obj).forEach((prop) => {
134
+ const key = prop;
135
+ if (obj[key] === undefined) {
228
136
  delete obj[key];
137
+ }
229
138
  });
230
139
  return obj;
231
140
  }, [
@@ -235,107 +144,95 @@ var ImgCrop = forwardRef(function (props, ref) {
235
144
  modalTransitionName,
236
145
  modalWidth,
237
146
  ]);
238
- var onClose = function () {
147
+ const onClose = () => {
239
148
  setImage('');
240
149
  easyCropRef.current.setZoomVal(INIT_ZOOM);
241
150
  easyCropRef.current.setRotateVal(INIT_ROTATE);
242
151
  };
243
- var onCancel = useCallback(function () {
152
+ const onCancel = useCallback(() => {
244
153
  var _a, _b;
245
154
  (_b = (_a = cb.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
246
155
  onClose();
247
156
  }, []);
248
- var onOk = useCallback(function (event) { return __awaiter(void 0, void 0, void 0, function () {
249
- var canvas, ctx, target, context, imgSource, _a, cropWidth, cropHeight, cropX, cropY, imgWidth, imgHeight, angle, sine, cosine, squareWidth, squareHeight, squareHalfWidth, squareHalfHeight, imgX, imgY, imgData, _b, type, name, uid;
250
- var _c;
251
- return __generator(this, function (_d) {
252
- onClose();
253
- canvas = document.createElement('canvas');
254
- ctx = canvas.getContext('2d');
255
- target = event.target;
256
- context = ((_c = target === null || target === void 0 ? void 0 : target.getRootNode) === null || _c === void 0 ? void 0 : _c.call(target)) || document;
257
- imgSource = context.querySelector(".".concat(PREFIX, "-media"));
258
- _a = easyCropRef.current.cropPixelsRef.current, cropWidth = _a.width, cropHeight = _a.height, cropX = _a.x, cropY = _a.y;
259
- if (rotate && easyCropRef.current.rotateVal !== INIT_ROTATE) {
260
- imgWidth = imgSource.naturalWidth, imgHeight = imgSource.naturalHeight;
261
- angle = easyCropRef.current.rotateVal * (Math.PI / 180);
262
- sine = Math.abs(Math.sin(angle));
263
- cosine = Math.abs(Math.cos(angle));
264
- squareWidth = imgWidth * cosine + imgHeight * sine;
265
- squareHeight = imgHeight * cosine + imgWidth * sine;
266
- canvas.width = squareWidth;
267
- canvas.height = squareHeight;
268
- ctx.fillStyle = fillColor;
269
- ctx.fillRect(0, 0, squareWidth, squareHeight);
270
- squareHalfWidth = squareWidth / 2;
271
- squareHalfHeight = squareHeight / 2;
272
- ctx.translate(squareHalfWidth, squareHalfHeight);
273
- ctx.rotate(angle);
274
- ctx.translate(-squareHalfWidth, -squareHalfHeight);
275
- imgX = (squareWidth - imgWidth) / 2;
276
- imgY = (squareHeight - imgHeight) / 2;
277
- ctx.drawImage(imgSource, 0, 0, imgWidth, imgHeight, imgX, imgY, imgWidth, imgHeight);
278
- imgData = ctx.getImageData(0, 0, squareWidth, squareHeight);
279
- canvas.width = cropWidth;
280
- canvas.height = cropHeight;
281
- ctx.putImageData(imgData, -cropX, -cropY);
157
+ const onOk = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
158
+ var _a;
159
+ onClose();
160
+ const canvas = document.createElement('canvas');
161
+ const ctx = canvas.getContext('2d');
162
+ const target = event.target;
163
+ const context = ((_a = target === null || target === void 0 ? void 0 : target.getRootNode) === null || _a === void 0 ? void 0 : _a.call(target)) || document;
164
+ const imgSource = context.querySelector(`.${PREFIX}-media`);
165
+ const { width: cropWidth, height: cropHeight, x: cropX, y: cropY, } = easyCropRef.current.cropPixelsRef.current;
166
+ if (rotate && easyCropRef.current.rotateVal !== INIT_ROTATE) {
167
+ const { naturalWidth: imgWidth, naturalHeight: imgHeight } = imgSource;
168
+ const angle = easyCropRef.current.rotateVal * (Math.PI / 180);
169
+ // get container for rotated image
170
+ const sine = Math.abs(Math.sin(angle));
171
+ const cosine = Math.abs(Math.cos(angle));
172
+ const squareWidth = imgWidth * cosine + imgHeight * sine;
173
+ const squareHeight = imgHeight * cosine + imgWidth * sine;
174
+ canvas.width = squareWidth;
175
+ canvas.height = squareHeight;
176
+ ctx.fillStyle = fillColor;
177
+ ctx.fillRect(0, 0, squareWidth, squareHeight);
178
+ // rotate container
179
+ const squareHalfWidth = squareWidth / 2;
180
+ const squareHalfHeight = squareHeight / 2;
181
+ ctx.translate(squareHalfWidth, squareHalfHeight);
182
+ ctx.rotate(angle);
183
+ ctx.translate(-squareHalfWidth, -squareHalfHeight);
184
+ // draw rotated image
185
+ const imgX = (squareWidth - imgWidth) / 2;
186
+ const imgY = (squareHeight - imgHeight) / 2;
187
+ ctx.drawImage(imgSource, 0, 0, imgWidth, imgHeight, imgX, imgY, imgWidth, imgHeight);
188
+ // crop rotated image
189
+ const imgData = ctx.getImageData(0, 0, squareWidth, squareHeight);
190
+ canvas.width = cropWidth;
191
+ canvas.height = cropHeight;
192
+ ctx.putImageData(imgData, -cropX, -cropY);
193
+ }
194
+ else {
195
+ canvas.width = cropWidth;
196
+ canvas.height = cropHeight;
197
+ ctx.fillStyle = fillColor;
198
+ ctx.fillRect(0, 0, cropWidth, cropHeight);
199
+ ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
200
+ }
201
+ // get the new image
202
+ const { type, name, uid, lastModifiedDate } = fileRef.current;
203
+ canvas.toBlob((blob) => __awaiter(void 0, void 0, void 0, function* () {
204
+ const newFile = Object.assign(new File([blob], name, { type }), { uid, lastModifiedDate });
205
+ if (!beforeUploadRef.current) {
206
+ return resolveRef.current(newFile);
282
207
  }
283
- else {
284
- canvas.width = cropWidth;
285
- canvas.height = cropHeight;
286
- ctx.fillStyle = fillColor;
287
- ctx.fillRect(0, 0, cropWidth, cropHeight);
288
- ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
208
+ const rcFile = newFile;
209
+ const result = yield beforeUploadRef.current(rcFile, [rcFile]);
210
+ if (result === true) {
211
+ return resolveRef.current(newFile);
289
212
  }
290
- _b = fileRef.current, type = _b.type, name = _b.name, uid = _b.uid;
291
- canvas.toBlob(function (blob) { return __awaiter(void 0, void 0, void 0, function () {
292
- var newFile, result;
293
- return __generator(this, function (_a) {
294
- switch (_a.label) {
295
- case 0:
296
- newFile = Object.assign(new File([blob], name, { type: type }), {
297
- uid: uid
298
- });
299
- if (!beforeUploadRef.current) {
300
- return [2 /*return*/, resolveRef.current(newFile)];
301
- }
302
- return [4 /*yield*/, beforeUploadRef.current(newFile, [newFile])];
303
- case 1:
304
- result = _a.sent();
305
- if (result === true) {
306
- return [2 /*return*/, resolveRef.current(newFile)];
307
- }
308
- if (result === false) {
309
- return [2 /*return*/, rejectRef.current(new Error('beforeUpload return false'))];
310
- }
311
- delete newFile[AntUpload.LIST_IGNORE];
312
- if (result === AntUpload.LIST_IGNORE) {
313
- Object.defineProperty(newFile, AntUpload.LIST_IGNORE, {
314
- value: true,
315
- configurable: true
316
- });
317
- return [2 /*return*/, rejectRef.current(new Error('beforeUpload return LIST_IGNORE'))];
318
- }
319
- if (typeof result === 'object' && result !== null) {
320
- return [2 /*return*/, resolveRef.current(result)];
321
- }
322
- return [2 /*return*/];
323
- }
213
+ if (result === false) {
214
+ return rejectRef.current(new Error('beforeUpload return false'));
215
+ }
216
+ delete newFile[AntUpload.LIST_IGNORE];
217
+ if (result === AntUpload.LIST_IGNORE) {
218
+ Object.defineProperty(newFile, AntUpload.LIST_IGNORE, {
219
+ value: true,
220
+ configurable: true,
324
221
  });
325
- }); }, type, quality);
326
- return [2 /*return*/];
327
- });
328
- }); }, [fillColor, quality, rotate]);
329
- var getComponent = function (titleOfModal) { return (React.createElement(React.Fragment, null,
330
- uploadComponent,
331
- image && (React.createElement(AntModal, __assign({}, propVisible, { wrapClassName: "".concat(PREFIX, "-modal ").concat(modalClassName || ''), title: titleOfModal, onOk: onOk, onCancel: onCancel, maskClosable: false, destroyOnClose: true }, modalProps),
332
- React.createElement(EasyCrop$1, { ref: easyCropRef, cropperRef: ref, image: image, aspect: aspect, shape: shape, grid: grid, zoom: zoom, rotate: rotate, minZoom: minZoom, maxZoom: maxZoom, cropperProps: cropperProps }))))); };
222
+ return rejectRef.current(new Error('beforeUpload return LIST_IGNORE'));
223
+ }
224
+ if (typeof result === 'object' && result !== null) {
225
+ return resolveRef.current(result);
226
+ }
227
+ }), type, quality);
228
+ }), [fillColor, quality, rotate]);
229
+ const getComponent = (titleOfModal) => (jsxs(Fragment, { children: [uploadComponent, image && (jsx(AntModal, Object.assign({}, modalVisibleProp, { wrapClassName: `${PREFIX}-modal ${modalClassName || ''}`, title: titleOfModal, onOk: onOk, onCancel: onCancel, maskClosable: false, destroyOnClose: true }, modalProps, { children: jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, image: image, aspect: aspect, shape: shape, grid: grid, zoom: zoom, rotate: rotate, minZoom: minZoom, maxZoom: maxZoom, cropperProps: cropperProps }) })))] }));
333
230
  if (modalTitle) {
334
231
  return getComponent(modalTitle);
335
232
  }
336
- return (React.createElement(LocaleReceiver, null, function (locale, code) {
337
- return getComponent(code === 'zh-cn' ? '编辑图片' : 'Edit image');
338
- }));
233
+ return (jsx(LocaleReceiver, { children: (_, code) => {
234
+ return getComponent(code === 'zh-cn' ? '编辑图片' : 'Edit image');
235
+ } }));
339
236
  });
340
237
 
341
238
  export { ImgCrop as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "antd-img-crop",
3
- "version": "4.3.0",
3
+ "version": "4.5.0",
4
4
  "description": "An image cropper for Ant Design Upload",
5
5
  "keywords": [
6
6
  "react",
@@ -18,10 +18,9 @@
18
18
  "bugs": "https://github.com/nanxiaobei/antd-img-crop/issues",
19
19
  "main": "dist/antd-img-crop.cjs.js",
20
20
  "module": "dist/antd-img-crop.esm.js",
21
- "types": "index.d.ts",
21
+ "types": "dist/antd-img-crop.d.ts",
22
22
  "files": [
23
- "dist",
24
- "index.d.ts"
23
+ "dist"
25
24
  ],
26
25
  "peerDependencies": {
27
26
  "antd": ">=4.0.0",
@@ -30,31 +29,31 @@
30
29
  },
31
30
  "dependencies": {
32
31
  "compare-versions": "^5.0.1",
33
- "react-easy-crop": "^4.6.2"
32
+ "react-easy-crop": "^4.6.2",
33
+ "tslib": "^2.4.1"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@rollup/plugin-replace": "^5.0.1",
37
37
  "@rollup/plugin-typescript": "^9.0.2",
38
+ "@trivago/prettier-plugin-sort-imports": "^3.4.0",
39
+ "@types/node": "^18.11.9",
38
40
  "@types/react": "^18.0.25",
39
41
  "@types/react-dom": "^18.0.9",
40
- "antd": "^4.24.2",
41
- "eslint": "^8.27.0",
42
+ "@types/rollup-plugin-less": "^1.1.2",
43
+ "antd": "^5.0.0",
44
+ "eslint": "^8.28.0",
42
45
  "eslint-config-prettier": "^8.5.0",
43
46
  "eslint-config-react-app": "^7.0.1",
44
47
  "prettier": "^2.7.1",
45
48
  "react": "^18.2.0",
46
49
  "react-dom": "^18.2.0",
47
50
  "rollup": "3.3.0",
51
+ "rollup-plugin-dts": "^5.0.0",
48
52
  "rollup-plugin-less": "^1.1.3",
49
- "tslib": "^2.4.1",
50
53
  "typescript": "^4.9.3"
51
54
  },
52
- "eslintIgnore": [
53
- "dist",
54
- "index.d.ts"
55
- ],
56
55
  "scripts": {
57
- "watch": "rollup -wc --configPlugin @rollup/plugin-typescript",
56
+ "watch": "rm -rf dist && rollup -wc --configPlugin @rollup/plugin-typescript",
58
57
  "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript"
59
58
  }
60
59
  }
package/index.d.ts DELETED
@@ -1,37 +0,0 @@
1
- import type { ForwardRefExoticComponent, RefAttributes } from 'react';
2
- import type Cropper from 'react-easy-crop';
3
- import type { CropperProps } from 'react-easy-crop';
4
-
5
- export interface ImgCropProps {
6
- aspect?: number;
7
- shape?: 'rect' | 'round';
8
- grid?: boolean;
9
- quality?: number;
10
- fillColor?: string;
11
-
12
- zoom?: boolean;
13
- rotate?: boolean;
14
- minZoom?: number;
15
- maxZoom?: number;
16
-
17
- modalTitle?: string;
18
- modalWidth?: number | string;
19
- modalOk?: string;
20
- modalCancel?: string;
21
- modalMaskTransitionName?: string;
22
- modalClassName?: string;
23
- modalTransitionName?: string;
24
- onModalOk?: (file: void | boolean | string | Blob | File) => void;
25
- onModalCancel?: () => void;
26
-
27
- beforeCrop?: (file: File, fileList: File[]) => boolean | Promise<boolean>;
28
- onUploadFail?: (err: Error) => void;
29
- cropperProps?: Partial<CropperProps>;
30
-
31
- children: JSX.Element;
32
- }
33
-
34
- declare const ImgCrop: ForwardRefExoticComponent<
35
- ImgCropProps & RefAttributes<Cropper>
36
- >;
37
- export default ImgCrop;