mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-06 12:17:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(cascader): clean code

Browse Source
This commit is contained in:
07akioni 2021-09-09 00:17:18 +08:00
parent 305538f402
commit 3b50cc4c68
1 changed files with 56 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/cascader/src/CascaderMenu.tsx
View File

@ -132,70 +132,64 @@ export default defineComponent({
return ( return (
<Transition name="fade-in-scale-up-transition" appear={this.isMounted}> <Transition name="fade-in-scale-up-transition" appear={this.isMounted}>
{{ {{
default: () => default: () => {
this.show if (!this.show) return null
? withDirectives( return withDirectives(
<div
tabindex="0"
ref="selfElRef"
class={`${mergedClsPrefix}-cascader-menu`}
onMousedown={this.onMousedown}
onFocusin={this.handleFocusin}
onFocusout={this.handleFocusout}
onKeyup={this.onKeyup}
style={
{
'--col-count': this.menuModel.length
} as any
}
>
{this.menuModel[0].length ? (
<div class={`${mergedClsPrefix}-cascader-submenu-wrapper`}>
{this.menuModel.map((submenuOptions, index) => (
<NCascaderSubmenu
ref={
((instance: CascaderSubmenuInstance) => {
if (instance) {
submenuInstRefs[index] = instance
}
}) as any
}
key={index}
tmNodes={submenuOptions}
depth={index + 1}
/>
))}
<NBaseMenuMask
clsPrefix={mergedClsPrefix}
ref="maskInstRef"
/>
</div>
) : (
<div class={`${mergedClsPrefix}-cascader-menu__empty`}>
{renderSlot($slots, 'empty', undefined, () => [<NEmpty />])}
</div>
)}
{$slots.action && (
<div <div
tabindex="0" class={`${mergedClsPrefix}-cascader-menu-action`}
ref="selfElRef" data-action
class={`${mergedClsPrefix}-cascader-menu`}
onMousedown={this.onMousedown}
onFocusin={this.handleFocusin}
onFocusout={this.handleFocusout}
onKeyup={this.onKeyup}
style={
{
'--col-count': this.menuModel.length
} as any
}
> >
{this.menuModel[0].length ? ( {{
<div default: $slots.action
class={`${mergedClsPrefix}-cascader-submenu-wrapper`} }}
> </div>
{this.menuModel.map((submenuOptions, index) => { )}
return ( <FocusDetector onFocus={this.onTabout} />
<NCascaderSubmenu </div>,
ref={ [[clickoutside, this.handleClickOutside]]
((instance: CascaderSubmenuInstance) => { )
if (instance) { }
submenuInstRefs[index] = instance
}
}) as any
}
key={index}
tmNodes={submenuOptions}
depth={index + 1}
/>
)
})}
<NBaseMenuMask
clsPrefix={mergedClsPrefix}
ref="maskInstRef"
/>
</div>
) : (
<div class={`${mergedClsPrefix}-cascader-menu__empty`}>
{renderSlot($slots, 'empty', undefined, () => [
<NEmpty />
])}
</div>
)}
{$slots.action ? (
<div
class={`${mergedClsPrefix}-cascader-menu-action`}
data-action
>
{{
default: $slots.action
}}
</div>
) : null}
<FocusDetector onFocus={this.onTabout} />
</div>,
[[clickoutside, this.handleClickOutside]]
)
: null
}} }}
</Transition> </Transition>
) )