ant-design/compatible

Ant Design Compatible

Install

yarn add @ant-design/compatible@v5-compatible-v4

Usage

Helps you to compatible different components between v4 and v5.

-- import { Button, Select, Dropdown } from 'antd';
++ import { Button, Select, Dropdown } from '@ant-design/compatible';

FAQ

compatible's Issues

使用ProForm自定义组件 TreeSelect 样式全部丢失

Form组件样式Bug

问题

设置Form组件为inline模式时，属性labelCol与wrapperCol失效

原因

inline时将ant-legacy-form-item设置为了inline-block，导致ant-col的flex属性失效

CSS样式显示不正确

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

1. 下载@ant-design/compatible 依赖包
2. 从包中导出Form, 写一个最简单的antd3的表单
3. 为表单项上 .ant-legacy-form-item-control-wrapper 当前元素添加 css: flex: 1 1 0%
   4.关于ant-legacy-form-item-control-wrapper 线上包括源码当中是默认有 flex: 1 1 0% 这个样式的，不知道为什么本地复现并没有这个样式，只能手动加上，线上是出现了问题

5.Input 表单项宽度丢失

What is expected?

表单正常显示

What is actually happening?

Input宽度丢失

Environment	Info
antd	4.12.2
React	16.8
System	windows
Browser	chrome 88

关闭 Form legacy component警告

devScripts.js:6523 Warning: [antd-compatible: Form] The legacy component has been deprecated, and ant design 4.0 now released! Please follow https://ant.design/components/form to upgrade. 

目前工作用到了非常多的 Form v3，我們沒有人力將 Form重構到 v4。預計永遠不會重構，所以希望有辦法關掉這個警告。

@ant-design/compatible中Form包裹下，Radio.Group 配置options获取不到value，配置children正常

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

1. Form从@ant-design/compatible导入
2. Radio从antd导入
3. radio1不能赋值，radio2可以赋值

import React from "react";
import ReactDOM from "react-dom";
import { Form } from "@ant-design/compatible";
import { Button, Radio } from "antd";
import "@ant-design/compatible/assets/index.css";

class MyForm extends React.Component {
  render() {
    const { form } = this.props;
    return (
      <Form
        onSubmit={e => {
          e.preventDefault();
          form.validateFieldsAndScroll((err, values) => {
            if (!err) {
              console.log("values", values);
            }
          });
        }}
      >
        <Form.Item>
          {form.getFieldDecorator("radio1", { initialValue: "1" })(
            <Radio.Group
              options={[
                { label: "radio1 item1", value: "a" },
                { label: "radio1 item2", value: "b" }
              ]}
            />
          )}
        </Form.Item>
        <Form.Item>
          {form.getFieldDecorator("radio2", { initialValue: "1" })(
            <Radio.Group>
              <Radio value="1">radio2 item1</Radio>
              <Radio value="2">radio2 item2</Radio>
            </Radio.Group>
          )}
        </Form.Item>
        <Button htmlType="submit">Submit</Button>
      </Form>
    );
  }
}

const AForm = Form.create()(MyForm);
ReactDOM.render(<AForm />, document.getElementById("container"));

What is expected?

radio1能正确获取到值

What is actually happening?

1. 初始化时radio1有值，但没有选中。
2. 任意改变某个控件，radio1的值都为undefined

Environment	Info
antd	4.5.1
React	16.13.1
System	window 10
Browser	chrome 84

Ant Design v4 to v5, 按照官网升级后遇到less兼容问题（react项目用的umi）

报错内容：

Error when import `assets/index.less` file. Missing `less` files

In v1.0.3 was added assets/index.less file which have this content:

@import '../src/form/style/index.less';
@import '../src/mention/style/index.less';

But files on these paths do not exist. Therefore a compilation error occurs.

2点优化

1·、

compatible/src/form/Form.tsx

Line 258 in 5c356e5

upgradeMessage('Form');

提示升级 error 能支持配置不提示吗
2、能添加 Picker 组件吗？

error trying to install. Unexpected token, expected "," (25:26)

I have only written

yarn add @ant-design/compatible

and just before finishing that error appears.

I am using Ant.Design PRO v4
nodeJS v14.15.0

Form style not correct

https://codesandbox.io/s/adoring-cloud-kmm9w

ref: ant-design/ant-design#19800

comment 组件下使用 avatar组件size="large"不生效

感觉100% 就行了

ant-design/pro-table 使用了 legacy form 之后样式表不对

ant-design/pro-table#14

Form 中使用 Select ，校验方式改为 onBlur 时，选中内容后 blur 内容被清空，且校验报错；

blur 后

编译失败：@input-affix-width; 未找到

我只想用兼容包中的form，然后fork了一份代码，在编译的过程中提示：

