From 5999aa74144121b1fbdd14023d85165601879454 Mon Sep 17 00:00:00 2001 From: zefeng Date: Sun, 12 Apr 2020 15:32:15 +0800 Subject: [PATCH 01/56] docs: update customize theme docs (#23159) --- docs/react/customize-theme.en-US.md | 2 ++ docs/react/customize-theme.zh-CN.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index 3ad0a33eac..98788a13f1 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -182,6 +182,7 @@ If the project does not use Less, you can import [antd.dark.css](https://unpkg.c Method 3: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed: ```diff +const defaultTheme = require('antd/dist/default-theme'); const darkTheme = require('antd/dist/dark-theme'); const compactTheme = require('antd/dist/compact-theme'); @@ -198,6 +199,7 @@ module.exports = { + options: { + modifyVars: { + 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, ++ ...defaultTheme, // darkTheme and compactTheme depend on defaultTheme + ...darkTheme, + ...compactTheme, + }, diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index 71c9775566..4fbdb3d3ed 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -160,6 +160,7 @@ module.exports = { 方式三：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入： ```diff +const defaultTheme = require('antd/dist/default-theme'); const darkTheme = require('antd/dist/dark-theme'); const compactTheme = require('antd/dist/compact-theme'); @@ -176,6 +177,7 @@ module.exports = { + options: { + modifyVars: { + 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, ++ ...defaultTheme, // darkTheme 和 compactTheme 依赖 defaultTheme + ...darkTheme, + ...compactTheme, + }, From 6bb6c4c24380db87030b177c1345291cf82b7941 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Sun, 12 Apr 2020 15:33:43 +0800 Subject: [PATCH 02/56] small size (#23160) --- components/select/style/single.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/select/style/single.less b/components/select/style/single.less index feae88bcf0..af47f34d24 100644 --- a/components/select/style/single.less +++ b/components/select/style/single.less @@ -117,7 +117,7 @@ .@{select-prefix-cls}-selection-item, .@{select-prefix-cls}-selection-placeholder { - line-height: @input-height; + line-height: @input-height - 2 * @border-width-base; } } From 12ce6aba064e57f71d7e714aae6d75e87f42910b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Sun, 12 Apr 2020 17:55:30 +0800 Subject: [PATCH 03/56] fix: Safari12 fixed column (#23161) * fix: Safari12 fixed column * fix lint --- components/table/style/index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/table/style/index.less b/components/table/style/index.less index 86bad3814e..4a1e5a68db 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -507,6 +507,8 @@ // ============================ Fixed ============================= &-cell-fix-left, &-cell-fix-right { + position: -webkit-sticky; + position: sticky; z-index: 2; background: @table-bg; } From de68e37da24d5b6487e7069f121543cc9a309225 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Sun, 12 Apr 2020 21:01:14 +0800 Subject: [PATCH 04/56] fix @tabs-card-height (#23168) --- components/style/themes/default.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 5334550773..39387da149 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -656,7 +656,8 @@ @tabs-card-head-background: @background-color-light; @tabs-card-height: 40px; @tabs-card-active-color: @primary-color; -@tabs-card-horizontal-padding: 8px @padding-md; +@tabs-card-horizontal-padding: (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2 - + @border-width-base @padding-md; @tabs-card-horizontal-padding-sm: 6px @padding-md; @tabs-title-font-size: @font-size-base; @tabs-title-font-size-lg: @font-size-lg; From 3d9b891a2632b4868c670833fda51a47f6dbddea Mon Sep 17 00:00:00 2001 From: baozefeng Date: Sun, 12 Apr 2020 22:48:10 +0800 Subject: [PATCH 05/56] feat: add getThemeVar file to support theme config and fix 4.1.2 theme config breaking change --- .antd-tools.config.js | 58 ++++++++++++++++++++++++++++- docs/react/customize-theme.en-US.md | 14 +++---- docs/react/customize-theme.zh-CN.md | 14 +++---- 3 files changed, 67 insertions(+), 19 deletions(-) diff --git a/.antd-tools.config.js b/.antd-tools.config.js index 73502a35fc..32506e6bf5 100644 --- a/.antd-tools.config.js +++ b/.antd-tools.config.js @@ -61,11 +61,31 @@ function buildThemeFile(theme, vars) { // eslint-disable-next-line no-console console.log(`Built a entry less file to dist/antd.${theme}.less`); + if (theme === 'default') { + fs.writeFileSync( + path.join(process.cwd(), 'dist', `default-theme.js`), + `module.exports = ${JSON.stringify(vars, null, 2)};\n`, + ); + return; + } + // Build ${theme}.js: dist/${theme}-theme.js, for less-loader + fs.writeFileSync( + path.join(process.cwd(), 'dist', `getThemeVar.js`), + `const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`, + { + flag: 'a', + }, + ); + fs.writeFileSync( path.join(process.cwd(), 'dist', `${theme}-theme.js`), - `module.exports = ${JSON.stringify(vars, null, 2)};`, + `const { ${theme}ThemeSingle } = require('./getThemeVar');\nconst defaultTheme = require('./defaultTheme');\n +module.exports = { + ...${theme}ThemeSingle, + ...defaultTheme +}`, ); // eslint-disable-next-line no-console @@ -80,10 +100,46 @@ function finalizeDist() { '@import "../lib/style/index.less";\n@import "../lib/style/components.less";', ); // eslint-disable-next-line no-console + fs.writeFileSync( + path.join(process.cwd(), 'dist', 'getThemeVar.js'), + `const defaultTheme = require('./default-theme.js');\n`, + ); console.log('Built a entry less file to dist/antd.less'); buildThemeFile('default', defaultVars); buildThemeFile('dark', darkVars); buildThemeFile('compact', compactVars); + fs.writeFileSync( + path.join(process.cwd(), 'dist', `getThemeVar.js`), + ` +function getThemeVar(options = {}) { + let themeVar = { + 'hack': \`true;@import "\${require.resolve('antd/lib/style/color/colorPalette.less')}";\`, + ...defaultTheme + }; + if(options.dark) { + themeVar = { + ...themeVar, + ...darkThemeSingle + } + } + if(options.compact){ + themeVar = { + ...themeVar, + ...compactThemeSingle + } + } + return themeVar; +} + +module.exports = { + darkThemeSingle, + compactThemeSingle, + getThemeVar +}`, + { + flag: 'a', + }, + ); } } diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index 98788a13f1..5d8a28be53 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -182,9 +182,7 @@ If the project does not use Less, you can import [antd.dark.css](https://unpkg.c Method 3: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed: ```diff -const defaultTheme = require('antd/dist/default-theme'); -const darkTheme = require('antd/dist/dark-theme'); -const compactTheme = require('antd/dist/compact-theme'); +const { getThemeVar } = require('antd/dist/getThemeVar'); // webpack.config.js module.exports = { @@ -197,12 +195,10 @@ module.exports = { }, { loader: 'less-loader', // compiles Less to CSS + options: { -+ modifyVars: { -+ 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, -+ ...defaultTheme, // darkTheme and compactTheme depend on defaultTheme -+ ...darkTheme, -+ ...compactTheme, -+ }, ++ modifyVars: getThemeVar({ ++ dark: true, // enable dark mode ++ compact: true, // enable compact mode ++ }), + javascriptEnabled: true, + }, }], diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index 4fbdb3d3ed..9737846222 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -160,9 +160,7 @@ module.exports = { 方式三：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入： ```diff -const defaultTheme = require('antd/dist/default-theme'); -const darkTheme = require('antd/dist/dark-theme'); -const compactTheme = require('antd/dist/compact-theme'); +const { getThemeVar } = require('antd/dist/getThemeVar'); // webpack.config.js module.exports = { @@ -175,12 +173,10 @@ module.exports = { }, { loader: 'less-loader', // compiles Less to CSS + options: { -+ modifyVars: { -+ 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, -+ ...defaultTheme, // darkTheme 和 compactTheme 依赖 defaultTheme -+ ...darkTheme, -+ ...compactTheme, -+ }, ++ modifyVars: getThemeVar({ ++ dark: true, // 开启暗黑模式 ++ compact: true, // 开启紧凑模式 ++ }), + javascriptEnabled: true, + }, }], From 9c2473ab2540f8f13049bdce133ed39ec999e86c Mon Sep 17 00:00:00 2001 From: baozefeng Date: Sun, 12 Apr 2020 22:48:53 +0800 Subject: [PATCH 06/56] Revert "feat: add getThemeVar file to support theme config and fix 4.1.2 theme config breaking change" This reverts commit 3d9b891a2632b4868c670833fda51a47f6dbddea. --- .antd-tools.config.js | 58 +---------------------------- docs/react/customize-theme.en-US.md | 14 ++++--- docs/react/customize-theme.zh-CN.md | 14 ++++--- 3 files changed, 19 insertions(+), 67 deletions(-) diff --git a/.antd-tools.config.js b/.antd-tools.config.js index 32506e6bf5..73502a35fc 100644 --- a/.antd-tools.config.js +++ b/.antd-tools.config.js @@ -61,31 +61,11 @@ function buildThemeFile(theme, vars) { // eslint-disable-next-line no-console console.log(`Built a entry less file to dist/antd.${theme}.less`); - if (theme === 'default') { - fs.writeFileSync( - path.join(process.cwd(), 'dist', `default-theme.js`), - `module.exports = ${JSON.stringify(vars, null, 2)};\n`, - ); - return; - } - // Build ${theme}.js: dist/${theme}-theme.js, for less-loader - fs.writeFileSync( - path.join(process.cwd(), 'dist', `getThemeVar.js`), - `const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`, - { - flag: 'a', - }, - ); - fs.writeFileSync( path.join(process.cwd(), 'dist', `${theme}-theme.js`), - `const { ${theme}ThemeSingle } = require('./getThemeVar');\nconst defaultTheme = require('./defaultTheme');\n -module.exports = { - ...${theme}ThemeSingle, - ...defaultTheme -}`, + `module.exports = ${JSON.stringify(vars, null, 2)};`, ); // eslint-disable-next-line no-console @@ -100,46 +80,10 @@ function finalizeDist() { '@import "../lib/style/index.less";\n@import "../lib/style/components.less";', ); // eslint-disable-next-line no-console - fs.writeFileSync( - path.join(process.cwd(), 'dist', 'getThemeVar.js'), - `const defaultTheme = require('./default-theme.js');\n`, - ); console.log('Built a entry less file to dist/antd.less'); buildThemeFile('default', defaultVars); buildThemeFile('dark', darkVars); buildThemeFile('compact', compactVars); - fs.writeFileSync( - path.join(process.cwd(), 'dist', `getThemeVar.js`), - ` -function getThemeVar(options = {}) { - let themeVar = { - 'hack': \`true;@import "\${require.resolve('antd/lib/style/color/colorPalette.less')}";\`, - ...defaultTheme - }; - if(options.dark) { - themeVar = { - ...themeVar, - ...darkThemeSingle - } - } - if(options.compact){ - themeVar = { - ...themeVar, - ...compactThemeSingle - } - } - return themeVar; -} - -module.exports = { - darkThemeSingle, - compactThemeSingle, - getThemeVar -}`, - { - flag: 'a', - }, - ); } } diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index 5d8a28be53..98788a13f1 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -182,7 +182,9 @@ If the project does not use Less, you can import [antd.dark.css](https://unpkg.c Method 3: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed: ```diff -const { getThemeVar } = require('antd/dist/getThemeVar'); +const defaultTheme = require('antd/dist/default-theme'); +const darkTheme = require('antd/dist/dark-theme'); +const compactTheme = require('antd/dist/compact-theme'); // webpack.config.js module.exports = { @@ -195,10 +197,12 @@ module.exports = { }, { loader: 'less-loader', // compiles Less to CSS + options: { -+ modifyVars: getThemeVar({ -+ dark: true, // enable dark mode -+ compact: true, // enable compact mode -+ }), ++ modifyVars: { ++ 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, ++ ...defaultTheme, // darkTheme and compactTheme depend on defaultTheme ++ ...darkTheme, ++ ...compactTheme, ++ }, + javascriptEnabled: true, + }, }], diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index 9737846222..4fbdb3d3ed 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -160,7 +160,9 @@ module.exports = { 方式三：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入： ```diff -const { getThemeVar } = require('antd/dist/getThemeVar'); +const defaultTheme = require('antd/dist/default-theme'); +const darkTheme = require('antd/dist/dark-theme'); +const compactTheme = require('antd/dist/compact-theme'); // webpack.config.js module.exports = { @@ -173,10 +175,12 @@ module.exports = { }, { loader: 'less-loader', // compiles Less to CSS + options: { -+ modifyVars: getThemeVar({ -+ dark: true, // 开启暗黑模式 -+ compact: true, // 开启紧凑模式 -+ }), ++ modifyVars: { ++ 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, ++ ...defaultTheme, // darkTheme 和 compactTheme 依赖 defaultTheme ++ ...darkTheme, ++ ...compactTheme, ++ }, + javascriptEnabled: true, + }, }], From 65293f62d64df896fccff4a6ffc864491b6a1843 Mon Sep 17 00:00:00 2001 From: zefeng Date: Mon, 13 Apr 2020 00:05:48 +0800 Subject: [PATCH 07/56] =?UTF-8?q?feat:=20add=20getThemeVar=20file=20to=20s?= =?UTF-8?q?upport=20theme=20config=20and=20fix=204.1.2=20them=E2=80=A6=20(?= =?UTF-8?q?#23171)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add getThemeVar file to support theme config and fix 4.1.2 theme config breaking change * patch --- .antd-tools.config.js | 59 ++++++++++++++++++++++++++++- docs/react/customize-theme.en-US.md | 14 +++---- docs/react/customize-theme.zh-CN.md | 14 +++---- 3 files changed, 68 insertions(+), 19 deletions(-) diff --git a/.antd-tools.config.js b/.antd-tools.config.js index 73502a35fc..8ddbf3ba78 100644 --- a/.antd-tools.config.js +++ b/.antd-tools.config.js @@ -61,11 +61,31 @@ function buildThemeFile(theme, vars) { // eslint-disable-next-line no-console console.log(`Built a entry less file to dist/antd.${theme}.less`); + if (theme === 'default') { + fs.writeFileSync( + path.join(process.cwd(), 'dist', `default-theme.js`), + `module.exports = ${JSON.stringify(vars, null, 2)};\n`, + ); + return; + } + // Build ${theme}.js: dist/${theme}-theme.js, for less-loader + fs.writeFileSync( + path.join(process.cwd(), 'dist', `theme.js`), + `const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`, + { + flag: 'a', + }, + ); + fs.writeFileSync( path.join(process.cwd(), 'dist', `${theme}-theme.js`), - `module.exports = ${JSON.stringify(vars, null, 2)};`, + `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n +module.exports = { + ...${theme}ThemeSingle, + ...defaultTheme +}`, ); // eslint-disable-next-line no-console @@ -80,10 +100,46 @@ function finalizeDist() { '@import "../lib/style/index.less";\n@import "../lib/style/components.less";', ); // eslint-disable-next-line no-console + fs.writeFileSync( + path.join(process.cwd(), 'dist', 'theme.js'), + `const defaultTheme = require('./default-theme.js');\n`, + ); console.log('Built a entry less file to dist/antd.less'); buildThemeFile('default', defaultVars); buildThemeFile('dark', darkVars); buildThemeFile('compact', compactVars); + fs.writeFileSync( + path.join(process.cwd(), 'dist', `theme.js`), + ` +function getThemeVariables(options = {}) { + let themeVar = { + 'hack': \`true;@import "\${require.resolve('antd/lib/style/color/colorPalette.less')}";\`, + ...defaultTheme + }; + if(options.dark) { + themeVar = { + ...themeVar, + ...darkThemeSingle + } + } + if(options.compact){ + themeVar = { + ...themeVar, + ...compactThemeSingle + } + } + return themeVar; +} + +module.exports = { + darkThemeSingle, + compactThemeSingle, + getThemeVariables +}`, + { + flag: 'a', + }, + ); } } @@ -95,3 +151,4 @@ module.exports = { finalize: finalizeDist, }, }; +finalizeDist(); diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index 98788a13f1..a18d9da118 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -182,9 +182,7 @@ If the project does not use Less, you can import [antd.dark.css](https://unpkg.c Method 3: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed: ```diff -const defaultTheme = require('antd/dist/default-theme'); -const darkTheme = require('antd/dist/dark-theme'); -const compactTheme = require('antd/dist/compact-theme'); +const { getThemeVariables } = require('antd/dist/theme'); // webpack.config.js module.exports = { @@ -197,12 +195,10 @@ module.exports = { }, { loader: 'less-loader', // compiles Less to CSS + options: { -+ modifyVars: { -+ 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, -+ ...defaultTheme, // darkTheme and compactTheme depend on defaultTheme -+ ...darkTheme, -+ ...compactTheme, -+ }, ++ modifyVars: getThemeVariables({ ++ dark: true, // enable dark mode ++ compact: true, // enable compact mode ++ }), + javascriptEnabled: true, + }, }], diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index 4fbdb3d3ed..6533f69f20 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -160,9 +160,7 @@ module.exports = { 方式三：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入： ```diff -const defaultTheme = require('antd/dist/default-theme'); -const darkTheme = require('antd/dist/dark-theme'); -const compactTheme = require('antd/dist/compact-theme'); +const { getThemeVariables } = require('antd/dist/theme'); // webpack.config.js module.exports = { @@ -175,12 +173,10 @@ module.exports = { }, { loader: 'less-loader', // compiles Less to CSS + options: { -+ modifyVars: { -+ 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, -+ ...defaultTheme, // darkTheme 和 compactTheme 依赖 defaultTheme -+ ...darkTheme, -+ ...compactTheme, -+ }, ++ modifyVars: getThemeVariables({ ++ dark: true, // 开启暗黑模式 ++ compact: true, // 开启紧凑模式 ++ }), + javascriptEnabled: true, + }, }], From 653724b79e70715e496ce9802dc8cc2deb5626b4 Mon Sep 17 00:00:00 2001 From: HouXiancheng <505421473@qq.com> Date: Mon, 13 Apr 2020 12:19:06 +0800 Subject: [PATCH 08/56] fix: tabs_animation_bug (#23151) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: tabs_animation_bug * fix: fix lint error Co-authored-by: 侯先诚 --- components/tabs/style/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 6c357ba828..4967cd6147 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -261,10 +261,10 @@ .@{tab-prefix-cls}-top-content, .@{tab-prefix-cls}-bottom-content { width: 100%; - > .@{tab-prefix-cls}-tabpane { flex-shrink: 0; width: 100%; + -webkit-backface-visibility: hidden; opacity: 1; transition: opacity 0.45s; } From 7bc3d4f22289f79ce55cfe6f1e3fddee78943d6f Mon Sep 17 00:00:00 2001 From: Eric Wang Date: Mon, 13 Apr 2020 15:36:23 +1000 Subject: [PATCH 09/56] chore: Refactor the button test to use typescript (#22953) * Refactor the button test to use typescript * update tsconfig.json * Change file name as a workaround * update antd-tools --- .jest.js | 11 ++++++++--- .jest.node.js | 2 +- .../{demo.test.js.snap => demo.test.ts.snap} | 0 ...{index.test.js.snap => type.test.tsx.snap} | 0 .../__tests__/{demo.test.js => demo.test.ts} | 0 .../{index.test.js => type.test.tsx} | 13 +++++++------ package.json | 2 +- tests/shared/{demoTest.js => demoTest.ts} | 19 +++++++++++-------- tests/shared/{mountTest.js => mountTest.tsx} | 2 +- tests/shared/{rtlTest.js => rtlTest.tsx} | 4 ++-- tests/{utils.js => utils.ts} | 2 +- tsconfig.json | 2 +- 12 files changed, 33 insertions(+), 24 deletions(-) rename components/button/__tests__/__snapshots__/{demo.test.js.snap => demo.test.ts.snap} (100%) rename components/button/__tests__/__snapshots__/{index.test.js.snap => type.test.tsx.snap} (100%) rename components/button/__tests__/{demo.test.js => demo.test.ts} (100%) rename components/button/__tests__/{index.test.js => type.test.tsx} (94%) rename tests/shared/{demoTest.js => demoTest.ts} (81%) rename tests/shared/{mountTest.js => mountTest.tsx} (86%) rename tests/shared/{rtlTest.js => rtlTest.tsx} (81%) rename tests/{utils.js => utils.ts} (86%) diff --git a/.jest.js b/.jest.js index 778b157c91..d162b283be 100644 --- a/.jest.js +++ b/.jest.js @@ -1,5 +1,3 @@ -const libDir = process.env.LIB_DIR; - const transformIgnorePatterns = [ '/dist/', // Ignore modules without es dir. @@ -7,6 +5,13 @@ const transformIgnorePatterns = [ 'node_modules/(?!.*@babel)[^/]+?/(?!(es|node_modules)/)', ]; +function getTestRegex(libDir) { + if (libDir === 'dist') { + return 'demo\\.test\\.js$'; + } + return '.*\\.test\\.(j|t)sx?$'; +} + module.exports = { verbose: true, setupFiles: ['./tests/setup.js'], @@ -28,7 +33,7 @@ module.exports = { '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor', '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor', }, - testRegex: `${libDir === 'dist' ? 'demo' : '.*'}\\.test\\.js$`, + testRegex: getTestRegex(process.env.LIB_DIR), collectCoverageFrom: [ 'components/**/*.{ts,tsx}', '!components/*/style/index.tsx', diff --git a/.jest.node.js b/.jest.node.js index d91949fea1..1b76c15762 100644 --- a/.jest.node.js +++ b/.jest.node.js @@ -12,7 +12,7 @@ module.exports = { '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor', '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor', }, - testRegex: 'demo\\.test\\.js$', + testRegex: 'demo\\.test\\.(j|t)s$', testEnvironment: 'node', transformIgnorePatterns, snapshotSerializers: ['enzyme-to-json/serializer'], diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap similarity index 100% rename from components/button/__tests__/__snapshots__/demo.test.js.snap rename to components/button/__tests__/__snapshots__/demo.test.ts.snap diff --git a/components/button/__tests__/__snapshots__/index.test.js.snap b/components/button/__tests__/__snapshots__/type.test.tsx.snap similarity index 100% rename from components/button/__tests__/__snapshots__/index.test.js.snap rename to components/button/__tests__/__snapshots__/type.test.tsx.snap diff --git a/components/button/__tests__/demo.test.js b/components/button/__tests__/demo.test.ts similarity index 100% rename from components/button/__tests__/demo.test.js rename to components/button/__tests__/demo.test.ts diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/type.test.tsx similarity index 94% rename from components/button/__tests__/index.test.js rename to components/button/__tests__/type.test.tsx index 425326aca5..1dd1443be9 100644 --- a/components/button/__tests__/index.test.js +++ b/components/button/__tests__/type.test.tsx @@ -1,12 +1,12 @@ import React, { Component } from 'react'; import { mount, render } from 'enzyme'; -import renderer from 'react-test-renderer'; import { SearchOutlined } from '@ant-design/icons'; import Button from '..'; import ConfigProvider from '../../config-provider'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { sleep } from '../../../tests/utils'; +import { SizeType } from '../../config-provider/SizeContext'; describe('Button', () => { mountTest(Button); @@ -30,13 +30,14 @@ describe('Button', () => { }); it('mount correctly', () => { - expect(() => renderer.create()).not.toThrow(); + expect(() => mount()).not.toThrow(); }); it('warns if size is wrong', () => { const mockWarn = jest.fn(); jest.spyOn(console, 'warn').mockImplementation(mockWarn); - render(); + const size = ('who am I' as any) as SizeType; + render(); expect(mockWarn).toHaveBeenCalledTimes(1); expect(mockWarn.mock.calls[0][0]).toMatchObject({ message: 'unreachable case: "who am I"', @@ -74,7 +75,7 @@ describe('Button', () => { }); it('renders Chinese characters correctly in HOC', () => { - const Text = ({ children }) => {children}; + const Text = ({ children }: { children: React.ReactNode }) => {children}; const wrapper = mount( ); - expect(wrapper.type().__ANT_BUTTON).toBe(true); + expect((wrapper.type() as any).__ANT_BUTTON).toBe(true); }); it('should change loading state instantly by default', () => { @@ -189,7 +190,7 @@ describe('Button', () => { it('should has click wave effect', async () => { const wrapper = mount(); - wrapper.find('.ant-btn').getDOMNode().click(); + wrapper.find('.ant-btn').getDOMNode().click(); await new Promise(resolve => setTimeout(resolve, 0)); expect(wrapper.render()).toMatchSnapshot(); }); diff --git a/package.json b/package.json index 6cf9c38e08..5f5a4c0192 100644 --- a/package.json +++ b/package.json @@ -144,7 +144,7 @@ "@ant-design/bisheng-plugin": "^2.3.0", "@ant-design/colors": "^4.0.0", "@ant-design/hitu": "^0.0.0-alpha.13", - "@ant-design/tools": "^8.0.4", + "@ant-design/tools": "^8.2.0", "@qixian.cs/github-contributors-list": "^1.0.3", "@stackblitz/sdk": "^1.3.0", "@types/classnames": "^2.2.8", diff --git a/tests/shared/demoTest.js b/tests/shared/demoTest.ts similarity index 81% rename from tests/shared/demoTest.js rename to tests/shared/demoTest.ts index 1ea55183da..42991ffda5 100644 --- a/tests/shared/demoTest.js +++ b/tests/shared/demoTest.ts @@ -3,6 +3,8 @@ import { render } from 'enzyme'; import MockDate from 'mockdate'; import moment from 'moment'; +type CheerIO = ReturnType; +type CheerIOElement = CheerIO[0]; // We should avoid use it in 4.0. Reopen if can not handle this. const USE_REPLACEMENT = false; const testDist = process.env.LIB_DIR === 'dist'; @@ -13,12 +15,12 @@ const testDist = process.env.LIB_DIR === 'dist'; * Or `f7fa7a3c-a675-47bc-912e-0c45fb6a74d9`(randomly) when not test env. * So we need hack of this to modify the `aria-controls`. */ -function ariaConvert(wrapper) { +function ariaConvert(wrapper: CheerIO) { if (!testDist || !USE_REPLACEMENT) return wrapper; const matches = new Map(); - function process(entry) { + function process(entry: CheerIOElement) { const { attribs, children } = entry; if (matches.has(entry)) return; matches.set(entry, true); @@ -33,15 +35,16 @@ function ariaConvert(wrapper) { (Array.isArray(children) ? children : [children]).forEach(process); } - Object.keys(wrapper).forEach(key => { - const entry = wrapper[key]; - process(entry); - }); + wrapper.each((_, entry) => process(entry)); return wrapper; } -export default function demoTest(component, options = {}) { +type Options = { + skip?: boolean; +}; + +export default function demoTest(component: string, options: Options = {}) { const files = glob.sync(`./components/${component}/demo/*.md`); files.forEach(file => { @@ -50,7 +53,7 @@ export default function demoTest(component, options = {}) { testMethod = test.skip; } testMethod(`renders ${file} correctly`, () => { - MockDate.set(moment('2016-11-22')); + MockDate.set(moment('2016-11-22').toDate()); const demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require const wrapper = render(demo); diff --git a/tests/shared/mountTest.js b/tests/shared/mountTest.tsx similarity index 86% rename from tests/shared/mountTest.js rename to tests/shared/mountTest.tsx index 3793bfb7b4..7e4dee4a9f 100644 --- a/tests/shared/mountTest.js +++ b/tests/shared/mountTest.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { mount } from 'enzyme'; // eslint-disable-next-line jest/no-export -export default function mountTest(Component) { +export default function mountTest(Component: React.ComponentType) { describe(`mount and unmount`, () => { // https://github.com/ant-design/ant-design/pull/18441 it(`component could be updated and unmounted without errors`, () => { diff --git a/tests/shared/rtlTest.js b/tests/shared/rtlTest.tsx similarity index 81% rename from tests/shared/rtlTest.js rename to tests/shared/rtlTest.tsx index 94446a7e82..aba03cffd5 100644 --- a/tests/shared/rtlTest.js +++ b/tests/shared/rtlTest.tsx @@ -5,11 +5,11 @@ import { mount } from 'enzyme'; import ConfigProvider from '../../components/config-provider'; // eslint-disable-next-line jest/no-export -export default function rtlTest(Component, mockDate) { +export default function rtlTest(Component: React.ComponentType, mockDate?: boolean) { describe(`rtl render`, () => { it(`component should be rendered correctly in RTL direction`, () => { if (mockDate) { - MockDate.set(Moment('2000-09-28')); + MockDate.set(Moment('2000-09-28').toDate()); } const wrapper = mount( diff --git a/tests/utils.js b/tests/utils.ts similarity index 86% rename from tests/utils.js rename to tests/utils.ts index 423e01c0c5..26f9adee07 100644 --- a/tests/utils.js +++ b/tests/utils.ts @@ -2,7 +2,7 @@ import moment from 'moment'; import MockDate from 'mockdate'; export function setMockDate(dateString = '2017-09-18T03:30:07.795') { - MockDate.set(moment(dateString)); + MockDate.set(moment(dateString).toDate()); } export function resetMockDate() { diff --git a/tsconfig.json b/tsconfig.json index cf511ab415..e0015c0709 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,5 +17,5 @@ "lib": ["dom", "es2017"], "skipLibCheck": true }, - "exclude": ["node_modules", "lib", "es"] + "exclude": ["node_modules", "lib", "es", "**/__tests__/**"] } From d16001695921866814f994d7f0a69eb381f768fb Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Mon, 13 Apr 2020 13:53:42 +0800 Subject: [PATCH 10/56] style: fix steps rtl (#23183) --- components/steps/style/progress-dot.less | 48 ---------------- components/steps/style/rtl.less | 72 ++++++++++++++++++++++++ 2 files changed, 72 insertions(+), 48 deletions(-) diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less index 69ad523190..96077f1e2b 100644 --- a/components/steps/style/progress-dot.less +++ b/components/steps/style/progress-dot.less @@ -10,28 +10,14 @@ margin: 0 0 0 @steps-desciption-max-width / 2; padding: 0; - .@{steps-prefix-cls}-rtl& { - margin: 0 @steps-desciption-max-width / 2 0 0; - } - &::after { width: ~'calc(100% - 20px)'; height: 3px; margin-left: 12px; - - .@{steps-prefix-cls}-rtl& { - margin-right: 12px; - margin-left: 0; - } } } &:first-child .@{steps-prefix-cls}-icon-dot { left: 2px; - - .@{steps-prefix-cls}-rtl& { - right: 2px; - left: auto; - } } &-icon { width: @steps-dot-size; @@ -42,11 +28,6 @@ background: transparent; border: 0; - .@{steps-prefix-cls}-rtl& { - margin-right: 67px; - margin-left: 0; - } - .@{steps-prefix-cls}-icon-dot { position: relative; float: left; @@ -54,10 +35,6 @@ height: 100%; border-radius: 100px; transition: all 0.3s; - - .@{steps-prefix-cls}-rtl& { - float: right; - } /* expand hover area */ &::after { position: absolute; @@ -67,11 +44,6 @@ height: 32px; background: fade(@black, 0.1%); content: ''; - - .@{steps-prefix-cls}-rtl& { - right: -26px; - left: auto; - } } } } @@ -94,11 +66,6 @@ margin-top: 8px; margin-left: 0; background: none; - - .@{steps-prefix-cls}-rtl& { - margin-right: 0; - margin-left: 16px; - } } // https://github.com/ant-design/ant-design/issues/18354 .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { @@ -106,26 +73,11 @@ left: -9px; margin: 0; padding: 22px 0 4px; - - .@{steps-prefix-cls}-rtl& { - right: -9px; - left: auto; - } } .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot { left: 0; - - .@{steps-prefix-cls}-rtl& { - right: 0; - left: auto; - } } .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot { left: -2px; - - .@{steps-prefix-cls}-rtl& { - right: -2px; - left: auto; - } } } diff --git a/components/steps/style/rtl.less b/components/steps/style/rtl.less index 56c9642478..f99319f814 100644 --- a/components/steps/style/rtl.less +++ b/components/steps/style/rtl.less @@ -174,3 +174,75 @@ } } } + +// progress-dot +.@{steps-prefix-cls}-dot, +.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small { + .@{steps-prefix-cls}-item { + &-tail { + .@{steps-prefix-cls}-rtl& { + margin: 0 @steps-desciption-max-width / 2 0 0; + } + + &::after { + .@{steps-prefix-cls}-rtl& { + margin-right: 12px; + margin-left: 0; + } + } + } + &:first-child .@{steps-prefix-cls}-icon-dot { + .@{steps-prefix-cls}-rtl& { + right: 2px; + left: auto; + } + } + &-icon { + .@{steps-prefix-cls}-rtl& { + margin-right: 67px; + margin-left: 0; + } + + .@{steps-prefix-cls}-icon-dot { + .@{steps-prefix-cls}-rtl& { + float: right; + } + /* expand hover area */ + &::after { + .@{steps-prefix-cls}-rtl& { + right: -26px; + left: auto; + } + } + } + } + } +} + +.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot { + .@{steps-prefix-cls}-item-icon { + .@{steps-prefix-cls}-rtl& { + margin-right: 0; + margin-left: 16px; + } + } + // https://github.com/ant-design/ant-design/issues/18354 + .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { + .@{steps-prefix-cls}-rtl& { + right: -9px; + left: auto; + } + } + .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot { + .@{steps-prefix-cls}-rtl& { + right: 0; + left: auto; + } + } + .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot { + .@{steps-prefix-cls}-rtl& { + right: -2px; + left: auto; + } + } +} From ca937577474ac5801e6d971cd9c8e0090896a14f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 13 Apr 2020 16:59:05 +0800 Subject: [PATCH 11/56] fix: vertial from label height (#23192) --- components/form/style/vertical.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/form/style/vertical.less b/components/form/style/vertical.less index 83063a5606..0b6f2463e0 100644 --- a/components/form/style/vertical.less +++ b/components/form/style/vertical.less @@ -36,6 +36,10 @@ .@{form-prefix-cls}-vertical { .@{form-item-prefix-cls} { flex-direction: column; + + &-label > label { + height: auto; + } } } From f7ead77f88b1b9f90b0d57bb95b732d818954b88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Mon, 13 Apr 2020 19:04:49 +0800 Subject: [PATCH 12/56] chore: Improve changelog workflow (#23198) * :zap: improve changelog workflow * chore: fill missing changelog * allow custom input --- package.json | 4 +- scripts/print-changelog.js | 81 +++++++++++++++++++++++++++++--------- 2 files changed, 66 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 5f5a4c0192..fa2947c192 100644 --- a/package.json +++ b/package.json @@ -49,8 +49,9 @@ "authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' | grep -v 'gitter.im' | grep -v '.local>' | grep -v 'alibaba-inc.com' | grep -v 'alipay.com' | grep -v 'taobao.com' > AUTHORS.txt", "build": "npm run compile && npm run dist", "bundlesize": "bundlesize", - "check-commit": "node ./scripts/check-commit.js", + "check-commit": "node ./scripts/check-commit", "compile": "antd-tools run compile", + "changelog": "node ./scripts/print-changelog", "predeploy": "antd-tools run clean && npm run site && cp netlify.toml CNAME _site && cp -r .circleci/ .github/ _site && npm run site:test", "deploy": "bisheng gh-pages --push-only --dotfiles", "deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages", @@ -200,6 +201,7 @@ "husky": "^4.0.3", "ignore-emit-webpack-plugin": "^2.0.2", "immutability-helper": "^3.0.0", + "inquirer": "^7.1.0", "intersection-observer": "^0.7.0", "jest": "^25.1.0", "jquery": "^3.4.1", diff --git a/scripts/print-changelog.js b/scripts/print-changelog.js index 11dc5e4910..4c5585f97e 100644 --- a/scripts/print-changelog.js +++ b/scripts/print-changelog.js @@ -1,5 +1,4 @@ -/* eslint-disable no-await-in-loop */ -/* eslint-disable no-console */ +/* eslint-disable no-await-in-loop, no-console */ const chalk = require('chalk'); const { spawn } = require('child_process'); const jsdom = require('jsdom'); @@ -9,6 +8,7 @@ const open = require('open'); const fs = require('fs-extra'); const path = require('path'); const simpleGit = require('simple-git/promise'); +const inquirer = require('inquirer'); const { JSDOM } = jsdom; const { window } = new JSDOM(); @@ -24,12 +24,13 @@ const MAINTAINERS = ['zombiej', 'afc163', 'chenshuai2144', 'shaodahong', 'xrkffg author.toLowerCase(), ); -const fromVersion = process.argv[process.argv.length - 2]; -const toVersion = process.argv[process.argv.length - 1]; const cwd = process.cwd(); const git = simpleGit(cwd); function getDescription(entity) { + if (!entity) { + return ''; + } const descEle = entity.element.find('td:last'); let htmlContent = descEle.html(); htmlContent = htmlContent.replace(/([^<]*)<\/code>/g, '`$1`'); @@ -37,12 +38,40 @@ function getDescription(entity) { } async function printLog() { + const tags = await git.tags(); + const { fromVersion } = await inquirer.prompt([ + { + type: 'list', + name: 'fromVersion', + message: '🏷 Please choose tag to compare with current branch:', + choices: tags.all.reverse().slice(0, 10), + }, + ]); + let { toVersion } = await inquirer.prompt([ + { + type: 'list', + name: 'toVersion', + message: `🔀 Please choose branch to compare with ${chalk.magenta(fromVersion)}:`, + choices: ['master', '3.x-stable', 'feature', 'custom input ⌨️'], + }, + ]); + + if (toVersion.startsWith('custom input')) { + const result = await inquirer.prompt([ + { + type: 'input', + name: 'toVersion', + message: `🔀 Please input custom git hash id or branch name to compare with ${chalk.magenta( + fromVersion, + )}:`, + default: 'master', + }, + ]); + toVersion = result.toVersion; + } + if (!/\d+\.\d+\.\d+/.test(fromVersion)) { - console.log( - chalk.red( - '🤪 Not pass validate tags. Please execute like `print-changelog.js 3.26.0 master` instead.', - ), - ); + console.log(chalk.red(`🤪 tag (${chalk.magenta(fromVersion)}) is not valid.`)); } const logs = await git.log({ from: fromVersion, to: toVersion }); @@ -50,7 +79,7 @@ async function printLog() { let prList = []; for (let i = 0; i < logs.all.length; i += 1) { - const { message, body, hash } = logs.all[i]; + const { message, body, hash, author_name } = logs.all[i]; const text = `${message} ${body}`; @@ -91,6 +120,12 @@ async function printLog() { const english = getDescription(lines.find(line => line.text.includes('🇺🇸 English'))); const chinese = getDescription(lines.find(line => line.text.includes('🇨🇳 Chinese'))); + if (english) { + console.log(` 🇨🇳 ${english}`); + } + if (chinese) { + console.log(` 🇺🇸 ${chinese}`); + } validatePRs.push({ pr, @@ -112,6 +147,9 @@ async function printLog() { prList.push({ hash, title: message, + author: author_name, + english: message, + chinese: message, }); } } @@ -145,19 +183,27 @@ async function printLog() { } // Chinese - console.log(chalk.yellow('Chinese changelog:')); - printPR('chinese', chinese => (chinese[chinese.length - 1] === '。' ? chinese : `${chinese}。`)); + console.log('\n'); + console.log(chalk.yellow('🇨🇳 Chinese changelog:')); + console.log('\n'); + printPR('chinese', chinese => { + return chinese[chinese.length - 1] === '。' || !chinese ? chinese : `${chinese}。`; + }); console.log('\n-----\n'); // English - console.log(chalk.yellow('English changelog:')); + console.log(chalk.yellow('🇺🇸 English changelog:')); + console.log('\n'); printPR('english', english => { english = english.trim(); - if (english[english.length - 1] !== '.') { + if (english[english.length - 1] !== '.' || !english) { english = `${english}.`; } - return `${english} `; + if (english) { + return `${english} `; + } + return ''; }); // Preview editor generate @@ -178,11 +224,10 @@ async function printLog() { console.log(data.toString()); }); - console.log(chalk.green('Start preview editor...')); - setTimeout(function openPreview() { + console.log(chalk.green('Start changelog preview editor...')); + setTimeout(() => { open('http://localhost:2893/'); }, 1000); } printLog(); -/* eslint-enable */ From 8c3081788c3406a1976cd97b5dab928a4d80fe15 Mon Sep 17 00:00:00 2001 From: HouXiancheng <505421473@qq.com> Date: Mon, 13 Apr 2020 19:32:50 +0800 Subject: [PATCH 13/56] fix: table fixed bug (#23181) --- components/table/style/index.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/table/style/index.less b/components/table/style/index.less index 4a1e5a68db..9a338bb3f3 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -507,8 +507,8 @@ // ============================ Fixed ============================= &-cell-fix-left, &-cell-fix-right { - position: -webkit-sticky; - position: sticky; + position: -webkit-sticky !important; + position: sticky !important; z-index: 2; background: @table-bg; } From 0ca9c69da2562c847a6f33e81807bbd3fd8e1f5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Mon, 13 Apr 2020 19:35:12 +0800 Subject: [PATCH 14/56] :sparkles: release 4.1.3 (#23199) --- CHANGELOG.en-US.md | 15 +++++++++++++++ CHANGELOG.zh-CN.md | 15 +++++++++++++++ package.json | 2 +- 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index eb1e5711e8..113c942f20 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,21 @@ timeline: true --- +## 4.1.3 + +- 💄 Adjust Form.Item `label` height style in vertical layout. [#23192](https://github.com/ant-design/ant-design/pull/23192) +- 🐞 Fix `Variable is undefined` when importing dark or compact theme and provide a `getThemeVariables` methold for getting theme variables easily. [#23171](https://github.com/ant-design/ant-design/pull/23171) +- 🐞 Fix PageHeader style breaks when `title` is too long and improve it's responsive design. [#23133](https://github.com/ant-design/ant-design/pull/23133) +- Tabs + - 🐞 Fix Tabs `@tabs-card-height` less variable not working. [#23168](https://github.com/ant-design/ant-design/pull/23168) + - 🐞 Fix Tabs cannot be displayed in Safari 13. [#23151](https://github.com/ant-design/ant-design/pull/23151) [@imhxc](https://github.com/imhxc) +- Table + - 🐞 Fix Table fixed columns cannot pin in Safari 12. [#23161](https://github.com/ant-design/ant-design/pull/23161) + - 🐞 Fix Table `summary` padding in small size. [#23140](https://github.com/ant-design/ant-design/pull/23140) [@someyoungideas](https://github.com/someyoungideas) +- 🐞 Fix Select align style with different size. [#23160](https://github.com/ant-design/ant-design/pull/23160) +- 🐞 Fix RangePicker under Input.Group style issue. [#23149](https://github.com/ant-design/ant-design/pull/23149) +- 🐞 Fix Pagination missing TypeScript definition of `showTitle`. [#23144](https://github.com/ant-design/ant-design/pull/23144) [@DongchengWang](https://github.com/DongchengWang) + ## 4.1.2 - Menu diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 456516406d..6dedfb97e5 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,21 @@ timeline: true --- +## 4.1.3 + +- 💄 调整 Form.Item `label` 在垂直布局下的高度样式。[#23192](https://github.com/ant-design/ant-design/pull/23192) +- 🐞 修复引用暗黑或紧凑主题时提示 `Variable is undefined` 的问题，并提供 `getThemeVariables` 方便获取对应主题变量。[#23171](https://github.com/ant-design/ant-design/pull/23171) +- 🐞 修复 PageHeader `title` 超长时布局被破坏的问题并优化响应式表现。[#23133](https://github.com/ant-design/ant-design/pull/23133) +- Tabs + - 🐞 修复 Tabs `@tabs-card-height` less 变量无效的问题。[#23168](https://github.com/ant-design/ant-design/pull/23168) + - 🐞 修复 Tabs 在 Safair 浏览器下无法显示的问题。[#23151](https://github.com/ant-design/ant-design/pull/23151) [@imhxc](https://github.com/imhxc) +- Table + - 🐞 修复 Table 固定列在 Safari 12 中不能固定的问题。[#23161](https://github.com/ant-design/ant-design/pull/23161) + - 🐞 修复 Table `summary` 在小尺寸下的内边距样式。[#23140](https://github.com/ant-design/ant-design/pull/23140) [@someyoungideas](https://github.com/someyoungideas) +- 🐞 修复 Select 不同尺寸下的对齐样式问题。[#23160](https://github.com/ant-design/ant-design/pull/23160) +- 🐞 修复 RangePicker 在 Input.Group 内的样式问题。[#23149](https://github.com/ant-design/ant-design/pull/23149) +- 🐞 修复 Pagination 缺少 `showTitle` TypeScript 定义的问题。[#23144](https://github.com/ant-design/ant-design/pull/23144) [@DongchengWang](https://github.com/DongchengWang) + ## 4.1.2 - Menu diff --git a/package.json b/package.json index fa2947c192..b427f03b94 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "4.1.2", + "version": "4.1.3", "description": "An enterprise-class UI design language and React components implementation", "keywords": [ "ant", From 59c0cdf3a20ad957ccd1c759636bf6ba3e483efb Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 13 Apr 2020 20:21:30 +0800 Subject: [PATCH 15/56] :white_check_mark: fix test case which fails a lot --- components/tooltip/__tests__/tooltip.test.js | 49 +++++++------------- 1 file changed, 18 insertions(+), 31 deletions(-) diff --git a/components/tooltip/__tests__/tooltip.test.js b/components/tooltip/__tests__/tooltip.test.js index 21001ce55e..1da57e594a 100644 --- a/components/tooltip/__tests__/tooltip.test.js +++ b/components/tooltip/__tests__/tooltip.test.js @@ -128,18 +128,8 @@ describe('Tooltip', () => { , ); - expect( - wrapper1 - .find('span') - .first() - .getDOMNode().style.display, - ).toBe('inline-block'); - expect( - wrapper2 - .find('span') - .first() - .getDOMNode().style.display, - ).toBe('block'); + expect(wrapper1.find('span').first().getDOMNode().style.display).toBe('inline-block'); + expect(wrapper2.find('span').first().getDOMNode().style.display).toBe('block'); }); it('should works for arrowPointAtCenter', () => { @@ -161,10 +151,7 @@ describe('Tooltip', () => { , ); - wrapper - .find('button') - .at(0) - .simulate('click'); + wrapper.find('button').at(0).simulate('click'); const popupLeftDefault = parseInt(wrapper.instance().getPopupDomNode().style.left, 10); const wrapper2 = mount( @@ -181,10 +168,7 @@ describe('Tooltip', () => { , ); - wrapper2 - .find('button') - .at(0) - .simulate('click'); + wrapper2.find('button').at(0).simulate('click'); const popupLeftArrowPointAtCenter = parseInt( wrapper2.instance().getPopupDomNode().style.left, 10, @@ -272,22 +256,26 @@ describe('Tooltip', () => { }).not.toThrow(); }); - it('support other placement', async () => { + it('support other placement', done => { const wrapper = mount( { + if (visible) { + expect(wrapper.find('Trigger').props().popupPlacement).toBe('bottomLeft'); + } + done(); + }} > - - Hello world! - + Hello world! , ); - await sleep(1000); - expect(wrapper.instance().getPopupDomNode().className).toContain('placement-bottomLeft'); + expect(wrapper.find('span')).toHaveLength(1); + const button = wrapper.find('span').at(0); + button.simulate('mouseenter'); }); it('other placement when mouse enter', async () => { @@ -296,18 +284,17 @@ describe('Tooltip', () => { title="xxxxx" placement="topRight" transitionName="" + popupTransitionName="" mouseEnterDelay={0} > - - Hello world! - + Hello world! , ); expect(wrapper.find('span')).toHaveLength(1); const button = wrapper.find('span').at(0); button.simulate('mouseenter'); - await sleep(300); + await sleep(500); expect(wrapper.instance().getPopupDomNode().className).toContain('placement-topRight'); }); }); From 3f4f5864fefee2d3ccbde041174e644a180425d9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 13 Apr 2020 20:38:31 +0800 Subject: [PATCH 16/56] :white_check_mark: fix test case which fails a lot --- components/form/__tests__/index.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js index 8442a35aa8..3b460b4bdb 100644 --- a/components/form/__tests__/index.test.js +++ b/components/form/__tests__/index.test.js @@ -585,9 +585,9 @@ describe('Form', () => { ); wrapper.find('form').simulate('submit'); - await delay(50); + await delay(100); wrapper.update(); - + await delay(100); expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('Bamboo is good!'); }); From 436d4b1be5e24c80e634465fb2dd1a30c242acac Mon Sep 17 00:00:00 2001 From: Eric Wang Date: Mon, 13 Apr 2020 23:30:55 +1000 Subject: [PATCH 17/56] improvement: Fix types in form item (#22962) * Fix types in form item * use jsx.element --- components/form/FormItem.tsx | 21 ++++++++------------- components/form/__tests__/type.test.tsx | 4 ---- components/table/__tests__/type.test.tsx | 3 --- 3 files changed, 8 insertions(+), 20 deletions(-) diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index d5f4ff37ee..3af930220b 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -24,22 +24,17 @@ type ChildrenType = RenderChildren | React.ReactNode; interface MemoInputProps { value: any; update: number; - children: any; + children: React.ReactNode; } -const MemoInput = React.memo( - ({ children }) => { - return children; - }, +const MemoInput = React.memo( + ({ children }: MemoInputProps) => children as JSX.Element, (prev, next) => { return prev.value === next.value && prev.update === next.update; }, ); -export interface FormItemProps - extends FormItemLabelProps, - FormItemInputProps, - Omit { +export interface FormItemProps extends FormItemLabelProps, FormItemInputProps, RcFieldProps { prefixCls?: string; noStyle?: boolean; style?: React.CSSProperties; @@ -129,7 +124,7 @@ function FormItem(props: FormItemProps): React.ReactElement { fieldId?: string, meta?: Meta, isRequired?: boolean, - ): any { + ): React.ReactNode { if (noStyle) { return baseChildren; } @@ -226,7 +221,7 @@ function FormItem(props: FormItemProps): React.ReactElement { updateRef.current += 1; if (!hasName && !isRenderProps && !dependencies) { - return renderLayout(children); + return renderLayout(children) as JSX.Element; } const variables: Record = {}; @@ -304,7 +299,7 @@ function FormItem(props: FormItemProps): React.ReactElement { ); } else if (React.isValidElement(children)) { warning( - (children.props as any).defaultValue === undefined, + children.props.defaultValue === undefined, 'Form.Item', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.', ); @@ -337,7 +332,7 @@ function FormItem(props: FormItemProps): React.ReactElement { 'Form.Item', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.', ); - childNode = children as any; + childNode = children; } return renderLayout(childNode, fieldId, meta, isRequired); diff --git a/components/form/__tests__/type.test.tsx b/components/form/__tests__/type.test.tsx index fabbf6e5a7..70806212c5 100644 --- a/components/form/__tests__/type.test.tsx +++ b/components/form/__tests__/type.test.tsx @@ -1,5 +1,3 @@ -/* eslint-disable no-unused-expressions */ - import * as React from 'react'; import Form from '..'; import Input from '../../input'; @@ -17,5 +15,3 @@ describe('Form.typescript', () => { expect(form).toBeTruthy(); }); }); - -/* eslint-enable */ diff --git a/components/table/__tests__/type.test.tsx b/components/table/__tests__/type.test.tsx index 0b8c7360e6..d19368c6ce 100644 --- a/components/table/__tests__/type.test.tsx +++ b/components/table/__tests__/type.test.tsx @@ -1,5 +1,3 @@ -/* eslint-disable no-unused-expressions */ - import * as React from 'react'; import Table from '../Table'; import { ColumnProps } from '..'; @@ -44,4 +42,3 @@ describe('Table.typescript types', () => { expect(columns).toBeTruthy(); }); }); -/* eslint-enable */ From 8c11676afa5b9ccf92bf53925792df5a50422aeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 13 Apr 2020 22:56:26 +0800 Subject: [PATCH 18/56] fix: Table selection `childrenColumnName` not work (#23205) * fix childrenPropName * test case * update test case --- components/table/Table.tsx | 4 +++- .../table/__tests__/Table.rowSelection.test.js | 18 ++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 3c8a182e02..354cdee4a3 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -98,6 +98,7 @@ function Table(props: TableProps) { rowClassName, columns, children, + childrenColumnName: legacyChildrenColumnName, onChange, getPopupContainer, loading, @@ -106,7 +107,6 @@ function Table(props: TableProps) { expandedRowRender, expandIconColumnIndex, indentSize, - childrenColumnName = 'children', scroll, sortDirections, locale, @@ -128,9 +128,11 @@ function Table(props: TableProps) { const dropdownPrefixCls = getPrefixCls('dropdown', customizeDropdownPrefixCls); const mergedExpandable: ExpandableConfig = { + childrenColumnName: legacyChildrenColumnName, expandIconColumnIndex, ...expandable, }; + const { childrenColumnName = 'children' } = mergedExpandable; const expandType: ExpandType = React.useMemo(() => { if (rawData.some(item => (item as any)[childrenColumnName])) { diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js index 2c70a211a5..551a53fe3e 100644 --- a/components/table/__tests__/Table.rowSelection.test.js +++ b/components/table/__tests__/Table.rowSelection.test.js @@ -779,4 +779,22 @@ describe('Table.rowSelection', () => { jest.runAllTimers(); expect(wrapper.render()).toMatchSnapshot(); }); + + it('Table selection should check', () => { + const onChange = jest.fn(); + const wrapper = mount( + , + ); + + wrapper + .find('input') + .last() + .simulate('change', { target: { checked: true } }); + expect(onChange.mock.calls[0][1]).toEqual([expect.objectContaining({ name: 'bamboo' })]); + }); }); From 13fda44fb140522897a2bfb2349f8610d98bce2c Mon Sep 17 00:00:00 2001 From: Rustin Date: Tue, 14 Apr 2020 10:30:14 +0800 Subject: [PATCH 19/56] refactor(skeleton): rewrite with hook (#23206) * refactor(skeleton): rewrite with hook * fix(skeleton): refine lint and compile issues * fix(skeleton): refine compile issues * chore: ignore eslint warning --- .antd-tools.config.js | 1 + components/skeleton/Avatar.tsx | 24 ++++++------- components/skeleton/Button.tsx | 24 ++++++------- components/skeleton/Element.tsx | 56 +++++++++++++++---------------- components/skeleton/Input.tsx | 24 ++++++------- components/skeleton/Paragraph.tsx | 33 +++++++++--------- components/skeleton/Skeleton.tsx | 40 ++++++++++------------ components/skeleton/index.tsx | 6 ---- 8 files changed, 91 insertions(+), 117 deletions(-) diff --git a/.antd-tools.config.js b/.antd-tools.config.js index 8ddbf3ba78..82409a567e 100644 --- a/.antd-tools.config.js +++ b/.antd-tools.config.js @@ -104,6 +104,7 @@ function finalizeDist() { path.join(process.cwd(), 'dist', 'theme.js'), `const defaultTheme = require('./default-theme.js');\n`, ); + // eslint-disable-next-line no-console console.log('Built a entry less file to dist/antd.less'); buildThemeFile('default', defaultVars); buildThemeFile('dark', darkVars); diff --git a/components/skeleton/Avatar.tsx b/components/skeleton/Avatar.tsx index c4c13ddada..547b4ce1a2 100644 --- a/components/skeleton/Avatar.tsx +++ b/components/skeleton/Avatar.tsx @@ -8,17 +8,11 @@ export interface AvatarProps extends Omit { shape?: 'circle' | 'square'; } -// eslint-disable-next-line react/prefer-stateless-function -class SkeletonAvatar extends React.Component { - static defaultProps: Partial = { - size: 'default', - shape: 'circle', - }; - - renderSkeletonAvatar = ({ getPrefixCls }: ConfigConsumerProps) => { - const { prefixCls: customizePrefixCls, className, active } = this.props; +const SkeletonAvatar = (props: AvatarProps) => { + const renderSkeletonAvatar = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className, active } = props; const prefixCls = getPrefixCls('skeleton', customizePrefixCls); - const otherProps = omit(this.props, ['prefixCls']); + const otherProps = omit(props, ['prefixCls']); const cls = classNames(prefixCls, className, `${prefixCls}-element`, { [`${prefixCls}-active`]: active, }); @@ -28,10 +22,12 @@ class SkeletonAvatar extends React.Component { ); }; - - render() { - return {this.renderSkeletonAvatar}; - } + return {renderSkeletonAvatar}; } +SkeletonAvatar.defaultProps = { + size: 'default', + shape: 'circle', +}; + export default SkeletonAvatar; diff --git a/components/skeleton/Button.tsx b/components/skeleton/Button.tsx index 0fdd201190..8a2d0ce5b9 100644 --- a/components/skeleton/Button.tsx +++ b/components/skeleton/Button.tsx @@ -4,20 +4,15 @@ import classNames from 'classnames'; import Element, { SkeletonElementProps } from './Element'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -interface SkeletonButtonProps extends Omit { +export interface SkeletonButtonProps extends Omit { size?: 'large' | 'small' | 'default'; } -// eslint-disable-next-line react/prefer-stateless-function -class SkeletonButton extends React.Component { - static defaultProps: Partial = { - size: 'default', - }; - - renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => { - const { prefixCls: customizePrefixCls, className, active } = this.props; +const SkeletonButton = (props: SkeletonButtonProps) => { + const renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className, active } = props; const prefixCls = getPrefixCls('skeleton', customizePrefixCls); - const otherProps = omit(this.props, ['prefixCls']); + const otherProps = omit(props, ['prefixCls']); const cls = classNames(prefixCls, className, `${prefixCls}-element`, { [`${prefixCls}-active`]: active, }); @@ -27,10 +22,11 @@ class SkeletonButton extends React.Component { ); }; + return {renderSkeletonButton}; +}; - render() { - return {this.renderSkeletonButton}; - } -} +SkeletonButton.defaultProps = { + size: 'default', +}; export default SkeletonButton; diff --git a/components/skeleton/Element.tsx b/components/skeleton/Element.tsx index 61ad71ab17..836e94bff6 100644 --- a/components/skeleton/Element.tsx +++ b/components/skeleton/Element.tsx @@ -10,37 +10,35 @@ export interface SkeletonElementProps { active?: boolean; } -// eslint-disable-next-line react/prefer-stateless-function -class Element extends React.Component { - render() { - const { prefixCls, className, style, size, shape } = this.props; +const Element = (props: SkeletonElementProps) => { + const { prefixCls, className, style, size, shape } = props; - const sizeCls = classNames({ - [`${prefixCls}-lg`]: size === 'large', - [`${prefixCls}-sm`]: size === 'small', - }); + const sizeCls = classNames({ + [`${prefixCls}-lg`]: size === 'large', + [`${prefixCls}-sm`]: size === 'small', + }); - const shapeCls = classNames({ - [`${prefixCls}-circle`]: shape === 'circle', - [`${prefixCls}-square`]: shape === 'square', - [`${prefixCls}-round`]: shape === 'round', - }); + const shapeCls = classNames({ + [`${prefixCls}-circle`]: shape === 'circle', + [`${prefixCls}-square`]: shape === 'square', + [`${prefixCls}-round`]: shape === 'round', + }); + + const sizeStyle: React.CSSProperties = + typeof size === 'number' + ? { + width: size, + height: size, + lineHeight: `${size}px`, + } + : {}; + return ( + + ); +}; - const sizeStyle: React.CSSProperties = - typeof size === 'number' - ? { - width: size, - height: size, - lineHeight: `${size}px`, - } - : {}; - return ( - - ); - } -} export default Element; diff --git a/components/skeleton/Input.tsx b/components/skeleton/Input.tsx index c2c79ffc74..6ed8fac11c 100644 --- a/components/skeleton/Input.tsx +++ b/components/skeleton/Input.tsx @@ -4,20 +4,15 @@ import classNames from 'classnames'; import Element, { SkeletonElementProps } from './Element'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -interface SkeletonInputProps extends Omit { +export interface SkeletonInputProps extends Omit { size?: 'large' | 'small' | 'default'; } -// eslint-disable-next-line react/prefer-stateless-function -class SkeletonInput extends React.Component { - static defaultProps: Partial = { - size: 'default', - }; - - renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => { - const { prefixCls: customizePrefixCls, className, active } = this.props; +const SkeletonInput = (props: SkeletonInputProps) => { + const renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className, active } = props; const prefixCls = getPrefixCls('skeleton', customizePrefixCls); - const otherProps = omit(this.props, ['prefixCls']); + const otherProps = omit(props, ['prefixCls']); const cls = classNames(prefixCls, className, `${prefixCls}-element`, { [`${prefixCls}-active`]: active, }); @@ -27,10 +22,11 @@ class SkeletonInput extends React.Component { ); }; + return {renderSkeletonInput}; +}; - render() { - return {this.renderSkeletonInput}; - } -} +SkeletonInput.defaultProps = { + size: 'default', +}; export default SkeletonInput; diff --git a/components/skeleton/Paragraph.tsx b/components/skeleton/Paragraph.tsx index 12ae6ad109..0948b62711 100644 --- a/components/skeleton/Paragraph.tsx +++ b/components/skeleton/Paragraph.tsx @@ -11,9 +11,9 @@ export interface SkeletonParagraphProps { rows?: number; } -class Paragraph extends React.Component { - getWidth(index: number) { - const { width, rows = 2 } = this.props; +const Paragraph = (props: SkeletonParagraphProps) => { + const getWidth = (index: number) => { + const { width, rows = 2 } = props; if (Array.isArray(width)) { return width[index]; } @@ -22,20 +22,17 @@ class Paragraph extends React.Component { return width; } return undefined; - } - - render() { - const { prefixCls, className, style, rows } = this.props; - const rowList = [...Array(rows)].map((_, index) => ( - // eslint-disable-next-line react/no-array-index-key -
  • - )); - return ( -
      - {rowList} -
    - ); - } -} + }; + const { prefixCls, className, style, rows } = props; + const rowList = [...Array(rows)].map((_, index) => ( + // eslint-disable-next-line react/no-array-index-key +
  • + )); + return ( +
      + {rowList} +
    + ); +}; export default Paragraph; diff --git a/components/skeleton/Skeleton.tsx b/components/skeleton/Skeleton.tsx index 887a806e71..3d5b118e10 100644 --- a/components/skeleton/Skeleton.tsx +++ b/components/skeleton/Skeleton.tsx @@ -3,13 +3,14 @@ import classNames from 'classnames'; import Title, { SkeletonTitleProps } from './Title'; import Paragraph, { SkeletonParagraphProps } from './Paragraph'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import SkeletonButton from './Button'; import Element from './Element'; import SkeletonAvatar, { AvatarProps } from './Avatar'; +import SkeletonButton from './Button'; import SkeletonInput from './Input'; /* This only for skeleton internal. */ -interface SkeletonAvatarProps extends Omit {} +interface SkeletonAvatarProps extends Omit { +} export interface SkeletonProps { active?: boolean; @@ -68,20 +69,8 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton return basicProps; } -class Skeleton extends React.Component { - static Button: typeof SkeletonButton; - - static Avatar: typeof SkeletonAvatar; - - static Input: typeof SkeletonInput; - - static defaultProps: Partial = { - avatar: false, - title: true, - paragraph: true, - }; - - renderSkeleton = ({ getPrefixCls, direction }: ConfigConsumerProps) => { +const Skeleton = (props: SkeletonProps) => { + const renderSkeleton = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, loading, @@ -91,11 +80,11 @@ class Skeleton extends React.Component { title, paragraph, active, - } = this.props; + } = props; const prefixCls = getPrefixCls('skeleton', customizePrefixCls); - if (loading || !('loading' in this.props)) { + if (loading || !('loading' in props)) { const hasAvatar = !!avatar; const hasTitle = !!title; const hasParagraph = !!paragraph; @@ -166,10 +155,17 @@ class Skeleton extends React.Component { return children; }; + return {renderSkeleton}; +}; - render() { - return {this.renderSkeleton}; - } -} +Skeleton.defaultProps = { + avatar: false, + title: true, + paragraph: true, +}; + +Skeleton.Button = SkeletonButton; +Skeleton.Avatar = SkeletonAvatar; +Skeleton.Input = SkeletonInput; export default Skeleton; diff --git a/components/skeleton/index.tsx b/components/skeleton/index.tsx index 87f2c398fe..d5ce51274f 100644 --- a/components/skeleton/index.tsx +++ b/components/skeleton/index.tsx @@ -1,11 +1,5 @@ import Skeleton from './Skeleton'; -import SkeletonButton from './Button'; -import SkeletonAvatar from './Avatar'; -import SkeletonInput from './Input'; export { SkeletonProps } from './Skeleton'; -Skeleton.Button = SkeletonButton; -Skeleton.Avatar = SkeletonAvatar; -Skeleton.Input = SkeletonInput; export default Skeleton; From b1f3587e02915c6a3d16e3c1b8e1a134990eee1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Tue, 14 Apr 2020 10:38:06 +0800 Subject: [PATCH 20/56] Update visual.zh-CN.md (#23218) --- docs/spec/visual.zh-CN.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/spec/visual.zh-CN.md b/docs/spec/visual.zh-CN.md index 4a7b4aa668..9ba49b3d5d 100644 --- a/docs/spec/visual.zh-CN.md +++ b/docs/spec/visual.zh-CN.md @@ -7,7 +7,7 @@ title: 可视化 同时，这是一份动态更新的设计文档，你的阅读和互动正是我们不断前进的动力，[GitHub 反馈地址](https://github.com/antvis/site/issues)。 -# 前端实现 +## 前端实现 [AntV](https://antv.vision/zh) 是基于原生 JavaScipt 封装的可视化组件库，包含高交互基础图表库 G2Plot，流程与关系分析的图表库 G6，专注解决地理空间数据可视分析的 L7，适用于移动端的高性能图表库 F2，欢迎社区贡献其他框架的实现版本。 @@ -17,7 +17,7 @@ title: 可视化 - [L7 地理空间数据可视分析引擎](https://l7.antv.vision/zh) - [F2 移动端可视化方案](https://f2.antv.vision/zh) -# 如何设计 +## 如何设计 ### 了解用户 @@ -141,7 +141,7 @@ AntV 提供了一套默认的图表颜色，包括颜色的用法， 更多交互式图表内容请前往 [ AntV -- 设计语言 -- 交互](https://antv.vision/zh/docs/specification/principles/interact) -# 设计资源 +## 设计资源 - 最新的图表资产已登陆 「AntDesign 官网 -- 资源 -- AntDesign Chart 资源包」 - 也可以访问 [Kitchen](https://kitchen.alipay.com/) 官网下载 Sketch 插件，除了可以直接使用源文件之外，还可以使用 Kitchen「📈图表生成器」，用保真数据动态生成图表。 From 2c6733b0c898db80a8296ae7e881dd132b2831d1 Mon Sep 17 00:00:00 2001 From: Amumu Date: Tue, 14 Apr 2020 12:46:30 +0800 Subject: [PATCH 21/56] add release date (#23229) --- CHANGELOG.en-US.md | 6 ++++++ CHANGELOG.zh-CN.md | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 113c942f20..3af9e70e61 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -17,6 +17,8 @@ timeline: true ## 4.1.3 +`2020-04-13` + - 💄 Adjust Form.Item `label` height style in vertical layout. [#23192](https://github.com/ant-design/ant-design/pull/23192) - 🐞 Fix `Variable is undefined` when importing dark or compact theme and provide a `getThemeVariables` methold for getting theme variables easily. [#23171](https://github.com/ant-design/ant-design/pull/23171) - 🐞 Fix PageHeader style breaks when `title` is too long and improve it's responsive design. [#23133](https://github.com/ant-design/ant-design/pull/23133) @@ -32,6 +34,8 @@ timeline: true ## 4.1.2 +`2020-04-10` + - Menu - 🐞 Fix Menu SubMenu background in dark mode. [#22981](https://github.com/ant-design/ant-design/pull/22981) [@AshoneA](https://github.com/AshoneA) - 🐞 Fix long SubMenu title being overlayed by arrow icon. [#23028](https://github.com/ant-design/ant-design/pull/23028) [@wwyx778](https://github.com/wwyx778) @@ -67,6 +71,8 @@ timeline: true ## 4.1.1 +`2020-04-05` + - 🐞 Fix Tabs panel focus outline style. [#22752](https://github.com/ant-design/ant-design/pull/22752) [@MrHeer](https://github.com/MrHeer) - 🐞 Fix Input affix with popup element can not get click focus. [#22887](https://github.com/ant-design/ant-design/pull/22887) - Table diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 6dedfb97e5..e8977f0586 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -17,6 +17,8 @@ timeline: true ## 4.1.3 +`2020-04-13` + - 💄 调整 Form.Item `label` 在垂直布局下的高度样式。[#23192](https://github.com/ant-design/ant-design/pull/23192) - 🐞 修复引用暗黑或紧凑主题时提示 `Variable is undefined` 的问题，并提供 `getThemeVariables` 方便获取对应主题变量。[#23171](https://github.com/ant-design/ant-design/pull/23171) - 🐞 修复 PageHeader `title` 超长时布局被破坏的问题并优化响应式表现。[#23133](https://github.com/ant-design/ant-design/pull/23133) @@ -32,6 +34,8 @@ timeline: true ## 4.1.2 +`2020-04-10` + - Menu - 🐞 修复暗色 Menu 弹出菜单背景色为白色的问题。[#22981](https://github.com/ant-design/ant-design/pull/22981) [@AshoneA](https://github.com/AshoneA) - 🐞 修复 SubMenu 标题过长而导致被箭头图标部分覆盖的问题。[#23028](https://github.com/ant-design/ant-design/pull/23028) [@wwyx778](https://github.com/wwyx778) @@ -67,6 +71,8 @@ timeline: true ## 4.1.1 +`2020-04-05` + - 🐞 移除 Tabs 的内容区域的 focus 蓝色轮廓线。[#22752](https://github.com/ant-design/ant-design/pull/22752) [@MrHeer](https://github.com/MrHeer) - 🐞 修复 Input 前后缀添加弹出元素不能点击获得焦点的问题。[#22887](https://github.com/ant-design/ant-design/pull/22887) - Table From c338569cff04bb675e88c2ea07a0df40554aa4a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 14 Apr 2020 15:41:15 +0800 Subject: [PATCH 22/56] docs: Update Form required desc (#23238) * Update index.zh-CN.md * Update index.en-US.md --- components/form/index.en-US.md | 2 +- components/form/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index be6ccf348d..35b5de1dcf 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -82,7 +82,7 @@ Form field component for data bidirectional binding, validation, layout, and so | labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `
    • `. You can set `labelCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - | | | name | Field name, support array | [NamePath](#NamePath) | - | | | normalize | Normalize value from component value before passing to Form instance | (value, prevValue, prevValues) => any | - | | -| required | Whether provided or not, it will be generated by the validation rule | boolean | false | | +| required | Display required style. It will be generated by the validation rule | boolean | false | | | rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)[] | - | | | shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | | | trigger | When to collect the value of children node | string | onChange | | diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 2c12e97c81..ca103c5828 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -83,7 +83,7 @@ const validateMessages = { | labelCol | `label` 标签布局，同 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | | | name | 字段名，支持数组 | [NamePath](#NamePath) | - | | | normalize | 组件获取值后进行转换，再放入 Form 中 | (value, prevValue, prevValues) => any | - | | -| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | | +| required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | | | rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)[] | - | | | shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | | | trigger | 设置收集字段值变更的时机 | string | onChange | | From 1855fef43758d3e68b1d77eb8b6b077be3edadbd Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 14 Apr 2020 16:42:39 +0800 Subject: [PATCH 23/56] fix: fix select rtl (#23235) * fix: fix select rtl * fix lint Co-Authored-By: Amumu Co-authored-by: Amumu --- components/select/style/rtl.less | 3 +-- site/theme/template/Layout/Header/index.tsx | 14 +++++++++++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/components/select/style/rtl.less b/components/select/style/rtl.less index 8400c73253..1c7269cfd2 100644 --- a/components/select/style/rtl.less +++ b/components/select/style/rtl.less @@ -28,8 +28,7 @@ // ========================== Popup ========================== &-dropdown { &-rtl { - direction: ltr; - text-align: right; + direction: rtl; } } diff --git a/site/theme/template/Layout/Header/index.tsx b/site/theme/template/Layout/Header/index.tsx index 70b9d605e1..4ccdc0ca72 100644 --- a/site/theme/template/Layout/Header/index.tsx +++ b/site/theme/template/Layout/Header/index.tsx @@ -40,7 +40,7 @@ function initDocSearch(locale: string) { transformData(hits: { url: string }[]) { hits.forEach(hit => { hit.url = hit.url.replace('ant.design', window.location.host); - hit.url = hit.url.replace('https:', window.location.protocol) + hit.url = hit.url.replace('https:', window.location.protocol); }); return hits; }, @@ -131,6 +131,17 @@ class Header extends React.Component { return 'LTR'; }; + getDropdownStyle = (): React.CSSProperties => { + const { direction } = this.context; + if (direction === 'rtl') { + return { + direction: 'ltr', + textAlign: 'right', + }; + } + return {}; + }; + onMenuVisibleChange = (visible: boolean) => { this.setState({ menuVisible: visible, @@ -233,6 +244,7 @@ class Header extends React.Component { size="small" defaultValue={antdVersion} onChange={this.handleVersionChange} + dropdownStyle={this.getDropdownStyle()} getPopupContainer={trigger => trigger.parentNode} > {versionOptions} From 58c6900175939c4bbf9a2481109cd9708ade50e7 Mon Sep 17 00:00:00 2001 From: Evan Charlton Date: Tue, 14 Apr 2020 10:48:23 +0200 Subject: [PATCH 24/56] chore: Fix console warning typo (validate -> valid) (#23240) Clean up the typos in the helpful console warning messages which get emitted if the incorrect prop is passed to certain components. --- components/checkbox/Checkbox.tsx | 2 +- components/checkbox/__tests__/checkbox.test.js | 2 +- components/switch/__tests__/index.test.js | 7 ++----- components/switch/index.tsx | 2 +- components/upload/Upload.tsx | 2 +- components/upload/__tests__/upload.test.js | 2 +- scripts/previewEditor/umi.js | 2 +- 7 files changed, 8 insertions(+), 11 deletions(-) diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx index 6628a77216..6c4cac4843 100644 --- a/components/checkbox/Checkbox.tsx +++ b/components/checkbox/Checkbox.tsx @@ -63,7 +63,7 @@ class Checkbox extends React.PureComponent { warning( 'checked' in this.props || this.context || !('value' in this.props), 'Checkbox', - '`value` is not validate prop, do you mean `checked`?', + '`value` is not a valid prop, do you mean `checked`?', ); } diff --git a/components/checkbox/__tests__/checkbox.test.js b/components/checkbox/__tests__/checkbox.test.js index e9d5437d01..c5e45181cd 100644 --- a/components/checkbox/__tests__/checkbox.test.js +++ b/components/checkbox/__tests__/checkbox.test.js @@ -30,7 +30,7 @@ describe('Checkbox', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); mount(); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Checkbox] `value` is not validate prop, do you mean `checked`?', + 'Warning: [antd: Checkbox] `value` is not a valid prop, do you mean `checked`?', ); errorSpy.mockRestore(); }); diff --git a/components/switch/__tests__/index.test.js b/components/switch/__tests__/index.test.js index 2e1c492bb5..dc9f9c575c 100644 --- a/components/switch/__tests__/index.test.js +++ b/components/switch/__tests__/index.test.js @@ -13,10 +13,7 @@ describe('Switch', () => { it('should has click wave effect', async () => { const wrapper = mount(); - wrapper - .find('.ant-switch') - .getDOMNode() - .click(); + wrapper.find('.ant-switch').getDOMNode().click(); await new Promise(resolve => setTimeout(resolve, 0)); expect(wrapper.render()).toMatchSnapshot(); }); @@ -27,7 +24,7 @@ describe('Switch', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); mount(); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Switch] `value` is not validate prop, do you mean `checked`?', + 'Warning: [antd: Switch] `value` is not a valid prop, do you mean `checked`?', ); errorSpy.mockRestore(); }); diff --git a/components/switch/index.tsx b/components/switch/index.tsx index 3209881bd7..0139b2ef3d 100755 --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -41,7 +41,7 @@ export default class Switch extends React.Component { warning( 'checked' in props || !('value' in props), 'Switch', - '`value` is not validate prop, do you mean `checked`?', + '`value` is not a valid prop, do you mean `checked`?', ); } diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index a6c09ba823..c306e559ec 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -64,7 +64,7 @@ class Upload extends React.Component { warning( 'fileList' in props || !('value' in props), 'Upload', - '`value` is not validate prop, do you mean `fileList`?', + '`value` is not a valid prop, do you mean `fileList`?', ); } diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js index 73ad951cdf..d2d00eb34f 100644 --- a/components/upload/__tests__/upload.test.js +++ b/components/upload/__tests__/upload.test.js @@ -495,7 +495,7 @@ describe('Upload', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); mount(); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Upload] `value` is not validate prop, do you mean `fileList`?', + 'Warning: [antd: Upload] `value` is not a valid prop, do you mean `fileList`?', ); errorSpy.mockRestore(); }); diff --git a/scripts/previewEditor/umi.js b/scripts/previewEditor/umi.js index f82a4e0054..b2b910b219 100644 --- a/scripts/previewEditor/umi.js +++ b/scripts/previewEditor/umi.js @@ -34843,7 +34843,7 @@ lt( 'checked' in this.props || this.context || !('value' in this.props), 'Checkbox', - '`value` is not validate prop, do you mean `checked`?', + '`value` is not a valid prop, do you mean `checked`?', ); }, }, From e3d2754b1d03e921f79e5c92785d0d89aeff8a70 Mon Sep 17 00:00:00 2001 From: Tanmoy Bhowmik Date: Tue, 14 Apr 2020 14:19:58 +0530 Subject: [PATCH 25/56] fix: Fix popupClassName prop in timepicker (#23214) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(time-picker): combine dropdownClassName and popupClassName prop * test(time-picker): add test for popupClassName and dropdownClassName prop * chore(time-picker): add demo for popupClassName prop * test(time-picker): remove rc-picker dependency * doc(time-picker): change default prop of popupClassName to undefined * fix(time-picker): remove the use of dropdownClassName * Apply suggestions from code review Co-authored-by: 偏右 --- .../__tests__/__snapshots__/demo.test.js.snap | 45 +++++++++++++++++++ .../time-picker/__tests__/index.test.js | 11 +++++ components/time-picker/demo/colored-popup.md | 39 ++++++++++++++++ components/time-picker/index.en-US.md | 2 +- components/time-picker/index.tsx | 4 +- components/time-picker/index.zh-CN.md | 2 +- 6 files changed, 100 insertions(+), 3 deletions(-) create mode 100644 components/time-picker/demo/colored-popup.md diff --git a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap index 0788463745..142fc202c4 100644 --- a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap +++ b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap @@ -222,6 +222,51 @@ exports[`renders ./components/time-picker/demo/basic.md correctly 1`] = ` `; +exports[`renders ./components/time-picker/demo/colored-popup.md correctly 1`] = ` +
    +
    + + + + + + +
    +
    +`; + exports[`renders ./components/time-picker/demo/disabled.md correctly 1`] = `
    { ); expect(wrapper.render()).toMatchSnapshot(); }); + + it('should pass popupClassName prop to Picker as dropdownClassName prop', () => { + const popupClassName = 'myCustomClassName'; + const wrapper = mount( + , + ); + expect(wrapper.find('Picker').prop('dropdownClassName')).toEqual(popupClassName); + }); }); diff --git a/components/time-picker/demo/colored-popup.md b/components/time-picker/demo/colored-popup.md new file mode 100644 index 0000000000..836a9346ac --- /dev/null +++ b/components/time-picker/demo/colored-popup.md @@ -0,0 +1,39 @@ +--- +order: 9 +title: + zh-CN: 色付きポップアップ + en-US: Colored Popup +debug: true +--- + +## zh-CN + +カスタムクラスを `TimePicker`ポップアップに渡す + +## en-US + +Passing custom class to `TimePicker` popup + +```jsx +import { TimePicker } from 'antd'; +import moment from 'moment'; + +const onChange = (time, timeString) => { + console.log(time, timeString); +}; + +ReactDOM.render( + , + mountNode, +); +``` + +```css +.myCustomClassName .ant-picker-time-panel-cell-inner { + color: red !important; +} +``` diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index df07827b3e..4b4a19df73 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -41,7 +41,7 @@ import moment from 'moment'; | minuteStep | interval between minutes in picker | number | 1 | | | open | whether to popup panel | boolean | false | | | placeholder | display when there's no value | string | "Select a time" | | -| popupClassName | className of panel | string | '' | | +| popupClassName | className of panel | string | - | | | popupStyle | style of panel | object | - | | | secondStep | interval between seconds in picker | number | 1 | | | suffixIcon | The custom suffix icon | ReactNode | - | | diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index 8219b50327..210230fa78 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -20,10 +20,11 @@ const RangePicker = React.forwardRef((props, ref) => export interface TimePickerProps extends Omit, 'picker'> { addon?: () => React.ReactNode; + popupClassName?: string; } const TimePicker = React.forwardRef( - ({ addon, renderExtraFooter, ...restProps }, ref) => { + ({ addon, renderExtraFooter, popupClassName, ...restProps }, ref) => { const internalRenderExtraFooter = React.useMemo(() => { if (renderExtraFooter) { return renderExtraFooter; @@ -42,6 +43,7 @@ const TimePicker = React.forwardRef( return ( Date: Tue, 14 Apr 2020 17:25:29 +0800 Subject: [PATCH 26/56] :up: upgrade intersection-observer --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b427f03b94..4d36b586cc 100644 --- a/package.json +++ b/package.json @@ -202,7 +202,7 @@ "ignore-emit-webpack-plugin": "^2.0.2", "immutability-helper": "^3.0.0", "inquirer": "^7.1.0", - "intersection-observer": "^0.7.0", + "intersection-observer": "^0.8.0", "jest": "^25.1.0", "jquery": "^3.4.1", "jsdom": "^16.0.0", From 54b11b2ae3fa12f1e6af37562c70c8aebc029dc3 Mon Sep 17 00:00:00 2001 From: Christian Fleschhut Date: Tue, 14 Apr 2020 12:20:14 +0200 Subject: [PATCH 27/56] =?UTF-8?q?docs(Empty=20component):=20=F0=9F=93=96?= =?UTF-8?q?=20Fix=20typo=20in=20image=20prop=20description=20(#23251)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/empty/index.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/empty/index.en-US.md b/components/empty/index.en-US.md index 9dfada8f30..649880ac7a 100644 --- a/components/empty/index.en-US.md +++ b/components/empty/index.en-US.md @@ -24,7 +24,7 @@ Empty state placeholder. | --- | --- | --- | --- | --- | | description | Customize description | string \| ReactNode | - | | | imageStyle | style of image | CSSProperties | - | | -| image | Customize image. Will tread as image url when string provided. | string \| ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | | +| image | Customize image. Will treat as image url when string provided. | string \| ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | | ## Built-in images From 4ad5830eecfb87471cd8ac588c5d992862b70770 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Tue, 14 Apr 2020 18:20:24 +0800 Subject: [PATCH 28/56] fix: Select caret missing in Collapse (#23250) close #23059 close #23175 --- components/select/style/multiple.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/select/style/multiple.less b/components/select/style/multiple.less index 229ac582e8..62ab69beac 100644 --- a/components/select/style/multiple.less +++ b/components/select/style/multiple.less @@ -102,6 +102,7 @@ &-input { width: 100%; + min-width: 3px; } &-mirror { @@ -169,7 +170,8 @@ left: @input-padding-horizontal-sm; } // https://github.com/ant-design/ant-design/issues/22906 - .@{select-prefix-cls}-selection-search:first-child .@{select-prefix-cls}-selection-search-input { + .@{select-prefix-cls}-selection-search:first-child + .@{select-prefix-cls}-selection-search-input { margin-left: 3px; } } From efd25100a5c810e5469b8427ff975b76408fcabd Mon Sep 17 00:00:00 2001 From: zefeng Date: Tue, 14 Apr 2020 19:17:42 +0800 Subject: [PATCH 29/56] fix: tree-select render blank in compact mode (#23231) --- components/tree-select/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 73cea3a5b2..4c5e27cc40 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -87,7 +87,7 @@ class TreeSelect extends React.Component, {}> { treeCheckable, multiple, listHeight = 256, - listItemHeight = 32, + listItemHeight = 26, notFoundContent, switcherIcon, treeLine, From ac5050f4edbddba9315df89c633a72adbdcfb063 Mon Sep 17 00:00:00 2001 From: Dongcheng Wang Date: Tue, 14 Apr 2020 19:33:49 +0800 Subject: [PATCH 30/56] doc(slider): value & defaultValue not consistent with definition (#23252) --- components/slider/index.en-US.md | 4 ++-- components/slider/index.zh-CN.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md index f8f1656428..265891a70f 100644 --- a/components/slider/index.en-US.md +++ b/components/slider/index.en-US.md @@ -15,7 +15,7 @@ To input a value in a range. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | autoFocus | get focus when component mounted | boolean | false | | -| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or \[0, 0] | | +| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|\[number, number] | 0 or \[0, 0] | | | disabled | If true, the slider will not be interactable. | boolean | false | | | dots | Whether the thumb can drag over tick only. | boolean | false | | | included | Make effect when `marks` not null, `true` means containment and `false` means coordinative | boolean | true | | @@ -26,7 +26,7 @@ To input a value in a range. | reverse | reverse the component | boolean | false | | | step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 | | | tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY | | -| value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | | +| value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|\[number, number] | | | vertical | If true, the slider will be vertical. | Boolean | false | | | onAfterChange | Fire when `onmouseup` is fired. | Function(value) | NOOP | | | onChange | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP | | diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md index e294e2f94d..c0c5b6e5d2 100644 --- a/components/slider/index.zh-CN.md +++ b/components/slider/index.zh-CN.md @@ -16,7 +16,7 @@ title: Slider | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | allowClear | 支持清除, 单选模式有效 | boolean | false | | -| defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | 0 or \[0, 0] | | +| defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|\[number, number] | 0 or \[0, 0] | | | disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false | | | dots | 是否只能拖拽到刻度上 | boolean | false | | | included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | | @@ -27,7 +27,7 @@ title: Slider | reverse | 反向坐标轴 | boolean | false | | | step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 | | | tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY | | -| value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | | | +| value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|\[number, number] | | | | vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false | | | onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP | | | onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP | | From d3b367ad043bc40e89c1d3935c0de1bde694ffaf Mon Sep 17 00:00:00 2001 From: myeunhyuk <39618466+myeunhyuk@users.noreply.github.com> Date: Tue, 14 Apr 2020 21:06:13 +0800 Subject: [PATCH 31/56] docs: Update resources page sketch file (#23253) --- docs/resources.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/resources.zh-CN.md b/docs/resources.zh-CN.md index c2bdb48edc..afa0316762 100644 --- a/docs/resources.zh-CN.md +++ b/docs/resources.zh-CN.md @@ -53,7 +53,7 @@ toc: false - 全新 Chart 组件包 - https://gw.alipayobjects.com/zos/basement_prod/a9dc586a-fe0a-4c7d-ab4f-f5ed779b963d.svg - 桌面组件 Chart 模板包 - - https://gw.alipayobjects.com/os/basement_prod/862ee74f-4ac5-482c-b1ae-3165684cedbe.sketch + - https://gw.alipayobjects.com/os/bmw-prod/704968a5-2641-484e-9f65-c2735b2c0287.sketch ## 文章 From 178ccbee6aecb63e69c871bbd0f4de1b6a6c63f0 Mon Sep 17 00:00:00 2001 From: myeunhyuk <39618466+myeunhyuk@users.noreply.github.com> Date: Tue, 14 Apr 2020 21:06:41 +0800 Subject: [PATCH 32/56] Update resources.en-US.md (#23254) --- docs/resources.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/resources.en-US.md b/docs/resources.en-US.md index 21bad5df35..f65b9ce34b 100644 --- a/docs/resources.en-US.md +++ b/docs/resources.en-US.md @@ -53,7 +53,7 @@ Please find below some of the design resources and tools about Ant Design that w - Ant Design Chart - https://gw.alipayobjects.com/zos/basement_prod/a9dc586a-fe0a-4c7d-ab4f-f5ed779b963d.svg - Sketch Symbols for Chart - - https://gw.alipayobjects.com/os/basement_prod/862ee74f-4ac5-482c-b1ae-3165684cedbe.sketch + - https://gw.alipayobjects.com/os/bmw-prod/704968a5-2641-484e-9f65-c2735b2c0287.sketch ## Articles From 02d729257699a053178d1322541afce894af98f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 14 Apr 2020 23:04:23 +0800 Subject: [PATCH 33/56] fix: Input inline allowClear style (#23259) * fix: Input allow clear icon * update test case * update snapshot --- .../__tests__/__snapshots__/demo.test.js.snap | 45 ++++- components/input/ClearableLabeledInput.tsx | 22 ++- .../__tests__/__snapshots__/demo.test.js.snap | 45 ++++- .../__snapshots__/index.test.js.snap | 168 +++++++++++++++++- .../__snapshots__/textarea.test.js.snap | 147 +++++++++++++++ components/input/__tests__/index.test.js | 57 ++---- components/input/__tests__/textarea.test.js | 4 +- components/input/style/allow-clear.less | 4 + 8 files changed, 427 insertions(+), 65 deletions(-) diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index dd90f572bb..1b0c562684 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -6206,7 +6206,29 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = ` /> + > + + + +
    + + + { renderClearIcon(prefixCls: string) { const { allowClear, value, disabled, readOnly, inputType, handleReset } = this.props; - if ( - !allowClear || - disabled || - readOnly || - value === undefined || - value === null || - value === '' - ) { + + if (!allowClear) { return null; } + + const needClear = !disabled && !readOnly && value; const className = inputType === ClearableInputType[0] ? `${prefixCls}-textarea-clear-icon` : `${prefixCls}-clear-icon`; - return ; + return ( + + ); } renderSuffix(prefixCls: string) { diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap index 89ad821fa8..dbac945a5f 100644 --- a/components/input/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input/__tests__/__snapshots__/demo.test.js.snap @@ -960,7 +960,29 @@ exports[`renders ./components/input/demo/allowClear.md correctly 1`] = ` /> + > + + + +

    @@ -971,6 +993,27 @@ exports[`renders ./components/input/demo/allowClear.md correctly 1`] = ` class="ant-input" placeholder="textarea with clear icon" /> + + +     `; diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap index 95a6e2fd0f..35c53af922 100644 --- a/components/input/__tests__/__snapshots__/index.test.js.snap +++ b/components/input/__tests__/__snapshots__/index.test.js.snap @@ -48,7 +48,29 @@ exports[`Input allowClear should change type when click 2`] = ` /> + > + + + + `; @@ -63,7 +85,29 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul /> + > + + + + `; @@ -78,7 +122,29 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul /> + > + + + + `; @@ -93,7 +159,29 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul /> + > + + + + `; @@ -108,7 +196,29 @@ exports[`Input allowClear should not show icon if value is undefined, null or em /> + > + + + + `; @@ -123,7 +233,29 @@ exports[`Input allowClear should not show icon if value is undefined, null or em /> + > + + + + `; @@ -138,7 +270,29 @@ exports[`Input allowClear should not show icon if value is undefined, null or em /> + > + + + + `; diff --git a/components/input/__tests__/__snapshots__/textarea.test.js.snap b/components/input/__tests__/__snapshots__/textarea.test.js.snap index a1a751f97e..b4cdb5f69b 100644 --- a/components/input/__tests__/__snapshots__/textarea.test.js.snap +++ b/components/input/__tests__/__snapshots__/textarea.test.js.snap @@ -40,6 +40,27 @@ exports[`TextArea allowClear should change type when click 2`] = `