From cf93945d4b935245d0b1727121f07971165a8be3 Mon Sep 17 00:00:00 2001 From: janrywang Date: Fri, 25 Jun 2021 10:38:02 +0800 Subject: [PATCH] fix(antd/next): fix Editable is not work with babel-import-plugin #1645 --- docs/guide/advanced/build.md | 60 ++++++++++++++++++++---- docs/guide/advanced/build.zh-CN.md | 63 +++++++++++++++++++++----- docs/guide/scenes/edit-detail.md | 2 +- docs/guide/scenes/edit-detail.zh-CN.md | 2 +- packages/antd/src/editable/index.tsx | 2 + packages/next/src/editable/index.tsx | 6 +-- 6 files changed, 109 insertions(+), 26 deletions(-) diff --git a/docs/guide/advanced/build.md b/docs/guide/advanced/build.md index aa133d18045..000903ff54d 100644 --- 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 [react-app-rewired@2.x](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 [react-app-rewired@2.x](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,13 +93,18 @@ 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 @@ -88,7 +112,9 @@ modify `config-overrides.js` ```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 index d7985130dd2..0f3a912b79b 100644 --- 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` 里的启动配置。由于新的 [react-app-rewired@2.x](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 index 4dbe7662d08..314afa92968 100644 --- 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 index d07502f79f4..b07bb72c0d6 100644 --- 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 index ff9e510c0e4..1bb5861ab78 100644 --- a/packages/antd/src/editable/index.tsx +++ b/packages/antd/src/editable/index.tsx @@ -187,3 +187,5 @@ Editable.Popover = observer((props) => { ) }) + +export default Editable diff --git a/packages/next/src/editable/index.tsx b/packages/next/src/editable/index.tsx index 513d288e936..bf511840a33 100644 --- 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 }) => { ) }) + +export default Editable