diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx index d67fa4ca52..9b62a90e80 100644 --- a/.dumi/pages/theme-editor/index.tsx +++ b/.dumi/pages/theme-editor/index.tsx @@ -44,11 +44,6 @@ const CustomTheme = () => { const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME); if (storedConfig) { const themeConfig = JSON.parse(storedConfig); - const originThemeConfig = { - json: themeConfig, - text: undefined, - }; - setThemeConfigContent(originThemeConfig); setTheme(themeConfig); } }, []); diff --git a/.dumi/theme/builtins/TokenCompare/index.tsx b/.dumi/theme/builtins/TokenCompare/index.tsx index a44ffcda8d..9ae37389f0 100644 --- a/.dumi/theme/builtins/TokenCompare/index.tsx +++ b/.dumi/theme/builtins/TokenCompare/index.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { TinyColor } from '@ctrl/tinycolor'; import { createStyles } from 'antd-style'; import tokenMeta from 'antd/es/version/token-meta.json'; -import { theme, Space } from 'antd'; +import { Space, theme } from 'antd'; import useLocale from '../../../hooks/useLocale'; const useStyle = createStyles(({ token, css }) => { @@ -29,7 +29,7 @@ const useStyle = createStyles(({ token, css }) => { display: flex; align-items: center; justify-content: center; - + color: rgba(0,0,0,0.88); border-right: 1px solid rgba(0, 0, 0, 0.1); `, diff --git a/.dumi/theme/common/Color/ColorPaletteTool.tsx b/.dumi/theme/common/Color/ColorPaletteTool.tsx index 5f9b4319eb..2c2de6d3f9 100644 --- a/.dumi/theme/common/Color/ColorPaletteTool.tsx +++ b/.dumi/theme/common/Color/ColorPaletteTool.tsx @@ -3,26 +3,44 @@ import React, { useMemo, useState } from 'react'; import { ColorPicker } from 'antd'; import type { Color } from 'antd/es/color-picker'; import ColorPatterns from './ColorPatterns'; +import useLocale from '../../../hooks/useLocale'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 +const locales = { + cn: { + saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`, + brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`, + }, + en: { + saturation: (s: string) => + `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`, + brightness: (b: string) => + `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`, + }, +}; + const ColorPaletteTool: React.FC = () => { const [primaryColor, setPrimaryColor] = useState('#1890ff'); const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + + const [locale] = useLocale(locales); + const handleChangeColor = (color: Color, hex: string) => { setPrimaryColor(hex); setPrimaryColorInstance(color); }; + const colorValidation = useMemo(() => { let text = ''; if (primaryColorInstance) { - const { s, b } = primaryColorInstance.toHsb(); + const { s, b } = primaryColorInstance.toHsb() || {}; if (s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`; + text += locale.saturation((s * 100).toFixed(2)); } if (b * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`; + text += locale.brightness((s * 100).toFixed(2)); } } return {text.trim()}; @@ -32,7 +50,9 @@ const ColorPaletteTool: React.FC = () => {
-
{ColorPatterns({ color: primaryColor })}
+
+ +
diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx index 2c81fa008a..59400cfae1 100644 --- a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx +++ b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx @@ -2,14 +2,30 @@ import { FormattedMessage } from 'dumi'; import React, { useMemo, useState } from 'react'; import { Col, ColorPicker, Row } from 'antd'; import ColorPatterns from './ColorPatterns'; +import useLocale from '../../../hooks/useLocale'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 +const locales = { + cn: { + saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`, + brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`, + }, + en: { + saturation: (s: string) => + `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`, + brightness: (b: string) => + `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`, + }, +}; + const ColorPaletteTool: React.FC = () => { const [primaryColor, setPrimaryColor] = useState('#1890ff'); const [backgroundColor, setBackgroundColor] = useState('#141414'); - const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + + const [locale] = useLocale(locales); const handleChangeColor = (color: Color, hex: string) => { setPrimaryColor(hex); @@ -23,12 +39,12 @@ const ColorPaletteTool: React.FC = () => { const colorValidation = useMemo(() => { let text = ''; if (primaryColorInstance) { - const { s, b } = primaryColorInstance.toHsb(); + const { s, b } = primaryColorInstance.toHsb() || {}; if (s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`; + text += locale.saturation((s * 100).toFixed(2)); } if (b * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`; + text += locale.brightness((s * 100).toFixed(2)); } } return ( @@ -41,7 +57,7 @@ const ColorPaletteTool: React.FC = () => { return (
- {ColorPatterns({ color: primaryColor, dark: true, backgroundColor })} +
diff --git a/.dumi/theme/common/Color/ColorPatterns.tsx b/.dumi/theme/common/Color/ColorPatterns.tsx index d40d88a0c9..080b5651ce 100644 --- a/.dumi/theme/common/Color/ColorPatterns.tsx +++ b/.dumi/theme/common/Color/ColorPatterns.tsx @@ -9,11 +9,15 @@ interface ColorPatternsProps { backgroundColor?: string; } -const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => { +const ColorPatterns: React.FC = ({ color, dark, backgroundColor }) => { const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {}); - return uniq(colors).map((colorString, i) => ( - - )); + return ( + <> + {uniq(colors).map((colorString, i) => ( + + ))} + + ); }; export default ColorPatterns; diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx index f65a6a3e23..6b34e18ed5 100644 --- a/.dumi/theme/slots/Footer/index.tsx +++ b/.dumi/theme/slots/Footer/index.tsx @@ -102,7 +102,7 @@ const Footer: React.FC = () => { items: [ { title: 'Ant Design Charts', - url: 'https://charts.ant.design', + url: isZhCN ? 'https://ant-design-charts.antgroup.com' : 'https://charts.ant.design', openExternal: true, }, { @@ -117,12 +117,12 @@ const Footer: React.FC = () => { }, { title: 'Ant Design Mobile', - url: 'https://mobile.ant.design', + url: isZhCN ? 'https://ant-design-mobile.antgroup.com/zh' : 'https://mobile.ant.design', openExternal: true, }, { title: 'Ant Design Mini', - url: 'https://mini.ant.design', + url: isZhCN ? 'https://ant-design-mini.antgroup.com/' : 'https://mini.ant.design', openExternal: true, }, { @@ -338,7 +338,7 @@ const Footer: React.FC = () => { /> ), title: 'AntV', - url: 'https://antv.vision', + url: 'https://antv.antgroup.com', description: , openExternal: true, }, diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx index 6bdb4b5012..597dc1fd31 100644 --- a/.dumi/theme/slots/Header/Navigation.tsx +++ b/.dumi/theme/slots/Header/Navigation.tsx @@ -30,7 +30,8 @@ const locales = { // ============================= Style ============================= const useStyle = createStyles(({ token }) => { - const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary } = token; + const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary, colorText } = + token; return { nav: css` @@ -56,6 +57,17 @@ const useStyle = createStyles(({ token }) => { left: 12px; border-width: ${menuItemBorder}px; } + + a { + color: ${colorText}; + } + + a:before { + position: absolute; + inset: 0; + background-color: transparent; + content: ""; + } } & ${antCls}-menu-submenu-title ${iconCls} { @@ -97,7 +109,6 @@ const useStyle = createStyles(({ token }) => { export interface NavigationProps extends SharedProps { isMobile: boolean; - isClient: boolean; responsive: null | 'narrow' | 'crowded'; directionText: string; onLangChange: () => void; @@ -106,7 +117,6 @@ export interface NavigationProps extends SharedProps { export default ({ isZhCN, - isClient, isMobile, responsive, directionText, @@ -224,16 +234,21 @@ export default ({ ), key: 'docs/resources', }, - isZhCN && - isClient && - window.location.host !== 'ant-design.antgroup.com' && - window.location.host !== 'ant-design.gitee.io' + isZhCN ? { - label: '国内镜像', + label: ( + + 国内镜像 + + ), key: 'mirror', children: [ { - label: 官方镜像, + label: ( + + 官方镜像 + + ), icon: ( logoGitee 镜像, + label: ( + + Gitee 镜像 + + ), icon: ( gitee { - const [isClient, setIsClient] = React.useState(false); const [, lang] = useLocale(); const { pkg } = useSiteData(); @@ -166,7 +165,6 @@ const Header: React.FC = () => { }, [location]); useEffect(() => { - setIsClient(typeof window !== 'undefined'); onWindowResize(); window.addEventListener('resize', onWindowResize); pingTimer.current = ping((status) => { @@ -273,7 +271,6 @@ const Header: React.FC = () => { const sharedProps: SharedProps = { isZhCN, isRTL, - isClient, }; const navigationNode = ( diff --git a/.dumi/theme/slots/Header/interface.ts b/.dumi/theme/slots/Header/interface.ts index 4c88247873..8a0755c1bf 100644 --- a/.dumi/theme/slots/Header/interface.ts +++ b/.dumi/theme/slots/Header/interface.ts @@ -1,5 +1,4 @@ export interface SharedProps { isZhCN: boolean; isRTL: boolean; - isClient: boolean; } diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap index a0f571456c..e59a79d340 100644 --- a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx extend context correctly 1`] = data-show="true" title="1" > - + - 1 + + 1 + - +
@@ -531,16 +533,18 @@ Array [ data-show="true" title="1" > - + - 1 + + 1 + - +
diff --git a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap index 6f87ea0a1e..9c10e9e3a4 100644 --- a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap @@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx correctly 1`] = ` data-show="true" title="1" > - + - 1 + + 1 + - +
@@ -438,16 +440,18 @@ Array [ data-show="true" title="1" > - + - 1 + + 1 + - + diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx index a71762ac2c..79414bcde6 100644 --- a/components/badge/ScrollNumber.tsx +++ b/components/badge/ScrollNumber.tsx @@ -51,15 +51,19 @@ const ScrollNumber = React.forwardRef((props, re if (count && Number(count) % 1 === 0) { const numberList = String(count).split(''); - numberNodes = numberList.map((num, i) => ( - - )); + numberNodes = ( + + {numberList.map((num, i) => ( + + ))} + + ); } // allow specify the border diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap index fc77b1a715..14d9f613f4 100644 --- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -24,16 +24,18 @@ exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] = data-show="true" title="5" > - + - 5 + + 5 + - + @@ -136,16 +138,18 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] = data-show="true" title="5" > - + - 5 + + 5 + - + @@ -655,26 +659,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -695,26 +701,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -735,26 +743,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -775,26 +785,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -815,26 +827,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -855,26 +869,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -895,26 +911,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -935,26 +953,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -975,26 +995,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1015,26 +1037,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1055,26 +1079,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1095,26 +1121,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1135,26 +1163,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1610,16 +1640,18 @@ exports[`renders components/badge/demo/link.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1660,16 +1692,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1693,16 +1727,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1726,16 +1762,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1760,16 +1798,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` style="background: rgb(250, 84, 28);" title="5" > - + - 5 + + 5 + - + @@ -2035,26 +2075,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx extend context correctly 1 style="background: rgb(250, 173, 20);" title="11" > - + - 1 + + 1 + - - - 1 + + 1 + - + @@ -2070,26 +2112,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx extend context correctly 1 data-show="true" title="25" > - + - 2 + + 2 + - - - 5 + + 5 + - + @@ -2164,16 +2208,18 @@ exports[`renders components/badge/demo/offset.tsx extend context correctly 1`] = style="margin-top: 10px; right: -10px;" title="5" > - + - 5 + + 5 + - + `; @@ -2204,26 +2250,28 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`] data-show="true" title="99" > - + - 9 + + 9 + - - - 9 + + 9 + - + @@ -2845,16 +2893,18 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -2877,16 +2927,18 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -3078,16 +3130,18 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] = data-show="true" title="Custom hover text" > - + - 5 + + 5 + - + @@ -3110,26 +3164,28 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] = data-show="true" title="Negative" > - + - - + + - + - - - 5 + + 5 + - + diff --git a/components/badge/__tests__/__snapshots__/demo.test.tsx.snap b/components/badge/__tests__/__snapshots__/demo.test.tsx.snap index 372876d983..02bafea726 100644 --- a/components/badge/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/badge/__tests__/__snapshots__/demo.test.tsx.snap @@ -24,16 +24,18 @@ exports[`renders components/badge/demo/basic.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -134,16 +136,18 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -650,26 +654,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -690,26 +696,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -730,26 +738,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -770,26 +780,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -810,26 +822,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -850,26 +864,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -890,26 +906,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -930,26 +948,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -970,26 +990,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1010,26 +1032,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1050,26 +1074,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1090,26 +1116,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1130,26 +1158,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1599,16 +1629,18 @@ exports[`renders components/badge/demo/link.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1647,16 +1679,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1680,16 +1714,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1713,16 +1749,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1747,16 +1785,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` style="background:#fa541c" title="5" > - + - 5 + + 5 + - + @@ -2020,26 +2060,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx correctly 1`] = ` style="background:#faad14" title="11" > - + - 1 + + 1 + - - - 1 + + 1 + - + @@ -2055,26 +2097,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx correctly 1`] = ` data-show="true" title="25" > - + - 2 + + 2 + - - - 5 + + 5 + - + @@ -2147,16 +2191,18 @@ exports[`renders components/badge/demo/offset.tsx correctly 1`] = ` style="margin-top:10px;right:-10px" title="5" > - + - 5 + + 5 + - + `; @@ -2185,26 +2231,28 @@ exports[`renders components/badge/demo/overflow.tsx correctly 1`] = ` data-show="true" title="99" > - + - 9 + + 9 + - - - 9 + + 9 + - + @@ -2820,16 +2868,18 @@ exports[`renders components/badge/demo/size.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -2852,16 +2902,18 @@ exports[`renders components/badge/demo/size.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -3049,16 +3101,18 @@ exports[`renders components/badge/demo/title.tsx correctly 1`] = ` data-show="true" title="Custom hover text" > - + - 5 + + 5 + - + @@ -3081,26 +3135,28 @@ exports[`renders components/badge/demo/title.tsx correctly 1`] = ` data-show="true" title="Negative" > - + - - + + - + - - - 5 + + 5 + - + diff --git a/components/badge/__tests__/__snapshots__/index.test.tsx.snap b/components/badge/__tests__/__snapshots__/index.test.tsx.snap index 05ea8ed2e0..ca44c0f66b 100644 --- a/components/badge/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/badge/__tests__/__snapshots__/index.test.tsx.snap @@ -11,16 +11,18 @@ exports[`Badge render Badge status/color when contains children 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + @@ -79,36 +85,38 @@ exports[`Badge render correct with negative number 1`] = ` data-show="true" title="-10" > - + - - + + - + - - - 1 + + 1 + - - - 0 + + 0 + - + - + - - + + - + - - - 1 + + 1 + - - - 0 + + 0 + - + @@ -176,16 +186,18 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio style="margin-top: 10px; left: 10px;" title="5" > - + - 5 + + 5 + - + `; @@ -200,16 +212,18 @@ exports[`Badge should be compatible with borderColor style 1`] = ` style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9; box-shadow: 0 0 0 1px #d9d9d9 inset;" title="4" > - + - 4 + + 4 + - + `; @@ -274,86 +288,88 @@ exports[`Badge should render when count is changed 1`] = ` data-show="true" title="10" > - + - 1 - - - - - 0 + + 1 + - 1 + + 0 + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + + + 0 + - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - - - 8 - - - 9 - - - 0 - - + `; @@ -367,86 +383,88 @@ exports[`Badge should render when count is changed 2`] = ` data-show="true" title="11" > - + - 1 - - - - - 1 + + 1 + - 2 + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + + + 0 + + + 1 + - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - - - 8 - - - 9 - - - 0 - - - 1 - - + `; @@ -460,27 +478,29 @@ exports[`Badge should render when count is changed 3`] = ` data-show="true" title="11" > - + - 1 + + 1 + - - - 1 + + 1 + - + `; @@ -508,26 +528,28 @@ exports[`Badge should render when count is changed 5`] = ` data-show="true" title="10" > - + - 1 + + 1 + - - - 0 + + 0 + - + `; @@ -541,76 +563,78 @@ exports[`Badge should render when count is changed 6`] = ` data-show="true" title="9" > - + - 9 + + 9 + + + 0 + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + - - 0 - - - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - - - 8 - - - 9 - - + `; diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts index 9ed0afaef9..9486be6989 100644 --- a/components/badge/style/index.ts +++ b/components/badge/style/index.ts @@ -175,6 +175,10 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO [`${componentCls}-multiple-words`]: { padding: `0 ${token.paddingXS}px`, + + bdi: { + unicodeBidi: 'plaintext', + }, }, [`${componentCls}-dot`]: { diff --git a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap index 410db2eea5..69a258a0a8 100644 --- a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -9282,7 +9282,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor - This is very long usual event。。.... + This is very long usual event...... diff --git a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap index 8c6ffc118b..6d3ec9a862 100644 --- a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap @@ -5418,7 +5418,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = ` - This is very long usual event。。.... + This is very long usual event...... diff --git a/components/calendar/__tests__/demo-extend.test.ts b/components/calendar/__tests__/demo-extend.test.ts index 943a699b5e..d5dc6e118d 100644 --- a/components/calendar/__tests__/demo-extend.test.ts +++ b/components/calendar/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('calendar'); +extendTest('calendar', { skip: ['lunar.tsx'] }); diff --git a/components/calendar/__tests__/demo.test.ts b/components/calendar/__tests__/demo.test.ts index d8ead2ddc9..a29e22786f 100644 --- a/components/calendar/__tests__/demo.test.ts +++ b/components/calendar/__tests__/demo.test.ts @@ -5,4 +5,5 @@ demoTest('calendar', { testRootProps: { value: dayjs(), }, + skip: ['lunar.tsx'], }); diff --git a/components/calendar/demo/basic.tsx b/components/calendar/demo/basic.tsx index c95cd92fd3..0255c4bece 100644 --- a/components/calendar/demo/basic.tsx +++ b/components/calendar/demo/basic.tsx @@ -1,10 +1,10 @@ import React from 'react'; import type { Dayjs } from 'dayjs'; import { Calendar } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; const App: React.FC = () => { - const onPanelChange = (value: Dayjs, mode: CalendarMode) => { + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/card.tsx b/components/calendar/demo/card.tsx index 2d4ea63e93..aa08fc1690 100644 --- a/components/calendar/demo/card.tsx +++ b/components/calendar/demo/card.tsx @@ -1,9 +1,9 @@ import type { Dayjs } from 'dayjs'; import React from 'react'; import { Calendar, theme } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; -const onPanelChange = (value: Dayjs, mode: CalendarMode) => { +const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/component-token.tsx b/components/calendar/demo/component-token.tsx index 37629d39c6..90c3223d2f 100644 --- a/components/calendar/demo/component-token.tsx +++ b/components/calendar/demo/component-token.tsx @@ -1,11 +1,11 @@ import type { Dayjs } from 'dayjs'; import React from 'react'; import { Calendar, ConfigProvider } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; /** Test usage. Do not use in your production. */ export default () => { - const onPanelChange = (value: Dayjs, mode: CalendarMode) => { + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/customize-header.tsx b/components/calendar/demo/customize-header.tsx index 175150ba93..4b969e0f33 100644 --- a/components/calendar/demo/customize-header.tsx +++ b/components/calendar/demo/customize-header.tsx @@ -4,14 +4,14 @@ import 'dayjs/locale/zh-cn'; import type { Dayjs } from 'dayjs'; import dayLocaleData from 'dayjs/plugin/localeData'; import { Calendar, Col, Radio, Row, Select, Typography, theme } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; dayjs.extend(dayLocaleData); const App: React.FC = () => { const { token } = theme.useToken(); - const onPanelChange = (value: Dayjs, mode: CalendarMode) => { + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/lunar.md b/components/calendar/demo/lunar.md new file mode 100644 index 0000000000..1e6f795fe0 --- /dev/null +++ b/components/calendar/demo/lunar.md @@ -0,0 +1,7 @@ +## zh-CN + +展示农历、节气等信息。 + +## en-US + +Display lunar calendar, solar terms and other information. diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx new file mode 100644 index 0000000000..f23d5bdb0d --- /dev/null +++ b/components/calendar/demo/lunar.tsx @@ -0,0 +1,233 @@ +import dayjs, { type Dayjs } from 'dayjs'; +import React from 'react'; +import lunisolar from 'lunisolar'; +import zhCn from 'lunisolar/locale/zh-cn'; +import { createStyles } from 'antd-style'; +import classNames from 'classnames'; +import { Calendar, Col, Radio, Row, Select } from 'antd'; +import type { CalendarProps } from 'antd'; + +lunisolar.locale(zhCn); + +const useStyle = createStyles(({ token, css, cx }) => { + const lunar = css` + color: ${token.colorTextTertiary}; + font-size: ${token.fontSizeSM}px; + `; + return { + wrapper: css` + width: 400px; + border: 1px solid ${token.colorBorderSecondary}; + border-radius: ${token.borderRadiusOuter}; + padding: 5px; + `, + dateCell: css` + position: relative; + &:before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + max-width: 40px; + max-height: 40px; + background: transparent; + transition: background 300ms; + border-radius: ${token.borderRadiusOuter}px; + border: 1px solid transparent; + box-sizing: border-box; + } + &:hover:before { + background: rgba(0, 0, 0, 0.04); + } + `, + today: css` + &:before { + border: 1px solid ${token.colorPrimary}; + } + `, + text: css` + position: relative; + z-index: 1; + `, + lunar, + current: css` + color: ${token.colorTextLightSolid}; + &:before { + background: ${token.colorPrimary}; + } + &:hover:before { + background: ${token.colorPrimary}; + opacity: 0.8; + } + .${cx(lunar)} { + color: ${token.colorTextLightSolid}; + opacity: 0.9; + } + `, + monthCell: css` + width: 120px; + color: ${token.colorTextBase}; + border-radius: ${token.borderRadiusOuter}px; + padding: 5px 0; + &:hover { + background: rgba(0, 0, 0, 0.04); + } + `, + monthCellCurrent: css` + color: ${token.colorTextLightSolid}; + background: ${token.colorPrimary}; + &:hover { + background: ${token.colorPrimary}; + opacity: 0.8; + } + `, + }; +}); + +const App: React.FC = () => { + const { styles } = useStyle({ test: true }); + + const [selectDate, setSelectDate] = React.useState(dayjs()); + + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { + console.log(value.format('YYYY-MM-DD'), mode); + setSelectDate(value); + }; + + const onDateChange = (value: Dayjs) => { + setSelectDate(value); + }; + + const cellRender: CalendarProps['fullCellRender'] = (date, info) => { + const d = lunisolar(date.toDate()); + const lunar = d.lunar.getDayName(); + const solarTerm = d.solarTerm?.name; + if (info.type === 'date') { + return React.cloneElement(info.originNode, { + ...info.originNode.props, + className: classNames(styles.dateCell, { + [styles.current]: selectDate.isSame(date, 'date'), + [styles.today]: date.isSame(dayjs(), 'date'), + }), + children: ( +
+ {date.get('date')} + {info.type === 'date' &&
{solarTerm || lunar}
} +
+ ), + }); + } + + if (info.type === 'month') { + // Due to the fact that a solar month is part of the lunar month X and part of the lunar month X+1, + // when rendering a month, always take X as the lunar month of the month + const d2 = lunisolar(new Date(date.get('year'), date.get('month'))); + const month = d2.lunar.getMonthName(); + return ( +
+ {date.get('month') + 1}月（{month}） +
+ ); + } + }; + + const getYearLabel = (year: number) => { + const d = lunisolar(new Date(year + 1, 0)); + return `${year}年（${d.format('cYcZ年')}）`; + }; + + const getMonthLabel = (month: number, value: Dayjs) => { + const d = lunisolar(new Date(value.year(), month)); + const lunar = d.lunar.getMonthName(); + return `${month + 1}月（${lunar}）`; + }; + + return ( +
+ { + const start = 0; + const end = 12; + const monthOptions = []; + + let current = value.clone(); + const localeData = value.localeData(); + const months = []; + for (let i = 0; i < 12; i++) { + current = current.month(i); + months.push(localeData.monthsShort(current)); + } + + for (let i = start; i < end; i++) { + monthOptions.push({ + label: getMonthLabel(i, value), + value: i, + }); + } + + const year = value.year(); + const month = value.month(); + const options = []; + for (let i = year - 10; i < year + 10; i += 1) { + options.push({ + label: getYearLabel(i), + value: i, + }); + } + return ( + + + { + const now = value.clone().month(newMonth); + onChange(now); + }} + /> + + + onTypeChange(e.target.value)} + value={type} + > + 月 + 年 + + + + ); + }} + /> +
+ ); +}; + +export default App; diff --git a/components/calendar/demo/notice-calendar.tsx b/components/calendar/demo/notice-calendar.tsx index 3051372a88..fbf6aa24bd 100644 --- a/components/calendar/demo/notice-calendar.tsx +++ b/components/calendar/demo/notice-calendar.tsx @@ -1,7 +1,6 @@ import React from 'react'; import type { Dayjs } from 'dayjs'; -import type { CellRenderInfo } from 'rc-picker/lib/interface'; -import type { BadgeProps } from 'antd'; +import type { BadgeProps, CalendarProps } from 'antd'; import { Badge, Calendar } from 'antd'; const getListData = (value: Dayjs) => { @@ -23,7 +22,7 @@ const getListData = (value: Dayjs) => { case 15: listData = [ { type: 'warning', content: 'This is warning event' }, - { type: 'success', content: 'This is very long usual event。。....' }, + { type: 'success', content: 'This is very long usual event......' }, { type: 'error', content: 'This is error event 1.' }, { type: 'error', content: 'This is error event 2.' }, { type: 'error', content: 'This is error event 3.' }, @@ -65,7 +64,7 @@ const App: React.FC = () => { ); }; - const cellRender = (current: Dayjs, info: CellRenderInfo) => { + const cellRender: CalendarProps['cellRender'] = (current, info) => { if (info.type === 'date') return dateCellRender(current); if (info.type === 'month') return monthCellRender(current); return info.originNode; diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index 61e71d7748..4480bc7fff 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -19,6 +19,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda Notice Calendar Card Selectable Calendar +Lunar Calendar Customize Header Component Token diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index c3cdb4730b..592b5838cb 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA 通知事项日历 卡片模式 选择功能 +农历日历 自定义头部 组件 Token diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index 85f63347ec..2c3552bf7d 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props) | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type | +| allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: Support object type | | autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `multiple` is `true` | boolean | true | 5.9.0 | | autoFocus | If get focus when component mounted | boolean | false | | | bordered | Whether has border style | boolean | true | | diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index f33db86080..ae87c790d8 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -49,7 +49,7 @@ demo: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象形式 | +| allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象形式 | | autoClearSearchValue | 是否在选中项后清空搜索框，只在 `multiple` 为 `true` 时有效 | boolean | true | 5.9.0 | | autoFocus | 自动获取焦点 | boolean | false | | | bordered | 是否有边框 | boolean | true | | diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 46c42fd961..717c27014e 100644 --- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -296,7 +296,7 @@ Array [ @@ -680,7 +680,7 @@ Array [ @@ -1066,7 +1066,7 @@ exports[`renders components/color-picker/demo/change-completed.tsx extend contex @@ -1450,7 +1450,7 @@ Array [ @@ -1839,7 +1839,7 @@ Array [ @@ -2202,7 +2202,7 @@ Array [ @@ -2530,7 +2530,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl @@ -4222,7 +4222,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co @@ -5055,7 +5055,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co @@ -5446,7 +5446,7 @@ Array [ @@ -6207,7 +6207,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr @@ -6605,7 +6605,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -6987,7 +6987,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -7368,7 +7368,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -7763,7 +7763,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -8150,7 +8150,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -8536,7 +8536,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -8934,7 +8934,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor @@ -9323,7 +9323,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor @@ -9728,7 +9728,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor @@ -10110,7 +10110,7 @@ Array [ @@ -10494,7 +10494,7 @@ Array [ diff --git a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap index d81f2ecdf7..abf3be3921 100644 --- a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap @@ -216,7 +216,7 @@ exports[`ColorPicker Should panelRender work 1`] = ` @@ -505,7 +505,7 @@ exports[`ColorPicker Should panelRender work 2`] = ` diff --git a/components/color-picker/components/ColorHexInput.tsx b/components/color-picker/components/ColorHexInput.tsx index f98bf6520f..92130806c7 100644 --- a/components/color-picker/components/ColorHexInput.tsx +++ b/components/color-picker/components/ColorHexInput.tsx @@ -37,7 +37,7 @@ const ColorHexInput: FC = ({ prefixCls, value, onChange }) = return ( { minWidth: controlHeightLG, height: controlHeightLG, borderRadius: borderRadiusLG, - [`${componentCls}-color-block`]: { + [`${componentCls}-color-block, ${componentCls}-clear`]: { width: controlHeight, height: controlHeight, borderRadius, @@ -147,7 +147,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => { minWidth: controlHeightSM, height: controlHeightSM, borderRadius: borderRadiusSM, - [`${componentCls}-color-block`]: { + [`${componentCls}-color-block, ${componentCls}-clear`]: { width: controlHeightXS, height: controlHeightXS, borderRadius: borderRadiusXS, diff --git a/components/color-picker/style/input.ts b/components/color-picker/style/input.ts index e4ac9bfa55..2aea1b876f 100644 --- a/components/color-picker/style/input.ts +++ b/components/color-picker/style/input.ts @@ -86,6 +86,7 @@ const genInputStyle: GenerateStyle = (token) => { padding: `0 ${paddingXS}px`, [`${antCls}-input`]: { fontSize: fontSizeSM, + textTransform: 'uppercase', lineHeight: `${controlHeightSM - 2 * lineWidth}px`, }, [`${antCls}-input-prefix`]: { diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index 3a4b5b6fd5..eb86260385 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -901,16 +901,18 @@ exports[`ConfigProvider components Badge configProvider 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + (generateConfig: GenerateCo const [wrapSSR, hashId] = useStyle(prefixCls); - let additionalOverrideProps: any = {}; - additionalOverrideProps = { - ...additionalOverrideProps, + const additionalOverrideProps: any = { ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}), ...(picker === 'time' ? getTimeProps({ format, ...props, picker }) : {}), }; diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 340ad44eb9..62ef3f039d 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -130,6 +130,12 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { borderRadius: borderRadiusSM, transition: `background ${motionDurationMid}, border ${motionDurationMid}`, }, + [`&-range-hover-start, &-range-hover-end`]: { + [pickerCellInnerCls]: { + borderStartEndRadius: 0, + borderEndEndRadius: 0, + }, + }, // >>> Hover [`&:hover:not(${pickerCellCls}-in-view), @@ -263,8 +269,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &-in-view${pickerCellCls}-range-hover-start::after`]: { insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, - borderStartStartRadius: lineWidth, - borderEndStartRadius: lineWidth, + borderStartStartRadius: borderRadiusSM, + borderEndStartRadius: borderRadiusSM, }, // Edge end @@ -275,8 +281,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &-in-view${pickerCellCls}-range-hover-end::after`]: { insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, - borderStartEndRadius: lineWidth, - borderEndEndRadius: lineWidth, + borderStartEndRadius: borderRadiusSM, + borderEndEndRadius: borderRadiusSM, }, // >>> Disabled @@ -801,6 +807,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { th: { width: pickerPanelCellWidth, + boxSizing: 'border-box', + padding: 0, }, }, }, diff --git a/components/descriptions/__tests__/index.test.tsx b/components/descriptions/__tests__/index.test.tsx index 5b652e3504..54669dbe65 100644 --- a/components/descriptions/__tests__/index.test.tsx +++ b/components/descriptions/__tests__/index.test.tsx @@ -320,4 +320,20 @@ describe('Descriptions', () => { const view = nestDesc.querySelector('.ant-descriptions-view'); expect(getComputedStyle(view!).border).toBeFalsy(); }); + + it('Should Descriptions not throw react key prop error in jsx mode', () => { + render( + + + Zhou Maomao + + 1810000000 + , + ); + expect(errorSpy).not.toHaveBeenCalledWith( + expect.stringContaining('`key` is not a prop'), + expect.anything(), + expect.anything(), + ); + }); }); diff --git a/components/descriptions/hooks/useRow.ts b/components/descriptions/hooks/useRow.ts index 40e4b05039..0b44fe0631 100644 --- a/components/descriptions/hooks/useRow.ts +++ b/components/descriptions/hooks/useRow.ts @@ -27,7 +27,7 @@ function getFilledItem( // Convert children into items const transChildren2Items = (childNodes?: React.ReactNode) => - toArray(childNodes).map((node) => node?.props); + toArray(childNodes).map((node) => ({ ...node?.props })); // Calculate the sum of span in a row function getCalcRows(rowItems: DescriptionsItemType[], mergedColumn: number) { diff --git a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap index b2861ebf42..c6efeca836 100644 --- a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -124,16 +124,18 @@ Array [ data-show="true" title="5" > - + - 5 + + 5 + - +
- + - 5 + + 5 + - + @@ -264,26 +268,28 @@ Array [ data-show="true" title="12" > - + - 1 + + 1 + - - - 2 + + 2 + - + @@ -330,36 +336,38 @@ Array [ data-show="true" title="123" > - + - 1 + + 1 + - - - 2 + + 2 + - - - 3 + + 3 + - + diff --git a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap index 9bae2695d3..be61b15beb 100644 --- a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap @@ -122,16 +122,18 @@ Array [ data-show="true" title="5" > - + - 5 + + 5 + - + @@ -178,16 +180,18 @@ Array [ data-show="true" title="5" > - + - 5 + + 5 + - + @@ -241,26 +245,28 @@ Array [ data-show="true" title="12" > - + - 1 + + 1 + - - - 2 + + 2 + - + @@ -307,36 +313,38 @@ Array [ data-show="true" title="123" > - + - 1 + + 1 + - - - 2 + + 2 + - - - 3 + + 3 + - + diff --git a/components/menu/demo/sider-current.tsx b/components/menu/demo/sider-current.tsx index 37f497b1af..5c3a0afa6c 100644 --- a/components/menu/demo/sider-current.tsx +++ b/components/menu/demo/sider-current.tsx @@ -49,7 +49,7 @@ const App: React.FC = () => { const onOpenChange: MenuProps['onOpenChange'] = (keys) => { const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1); - if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) { + if (latestOpenKey && rootSubmenuKeys.indexOf(latestOpenKey!) === -1) { setOpenKeys(keys); } else { setOpenKeys(latestOpenKey ? [latestOpenKey] : []); diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 77e007673b..14d1816625 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -62,10 +62,7 @@ export interface ModalToken extends FullToken<'Modal'> { function box(position: React.CSSProperties['position']): React.CSSProperties { return { position, - top: 0, - insetInlineEnd: 0, - bottom: 0, - insetInlineStart: 0, + inset: 0, }; } @@ -95,6 +92,7 @@ export const genModalMaskStyle: GenerateStyle> = zIndex: token.zIndexPopupBase, height: '100%', backgroundColor: token.colorBgMask, + pointerEvents: 'none', [`${componentCls}-hidden`]: { display: 'none', @@ -103,9 +101,16 @@ export const genModalMaskStyle: GenerateStyle> = [`${componentCls}-wrap`]: { ...box('fixed'), + zIndex: token.zIndexPopupBase, overflow: 'auto', outline: 0, WebkitOverflowScrolling: 'touch', + + // Note: Firefox not support `:has` yet + [`&:has(${componentCls}${antCls}-zoom-enter), &:has(${componentCls}${antCls}-zoom-appear)`]: + { + pointerEvents: 'none', + }, }, }, }, @@ -120,14 +125,6 @@ const genModalStyle: GenerateStyle = (token) => { // ======================== Root ========================= { [`${componentCls}-root`]: { - [`${componentCls}-wrap`]: { - zIndex: token.zIndexPopupBase, - position: 'fixed', - inset: 0, - overflow: 'auto', - outline: 0, - WebkitOverflowScrolling: 'touch', - }, [`${componentCls}-wrap-rtl`]: { direction: 'rtl', }, diff --git a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap index 988eaaa17e..affb88bff6 100644 --- a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -31,16 +31,18 @@ exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] = data-show="true" title="1" > - + - 1 + + 1 + - + - + - 2 + + 2 + - +
diff --git a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap index 224b99ac45..70bd7a5ab9 100644 --- a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap @@ -31,16 +31,18 @@ exports[`renders components/radio/demo/badge.tsx correctly 1`] = ` data-show="true" title="1" > - + - 1 + + 1 + - + - + - 2 + + 2 + - + diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 404628eeb2..7ae5cc22cb 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props) | --- | --- | --- | --- | --- | | activeKey | Current TabPane's key | string | - | | | addIcon | Customize add icon | ReactNode | - | 4.4.0 | -| animated | Whether to change tabs with animation. Only works while `tabPosition="top"` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| animated | Whether to change tabs with animation.` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | | centered | Centers tabs | boolean | false | 4.4.0 | | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | | | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | | diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 1ba9899edd..bbef94ed43 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -50,7 +50,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | --- | --- | --- | --- | --- | | activeKey | 当前激活 tab 面板的 key | string | - | | | addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 | -| animated | 是否使用动画切换 Tabs, 仅生效于 `tabPosition="top"` | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| animated | 是否使用动画切换 Tabs` | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | | centered | 标签居中展示 | boolean | false | 4.4.0 | | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index a31fe17e11..49a2c7d48c 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -98,7 +98,7 @@ Extends File with additional props. When uploading state change, it returns: -```js +```jsx { file: { /* ... */ }, fileList: [ /* ... */ ], @@ -108,11 +108,11 @@ When uploading state change, it returns: 1. `file` File object for the current operation. - ```js + ```jsx { uid: 'uid', // unique identifier, negative is recommended, to prevent interference with internally generated id name: 'xx.png', // file name - status: 'done', // options： uploading, done, error, removed. Intercepted file by beforeUpload doesn't have a status field. + status: 'done' | 'uploading' | 'error' | 'removed', // Intercepted file by beforeUpload doesn't have a status field. response: '{"status": "success"}', // response from server linkProps: '{"download": "image"}', // additional HTML props of file link xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header @@ -152,7 +152,9 @@ For compatible case, we return File object when `beforeUpload` return `false`. I ### Why sometimes Chrome can not upload? -Chrome update will also break native upload. Please restart Chrome to finish the upload work. Ref: +Chrome update will also break native upload. Please restart Chrome to finish the upload work. + +Ref: - [#32672](https://github.com/ant-design/ant-design/issues/32672) - [#32913](https://github.com/ant-design/ant-design/issues/32913) diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 6d91bba9ca..d3685cce05 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -99,7 +99,7 @@ demo: 文件状态改变的回调，返回为： -```js +```jsx { file: { /* ... */ }, fileList: [ /* ... */ ], @@ -109,11 +109,11 @@ demo: 1. `file` 当前操作的文件对象。 - ```js + ```jsx { uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 name: 'xx.png', // 文件名 - status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性 + status: 'done' | 'uploading' | 'error' | 'removed' , // beforeUpload 拦截的文件没有 status 状态属性 response: '{"status": "success"}', // 服务端响应内容 linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性 } @@ -136,7 +136,7 @@ demo: ### 如何显示下载链接？ -请使用 fileList 属性设置数组项的 url 属性进行展示控制。 +请使用 `fileList` 属性设置数组项的 `url` 属性进行展示控制。 ### `customRequest` 怎么使用？ @@ -148,11 +148,13 @@ demo: ### `onChange` 为什么有时候返回 File 有时候返回 { originFileObj: File }？ -历史原因，在 `beforeUpload` 返回 `false` 时，会返回 File 对象。在下个大版本我们会统一返回 `{ originFileObj: File }` 对象。当前版本已经兼容所有场景下 `info.file.originFileObj` 获取原 File 写法。你可以提前切换。 +历史原因，在 `beforeUpload` 返回 `false` 时，会返回 `File` 对象。在下个大版本我们会统一返回 `{ originFileObj: File }` 对象。当前版本已经兼容所有场景下 `info.file.originFileObj` 获取原 `File` 写法。你可以提前切换。 ### 为何有时 Chrome 点击 Upload 无法弹出文件选择框？ -与 antd 无关，原生上传也会失败。请重启 Chrome 浏览器，让其完成升级工作。相关 issue： +与 `antd` 无关，原生上传也会失败。请重启 `Chrome` 浏览器，让其完成升级工作。 + +相关 `issue`： - [#32672](https://github.com/ant-design/ant-design/issues/32672) - [#32913](https://github.com/ant-design/ant-design/issues/32913) diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md index 43fe3c03a9..44ba1c143d 100644 --- a/docs/react/faq.zh-CN.md +++ b/docs/react/faq.zh-CN.md @@ -11,7 +11,7 @@ title: FAQ ## `undefined` 和 `null` 在 `antd` 的受控组件中有区别吗？ -**有。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。** +**有区别。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。** 在输入元素中，React 认为 `undefined` 和 `null` 都属于非受控的标志。当 `value` 由非空值转化为 `undefined` 或 `null` 时，组件不再受控，这通常是一些意外情况发生的原因。 @@ -107,12 +107,19 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更， 有的，你可以访问 https://ant-design.antgroup.com/index-cn 或 https://ant-design.gitee.io/index-cn 。 -历史版本: - -- 4.x: https://4x-ant-design.antgroup.com -- 3.x: https://ant-design-3x.gitee.io/ -- 2.x: https://ant-design-2x.gitee.io/ -- 1.x: https://ant-design-1x.gitee.io/ +| 产品/版本 | 地址 | +| --- | --- | +| Ant Design 5.x | https://ant-design.antgroup.com
https://ant-design.gitee.io | +| Ant Design 4.x | https://4x-ant-design.antgroup.com | +| Ant Design 3.x | https://ant-design-3x.gitee.io | +| Ant Design 2.x | https://ant-design-2x.gitee.io | +| Ant Design 1.x | https://ant-design-1x.gitee.io | +| Ant Design Pro | https://ant-design-pro.gitee.io/ | +| Ant Design Mobile | https://ant-design-mobile.antgroup.com/zh
https://antd-mobile.gitee.io/ | +| Ant Design Mini | https://ant-design-mini.antgroup.com/zh
https://antd-mobile.gitee.io/ | +| Ant Design Charts | https://ant-design-charts.antgroup.com
https://antd-mobile.gitee.io/ | +| AntV | https://antv.antgroup.com | +| Ant Motion | https://ant-motion.gitee.io | ## `antd` 可以像 `React` 那样使用单文件引入吗？ diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md index 3e5a150649..df36112bee 100644 --- a/docs/react/recommendation.en-US.md +++ b/docs/react/recommendation.en-US.md @@ -41,8 +41,8 @@ title: Third-Party Libraries | Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) | | Page Footer | [rc-footer](https://github.com/react-component/footer) | | Number/Currency | [react-countup](https://www.npmjs.com/package/react-countup) [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-field](https://github.com/cchanxzy/react-currency-input-field) | - | Application Frameworks | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | +| Flow-based UI | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | ## Products we are using ✨ diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md index e023933178..7924394173 100644 --- a/docs/react/recommendation.zh-CN.md +++ b/docs/react/recommendation.zh-CN.md @@ -44,6 +44,7 @@ title: 社区精选组件 | 数字/金额 | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) | | 移动端探测 | [react-device-detect](https://github.com/duskload/react-device-detect) | | 应用程序框架 | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | +| Flow 流 | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | ## 推荐产品 ✨ diff --git a/package.json b/package.json index a6197a9bcf..8a903ef8c9 100644 --- a/package.json +++ b/package.json @@ -137,7 +137,7 @@ "rc-menu": "~9.10.0", "rc-motion": "^2.7.3", "rc-notification": "~5.0.4", - "rc-pagination": "~3.5.0", + "rc-pagination": "~3.6.0", "rc-picker": "~3.13.0", "rc-progress": "~3.4.1", "rc-rate": "~2.12.0", @@ -159,7 +159,7 @@ "throttle-debounce": "^5.0.0" }, "devDependencies": { - "@ant-design/compatible": "^5.1.1", + "@ant-design/compatible": "^5.1.2", "@ant-design/happy-work-theme": "^1.0.0", "@ant-design/tools": "^17.0.0", "@antv/g6": "^4.8.13", @@ -178,7 +178,7 @@ "@swc/core": "^1.3.50", "@swc/helpers": "^0.5.0", "@testing-library/dom": "^9.0.0", - "@testing-library/jest-dom": "^5.16.3", + "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.2", "@types/fs-extra": "^11.0.1", @@ -256,8 +256,9 @@ "jsdom": "^22.0.0", "jsonml-to-react-element": "^1.1.11", "jsonml.js": "^0.1.0", - "lint-staged": "^13.0.3", + "lint-staged": "^14.0.0", "lodash": "^4.17.21", + "lunisolar": "^2.2.2", "lz-string": "^1.4.4", "mockdate": "^3.0.0", "node-notifier": "^10.0.1",