antd-img-crop 4.0.0 → 4.0.1

package/README.md

@@ -9,7 +9,11 @@ An image cropper for Ant Design [Upload](https://ant.design/components/upload/).
 
 English | [简体中文](./README.zh-CN.md)
 
-> Since 4.0, no need to manually import Modal & Slider style files.
+---
+
+> 👉 Since 4.0, no need to manually import Modal & Slider style files.
+>
+> If having problem, Please read [No style, or ConfigProvider not work?](#no-style-or-configprovider-not-work)
 
 ## Demo
 
@@ -59,6 +63,36 @@ const Demo = () => (
 | onUploadFail  | `function`           | -              | Call when upload failed                                               |
 | cropperProps  | `object`             | -              | Props of [react-easy-crop] (\* [existing props] cannot be overridden) |
 
+## FAQ
+
+### No style, or ConfigProvider not work?
+
+If using `craco-antd`, please try to add `libraryDirectory: 'es'` to `craco.config.js`:
+
+```diff
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoAntDesignPlugin,
+      options: {
+        // other options...
++       babelPluginImportOptions: {
++         libraryDirectory: 'es',
++       },
+      },
+    },
+  ],
+};
+```
+
+Or if configuring `babel-plugin-import` manually, please try to set `libraryDirectory: 'es'` to `.babelrc.js`:
+
+```js
+module.exports = {
+  plugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
+};
+```
+
 ## License
 
 [MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)

package/README.zh-CN.md

@@ -9,7 +9,11 @@
 
 [English](./README.md) | 简体中文
 
-> 4.0 版本起，再无需手动引入 Modal 和 Slider 样式文件。
+---
+
+> 👉 4.0 版本起，无需再手动引入 Modal 和 Slider 样式文件。
+>
+> 如有问题，请查看 [没有样式，或 ConfigProvider 没有生效？](#没有样式或-configprovider-没有生效)
 
 ## 示例
 
@@ -59,6 +63,36 @@ const Demo = () => (
 | onUploadFail  | `function`           | -            | 上传失败时的回调                                       |
 | cropperProps  | `object`             | -            | [react-easy-crop] 的 props（\* [已有 props] 无法重写） |
 
+## FAQ
+
+### 没有样式，或 ConfigProvider 没有生效？
+
+若使用 `craco-antd`，请在 `craco.config.js` 中添加 `libraryDirectory: 'es'`：
+
+```diff
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoAntDesignPlugin,
+      options: {
+        // 其它配置...
++       babelPluginImportOptions: {
++         libraryDirectory: 'es',
++       },
+      },
+    },
+  ],
+};
+```
+
+若手动配置 `babel-plugin-import`，请在 `.babelrc.js` 中设置 `libraryDirectory: 'es'`：
+
+```js
+module.exports = {
+  plugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
+};
+```
+
 ## 协议
 
 [MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)

package/dist/antd-img-crop.cjs.js

@@ -171,17 +171,26 @@ var EasyCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: rotateVal === MAX_ROTATE
   }, "\u21BB")));
 });
-var MemoEasyCrop = /*#__PURE__*/React.memo(EasyCrop);
+var EasyCropMemo = /*#__PURE__*/React.memo(EasyCrop);
 var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var aspect = props.aspect,
-      shape = props.shape,
-      grid = props.grid,
-      quality = props.quality,
-      zoom = props.zoom,
-      rotate = props.rotate,
-      minZoom = props.minZoom,
-      maxZoom = props.maxZoom,
-      fillColor = props.fillColor,
+  var _props$aspect = props.aspect,
+      aspect = _props$aspect === void 0 ? 1 : _props$aspect,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'rect' : _props$shape,
+      _props$grid = props.grid,
+      grid = _props$grid === void 0 ? false : _props$grid,
+      _props$quality = props.quality,
+      quality = _props$quality === void 0 ? 0.4 : _props$quality,
+      _props$fillColor = props.fillColor,
+      fillColor = _props$fillColor === void 0 ? 'white' : _props$fillColor,
+      _props$zoom = props.zoom,
+      zoom = _props$zoom === void 0 ? true : _props$zoom,
+      _props$rotate = props.rotate,
+      rotate = _props$rotate === void 0 ? false : _props$rotate,
+      _props$minZoom = props.minZoom,
+      minZoom = _props$minZoom === void 0 ? 1 : _props$minZoom,
+      _props$maxZoom = props.maxZoom,
+      maxZoom = _props$maxZoom === void 0 ? 3 : _props$maxZoom,
       modalTitle = props.modalTitle,
       modalWidth = props.modalWidth,
       modalOk = props.modalOk,
@@ -486,7 +495,7 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onCancel: onCancel,
       maskClosable: false,
       destroyOnClose: true
-    }, modalProps), /*#__PURE__*/React__default["default"].createElement(MemoEasyCrop, {
+    }, modalProps), /*#__PURE__*/React__default["default"].createElement(EasyCropMemo, {
       ref: ref,
       image: image,
       aspect: aspect,
@@ -509,16 +518,5 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return getComponent(code === 'zh-cn' ? '编辑图片' : 'Edit image');
   });
 });
