Menu.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _extends2 = require('babel-runtime/helpers/extends');
  6. var _extends3 = _interopRequireDefault(_extends2);
  7. var _vueTypes = require('../_util/vue-types');
  8. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  9. var _store = require('../_util/store');
  10. var _SubPopupMenu = require('./SubPopupMenu');
  11. var _SubPopupMenu2 = _interopRequireDefault(_SubPopupMenu);
  12. var _BaseMixin = require('../_util/BaseMixin');
  13. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  14. var _propsUtil = require('../_util/props-util');
  15. var _propsUtil2 = _interopRequireDefault(_propsUtil);
  16. var _commonPropsType = require('./commonPropsType');
  17. var _commonPropsType2 = _interopRequireDefault(_commonPropsType);
  18. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  19. var Menu = {
  20. name: 'Menu',
  21. props: (0, _extends3['default'])({}, _commonPropsType2['default'], {
  22. selectable: _vueTypes2['default'].bool.def(true)
  23. }),
  24. mixins: [_BaseMixin2['default']],
  25. data: function data() {
  26. var props = (0, _propsUtil.getOptionProps)(this);
  27. var selectedKeys = props.defaultSelectedKeys;
  28. var openKeys = props.defaultOpenKeys;
  29. if ('selectedKeys' in props) {
  30. selectedKeys = props.selectedKeys || [];
  31. }
  32. if ('openKeys' in props) {
  33. openKeys = props.openKeys || [];
  34. }
  35. this.store = (0, _store.create)({
  36. selectedKeys: selectedKeys,
  37. openKeys: openKeys,
  38. activeKey: {
  39. '0-menu-': (0, _SubPopupMenu.getActiveKey)((0, _extends3['default'])({}, props, { children: this.$slots['default'] || [] }), props.activeKey)
  40. }
  41. });
  42. // this.isRootMenu = true // 声明在props上
  43. return {};
  44. },
  45. mounted: function mounted() {
  46. this.updateMiniStore();
  47. },
  48. updated: function updated() {
  49. this.updateMiniStore();
  50. },
  51. methods: {
  52. onSelect: function onSelect(selectInfo) {
  53. var props = this.$props;
  54. if (props.selectable) {
  55. // root menu
  56. var selectedKeys = this.store.getState().selectedKeys;
  57. var selectedKey = selectInfo.key;
  58. if (props.multiple) {
  59. selectedKeys = selectedKeys.concat([selectedKey]);
  60. } else {
  61. selectedKeys = [selectedKey];
  62. }
  63. if (!(0, _propsUtil2['default'])(this, 'selectedKeys')) {
  64. this.store.setState({
  65. selectedKeys: selectedKeys
  66. });
  67. }
  68. this.__emit('select', (0, _extends3['default'])({}, selectInfo, {
  69. selectedKeys: selectedKeys
  70. }));
  71. }
  72. },
  73. onClick: function onClick(e) {
  74. this.__emit('click', e);
  75. },
  76. // onKeyDown needs to be exposed as a instance method
  77. // e.g., in rc-select, we need to navigate menu item while
  78. // current active item is rc-select input box rather than the menu itself
  79. onKeyDown: function onKeyDown(e, callback) {
  80. this.$refs.innerMenu.getWrappedInstance().onKeyDown(e, callback);
  81. },
  82. onOpenChange: function onOpenChange(event) {
  83. var openKeys = this.store.getState().openKeys.concat();
  84. var changed = false;
  85. var processSingle = function processSingle(e) {
  86. var oneChanged = false;
  87. if (e.open) {
  88. oneChanged = openKeys.indexOf(e.key) === -1;
  89. if (oneChanged) {
  90. openKeys.push(e.key);
  91. }
  92. } else {
  93. var index = openKeys.indexOf(e.key);
  94. oneChanged = index !== -1;
  95. if (oneChanged) {
  96. openKeys.splice(index, 1);
  97. }
  98. }
  99. changed = changed || oneChanged;
  100. };
  101. if (Array.isArray(event)) {
  102. // batch change call
  103. event.forEach(processSingle);
  104. } else {
  105. processSingle(event);
  106. }
  107. if (changed) {
  108. if (!(0, _propsUtil2['default'])(this, 'openKeys')) {
  109. this.store.setState({ openKeys: openKeys });
  110. }
  111. this.__emit('openChange', openKeys);
  112. }
  113. },
  114. onDeselect: function onDeselect(selectInfo) {
  115. var props = this.$props;
  116. if (props.selectable) {
  117. var selectedKeys = this.store.getState().selectedKeys.concat();
  118. var selectedKey = selectInfo.key;
  119. var index = selectedKeys.indexOf(selectedKey);
  120. if (index !== -1) {
  121. selectedKeys.splice(index, 1);
  122. }
  123. if (!(0, _propsUtil2['default'])(this, 'selectedKeys')) {
  124. this.store.setState({
  125. selectedKeys: selectedKeys
  126. });
  127. }
  128. this.__emit('deselect', (0, _extends3['default'])({}, selectInfo, {
  129. selectedKeys: selectedKeys
  130. }));
  131. }
  132. },
  133. getOpenTransitionName: function getOpenTransitionName() {
  134. var props = this.$props;
  135. var transitionName = props.openTransitionName;
  136. var animationName = props.openAnimation;
  137. if (!transitionName && typeof animationName === 'string') {
  138. transitionName = props.prefixCls + '-open-' + animationName;
  139. }
  140. return transitionName;
  141. },
  142. updateMiniStore: function updateMiniStore() {
  143. var props = (0, _propsUtil.getOptionProps)(this);
  144. if ('selectedKeys' in props) {
  145. this.store.setState({
  146. selectedKeys: props.selectedKeys || []
  147. });
  148. }
  149. if ('openKeys' in props) {
  150. this.store.setState({
  151. openKeys: props.openKeys || []
  152. });
  153. }
  154. }
  155. },
  156. render: function render() {
  157. var h = arguments[0];
  158. var props = (0, _propsUtil.getOptionProps)(this);
  159. var subPopupMenuProps = {
  160. props: (0, _extends3['default'])({}, props, {
  161. itemIcon: (0, _propsUtil.getComponentFromProp)(this, 'itemIcon', props),
  162. expandIcon: (0, _propsUtil.getComponentFromProp)(this, 'expandIcon', props),
  163. overflowedIndicator: (0, _propsUtil.getComponentFromProp)(this, 'overflowedIndicator', props) || h('span', ['\xB7\xB7\xB7']),
  164. openTransitionName: this.getOpenTransitionName(),
  165. parentMenu: this,
  166. children: (0, _propsUtil.filterEmpty)(this.$slots['default'] || [])
  167. }),
  168. 'class': props.prefixCls + '-root',
  169. on: (0, _extends3['default'])({}, (0, _propsUtil.getListeners)(this), {
  170. click: this.onClick,
  171. openChange: this.onOpenChange,
  172. deselect: this.onDeselect,
  173. select: this.onSelect
  174. }),
  175. ref: 'innerMenu'
  176. };
  177. return h(
  178. _store.Provider,
  179. {
  180. attrs: { store: this.store }
  181. },
  182. [h(_SubPopupMenu2['default'], subPopupMenuProps)]
  183. );
  184. }
  185. };
  186. exports['default'] = Menu;