mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
fix: Tree selection style missing (#39292)
* fix: Tree missing selection style * test: add snapshot * test: update snapshot * docs: Update demo
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
cadab499e1
commit
1dca4eba98
@ -857,6 +857,169 @@ exports[`renders ./components/tree/demo/basic-controlled.tsx extend context corr
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tree/demo/block-node.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-tree ant-tree-icon-hide ant-tree-block-node"
|
||||
role="tree"
|
||||
>
|
||||
<div>
|
||||
<input
|
||||
aria-label="for screen reader"
|
||||
style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
|
||||
tabindex="0"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-tree-treenode"
|
||||
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tree-indent"
|
||||
>
|
||||
<div
|
||||
class="ant-tree-indent-unit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-list"
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
class="ant-tree-list-holder"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tree-list-holder-inner"
|
||||
style="display:flex;flex-direction:column"
|
||||
>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
|
||||
draggable="false"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-tree-switcher-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-checkbox"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
|
||||
title="parent"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
parent
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open"
|
||||
draggable="false"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-checkbox ant-tree-checkbox-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
||||
title="child 1"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
child 1
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf-last"
|
||||
draggable="false"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-checkbox ant-tree-checkbox-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected"
|
||||
title="child 2"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
child 2
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tree/demo/customized-icon.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-tree"
|
||||
|
||||
@ -857,6 +857,169 @@ exports[`renders ./components/tree/demo/basic-controlled.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tree/demo/block-node.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-tree ant-tree-icon-hide ant-tree-block-node"
|
||||
role="tree"
|
||||
>
|
||||
<div>
|
||||
<input
|
||||
aria-label="for screen reader"
|
||||
style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
|
||||
tabindex="0"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-tree-treenode"
|
||||
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tree-indent"
|
||||
>
|
||||
<div
|
||||
class="ant-tree-indent-unit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-list"
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
class="ant-tree-list-holder"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tree-list-holder-inner"
|
||||
style="display:flex;flex-direction:column"
|
||||
>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
|
||||
draggable="false"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-tree-switcher-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-checkbox"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
|
||||
title="parent"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
parent
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open"
|
||||
draggable="false"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-checkbox ant-tree-checkbox-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
||||
title="child 1"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
child 1
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf-last"
|
||||
draggable="false"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-checkbox ant-tree-checkbox-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected"
|
||||
title="child 2"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
child 2
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tree/demo/customized-icon.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-tree"
|
||||
|
||||
28
components/tree/demo/block-node.tsx
Normal file
28
components/tree/demo/block-node.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import { Tree } from 'antd';
|
||||
import type { DataNode } from 'antd/es/tree';
|
||||
|
||||
const treeData: DataNode[] = [
|
||||
{
|
||||
title: 'parent',
|
||||
key: '0',
|
||||
children: [
|
||||
{
|
||||
title: 'child 1',
|
||||
key: '0-0',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
title: 'child 2',
|
||||
key: '0-1',
|
||||
disableCheckbox: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Tree checkable defaultSelectedKeys={['0-1']} defaultExpandAll treeData={treeData} blockNode />
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -28,6 +28,7 @@ Almost anything can be represented in a tree structure. Examples include directo
|
||||
<code src="./demo/virtual-scroll.tsx">Virtual scroll</code>
|
||||
<code src="./demo/drag-debug.tsx" debug>Drag Debug</code>
|
||||
<code src="./demo/big-data.tsx" debug>Big data</code>
|
||||
<code src="./demo/block-node.tsx">Block Node</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -29,6 +29,7 @@ demo:
|
||||
<code src="./demo/virtual-scroll.tsx">虚拟滚动</code>
|
||||
<code src="./demo/drag-debug.tsx" debug>Drag Debug</code>
|
||||
<code src="./demo/big-data.tsx" debug>大数据</code>
|
||||
<code src="./demo/block-node.tsx">占据整行</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -266,11 +266,6 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
|
||||
// >>> Title
|
||||
// add `${treeCls}-checkbox + span` to cover checkbox `${checkboxCls} + span`
|
||||
[`${treeCls}-node-content-wrapper, ${treeCls}-checkbox + span`]: {
|
||||
paddingInline: 0,
|
||||
},
|
||||
[`${treeCls}-node-content-wrapper`]: {
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
position: 'relative',
|
||||
zIndex: 'auto',
|
||||
minHeight: treeTitleHeight,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user