Browse Source

fix: add a new selector type for the hover style fallback in the renderWrapper scenario (#2691)

* fix: add a new selector type for the hover style fallback in the renderWrapper scenario

* fix: add disabled style in nav sub-title

* fix: remove font weight in compatible with renderWrapper
YannLynn 7 months ago
parent
commit
674612e3d1

+ 31 - 0
packages/semi-foundation/navigation/navigation.scss

@@ -483,6 +483,37 @@ $module: #{$prefix}-navigation;
                 }
             }
         }
+
+        // 兼容 renderWrapper 的场景,详见 issue: https://github.com/DouyinFE/semi-design/issues/2690
+        &-list  .#{$module}-sub-wrap {
+            & > .#{$module}-sub-title {
+
+                &-disabled {
+                    @include item-disabled;
+                }
+
+                &:hover {
+                    &:not(.#{$module}-sub-title-selected) {
+                        @include item-hover;
+                    }
+
+                    &.#{$module}-sub-title-selected {
+                        @include item-hover-selected;
+                    }
+                }
+
+                &:hover {
+                    &.#{$module}-sub-title-disabled {
+                        &:not(.#{$module}-sub-title-selected) {
+                            @include item-disabled;
+                        }
+                        &.#{$module}-sub-title-selected {
+                            @include item-disabled-selected;
+                        }
+                    }
+                }
+            }
+        }
     }
 
     .#{$module}-item:last-of-type {

+ 39 - 0
packages/semi-ui/navigation/_story/navigation.stories.jsx

@@ -391,4 +391,43 @@ class DisabledSub extends React.Component {
 export const DisabledSubDemo = () => <DisabledSub></DisabledSub>
 DisabledSubDemo.story = {
   name: 'DisabledSubDemo'
+}
+
+
+export const renderWrapperDemo = () => {
+  return (
+    <Nav
+            renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
+                const routerMap = {
+                    Home: "/",
+                    About: "/about",
+                    Dashboard: "/dashboard",
+                    "Nothing Here": "/nothing-here"
+                };
+                return (
+                    <a
+                        style={{ textDecoration: "none" }}
+                        to={routerMap[props.itemKey]}
+                    >
+                      {itemElement}
+                    </a>
+                );
+            }}
+            items={[
+                { itemKey: "Home", text: "Home" },
+                { itemKey: "About", text: "About" },
+                {
+                    text: "Disabled",
+                    itemKey: "Disabled",
+                    disabled: true,
+                    items: ["Dashboard", "Nothing Here"]
+                },
+                {
+                  text: "Sub",
+                  itemKey: "Sub",
+                  items: [{ itemKey: "Dashboard", text: "Dashboard", items: ["Dashboard1", "Nothing Here1"] }, "Nothing Here"]
+              }
+            ]}
+    ></Nav>
+  )
 }