feat: use menu with 7.4.0-beta, supporting menu overflow collapsing. Currently React >= 16.0 only

components/menu/demo/horizontal.md

@@ -44,7 +44,7 @@ class App extends React.Component {
         <Menu.Item key="app" disabled>
           <Icon type="appstore" />Navigation Two
         </Menu.Item>
-        <SubMenu title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
+        <SubMenu title={<span className="submenu-title-wrapper"><Icon type="setting" />Navigation Three - Submenu</span>}>
           <MenuItemGroup title="Item 1">
             <Menu.Item key="setting:1">Option 1</Menu.Item>
             <Menu.Item key="setting:2">Option 2</Menu.Item>

components/menu/style/index.less

@@ -180,6 +180,10 @@
       border-radius: @border-radius-base;
       z-index: @zindex-dropdown;
 
+      .submenu-title-wrapper {
+        padding-right: 20px;
+      }
+
       &:before {
         position: absolute;
         top: -7px;
@@ -272,12 +276,13 @@
     border-bottom: @border-width-base @border-style-base @border-color-split;
     box-shadow: none;
     line-height: 46px;
+    white-space: nowrap;
 
     > .@{menu-prefix-cls}-item,
     > .@{menu-prefix-cls}-submenu {
       position: relative;
       top: 1px;
-      float: left;
+      display: inline-block;
       border-bottom: 2px solid transparent;
 
       &:hover,

package.json

@@ -66,7 +66,7 @@
     "rc-editor-mention": "^1.0.2",
     "rc-form": "^2.1.0",
     "rc-input-number": "~4.0.0",
-    "rc-menu": "~7.3.0",
+    "rc-menu": "7.4.0-beta",
     "rc-notification": "~3.2.0",
     "rc-pagination": "~1.17.0",
     "rc-progress": "~2.2.2",