antd-img-crop 4.0.1 → 4.0.2

package/README.md

@@ -9,12 +9,6 @@ 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.
->
-> If having problem, Please read [No style, or ConfigProvider not work?](#no-style-or-configprovider-not-work)
-
 ## Demo
 
 [![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)
@@ -63,9 +57,20 @@ const Demo = () => (
 | onUploadFail  | `function`           | -              | Call when upload failed                                               |
 | cropperProps  | `object`             | -              | Props of [react-easy-crop] (\* [existing props] cannot be overridden) |
 
+## Styles
+
+To prevent overwriting the custom styles to `antd`, `antd-img-crop` does not import the style files of components.
+
+Therefore, if you configured `babel-plugin-import` and no `Modal` or `Slider` were used, please import the styles manually:
+
+```js
+import 'antd/es/modal/style';
+import 'antd/es/slider/style';
+```
+
 ## FAQ
 
-### No style, or ConfigProvider not work?
+### ConfigProvider not work?
 
 If using `craco-antd`, please try to add `libraryDirectory: 'es'` to `craco.config.js`:
 

package/README.zh-CN.md

@@ -9,12 +9,6 @@
 
 [English](./README.md) | 简体中文
 
----
-
-> 👉 4.0 版本起，无需再手动引入 Modal 和 Slider 样式文件。
->
-> 如有问题，请查看 [没有样式，或 ConfigProvider 没有生效？](#没有样式或-configprovider-没有生效)
-
 ## 示例
 
 [![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)
@@ -63,9 +57,20 @@ const Demo = () => (
 | onUploadFail  | `function`           | -            | 上传失败时的回调                                       |
 | cropperProps  | `object`             | -            | [react-easy-crop] 的 props（\* [已有 props] 无法重写） |
 
+## 样式
+
+为防止覆盖 `antd` 自定义样式，`antd-img-crop` 没有引入组件样式。
+
+因此，若项目配置了 `babel-plugin-import` 且未使用 `Modal` 或 `Slider`，请手动引入样式：
+
+```js
+import 'antd/es/modal/style';
+import 'antd/es/slider/style';
+```
+
 ## FAQ
 
-### 没有样式，或 ConfigProvider 没有生效？
+### ConfigProvider 未生效？
 
 若使用 `craco-antd`，请在 `craco.config.js` 中添加 `libraryDirectory: 'es'`：
 

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

@@ -23,8 +23,6 @@ var Cropper = require('react-easy-crop');
 var LocaleReceiver = require('antd/lib/locale-provider/LocaleReceiver');
 var AntModal = require('antd/lib/modal');
 var AntSlider = require('antd/lib/slider');
-require('antd/lib/modal/style');
-require('antd/lib/slider/style');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -19,8 +19,6 @@ import Cropper from 'react-easy-crop';
 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");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-img-crop",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "An image cropper for Ant Design Upload",
   "keywords": [
     "react",