fix(antd/next): fix Editable is not work with babel-import-plugin #1645

alibaba · Jun 25, 2021 · cf93945 · cf93945
1 parent 580570b
commit cf93945
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 26 deletions.
diff --git a/docs/guide/advanced/build.md b/docs/guide/advanced/build.md
@@ -7,34 +7,49 @@
 ```shell
 npm install babel-plugin-import --save-dev
 ```
+
 or
+
 ```shell
 yarn add babel-plugin-import --dev
 ```
 
 #### Plugin Configuration
+
 Modify `.umirc.js` or `.umirc.ts`
 
 ```js
 export default {
-  extraBabelPlugins: [['babel-plugin-import', {"libraryName": "@formily/antd", "libraryDirectory": "lib"}]],
-};
+  extraBabelPlugins: [
+    [
+      'babel-plugin-import',
+      { libraryName: 'antd', libraryDirectory: 'lib', style: true },
+    ],
+    [
+      'babel-plugin-import',
+      { libraryName: '@formily/antd', libraryDirectory: 'lib', style: true },
+    ],
+  ],
+}
 ```
 
 ## Based on Create-react-app Development
 
 First, we need to customize the default configuration of `create-react-app`, here we use [react-app-rewired](https://github.com/timarney/react-app-rewired) （A community solution for custom configuration of `create-react-app`)
-Introduce `react-app-rewired`  and modify the startup configuration in  `package.json`. Due to the new [[email protected]](https://github.com/timarney/react-app-rewired#alternatives) version, you also need to install [customize-cra](https://github.com/arackaf/customize-cra). 
+Introduce `react-app-rewired` and modify the startup configuration in `package.json`. Due to the new [[email protected]](https://github.com/timarney/react-app-rewired#alternatives) version, you also need to install [customize-cra](https://github.com/arackaf/customize-cra).
 
 ```shell
 $ npm install react-app-rewired customize-cra  --save-dev
 ```
+
 or
+
 ```shell
 $ yarn add react-app-rewired customize-cra --dev
 ```
 
 modify `package.json`
+
 ```diff
 "scripts": {
 -   "start": "react-scripts start",
@@ -45,20 +60,24 @@ modify `package.json`
 +   "test": "react-app-rewired test",
 }
 ```
-Then create a  `config-overrides.js` in the project root directory to modify the default configuration. 
+
+Then create a `config-overrides.js` in the project root directory to modify the default configuration.
 
 ```js
 module.exports = function override(config, env) {
   // do stuff with the webpack config...
-  return config;
-};
+  return config
+}
 ```
+
 #### Install babel-plugin-import
 
 ```shell
 npm install babel-plugin-import --save-dev
 ```
+
 or
+
 ```shell
 yarn add babel-plugin-import --dev
 ```
@@ -74,21 +93,28 @@ modify `config-overrides.js`
 - };
 + module.exports = override(
 +   fixBabelImports('import', {
++     libraryName: 'antd',
++     libraryDirectory: 'lib',
++     style: true
++   }),
++   fixBabelImports('import', {
 +     libraryName: '@formily/antd',
-+     libraryDirectory: 'lib'
++     libraryDirectory: 'lib',
++     style: true
 +   }),
 + );
 ```
 
-
 ## Use in Webpack
 
 #### Install babel-plugin-import
 
 ```shell
 npm install babel-plugin-import --save-dev
 ```
+
 or
+
 ```shell
 yarn add babel-plugin-import --dev
 ```
@@ -98,10 +124,24 @@ Modify `.babelrc` or babel-loader
 ```json
 {
   "plugins": [
-    ["import", { "libraryName": "@formily/antd", "libraryDirectory": "lib"}]
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "libraryDirectory": "lib",
+        "style": true
+      }
+    ],
+    [
+      "import",
+      {
+        "libraryName": "@formily/antd",
+        "libraryDirectory": "lib",
+        "style": true
+      }
+    ]
   ]
 }
 ```
 
 For more configuration, please refer to [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
-
diff --git a/docs/guide/advanced/build.zh-CN.md b/docs/guide/advanced/build.zh-CN.md
@@ -1,40 +1,55 @@
 # 按需打包
 
-## 基于Umi开发
+## 基于 Umi 开发
 
 #### 安装 `babel-plugin-import`
 
 ```shell
 npm install babel-plugin-import --save-dev
 ```
+
 或者
+
 ```shell
 yarn add babel-plugin-import --dev
 ```
 
 #### 插件配置
+
 修改 `.umirc.js`或 `.umirc.ts`
 
 ```js
 export default {
-  extraBabelPlugins: [['babel-plugin-import', {"libraryName": "@formily/antd", "libraryDirectory": "lib"}]],
-};
+  extraBabelPlugins: [
+    [
+      'babel-plugin-import',
+      { libraryName: 'antd', libraryDirectory: 'lib', style: true },
+    ],
+    [
+      'babel-plugin-import',
+      { libraryName: '@formily/antd', libraryDirectory: 'lib', style: true },
+    ],
+  ],
+}
 ```
 
-## 基于create-react-app开发
+## 基于 create-react-app 开发
 
-  首先我们需要对`create-react-app`的默认配置进行自定义，这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) （一个对 `create-react-app` 进行自定义配置的社区解决方案）。
+首先我们需要对`create-react-app`的默认配置进行自定义，这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) （一个对 `create-react-app` 进行自定义配置的社区解决方案）。
 引入 `react-app-rewired` 并修改 `package.json` 里的启动配置。由于新的 [[email protected]](https://github.com/timarney/react-app-rewired#alternatives) 版本的关系，你还需要安装 [customize-cra](https://github.com/arackaf/customize-cra)。
 
 ```shell
 $ npm install react-app-rewired customize-cra  --save-dev
 ```
+
 或者
+
 ```shell
 $ yarn add react-app-rewired customize-cra --dev
 ```
 
 修改 `package.json`
+
 ```diff
 "scripts": {
 -   "start": "react-scripts start",
@@ -45,20 +60,24 @@ $ yarn add react-app-rewired customize-cra --dev
 +   "test": "react-app-rewired test",
 }
 ```
+
 然后在项目根目录创建一个 `config-overrides.js` 用于修改默认配置。
 
 ```js
 module.exports = function override(config, env) {
   // do stuff with the webpack config...
-  return config;
-};
+  return config
+}
 ```
+
 #### 安装 babel-plugin-import
 
 ```shell
 npm install babel-plugin-import --save-dev
 ```
+
 或者
+
 ```shell
 yarn add babel-plugin-import --dev
 ```
@@ -74,21 +93,28 @@ yarn add babel-plugin-import --dev
 - };
 + module.exports = override(
 +   fixBabelImports('import', {
++     libraryName: 'antd',
++     libraryDirectory: 'lib',
++     style: true
++   }),
++   fixBabelImports('import', {
 +     libraryName: '@formily/antd',
-+     libraryDirectory: 'lib'
++     libraryDirectory: 'lib',
++     style: true
 +   }),
 + );
 ```
 
