github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: menu first expand not animation in `inline` mode

Browse Source
pull/329/head
tangjinzhou 6 years ago
parent aa1b2462cb
commit d63935e506
9 changed files with 60 additions and 41 deletions
Show Stats Download Patch File Download Diff File

32
components/_util/openAnimation.js
Unescape View File

@ -1,18 +1,32 @@
import cssAnimation from './css-animation'
import raf from 'raf'
function animate (node, show, done) {
function animate (node, show, done, type) {
let height
let requestAnimationFrameId
let appearRequestAnimationFrameId
return cssAnimation(node, 'ant-motion-collapse', {
start () {
if (appearRequestAnimationFrameId) {
raf.cancel(appearRequestAnimationFrameId)
}
if (!show) {
node.style.height = `${node.offsetHeight}px`
node.style.opacity = 1
node.style.opacity = '1'
} else {
height = node.offsetHeight
node.style.height = 0
node.style.opacity = 0
// not get offsetHeight when appear
// set it into raf get correct offsetHeight
if (type === 'appear' && height === 0) {
appearRequestAnimationFrameId = raf(() => {
height = node.offsetHeight
node.style.height = '0px'
node.style.opacity = '0'
})
} else {
node.style.height = '0px'
node.style.opacity = '0'
}
}
},
active () {
@ -21,16 +35,19 @@ function animate (node, show, done) {
}
requestAnimationFrameId = raf(() => {
node.style.height = `${show ? height : 0}px`
node.style.opacity = show ? 1 : 0
node.style.opacity = show ? '1' : '0'
})
},
end () {
if (appearRequestAnimationFrameId) {
raf.cancel(appearRequestAnimationFrameId)
}
if (requestAnimationFrameId) {
raf.cancel(requestAnimationFrameId)
}
node.style.height = ''
node.style.opacity = ''
done()
done && done()
},
})
}
@ -42,6 +59,9 @@ const animation = {
leave (node, done) {
return animate(node, false, done)
},
appear (node, done) {
return animate(node, true, done, 'appear')
},
}
export default animation

4
components/_util/store/connect.jsx
Unescape View File

@ -26,7 +26,7 @@ export default function connect (mapStateToProps) {
},
data () {
this.store = this.storeContext.store
this.preProps = { ...omit(getOptionProps(this), ['__propsSymbol__']) }
this.preProps = omit(getOptionProps(this), ['__propsSymbol__'])
return {
subscribed: finnalMapStateToProps(this.store.getState(), this.$props),
}
@ -50,7 +50,7 @@ export default function connect (mapStateToProps) {
if (!this.unsubscribe) {
return
}
const props = getOptionProps(this)
const props = omit(getOptionProps(this), ['__propsSymbol__'])
const nextSubscribed = finnalMapStateToProps(this.store.getState(), props)
if (!shallowEqual(this.preProps, props) || !shallowEqual(this.subscribed, nextSubscribed)) {
this.subscribed = nextSubscribed

8
components/collapse/__tests__/__snapshots__/demo.test.js.snap
Unescape View File

@ -32,7 +32,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
<div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
</svg></i>This is panel header 1</div>
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
<div class="ant-collapse-content-box">
<p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
</div>
@ -61,7 +61,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
<div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
</svg></i>This is panel header 1</div>
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
<div class="ant-collapse-content-box">
<p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
</div>
@ -94,7 +94,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
<path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path>
</svg></i></div>
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
<div class="ant-collapse-content-box">
<p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
</div>
@ -148,7 +148,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
<div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
</svg></i>This is panel header with arrow icon</div>
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
<div class="ant-collapse-content-box">
<p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
</div>

4
components/date-picker/__tests__/MonthPicker.test.js
Unescape View File

@ -17,10 +17,10 @@ describe('MonthPicker', () => {
})
await asyncExpect(() => {
openPanel(wrapper)
})
}, 0)
await asyncExpect(() => {
$$('.ant-calendar-month-panel-month')[0].click()
$$('.ant-calendar-month-panel-cell')[6].getAttribute('class').split(' ').includes('ant-calendar-month-panel-selected-cell')
}, 0)
}, 1000)
})
})

4
components/layout/__tests__/__snapshots__/demo.test.js.snap
Unescape View File

@ -301,7 +301,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li>
@ -358,7 +358,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%; border-right: 0;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li>

12
components/menu/__tests__/__snapshots__/demo.test.js.snap
Unescape View File

