antd-img-crop 4.6.0 → 4.8.0

package/README.md

@@ -61,45 +61,25 @@ const Demo = () => (
 | onUploadFail            | `function`           | -              | Call when upload failed                                                            |
 | cropperProps            | `object`             | -              | Props of [react-easy-crop] (\* [existing props] cannot be overridden)              |
 
-## Before antd v5
+### `ConfigProvider` not work?
 
-### No style?
-
-If you use `babel-plugin-import` and no `Modal` or `Slider` were imported, please import the styles manually:
+Try to set `libraryDirectory`(`'es'` or `'lib'`) to `babel-plugin-import` config, see which one will work.
 
 ```js
-import 'antd/es/modal/style';
-import 'antd/es/slider/style';
-```
-
-### 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',
-+       },
-      },
-    },
+    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
   ],
 };
 ```
 
-Or if configuring `babel-plugin-import` manually, please try to set `libraryDirectory: 'es'` to `.babelrc.js`:
+## No style? (only `antd<=v4`)
+
+If you use `antd<=v4` + `babel-plugin-import`, and no `Modal` or `Slider` were imported, please import these styles manually:
 
 ```js
-module.exports = {
-  plugins: [
-    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
-  ],
-};
+import 'antd/es/modal/style';
+import 'antd/es/slider/style';
 ```
 
 ## License
@@ -114,3 +94,7 @@ module.exports = {
 Try [**FUTAKE**](https://sotake.com/futake) in WeChat. A mini app for your inspiration moments. 🌈
 
 ![](https://s3.bmp.ovh/imgs/2022/07/21/452dd47aeb790abd.png)
+
+```
+
+```

package/README.zh-CN.md

@@ -61,45 +61,32 @@ const Demo = () => (
 | onUploadFail            | `function`           | -            | 上传失败时的回调                                       |
 | cropperProps            | `object`             | -            | [react-easy-crop] 的 props（\* [已有 props] 无法重写） |
 
-## 在 antd v5 之前
-
-### 没有样式？
+### `ConfigProvider` 无效？
 
-若项目使用 `babel-plugin-import` 且未引入 `Modal` 或 `Slider`，请手动引入样式：
+尝试设置 `libraryDirectory`（`'es'` 或 `'lib'`）到 `babel-plugin-import` 的配置项，看看哪个会生效。
 
 ```js
-import 'antd/es/modal/style';
-import 'antd/es/slider/style';
-```
-
-### ConfigProvider 未生效？
-
-若使用 `craco-antd`，请在 `craco.config.js` 中添加 `libraryDirectory: 'es'`：
-
-```diff
 module.exports = {
   plugins: [
-    {
-      plugin: CracoAntDesignPlugin,
-      options: {
-        // 其它配置...
-+       babelPluginImportOptions: {
-+         libraryDirectory: 'es',
-+       },
-      },
-    },
+    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
   ],
 };
 ```
 
-若手动配置 `babel-plugin-import`，请在 `.babelrc.js` 中设置 `libraryDirectory: 'es'`：
+## 没有样式？（仅 `antd<=v4`）
+
+若使用 `antd<=v4` + `babel-plugin-import`，且未引入 `Modal` 或 `Slider`，请手动引入这些样式：
 
 ```js
