antd-img-crop 3.16.0 → 4.0.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 (8) hide show
  1. package/README.md +9 -18
  2. package/README.zh-CN.md +9 -18
  3. package/dist/antd-img-crop.cjs.js +82 -105
  4. package/dist/antd-img-crop.esm.js +68 -90
  5. package/index.d.ts +3 -1
  6. package/package.json +13 -21
  7. package/src/index.jsx +0 -453
  8. package/src/index.less +0 -52
package/README.md CHANGED
@@ -5,13 +5,15 @@ An image cropper for Ant Design [Upload](https://ant.design/components/upload/).
5
5
  [![npm](https://img.shields.io/npm/v/antd-img-crop.svg?style=flat-square)](https://www.npmjs.com/package/antd-img-crop)
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
- [![GitHub](https://img.shields.io/github/license/nanxiaobei/antd-img-crop?style=flat-square)](https://github.com/nanxiaobei/antd-img-crop/blob/master/LICENSE)
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
9
 
10
10
  English | [简体中文](./README.zh-CN.md)
11
11
 
12
+ > Since 4.0, no need to manually import Modal & Slider style files.
13
+
12
14
  ## Demo
13
15
 
14
- [Live demo](https://codesandbox.io/s/antd-img-crop-4qoom5p9x4)
16
+ [![Edit antd-img-crop](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/antd-img-crop-4qoom5p9x4?fontsize=14&hidenavigation=1&theme=dark)
15
17
 
16
18
  ## Install
17
19
 
@@ -57,26 +59,15 @@ const Demo = () => (
57
59
  | onUploadFail | `function` | - | Call when upload failed |
58
60
  | cropperProps | `object` | - | Props of [react-easy-crop] (\* [existing props] cannot be overridden) |
59
61
 
60
- ## Styles
61
-
62
- To prevent overwriting the custom styles to `antd`, `antd-img-crop` does not import the style files of components.
63
-
64
- Therefore, if your project configured `babel-plugin-import` and no `Modal` or `Slider` were used, you need to import the styles manually:
65
-
66
- ```js
67
- import 'antd/es/modal/style';
68
- import 'antd/es/slider/style';
69
- ```
70
-
71
62
  ## License
72
63
 
73
- [MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/master/LICENSE) (c) [nanxiaobei](https://lee.so/)
64
+ [MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)
74
65
 
75
66
  [react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
76
- [existing props]: https://github.com/nanxiaobei/antd-img-crop/blob/master/src/index.jsx#L67-L83
67
+ [existing props]: https://github.com/nanxiaobei/antd-img-crop/blob/main/src/index.jsx#L78-L94
77
68
 
78
- ## Pitiless Ads
69
+ ## FUTAKE
79
70
 
80
- If you use WeChat, please try "**FUTAKE**". It's a WeChat mini app for your inspiration moments. 🌈
71
+ Try [**FUTAKE**](https://sotake.com/f) in WeChat. A mini app for your inspiration moments. 🌈
81
72
 
82
- ![FUTAKE](https://s3.jpg.cm/2021/04/22/TDQuS.png)
73
+ ![FUTAKE](https://s3.jpg.cm/2021/09/21/IFG3wi.png)
package/README.zh-CN.md CHANGED
@@ -5,13 +5,15 @@
5
5
  [![npm](https://img.shields.io/npm/v/antd-img-crop.svg?style=flat-square)](https://www.npmjs.com/package/antd-img-crop)
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
- [![GitHub](https://img.shields.io/github/license/nanxiaobei/antd-img-crop?style=flat-square)](https://github.com/nanxiaobei/antd-img-crop/blob/master/LICENSE)
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
9
 
10
10
  [English](./README.md) | 简体中文
11
11
 
12
+ > 4.0 版本起，再无需手动引入 Modal 和 Slider 样式文件。
13
+
12
14
  ## 示例
13
15
 
14
- [在线示例](https://codesandbox.io/s/antd-img-crop-4qoom5p9x4)
16
+ [![Edit antd-img-crop](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/antd-img-crop-4qoom5p9x4?fontsize=14&hidenavigation=1&theme=dark)
15
17
 
16
18
  ## 安装
17
19
 
@@ -57,26 +59,15 @@ const Demo = () => (
57
59
  | onUploadFail | `function` | - | 上传失败时的回调 |
58
60
  | cropperProps | `object` | - | [react-easy-crop] 的 props（\* [已有 props] 无法重写） |
59
61
 
60
- ## 样式
61
-
62
- 为防止覆盖自定义 `antd` 样式，`antd-img-crop` 中没有引入组件样式文件。
63
-
64
- 因此，如果项目配置了 `babel-plugin-import` 且未使用 `Modal` 或 `Slider`，则需手动引入样式：
65
-
66
- ```js
67
- import 'antd/es/modal/style';
68
- import 'antd/es/slider/style';
69
- ```
70
-
71
62
  ## 协议
72
63
 
73
- [MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/master/LICENSE) (c) [nanxiaobei](https://lee.so/)
64
+ [MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)
74
65
 
75
66
  [react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
76
- [已有 props]: https://github.com/nanxiaobei/antd-img-crop/blob/master/src/index.jsx#L67-L83
67
+ [已有 props]: https://github.com/nanxiaobei/antd-img-crop/blob/main/src/index.jsx#L78-L94
77
68
 
78
- ## 无情的小广告
69
+ ## FUTAKE
79
70
 
80
- 如果你使用微信，请试试 "**FUTAKE**"。这是一个微信小程序，为你的灵感瞬间。🌈
71
+ 试试 [**FUTAKE**](https://sotake.com/f) 小程序，你的灵感相册。🌈
81
72
 
82
- ![FUTAKE](https://s3.jpg.cm/2021/04/22/TDQuS.png)
73
+ ![FUTAKE](https://s3.jpg.cm/2021/09/21/IFG3wi.png)
package/dist/antd-img-crop.cjs.js CHANGED
@@ -19,11 +19,12 @@ var _extends = require('@babel/runtime/helpers/extends');
19
19
  var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
20
20
  var _regeneratorRuntime = require('@babel/runtime/regenerator');
21
21
  var React = require('react');
22
- var t = require('prop-types');
23
22
  var Cropper = require('react-easy-crop');
24
23
  var LocaleReceiver = require('antd/lib/locale-provider/LocaleReceiver');
25
- var Modal = require('antd/lib/modal');
26
- var Slider = require('antd/lib/slider');
24
+ var AntModal = require('antd/lib/modal');
25
+ var AntSlider = require('antd/lib/slider');
26
+ require('antd/lib/modal/style');
27
+ require('antd/lib/slider/style');
27
28
 
28
29
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
29
30
 
@@ -32,34 +33,33 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
32
33
  var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
33
34
  var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
34
35
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
35
- var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
36
36
  var Cropper__default = /*#__PURE__*/_interopDefaultLegacy(Cropper);
37
37
  var LocaleReceiver__default = /*#__PURE__*/_interopDefaultLegacy(LocaleReceiver);
38
- var Modal__default = /*#__PURE__*/_interopDefaultLegacy(Modal);
39
- var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
38
+ var AntModal__default = /*#__PURE__*/_interopDefaultLegacy(AntModal);
39
+ var AntSlider__default = /*#__PURE__*/_interopDefaultLegacy(AntSlider);
40
40
 
41
- __$styleInject(".antd-img-crop-modal .ant-modal-body {\n padding-bottom: 16px;\n}\n.antd-img-crop-modal .antd-img-crop-container {\n position: relative;\n width: 100%;\n height: 40vh;\n margin-bottom: 16px;\n}\n.antd-img-crop-modal .antd-img-crop-control {\n display: flex;\n align-items: center;\n width: 60%;\n margin-left: auto;\n margin-right: auto;\n}\n.antd-img-crop-modal .antd-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.antd-img-crop-modal .antd-img-crop-control button[disabled] {\n cursor: default;\n}\n.antd-img-crop-modal .antd-img-crop-control.zoom button {\n font-size: 18px;\n}\n.antd-img-crop-modal .antd-img-crop-control.rotate button {\n font-size: 16px;\n}\n.antd-img-crop-modal .antd-img-crop-control.rotate button:first-of-type {\n transform: rotate(-20deg);\n}\n.antd-img-crop-modal .antd-img-crop-control.rotate button:last-of-type {\n transform: rotate(20deg);\n}\n.antd-img-crop-modal .antd-img-crop-control .ant-slider {\n flex: 1;\n margin: 0 8px;\n}\n");
41
+ __$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");
42
42
 
43
43
  var _excluded = ["beforeUpload", "accept"];
44
- var pkg = 'antd-img-crop';
44
+ var cls = 'img-crop';
45
45
  var INIT_ZOOM = 1;
46
46
  var ZOOM_STEP = 0.1;
47
47
  var INIT_ROTATE = 0;
48
48
  var ROTATE_STEP = 1;
49
49
  var MIN_ROTATE = -180;
50
50
  var MAX_ROTATE = 180;
51
- var EasyCrop = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
52
- var src = props.src,
51
+ var EasyCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
52
+ var image = props.image,
53
53
  aspect = props.aspect,
54
54
  shape = props.shape,
55
55
  grid = props.grid,
56
56
  zoom = props.zoom,
57
57
  rotate = props.rotate,
58
+ minZoom = props.minZoom,
59
+ maxZoom = props.maxZoom,
58
60
  rotateValRef = props.rotateValRef,
59
61
  setZoomValRef = props.setZoomValRef,
60
62
  setRotateValRef = props.setRotateValRef,
61
- minZoom = props.minZoom,
62
- maxZoom = props.maxZoom,
63
63
  cropPixelsRef = props.cropPixelsRef,
64
64
  cropperProps = props.cropperProps;
65
65
 
@@ -68,7 +68,7 @@ var EasyCrop = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
68
68
  y: 0
69
69
  }),
70
70
  crop = _useState[0],
71
- setCrop = _useState[1];
71
+ onCropChange = _useState[1];
72
72
 
73
73
  var _useState2 = React.useState({
74
74
  width: 0,
@@ -111,12 +111,12 @@ var EasyCrop = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
111
111
  setZoomValRef.current = setZoomVal;
112
112
  setRotateValRef.current = setRotateVal;
113
113
  }, [setRotateValRef, setZoomValRef]);
114
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Cropper__default['default'], Object.assign({}, cropperProps, {
114
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Cropper__default["default"], Object.assign({}, cropperProps, {
115
115
  ref: ref,
116
- image: src,
116
+ image: image,
117
117
  crop: crop,
118
118
  cropSize: cropSize,
119
- onCropChange: setCrop,
119
+ onCropChange: onCropChange,
120
120
  aspect: aspect,
121
121
  cropShape: shape,
122
122
  showGrid: grid,
@@ -130,62 +130,48 @@ var EasyCrop = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
130
130
  onCropComplete: onCropComplete,
131
131
  onMediaLoaded: onMediaLoaded,
132
132
  classes: {
133
- containerClassName: pkg + "-container",
134
- mediaClassName: pkg + "-media"
133
+ containerClassName: cls + "-container",
134
+ mediaClassName: cls + "-media"
135
135
  }
136
- })), zoom && /*#__PURE__*/React__default['default'].createElement("div", {
137
- className: pkg + "-control zoom"
138
- }, /*#__PURE__*/React__default['default'].createElement("button", {
136
+ })), zoom && /*#__PURE__*/React__default["default"].createElement("section", {
137
+ className: cls + "-control " + cls + "-control-zoom"
138
+ }, /*#__PURE__*/React__default["default"].createElement("button", {
139
139
  onClick: function onClick() {
140
140
  return setZoomVal(zoomVal - ZOOM_STEP);
141
141
  },
142
142
  disabled: zoomVal - ZOOM_STEP < minZoom
143
- }, "\uFF0D"), /*#__PURE__*/React__default['default'].createElement(Slider__default['default'], {
143
+ }, "\uFF0D"), /*#__PURE__*/React__default["default"].createElement(AntSlider__default["default"], {
144
144
  min: minZoom,
145
145
  max: maxZoom,
146
146
  step: ZOOM_STEP,
147
147
  value: zoomVal,
148
148
  onChange: setZoomVal
149
- }), /*#__PURE__*/React__default['default'].createElement("button", {
149
+ }), /*#__PURE__*/React__default["default"].createElement("button", {
150
150
  onClick: function onClick() {
151
151
  return setZoomVal(zoomVal + ZOOM_STEP);
152
152
  },
153
153
  disabled: zoomVal + ZOOM_STEP > maxZoom
154
- }, "\uFF0B")), rotate && /*#__PURE__*/React__default['default'].createElement("div", {
155
- className: pkg + "-control rotate"
156
- }, /*#__PURE__*/React__default['default'].createElement("button", {
154
+ }, "\uFF0B")), rotate && /*#__PURE__*/React__default["default"].createElement("section", {
155
+ className: cls + "-control " + cls + "-control-rotate"
156
+ }, /*#__PURE__*/React__default["default"].createElement("button", {
157
157
  onClick: function onClick() {
158
158
  return setRotateVal(rotateVal - ROTATE_STEP);
159
159
  },
160
160
  disabled: rotateVal === MIN_ROTATE
161
- }, "\u21BA"), /*#__PURE__*/React__default['default'].createElement(Slider__default['default'], {
161
+ }, "\u21BA"), /*#__PURE__*/React__default["default"].createElement(AntSlider__default["default"], {
162
162
  min: MIN_ROTATE,
163
163
  max: MAX_ROTATE,
164
164
  step: ROTATE_STEP,
165
165
  value: rotateVal,
166
166
  onChange: setRotateVal
167
- }), /*#__PURE__*/React__default['default'].createElement("button", {
167
+ }), /*#__PURE__*/React__default["default"].createElement("button", {
168
168
  onClick: function onClick() {
169
169
  return setRotateVal(rotateVal + ROTATE_STEP);
170
170
  },
171
171
  disabled: rotateVal === MAX_ROTATE
172
172
  }, "\u21BB")));
173
- }));
174
- EasyCrop.propTypes = {
175
- src: t__default['default'].string,
176
- aspect: t__default['default'].number,
177
- shape: t__default['default'].string,
178
- grid: t__default['default'].bool,
179
- zoom: t__default['default'].bool,
180
- rotate: t__default['default'].bool,
181
- rotateValRef: t__default['default'].object,
182
- setZoomValRef: t__default['default'].object,
183
- setRotateValRef: t__default['default'].object,
184
- minZoom: t__default['default'].number,
185
- maxZoom: t__default['default'].number,
186
- cropPixelsRef: t__default['default'].object,
187
- cropperProps: t__default['default'].object
188
- };
173
+ });
174
+ var MemoEasyCrop = /*#__PURE__*/React.memo(EasyCrop);
189
175
  var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
190
176
  var aspect = props.aspect,
191
177
  shape = props.shape,
@@ -206,39 +192,46 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
206
192
  onUploadFail = props.onUploadFail,
207
193
  cropperProps = props.cropperProps,
208
194
  children = props.children;
195
+ var cb = React.useRef({});
196
+ React.useEffect(function () {
197
+ cb.current.onModalOk = onModalOk;
198
+ cb.current.onModalCancel = onModalCancel;
199
+ cb.current.beforeCrop = beforeCrop;
200
+ cb.current.onUploadFail = onUploadFail;
201
+ }, [beforeCrop, onModalCancel, onModalOk, onUploadFail]);
209
202
  /**
210
203
  * Upload
211
204
  */
212
205
 
213
206
  var _useState5 = React.useState(''),
214
- src = _useState5[0],
215
- setSrc = _useState5[1];
207
+ image = _useState5[0],
208
+ setImage = _useState5[1];
216
209
 
217
210
  var fileRef = React.useRef();
218
211
  var resolveRef = React.useRef();
219
212
  var rejectRef = React.useRef();
220
213
  var beforeUploadRef = React.useRef();
221
- var renderUpload = React.useCallback(function () {
214
+ var uploadComponent = React.useMemo(function () {
222
215
  var upload = Array.isArray(children) ? children[0] : children;
223
216
 
224
217
  var _upload$props = upload.props,
225
218
  beforeUpload = _upload$props.beforeUpload,
226
219
  accept = _upload$props.accept,
227
- restUploadProps = _objectWithoutPropertiesLoose__default['default'](_upload$props, _excluded);
220
+ restUploadProps = _objectWithoutPropertiesLoose__default["default"](_upload$props, _excluded);
228
221
 
229
222
  beforeUploadRef.current = beforeUpload;
230
- return _extends__default['default']({}, upload, {
231
- props: _extends__default['default']({}, restUploadProps, {
223
+ return _extends__default["default"]({}, upload, {
224
+ props: _extends__default["default"]({}, restUploadProps, {
232
225
  accept: accept || 'image/*',
233
226
  beforeUpload: function beforeUpload(file, fileList) {
234
227
  return new Promise( /*#__PURE__*/function () {
235
- var _ref = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee(resolve, reject) {
228
+ var _ref = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(resolve, reject) {
236
229
  var reader;
237
- return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
230
+ return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
238
231
  while (1) {
239
232
  switch (_context.prev = _context.next) {
240
233
  case 0:
241
- _context.t0 = beforeCrop;
234
+ _context.t0 = cb.current.beforeCrop;
242
235
 
243
236
  if (!_context.t0) {
244
237
  _context.next = 5;
@@ -246,7 +239,7 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
246
239
  }
247
240
 
248
241
  _context.next = 4;
249
- return beforeCrop(file, fileList);
242
+ return cb.current.beforeCrop(file, fileList);
250
243
 
251
244
  case 4:
252
245
  _context.t0 = !_context.sent;
@@ -264,18 +257,18 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
264
257
  fileRef.current = file;
265
258
 
266
259
  resolveRef.current = function (newFile) {
267
- onModalOk == null ? void 0 : onModalOk(newFile);
260
+ cb.current.onModalOk == null ? void 0 : cb.current.onModalOk(newFile);
268
261
  resolve(newFile);
269
262
  };
270
263
 
271
264
  rejectRef.current = function (uploadErr) {
272
- onUploadFail == null ? void 0 : onUploadFail(uploadErr);
265
+ cb.current.onUploadFail == null ? void 0 : cb.current.onUploadFail(uploadErr);
273
266
  reject(uploadErr);
274
267
  };
275
268
 
276
269
  reader = new FileReader();
277
270
  reader.addEventListener('load', function () {
278
- setSrc(reader.result);
271
+ return setImage(reader.result);
279
272
  });
280
273
  reader.readAsDataURL(file);
281
274
 
@@ -294,7 +287,7 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
294
287
  }
295
288
  })
296
289
  });
297
- }, [beforeCrop, children, onModalOk, onUploadFail]);
290
+ }, [children]);
298
291
  /**
299
292
  * Crop
300
293
  */
@@ -318,29 +311,31 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
318
311
  });
319
312
  return obj;
320
313
  }, [modalCancel, modalOk, modalWidth]);
321
- var onClose = React.useCallback(function () {
322
- setSrc('');
314
+
315
+ var onClose = function onClose() {
316
+ setImage('');
323
317
  setZoomValRef.current(INIT_ZOOM);
324
318
  setRotateValRef.current(INIT_ROTATE);
325
- }, []);
319
+ };
320
+
326
321
  var onCancel = React.useCallback(function () {
327
- onModalCancel == null ? void 0 : onModalCancel();
322
+ cb.current.onModalCancel == null ? void 0 : cb.current.onModalCancel();
328
323
  onClose();
329
- }, [onClose, onModalCancel]);
330
- var onOk = React.useCallback( /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3() {
331
- var rawImg, _cropPixelsRef$curren, cropWidth, cropHeight, cropX, cropY, canvas, ctx, rawWidth, rawHeight, boxSize, imgWidth, imgHeight, ratio, half, imgX, imgY, rotatedImg, _fileRef$current, type, name, uid;
324
+ }, []);
325
+ var onOk = React.useCallback( /*#__PURE__*/_asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee3() {
326
+ var rawImg, _cropPixelsRef$curren, cropWidth, cropHeight, cropX, cropY, canvas, ctx, rawWidth, rawHeight, boxSize, imgWidth, imgHeight, ratio, half, imgX, imgY, rotatedImg, _fileRef$current, type, name, uid, onBlob;
332
327
 
333
- return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
328
+ return _regeneratorRuntime__default["default"].wrap(function _callee3$(_context3) {
334
329
  while (1) {
335
330
  switch (_context3.prev = _context3.next) {
336
331
  case 0:
337
332
  onClose();
338
- rawImg = document.querySelector("." + pkg + "-media");
333
+ rawImg = document.querySelector("." + cls + "-media");
339
334
  _cropPixelsRef$curren = cropPixelsRef.current, cropWidth = _cropPixelsRef$curren.width, cropHeight = _cropPixelsRef$curren.height, cropX = _cropPixelsRef$curren.x, cropY = _cropPixelsRef$curren.y;
340
335
  canvas = document.createElement('canvas');
341
336
  ctx = canvas.getContext('2d');
342
337
 
343
- if (rotate && rotateValRef.current !== 0) {
338
+ if (rotate && rotateValRef.current !== INIT_ROTATE) {
344
339
  // make canvas to cover the rotated image
345
340
  rawWidth = rawImg.naturalWidth, rawHeight = rawImg.naturalHeight;
346
341
  boxSize = Math.sqrt(Math.pow(rawWidth, 2) + Math.pow(rawHeight, 2));
@@ -363,7 +358,7 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
363
358
 
364
359
  half = boxSize / 2;
365
360
  ctx.translate(half, half);
366
- ctx.rotate(rotateValRef.current * Math.PI / 180);
361
+ ctx.rotate(Math.PI / 180 * rotateValRef.current);
367
362
  ctx.translate(-half, -half); // draw rotated image to canvas center
368
363
 
369
364
  ctx.fillStyle = fillColor;
@@ -388,11 +383,12 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
388
383
 
389
384
 
390
385
  _fileRef$current = fileRef.current, type = _fileRef$current.type, name = _fileRef$current.name, uid = _fileRef$current.uid;
391
- canvas.toBlob( /*#__PURE__*/function () {
392
- var _ref3 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2(blob) {
386
+
387
+ onBlob = /*#__PURE__*/function () {
388
+ var _ref3 = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee2(blob) {
393
389
  var newFile, res, passedFile, _type;
394
390
 
395
- return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
391
+ return _regeneratorRuntime__default["default"].wrap(function _callee2$(_context2) {
396
392
  while (1) {
397
393
  switch (_context2.prev = _context2.next) {
398
394
  case 0:
@@ -466,31 +462,33 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
466
462
  }, _callee2, null, [[13, 22]]);
467
463
  }));
468
464
 
469
- return function (_x3) {
465
+ return function onBlob(_x3) {
470
466
  return _ref3.apply(this, arguments);
471
467
  };
472
- }(), type, quality);
468
+ }();
469
+
470
+ canvas.toBlob(onBlob, type, quality);
473
471
 
474
- case 8:
472
+ case 9:
475
473
  case "end":
476
474
  return _context3.stop();
477
475
  }
478
476
  }
479
477
  }, _callee3);
480
- })), [fillColor, onClose, quality, rotate]);
478
+ })), [fillColor, quality, rotate]);
481
479
 
482
- var renderComponent = function renderComponent(titleOfModal) {
483
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, renderUpload(), src && /*#__PURE__*/React__default['default'].createElement(Modal__default['default'], Object.assign({
480
+ var getComponent = function getComponent(titleOfModal) {
481
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, uploadComponent, image && /*#__PURE__*/React__default["default"].createElement(AntModal__default["default"], Object.assign({
484
482
  visible: true,
485
- wrapClassName: pkg + "-modal",
483
+ wrapClassName: cls + "-modal",
486
484
  title: titleOfModal,
487
485
  onOk: onOk,
488
486
  onCancel: onCancel,
489
487
  maskClosable: false,
490
488
  destroyOnClose: true
491
- }, modalProps), /*#__PURE__*/React__default['default'].createElement(EasyCrop, {
489
+ }, modalProps), /*#__PURE__*/React__default["default"].createElement(MemoEasyCrop, {
492
490
  ref: ref,
493
- src: src,
491
+ image: image,
494
492
  aspect: aspect,
495
493
  shape: shape,
496
494
  grid: grid,
@@ -506,32 +504,11 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
506
504
  })));
507
505
  };
508
506
 
509
- if (modalTitle) return renderComponent(modalTitle);
510
- return /*#__PURE__*/React__default['default'].createElement(LocaleReceiver__default['default'], null, function (locale, localeCode) {
511
- return renderComponent(localeCode === 'zh-cn' ? '编辑图片' : 'Edit image');
507
+ if (modalTitle) return getComponent(modalTitle);
508
+ return /*#__PURE__*/React__default["default"].createElement(LocaleReceiver__default["default"], null, function (locale, code) {
509
+ return getComponent(code === 'zh-cn' ? '编辑图片' : 'Edit image');
512
510
  });
513
511
  });
514
- ImgCrop.propTypes = {
515
- aspect: t__default['default'].number,
516
- shape: t__default['default'].oneOf(['rect', 'round']),
517
- grid: t__default['default'].bool,
518
- quality: t__default['default'].number,
519
- fillColor: t__default['default'].string,
520
- zoom: t__default['default'].bool,
521
- rotate: t__default['default'].bool,
522
- minZoom: t__default['default'].number,
523
- maxZoom: t__default['default'].number,
524
- modalTitle: t__default['default'].string,
525
- modalWidth: t__default['default'].oneOfType([t__default['default'].number, t__default['default'].string]),
526
- modalOk: t__default['default'].string,
527
- modalCancel: t__default['default'].string,
528
- onModalOk: t__default['default'].func,
529
- onModalCancel: t__default['default'].func,
530
- beforeCrop: t__default['default'].func,
531
- onUploadFail: t__default['default'].func,
532
- cropperProps: t__default['default'].object,
533
- children: t__default['default'].node
534
- };
535
512
  ImgCrop.defaultProps = {
536
513
  aspect: 1,
537
514
  shape: 'rect',