fix: The display of disabled subNavItem in vertical Navigation is not…

… as expected when it is collapsed (#2637) * fix: The display of disabled subNavItem in vertical Navigation is not as expected when it is collapsed * fix: use wrapWhenSpecial false in Navigation Tooltip
DouyinFE · Dec 16, 2024 · c93c005 · c93c005
1 parent 2c43674
commit c93c005
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/packages/semi-ui/navigation/Item.tsx b/packages/semi-ui/navigation/Item.tsx
@@ -163,6 +163,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         return (
             <Tooltip
                 content={text}
+                wrapWhenSpecial={false}
                 position="right"
                 trigger={'hover'}
                 mouseEnterDelay={showDelay}

diff --git a/packages/semi-ui/navigation/_story/navigation.stories.jsx b/packages/semi-ui/navigation/_story/navigation.stories.jsx
@@ -352,4 +352,43 @@ PopupDemo.story = {
 export const CustomArrowIconDemo = () => <CustomArrowIcon></CustomArrowIcon>
 CustomArrowIconDemo.story = {
   name: 'CustomArrowIcon'
+}
+
+
+class DisabledSub extends React.Component {
+    render() {
+        return (
+            <Nav
+                style={{ height: 520 }}
+                bodyStyle={{ height: 300 }}
+                items={[
+                    {
+                        text: '任务平台',
+                        itemKey: '1',
+                        icon: <IconMail />,
+                        items: [{
+                            text: '任务平台1',
+                            disabled: true,
+                            itemKey: '11',
+                            items: ['任务1管理', '用户2任务查询'],
+                        }, {
+                            text: '任务平台2',
+                            disabled: true,
+                            itemKey: '12',
+                            items: ['任务11管理', '用户22任务查询'],
+                        }],
+                    },
+                ]}
+                onSelect={key => console.log(key)}
+                footer={{
+                    collapseButton: true,
+                }}
+            />
+        );
+    }
+}
+
+export const DisabledSubDemo = () => <DisabledSub></DisabledSub>
+DisabledSubDemo.story = {
+  name: 'DisabledSubDemo'
 }