From f689b22549b30bc352f86433cdcac2bf29bf9a42 Mon Sep 17 00:00:00 2001 From: pengshengyun Date: Mon, 18 Jul 2016 15:46:35 +0800 Subject: [PATCH 1/3] add loopMenuItemRecursively to support getAll MenuItem --- src/util.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/util.js b/src/util.js index 65cbb295..cc922762 100644 --- a/src/util.js +++ b/src/util.js @@ -24,3 +24,15 @@ export function loopMenuItem(children, cb) { } }); } + +export function loopMenuItemRecursively(children, cb) { + let index = -1; + React.Children.forEach(children, (c) => { + index++; + if (/(SubMenu|Menu)$/.test(c.type) && c.props.children) { + loopMenuItemRecursively(c.props.children, cb); + } + + cb(c, index); + }); +} From 523752e179f5e9615a18d6ebe4c296d087adbc51 Mon Sep 17 00:00:00 2001 From: pengshengyun Date: Mon, 18 Jul 2016 15:48:04 +0800 Subject: [PATCH 2/3] fire default key select after render menu --- src/Menu.jsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/Menu.jsx b/src/Menu.jsx index c5df00a9..f9efb51a 100644 --- a/src/Menu.jsx +++ b/src/Menu.jsx @@ -1,7 +1,7 @@ import React, { PropTypes } from 'react'; import MenuMixin from './MenuMixin'; import assign from 'object-assign'; -import { noop, getKeyFromChildrenIndex } from './util'; +import { noop, getKeyFromChildrenIndex, loopMenuItemRecursively } from './util'; const Menu = React.createClass({ propTypes: { @@ -56,6 +56,24 @@ const Menu = React.createClass({ }; }, + componentDidMount() { + const children = this.props.children; + const activeKeys = this.props.defaultSelectedKeys; + + loopMenuItemRecursively(children, (c, i) => { + // multiple select + const activeKey = activeKeys.find(key => key === getKeyFromChildrenIndex(c, key, i)); + if (!c.props.disabled && typeof activeKey !== 'undefined') { + const selectInfo = { + key: activeKey, + item: c, + }; + + this.onSelect(selectInfo); + } + }); + }, + componentWillReceiveProps(nextProps) { const props = {}; if ('selectedKeys' in nextProps) { From 680fdb8e8595edca4edab848bfc82dd34b9dfbc3 Mon Sep 17 00:00:00 2001 From: pengshengyun Date: Mon, 18 Jul 2016 15:48:30 +0800 Subject: [PATCH 3/3] add default select key example --- examples/defaultSelectKey.html | 1 + examples/defaultSelectKey.js | 77 ++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+) create mode 100644 examples/defaultSelectKey.html create mode 100644 examples/defaultSelectKey.js diff --git a/examples/defaultSelectKey.html b/examples/defaultSelectKey.html new file mode 100644 index 00000000..b3a42524 --- /dev/null +++ b/examples/defaultSelectKey.html @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/examples/defaultSelectKey.js b/examples/defaultSelectKey.js new file mode 100644 index 00000000..97756c3c --- /dev/null +++ b/examples/defaultSelectKey.js @@ -0,0 +1,77 @@ +/* eslint no-console:0 */ + +import React from 'react'; +import ReactDOM from 'react-dom'; +import Menu, { SubMenu, MenuItem as MenuItem } from 'rc-menu'; + +import 'rc-menu/assets/index.less'; +import 'font-awesome/css/font-awesome.css'; + +const Test = React.createClass({ + getInitialState() { + return { + destroyed: false, + selectedKeys: [], + openKeys: [], + }; + }, + + onSelect(info) { + console.log('selected ', info); + this.setState({ + selectedKeys: info.selectedKeys, + }); + }, + + getMenu() { + return ( + + + 选项1 + 选项2 + 选项3 + 选项4 + + + 选项5 + 选项6 + + 选项7 + 选项8 + + + + 选项9 + 选项10 + 选项11 + 选项12 + + + ); + }, + + destroy() { + this.setState({ + destroyed: true, + }); + }, + + render() { + if (this.state.destroyed) { + return null; + } + + return (
+

multiple selectable menu

+ +
{this.getMenu()}
+
); + }, +}); + + +ReactDOM.render(, document.getElementById('__react-content'));