mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-22 17:13:27 +08:00
chore: auto merge branches (#52335)
Some checks failed
Publish Any Commit / build (push) Has been cancelled
🔀 Sync mirror to Gitee / mirror (push) Has been cancelled
✅ test / lint (push) Has been cancelled
✅ test / test-react-legacy (16, 1/2) (push) Has been cancelled
✅ test / test-react-legacy (16, 2/2) (push) Has been cancelled
✅ test / test-react-legacy (17, 1/2) (push) Has been cancelled
✅ test / test-react-legacy (17, 2/2) (push) Has been cancelled
✅ test / test-node (push) Has been cancelled
✅ test / test-react-latest (dom, 1/2) (push) Has been cancelled
✅ test / test-react-latest (dom, 2/2) (push) Has been cancelled
✅ test / build (push) Has been cancelled
✅ test / test lib/es module (es, 1/2) (push) Has been cancelled
✅ test / test lib/es module (es, 2/2) (push) Has been cancelled
✅ test / test lib/es module (lib, 1/2) (push) Has been cancelled
✅ test / test lib/es module (lib, 2/2) (push) Has been cancelled
👁️ Visual Regression Persist Start / test image (push) Has been cancelled
✅ test / test-react-latest-dist (dist, 1/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist, 2/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Has been cancelled
✅ test / test-coverage (push) Has been cancelled
Some checks failed
Publish Any Commit / build (push) Has been cancelled
🔀 Sync mirror to Gitee / mirror (push) Has been cancelled
✅ test / lint (push) Has been cancelled
✅ test / test-react-legacy (16, 1/2) (push) Has been cancelled
✅ test / test-react-legacy (16, 2/2) (push) Has been cancelled
✅ test / test-react-legacy (17, 1/2) (push) Has been cancelled
✅ test / test-react-legacy (17, 2/2) (push) Has been cancelled
✅ test / test-node (push) Has been cancelled
✅ test / test-react-latest (dom, 1/2) (push) Has been cancelled
✅ test / test-react-latest (dom, 2/2) (push) Has been cancelled
✅ test / build (push) Has been cancelled
✅ test / test lib/es module (es, 1/2) (push) Has been cancelled
✅ test / test lib/es module (es, 2/2) (push) Has been cancelled
✅ test / test lib/es module (lib, 1/2) (push) Has been cancelled
✅ test / test lib/es module (lib, 2/2) (push) Has been cancelled
👁️ Visual Regression Persist Start / test image (push) Has been cancelled
✅ test / test-react-latest-dist (dist, 1/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist, 2/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Has been cancelled
✅ test / test-coverage (push) Has been cancelled
chore: merge master into feature
This commit is contained in:
github-actions[bot]
GitHub
commit
a5eea9d3bf
81
.dumi/theme/builtins/Previewer/CodeBlockButton.tsx
Normal file
81
.dumi/theme/builtins/Previewer/CodeBlockButton.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
import React, { Suspense, useEffect, useState } from 'react';
|
||||
import { Tooltip } from 'antd';
|
||||
import { FormattedMessage } from 'dumi';
|
||||
|
||||
import { ping } from '../../utils';
|
||||
|
||||
let pingDeferrer: PromiseLike<boolean>;
|
||||
|
||||
const codeBlockJs =
|
||||
'https://renderoffice.a' +
|
||||
'lipay' +
|
||||
'objects.com/p' +
|
||||
'/yuyan/180020010001206410/parseFileData.js';
|
||||
|
||||
function useShowCodeBlockButton() {
|
||||
const [showCodeBlockButton, setShowCodeBlockButton] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
pingDeferrer ??= new Promise<boolean>((resolve) => {
|
||||
ping((status) => {
|
||||
if (status !== 'timeout' && status !== 'error') {
|
||||
// Async insert `codeBlockJs` into body end
|
||||
const script = document.createElement('script');
|
||||
script.src = codeBlockJs;
|
||||
script.async = true;
|
||||
document.body.appendChild(script);
|
||||
|
||||
return resolve(true);
|
||||
}
|
||||
|
||||
return resolve(false);
|
||||
});
|
||||
});
|
||||
pingDeferrer.then(setShowCodeBlockButton);
|
||||
}, []);
|
||||
|
||||
return showCodeBlockButton;
|
||||
}
|
||||
|
||||
interface CodeBlockButtonProps {
|
||||
title?: string;
|
||||
dependencies: Record<PropertyKey, string>;
|
||||
jsx: string;
|
||||
}
|
||||
|
||||
const CodeBlockButton: React.FC<CodeBlockButtonProps> = ({ title, dependencies = {}, jsx }) => {
|
||||
const showCodeBlockButton = useShowCodeBlockButton();
|
||||
|
||||
const codeBlockPrefillConfig = {
|
||||
title: `${title} - antd@${dependencies.antd}`,
|
||||
js: `${
|
||||
/import React(\D*)from 'react';/.test(jsx) ? '' : `import React from 'react';\n`
|
||||
}import { createRoot } from 'react-dom/client';\n${jsx.replace(
|
||||
/export default/,
|
||||
'const ComponentDemo =',
|
||||
)}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
|
||||
css: '',
|
||||
json: JSON.stringify({ name: 'antd-demo', dependencies }, null, 2),
|
||||
};
|
||||
|
||||
return showCodeBlockButton ? (
|
||||
<Tooltip title={<FormattedMessage id="app.demo.codeblock" />}>
|
||||
<div className="code-box-code-action">
|
||||
<img
|
||||
alt="codeblock"
|
||||
src="https://mdn.alipayobjects.com/huamei_wtld8u/afts/img/A*K8rjSJpTNQ8AAAAAAAAAAAAADhOIAQ/original"
|
||||
className="code-box-codeblock"
|
||||
onClick={() => {
|
||||
openHituCodeBlock(JSON.stringify(codeBlockPrefillConfig));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export default (props: CodeBlockButtonProps) => (
|
||||
<Suspense>
|
||||
<CodeBlockButton {...props} />
|
||||
</Suspense>
|
||||
);
|
||||
@ -8,7 +8,6 @@ import classNames from 'classnames';
|
||||
import { FormattedMessage, useLiveDemo, useSiteData } from 'dumi';
|
||||
import LZString from 'lz-string';
|
||||
|
||||
import RiddleButton from './RiddleButton';
|
||||
import useLocation from '../../../hooks/useLocation';
|
||||
import BrowserFrame from '../../common/BrowserFrame';
|
||||
import ClientOnly from '../../common/ClientOnly';
|
||||
@ -20,6 +19,7 @@ import ExternalLinkIcon from '../../icons/ExternalLinkIcon';
|
||||
import DemoContext from '../../slots/DemoContext';
|
||||
import type { SiteContextProps } from '../../slots/SiteContext';
|
||||
import SiteContext from '../../slots/SiteContext';
|
||||
import CodeBlockButton from './CodeBlockButton';
|
||||
import type { AntdPreviewerProps } from './Previewer';
|
||||
|
||||
const { ErrorBoundary } = Alert;
|
||||
@ -253,6 +253,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
|
||||
.join(';'),
|
||||
js_pre_processor: 'typescript',
|
||||
};
|
||||
|
||||
// Reorder source code
|
||||
let parsedSourceCode = suffix === 'tsx' ? entryCode : jsx;
|
||||
let importReactContent = "import React from 'react';";
|
||||
@ -403,13 +404,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
|
||||
<CodeSandboxIcon className="code-box-codesandbox" />
|
||||
</Tooltip>
|
||||
</form>
|
||||
<RiddleButton
|
||||
title={localizedTitle}
|
||||
dependencies={dependencies}
|
||||
jsx={jsx}
|
||||
track={track}
|
||||
asset={asset}
|
||||
/>
|
||||
<CodeBlockButton title={localizedTitle} dependencies={dependencies} jsx={jsx} />
|
||||
<Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
|
||||
<span
|
||||
className="code-box-code-action"
|
||||
|
||||
@ -282,12 +282,13 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-riddle {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
&-codeblock {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
&-codesandbox {
|
||||
|
||||
@ -72,6 +72,9 @@ const GlobalLayout: React.FC = () => {
|
||||
bannerVisible: false,
|
||||
});
|
||||
|
||||
// TODO: This can be remove in v6
|
||||
const useCssVar = searchParams.get('cssVar') !== 'false';
|
||||
|
||||
const updateSiteConfig = useCallback(
|
||||
(props: SiteState) => {
|
||||
setSiteState((prev) => ({ ...prev, ...props }));
|
||||
@ -152,8 +155,8 @@ const GlobalLayout: React.FC = () => {
|
||||
() => ({
|
||||
algorithm: getAlgorithm(theme),
|
||||
token: { motion: !theme.includes('motion-off') },
|
||||
cssVar: true,
|
||||
hashed: false,
|
||||
cssVar: useCssVar,
|
||||
hashed: !useCssVar,
|
||||
}),
|
||||
[theme],
|
||||
);
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
"app.demo.codepen": "Open in CodePen",
|
||||
"app.demo.codesandbox": "Open in CodeSandbox",
|
||||
"app.demo.stackblitz": "Open in Stackblitz",
|
||||
"app.demo.riddle": "Open in Riddle",
|
||||
"app.demo.codeblock": "Open in Hitu",
|
||||
"app.demo.separate": "Open in a new window",
|
||||
"app.demo.online": "Online Address",
|
||||
"app.home.introduce": "A design system for enterprise-level products. Create an efficient and enjoyable work experience.",
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
"app.demo.codepen": "在 CodePen 中打开",
|
||||
"app.demo.codesandbox": "在 CodeSandbox 中打开",
|
||||
"app.demo.stackblitz": "在 Stackblitz 中打开",
|
||||
"app.demo.riddle": "在 Riddle 中打开",
|
||||
"app.demo.codeblock": "在海兔中打开",
|
||||
"app.demo.separate": "在新窗口打开",
|
||||
"app.demo.online": "线上地址",
|
||||
"app.home.introduce": "企业级产品设计体系，创造高效愉悦的工作体验",
|
||||
|
||||
1
.jest.js
1
.jest.js
@ -5,6 +5,7 @@ const compileModules = [
|
||||
'@ant-design',
|
||||
'countup.js',
|
||||
'.pnpm',
|
||||
'@asamuzakjp/css-color',
|
||||
];
|
||||
|
||||
const ignoreList = [];
|
||||
|
||||
@ -22,8 +22,10 @@ tag: vVERSION
|
||||
- 🔥 TreeSelect support `maxCount` to limit the maximum number of selections. [#51759](https://github.com/ant-design/ant-design/pull/51759) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🔥 Modal `width` support responsive size. [#51653](https://github.com/ant-design/ant-design/pull/51653) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🔥 Splitter support `lazy` mode. [#51557](https://github.com/ant-design/ant-design/pull/51557) [@OysterD3](https://github.com/OysterD3)
|
||||
- 🔥 Button `color` support full color palette. [#51550](https://github.com/ant-design/ant-design/pull/51550) [@OysterD3](https://github.com/OysterD3) <img width="520" alt="Button Colors" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ApyYQpXQQfgAAAAAAAAAAAAADgCCAQ/original">
|
||||
- 🆕 Button support `loadingIcon` to customize loading icon. [#51758](https://github.com/ant-design/ant-design/pull/51758) [@zhangchao-wooc](https://github.com/zhangchao-wooc)
|
||||
- Button
|
||||
- 🔥 Button `color` support full color palette. [#51550](https://github.com/ant-design/ant-design/pull/51550) [@OysterD3](https://github.com/OysterD3)
|
||||
<img width="520" alt="Button Colors" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ApyYQpXQQfgAAAAAAAAAAAAADgCCAQ/original">
|
||||
- 🆕 Button support `loading={{ icon: ReactNode }}` to customize loading icon. [#51758](https://github.com/ant-design/ant-design/pull/51758) [@zhangchao-wooc](https://github.com/zhangchao-wooc)
|
||||
- Menu
|
||||
- 🐞 Fix Menu `extra` font size and vertical align issue. [#52217](https://github.com/ant-design/ant-design/pull/52217) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Menu add token `subMenuItemSelectedColor` to resolve submenu title color being overrided by `itemSelectedColor`. [#52182](https://github.com/ant-design/ant-design/pull/52182) [@afc163](https://github.com/afc163)
|
||||
|
||||
@ -22,8 +22,10 @@ tag: vVERSION
|
||||
- 🔥 TreeSelect 新增 `maxCount` 属性以限制最大选择数量。[#51759](https://github.com/ant-design/ant-design/pull/51759) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🔥 Modal `width` 支持响应式尺寸。[#51653](https://github.com/ant-design/ant-design/pull/51653) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🔥 Splitter 增加 `lazy` 模式。[#51557](https://github.com/ant-design/ant-design/pull/51557) [@OysterD3](https://github.com/OysterD3)
|
||||
- 🔥 Button `color` 属性支持完整色板。[#51550](https://github.com/ant-design/ant-design/pull/51550) [@OysterD3](https://github.com/OysterD3) <img width="520" alt="Button Colors" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ApyYQpXQQfgAAAAAAAAAAAAADgCCAQ/original">
|
||||
- 🆕 Button 组件新增 `loadingIcon` 以自定义加载图标。[#51758](https://github.com/ant-design/ant-design/pull/51758) [@zhangchao-wooc](https://github.com/zhangchao-wooc)
|
||||
- Button
|
||||
- 🔥 Button `color` 属性支持完整色板。[#51550](https://github.com/ant-design/ant-design/pull/51550) [@OysterD3](https://github.com/OysterD3)
|
||||
<img width="520" alt="Button Colors" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ApyYQpXQQfgAAAAAAAAAAAAADgCCAQ/original">
|
||||
- 🆕 Button 组件新增 `loading={{ icon: ReactNode }}` 以自定义加载图标。[#51758](https://github.com/ant-design/ant-design/pull/51758) [@zhangchao-wooc](https://github.com/zhangchao-wooc)
|
||||
- Menu
|
||||
- 🆕 Menu 新增 token `subMenuItemSelectedColor`，避免 `itemSelectedColor` 覆盖子菜单标题样式。[#52182](https://github.com/ant-design/ant-design/pull/52182) [@afc163](https://github.com/afc163)
|
||||
- 🐞 修复 Menu `extra` 字体大小和垂直居中对齐问题。[#52217](https://github.com/ant-design/ant-design/pull/52217) [@guoyunhe](https://github.com/guoyunhe)
|
||||
@ -52,7 +54,7 @@ tag: vVERSION
|
||||
- 🐞 修复 Slider 当 `tipFormatter` 未定义时导致崩溃的问题。[#52184](https://github.com/ant-design/ant-design/pull/52184) [@thinkasany](https://github.com/thinkasany)
|
||||
- 💄 优化 Collapse 聚焦样式以及折叠项圆角。[#52086](https://github.com/ant-design/ant-design/pull/52086) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- ⌨️ 为 Radio.Group 添加默认 `name` 属性以提升无障碍体验。[#52076](https://github.com/ant-design/ant-design/pull/52076) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- ⌨️ Input.Search添加默认 `type=search` 类型。[#52083](https://github.com/ant-design/ant-design/pull/52083) [@Kaikiat1126](https://github.com/Kaikiat1126)
|
||||
- ⌨️ Input.Search 添加默认 `type=search` 类型。[#52083](https://github.com/ant-design/ant-design/pull/52083) [@Kaikiat1126](https://github.com/Kaikiat1126)
|
||||
- ⌨️ 优化 Tabs 键盘操作时的焦点样式。[#52002](https://github.com/ant-design/ant-design/pull/52002) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- Segmented
|
||||
- ⌨️ 优化 Segmented 聚焦样式以提升无障碍体验。[#51934](https://github.com/ant-design/ant-design/pull/51934) [@aojunhao123](https://github.com/aojunhao123)
|
||||
@ -278,17 +280,21 @@ tag: vVERSION
|
||||
|
||||
`2024-09-22`
|
||||
|
||||
- 🔥 **全新 Splitter 区域分割组件**，自由拖拽调整区域大小。[#50038](https://github.com/ant-design/ant-design/pull/50038) [@wanpan11](https://github.com/wanpan11) <img width="520" alt="Splitter" src="https://github.com/user-attachments/assets/25fc4e3c-1aa5-41bb-8f39-f34f7149e0f6">
|
||||
- 🔥 **全新 Splitter 区域分割组件**，自由拖拽调整区域大小。[#50038](https://github.com/ant-design/ant-design/pull/50038) [@wanpan11](https://github.com/wanpan11)
|
||||
<img width="520" alt="Splitter" src="https://github.com/user-attachments/assets/25fc4e3c-1aa5-41bb-8f39-f34f7149e0f6">
|
||||
- Button
|
||||
- 🔥 Button 支持 `variant` 变体和 `color` 颜色属性，以支持更多组合样式。[#50051](https://github.com/ant-design/ant-design/pull/50051) [@coding-ice](https://github.com/coding-ice) <img width="420" alt="Button" src="https://github.com/user-attachments/assets/cd5cb7fb-25e8-445f-b217-7fdd4ae0f9b4">
|
||||
- 🔥 Button 支持 `variant` 变体和 `color` 颜色属性，以支持更多组合样式。[#50051](https://github.com/ant-design/ant-design/pull/50051) [@coding-ice](https://github.com/coding-ice)
|
||||
<img width="420" alt="Button" src="https://github.com/user-attachments/assets/cd5cb7fb-25e8-445f-b217-7fdd4ae0f9b4">
|
||||
- 💄 Button 添加 `textColor`、`textHoverColor` 和 `textActiveColor` 三个 token。[#47870](https://github.com/ant-design/ant-design/pull/47870) [@madocto](https://github.com/madocto)
|
||||
- FloatButton
|
||||
- 🆕 FloatButton 组件支持 `placement` 属性，支持从四个方向弹出菜单。（实现方式改为 `position: absolute` + flex 布局，可能会对你现有的布局造成 breaking change，请注意兼容）[#50407](https://github.com/ant-design/ant-design/pull/50407) [@li-jia-nan](https://github.com/li-jia-nan) <img width="300" alt="float button" src="https://github.com/user-attachments/assets/4b53c0f6-7bdd-4e2a-91cc-2fb804f6e6d3" />
|
||||
- 🆕 FloatButton 组件支持 `placement` 属性，支持从四个方向弹出菜单。（实现方式改为 `position: absolute` + flex 布局，可能会对你现有的布局造成 breaking change，请注意兼容）[#50407](https://github.com/ant-design/ant-design/pull/50407) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
<img width="300" alt="float button" src="https://github.com/user-attachments/assets/4b53c0f6-7bdd-4e2a-91cc-2fb804f6e6d3" />
|
||||
- 💄 统一 FloatButton 和 FloatButton.Group 的按钮圆角。[#50513](https://github.com/ant-design/ant-design/pull/50513) [@Layouwen](https://github.com/Layouwen)
|
||||
- 💄 FloatButton 组件的 `z-index` 加入 `useZIndex` 管理，兼容弹层类组件。[#50311](https://github.com/ant-design/ant-design/pull/50311) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🆕 FloatButton 支持传入 `htmlType` 属性。[#50892](https://github.com/ant-design/ant-design/pull/50892) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- Menu
|
||||
- 🆕 Menu.Item 和 Dropdown 的 menu 支持 `extra` 属性。[#50431](https://github.com/ant-design/ant-design/pull/50431) [@coding-ice](https://github.com/coding-ice) <img width="259" alt="menu extra" src="https://github.com/user-attachments/assets/fee57c43-b948-4f98-8a6b-0d94094a8a65">
|
||||
- 🆕 Menu.Item 和 Dropdown 的 menu 支持 `extra` 属性。[#50431](https://github.com/ant-design/ant-design/pull/50431) [@coding-ice](https://github.com/coding-ice)
|
||||
<img width="259" alt="menu extra" src="https://github.com/user-attachments/assets/fee57c43-b948-4f98-8a6b-0d94094a8a65">
|
||||
- 🐞 修复 Menu `popupStyle` 在 SubMenu 上失效的问题。[#50922](https://github.com/ant-design/ant-design/pull/50922) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- Table
|
||||
- 🆕 Table 列支持配置 `minWidth` 属性。[#50416](https://github.com/ant-design/ant-design/pull/50416) [@linxianxi](https://github.com/linxianxi)
|
||||
@ -319,7 +325,8 @@ tag: vVERSION
|
||||
- 💄 Select 组件新增一些 token 以支持自定义 hover 和 focus 样式。[#50951](https://github.com/ant-design/ant-design/pull/50951) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 🐞 修复 Select 搜索模式下搜索词内容覆盖右侧图标的问题。[#50917](https://github.com/ant-design/ant-design/pull/50917) [@yezhonghu0503](https://github.com/yezhonghu0503)
|
||||
- 🐞 修复 Select 同时启用 `allowClear` 和 `variant="filled"` 时清除图标多余的白色背景的问题。[#50916](https://github.com/ant-design/ant-design/pull/50916) [@thinkasany](https://github.com/thinkasany)
|
||||
- 🆕 Segmented 新增 `vertical` 属性以支持垂直模式，并优化了可访问性。[#50708](https://github.com/ant-design/ant-design/pull/50708) [@liangchaofei](https://github.com/liangchaofei) <img width="72" alt="Segmented vertical demo" src="https://github.com/user-attachments/assets/c1b0f971-9966-48d4-b641-4fd476c59513">
|
||||
- 🆕 Segmented 新增 `vertical` 属性以支持垂直模式，并优化了可访问性。[#50708](https://github.com/ant-design/ant-design/pull/50708) [@liangchaofei](https://github.com/liangchaofei)
|
||||
<img width="72" alt="Segmented vertical demo" src="https://github.com/user-attachments/assets/c1b0f971-9966-48d4-b641-4fd476c59513">
|
||||
- 🆕 Radio.Group 支持 `block` 属性以撑满一行。[#50828](https://github.com/ant-design/ant-design/pull/50828) [@yuanliu147](https://github.com/yuanliu147)
|
||||
- 🆕 ConfigProvider 支持配置 Splitter 组件的 `className` 和 `style` 属性。[#50855](https://github.com/ant-design/ant-design/pull/50855) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🆕 Image 新增 `onActive` 到 `toolbarRender` 以切换图片 。[#50812](https://github.com/ant-design/ant-design/pull/50812) [@madocto](https://github.com/madocto)
|
||||
|
||||
@ -493,7 +493,7 @@ exports[`renders components/button/demo/color-variant.tsx extend context correct
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-solid ant-btn-sm"
|
||||
@ -545,7 +545,7 @@ exports[`renders components/button/demo/color-variant.tsx extend context correct
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-solid ant-btn-sm"
|
||||
@ -597,7 +597,7 @@ exports[`renders components/button/demo/color-variant.tsx extend context correct
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-solid ant-btn-sm"
|
||||
|
||||
@ -485,7 +485,7 @@ exports[`renders components/button/demo/color-variant.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-solid ant-btn-sm"
|
||||
@ -537,7 +537,7 @@ exports[`renders components/button/demo/color-variant.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-solid ant-btn-sm"
|
||||
@ -589,7 +589,7 @@ exports[`renders components/button/demo/color-variant.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-solid ant-btn-sm"
|
||||
|
||||
@ -68,7 +68,7 @@ const App: React.FC = () => {
|
||||
Link
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex gap="middle" wrap>
|
||||
<Flex gap="small" wrap>
|
||||
<Button color="pink" variant="solid">
|
||||
Solid
|
||||
</Button>
|
||||
@ -88,7 +88,7 @@ const App: React.FC = () => {
|
||||
Link
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex gap="middle" wrap>
|
||||
<Flex gap="small" wrap>
|
||||
<Button color="purple" variant="solid">
|
||||
Solid
|
||||
</Button>
|
||||
@ -108,8 +108,7 @@ const App: React.FC = () => {
|
||||
Link
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
<Flex gap="middle" wrap>
|
||||
<Flex gap="small" wrap>
|
||||
<Button color="cyan" variant="solid">
|
||||
Solid
|
||||
</Button>
|
||||
|
||||
@ -309,7 +309,7 @@ const genPresetColorStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
|
||||
const lightHoverColor = token[`${colorKey}2`];
|
||||
const lightBorderColor = token[`${colorKey}3`];
|
||||
const activeColor = token[`${colorKey}7`];
|
||||
const boxShadow = `0 ${token.controlOutlineWidth} 0 ${token[`${colorKey}1`]}`;
|
||||
const boxShadow = `0 ${unit(token.controlOutlineWidth)} 0 ${token[`${colorKey}1`]}`;
|
||||
|
||||
return {
|
||||
...prev,
|
||||
|
||||
@ -41604,7 +41604,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -41670,7 +41670,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -41764,7 +41764,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -41830,7 +41830,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -41924,7 +41924,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -41990,7 +41990,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -42084,7 +42084,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -42150,7 +42150,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -42244,7 +42244,7 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -42310,7 +42310,7 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
|
||||
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -42404,7 +42404,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -42470,7 +42470,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -42564,7 +42564,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last"
|
||||
class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last prefix-Tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -42630,7 +42630,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last"
|
||||
class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last prefix-Tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -42770,7 +42770,7 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
|
||||
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -42981,7 +42981,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
|
||||
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -43127,7 +43127,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
|
||||
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -43273,7 +43273,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
|
||||
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -43419,7 +43419,7 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-active ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-active ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -43565,7 +43565,7 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="prefix-TreeSelect-tree-treenode prefix-TreeSelect-tree-treenode-switcher-close prefix-TreeSelect-tree-treenode-active prefix-TreeSelect-tree-treenode-leaf-last"
|
||||
class="prefix-TreeSelect-tree-treenode prefix-TreeSelect-tree-treenode-switcher-close prefix-TreeSelect-tree-treenode-active prefix-TreeSelect-tree-treenode-leaf-last prefix-TreeSelect-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
@ -28406,7 +28406,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
@ -76,12 +76,12 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
|
||||
| pull | 栅格向左移动格数 | number | 0 | |
|
||||
| push | 栅格向右移动格数 | number | 0 | |
|
||||
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | |
|
||||
| xs | `屏幕 < 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
| sm | `屏幕 ≥ 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
| md | `屏幕 ≥ 768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
| lg | `屏幕 ≥ 992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
| xl | `屏幕 ≥ 1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
| xxl | `屏幕 ≥ 1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
| xs | `窗口宽度 < 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
| sm | `窗口宽度 ≥ 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
| md | `窗口宽度 ≥ 768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
| lg | `窗口宽度 ≥ 992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
| xl | `窗口宽度 ≥ 1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
| xxl | `窗口宽度 ≥ 1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
|
||||
|
||||
您可以使用 [主题定制](/docs/react/customize-theme-cn) 修改 `screen[XS|SM|MD|LG|XL|XXL]` 来修改断点值（自 5.1.0 起，[codesandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)）。
|
||||
|
||||
|
||||
@ -74,7 +74,7 @@ const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
overflow: 'hidden',
|
||||
},
|
||||
|
||||
'&-trigger': {
|
||||
[`${componentCls}-zero-width-trigger`]: {
|
||||
position: 'absolute',
|
||||
top: headerHeight,
|
||||
insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
|
||||
@ -139,9 +139,7 @@ const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
|
||||
export default genStyleHooks(
|
||||
['Layout', 'Sider'],
|
||||
(token) => ({
|
||||
[`${token.antCls}-layout`]: genSiderStyle(token),
|
||||
}),
|
||||
(token) => [genSiderStyle(token)],
|
||||
prepareComponentToken,
|
||||
{
|
||||
deprecatedTokens: DEPRECATED_TOKENS,
|
||||
|
||||
@ -8589,7 +8589,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -8621,7 +8621,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -8653,7 +8653,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
@ -19,6 +19,7 @@ const App: React.FC = () => {
|
||||
{ label: 'Disabled', value: 'disabled' },
|
||||
{ label: 'Bamboo', value: 'bamboo' },
|
||||
]}
|
||||
virtual={false}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
|
||||
@ -38,6 +38,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
|
||||
const slideUpLeaveActive = `&${antCls}-slide-up-leave${antCls}-slide-up-leave-active`;
|
||||
|
||||
const dropdownPlacementCls = `${componentCls}-dropdown-placement-`;
|
||||
const selectedItemCls = `${selectItemCls}-option-selected`;
|
||||
|
||||
return [
|
||||
{
|
||||
@ -132,17 +133,8 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
|
||||
[`${selectItemCls}-option-state`]: {
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
|
||||
[`&:has(+ ${selectItemCls}-option-selected:not(${selectItemCls}-option-disabled))`]: {
|
||||
borderEndStartRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
|
||||
[`& + ${selectItemCls}-option-selected:not(${selectItemCls}-option-disabled)`]: {
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'&-disabled': {
|
||||
[`&${selectItemCls}-option-selected`]: {
|
||||
backgroundColor: token.colorBgContainerDisabled,
|
||||
@ -163,6 +155,17 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
|
||||
},
|
||||
},
|
||||
|
||||
// https://github.com/ant-design/ant-design/pull/46646
|
||||
[`${selectedItemCls}:has(+ ${selectedItemCls})`]: {
|
||||
borderEndStartRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
|
||||
[`& + ${selectedItemCls}`]: {
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: 0,
|
||||
},
|
||||
},
|
||||
|
||||
// =========================== RTL ===========================
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
|
||||
@ -8585,7 +8585,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-selected"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-selected ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -8616,7 +8616,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -8695,7 +8695,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
@ -475,7 +475,7 @@ describe('Splitter', () => {
|
||||
expectClick(container.querySelector('.ant-splitter-bar-collapse-start')!, [50, 50]);
|
||||
});
|
||||
|
||||
it('collapsible with min', async () => {
|
||||
it('collapsible with cache', async () => {
|
||||
const onResize = jest.fn();
|
||||
const onResizeEnd = jest.fn();
|
||||
|
||||
@ -509,8 +509,55 @@ describe('Splitter', () => {
|
||||
onResize.mockReset();
|
||||
onResizeEnd.mockReset();
|
||||
fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-end')!);
|
||||
expect(onResize).toHaveBeenCalledWith([5, 95]);
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([5, 95]);
|
||||
expect(onResize).toHaveBeenCalledWith([20, 80]);
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([20, 80]);
|
||||
expect(container.querySelector('.ant-splitter-bar-dragger-disabled')).toBeFalsy();
|
||||
|
||||
// Collapse right
|
||||
onResize.mockReset();
|
||||
onResizeEnd.mockReset();
|
||||
fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-end')!);
|
||||
expect(onResize).toHaveBeenCalledWith([100, 0]);
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([100, 0]);
|
||||
expect(container.querySelector('.ant-splitter-bar-dragger-disabled')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('collapsible with fallback', async () => {
|
||||
const onResize = jest.fn();
|
||||
const onResizeEnd = jest.fn();
|
||||
|
||||
const { container } = render(
|
||||
<SplitterDemo
|
||||
items={[
|
||||
{
|
||||
defaultSize: 10,
|
||||
collapsible: true,
|
||||
min: 15,
|
||||
},
|
||||
{
|
||||
collapsible: true,
|
||||
min: '80%',
|
||||
},
|
||||
]}
|
||||
onResize={onResize}
|
||||
onResizeEnd={onResizeEnd}
|
||||
/>,
|
||||
);
|
||||
|
||||
await resizeSplitter();
|
||||
|
||||
// Collapse left
|
||||
fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-start')!);
|
||||
expect(onResize).toHaveBeenCalledWith([0, 100]);
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
|
||||
expect(container.querySelector('.ant-splitter-bar-dragger-disabled')).toBeTruthy();
|
||||
|
||||
// Collapse back
|
||||
onResize.mockReset();
|
||||
onResizeEnd.mockReset();
|
||||
fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-end')!);
|
||||
expect(onResize).toHaveBeenCalledWith([2.5, 97.5]);
|
||||
expect(onResizeEnd).toHaveBeenCalledWith([2.5, 97.5]);
|
||||
expect(container.querySelector('.ant-splitter-bar-dragger-disabled')).toBeFalsy();
|
||||
|
||||
// Collapse right
|
||||
|
||||
@ -29,6 +29,7 @@ export default function useResize(
|
||||
|
||||
// Real px sizes
|
||||
const [cacheSizes, setCacheSizes] = React.useState<number[]>([]);
|
||||
const cacheCollapsedSize = React.useRef<number[]>([]);
|
||||
|
||||
/**
|
||||
* When start drag, check the direct is `start` or `end`.
|
||||
@ -129,6 +130,7 @@ export default function useResize(
|
||||
// Collapse directly
|
||||
currentSizes[currentIndex] = 0;
|
||||
currentSizes[targetIndex] += currentSize;
|
||||
cacheCollapsedSize.current[index] = currentSize;
|
||||
} else {
|
||||
const totalSize = currentSize + targetSize;
|
||||
|
||||
@ -141,8 +143,23 @@ export default function useResize(
|
||||
const limitEnd = Math.min(currentSizeMax, totalSize - targetSizeMin);
|
||||
const halfOffset = (limitEnd - limitStart) / 2;
|
||||
|
||||
currentSizes[currentIndex] -= halfOffset;
|
||||
currentSizes[targetIndex] += halfOffset;
|
||||
const targetCacheCollapsedSize = cacheCollapsedSize.current[index];
|
||||
const currentCacheCollapsedSize = totalSize - targetCacheCollapsedSize;
|
||||
|
||||
const shouldUseCache =
|
||||
targetCacheCollapsedSize &&
|
||||
targetCacheCollapsedSize <= targetSizeMax &&
|
||||
targetCacheCollapsedSize >= targetSizeMin &&
|
||||
currentCacheCollapsedSize <= currentSizeMax &&
|
||||
currentCacheCollapsedSize >= currentSizeMin;
|
||||
|
||||
if (shouldUseCache) {
|
||||
currentSizes[targetIndex] = targetCacheCollapsedSize;
|
||||
currentSizes[currentIndex] = currentCacheCollapsedSize;
|
||||
} else {
|
||||
currentSizes[currentIndex] -= halfOffset;
|
||||
currentSizes[targetIndex] += halfOffset;
|
||||
}
|
||||
}
|
||||
|
||||
updateSizes(currentSizes);
|
||||
|
||||
@ -10424,7 +10424,7 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -10512,7 +10512,7 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -10550,7 +10550,7 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -10642,7 +10642,7 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -10680,7 +10680,7 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -11398,7 +11398,7 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -11432,7 +11432,7 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -11466,7 +11466,7 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
@ -11957,7 +11957,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -12045,7 +12045,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -12083,7 +12083,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -12121,7 +12121,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -12155,7 +12155,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -12189,7 +12189,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
@ -7885,7 +7885,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -7973,7 +7973,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -8011,7 +8011,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -8049,7 +8049,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -8083,7 +8083,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -8117,7 +8117,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
@ -171,7 +171,7 @@ exports[`renders components/tree-select/demo/async.tsx extend context correctly
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -405,7 +405,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -436,7 +436,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -467,7 +467,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -498,7 +498,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -529,7 +529,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -560,7 +560,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -639,7 +639,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1714,7 +1714,7 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1745,7 +1745,7 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1824,7 +1824,7 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2156,7 +2156,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2187,7 +2187,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2266,7 +2266,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2471,7 +2471,7 @@ exports[`renders components/tree-select/demo/render-panel.tsx extend context cor
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2988,7 +2988,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3019,7 +3019,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3098,7 +3098,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3345,7 +3345,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3376,7 +3376,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3455,7 +3455,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3656,7 +3656,7 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3684,7 +3684,7 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3712,7 +3712,7 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
@ -153,7 +153,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -195,7 +195,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -294,7 +294,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -498,7 +498,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -539,7 +539,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -580,7 +580,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -679,7 +679,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -720,7 +720,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -761,7 +761,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -802,7 +802,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -894,7 +894,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1029,7 +1029,7 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1068,7 +1068,7 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1221,7 +1221,7 @@ exports[`renders components/tree/demo/customized-icon.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1272,7 +1272,7 @@ exports[`renders components/tree/demo/customized-icon.tsx extend context correct
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1459,7 +1459,7 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1532,7 +1532,7 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1695,7 +1695,7 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1768,7 +1768,7 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2151,7 +2151,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2232,7 +2232,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2313,7 +2313,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2491,7 +2491,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2662,7 +2662,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2922,7 +2922,7 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2976,7 +2976,7 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3030,7 +3030,7 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3155,7 +3155,7 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3273,7 +3273,7 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3454,7 +3454,7 @@ exports[`renders components/tree/demo/dynamic.tsx extend context correctly 1`] =
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3836,7 +3836,7 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3887,7 +3887,7 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3943,7 +3943,7 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4304,7 +4304,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4346,7 +4346,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4445,7 +4445,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4683,7 +4683,7 @@ exports[`renders components/tree/demo/search.tsx extend context correctly 1`] =
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4852,7 +4852,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4887,7 +4887,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4922,7 +4922,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
@ -153,7 +153,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -195,7 +195,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -294,7 +294,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -496,7 +496,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -537,7 +537,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -578,7 +578,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -677,7 +677,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -718,7 +718,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -759,7 +759,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -800,7 +800,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -892,7 +892,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1025,7 +1025,7 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1064,7 +1064,7 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1215,7 +1215,7 @@ exports[`renders components/tree/demo/customized-icon.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1266,7 +1266,7 @@ exports[`renders components/tree/demo/customized-icon.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1451,7 +1451,7 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1524,7 +1524,7 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1687,7 +1687,7 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1760,7 +1760,7 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2141,7 +2141,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2222,7 +2222,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2303,7 +2303,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2481,7 +2481,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2652,7 +2652,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2910,7 +2910,7 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2964,7 +2964,7 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3018,7 +3018,7 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3143,7 +3143,7 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3261,7 +3261,7 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable ant-tree-treenode-leaf"
|
||||
draggable="true"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3440,7 +3440,7 @@ exports[`renders components/tree/demo/dynamic.tsx correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3723,7 +3723,7 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3774,7 +3774,7 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -3830,7 +3830,7 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4189,7 +4189,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4231,7 +4231,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4330,7 +4330,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4566,7 +4566,7 @@ exports[`renders components/tree/demo/search.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4733,7 +4733,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4768,7 +4768,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -4803,7 +4803,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
@ -177,7 +177,7 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -343,7 +343,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -394,7 +394,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -512,7 +512,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -563,7 +563,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -905,7 +905,7 @@ exports[`Directory Tree expand with state control click 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1068,7 +1068,7 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1298,7 +1298,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1349,7 +1349,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1512,7 +1512,7 @@ exports[`Directory Tree group select 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1563,7 +1563,7 @@ exports[`Directory Tree group select 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1681,7 +1681,7 @@ exports[`Directory Tree group select 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1732,7 +1732,7 @@ exports[`Directory Tree group select 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1895,7 +1895,7 @@ exports[`Directory Tree group select 2`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -1946,7 +1946,7 @@ exports[`Directory Tree group select 2`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2064,7 +2064,7 @@ exports[`Directory Tree group select 2`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2115,7 +2115,7 @@ exports[`Directory Tree group select 2`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2366,7 +2366,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2417,7 +2417,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2535,7 +2535,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -2586,7 +2586,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
@ -293,7 +293,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -328,7 +328,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -363,7 +363,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -712,7 +712,7 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
@ -740,7 +740,7 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
|
||||
draggable="false"
|
||||
role="treeitem"
|
||||
>
|
||||
|
||||
49
docs/blog/visual-regression.en-US.md
Normal file
49
docs/blog/visual-regression.en-US.md
Normal file
@ -0,0 +1,49 @@
|
||||
---
|
||||
title: 👀 Visual Regression Testing
|
||||
date: 2025-01-05
|
||||
author: Wxh16144
|
||||
---
|
||||
|
||||
Visual Regression Testing is a software testing technique that focuses on detecting visual changes and differences in the user interface of web applications or websites. It involves capturing screenshots of web pages at different stages of development and comparing them to identify any unexpected visual regressions caused by code changes or updates.
|
||||
|
||||
## Baseline Screenshots
|
||||
|
||||
The main goal of Ant Design's visual regression testing is to detect visual changes in components and avoid visual issues introduced by PR changes. We use [jest-puppeteer](https://jestjs.io/docs/puppeteer) as our testing framework. By combining Puppeteer with Jest, we take screenshots of each component demo and compare them with baseline screenshots.
|
||||
|
||||
You can find visual regression test code in `__tests__/image.test.ts` under each component. You can run visual screenshots in the antd repository using the following command:
|
||||
|
||||
```bash
|
||||
npm run test:image # Screenshots will be saved in the imageSnapshots directory. For specific component screenshots, use: npm run test:image -- components/button
|
||||
```
|
||||
|
||||
## Visual Regression Solutions
|
||||
|
||||
### Argos
|
||||
|
||||
Initially, we used [Argos](https://argos-ci.com/) as our visual regression testing solution. However, Argos changed their pricing strategy, and with antd triggering visual regression tests on every PR, comparing nearly 6,000 screenshots each time, the cost became unsustainable for us.
|
||||
|
||||
### Self-hosted
|
||||
|
||||
We built our own visual regression testing solution using jest-puppeteer mentioned earlier. We take screenshots of each component demo using four themes: `dark`, `light`, `compact`, and `cssVar`, then upload these screenshots to [Alibaba Cloud OSS](https://www.aliyun.com/product/oss) as baseline screenshots.
|
||||
|
||||
Using GitHub Actions for continuous integration, we automatically capture and upload screenshots to OSS whenever the base branch code changes, ensuring the baseline screenshots stay up-to-date.
|
||||
|
||||
For branches requiring visual regression testing, we use [pixelmatch](https://github.com/mapbox/pixelmatch) to compare current screenshots with baseline screenshots. If differences are found, difference screenshots are generated, and the difference report is uploaded to OSS.
|
||||
|
||||
Further leveraging GitHub Actions, we implement baseline screenshot comparison in PRs. If visual differences are detected, the CI uploads the difference screenshots and report to OSS, displays the visual differences in the PR, and marks it as failed, requiring developers to fix the issues.
|
||||
|
||||
|
||||
|
||||
## Local Visual Regression Testing
|
||||
|
||||
When developing locally and preparing to submit a PR contribution, we can run visual regression tests in advance using the following command:
|
||||
|
||||
```bash
|
||||
npm run test:visual-regression:local # Follow the prompts to select components for visual regression testing
|
||||
```
|
||||
|
||||
## References
|
||||
|
||||
- For visual regression CI implementation, refer to [.github/workflows/visual-regression-\*.yml](https://github.com/search?q=repo%3Aant-design%2Fant-design%20path%3A%2F%5E%5C.github%5C%2Fworkflows%5C%2F%2F%20Visual%20Regression&type=code)
|
||||
- For baseline screenshot implementation, refer to [tests/shared/imageTest.tsx](https://github.com/ant-design/ant-design/blob/46a8eff/tests/shared/imageTest.tsx#L38)
|
||||
- For visual regression test code implementation, refer to [scripts/visual-regression](https://github.com/ant-design/ant-design/tree/46a8eff/scripts/visual-regression)
|
||||
49
docs/blog/visual-regression.zh-CN.md
Normal file
49
docs/blog/visual-regression.zh-CN.md
Normal file
@ -0,0 +1,49 @@
|
||||
---
|
||||
title: 👀 视觉回归测试
|
||||
date: 2025-01-05
|
||||
author: Wxh16144
|
||||
---
|
||||
|
||||
视觉回归测试（Visual Regression Testing）是一种软件测试技术，专注于检测 Web 应用程序或网站的用户界面中的视觉变化和差异, 它涉及在不同的开发阶段捕获网页的屏幕截图，并进行比较，用来识别由代码更改或更新引起的任何意外的视觉回归。
|
||||
|
||||
## 基准截图
|
||||
|
||||
Ant Design 视觉回归测试的主要目标是检测组件的视觉变化，避免 PR 改动引入的视觉问题。我们使用 [jest-puppeteer](https://jestjs.io/docs/puppeteer) 作为测试框架。将 Puppeteer 与 Jest 结合使用，对每一个组件 Demo 进行截图，然后与基准截图进行比较。
|
||||
|
||||
可以看到每个组件下的 `__tests__/image.test.ts` 里面包含了视觉回归测试的代码, 你可以通过以下命令在 antd 仓库中运行视觉截图:
|
||||
|
||||
```bash
|
||||
npm run test:image # 截图将会保存在 imageSnapshots 目录下, 指定组件截图可以使用 npm run test:image -- components/button
|
||||
```
|
||||
|
||||
## 视觉回归方案
|
||||
|
||||
### Argos
|
||||
|
||||
早期使用我们使用 [Argos](https://argos-ci.com/) 作为视觉回归测试的方案，但是 Argos 修改了收费策略，antd 在每次 PR 中都会触发视觉回归测试，每次对比将近 6,000 张截图，这样的费用是我们无法承受的。
|
||||
|
||||
### Self-hosted
|
||||
|
||||
我们自建了视觉回归测试的方案，利用前面提到的 jest-puppeteer，将每一个组件的 Demo 分别使用 `dark`、`light`、`compact` 以及 `cssVar` 四种主题进行截图，然后将截图上传到 [阿里云 OSS](https://www.aliyun.com/product/oss) 中，作为基准截图。
|
||||
|
||||
利用 GitHub Actions 持续集成，可以在每次基准分支的代码变动时，自动截图并上传到 OSS 中，这样就保证了基准截图的实时性。
|
||||
|
||||
对于需要进行视觉回归测试的分支，我们使用 [pixelmatch](https://github.com/mapbox/pixelmatch) 将当前截图与基准截图进行比较，如果有差异，将会生成差异截图，并将差异报告上传到 OSS 中。
|
||||
|
||||
进一步利用 GitHub Actions，实现在 PR 中对比基准截图，如果有视觉差异，CI 会将 PR 中的差异截图和报告上传到 OSS 中，在 PR 中展示视觉差异，同时标记为失败，需要开发者进行修复。
|
||||
|
||||
|
||||
|
||||
## 本地视觉回归测试
|
||||
|
||||
在本地开发，准备提交 PR 贡献时，我们也可以通过以下命令来事先进行视觉回归测试:
|
||||
|
||||
```bash
|
||||
npm run test:visual-regression:local # 按照提示选择组件进行视觉回归测试
|
||||
```
|
||||
|
||||
## 以上
|
||||
|
||||
- 视觉回归持续集成方案，可以参考 [.github/workflows/visual-regression-\*.yml](https://github.com/search?q=repo%3Aant-design%2Fant-design%20path%3A%2F%5E%5C.github%5C%2Fworkflows%5C%2F%2F%20Visual%20Regression&type=code)
|
||||
- 基准截图实现，可以参考 [tests/shared/imageTest.tsx](https://github.com/ant-design/ant-design/blob/46a8eff/tests/shared/imageTest.tsx#L38)
|
||||
- 视觉回归测试的代码实现，可以参考 [scripts/visual-regression](https://github.com/ant-design/ant-design/tree/46a8eff/scripts/visual-regression)
|
||||
21
package.json
21
package.json
@ -91,6 +91,7 @@
|
||||
"test:site-update": "npm run site && npm run test:site -- -u",
|
||||
"test:update": "jest --config .jest.js --no-cache -u",
|
||||
"test:visual-regression": "tsx scripts/visual-regression/build.ts",
|
||||
"test:visual-regression:local": "tsx scripts/visual-regression/local.ts",
|
||||
"token:meta": "tsx scripts/generate-token-meta.ts",
|
||||
"token:statistic": "tsx scripts/collect-token-statistic.ts",
|
||||
"tsc": "tsc --noEmit",
|
||||
@ -120,7 +121,7 @@
|
||||
"classnames": "^2.5.1",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"dayjs": "^1.11.11",
|
||||
"rc-cascader": "~3.32.0",
|
||||
"rc-cascader": "~3.33.0",
|
||||
"rc-checkbox": "~3.5.0",
|
||||
"rc-collapse": "~3.9.0",
|
||||
"rc-dialog": "~9.6.0",
|
||||
@ -135,7 +136,7 @@
|
||||
"rc-motion": "^2.9.5",
|
||||
"rc-notification": "~5.6.2",
|
||||
"rc-pagination": "~5.0.0",
|
||||
"rc-picker": "~4.9.0",
|
||||
"rc-picker": "~4.9.2",
|
||||
"rc-progress": "~4.0.0",
|
||||
"rc-rate": "~2.13.0",
|
||||
"rc-resize-observer": "^1.4.3",
|
||||
@ -144,12 +145,12 @@
|
||||
"rc-slider": "~11.1.8",
|
||||
"rc-steps": "~6.0.1",
|
||||
"rc-switch": "~4.1.0",
|
||||
"rc-table": "~7.50.1",
|
||||
"rc-table": "~7.50.2",
|
||||
"rc-tabs": "~15.5.0",
|
||||
"rc-textarea": "~1.9.0",
|
||||
"rc-tooltip": "~6.4.0",
|
||||
"rc-tree": "~5.12.4",
|
||||
"rc-tree-select": "~5.26.0",
|
||||
"rc-tree": "~5.13.0",
|
||||
"rc-tree-select": "~5.27.0",
|
||||
"rc-upload": "~4.8.1",
|
||||
"rc-util": "^5.44.3",
|
||||
"scroll-into-view-if-needed": "^3.1.0",
|
||||
@ -158,7 +159,7 @@
|
||||
"devDependencies": {
|
||||
"@ant-design/compatible": "^5.1.3",
|
||||
"@ant-design/happy-work-theme": "^1.0.0",
|
||||
"@ant-design/tools": "^18.0.2",
|
||||
"@ant-design/tools": "^18.0.3",
|
||||
"@ant-design/v5-patch-for-react-19": "^1.0.2",
|
||||
"@antfu/eslint-config": "^3.11.2",
|
||||
"@antv/g6": "^4.8.24",
|
||||
@ -234,6 +235,7 @@
|
||||
"dotenv": "^16.4.5",
|
||||
"dumi": "~2.4.17",
|
||||
"dumi-plugin-color-chunk": "^1.1.2",
|
||||
"env-paths": "^3.0.0",
|
||||
"eslint": "^9.15.0",
|
||||
"eslint-plugin-compat": "^6.0.1",
|
||||
"eslint-plugin-jest": "^28.9.0",
|
||||
@ -260,10 +262,10 @@
|
||||
"jest-image-snapshot": "^6.4.0",
|
||||
"jest-puppeteer": "^11.0.0",
|
||||
"jquery": "^3.7.1",
|
||||
"jsdom": "^25.0.1",
|
||||
"jsdom": "^26.0.0",
|
||||
"jsonml-to-react-element": "^1.1.11",
|
||||
"jsonml.js": "^0.1.0",
|
||||
"lint-staged": "^15.2.10",
|
||||
"lint-staged": "^15.3.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lunar-typescript": "^1.7.5",
|
||||
"lz-string": "^1.5.0",
|
||||
@ -274,6 +276,7 @@
|
||||
"open": "^10.1.0",
|
||||
"ora": "^8.1.0",
|
||||
"p-all": "^5.0.0",
|
||||
"package-manager-detector": "^0.2.8",
|
||||
"pixelmatch": "^6.0.0",
|
||||
"pngjs": "^7.0.0",
|
||||
"prettier": "^3.4.1",
|
||||
@ -346,11 +349,9 @@
|
||||
"mode": "npm"
|
||||
},
|
||||
"overrides": {
|
||||
"nwsapi": "2.2.13",
|
||||
"react-intl": "7.0.4"
|
||||
},
|
||||
"resolutions": {
|
||||
"nwsapi": "2.2.13",
|
||||
"react-intl": "7.0.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -144,7 +144,7 @@ const miscKeys = [
|
||||
}
|
||||
|
||||
// Filter not is changelog
|
||||
if (!line.trim().startsWith('-') && !line.includes('github.')) {
|
||||
if (!line.trim().startsWith('-') && !line.includes('github.') && !line.includes('img')) {
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
@ -270,13 +270,21 @@ function generateReport(
|
||||
return [mdStr, markdown2Html(mdStr)];
|
||||
}
|
||||
|
||||
let reportMdStr = `
|
||||
${commonHeader}
|
||||
${fullReport}
|
||||
|
||||
const summaryHeader = '<!-- summary -->';
|
||||
const tableHeader = `
|
||||
| Expected (Branch ${targetBranch}) | Actual (Current PR) | Diff |
|
||||
| --- | --- | --- |
|
||||
`.trim();
|
||||
`.trim();
|
||||
|
||||
let reportMdStr = [
|
||||
commonHeader,
|
||||
isLocalEnv ? false : `${fullReport}`,
|
||||
summaryHeader,
|
||||
'\n',
|
||||
tableHeader,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join('\n');
|
||||
|
||||
reportMdStr += '\n';
|
||||
|
||||
@ -316,9 +324,9 @@ ${fullReport}
|
||||
// tips for comment `Pass Visual Diff` will pass the CI
|
||||
if (!passed) {
|
||||
const summaryLine = [
|
||||
changedCount > 0 && `🔄 **${changedCount}** changed`,
|
||||
removedCount > 0 && `🛑 **${removedCount}** removed`,
|
||||
addedCount > 0 && `🆕 **${addedCount}** added`,
|
||||
changedCount > 0 && `🔄 \`${changedCount}\` changed`,
|
||||
removedCount > 0 && `🛑 \`${removedCount}\` removed`,
|
||||
addedCount > 0 && `🆕 \`${addedCount}\` added`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(', ');
|
||||
@ -333,6 +341,9 @@ ${fullReport}
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join('\n');
|
||||
|
||||
reportMdStr = reportMdStr.replace(summaryHeader, `> **📊 Summary:** ${summaryLine}`);
|
||||
fullVersionMd = fullVersionMd.replace(summaryHeader, `> **📊 Summary:** ${summaryLine}`);
|
||||
}
|
||||
|
||||
// convert fullVersionMd to html
|
||||
@ -411,7 +422,6 @@ async function boot() {
|
||||
const currentImgExists = await fse.exists(currentImgPath);
|
||||
if (!currentImgExists) {
|
||||
console.log(chalk.red(`⛔️ Missing image: ${compareImgName}\n`));
|
||||
// base img would use twice so we cannot move it
|
||||
await fse.copy(baseImgPath, path.join(baseImgReportDir, compareImgName));
|
||||
return {
|
||||
type: 'removed',
|
||||
@ -432,10 +442,8 @@ async function boot() {
|
||||
chalk.yellow(compareImgName),
|
||||
`${(mismatchedPxPercent * 100).toFixed(2)}%\n`,
|
||||
);
|
||||
// copy/move compare imgs(x2) to report dir
|
||||
// base img would use twice so we cannot move it
|
||||
await fse.copy(baseImgPath, path.join(baseImgReportDir, compareImgName));
|
||||
await fse.move(currentImgPath, path.join(currentImgReportDir, compareImgName));
|
||||
await fse.copy(currentImgPath, path.join(currentImgReportDir, compareImgName));
|
||||
|
||||
return {
|
||||
type: 'changed',
|
||||
@ -473,7 +481,7 @@ async function boot() {
|
||||
}
|
||||
|
||||
const newImgTask = newImgs.map((newImg) => async () => {
|
||||
await fse.move(
|
||||
await fse.copy(
|
||||
path.join(currentImgSourceDir, newImg),
|
||||
path.resolve(currentImgReportDir, newImg),
|
||||
);
|
||||
|
||||
255
scripts/visual-regression/local.ts
Normal file
255
scripts/visual-regression/local.ts
Normal file
@ -0,0 +1,255 @@
|
||||
/**
|
||||
* 本地运行视觉回归测试
|
||||
*/
|
||||
import path from 'path';
|
||||
import fs from 'fs-extra';
|
||||
import simpleGit from 'simple-git';
|
||||
import envPaths from 'env-paths';
|
||||
import fg from 'fast-glob';
|
||||
import minimist from 'minimist';
|
||||
import { Readable } from 'stream';
|
||||
import { finished } from 'stream/promises';
|
||||
import { extract } from 'tar';
|
||||
import { Octokit } from '@octokit/rest';
|
||||
import { spawnSync } from 'child_process';
|
||||
import difference from 'lodash/difference';
|
||||
import open from 'open';
|
||||
import { select, input, checkbox, confirm } from '@inquirer/prompts';
|
||||
import { detectSync, resolveCommand } from 'package-manager-detector';
|
||||
|
||||
const ROOT = path.resolve(__dirname, '../../');
|
||||
// ==================== 环境变量 ====================
|
||||
const GITHUB_TOKEN = process.env.GITHUB_ACCESS_TOKEN;
|
||||
const GITHUB_OWNER = process.env.GITHUB_OWNER || 'ant-design';
|
||||
const GITHUB_REPO = process.env.GITHUB_REPO || 'ant-design';
|
||||
|
||||
// ==================== 阿里云 OSS 配置 ====================
|
||||
const ALI_OSS_BUCKET = process.env.ALI_OSS_BUCKET || 'antd-visual-diff';
|
||||
const ALI_OSS_REGION = process.env.ALI_OSS_REGION || 'oss-accelerate';
|
||||
const OSS_DOMAIN = `https://${ALI_OSS_BUCKET}.${ALI_OSS_REGION}.aliyuncs.com`;
|
||||
|
||||
// ==================== 本地存储路径 ====================
|
||||
const _VISUAL_STORE_PATH = envPaths('visual-regression').cache;
|
||||
const STORE_PATH = path.join(_VISUAL_STORE_PATH, GITHUB_OWNER, GITHUB_REPO);
|
||||
|
||||
// ==================== 初始化 ====================
|
||||
fs.ensureDirSync(STORE_PATH);
|
||||
const git = simpleGit(ROOT);
|
||||
const octokit = new Octokit({ auth: GITHUB_TOKEN });
|
||||
const packageManager = detectSync({ cwd: ROOT });
|
||||
const components = fg.sync('components/*/index.ts[x]', { cwd: ROOT }).reduce((acc, file) => {
|
||||
const basePath = path.dirname(file);
|
||||
if (
|
||||
[
|
||||
fs.existsSync(path.join(basePath, 'index.en-US.md')),
|
||||
fs.existsSync(path.join(basePath, 'demo')),
|
||||
fs.existsSync(path.join(basePath, '__tests__')),
|
||||
].every(Boolean)
|
||||
) {
|
||||
acc.push(basePath);
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, [] as string[]);
|
||||
|
||||
// ==================== scripts ====================
|
||||
const imagesTestsScript = 'test:image';
|
||||
const visualTestsScript = 'test:visual-regression';
|
||||
|
||||
async function parseArgs() {
|
||||
const argv = minimist(process.argv.slice(2));
|
||||
let baseRef = argv['base-ref'];
|
||||
|
||||
const { latest } = await git.log();
|
||||
|
||||
if (!baseRef) {
|
||||
baseRef = await select({
|
||||
message: '📚 请选择基准分支',
|
||||
default: 'master',
|
||||
choices: [
|
||||
'master',
|
||||
'feature',
|
||||
'next',
|
||||
// '✍️ Custom Input', // 临时关闭自定义
|
||||
],
|
||||
});
|
||||
|
||||
if (baseRef.endsWith('Custom Input')) {
|
||||
baseRef = await input({
|
||||
message: '📚 请输入基准分支',
|
||||
default: 'master',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
baseRef,
|
||||
currentRef: latest?.hash.slice(0, 8) || '',
|
||||
};
|
||||
}
|
||||
|
||||
// 获取 commit sha
|
||||
async function getCommitSha(ref: string) {
|
||||
const { data } = await octokit.repos.getCommit({
|
||||
owner: GITHUB_OWNER,
|
||||
repo: GITHUB_REPO,
|
||||
ref,
|
||||
});
|
||||
|
||||
return data.sha;
|
||||
}
|
||||
|
||||
// 获取 oss branch hash
|
||||
async function getOssBranchHash(branch: string) {
|
||||
const uri = new URL(`${OSS_DOMAIN}/${branch}/visual-regression-ref.txt`);
|
||||
|
||||
const res = await fetch(uri.toString());
|
||||
const text = await res.text();
|
||||
return text.trim();
|
||||
}
|
||||
|
||||
function runImageTests(args: string[]) {
|
||||
const { command, args: realArgs } = resolveCommand(packageManager!.agent, 'run', args)!;
|
||||
spawnSync(command, realArgs, {
|
||||
stdio: 'inherit',
|
||||
env: {
|
||||
...process.env,
|
||||
LOCAL: 'true', // 总是本地运行
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function downloadVisualSnapshots(sha: string) {
|
||||
const uri = new URL(`${OSS_DOMAIN}/${sha}/imageSnapshots.tar.gz`);
|
||||
const tarPath = path.join(STORE_PATH, `imageSnapshots-${sha}.tar.gz`);
|
||||
|
||||
if (fs.existsSync(tarPath) && fs.statSync(tarPath).size > 10 * 1024 * 1024) {
|
||||
console.log(`📦 视觉回归快照已存在，跳过下载`);
|
||||
} else {
|
||||
console.log(`📦 正在下载视觉回归快照`);
|
||||
const res = await fetch(uri);
|
||||
if (!res.ok || res.status !== 200) {
|
||||
throw new Error(`Download file failed: ${new URL(uri).href}`);
|
||||
}
|
||||
// @ts-ignore
|
||||
const body = Readable.fromWeb(res.body);
|
||||
await finished(body.pipe(fs.createWriteStream(tarPath)));
|
||||
|
||||
if (fs.statSync(tarPath).size < 10 * 1024 * 1024) {
|
||||
console.log(`📦 下载完成 ${tarPath}`);
|
||||
}
|
||||
}
|
||||
|
||||
return tarPath;
|
||||
}
|
||||
|
||||
async function run() {
|
||||
const args = await parseArgs();
|
||||
const { baseRef, currentRef } = args;
|
||||
|
||||
const baseSha = await getCommitSha(baseRef);
|
||||
|
||||
if (baseSha === currentRef) {
|
||||
console.log(`
|
||||
👋 你好像没有提交任何代码，不需要进行视觉回归测试。
|
||||
或者你可以切到你提交 PR 的分支上进行本地测试。
|
||||
`);
|
||||
}
|
||||
|
||||
const visualSha = await getOssBranchHash(baseRef);
|
||||
|
||||
if (baseSha !== visualSha) {
|
||||
console.warn(
|
||||
`
|
||||
⚠️ 基准分支提交和 oss 分支提交不一致，可能会导致视觉回归测试不准确
|
||||
- 基准分支提交：${baseSha} [${baseRef}]
|
||||
- oss 分支提交：${visualSha} [${baseRef}]
|
||||
`.trim(),
|
||||
);
|
||||
}
|
||||
|
||||
const basePath = path.join(ROOT, `imageSnapshots-${baseRef}`); // 本地基准快照存储路径
|
||||
const targetPath = path.join(ROOT, 'imageSnapshots'); // 本地目标快照存储路径
|
||||
|
||||
// ==================== 生成目标快照(选择组件 ==================
|
||||
let appliedComponents: 'all' | string[];
|
||||
|
||||
const selected = await checkbox<string>({
|
||||
message: '📚 请选择需要测试的组件，不建议选择全部【全量快照生成需要耗费很长时间】\n',
|
||||
pageSize: Math.floor(components.length / 4),
|
||||
loop: false,
|
||||
theme: { helpMode: 'always' },
|
||||
choices: components.map((component) => ({
|
||||
value: component,
|
||||
checked: component.endsWith('components/button'), // 默认选中 button
|
||||
})),
|
||||
});
|
||||
|
||||
if (selected.length === 0 || difference(components, selected).length === 0) {
|
||||
appliedComponents = 'all';
|
||||
} else {
|
||||
appliedComponents = selected;
|
||||
}
|
||||
|
||||
// ==================== 生成目标快照(运行快照测试 ==================
|
||||
const needRun = await confirm({
|
||||
message: '📚 是否进行快照截图？【如果你已经运行过了，可以忽略】',
|
||||
default: true,
|
||||
});
|
||||
|
||||
if (needRun) {
|
||||
fs.emptyDirSync(targetPath);
|
||||
runImageTests([imagesTestsScript, ...(appliedComponents === 'all' ? [] : appliedComponents)]);
|
||||
} else {
|
||||
fs.ensureDirSync(targetPath);
|
||||
}
|
||||
|
||||
// ==================== 下载基准快照 ==================
|
||||
const visualTarPath = await downloadVisualSnapshots(visualSha);
|
||||
|
||||
// 解压 tar 包
|
||||
fs.emptyDirSync(basePath);
|
||||
await extract({
|
||||
strip: 1,
|
||||
file: visualTarPath,
|
||||
C: basePath,
|
||||
});
|
||||
|
||||
if (appliedComponents !== 'all') {
|
||||
// components/avatar => avatar
|
||||
const componentNames = appliedComponents.map((component) => path.basename(component));
|
||||
|
||||
console.log(`🧹 正在清理基准快照`);
|
||||
|
||||
const files = fs.readdirSync(basePath);
|
||||
files.forEach((file) => {
|
||||
// 删除不在选择范围内的组件
|
||||
if (!componentNames.some((name) => file.startsWith(name))) {
|
||||
fs.removeSync(path.join(basePath, file));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ==================== 对比快照 ==================
|
||||
const reportFile = path.join(ROOT, 'visualRegressionReport', 'report.html');
|
||||
fs.emptyDirSync(path.dirname(reportFile));
|
||||
// https://github.com/ant-design/ant-design/wiki/Development#run-visual-regression-diff-locally
|
||||
runImageTests([visualTestsScript, `--base-ref=${baseRef}`, `--pr-id=local`]);
|
||||
|
||||
// ==================== 提示 ==================
|
||||
console.log(`🎉 本地视觉回归测试完成, 报告: ${path.relative(process.cwd(), reportFile)}`);
|
||||
|
||||
const needOpen = await confirm({
|
||||
message: '📚 是否打开报告查看？',
|
||||
default: true,
|
||||
});
|
||||
|
||||
if (needOpen) {
|
||||
open(reportFile);
|
||||
}
|
||||
}
|
||||
|
||||
run().catch((e) => {
|
||||
console.error(e);
|
||||
process.exit(1);
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user