-ImgCrop.defaultProps = {
-  aspect: 1,
-  shape: 'rect',
-  grid: false,
-  quality: 0.4,
-  fillColor: 'white',
-  zoom: true,
-  rotate: false,
-  minZoom: 1,
-  maxZoom: 3
-};
 
 module.exports = ImgCrop;

package/dist/antd-img-crop.esm.js

@@ -16,11 +16,11 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWith
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import React, { forwardRef, useRef, useEffect, useState, useMemo, useCallback, memo } from 'react';
 import Cropper from 'react-easy-crop';
-import LocaleReceiver from 'antd/lib/locale-provider/LocaleReceiver';
-import AntModal from 'antd/lib/modal';
-import AntSlider from 'antd/lib/slider';
-import 'antd/lib/modal/style';
-import 'antd/lib/slider/style';
+import LocaleReceiver from 'antd/es/locale-provider/LocaleReceiver';
+import AntModal from 'antd/es/modal';
+import AntSlider from 'antd/es/slider';
+import 'antd/es/modal/style';
+import 'antd/es/slider/style';
 
 __$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");
 
@@ -155,17 +155,26 @@ var EasyCrop = /*#__PURE__*/forwardRef(function (props, ref) {
     disabled: rotateVal === MAX_ROTATE
   }, "\u21BB")));
 });
-var MemoEasyCrop = /*#__PURE__*/memo(EasyCrop);
+var EasyCropMemo = /*#__PURE__*/memo(EasyCrop);
 var ImgCrop = /*#__PURE__*/forwardRef(function (props, ref) {
-  var aspect = props.aspect,
-      shape = props.shape,
-      grid = props.grid,
-      quality = props.quality,
-      zoom = props.zoom,
-      rotate = props.rotate,
-      minZoom = props.minZoom,
-      maxZoom = props.maxZoom,
-      fillColor = props.fillColor,
+  var _props$aspect = props.aspect,
+      aspect = _props$aspect === void 0 ? 1 : _props$aspect,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'rect' : _props$shape,
+      _props$grid = props.grid,
+      grid = _props$grid === void 0 ? false : _props$grid,
+      _props$quality = props.quality,
+      quality = _props$quality === void 0 ? 0.4 : _props$quality,
+      _props$fillColor = props.fillColor,
+      fillColor = _props$fillColor === void 0 ? 'white' : _props$fillColor,
+      _props$zoom = props.zoom,
+      zoom = _props$zoom === void 0 ? true : _props$zoom,
+      _props$rotate = props.rotate,
+      rotate = _props$rotate === void 0 ? false : _props$rotate,
+      _props$minZoom = props.minZoom,
+      minZoom = _props$minZoom === void 0 ? 1 : _props$minZoom,
+      _props$maxZoom = props.maxZoom,
+      maxZoom = _props$maxZoom === void 0 ? 3 : _props$maxZoom,
       modalTitle = props.modalTitle,
       modalWidth = props.modalWidth,
       modalOk = props.modalOk,
@@ -470,7 +479,7 @@ var ImgCrop = /*#__PURE__*/forwardRef(function (props, ref) {
       onCancel: onCancel,
       maskClosable: false,
       destroyOnClose: true
-    }, modalProps), /*#__PURE__*/React.createElement(MemoEasyCrop, {
+    }, modalProps), /*#__PURE__*/React.createElement(EasyCropMemo, {
       ref: ref,
       image: image,
       aspect: aspect,
@@ -493,16 +502,5 @@ var ImgCrop = /*#__PURE__*/forwardRef(function (props, ref) {
     return getComponent(code === 'zh-cn' ? '编辑图片' : 'Edit image');
   });
 });
-ImgCrop.defaultProps = {
-  aspect: 1,
-  shape: 'rect',
-  grid: false,
-  quality: 0.4,
-  fillColor: 'white',
-  zoom: true,
-  rotate: false,
-  minZoom: 1,
-  maxZoom: 3
-};
 
 export { ImgCrop as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-img-crop",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "An image cropper for Ant Design Upload",
   "keywords": [
     "react",
@@ -27,12 +27,12 @@
     "build": "rimraf dist && rollup -c"
   },
   "peerDependencies": {
-    "@babel/runtime": ">=7.0.0",
     "antd": ">=4.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
+    "@babel/runtime": "^7.16.5",
     "react-easy-crop": "^4.0.1"
   },
   "devDependencies": {
@@ -40,6 +40,7 @@
     "@babel/plugin-transform-runtime": "^7.16.5",
     "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
+    "@rollup/plugin-replace": "^3.0.0",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^7.0.0",
@@ -47,7 +48,8 @@
     "prettier": "^2.5.1",
     "rollup": "^2.61.1",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-less": "^1.1.3"
+    "rollup-plugin-less": "^1.1.3",
+    "typescript": "^4.5.4"
   },
   "eslintIgnore": [
     "dist",