antd-img-crop 3.15.0 → 4.0.2
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 +38 -8
- package/README.zh-CN.md +39 -9
- package/dist/antd-img-crop.cjs.js +98 -125
- package/dist/antd-img-crop.esm.js +83 -109
- package/index.d.ts +3 -1
- package/package.json +13 -19
- package/src/index.jsx +0 -453
- package/src/index.less +0 -52
package/README.md
CHANGED
|
@@ -5,13 +5,13 @@ An image cropper for Ant Design [Upload](https://ant.design/components/upload/).
|
|
|
5
5
|
[](https://www.npmjs.com/package/antd-img-crop)
|
|
6
6
|
[](https://www.npmtrends.com/antd-img-crop)
|
|
7
7
|
[](https://bundlephobia.com/result?p=antd-img-crop)
|
|
8
|
-
[](https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
8
|
+
[](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE)
|
|
9
9
|
|
|
10
10
|
English | [简体中文](./README.zh-CN.md)
|
|
11
11
|
|
|
12
12
|
## Demo
|
|
13
13
|
|
|
14
|
-
[
|
|
14
|
+
[](https://codesandbox.io/s/antd-img-crop-4qoom5p9x4?fontsize=14&hidenavigation=1&theme=dark)
|
|
15
15
|
|
|
16
16
|
## Install
|
|
17
17
|
|
|
@@ -61,22 +61,52 @@ const Demo = () => (
|
|
|
61
61
|
|
|
62
62
|
To prevent overwriting the custom styles to `antd`, `antd-img-crop` does not import the style files of components.
|
|
63
63
|
|
|
64
|
-
Therefore, if
|
|
64
|
+
Therefore, if you configured `babel-plugin-import` and no `Modal` or `Slider` were used, please import the styles manually:
|
|
65
65
|
|
|
66
66
|
```js
|
|
67
67
|
import 'antd/es/modal/style';
|
|
68
68
|
import 'antd/es/slider/style';
|
|
69
69
|
```
|
|
70
70
|
|
|
71
|
+
## FAQ
|
|
72
|
+
|
|
73
|
+
### ConfigProvider not work?
|
|
74
|
+
|
|
75
|
+
If using `craco-antd`, please try to add `libraryDirectory: 'es'` to `craco.config.js`:
|
|
76
|
+
|
|
77
|
+
```diff
|
|
78
|
+
module.exports = {
|
|
79
|
+
plugins: [
|
|
80
|
+
{
|
|
81
|
+
plugin: CracoAntDesignPlugin,
|
|
82
|
+
options: {
|
|
83
|
+
// other options...
|
|
84
|
+
+ babelPluginImportOptions: {
|
|
85
|
+
+ libraryDirectory: 'es',
|
|
86
|
+
+ },
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
],
|
|
90
|
+
};
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
Or if configuring `babel-plugin-import` manually, please try to set `libraryDirectory: 'es'` to `.babelrc.js`:
|
|
94
|
+
|
|
95
|
+
```js
|
|
96
|
+
module.exports = {
|
|
97
|
+
plugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
|
|
98
|
+
};
|
|
99
|
+
```
|
|
100
|
+
|
|
71
101
|
## License
|
|
72
102
|
|
|
73
|
-
[MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
103
|
+
[MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)
|
|
74
104
|
|
|
75
105
|
[react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
|
|
76
|
-
[existing props]: https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
106
|
+
[existing props]: https://github.com/nanxiaobei/antd-img-crop/blob/main/src/index.jsx#L78-L94
|
|
77
107
|
|
|
78
|
-
##
|
|
108
|
+
## FUTAKE
|
|
79
109
|
|
|
80
|
-
|
|
110
|
+
Try [**FUTAKE**](https://sotake.com/f) in WeChat. A mini app for your inspiration moments. 🌈
|
|
81
111
|
|
|
82
|
-
|
package/README.zh-CN.md
CHANGED
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
[](https://www.npmjs.com/package/antd-img-crop)
|
|
6
6
|
[](https://www.npmtrends.com/antd-img-crop)
|
|
7
7
|
[](https://bundlephobia.com/result?p=antd-img-crop)
|
|
8
|
-
[](https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
8
|
+
[](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE)
|
|
9
9
|
|
|
10
10
|
[English](./README.md) | 简体中文
|
|
11
11
|
|
|
12
12
|
## 示例
|
|
13
13
|
|
|
14
|
-
[
|
|
14
|
+
[](https://codesandbox.io/s/antd-img-crop-4qoom5p9x4?fontsize=14&hidenavigation=1&theme=dark)
|
|
15
15
|
|
|
16
16
|
## 安装
|
|
17
17
|
|
|
@@ -59,24 +59,54 @@ const Demo = () => (
|
|
|
59
59
|
|
|
60
60
|
## 样式
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
为防止覆盖 `antd` 自定义样式，`antd-img-crop` 没有引入组件样式。
|
|
63
63
|
|
|
64
|
-
|
|
64
|
+
因此，若项目配置了 `babel-plugin-import` 且未使用 `Modal` 或 `Slider`，请手动引入样式：
|
|
65
65
|
|
|
66
66
|
```js
|
|
67
67
|
import 'antd/es/modal/style';
|
|
68
68
|
import 'antd/es/slider/style';
|
|
69
69
|
```
|
|
70
70
|
|
|
71
|
+
## FAQ
|
|
72
|
+
|
|
73
|
+
### ConfigProvider 未生效？
|
|
74
|
+
|
|
75
|
+
若使用 `craco-antd`，请在 `craco.config.js` 中添加 `libraryDirectory: 'es'`：
|
|
76
|
+
|
|
77
|
+
```diff
|
|
78
|
+
module.exports = {
|
|
79
|
+
plugins: [
|
|
80
|
+
{
|
|
81
|
+
plugin: CracoAntDesignPlugin,
|
|
82
|
+
options: {
|
|
83
|
+
// 其它配置...
|
|
84
|
+
+ babelPluginImportOptions: {
|
|
85
|
+
+ libraryDirectory: 'es',
|
|
86
|
+
+ },
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
],
|
|
90
|
+
};
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
若手动配置 `babel-plugin-import`，请在 `.babelrc.js` 中设置 `libraryDirectory: 'es'`：
|
|
94
|
+
|
|
95
|
+
```js
|
|
96
|
+
module.exports = {
|
|
97
|
+
plugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
|
|
98
|
+
};
|
|
99
|
+
```
|
|
100
|
+
|
|
71
101
|
## 协议
|
|
72
102
|
|
|
73
|
-
[MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
103
|
+
[MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)
|
|
74
104
|
|
|
75
105
|
[react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
|
|
76
|
-
[已有 props]: https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
106
|
+
[已有 props]: https://github.com/nanxiaobei/antd-img-crop/blob/main/src/index.jsx#L78-L94
|
|
77
107
|
|
|
78
|
-
##
|
|
108
|
+
## FUTAKE
|
|
79
109
|
|
|
80
|
-
|
|
110
|
+
试试 [**FUTAKE**](https://sotake.com/f) 小程序，你的灵感相册。🌈
|
|
81
111
|
|
|
82
|
-
|
|
@@ -19,11 +19,10 @@ 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
|
|
26
|
-
var
|
|
24
|
+
var AntModal = require('antd/lib/modal');
|
|
25
|
+
var AntSlider = require('antd/lib/slider');
|
|
27
26
|
|
|
28
27
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
29
28
|
|
|
@@ -32,34 +31,33 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
|
32
31
|
var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
|
|
33
32
|
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
|
|
34
33
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
35
|
-
var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
|
|
36
34
|
var Cropper__default = /*#__PURE__*/_interopDefaultLegacy(Cropper);
|
|
37
35
|
var LocaleReceiver__default = /*#__PURE__*/_interopDefaultLegacy(LocaleReceiver);
|
|
38
|
-
var
|
|
39
|
-
var
|
|
36
|
+
var AntModal__default = /*#__PURE__*/_interopDefaultLegacy(AntModal);
|
|
37
|
+
var AntSlider__default = /*#__PURE__*/_interopDefaultLegacy(AntSlider);
|
|
40
38
|
|
|
41
|
-
__$styleInject(".
|
|
39
|
+
__$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
40
|
|
|
43
41
|
var _excluded = ["beforeUpload", "accept"];
|
|
44
|
-
var
|
|
42
|
+
var cls = 'img-crop';
|
|
45
43
|
var INIT_ZOOM = 1;
|
|
46
44
|
var ZOOM_STEP = 0.1;
|
|
47
45
|
var INIT_ROTATE = 0;
|
|
48
46
|
var ROTATE_STEP = 1;
|
|
49
47
|
var MIN_ROTATE = -180;
|
|
50
48
|
var MAX_ROTATE = 180;
|
|
51
|
-
var EasyCrop = /*#__PURE__*/React.
|
|
52
|
-
var
|
|
49
|
+
var EasyCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
50
|
+
var image = props.image,
|
|
53
51
|
aspect = props.aspect,
|
|
54
52
|
shape = props.shape,
|
|
55
53
|
grid = props.grid,
|
|
56
54
|
zoom = props.zoom,
|
|
57
55
|
rotate = props.rotate,
|
|
56
|
+
minZoom = props.minZoom,
|
|
57
|
+
maxZoom = props.maxZoom,
|
|
58
58
|
rotateValRef = props.rotateValRef,
|
|
59
59
|
setZoomValRef = props.setZoomValRef,
|
|
60
60
|
setRotateValRef = props.setRotateValRef,
|
|
61
|
-
minZoom = props.minZoom,
|
|
62
|
-
maxZoom = props.maxZoom,
|
|
63
61
|
cropPixelsRef = props.cropPixelsRef,
|
|
64
62
|
cropperProps = props.cropperProps;
|
|
65
63
|
|
|
@@ -68,7 +66,7 @@ var EasyCrop = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
|
|
|
68
66
|
y: 0
|
|
69
67
|
}),
|
|
70
68
|
crop = _useState[0],
|
|
71
|
-
|
|
69
|
+
onCropChange = _useState[1];
|
|
72
70
|
|
|
73
71
|
var _useState2 = React.useState({
|
|
74
72
|
width: 0,
|
|
@@ -111,12 +109,12 @@ var EasyCrop = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
|
|
|
111
109
|
setZoomValRef.current = setZoomVal;
|
|
112
110
|
setRotateValRef.current = setRotateVal;
|
|
113
111
|
}, [setRotateValRef, setZoomValRef]);
|
|
114
|
-
return /*#__PURE__*/React__default[
|
|
112
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Cropper__default["default"], Object.assign({}, cropperProps, {
|
|
115
113
|
ref: ref,
|
|
116
|
-
image:
|
|
114
|
+
image: image,
|
|
117
115
|
crop: crop,
|
|
118
116
|
cropSize: cropSize,
|
|
119
|
-
onCropChange:
|
|
117
|
+
onCropChange: onCropChange,
|
|
120
118
|
aspect: aspect,
|
|
121
119
|
cropShape: shape,
|
|
122
120
|
showGrid: grid,
|
|
@@ -130,72 +128,67 @@ var EasyCrop = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
|
|
|
130
128
|
onCropComplete: onCropComplete,
|
|
131
129
|
onMediaLoaded: onMediaLoaded,
|
|
132
130
|
classes: {
|
|
133
|
-
containerClassName:
|
|
134
|
-
mediaClassName:
|
|
131
|
+
containerClassName: cls + "-container",
|
|
132
|
+
mediaClassName: cls + "-media"
|
|
135
133
|
}
|
|
136
|
-
})), zoom && /*#__PURE__*/React__default[
|
|
137
|
-
className:
|
|
138
|
-
}, /*#__PURE__*/React__default[
|
|
134
|
+
})), zoom && /*#__PURE__*/React__default["default"].createElement("section", {
|
|
135
|
+
className: cls + "-control " + cls + "-control-zoom"
|
|
136
|
+
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
139
137
|
onClick: function onClick() {
|
|
140
138
|
return setZoomVal(zoomVal - ZOOM_STEP);
|
|
141
139
|
},
|
|
142
140
|
disabled: zoomVal - ZOOM_STEP < minZoom
|
|
143
|
-
}, "\uFF0D"), /*#__PURE__*/React__default[
|
|
141
|
+
}, "\uFF0D"), /*#__PURE__*/React__default["default"].createElement(AntSlider__default["default"], {
|
|
144
142
|
min: minZoom,
|
|
145
143
|
max: maxZoom,
|
|
146
144
|
step: ZOOM_STEP,
|
|
147
145
|
value: zoomVal,
|
|
148
146
|
onChange: setZoomVal
|
|
149
|
-
}), /*#__PURE__*/React__default[
|
|
147
|
+
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
150
148
|
onClick: function onClick() {
|
|
151
149
|
return setZoomVal(zoomVal + ZOOM_STEP);
|
|
152
150
|
},
|
|
153
151
|
disabled: zoomVal + ZOOM_STEP > maxZoom
|
|
154
|
-
}, "\uFF0B")), rotate && /*#__PURE__*/React__default[
|
|
155
|
-
className:
|
|
156
|
-
}, /*#__PURE__*/React__default[
|
|
152
|
+
}, "\uFF0B")), rotate && /*#__PURE__*/React__default["default"].createElement("section", {
|
|
153
|
+
className: cls + "-control " + cls + "-control-rotate"
|
|
154
|
+
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
157
155
|
onClick: function onClick() {
|
|
158
156
|
return setRotateVal(rotateVal - ROTATE_STEP);
|
|
159
157
|
},
|
|
160
158
|
disabled: rotateVal === MIN_ROTATE
|
|
161
|
-
}, "\u21BA"), /*#__PURE__*/React__default[
|
|
159
|
+
}, "\u21BA"), /*#__PURE__*/React__default["default"].createElement(AntSlider__default["default"], {
|
|
162
160
|
min: MIN_ROTATE,
|
|
163
161
|
max: MAX_ROTATE,
|
|
164
162
|
step: ROTATE_STEP,
|
|
165
163
|
value: rotateVal,
|
|
166
164
|
onChange: setRotateVal
|
|
167
|
-
}), /*#__PURE__*/React__default[
|
|
165
|
+
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
168
166
|
onClick: function onClick() {
|
|
169
167
|
return setRotateVal(rotateVal + ROTATE_STEP);
|
|
170
168
|
},
|
|
171
169
|
disabled: rotateVal === MAX_ROTATE
|
|
172
170
|
}, "\u21BB")));
|
|
173
|
-
})
|
|
174
|
-
|
|
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
|
-
};
|
|
171
|
+
});
|
|
172
|
+
var EasyCropMemo = /*#__PURE__*/React.memo(EasyCrop);
|
|
189
173
|
var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
190
|
-
var aspect = props.aspect,
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
fillColor = props.fillColor,
|
|
174
|
+
var _props$aspect = props.aspect,
|
|
175
|
+
aspect = _props$aspect === void 0 ? 1 : _props$aspect,
|
|
176
|
+
_props$shape = props.shape,
|
|
177
|
+
shape = _props$shape === void 0 ? 'rect' : _props$shape,
|
|
178
|
+
_props$grid = props.grid,
|
|
179
|
+
grid = _props$grid === void 0 ? false : _props$grid,
|
|
180
|
+
_props$quality = props.quality,
|
|
181
|
+
quality = _props$quality === void 0 ? 0.4 : _props$quality,
|
|
182
|
+
_props$fillColor = props.fillColor,
|
|
183
|
+
fillColor = _props$fillColor === void 0 ? 'white' : _props$fillColor,
|
|
184
|
+
_props$zoom = props.zoom,
|
|
185
|
+
zoom = _props$zoom === void 0 ? true : _props$zoom,
|
|
186
|
+
_props$rotate = props.rotate,
|
|
187
|
+
rotate = _props$rotate === void 0 ? false : _props$rotate,
|
|
188
|
+
_props$minZoom = props.minZoom,
|
|
189
|
+
minZoom = _props$minZoom === void 0 ? 1 : _props$minZoom,
|
|
190
|
+
_props$maxZoom = props.maxZoom,
|
|
191
|
+
maxZoom = _props$maxZoom === void 0 ? 3 : _props$maxZoom,
|
|
199
192
|
modalTitle = props.modalTitle,
|
|
200
193
|
modalWidth = props.modalWidth,
|
|
201
194
|
modalOk = props.modalOk,
|
|
@@ -206,39 +199,46 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
206
199
|
onUploadFail = props.onUploadFail,
|
|
207
200
|
cropperProps = props.cropperProps,
|
|
208
201
|
children = props.children;
|
|
202
|
+
var cb = React.useRef({});
|
|
203
|
+
React.useEffect(function () {
|
|
204
|
+
cb.current.onModalOk = onModalOk;
|
|
205
|
+
cb.current.onModalCancel = onModalCancel;
|
|
206
|
+
cb.current.beforeCrop = beforeCrop;
|
|
207
|
+
cb.current.onUploadFail = onUploadFail;
|
|
208
|
+
}, [beforeCrop, onModalCancel, onModalOk, onUploadFail]);
|
|
209
209
|
/**
|
|
210
210
|
* Upload
|
|
211
211
|
*/
|
|
212
212
|
|
|
213
213
|
var _useState5 = React.useState(''),
|
|
214
|
-
|
|
215
|
-
|
|
214
|
+
image = _useState5[0],
|
|
215
|
+
setImage = _useState5[1];
|
|
216
216
|
|
|
217
217
|
var fileRef = React.useRef();
|
|
218
218
|
var resolveRef = React.useRef();
|
|
219
219
|
var rejectRef = React.useRef();
|
|
220
220
|
var beforeUploadRef = React.useRef();
|
|
221
|
-
var
|
|
221
|
+
var uploadComponent = React.useMemo(function () {
|
|
222
222
|
var upload = Array.isArray(children) ? children[0] : children;
|
|
223
223
|
|
|
224
224
|
var _upload$props = upload.props,
|
|
225
225
|
beforeUpload = _upload$props.beforeUpload,
|
|
226
226
|
accept = _upload$props.accept,
|
|
227
|
-
restUploadProps = _objectWithoutPropertiesLoose__default[
|
|
227
|
+
restUploadProps = _objectWithoutPropertiesLoose__default["default"](_upload$props, _excluded);
|
|
228
228
|
|
|
229
229
|
beforeUploadRef.current = beforeUpload;
|
|
230
|
-
return _extends__default[
|
|
231
|
-
props: _extends__default[
|
|
230
|
+
return _extends__default["default"]({}, upload, {
|
|
231
|
+
props: _extends__default["default"]({}, restUploadProps, {
|
|
232
232
|
accept: accept || 'image/*',
|
|
233
233
|
beforeUpload: function beforeUpload(file, fileList) {
|
|
234
234
|
return new Promise( /*#__PURE__*/function () {
|
|
235
|
-
var _ref = _asyncToGenerator__default[
|
|
235
|
+
var _ref = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(resolve, reject) {
|
|
236
236
|
var reader;
|
|
237
|
-
return _regeneratorRuntime__default[
|
|
237
|
+
return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
|
|
238
238
|
while (1) {
|
|
239
239
|
switch (_context.prev = _context.next) {
|
|
240
240
|
case 0:
|
|
241
|
-
_context.t0 = beforeCrop;
|
|
241
|
+
_context.t0 = cb.current.beforeCrop;
|
|
242
242
|
|
|
243
243
|
if (!_context.t0) {
|
|
244
244
|
_context.next = 5;
|
|
@@ -246,7 +246,7 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
246
246
|
}
|
|
247
247
|
|
|
248
248
|
_context.next = 4;
|
|
249
|
-
return beforeCrop(file, fileList);
|
|
249
|
+
return cb.current.beforeCrop(file, fileList);
|
|
250
250
|
|
|
251
251
|
case 4:
|
|
252
252
|
_context.t0 = !_context.sent;
|
|
@@ -264,18 +264,18 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
264
264
|
fileRef.current = file;
|
|
265
265
|
|
|
266
266
|
resolveRef.current = function (newFile) {
|
|
267
|
-
onModalOk == null ? void 0 : onModalOk(newFile);
|
|
267
|
+
cb.current.onModalOk == null ? void 0 : cb.current.onModalOk(newFile);
|
|
268
268
|
resolve(newFile);
|
|
269
269
|
};
|
|
270
270
|
|
|
271
271
|
rejectRef.current = function (uploadErr) {
|
|
272
|
-
onUploadFail == null ? void 0 : onUploadFail(uploadErr);
|
|
272
|
+
cb.current.onUploadFail == null ? void 0 : cb.current.onUploadFail(uploadErr);
|
|
273
273
|
reject(uploadErr);
|
|
274
274
|
};
|
|
275
275
|
|
|
276
276
|
reader = new FileReader();
|
|
277
277
|
reader.addEventListener('load', function () {
|
|
278
|
-
|
|
278
|
+
return setImage(reader.result);
|
|
279
279
|
});
|
|
280
280
|
reader.readAsDataURL(file);
|
|
281
281
|
|
|
@@ -294,7 +294,7 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
294
294
|
}
|
|
295
295
|
})
|
|
296
296
|
});
|
|
297
|
-
}, [
|
|
297
|
+
}, [children]);
|
|
298
298
|
/**
|
|
299
299
|
* Crop
|
|
300
300
|
*/
|
|
@@ -318,29 +318,31 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
318
318
|
});
|
|
319
319
|
return obj;
|
|
320
320
|
}, [modalCancel, modalOk, modalWidth]);
|
|
321
|
-
|
|
322
|
-
|
|
321
|
+
|
|
322
|
+
var onClose = function onClose() {
|
|
323
|
+
setImage('');
|
|
323
324
|
setZoomValRef.current(INIT_ZOOM);
|
|
324
325
|
setRotateValRef.current(INIT_ROTATE);
|
|
325
|
-
}
|
|
326
|
+
};
|
|
327
|
+
|
|
326
328
|
var onCancel = React.useCallback(function () {
|
|
327
|
-
onModalCancel == null ? void 0 : onModalCancel();
|
|
329
|
+
cb.current.onModalCancel == null ? void 0 : cb.current.onModalCancel();
|
|
328
330
|
onClose();
|
|
329
|
-
}, [
|
|
330
|
-
var onOk = React.useCallback( /*#__PURE__*/_asyncToGenerator__default[
|
|
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;
|
|
331
|
+
}, []);
|
|
332
|
+
var onOk = React.useCallback( /*#__PURE__*/_asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee3() {
|
|
333
|
+
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
334
|
|
|
333
|
-
return _regeneratorRuntime__default[
|
|
335
|
+
return _regeneratorRuntime__default["default"].wrap(function _callee3$(_context3) {
|
|
334
336
|
while (1) {
|
|
335
337
|
switch (_context3.prev = _context3.next) {
|
|
336
338
|
case 0:
|
|
337
339
|
onClose();
|
|
338
|
-
rawImg = document.querySelector("." +
|
|
340
|
+
rawImg = document.querySelector("." + cls + "-media");
|
|
339
341
|
_cropPixelsRef$curren = cropPixelsRef.current, cropWidth = _cropPixelsRef$curren.width, cropHeight = _cropPixelsRef$curren.height, cropX = _cropPixelsRef$curren.x, cropY = _cropPixelsRef$curren.y;
|
|
340
342
|
canvas = document.createElement('canvas');
|
|
341
343
|
ctx = canvas.getContext('2d');
|
|
342
344
|
|
|
343
|
-
if (rotate && rotateValRef.current !==
|
|
345
|
+
if (rotate && rotateValRef.current !== INIT_ROTATE) {
|
|
344
346
|
// make canvas to cover the rotated image
|
|
345
347
|
rawWidth = rawImg.naturalWidth, rawHeight = rawImg.naturalHeight;
|
|
346
348
|
boxSize = Math.sqrt(Math.pow(rawWidth, 2) + Math.pow(rawHeight, 2));
|
|
@@ -363,7 +365,7 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
363
365
|
|
|
364
366
|
half = boxSize / 2;
|
|
365
367
|
ctx.translate(half, half);
|
|
366
|
-
ctx.rotate(
|
|
368
|
+
ctx.rotate(Math.PI / 180 * rotateValRef.current);
|
|
367
369
|
ctx.translate(-half, -half); // draw rotated image to canvas center
|
|
368
370
|
|
|
369
371
|
ctx.fillStyle = fillColor;
|
|
@@ -388,11 +390,12 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
388
390
|
|
|
389
391
|
|
|
390
392
|
_fileRef$current = fileRef.current, type = _fileRef$current.type, name = _fileRef$current.name, uid = _fileRef$current.uid;
|
|
391
|
-
|
|
392
|
-
|
|
393
|
+
|
|
394
|
+
onBlob = /*#__PURE__*/function () {
|
|
395
|
+
var _ref3 = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee2(blob) {
|
|
393
396
|
var newFile, res, passedFile, _type;
|
|
394
397
|
|
|
395
|
-
return _regeneratorRuntime__default[
|
|
398
|
+
return _regeneratorRuntime__default["default"].wrap(function _callee2$(_context2) {
|
|
396
399
|
while (1) {
|
|
397
400
|
switch (_context2.prev = _context2.next) {
|
|
398
401
|
case 0:
|
|
@@ -466,31 +469,33 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
466
469
|
}, _callee2, null, [[13, 22]]);
|
|
467
470
|
}));
|
|
468
471
|
|
|
469
|
-
return function (_x3) {
|
|
472
|
+
return function onBlob(_x3) {
|
|
470
473
|
return _ref3.apply(this, arguments);
|
|
471
474
|
};
|
|
472
|
-
}()
|
|
475
|
+
}();
|
|
476
|
+
|
|
477
|
+
canvas.toBlob(onBlob, type, quality);
|
|
473
478
|
|
|
474
|
-
case
|
|
479
|
+
case 9:
|
|
475
480
|
case "end":
|
|
476
481
|
return _context3.stop();
|
|
477
482
|
}
|
|
478
483
|
}
|
|
479
484
|
}, _callee3);
|
|
480
|
-
})), [fillColor,
|
|
485
|
+
})), [fillColor, quality, rotate]);
|
|
481
486
|
|
|
482
|
-
var
|
|
483
|
-
return /*#__PURE__*/React__default[
|
|
487
|
+
var getComponent = function getComponent(titleOfModal) {
|
|
488
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, uploadComponent, image && /*#__PURE__*/React__default["default"].createElement(AntModal__default["default"], Object.assign({
|
|
484
489
|
visible: true,
|
|
485
|
-
wrapClassName:
|
|
490
|
+
wrapClassName: cls + "-modal",
|
|
486
491
|
title: titleOfModal,
|
|
487
492
|
onOk: onOk,
|
|
488
493
|
onCancel: onCancel,
|
|
489
494
|
maskClosable: false,
|
|
490
495
|
destroyOnClose: true
|
|
491
|
-
}, modalProps), /*#__PURE__*/React__default[
|
|
496
|
+
}, modalProps), /*#__PURE__*/React__default["default"].createElement(EasyCropMemo, {
|
|
492
497
|
ref: ref,
|
|
493
|
-
|
|
498
|
+
image: image,
|
|
494
499
|
aspect: aspect,
|
|
495
500
|
shape: shape,
|
|
496
501
|
grid: grid,
|
|
@@ -506,42 +511,10 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
506
511
|
})));
|
|
507
512
|
};
|
|
508
513
|
|
|
509
|
-
if (modalTitle) return
|
|
510
|
-
return /*#__PURE__*/React__default[
|
|
511
|
-
return
|
|
514
|
+
if (modalTitle) return getComponent(modalTitle);
|
|
515
|
+
return /*#__PURE__*/React__default["default"].createElement(LocaleReceiver__default["default"], null, function (locale, code) {
|
|
516
|
+
return getComponent(code === 'zh-cn' ? '编辑图片' : 'Edit image');
|
|
512
517
|
});
|
|
513
518
|
});
|
|
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
|
-
ImgCrop.defaultProps = {
|
|
536
|
-
aspect: 1,
|
|
537
|
-
shape: 'rect',
|
|
538
|
-
grid: false,
|
|
539
|
-
quality: 0.4,
|
|
540
|
-
fillColor: 'white',
|
|
541
|
-
zoom: true,
|
|
542
|
-
rotate: false,
|
|
543
|
-
minZoom: 1,
|
|
544
|
-
maxZoom: 3
|
|
545
|
-
};
|
|
546
519
|
|
|
547
520
|
module.exports = ImgCrop;
|