NameError: variable @input-affix-width is undefined in /Users/changzhn/projects/react-group/compatible/src/form/style/index.less on line 145, column 55:

请问这个该如何解决？

node: v12.16.1
npm: 6.13.4

表单 select 搜索输入时，select框会往下掉

未输入内容时：

输入内容：

直接删掉 ant-select-selection-placeholder 节点也可以复现

猜测原因：输入内容后，ant-select-selection-placeholder 的节点删掉了，没有文字内容支撑，line-height 无法生效，导致 select 框往下掉

增加控制台警告

提示用户你正在使用 Legacy 并引导升级。

v5-compatible-v4

@MadCcc do i have to config less loader fot this

import {Comment} from '@ant-design/compatible'

error - ./node_modules/@ant-design/compatible/es/comment/style/index.less
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import '../../style/default';
| // @import '../../style/mixins/index';

@ant-design/compatible 的 Form 中，使用 4.x 版本的 Select ，validateTrigger: 'onBlur' 时 ，表现错误

Reproduction link

Steps to reproduce

Select 选择一个值，blur select ；

What is expected?

Select 值存在，无校验错误；

What is actually happening?

Select 值丢失，校验失败，提示错误信息！

Environment	Info
antd	4.19.2
React	^16.14.0
System	mac os
Browser	chrome 99.x

为什么1.1.2版本的peer dependencies中限制antd为3.x

1.1.2版本的@ant-design/compatible中的package.json里写有peer dependencies, antd为3.x。我理解这个是v3升级到v4的兼容包，那么宿主环境中装的antd版本应该是v4的，这里为什么要这么限制呢？同时因为我的项目必须升级至react17以上，所以也不可能有antd3共存在项目中。

在 asset 中未发现有index.css，报错

• 引用@ant-design/compatible/assets/index.css报错
• 在node_modules 中未发现该文件
• 版本 "@ant-design/compatible": "^0.0.1-alpha.9"

@ant-design/compatible内form表单样式问题

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://stackblitz.com/edit/react-xzpoae

Steps to reproduce

在第一个输入框输入任意字符，然后清空，input会出现红色边框，从4.0.3引入的form组件则没有

What is expected?

获取焦点的时候，错误提示红色的框应该出现在最外层

What is actually happening?

获取焦点以后，红色的框出现在组件内，外面还有一层蓝色框

Environment	Info
antd	4.0.3
React	16.13.0
System	windows7
Browser	chrome80.0.3987.132

vertical 模式下 Input 没有拉伸

额。。。已经改了吗，我试了下，还这样？

Originally posted by @LJJCherry in ant-design/ant-design#21907 (comment)

不支持设置前缀 ant-prefix 吗？

设置 ant-v4 前缀，form 样式就失效了

Row组件的基础样式变更了，造成升级到V4修改太大

Row组件的基础样式由display: block;变更成display: flex;造成基本上每个页面都要修改，工作量实在是太大了。

Form表单下 输入框表单项输入卡顿

@ant-design/compatible 1.1.0
antd 4.18.9

只有一个Form表单，表单内根据数组循环生成表单项，当表单项达到一定数量后，输入框输入非常卡顿。请教一下大佬们有什么优化方式吗？

Form onFieldsChange initialValue

复现步骤
1.在name文本框输入任意内容触发onFieldsChange
2.查看控制台输出接口allValues中的id字段的initialValue 中初始值不在里面
复现demo：https://codesandbox.io/s/ant-design-compatible-onfieldschange-initialvalue-v3gg2i
期望：可以在onFieldsChange中拿到初始值

利用codemod工具自动修改的兼容旧包方式，报错

import { Icon as LegacyIcon } from '@ant-design/compatible';

JSX 元素类型“LegacyIcon”不具有任何构造签名或调用签名。

Compile issue from v4 to v5

Hi,
issue here after compiling:

Compiled with problems:X ERROR in ./node_modules/@ant-design/compatible/es/form/index.js 2:0-107 export 'FormProps' (reexported as 'FormProps') was not found in './Form' (possible exports: default) ERROR in ./node_modules/@ant-design/compatible/es/form/index.js 2:0-107 export 'FormComponentProps' (reexported as 'FormComponentProps') was not found in './Form' (possible exports: default) ERROR in ./node_modules/@ant-design/compatible/es/form/index.js 2:0-107 export 'FormCreateOption' (reexported as 'FormCreateOption') was not found in './Form' (possible exports: default) ERROR in ./node_modules/@ant-design/compatible/es/form/index.js 2:0-107 export 'ValidateCallback' (reexported as 'ValidateCallback') was not found in './Form' (possible exports: default) ERROR in ./node_modules/@ant-design/compatible/es/form/index.js 2:0-107 export 'ValidationRule' (reexported as 'ValidationRule') was not found in './Form' (possible exports: default) ERROR in ./node_modules/@ant-design/compatible/es/form/index.js 3:0-43 export 'FormItemProps' (reexported as 'FormItemProps') was not found in './FormItem' (possible exports: default)

