test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

feat: show line in Tree first level (#25991)

Browse Source 
* feat: tree line in first level

* update: Tree showLine demo
This commit is contained in:
zhangchen 2020-08-10 10:48:11 +08:00 committed by GitHub
parent 504d51477a
commit 4da2260342
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 111 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
components/tree/__tests__/__snapshots__/demo.test.js.snap
View File

@ -74,7 +74,7 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -127,7 +127,7 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
@ -162,7 +162,7 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
@ -197,7 +197,7 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -250,7 +250,7 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
@ -867,7 +867,7 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -916,7 +916,7 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -1214,7 +1214,7 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -1263,7 +1263,7 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -1842,7 +1842,7 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
style="display:flex;flex-direction:column"
>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
>
<span
class="ant-tree-switcher ant-tree-switcher_open"
@ -2176,6 +2176,47 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
</span>
</span>
</div>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
>
<span
class="ant-tree-switcher ant-tree-switcher_close"
>
<span
aria-label="plus-square"
class="anticon anticon-plus-square ant-tree-switcher-line-icon"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="plus-square"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
/>
<path
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"
title="parent 2"
>
<span
class="ant-tree-title"
>
parent 2
</span>
</span>
</div>
</div>
</div>
</div>
@ -2423,7 +2464,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -2469,7 +2510,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
@ -2518,7 +2559,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
<span
class="ant-tree-indent-unit"
@ -2567,7 +2608,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
@ -2616,7 +2657,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit"
class="ant-tree-indent-unit ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -2662,7 +2703,7 @@ exports[`renders ./components/tree/demo/switcher-icon.md correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span

28
components/tree/__tests__/__snapshots__/directory.test.js.snap
View File

@ -91,7 +91,7 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -161,7 +161,7 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
@ -462,7 +462,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -511,7 +511,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -1616,7 +1616,7 @@ exports[`Directory Tree expand with state control click 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -1759,7 +1759,7 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -1964,7 +1964,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -2013,7 +2013,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -2312,7 +2312,7 @@ exports[`Directory Tree group select 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -2361,7 +2361,7 @@ exports[`Directory Tree group select 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -2659,7 +2659,7 @@ exports[`Directory Tree group select 2`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -2708,7 +2708,7 @@ exports[`Directory Tree group select 2`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -3058,7 +3058,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -3107,7 +3107,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span

20
components/tree/__tests__/__snapshots__/index.test.js.snap
View File

@ -187,7 +187,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -236,7 +236,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
@ -268,7 +268,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
<span
class="ant-tree-indent-unit"
@ -300,7 +300,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
@ -332,7 +332,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit"
class="ant-tree-indent-unit ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -381,7 +381,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -476,7 +476,7 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -501,7 +501,7 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -572,7 +572,7 @@ exports[`Tree switcherIcon should be loading icon when loadData 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end-first-level"
/>
</span>
<span
@ -621,7 +621,7 @@ exports[`Tree switcherIcon should be loading icon when loadData 1`] = `
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-end"
class="ant-tree-indent-unit ant-tree-indent-unit-end ant-tree-indent-unit-end-first-level"
/>
</span>
<span

16
components/tree/demo/line.md
View File

@ -56,6 +56,22 @@ const treeData = [
},
],
},
{
title: 'parent 2',
key: '0-1',
icon: <CarryOutOutlined />,
children: [
{
title: 'parent 2-0',
key: '0-1-0',
icon: <CarryOutOutlined />,
children: [
{ title: 'leaf', key: '0-1-0-0', icon: <CarryOutOutlined /> },
{ title: 'leaf', key: '0-1-0-1', icon: <CarryOutOutlined /> },
],
},
]
},
];
const Demo: React.FC<{}> = () => {

17
components/tree/style/mixin.less
View File

@ -218,6 +218,15 @@
position: relative;
height: 100%;
&:first-child::after {
position: absolute;
top: calc(100% - @tree-title-height - 4px);
right: @tree-title-height / 2;
bottom: -4px;
border-right: 1px solid @border-color-base;
content: '';
}
&::before {
position: absolute;
top: calc(100% - 4px);
@ -227,10 +236,9 @@
content: '';
}
&-end {
&::before {
display: none;
}
&-end::before,
&-end-first-level::after {
display: none;
}
}
}
@ -238,6 +246,7 @@
/* Motion should hide line of measure */
.@{custom-tree-node-prefix-cls}-motion:not(.@{tree-motion}-leave):not(.@{tree-motion}-appear-active) {
.@{custom-tree-prefix-cls}-indent-unit {
&::after,
&::before {
display: none;
}

2
package.json
View File

@ -142,7 +142,7 @@
"rc-tabs": "~11.5.0",
"rc-textarea": "~0.3.0",
"rc-tooltip": "~4.2.0",
"rc-tree": "~3.8.5",
"rc-tree": "~3.9.0",
"rc-tree-select": "~4.1.1",
"rc-trigger": "~4.4.0",
"rc-upload": "~3.2.0",