mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
1 line
17 KiB
JavaScript
1 line
17 KiB
JavaScript
(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["d7e69c8d"],{d7e69c8d:function(e,a,n){"use strict";n.d(a,"__esModule",{value:!0}),n.d(a,"texts",{enumerable:!0,get:function(){return o;}}),n("d8c93196");let o=[{value:"This document will help you upgrade from antd ",paraId:0},{value:"4.x",paraId:0},{value:" version to antd ",paraId:0},{value:"5.x",paraId:0},{value:" version. If you are using ",paraId:0},{value:"3.x",paraId:0},{value:" or older version, please refer to the previous ",paraId:0},{value:"upgrade document",paraId:0},{value:" to 4.x.",paraId:0},{value:"Please upgrade to the latest version of 4.x first, and remove / modify related APIs according to the console warning message.",paraId:1,tocIndex:0},{value:"Basic rounded corner adjustment, changed from ",paraId:2,tocIndex:2},{value:"2px",paraId:2,tocIndex:2},{value:" to four layers of radius, which are ",paraId:2,tocIndex:2},{value:"2px",paraId:2,tocIndex:2},{value:" ",paraId:2,tocIndex:2},{value:"4px",paraId:2,tocIndex:2},{value:" ",paraId:2,tocIndex:2},{value:"6px",paraId:2,tocIndex:2},{value:" and ",paraId:2,tocIndex:2},{value:"8px",paraId:2,tocIndex:2},{value:". For example, radius of default Button is modified from ",paraId:2,tocIndex:2},{value:"2px",paraId:2,tocIndex:2},{value:" to ",paraId:2,tocIndex:2},{value:"6px",paraId:2,tocIndex:2},{value:".",paraId:2,tocIndex:2},{value:"Primary color adjustment, changed from ",paraId:2,tocIndex:2},{value:"#1890ff",paraId:2,tocIndex:2},{value:" to ",paraId:2,tocIndex:2},{value:"#1677ff",paraId:2,tocIndex:2},{value:".",paraId:2,tocIndex:2},{value:"Global shadow optimization, adjusted from three layers of shadows to two layers, which are used in common components (Card .e.g) and popup components (Dropdown .e.g).",paraId:2,tocIndex:2},{value:"Overall reduction in wireframe usage.",paraId:2,tocIndex:2},{value:"Remove less, adopt CSS-in-JS, for better support of dynamic themes. The bottom layer uses ",paraId:3,tocIndex:3},{value:"@ant-design/cssinjs",paraId:3,tocIndex:3},{value:" as a solution.",paraId:3,tocIndex:3},{value:"All less files are removed, and less variables are no longer exported.",paraId:4,tocIndex:3},{value:"CSS files are no longer included in package. Since CSS-in-JS supports importing on demand, the original ",paraId:4,tocIndex:3},{value:"antd/dist/antd.css",paraId:4,tocIndex:3},{value:" has also been abandoned. If you need to reset some basic styles, please import ",paraId:4,tocIndex:3},{value:"antd/dist/reset.css",paraId:4,tocIndex:3},{value:".",paraId:4,tocIndex:3},{value:"If you need to reset the style of the component, but you don't want to introduce ",paraId:4,tocIndex:3},{value:"antd/dist/reset.css",paraId:4,tocIndex:3},{value:" to pollute the global style, You can try using the ",paraId:4,tocIndex:3},{value:"App",paraId:5,tocIndex:3},{value:" in the outermost layer to solve the problem that native elements do not have antd specification style.",paraId:4,tocIndex:3},{value:"Remove css variables and dynamic theme built on top of them.",paraId:6,tocIndex:3},{value:"LocaleProvider has been deprecated in 4.x (use ",paraId:7,tocIndex:3},{value:"<ConfigProvider locale />",paraId:7,tocIndex:3},{value:" instead), we removed the related folder ",paraId:7,tocIndex:3},{value:"antd/es/locale-provider",paraId:7,tocIndex:3},{value:" and ",paraId:7,tocIndex:3},{value:"antd/lib/locale-provider",paraId:7,tocIndex:3},{value:" in 5.x.",paraId:7,tocIndex:3},{value:"Replace built-in Moment.js with Dayjs. For more: ",paraId:8,tocIndex:3},{value:"Use custom date library",paraId:9,tocIndex:3},{value:".",paraId:8,tocIndex:3},{value:"babel-plugin-import",paraId:10,tocIndex:3},{value:" is no longer supported. CSS-in-JS itself has the ability to import on demand, and plugin support is no longer required. Umi users can remove related configurations.",paraId:10,tocIndex:3},{value:"// config/config.ts\nexport default {\n antd: {\n- import: true,\n },\n};\n",paraId:11,tocIndex:3},{value:"DO NOT support IE browser anymore.",paraId:12,tocIndex:4},{value:"The classname API of the component popup box is unified to ",paraId:13,tocIndex:5},{value:"popupClassName",paraId:13,tocIndex:5},{value:", and ",paraId:13,tocIndex:5},{value:"dropdownClassName",paraId:13,tocIndex:5},{value:" and other similar APIs will be replaced.",paraId:13,tocIndex:5},{value:"AutoComplete",paraId:14,tocIndex:5},{value:"Cascader",paraId:14,tocIndex:5},{value:"Select",paraId:14,tocIndex:5},{value:"TreeSelect",paraId:14,tocIndex:5},{value:"TimePicker",paraId:14,tocIndex:5},{value:"DatePicker",paraId:14,tocIndex:5},{value:"Mentions",paraId:14,tocIndex:5},{value:' import { Select } from \'antd\';\n\n const App: React.FC = () => (\n <Select\n- dropdownClassName="my-select-popup"\n+ popupClassName="my-select-popup"\n />\n );\n\n export default App;\n',paraId:15,tocIndex:5},{value:"The controlled visible API of the component popup is unified to ",paraId:16,tocIndex:5},{value:"open",paraId:16,tocIndex:5},{value:", and ",paraId:16,tocIndex:5},{value:"visible",paraId:16,tocIndex:5},{value:" and other similar APIs will be replaced.",paraId:16,tocIndex:5},{value:"Drawer ",paraId:17,tocIndex:5},{value:"visible",paraId:17,tocIndex:5},{value:" changed to ",paraId:17,tocIndex:5},{value:"open",paraId:17,tocIndex:5},{value:".",paraId:17,tocIndex:5},{value:"Modal ",paraId:17,tocIndex:5},{value:"visible",paraId:17,tocIndex:5},{value:" changed to ",paraId:17,tocIndex:5},{value:"open",paraId:17,tocIndex:5},{value:".",paraId:17,tocIndex:5},{value:"Dropdown ",paraId:17,tocIndex:5},{value:"visible",paraId:17,tocIndex:5},{value:" changed to ",paraId:17,tocIndex:5},{value:"open",paraId:17,tocIndex:5},{value:".",paraId:17,tocIndex:5},{value:"Tooltip ",paraId:17,tocIndex:5},{value:"visible",paraId:17,tocIndex:5},{value:" changed to ",paraId:17,tocIndex:5},{value:"open",paraId:17,tocIndex:5},{value:".",paraId:17,tocIndex:5},{value:"Tag ",paraId:17,tocIndex:5},{value:"visible",paraId:17,tocIndex:5},{value:" is removed.",paraId:17,tocIndex:5},{value:"Slider ",paraId:17,tocIndex:5},{value:"tooltip",paraId:17,tocIndex:5},{value:" related API converged to ",paraId:17,tocIndex:5},{value:"tooltip",paraId:17,tocIndex:5},{value:" property.",paraId:17,tocIndex:5},{value:"Table ",paraId:17,tocIndex:5},{value:"filterDropdownVisible",paraId:17,tocIndex:5},{value:" changed to ",paraId:17,tocIndex:5},{value:"filterDropdownOpen",paraId:17,tocIndex:5},{value:".",paraId:17,tocIndex:5},{value:" import { Modal, Tag, Table, Slider } from 'antd';\n\n const App: React.FC = () => {\n const [visible, setVisible] = useState(true);\n\n return (\n <>\n- <Modal visible={visible}>content</Modal>\n+ <Modal open={visible}>content</Modal>\n\n- <Tag visible={visible}>tag</Tag>\n+ {visible && <Tag>tag</Tag>}\n\n <Table\n data={[]}\n columns={[\n {\n title: 'Name',\n dataIndex: 'name',\n- filterDropdownVisible: visible,\n+ filterDropdownOpen: visible,\n }\n ]}\n />\n\n- <Slider tooltipVisible={visible} />\n+ <Slider tooltip={{ open: visible }} />\n </>\n );\n }\n\n export default App;\n",paraId:18,tocIndex:5},{value:"getPopupContainer",paraId:19,tocIndex:5},{value:": All ",paraId:19,tocIndex:5},{value:"getPopupContainer",paraId:19,tocIndex:5},{value:" are guaranteed to return a unique div. This method will be called repeatedly under React 18 concurrent mode.",paraId:19,tocIndex:5},{value:"Upload List structure changes. ",paraId:20,tocIndex:5},{value:"#34528",paraId:20,tocIndex:5},{value:"Notification",paraId:21,tocIndex:5},{value:"Static methods are no longer allowed to dynamically set ",paraId:22,tocIndex:5},{value:"prefixCls",paraId:22,tocIndex:5},{value:" ",paraId:22,tocIndex:5},{value:"maxCount",paraId:22,tocIndex:5},{value:" ",paraId:22,tocIndex:5},{value:"top",paraId:22,tocIndex:5},{value:" ",paraId:22,tocIndex:5},{value:"bottom",paraId:22,tocIndex:5},{value:" ",paraId:22,tocIndex:5},{value:"getContainer",paraId:22,tocIndex:5},{value:" in ",paraId:22,tocIndex:5},{value:"open",paraId:22,tocIndex:5},{value:", Notification static methods will now have only one instance. If you need a different configuration, use ",paraId:22,tocIndex:5},{value:"useNotification",paraId:22,tocIndex:5},{value:".",paraId:22,tocIndex:5},{value:"close",paraId:22,tocIndex:5},{value:" was renamed to ",paraId:22,tocIndex:5},{value:"destroy",paraId:22,tocIndex:5},{value:" to be consistent with message.",paraId:22,tocIndex:5},{value:"Drawer ",paraId:23,tocIndex:5},{value:"style",paraId:23,tocIndex:5},{value:" & ",paraId:23,tocIndex:5},{value:"className",paraId:23,tocIndex:5},{value:" are migrated to Drawer panel node, the original properties are replaced by ",paraId:23,tocIndex:5},{value:"rootClassName",paraId:23,tocIndex:5},{value:" and ",paraId:23,tocIndex:5},{value:"rootStyle",paraId:23,tocIndex:5},{value:".",paraId:23,tocIndex:5},{value:"The deprecated ",paraId:24,tocIndex:5},{value:"message.warn",paraId:24,tocIndex:5},{value:" in 4.x is now completely removed, please use ",paraId:24,tocIndex:5},{value:"message.warning",paraId:24,tocIndex:5},{value:" instead.",paraId:24,tocIndex:5},{value:"Remove ",paraId:25,tocIndex:6},{value:"locale-provider",paraId:25,tocIndex:6},{value:" Directory. ",paraId:25,tocIndex:6},{value:"LocaleProvider",paraId:25,tocIndex:6},{value:" was removed in v4, please use ",paraId:25,tocIndex:6},{value:"ConfigProvider",paraId:25,tocIndex:6},{value:" instead.",paraId:25,tocIndex:6},{value:"Move Comment component into ",paraId:26,tocIndex:6},{value:"@ant-design/compatible",paraId:26,tocIndex:6},{value:".",paraId:26,tocIndex:6},{value:"Move PageHeader component into ",paraId:27,tocIndex:6},{value:"@ant-design/pro-components",paraId:27,tocIndex:6},{value:".",paraId:27,tocIndex:6},{value:"- import { PageHeader, Comment } from 'antd';\n+ import { Comment } from '@ant-design/compatible';\n+ import { PageHeader } from '@ant-design/pro-components';\n\n const App: React.FC = () => (\n <>\n <PageHeader />\n <Comment />\n </>\n );\n\n export default App;\n",paraId:28,tocIndex:6},{value:"BackTop is deprecated in ",paraId:29,tocIndex:6},{value:"5.0.0",paraId:29,tocIndex:6},{value:", and is merged into FloatButton.",paraId:29,tocIndex:6},{value:"- import { BackTop } from 'antd';\n+ import { FloatButton } from 'antd';\n\n const App: React.FC = () => (\n <div>\n- <BackTop />\n+ <FloatButton.BackTop />\n </div>\n );\n\n export default App;\n",paraId:30,tocIndex:6},{value:"Use git to save your code and install latest version:",paraId:31,tocIndex:7},{value:"npm install --save antd@5.x\n",paraId:32,tocIndex:7},{value:"If you want to use v4 deprecated component like ",paraId:33,tocIndex:7},{value:"Comment",paraId:33,tocIndex:7},{value:" or ",paraId:33,tocIndex:7},{value:"PageHeader",paraId:33,tocIndex:7},{value:". You can install ",paraId:33,tocIndex:7},{value:"@ant-design/compatible",paraId:33,tocIndex:7},{value:" and ",paraId:33,tocIndex:7},{value:"@ant-design/pro-components",paraId:33,tocIndex:7},{value:" for compatible:",paraId:33,tocIndex:7},{value:"npm install --save @ant-design/compatible@v5-compatible-v4\nnpm install --save @ant-design/pro-components\n",paraId:34,tocIndex:7},{value:"You can manually check the code one by one against the above list for modification. In addition, we also provide a codemod cli tool ",paraId:35,tocIndex:7},{value:"@ant-design/codemod-v5",paraId:35,tocIndex:7},{value:" To help you quickly upgrade to v5.",paraId:35,tocIndex:7},{value:"Before running codemod cli, please submit your local code changes.",paraId:36,tocIndex:7},{value:"# Run directly through npx\nnpx -p @ant-design/codemod-v5 antd5-codemod src\n\n# Or run directly through pnpm\npnpm --package=@ant-design/codemod-v5 dlx antd5-codemod src\n",paraId:37,tocIndex:7},{value:"\n ",paraId:38},{value:"\n ",paraId:38},{value:"Note that codemod cannot cover all scenarios, and it is recommended to check for incompatible changes one by one.",paraId:39,tocIndex:7},{value:"If you using antd less variables, you can use compatible package to covert it into v4 less variables and use less-loader to inject them:",paraId:40,tocIndex:8},{value:"const { theme } = require('antd/lib');\nconst { convertLegacyToken, defaultTheme } = require('@ant-design/compatible/lib');\n\nconst { defaultAlgorithm, defaultSeed } = theme;\n\nconst mapV5Token = defaultAlgorithm(defaultSeed);\nconst v5Vars = convertLegacyToken(mapV5Token);\nconst mapV4Token = theme.getDesignToken(defaultTheme);\nconst v4Vars = convertLegacyToken(mapV4Token);\n\n// Webpack Config\nmodule.exports = {\n // ... other config\n loader: 'less-loader',\n options: {\n lessOptions: {\n modifyVars: v5Vars, // or v4Vars\n },\n },\n};\n",paraId:41,tocIndex:8},{value:"And then remove antd less reference in your less file:",paraId:42,tocIndex:8},{value:"// Your less file\n-- @import (reference) '~antd/es/style/themes/index';\nor\n-- @import '~antd/es/style/some-other-less-file-ref';\n",paraId:43,tocIndex:8},{value:"Remove ",paraId:44,tocIndex:9},{value:"babel-plugin-import",paraId:44,tocIndex:9},{value:" from package.json and modify ",paraId:44,tocIndex:9},{value:".babelrc",paraId:44,tocIndex:9},{value:":",paraId:44,tocIndex:9},{value:'"plugins": [\n- ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"],\n]\n',paraId:45,tocIndex:9},{value:"Umi user can disable by config\uFF1A",paraId:46,tocIndex:9},{value:"// config/config.ts or .umirc\nexport default {\n antd: {\n- import: true,\n+ import: false,\n },\n};\n",paraId:47,tocIndex:9},{value:"Replace moment.js locale with day.js locale:",paraId:48,tocIndex:10},{value:"- import moment from 'moment';\n+ import dayjs from 'dayjs';\n- import 'moment/locale/zh-cn';\n+ import 'dayjs/locale/zh-cn';\n\n- moment.locale('zh-cn');\n+ dayjs.locale('zh-cn');\n",paraId:49,tocIndex:10},{value:"\u{1F6A8} You need to pay attention to the day.js plugin system. If you find that the function originally in moment.js cannot be used in day.js, please refer to the ",paraId:50,tocIndex:10},{value:"day.js plugin document",paraId:50,tocIndex:10},{value:".",paraId:50,tocIndex:10},{value:"If you do not want to replace with day.js, you can use ",paraId:51,tocIndex:10},{value:"@ant-design/moment-webpack-plugin",paraId:51,tocIndex:10},{value:" to keep moment.js:",paraId:51,tocIndex:10},{value:"npm install --save-dev @ant-design/moment-webpack-plugin\n",paraId:52,tocIndex:10},{value:"// webpack-config.js\nimport AntdMomentWebpackPlugin from '@ant-design/moment-webpack-plugin';\n\nmodule.exports = {\n // ...\n plugins: [new AntdMomentWebpackPlugin()],\n};\n",paraId:53,tocIndex:10},{value:"If you don't want the style to change after upgrade, we have provided a v4 theme in ",paraId:54,tocIndex:11},{value:"@ant-design/compatible",paraId:54,tocIndex:11},{value:" that can restore v4 style.",paraId:54,tocIndex:11},{value:"\n```sandpack\nconst sandpackConfig = {\n dependencies: {\n '@ant-design/compatible': 'v5-compatible-v4',\n },\n};\n\nimport {\n defaultTheme, // Default theme\n darkTheme, // Dark theme\n} from '@ant-design/compatible';\nimport { ConfigProvider, Button, Radio, Space } from 'antd';\n\nexport default () => (\n <ConfigProvider theme={defaultTheme}>\n <Space direction=\"vertical\">\n <Button type=\"primary\">Button</Button>\n <Radio.Group>\n <Radio value={1}>A</Radio>\n <Radio value={2}>B</Radio>\n <Radio value={3}>C</Radio>\n <Radio value={4}>D</Radio>\n </Radio.Group>\n </Space>\n </ConfigProvider>\n);\n",paraId:55,tocIndex:11},{value:"Ant Design v5 using ",paraId:56,tocIndex:12},{value:":where",paraId:56,tocIndex:12},{value:" css selector to reduce CSS-in-JS hash priority. You can use ",paraId:56,tocIndex:12},{value:"@ant-design/cssinjs",paraId:56,tocIndex:12},{value:" ",paraId:56,tocIndex:12},{value:"StyleProvider",paraId:56,tocIndex:12},{value:" to cancel this function. Please ref ",paraId:56,tocIndex:12},{value:"Compatible adjustment",paraId:57,tocIndex:12},{value:".",paraId:56,tocIndex:12},{value:"We do not recommend multiple versions coexist, it will make the application more complex (such as style override, ConfigProvider not reused, etc.). It's better to use micro-applications such as ",paraId:58,tocIndex:13},{value:"qiankun",paraId:58,tocIndex:13},{value:" for page level development.",paraId:58,tocIndex:13},{value:"$ npm install --save antd-v5@npm:antd@5\n# or\n$ yarn add antd-v5@npm:antd@5\n# or\n$ pnpm add antd-v5@npm:antd@5\n",paraId:59,tocIndex:14},{value:"The package.json will be:",paraId:60,tocIndex:14},{value:'{\n "antd": "4.x",\n "antd-v5": "npm:antd@5"\n}\n',paraId:61,tocIndex:14},{value:"Now, antd in your project is still v4, and antd-v5 is v5.",paraId:62,tocIndex:14},{value:"import React from 'react';\nimport { Button as Button4 } from 'antd'; // v4\nimport { Button as Button5 } from 'antd-v5'; // v5\n\nexport default () => (\n <>\n <Button4 />\n <Button5 />\n </>\n);\n",paraId:63,tocIndex:14},{value:"Then config ",paraId:64,tocIndex:14},{value:"prefixCls",paraId:64,tocIndex:14},{value:" of ConfigProvider to avoid style conflict:",paraId:64,tocIndex:14},{value:"import React from 'react';\nimport { ConfigProvider as ConfigProvider5 } from 'antd-v5';\n\nexport default () => (\n <ConfigProvider5 prefixCls=\"ant5\">\n <MyApp />\n </ConfigProvider5>\n);\n",paraId:65,tocIndex:14},{value:"If you encounter problems during the upgrade, please go to ",paraId:66,tocIndex:15},{value:"GitHub issues",paraId:66,tocIndex:15},{value:" for feedback. We will respond and improve this document as soon as possible.",paraId:66,tocIndex:15}];}}]); |