antd-img-crop 4.6.0 → 4.7.0

package/README.md

@@ -63,45 +63,13 @@ const Demo = () => (
 
 ## Before antd v5
 
-### No style?
-
-If you use `babel-plugin-import` and no `Modal` or `Slider` were imported, please import the styles manually:
+If you use `antd<=v4` with `babel-plugin-import`, and no `Modal` or `Slider` were used in project, please import these styles manually:
 
 ```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',
-+       },
-      },
-    },
-  ],
-};
-```
-
-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/)
@@ -114,3 +82,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

@@ -63,45 +63,13 @@ const Demo = () => (
 
 ## 在 antd v5 之前
 
-### 没有样式？
-
-若项目使用 `babel-plugin-import` 且未引入 `Modal` 或 `Slider`，请手动引入样式：
+若使用 `antd<=v4` & `babel-plugin-import`，且未使用 `Modal` 或 `Slider`，请手动引入这些样式：
 
 ```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',
-+       },
-      },
-    },
-  ],
-};
-```
-
-若手动配置 `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

@@ -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.esm.js

@@ -14,7 +14,6 @@ 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 { compareVersions } from 'compare-versions';
@@ -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.7.0",
   "description": "An image cropper for Ant Design Upload",
   "keywords": [
     "react",
@@ -29,29 +29,29 @@
   },
   "dependencies": {
     "compare-versions": "6.0.0-rc.1",
-    "react-easy-crop": "^4.6.3",
+    "react-easy-crop": "^4.7.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
     "@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.0",
+    "@types/node": "^18.14.1",
+    "@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.2",
+    "eslint": "^8.34.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.17.2",
+    "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"