Redo overflow

README.md

@@ -283,6 +283,12 @@ ReactDOM.render(<Menu>
           <td></td>
           <td>sub menu's content</td>
         </tr>
+        <tr>
+          <td>overflowedIndicator</td>
+          <td>String/ReactElement</td>
+          <td>···</td>
+          <td>overflow indicator when menu overlows in horizontal mode</td>
+        </tr>
         <tr>
             <td>key</td>
             <td>Object</td>

assets/index.less

@@ -92,6 +92,10 @@
   &-submenu {
     &-popup {
       position: absolute;
+
+      .submenu-title-wrapper {
+        padding-right: 20px;
+      }
     }
     > .@{menuPrefixCls} {
       background-color: #fff;
@@ -112,14 +116,16 @@
     border: none;
     border-bottom: 1px solid #d9d9d9;
     box-shadow: none;
+    white-space: nowrap;
+    overflow: hidden;
 
     & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
       padding: 15px 20px;
     }
 
     & > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item {
-      float: left;
       border-bottom: 2px solid transparent;
+      display: inline-block;
 
       &-active {
         border-bottom: 2px solid #2db7f5;

examples/antd.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import Menu, { SubMenu, Item as MenuItem, Divider } from 'rc-menu';
 import 'rc-menu/assets/index.less';
 import animate from 'css-animation';
@@ -51,78 +52,159 @@ const animation = {
 
 const reactContainer = document.getElementById('__react-content');
 
-const nestSubMenu = (<SubMenu title={<span>offset sub menu 2</span>} key="4" popupOffset={[10, 15]}>
-  <MenuItem key="4-1">inner inner</MenuItem>
-  <Divider/>
+const nestSubMenu = (
   <SubMenu
-    key="4-2"
-    title={<span>sub menu 3</span>}
+    title={
+      <span className="submenu-title-wrapper">offset sub menu 2</span>
+    }
+    key="4"
+    popupOffset={[10, 15]}
   >
-    <SubMenu title="sub 4-2-0" key="4-2-0">
-      <MenuItem key="4-2-0-1">inner inner</MenuItem>
-      <MenuItem key="4-2-0-2">inner inner2</MenuItem>
-    </SubMenu>
-    <MenuItem key="4-2-1">inn</MenuItem>
-    <SubMenu title={<span>sub menu 4</span>} key="4-2-2">
-      <MenuItem key="4-2-2-1">inner inner</MenuItem>
-      <MenuItem key="4-2-2-2">inner inner2</MenuItem>
-    </SubMenu>
-    <SubMenu title="sub 4-2-3" key="4-2-3">
-      <MenuItem key="4-2-3-1">inner inner</MenuItem>
-      <MenuItem key="4-2-3-2">inner inner2</MenuItem>
+    <MenuItem key="4-1">inner inner</MenuItem>
+    <Divider/>
+    <SubMenu
+      key="4-2"
+      title={<span className="submenu-title-wrapper">sub menu 1</span>}
+    >
+      <SubMenu title={<span className="submenu-title-wrapper">sub 4-2-0</span>} key="4-2-0">
+        <MenuItem key="4-2-0-1">inner inner</MenuItem>
+        <MenuItem key="4-2-0-2">inner inner2</MenuItem>
+      </SubMenu>
+      <MenuItem key="4-2-1">inn</MenuItem>
+      <SubMenu title={<span className="submenu-title-wrapper">sub menu 4</span>} key="4-2-2">
+        <MenuItem key="4-2-2-1">inner inner</MenuItem>
+        <MenuItem key="4-2-2-2">inner inner2</MenuItem>
+      </SubMenu>
+      <SubMenu title={<span className="submenu-title-wrapper">sub menu 3</span>} key="4-2-3">
+        <MenuItem key="4-2-3-1">inner inner</MenuItem>
+        <MenuItem key="4-2-3-2">inner inner2</MenuItem>
+      </SubMenu>
     </SubMenu>
   </SubMenu>
-</SubMenu>);
+);
 
 function onOpenChange(value) {
   console.log('onOpenChange', value);
 }
-const commonMenu = (<Menu onClick={handleClick} onOpenChange={onOpenChange}>
-  <SubMenu title={<span>sub menu</span>} key="1">
+
+const children1 = [
+  <SubMenu title={<span className="submenu-title-wrapper">sub menu</span>} key="1">
     <MenuItem key="1-1">0-1</MenuItem>
     <MenuItem key="1-2">0-2</MenuItem>
-  </SubMenu>
-  {nestSubMenu}
-  <MenuItem key="2">1</MenuItem>
-  <MenuItem key="3">outer</MenuItem>
-  <MenuItem disabled>disabled</MenuItem>
-  <MenuItem key="5">outer3</MenuItem>
-</Menu>);
+  </SubMenu>,
+  nestSubMenu,
+  <MenuItem key="2">1</MenuItem>,
+  <MenuItem key="3">outer</MenuItem>,
+  <MenuItem key="5" disabled>disabled</MenuItem>,
+  <MenuItem key="6">outer3</MenuItem>,
+];
+
+const children2 = [
+  <SubMenu title={<span className="submenu-title-wrapper">sub menu</span>} key="1">
+    <MenuItem key="1-1">0-1</MenuItem>
+    <MenuItem key="1-2">0-2</MenuItem>
+  </SubMenu>,
+  <MenuItem key="2">1</MenuItem>,
+  <MenuItem key="3">outer</MenuItem>,
+];
+
+const customizeIndicator = <span>Add More Items</span>;
+
+class CommonMenu extends React.Component {
+  state={
+    children: children1,
+    overflowedIndicator: undefined,
+  }
+  toggleChildren = () => {
+    this.setState({
+      children: this.state.children === children1 ? children2 : children1,
+    });
+  }
+  toggleOverflowedIndicator = () => {
+    this.setState({
+      overflowedIndicator:
+        this.state.overflowedIndicator === undefined ?
+          customizeIndicator :
+          undefined,
+    });
+  }
+  render() {
+    const { triggerSubMenuAction } = this.props;
+    const { children, overflowedIndicator } = this.state;
+    return (
+      <div>
+        {this.props.updateChildrenAndOverflowedIndicator && <div>
+          <button onClick={this.toggleChildren}>toggle children</button>
+          <button onClick={this.toggleOverflowedIndicator}>toggle overflowedIndicator</button>
+        </div>}
+        <Menu
+          onClick={handleClick}
+          triggerSubMenuAction={triggerSubMenuAction}
+          onOpenChange={onOpenChange}
+          selectedKeys={['3']}
+          mode={this.props.mode}
+          openAnimation={this.props.openAnimation}
+          defaultOpenKeys={this.props.defaultOpenKeys}
+          overflowedIndicator={overflowedIndicator}
+        >
+          {children}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+CommonMenu.propTypes = {
+  mode: PropTypes.string,
+  openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  triggerSubMenuAction: PropTypes.string,
+  defaultOpenKeys: PropTypes.arrayOf(PropTypes.string),
+  updateChildrenAndOverflowedIndicator: PropTypes.bool,
+};
 
 function render(container) {
-  const horizontalMenu = React.cloneElement(commonMenu, {
-    mode: 'horizontal',
-    // use openTransition for antd
-    openAnimation: 'slide-up',
-  });
-
-  const horizontalMenu2 = React.cloneElement(commonMenu, {
-    mode: 'horizontal',
-    openAnimation: 'slide-up',
-    triggerSubMenuAction: 'click',
-  });
-
-  const verticalMenu = React.cloneElement(commonMenu, {
-    mode: 'vertical',
-    openAnimation: 'zoom',
-  });
-
-  const inlineMenu = React.cloneElement(commonMenu, {
-    mode: 'inline',
-    defaultOpenKeys: ['1'],
-    openAnimation: animation,
-  });
+  const horizontalMenu = (
+    <CommonMenu
+      mode="horizontal"
+      // use openTransition for antd
+      openAnimation="slide-up"
+    />
+  );
+
+  const horizontalMenu2 = (
+    <CommonMenu
+      mode="horizontal"
+      // use openTransition for antd
+      openAnimation="slide-up"
+      triggerSubMenuAction="click"
+      updateChildrenAndOverflowedIndicator
+    />
+  );
+
+  const verticalMenu = (
+    <CommonMenu
+      mode="vertical"
+      openAnimation="zoom"
+    />
+  );
+
+  const inlineMenu = (
+    <CommonMenu
+      mode="inline"
+      defaultOpenKeys={['1']}
+      openAnimation={animation}
+    />
+  );
 
   ReactDOM.render(<div style={{ margin: 20 }}>
     <h2>antd menu</h2>
-
     <div>
       <h3>horizontal</h3>
 
-      <div style={{ margin: 20, width: 800 }}>{horizontalMenu}</div>
+      <div style={{ margin: 20 }}>{horizontalMenu}</div>
       <h3>horizontal and click</h3>
 
-      <div style={{ margin: 20, width: 800 }}>{horizontalMenu2}</div>
+      <div style={{ margin: 20 }}>{horizontalMenu2}</div>
       <h3>vertical</h3>
 
       <div style={{ margin: 20, width: 200 }}>{verticalMenu}</div>

package.json

@@ -77,10 +77,12 @@
     "classnames": "2.x",
     "dom-scroll-into-view": "1.x",
     "mini-store": "^1.1.0",
+    "mutationobserver-shim": "^0.3.2",
     "prop-types": "^15.5.6",
     "rc-animate": "2.x",
     "rc-trigger": "^2.3.0",
-    "rc-util": "^4.1.0"
+    "rc-util": "^4.1.0",
+    "resize-observer-polyfill": "^1.5.0"
   },
   "pre-commit": [
     "lint"