MenuItem.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.menuItemProps = undefined;
  6. var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
  7. var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
  8. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  9. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  10. var _extends2 = require('babel-runtime/helpers/extends');
  11. var _extends3 = _interopRequireDefault(_extends2);
  12. var _vueTypes = require('../_util/vue-types');
  13. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  14. var _KeyCode = require('../_util/KeyCode');
  15. var _KeyCode2 = _interopRequireDefault(_KeyCode);
  16. var _BaseMixin = require('../_util/BaseMixin');
  17. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  18. var _domScrollIntoView = require('dom-scroll-into-view');
  19. var _domScrollIntoView2 = _interopRequireDefault(_domScrollIntoView);
  20. var _store = require('../_util/store');
  21. var _util = require('./util');
  22. var _propsUtil = require('../_util/props-util');
  23. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  24. var props = {
  25. attribute: _vueTypes2['default'].object,
  26. rootPrefixCls: _vueTypes2['default'].string,
  27. eventKey: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]),
  28. active: _vueTypes2['default'].bool,
  29. selectedKeys: _vueTypes2['default'].array,
  30. disabled: _vueTypes2['default'].bool,
  31. title: _vueTypes2['default'].any,
  32. index: _vueTypes2['default'].number,
  33. inlineIndent: _vueTypes2['default'].number.def(24),
  34. level: _vueTypes2['default'].number.def(1),
  35. mode: _vueTypes2['default'].oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
  36. parentMenu: _vueTypes2['default'].object,
  37. multiple: _vueTypes2['default'].bool,
  38. value: _vueTypes2['default'].any,
  39. isSelected: _vueTypes2['default'].bool,
  40. manualRef: _vueTypes2['default'].func.def(_util.noop),
  41. role: _vueTypes2['default'].any,
  42. subMenuKey: _vueTypes2['default'].string,
  43. itemIcon: _vueTypes2['default'].any
  44. // clearSubMenuTimers: PropTypes.func.def(noop),
  45. };
  46. var MenuItem = {
  47. name: 'MenuItem',
  48. props: props,
  49. mixins: [_BaseMixin2['default']],
  50. isMenuItem: true,
  51. created: function created() {
  52. this.prevActive = this.active;
  53. // invoke customized ref to expose component to mixin
  54. this.callRef();
  55. },
  56. updated: function updated() {
  57. var _this = this;
  58. this.$nextTick(function () {
  59. var _$props = _this.$props,
  60. active = _$props.active,
  61. parentMenu = _$props.parentMenu,
  62. eventKey = _$props.eventKey;
  63. if (!_this.prevActive && active && (!parentMenu || !parentMenu['scrolled-' + eventKey])) {
  64. (0, _domScrollIntoView2['default'])(_this.$el, _this.parentMenu.$el, {
  65. onlyScrollIfNeeded: true
  66. });
  67. parentMenu['scrolled-' + eventKey] = true;
  68. } else if (parentMenu && parentMenu['scrolled-' + eventKey]) {
  69. delete parentMenu['scrolled-' + eventKey];
  70. }
  71. _this.prevActive = active;
  72. });
  73. this.callRef();
  74. },
  75. beforeDestroy: function beforeDestroy() {
  76. var props = this.$props;
  77. this.__emit('destroy', props.eventKey);
  78. },
  79. methods: {
  80. onKeyDown: function onKeyDown(e) {
  81. var keyCode = e.keyCode;
  82. if (keyCode === _KeyCode2['default'].ENTER) {
  83. this.onClick(e);
  84. return true;
  85. }
  86. },
  87. onMouseLeave: function onMouseLeave(e) {
  88. var eventKey = this.$props.eventKey;
  89. this.__emit('itemHover', {
  90. key: eventKey,
  91. hover: false
  92. });
  93. this.__emit('mouseleave', {
  94. key: eventKey,
  95. domEvent: e
  96. });
  97. },
  98. onMouseEnter: function onMouseEnter(e) {
  99. var eventKey = this.eventKey;
  100. this.__emit('itemHover', {
  101. key: eventKey,
  102. hover: true
  103. });
  104. this.__emit('mouseenter', {
  105. key: eventKey,
  106. domEvent: e
  107. });
  108. },
  109. onClick: function onClick(e) {
  110. var _$props2 = this.$props,
  111. eventKey = _$props2.eventKey,
  112. multiple = _$props2.multiple,
  113. isSelected = _$props2.isSelected;
  114. var info = {
  115. key: eventKey,
  116. keyPath: [eventKey],
  117. item: this,
  118. domEvent: e
  119. };
  120. this.__emit('click', info);
  121. if (multiple) {
  122. if (isSelected) {
  123. this.__emit('deselect', info);
  124. } else {
  125. this.__emit('select', info);
  126. }
  127. } else if (!isSelected) {
  128. this.__emit('select', info);
  129. }
  130. },
  131. getPrefixCls: function getPrefixCls() {
  132. return this.$props.rootPrefixCls + '-item';
  133. },
  134. getActiveClassName: function getActiveClassName() {
  135. return this.getPrefixCls() + '-active';
  136. },
  137. getSelectedClassName: function getSelectedClassName() {
  138. return this.getPrefixCls() + '-selected';
  139. },
  140. getDisabledClassName: function getDisabledClassName() {
  141. return this.getPrefixCls() + '-disabled';
  142. },
  143. callRef: function callRef() {
  144. if (this.manualRef) {
  145. this.manualRef(this);
  146. }
  147. }
  148. },
  149. render: function render() {
  150. var _className;
  151. var h = arguments[0];
  152. var props = (0, _extends3['default'])({}, this.$props);
  153. var className = (_className = {}, (0, _defineProperty3['default'])(_className, this.getPrefixCls(), true), (0, _defineProperty3['default'])(_className, this.getActiveClassName(), !props.disabled && props.active), (0, _defineProperty3['default'])(_className, this.getSelectedClassName(), props.isSelected), (0, _defineProperty3['default'])(_className, this.getDisabledClassName(), props.disabled), _className);
  154. var attrs = (0, _extends3['default'])({}, props.attribute, {
  155. title: props.title,
  156. role: props.role || 'menuitem',
  157. 'aria-disabled': props.disabled
  158. });
  159. if (props.role === 'option') {
  160. // overwrite to option
  161. attrs = (0, _extends3['default'])({}, attrs, {
  162. role: 'option',
  163. 'aria-selected': props.isSelected
  164. });
  165. } else if (props.role === null || props.role === 'none') {
  166. // sometimes we want to specify role inside <li/> element
  167. // <li><a role='menuitem'>Link</a></li> would be a good example
  168. // in this case the role on <li/> should be "none" to
  169. // remove the implied listitem role.
  170. // https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html
  171. attrs.role = 'none';
  172. }
  173. // In case that onClick/onMouseLeave/onMouseEnter is passed down from owner
  174. var mouseEvent = {
  175. click: props.disabled ? _util.noop : this.onClick,
  176. mouseleave: props.disabled ? _util.noop : this.onMouseLeave,
  177. mouseenter: props.disabled ? _util.noop : this.onMouseEnter
  178. };
  179. var style = {};
  180. if (props.mode === 'inline') {
  181. style.paddingLeft = props.inlineIndent * props.level + 'px';
  182. }
  183. var listeners = (0, _extends3['default'])({}, (0, _propsUtil.getListeners)(this));
  184. _util.menuAllProps.props.forEach(function (key) {
  185. return delete props[key];
  186. });
  187. _util.menuAllProps.on.forEach(function (key) {
  188. return delete listeners[key];
  189. });
  190. var liProps = {
  191. attrs: (0, _extends3['default'])({}, props, attrs),
  192. on: (0, _extends3['default'])({}, listeners, mouseEvent)
  193. };
  194. return h(
  195. 'li',
  196. (0, _babelHelperVueJsxMergeProps2['default'])([liProps, { style: style, 'class': className }]),
  197. [this.$slots['default'], (0, _propsUtil.getComponentFromProp)(this, 'itemIcon', props)]
  198. );
  199. }
  200. };
  201. var connected = (0, _store.connect)(function (_ref, _ref2) {
  202. var activeKey = _ref.activeKey,
  203. selectedKeys = _ref.selectedKeys;
  204. var eventKey = _ref2.eventKey,
  205. subMenuKey = _ref2.subMenuKey;
  206. return {
  207. active: activeKey[subMenuKey] === eventKey,
  208. isSelected: selectedKeys.indexOf(eventKey) !== -1
  209. };
  210. })(MenuItem);
  211. exports['default'] = connected;
  212. exports.menuItemProps = props;