mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore: merge master into feature

Browse Source
This commit is contained in:
栗嘉男 2023-08-18 15:01:08 +08:00
commit 39ca9d89f4
55 changed files with 1805 additions and 1290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.dumi/pages/theme-editor/index.tsx
View File

@ -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);
}
}, []);

4
.dumi/theme/builtins/TokenCompare/index.tsx
View File

@ -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);
`,

28
.dumi/theme/common/Color/ColorPaletteTool.tsx
View File

@ -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<string>('#1890ff');
const [primaryColorInstance, setPrimaryColorInstance] = useState<Color>(null);
const [locale] = useLocale(locales);
const handleChangeColor = (color: Color, hex: string) => {
setPrimaryColor(hex);
setPrimaryColorInstance(color);
};
const colorValidation = useMemo<React.ReactNode>(() => {
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 <span className="color-palette-picker-validation">{text.trim()}</span>;
@ -32,7 +50,9 @@ const ColorPaletteTool: React.FC = () => {
<div className="color-palette-pick">
<FormattedMessage id="app.docs.color.pick-primary" />
</div>
<div className="main-color">{ColorPatterns({ color: primaryColor })}</div>
<div className="main-color">
<ColorPatterns color={primaryColor} />
</div>
<div className="color-palette-picker">
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<ColorPicker value={primaryColor} onChange={handleChangeColor} />

26
.dumi/theme/common/Color/ColorPaletteToolDark.tsx
View File

@ -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<string>('#1890ff');
const [backgroundColor, setBackgroundColor] = useState<string>('#141414');
const [primaryColorInstance, setPrimaryColorInstance] = useState(null);
const [primaryColorInstance, setPrimaryColorInstance] = useState<Color>(null);
const [locale] = useLocale(locales);
const handleChangeColor = (color: Color, hex: string) => {
setPrimaryColor(hex);
@ -23,12 +39,12 @@ const ColorPaletteTool: React.FC = () => {
const colorValidation = useMemo<React.ReactNode>(() => {
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 (
<div className="color-palette-horizontal color-palette-horizontal-dark">
<div className="main-color">
{ColorPatterns({ color: primaryColor, dark: true, backgroundColor })}
<ColorPatterns color={primaryColor} backgroundColor={backgroundColor} dark />
</div>
<div className="color-palette-picker">
<Row>

12
.dumi/theme/common/Color/ColorPatterns.tsx
View File

@ -9,11 +9,15 @@ interface ColorPatternsProps {
backgroundColor?: string;
}
const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => {
const ColorPatterns: React.FC<ColorPatternsProps> = ({ color, dark, backgroundColor }) => {
const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {});
return uniq(colors).map((colorString, i) => (
<ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
));
return (
<>
{uniq(colors).map((colorString, i) => (
<ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
))}
</>
);
};
export default ColorPatterns;

8
.dumi/theme/slots/Footer/index.tsx
View File

@ -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: <FormattedMessage id="app.footer.antv.slogan" />,
openExternal: true,
},

39
.dumi/theme/slots/Header/Navigation.tsx
View File

@ -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: (
<a href="https://ant-design.antgroup.com" target="_blank" rel="noreferrer">
国内镜像
</a>
),
key: 'mirror',
children: [
{
label: <a href="https://ant-design.antgroup.com">官方镜像</a>,
label: (
<a href="https://ant-design.antgroup.com" target="_blank" rel="noreferrer">
官方镜像
</a>
),
icon: (
<img
alt="logo"
@ -245,7 +260,11 @@ export default ({
key: 'antgroup',
},
{
label: <a href="https://ant-design.gitee.io">Gitee 镜像</a>,
label: (
<a href="https://ant-design.gitee.io" target="_blank" rel="noreferrer">
Gitee 镜像
</a>
),
icon: (
<img
alt="gitee"

3
.dumi/theme/slots/Header/index.tsx
View File

@ -127,7 +127,6 @@ interface HeaderState {
// ================================= Header =================================
const Header: React.FC = () => {
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 = (

1
.dumi/theme/slots/Header/interface.ts
View File

@ -1,5 +1,4 @@
export interface SharedProps {
isZhCN: boolean;
isRTL: boolean;
isClient: boolean;
}

32
components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx extend context correctly 1`] =
data-show="true"
title="1"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -531,16 +533,18 @@ Array [
data-show="true"
title="1"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>

32
components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx correctly 1`] = `
data-show="true"
title="1"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -438,16 +440,18 @@ Array [
data-show="true"
title="1"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>

22
components/badge/ScrollNumber.tsx
View File

@ -51,15 +51,19 @@ const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>((props, re
if (count && Number(count) % 1 === 0) {
const numberList = String(count).split('');
numberNodes = numberList.map((num, i) => (
<SingleNumber
prefixCls={prefixCls}
count={Number(count)}
value={num}
// eslint-disable-next-line react/no-array-index-key
key={numberList.length - i}
/>
));
numberNodes = (
<bdi>
{numberList.map((num, i) => (
<SingleNumber
prefixCls={prefixCls}
count={Number(count)}
value={num}
// eslint-disable-next-line react/no-array-index-key
key={numberList.length - i}
/>
))}
</bdi>
);
}
// allow specify the border

686
components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -24,16 +24,18 @@ exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] =
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -136,16 +138,18 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -655,26 +659,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -695,26 +701,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -735,26 +743,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -775,26 +785,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -815,26 +827,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -855,26 +869,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -895,26 +911,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -935,26 +953,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -975,26 +995,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1015,26 +1037,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1055,26 +1079,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1095,26 +1121,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1135,26 +1163,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1610,16 +1640,18 @@ exports[`renders components/badge/demo/link.tsx extend context correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</a>
@ -1660,16 +1692,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1693,16 +1727,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1726,16 +1762,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1760,16 +1798,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
style="background: rgb(250, 84, 28);"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -2035,26 +2075,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx extend context correctly 1
style="background: rgb(250, 173, 20);"
title="11"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -2070,26 +2112,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx extend context correctly 1
data-show="true"
title="25"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
2
<span
class="ant-scroll-number-only-unit current"
>
2
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -2164,16 +2208,18 @@ exports[`renders components/badge/demo/offset.tsx extend context correctly 1`] =
style="margin-top: 10px; right: -10px;"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
`;
@ -2204,26 +2250,28 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`]
data-show="true"
title="99"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
9
<span
class="ant-scroll-number-only-unit current"
>
9
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
9
<span
class="ant-scroll-number-only-unit current"
>
9
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -2845,16 +2893,18 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -2877,16 +2927,18 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -3078,16 +3130,18 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] =
data-show="true"
title="Custom hover text"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -3110,26 +3164,28 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] =
data-show="true"
title="Negative"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
-
<span
class="ant-scroll-number-only-unit current"
>
-
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>

686
components/badge/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -24,16 +24,18 @@ exports[`renders components/badge/demo/basic.tsx correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -134,16 +136,18 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -650,26 +654,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -690,26 +696,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -730,26 +738,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -770,26 +780,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -810,26 +822,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -850,26 +864,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -890,26 +906,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -930,26 +948,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -970,26 +990,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1010,26 +1032,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1050,26 +1074,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1090,26 +1116,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1130,26 +1158,28 @@ Array [
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1599,16 +1629,18 @@ exports[`renders components/badge/demo/link.tsx correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</a>
@ -1647,16 +1679,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1680,16 +1714,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1713,16 +1749,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -1747,16 +1785,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = `
style="background:#fa541c"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -2020,26 +2060,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx correctly 1`] = `
style="background:#faad14"
title="11"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -2055,26 +2097,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx correctly 1`] = `
data-show="true"
title="25"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
2
<span
class="ant-scroll-number-only-unit current"
>
2
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -2147,16 +2191,18 @@ exports[`renders components/badge/demo/offset.tsx correctly 1`] = `
style="margin-top:10px;right:-10px"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
`;
@ -2185,26 +2231,28 @@ exports[`renders components/badge/demo/overflow.tsx correctly 1`] = `
data-show="true"
title="99"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
9
<span
class="ant-scroll-number-only-unit current"
>
9
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
9
<span
class="ant-scroll-number-only-unit current"
>
9
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -2820,16 +2868,18 @@ exports[`renders components/badge/demo/size.tsx correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -2852,16 +2902,18 @@ exports[`renders components/badge/demo/size.tsx correctly 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -3049,16 +3101,18 @@ exports[`renders components/badge/demo/title.tsx correctly 1`] = `
data-show="true"
title="Custom hover text"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -3081,26 +3135,28 @@ exports[`renders components/badge/demo/title.tsx correctly 1`] = `
data-show="true"
title="Negative"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
-
<span
class="ant-scroll-number-only-unit current"
>
-
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>

666
components/badge/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -11,16 +11,18 @@ exports[`Badge render Badge status/color when contains children 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span
@ -32,16 +34,18 @@ exports[`Badge render Badge status/color when contains children 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span
@ -54,16 +58,18 @@ exports[`Badge render Badge status/color when contains children 1`] = `
style="background: rgb(0, 136, 204);"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -79,36 +85,38 @@ exports[`Badge render correct with negative number 1`] = `
data-show="true"
title="-10"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
-
<span
class="ant-scroll-number-only-unit current"
>
-
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
0
<span
class="ant-scroll-number-only-unit current"
>
0
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span
@ -119,36 +127,38 @@ exports[`Badge render correct with negative number 1`] = `
data-show="true"
title="-10"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
-
<span
class="ant-scroll-number-only-unit current"
>
-
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
0
<span
class="ant-scroll-number-only-unit current"
>
0
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>
@ -176,16 +186,18 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio
style="margin-top: 10px; left: 10px;"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
`;
@ -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"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
4
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</span>
</bdi>
</sup>
</span>
`;
@ -274,86 +288,88 @@ exports[`Badge should render when count is changed 1`] = `
data-show="true"
title="10"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
</span>
</span>
<span
class="ant-scroll-number-only"
style="transform: translateY(-100%);"
>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -900%; left: 0px;"
>
0
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -800%; left: 0px;"
class="ant-scroll-number-only"
style="transform: translateY(-100%);"
>
1
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -900%; left: 0px;"
>
0
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -800%; left: 0px;"
>
1
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -700%; left: 0px;"
>
2
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -600%; left: 0px;"
>
3
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -500%; left: 0px;"
>
4
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -400%; left: 0px;"
>
5
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -300%; left: 0px;"
>
6
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -200%; left: 0px;"
>
7
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -100%; left: 0px;"
>
8
</span>
<span
class="ant-scroll-number-only-unit current"
>
9
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 100%; left: 0px;"
>
0
</span>
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -700%; left: 0px;"
>
2
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -600%; left: 0px;"
>
3
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -500%; left: 0px;"
>
4
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -400%; left: 0px;"
>
5
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -300%; left: 0px;"
>
6
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -200%; left: 0px;"
>
7
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -100%; left: 0px;"
>
8
</span>
<span
class="ant-scroll-number-only-unit current"
>
9
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 100%; left: 0px;"
>
0
</span>
</span>
</bdi>
</sup>
</span>
`;
@ -367,86 +383,88 @@ exports[`Badge should render when count is changed 2`] = `
data-show="true"
title="11"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
</span>
</span>
<span
class="ant-scroll-number-only"
style="transform: translateY(-100%);"
>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -900%; left: 0px;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -800%; left: 0px;"
class="ant-scroll-number-only"
style="transform: translateY(-100%);"
>
2
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -900%; left: 0px;"
>
1
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -800%; left: 0px;"
>
2
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -700%; left: 0px;"
>
3
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -600%; left: 0px;"
>
4
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -500%; left: 0px;"
>
5
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -400%; left: 0px;"
>
6
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -300%; left: 0px;"
>
7
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -200%; left: 0px;"
>
8
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -100%; left: 0px;"
>
9
</span>
<span
class="ant-scroll-number-only-unit current"
>
0
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 100%; left: 0px;"
>
1
</span>
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -700%; left: 0px;"
>
3
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -600%; left: 0px;"
>
4
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -500%; left: 0px;"
>
5
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -400%; left: 0px;"
>
6
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -300%; left: 0px;"
>
7
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -200%; left: 0px;"
>
8
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -100%; left: 0px;"
>
9
</span>
<span
class="ant-scroll-number-only-unit current"
>
0
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 100%; left: 0px;"
>
1
</span>
</span>
</bdi>
</sup>
</span>
`;
@ -460,27 +478,29 @@ exports[`Badge should render when count is changed 3`] = `
data-show="true"
title="11"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
style=""
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
style=""
>
1
</span>
</span>
</span>
</bdi>
</sup>
</span>
`;
@ -508,26 +528,28 @@ exports[`Badge should render when count is changed 5`] = `
data-show="true"
title="10"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
0
<span
class="ant-scroll-number-only-unit current"
>
0
</span>
</span>
</span>
</bdi>
</sup>
</span>
`;
@ -541,76 +563,78 @@ exports[`Badge should render when count is changed 6`] = `
data-show="true"
title="9"
>
<span
class="ant-scroll-number-only"
style="transform: translateY(100%);"
>
<bdi>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -100%; left: 0px;"
class="ant-scroll-number-only"
style="transform: translateY(100%);"
>
9
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: -100%; left: 0px;"
>
9
</span>
<span
class="ant-scroll-number-only-unit current"
>
0
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 100%; left: 0px;"
>
1
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 200%; left: 0px;"
>
2
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 300%; left: 0px;"
>
3
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 400%; left: 0px;"
>
4
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 500%; left: 0px;"
>
5
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 600%; left: 0px;"
>
6
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 700%; left: 0px;"
>
7
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 800%; left: 0px;"
>
8
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 900%; left: 0px;"
>
9
</span>
</span>
<span
class="ant-scroll-number-only-unit current"
>
0
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 100%; left: 0px;"
>
1
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 200%; left: 0px;"
>
2
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 300%; left: 0px;"
>
3
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 400%; left: 0px;"
>
4
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 500%; left: 0px;"
>
5
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 600%; left: 0px;"
>
6
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 700%; left: 0px;"
>
7
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 800%; left: 0px;"
>
8
</span>
<span
class="ant-scroll-number-only-unit"
style="position: absolute; top: 900%; left: 0px;"
>
9
</span>
</span>
</bdi>
</sup>
</span>
`;

4
components/badge/style/index.ts
View File

@ -175,6 +175,10 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
[`${componentCls}-multiple-words`]: {
padding: `0 ${token.paddingXS}px`,
bdi: {
unicodeBidi: 'plaintext',
},
},
[`${componentCls}-dot`]: {

2
components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -9282,7 +9282,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
<span
class="ant-badge-status-text"
>
This is very long usual event。。....
This is very long usual event......
</span>
</span>
</li>

2
components/calendar/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -5418,7 +5418,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
<span
class="ant-badge-status-text"
>
This is very long usual event。。....
This is very long usual event......
</span>
</span>
</li>

2
components/calendar/__tests__/demo-extend.test.ts
View File

@ -1,3 +1,3 @@
import { extendTest } from '../../../tests/shared/demoTest';
extendTest('calendar');
extendTest('calendar', { skip: ['lunar.tsx'] });

1
components/calendar/__tests__/demo.test.ts
View File

@ -5,4 +5,5 @@ demoTest('calendar', {
testRootProps: {
value: dayjs(),
},
skip: ['lunar.tsx'],
});

4
components/calendar/demo/basic.tsx
View File

@ -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<Dayjs>['mode']) => {
console.log(value.format('YYYY-MM-DD'), mode);
};

4
components/calendar/demo/card.tsx
View File

@ -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<Dayjs>['mode']) => {
console.log(value.format('YYYY-MM-DD'), mode);
};

4
components/calendar/demo/component-token.tsx
View File

@ -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<Dayjs>['mode']) => {
console.log(value.format('YYYY-MM-DD'), mode);
};

4
components/calendar/demo/customize-header.tsx
View File

@ -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<Dayjs>['mode']) => {
console.log(value.format('YYYY-MM-DD'), mode);
};

7
components/calendar/demo/lunar.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
展示农历、节气等信息。
## en-US
Display lunar calendar, solar terms and other information.

233
components/calendar/demo/lunar.tsx Normal file
View File

@ -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>(dayjs());
const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
console.log(value.format('YYYY-MM-DD'), mode);
setSelectDate(value);
};
const onDateChange = (value: Dayjs) => {
setSelectDate(value);
};
const cellRender: CalendarProps<Dayjs>['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: (
<div className={styles.text}>
{date.get('date')}
{info.type === 'date' && <div className={styles.lunar}>{solarTerm || lunar}</div>}
</div>
),
});
}
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 (
<div
className={classNames(styles.monthCell, {
[styles.monthCellCurrent]: selectDate.isSame(date, 'month'),
})}
>
{date.get('month') + 1}月（{month}）
</div>
);
}
};
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 (
<div className={styles.wrapper}>
<Calendar
fullCellRender={cellRender}
fullscreen={false}
onPanelChange={onPanelChange}
onChange={onDateChange}
headerRender={({ value, type, onChange, onTypeChange }) => {
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 (
<Row justify="end" gutter={8} style={{ padding: 8 }}>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
className="my-year-select"
value={year}
options={options}
onChange={(newYear) => {
const now = value.clone().year(newYear);
onChange(now);
}}
/>
</Col>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
value={month}
options={monthOptions}
onChange={(newMonth) => {
const now = value.clone().month(newMonth);
onChange(now);
}}
/>
</Col>
<Col>
<Radio.Group
size="small"
onChange={(e) => onTypeChange(e.target.value)}
value={type}
>
<Radio.Button value="month">月</Radio.Button>
<Radio.Button value="year">年</Radio.Button>
</Radio.Group>
</Col>
</Row>
);
}}
/>
</div>
);
};
export default App;

7
components/calendar/demo/notice-calendar.tsx
View File

@ -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<Dayjs>) => {
const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
if (info.type === 'date') return dateCellRender(current);
if (info.type === 'month') return monthCellRender(current);
return info.originNode;

1
components/calendar/index.en-US.md
View File

@ -19,6 +19,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
<code src="./demo/notice-calendar.tsx" clientOnly>Notice Calendar</code>
<code src="./demo/card.tsx" clientOnly>Card</code>
<code src="./demo/select.tsx" clientOnly>Selectable Calendar</code>
<code src="./demo/lunar.tsx" clientOnly>Lunar Calendar</code>
<code src="./demo/customize-header.tsx" clientOnly>Customize Header</code>
<code src="./demo/component-token.tsx" debug>Component Token</code>

1
components/calendar/index.zh-CN.md
View File

@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
<code src="./demo/notice-calendar.tsx" clientOnly>通知事项日历</code>
<code src="./demo/card.tsx" clientOnly>卡片模式</code>
<code src="./demo/select.tsx" clientOnly>选择功能</code>
<code src="./demo/lunar.tsx" clientOnly>农历日历</code>
<code src="./demo/customize-header.tsx" clientOnly>自定义头部</code>
<code src="./demo/component-token.tsx" debug>组件 Token</code>

2
components/cascader/index.en-US.md
View File

@ -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 | |

2
components/cascader/index.zh-CN.md
View File

@ -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 | |

44
components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -296,7 +296,7 @@ Array [
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -680,7 +680,7 @@ Array [
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -1066,7 +1066,7 @@ exports[`renders components/color-picker/demo/change-completed.tsx extend contex
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -1450,7 +1450,7 @@ Array [
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -1839,7 +1839,7 @@ Array [
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -2202,7 +2202,7 @@ Array [
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -2530,7 +2530,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -4222,7 +4222,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -5055,7 +5055,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -5446,7 +5446,7 @@ Array [
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -6207,7 +6207,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -6605,7 +6605,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -6987,7 +6987,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -7368,7 +7368,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -7763,7 +7763,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -8150,7 +8150,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -8536,7 +8536,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -8934,7 +8934,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -9323,7 +9323,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -9728,7 +9728,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -10110,7 +10110,7 @@ Array [
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -10494,7 +10494,7 @@ Array [
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>

4
components/color-picker/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -216,7 +216,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>
@ -505,7 +505,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
<input
class="ant-input ant-input-sm"
type="text"
value="1677FF"
value="1677ff"
/>
</span>
</div>

2
components/color-picker/components/ColorHexInput.tsx
View File

@ -37,7 +37,7 @@ const ColorHexInput: FC<ColorHexInputProps> = ({ prefixCls, value, onChange }) =
return (
<Input
className={colorHexInputPrefixCls}
value={hexValue?.toUpperCase()}
value={hexValue}
prefix="#"
onChange={handleHexChange}
size="small"

4
components/color-picker/style/index.ts
View File

@ -134,7 +134,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => {
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,

1
components/color-picker/style/input.ts
View File

@ -86,6 +86,7 @@ const genInputStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
padding: `0 ${paddingXS}px`,
[`${antCls}-input`]: {
fontSize: fontSizeSM,
textTransform: 'uppercase',
lineHeight: `${controlHeightSM - 2 * lineWidth}px`,
},
[`${antCls}-input-prefix`]: {

112
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -901,16 +901,18 @@ exports[`ConfigProvider components Badge configProvider 1`] = `
data-show="true"
title="5"
>
<span
class="config-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="config-scroll-number-only-unit current"
class="config-scroll-number-only"
style="transition: none;"
>
5
<span
class="config-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span
@ -936,16 +938,18 @@ exports[`ConfigProvider components Badge configProvider componentDisabled 1`] =
data-show="true"
title="5"
>
<span
class="config-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="config-scroll-number-only-unit current"
class="config-scroll-number-only"
style="transition: none;"
>
5
<span
class="config-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span
@ -971,16 +975,18 @@ exports[`ConfigProvider components Badge configProvider componentSize large 1`]
data-show="true"
title="5"
>
<span
class="config-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="config-scroll-number-only-unit current"
class="config-scroll-number-only"
style="transition: none;"
>
5
<span
class="config-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span
@ -1006,16 +1012,18 @@ exports[`ConfigProvider components Badge configProvider componentSize middle 1`]
data-show="true"
title="5"
>
<span
class="config-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="config-scroll-number-only-unit current"
class="config-scroll-number-only"
style="transition: none;"
>
5
<span
class="config-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span
@ -1041,16 +1049,18 @@ exports[`ConfigProvider components Badge configProvider componentSize small 1`]
data-show="true"
title="5"
>
<span
class="config-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="config-scroll-number-only-unit current"
class="config-scroll-number-only"
style="transition: none;"
>
5
<span
class="config-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span
@ -1076,16 +1086,18 @@ exports[`ConfigProvider components Badge normal 1`] = `
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span
@ -1111,16 +1123,18 @@ exports[`ConfigProvider components Badge prefixCls 1`] = `
data-show="true"
title="5"
>
<span
class="prefix-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="prefix-scroll-number-only-unit current"
class="prefix-scroll-number-only"
style="transition: none;"
>
5
<span
class="prefix-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span

4
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -70,9 +70,7 @@ export default function generateRangePicker<DateType>(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 }) : {}),
};

16
components/date-picker/style/index.ts
View File

@ -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,
},
},
},

16
components/descriptions/__tests__/index.test.tsx
View File

@ -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(
<Descriptions title="User Info">
<Descriptions.Item key="1" label="UserName">
Zhou Maomao
</Descriptions.Item>
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
</Descriptions>,
);
expect(errorSpy).not.toHaveBeenCalledWith(
expect.stringContaining('`key` is not a prop'),
expect.anything(),
expect.anything(),
);
});
});

2
components/descriptions/hooks/useRow.ts
View File

@ -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) {

106
components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -124,16 +124,18 @@ Array [
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
<div
@ -201,16 +203,18 @@ Array [
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</button>
@ -264,26 +268,28 @@ Array [
data-show="true"
title="12"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
2
<span
class="ant-scroll-number-only-unit current"
>
2
</span>
</span>
</span>
</bdi>
</sup>
</span>
</button>
@ -330,36 +336,38 @@ Array [
data-show="true"
title="123"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
2
<span
class="ant-scroll-number-only-unit current"
>
2
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
3
<span
class="ant-scroll-number-only-unit current"
>
3
</span>
</span>
</span>
</bdi>
</sup>
</span>
</button>

106
components/float-button/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -122,16 +122,18 @@ Array [
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</button>
@ -178,16 +180,18 @@ Array [
data-show="true"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
5
<span
class="ant-scroll-number-only-unit current"
>
5
</span>
</span>
</span>
</bdi>
</sup>
</span>
</button>
@ -241,26 +245,28 @@ Array [
data-show="true"
title="12"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
2
<span
class="ant-scroll-number-only-unit current"
>
2
</span>
</span>
</span>
</bdi>
</sup>
</span>
</button>
@ -307,36 +313,38 @@ Array [
data-show="true"
title="123"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
2
<span
class="ant-scroll-number-only-unit current"
>
2
</span>
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
3
<span
class="ant-scroll-number-only-unit current"
>
3
</span>
</span>
</span>
</bdi>
</sup>
</span>
</button>

2
components/menu/demo/sider-current.tsx
View File

@ -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] : []);

21
components/modal/style/index.tsx
View File

@ -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<TokenWithCommonCls<AliasToken>> =
zIndex: token.zIndexPopupBase,
height: '100%',
backgroundColor: token.colorBgMask,
pointerEvents: 'none',
[`${componentCls}-hidden`]: {
display: 'none',
@ -103,9 +101,16 @@ export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> =
[`${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<ModalToken> = (token) => {
// ======================== Root =========================
{
[`${componentCls}-root`]: {
[`${componentCls}-wrap`]: {
zIndex: token.zIndexPopupBase,
position: 'fixed',
inset: 0,
overflow: 'auto',
outline: 0,
WebkitOverflowScrolling: 'touch',
},
[`${componentCls}-wrap-rtl`]: {
direction: 'rtl',
},

32
components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -31,16 +31,18 @@ exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] =
data-show="true"
title="1"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span
@ -70,16 +72,18 @@ exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] =
data-show="true"
title="2"
>
<span
class="ant-scroll-number-only"
style="transition: none;"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition: none;"
>
2
<span
class="ant-scroll-number-only-unit current"
>
2
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>

32
components/radio/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -31,16 +31,18 @@ exports[`renders components/radio/demo/badge.tsx correctly 1`] = `
data-show="true"
title="1"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
1
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</span>
</bdi>
</sup>
</span>
<span
@ -70,16 +72,18 @@ exports[`renders components/radio/demo/badge.tsx correctly 1`] = `
data-show="true"
title="2"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<bdi>
<span
class="ant-scroll-number-only-unit current"
class="ant-scroll-number-only"
style="transition:none"
>
2
<span
class="ant-scroll-number-only-unit current"
>
2
</span>
</span>
</span>
</bdi>
</sup>
</span>
</div>

2
components/tabs/index.en-US.md
View File

@ -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 | |

2
components/tabs/index.zh-CN.md
View File

@ -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 | |

10
components/upload/index.en-US.md
View File

@ -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)

14
components/upload/index.zh-CN.md
View File

@ -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)

21
docs/react/faq.zh-CN.md
View File

@ -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 <br /> 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 <br /> https://antd-mobile.gitee.io/ |
| Ant Design Mini | https://ant-design-mini.antgroup.com/zh <br /> https://antd-mobile.gitee.io/ |
| Ant Design Charts | https://ant-design-charts.antgroup.com<br /> https://antd-mobile.gitee.io/ |
| AntV | https://antv.antgroup.com |
| Ant Motion | https://ant-motion.gitee.io |
## `antd` 可以像 `React` 那样使用单文件引入吗？

2
docs/react/recommendation.en-US.md
View File

@ -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 ✨

1
docs/react/recommendation.zh-CN.md
View File

@ -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) |
## 推荐产品 ✨

9
package.json
View File

@ -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",