-
-## 在Webpack中使用
+## 在 Webpack 中使用
 
 #### 安装 babel-plugin-import
 
 ```shell
 npm install babel-plugin-import --save-dev
 ```
+
 或者
+
 ```shell
 yarn add babel-plugin-import --dev
 ```
@@ -98,7 +124,22 @@ yarn add babel-plugin-import --dev
 ```json
 {
   "plugins": [
-    ["import", { "libraryName": "@formily/antd", "libraryDirectory": "lib"}]
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "libraryDirectory": "lib",
+        "style": true
+      }
+    ],
+    [
+      "import",
+      {
+        "libraryName": "@formily/antd",
+        "libraryDirectory": "lib",
+        "style": true
+      }
+    ]
   ]
 }
 ```

diff --git a/docs/guide/scenes/edit-detail.md b/docs/guide/scenes/edit-detail.md
@@ -684,6 +684,7 @@ import {
 import { action } from '@formily/reactive'
 import { Card, Button, Spin } from 'antd'
 import { UploadOutlined } from '@ant-design/icons'
+import './index.less'
 
 const form = createForm({
   validateFirst: true,
@@ -1650,7 +1651,6 @@ import {
 import { action } from '@formily/reactive'
 import { Card, Button, Spin } from 'antd'
 import { UploadOutlined } from '@ant-design/icons'
-
 import './index.less'
 
 const form = createForm({

diff --git a/docs/guide/scenes/edit-detail.zh-CN.md b/docs/guide/scenes/edit-detail.zh-CN.md
@@ -676,6 +676,7 @@ import {
 import { action } from '@formily/reactive'
 import { Card, Button, Spin } from 'antd'
 import { UploadOutlined } from '@ant-design/icons'
+import './index.less'
 
 const form = createForm({
   validateFirst: true,
@@ -1630,7 +1631,6 @@ import {
 import { action } from '@formily/reactive'
 import { Card, Button, Spin } from 'antd'
 import { UploadOutlined } from '@ant-design/icons'
-
 import './index.less'
 
 const form = createForm({

diff --git a/packages/antd/src/editable/index.tsx b/packages/antd/src/editable/index.tsx
@@ -187,3 +187,5 @@ Editable.Popover = observer((props) => {
     </Popover>
   )
 })
+
+export default Editable
diff --git a/packages/next/src/editable/index.tsx b/packages/next/src/editable/index.tsx
@@ -1,13 +1,11 @@
 import React, { useLayoutEffect, useRef, useState } from 'react'
 import { isVoidField } from '@formily/core'
 import { useField, observer } from '@formily/react'
-import { Form, Balloon } from '@alifd/next'
+import { Balloon } from '@alifd/next'
 import { EditOutlined, CloseOutlined, MessageOutlined } from '@ant-design/icons'
 import { BalloonProps as PopoverProps } from '@alifd/next/lib/balloon'
 import { BaseItem, IFormItemProps } from '../form-item'
 import { useClickAway, usePrefixCls } from '../__builtins__'
-import { Space } from '../space'
-import cls from 'classnames'
 /**
  * 默认Inline展示
  */
@@ -189,3 +187,5 @@ Editable.Popover = observer(({ ...props }) => {
     </Balloon>
   )
 })
+
+export default Editable
-Original file line number
+Diff line change
@@ Expand Up / @@ -187,3 +187,5 @@ Editable.Popover = observer((props) => { @@
         </Popover>
       )
     })
+    export default Editable