@ -39,7 +39,7 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="width: 256px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
<li class="ant-menu-item-group">
<div class="ant-menu-item-group-title"><i class="anticon anticon-qq"><svg viewBox="64 64 896 896" data-icon="qq" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"></path>
@ -86,7 +86,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
</svg></i> <span>Option 3</span></li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 5</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 6</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 7</li>
@ -106,7 +106,7 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="width: 256px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 1</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 2</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li>
@ -142,7 +142,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-appstore"><svg viewBox="64 64 896 896" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 4</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline">
@ -169,7 +169,7 @@ exports[`renders ./components/menu/demo/template.md correctly 1`] = `
</svg></i> <span>Option 1</span></li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="2$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation 2</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline">
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 48px;"><span><i class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation 3</span></span><i class="ant-menu-submenu-arrow"></i></div>
<div></div>
@ -195,7 +195,7 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-appstore"><svg viewBox="64 64 896 896" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 4</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline">

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

@ -3,15 +3,15 @@
exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
<ul role="tree" unselectable="on" class="ant-tree ant-tree-icon-hide">
<li role="treeitem" class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class="ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled"><span class="ant-tree-checkbox-inner"></span></span><span title="parent 1-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1-0</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-disabled"><span class="ant-tree-checkbox-inner"></span></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li>
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li>
</ul>
</li>
<li role="treeitem" class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="parent 1-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1-1</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span style="color: rgb(24, 144, 255);">sss</span></span></span></li>
</ul>
</li>
@ -23,16 +23,16 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
<ul role="tree" unselectable="on" class="ant-tree ant-tree-icon-hide">
<li role="treeitem" class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-indeterminate"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-indeterminate"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">0-0</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">0-0-0</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-0-0</span></span></li>
<li role="treeitem" class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-0-1</span></span></li>
<li role="treeitem" class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-0-2</span></span></li>
</ul>
</li>
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">0-0-1</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-1-0</span></span></li>
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-1-1</span></span></li>
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-1-2</span></span></li>
@ -51,7 +51,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
<ul role="tree" unselectable="on" class="ant-tree">
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-smile-o"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-tree-title">parent 1</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-smile-o"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-tree-title">leaf</span></span></li>
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-frown-o"><svg viewBox="64 64 896 896" data-icon="frown" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 0 0 8 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 0 0 8-8.4C667.6 600.3 597.5 533 512 533z"></path></svg></i></span><span class="ant-tree-title">leaf</span></span></li>
</ul>
@ -62,13 +62,13 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
<ul role="tree" unselectable="on" class="ant-tree ant-tree-directory">
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span><span title="parent 0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-folder-open"><svg viewBox="64 64 896 896" data-icon="folder-open" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z"></path></svg></i></span><span class="ant-tree-title">parent 0</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class=""><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf 0-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-file"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span class="ant-tree-title">leaf 0-0</span></span></li>
<li role="treeitem" class=""><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf 0-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-file"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span class="ant-tree-title">leaf 0-1</span></span></li>
</ul>
</li>
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-folder-open"><svg viewBox="64 64 896 896" data-icon="folder-open" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z"></path></svg></i></span><span class="ant-tree-title">parent 1</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class=""><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf 1-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-file"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span class="ant-tree-title">leaf 1-0</span></span></li>
<li role="treeitem" class=""><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf 1-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-file"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span class="ant-tree-title">leaf 1-1</span></span></li>
</ul>
@ -79,9 +79,9 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
<ul role="tree" unselectable="on" class="draggable-tree ant-tree ant-tree-icon-hide">
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span><span title="0-0" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable"><span class="ant-tree-title">0-0</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span><span title="0-0-0" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable"><span class="ant-tree-title">0-0-0</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-0-0-0" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"><span class="ant-tree-title">0-0-0-0</span></span></li>
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-0-0-1" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"><span class="ant-tree-title">0-0-0-1</span></span></li>
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-0-0-2" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"><span class="ant-tree-title">0-0-0-2</span></span></li>
@ -111,9 +111,9 @@ exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
exports[`renders ./components/tree/demo/line.md correctly 1`] = `
<ul role="tree" unselectable="on" class="ant-tree ant-tree-show-line ant-tree-icon-hide">
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-line-icon anticon anticon-minus-square"><svg viewBox="64 64 896 896" data-icon="minus-square" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"></path><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"></path></svg></i></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title"><span style="color: rgb(24, 144, 255);">parent 1</span></span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i class="ant-tree-switcher-line-icon anticon anticon-minus-square"><svg viewBox="64 64 896 896" data-icon="minus-square" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"></path><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"></path></svg></i></span><span title="parent 1-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1-0</span></span>
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
<ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse">
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"><i class="ant-tree-switcher-line-icon anticon anticon-file"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li>
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"><i class="ant-tree-switcher-line-icon anticon anticon-file"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li>
<li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"><i class="ant-tree-switcher-line-icon anticon anticon-file"><svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"></path></svg></i></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li>

4
components/vc-menu/DOMWrap.jsx
Unescape View File

@ -4,7 +4,7 @@ import SubMenu from './SubMenu'
import BaseMixin from '../_util/BaseMixin'
import { getWidth, setStyle, menuAllProps } from './util'
import { cloneElement } from '../_util/vnode'
import { getClass, getPropsData } from '../_util/props-util'
import { getClass, getPropsData, getEvents } from '../_util/props-util'
const canUseDOM = !!(
typeof window !== 'undefined' &&
@ -140,7 +140,7 @@ const DOMWrap = {
class: `${prefixCls}-overflowed-submenu`,
key,
style,
on: copy.componentOptions.listeners,
on: getEvents(copy),
}
return (

7
components/vc-menu/SubMenu.jsx
Unescape View File

@ -234,7 +234,7 @@ const SubMenu = {
onTitleClick (e) {
const { triggerSubMenuAction, eventKey, isOpen, store } = this.$props
this.$emit('titleClick', {
this.__emit('titleClick', {
key: eventKey,
domEvent: e,
})
@ -383,9 +383,8 @@ const SubMenu = {
// show appear transition if it's not visible (not sure why)
// show appear transition if it's not inline mode
const transitionAppear = haveRendered || !baseProps.visible || !baseProps.mode === 'inline'
subPopupMenuProps.class = ` ${baseProps.prefixCls}-sub`
let animProps = { appear: transitionAppear }
let animProps = { appear: transitionAppear, css: false }
let transitionProps = {
props: animProps,
on: {},
@ -402,7 +401,7 @@ const SubMenu = {
}
if (typeof baseProps.openAnimation === 'object' && baseProps.openAnimation.on) {
transitionProps.on = { ...baseProps.openAnimation.on }
transitionProps.on = baseProps.openAnimation.on
}
return <transition {...transitionProps}>
<SubPopupMenu v-show={props.isOpen} {...subPopupMenuProps}/>

Write Preview
Loading…
Cancel
Save