I've used the last package, 5.1.0
I don't know what is happened. Seems all ok in my project, only this one fails. Can somebody check in this export?

Thanks guys!

Theme customizations are missing for @ant-design/compatible

Is there a way to keep the theme customizations done by overriding the less-variables as described here https://ant.design/docs/react/customize-theme#Ant-Design-Less-variables when using @ant-design/compatible

We used them quite a bit for version 3, and now that we have migrated to version 4 and use the @ant-design/compatible the overrides don't work anymore.

Upgrade Asyns-Validator to latest. ReDos vulnerability <4.0.4

There's a new vulnerability with the async-validator version <4.0.4. Need to upgrade to latest
https://security.snyk.io/vuln/SNYK-JS-ASYNCVALIDATOR-2311201

Warning on devtools

I have issues when using

Can't resolve './antd/dist/antd.less'

umi3 引用@ant-design/compatible/assets/index.less报错，无法识别@import (reference) 'antd/dist/antd.less'

复现链接：https://github.com/zzy1661/umi3-bugs.git

icon warning seems a little strange

JSX element type 'FormItem' is not a constructor function for JSX elements.

react 16.13.1
@types/react 16.9.34

升级迁移 兼容V3时 Form & FormItem报错

// tsconfig
{
"compilerOptions": {
"baseUrl": "src",
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"experimentalDecorators": true,
"noImplicitThis": false
},
"include": [
"src"
],
"extends": "./paths.json"
}

                    <LegacyForm.Item label={index === 0 ? '部门' : ''} >
                        {form.getFieldDecorator(`departmentIds[_${item}]`, {
                            rules: required === false ? [] : [{ required: true, message: '请选择部门' }],
                            initialValue: index < (departmentList || []).length  ? initDepartmentObj[item] : undefined
                        })(
                            <Cascader
                                options={getOptions(data)}
                                placeholder="请选择"
                                className={styles['multiple-select-cascader']}
                                displayRender={(label:any) => label.join(' - ')}
                                getPopupContainer={(triggerNode:{parentNode:React.ReactNode}) => triggerNode.parentNode}
                                {...rst}
                            />
                        )}
                    </LegacyForm.Item>

lerna项目中子应用无法引入compatible样式

@ant-design/compatible 1.1.0
antd 4.19.1

umi子应用按照如下方式引入

import '@ant-design/compatible/assets/index.less';
import 'antd/dist/antd.less';

出现以下报错，但是主应用 node_modules 中有 node_modules/antd/dist/antd.less

error  in /project/node_modules/@ant-design/compatible/assets/index.less

Module build failed (from /project/node_modules/@umijs/bundler-webpack/lib/webpack/plugins/mini-css-extract-plugin/src/loader.js):
ModuleBuildError: Module build failed (from /project/node_modules/@umijs/deps/compiled/less-loader/cjs.js):


@import (reference) 'antd/dist/antd.less';
^
Can't resolve './antd/dist/antd.less' in '/project/node_modules/@ant-design/compatible/lib/form/style'

Form styles not using prefix and changing not ant-design forms styles

This style is changing our radio and checkbox inputs globally in our code (line 229).

compatible/src/form/style/index.less

Line 145 in 2847470

form {

The same style in ant-design/ant-design is using a prefix to modify its children.

https://github.com/ant-design/ant-design/blob/264b3514d8f2f06fc627dc734c6bd68d98a3a16f/components/form/style/components.less#L9

DatePicker修改周的起始日失效

import { DatePicker, ConfigProvider } from 'antd';
import 'moment/locale/zh-cn';
import locale from 'antd/lib/locale/zh_CN';
import moment from 'moment';

moment.locale('zh-cn', {
    week: {
        dow: 3
    }
});

<ConfigProvider locale={locale}>
    <DatePicker />
</ConfigProvider>

做全局的配置没有任何作用

rc 之前需要同步一下 antd 主干的改动

• form
• icon
• mention

Customize Comment Background Color

How do I customize the colorBgContainer style for the compatible/Comment component? I've tried many different guesses in the ConfigProvider theme property, including

components: {
  Comment: {
    colorBgContainer: 'transparent',
  },
}

as well as

components: {
  compatible: {
    Comment: {
      colorBgContainer: 'transparent',
    },
  },
}

and I can't get it to take. Documentation for theming compatible components is completely absent. Any help is appreciated.

compatible中怎样卸载@ant-design/icons

V3到V4升级之后，在全局都没有用@ant-design/icons，请问怎样把这个包卸载掉