-module.exports = {
-  plugins: [
-    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
-  ],
-};
+import 'antd/es/modal/style';
+import 'antd/es/slider/style';
+```
+
+## 在 antd v5 之前
+
+```js
+import 'antd/es/modal/style';
+import 'antd/es/slider/style';
 ```
 
 ## 协议

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

@@ -18,7 +18,6 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var antd = require('antd');
-var LocaleReceiver = require('antd/lib/locale-provider/LocaleReceiver');
 var AntModal = require('antd/lib/modal');
 var AntUpload = require('antd/lib/upload');
 var compareVersions = require('compare-versions');
@@ -79,7 +78,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
     cb.current.beforeCrop = beforeCrop;
     cb.current.onUploadFail = onUploadFail;
     /**
-     * Upload
+     * upload
      */
     const [image, setImage] = react.useState('');
     const fileRef = react.useRef({});
@@ -120,11 +119,11 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
                 } }) });
     }, [children]);
     /**
-     * Crop
+     * crop
      */
     const easyCropRef = react.useRef({});
     /**
-     * Modal
+     * modal
      */
     const modalProps = react.useMemo(() => {
         const obj = {
@@ -230,13 +229,15 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
             }
         }), type, quality);
     }), [fillColor, quality, rotate]);
-    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 }) })))] }));
-    if (modalTitle) {
-        return getComponent(modalTitle);
-    }
-    return (jsxRuntime.jsx(LocaleReceiver, { children: (_, code) => {
-            return getComponent(code === 'zh-cn' ? '编辑图片' : 'Edit image');
-        } }));
+    const wrapClassName = `${PREFIX}-modal${modalClassName ? ` ${modalClassName}` : ''}`;
+    const title = react.useMemo(() => {
+        if (modalTitle) {
+            return modalTitle;
+        }
+        const lang = typeof window !== 'undefined' ? window.navigator.language : '';
+        return lang === 'zh-CN' ? '编辑图片' : 'Edit image';
+    }, [modalTitle]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [uploadComponent, image && (jsxRuntime.jsx(AntModal, Object.assign({}, modalVisibleProp, { wrapClassName: wrapClassName, title: title, 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 }) })))] }));
 });
 
 module.exports = ImgCrop;

package/dist/antd-img-crop.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
+import { RcFile } from 'antd/es/upload/interface';
 import Cropper, { CropperProps } from 'react-easy-crop';
-import { RcFile } from 'antd/lib/upload/interface';
 
 type ImgCropProps = {
     aspect?: number;

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

@@ -14,12 +14,11 @@ import { __rest, __awaiter } from 'tslib';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useCallback, useImperativeHandle, memo, useMemo } from 'react';
 import { version } from 'antd';
-import LocaleReceiver from 'antd/lib/locale-provider/LocaleReceiver';
-import AntModal from 'antd/lib/modal';
-import AntUpload from 'antd/lib/upload';
+import AntModal from 'antd/es/modal';
+import AntUpload from 'antd/es/upload';
 import { compareVersions } from 'compare-versions';
 import Cropper from 'react-easy-crop';
-import AntSlider from 'antd/lib/slider';
+import AntSlider from 'antd/es/slider';
 
 const PREFIX = 'img-crop';
 const INIT_ZOOM = 1;
@@ -75,7 +74,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
     cb.current.beforeCrop = beforeCrop;
     cb.current.onUploadFail = onUploadFail;
     /**
-     * Upload
+     * upload
      */
     const [image, setImage] = useState('');
     const fileRef = useRef({});
@@ -116,11 +115,11 @@ const ImgCrop = forwardRef((props, cropperRef) => {
                 } }) });
     }, [children]);
     /**
-     * Crop
+     * crop
      */
     const easyCropRef = useRef({});
     /**
-     * Modal
+     * modal
      */
     const modalProps = useMemo(() => {
         const obj = {
@@ -226,13 +225,15 @@ const ImgCrop = forwardRef((props, cropperRef) => {
             }
         }), type, quality);
     }), [fillColor, quality, rotate]);
-    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 }) })))] }));
-    if (modalTitle) {
-        return getComponent(modalTitle);
-    }
-    return (jsx(LocaleReceiver, { children: (_, code) => {
-            return getComponent(code === 'zh-cn' ? '编辑图片' : 'Edit image');
-        } }));
+    const wrapClassName = `${PREFIX}-modal${modalClassName ? ` ${modalClassName}` : ''}`;
+    const title = useMemo(() => {
+        if (modalTitle) {
+            return modalTitle;
+        }
+        const lang = typeof window !== 'undefined' ? window.navigator.language : '';
+        return lang === 'zh-CN' ? '编辑图片' : 'Edit image';
+    }, [modalTitle]);
+    return (jsxs(Fragment, { children: [uploadComponent, image && (jsx(AntModal, Object.assign({}, modalVisibleProp, { wrapClassName: wrapClassName, title: title, 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 }) })))] }));
 });
 
 export { ImgCrop as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-img-crop",
-  "version": "4.6.0",
+  "version": "4.8.0",
   "description": "An image cropper for Ant Design Upload",
   "keywords": [
     "react",
@@ -29,29 +29,30 @@
   },
   "dependencies": {
     "compare-versions": "6.0.0-rc.1",
-    "react-easy-crop": "^4.6.3",
+    "react-easy-crop": "^4.7.4",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@types/node": "^18.14.6",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@types/rollup-plugin-less": "^1.1.2",
-    "@vitejs/plugin-react": "^3.0.1",
-    "antd": "^5.1.6",
-    "eslint": "^8.32.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "antd": "^5.2.3",
+    "eslint": "^8.35.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-react-app": "^7.0.1",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "3.11.0",
-    "rollup-plugin-dts": "^5.1.1",
+    "rollup": "3.18.0",
+    "rollup-plugin-dts": "^5.2.0",
     "rollup-plugin-less": "^1.1.3",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4"
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4"
   },
   "scripts": {
     "build": "rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript"