Menus.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _propsUtil = require('../_util/props-util');
  6. var _vueTypes = require('../_util/vue-types');
  7. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  8. var _arrayTreeFilter = require('array-tree-filter');
  9. var _arrayTreeFilter2 = _interopRequireDefault(_arrayTreeFilter);
  10. var _BaseMixin = require('../_util/BaseMixin');
  11. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  12. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  13. exports['default'] = {
  14. name: 'CascaderMenus',
  15. mixins: [_BaseMixin2['default']],
  16. props: {
  17. value: _vueTypes2['default'].array.def([]),
  18. activeValue: _vueTypes2['default'].array.def([]),
  19. options: _vueTypes2['default'].array,
  20. prefixCls: _vueTypes2['default'].string.def('rc-cascader-menus'),
  21. expandTrigger: _vueTypes2['default'].string.def('click'),
  22. // onSelect: PropTypes.func,
  23. visible: _vueTypes2['default'].bool.def(false),
  24. dropdownMenuColumnStyle: _vueTypes2['default'].object,
  25. defaultFieldNames: _vueTypes2['default'].object,
  26. fieldNames: _vueTypes2['default'].object,
  27. expandIcon: _vueTypes2['default'].any,
  28. loadingIcon: _vueTypes2['default'].any
  29. },
  30. data: function data() {
  31. this.menuItems = {};
  32. return {};
  33. },
  34. watch: {
  35. visible: function visible(val) {
  36. var _this = this;
  37. if (val) {
  38. this.$nextTick(function () {
  39. _this.scrollActiveItemToView();
  40. });
  41. }
  42. }
  43. },
  44. mounted: function mounted() {
  45. var _this2 = this;
  46. this.$nextTick(function () {
  47. _this2.scrollActiveItemToView();
  48. });
  49. },
  50. methods: {
  51. getFieldName: function getFieldName(name) {
  52. var _$props = this.$props,
  53. fieldNames = _$props.fieldNames,
  54. defaultFieldNames = _$props.defaultFieldNames;
  55. // 防止只设置单个属性的名字
  56. return fieldNames[name] || defaultFieldNames[name];
  57. },
  58. getOption: function getOption(option, menuIndex) {
  59. var _this3 = this;
  60. var h = this.$createElement;
  61. var prefixCls = this.prefixCls,
  62. expandTrigger = this.expandTrigger;
  63. var loadingIcon = (0, _propsUtil.getComponentFromProp)(this, 'loadingIcon');
  64. var expandIcon = (0, _propsUtil.getComponentFromProp)(this, 'expandIcon');
  65. var onSelect = function onSelect(e) {
  66. _this3.__emit('select', option, menuIndex, e);
  67. };
  68. var onItemDoubleClick = function onItemDoubleClick(e) {
  69. _this3.__emit('itemDoubleClick', option, menuIndex, e);
  70. };
  71. var key = option[this.getFieldName('value')];
  72. var expandProps = {
  73. attrs: {
  74. role: 'menuitem'
  75. },
  76. on: {
  77. click: onSelect,
  78. dblclick: onItemDoubleClick,
  79. mousedown: function mousedown(e) {
  80. return e.preventDefault();
  81. }
  82. },
  83. key: Array.isArray(key) ? key.join('__ant__') : key
  84. };
  85. var menuItemCls = prefixCls + '-menu-item';
  86. var expandIconNode = null;
  87. var hasChildren = option[this.getFieldName('children')] && option[this.getFieldName('children')].length > 0;
  88. if (hasChildren || option.isLeaf === false) {
  89. menuItemCls += ' ' + prefixCls + '-menu-item-expand';
  90. if (!option.loading) {
  91. expandIconNode = h(
  92. 'span',
  93. { 'class': prefixCls + '-menu-item-expand-icon' },
  94. [expandIcon]
  95. );
  96. }
  97. }
  98. if (expandTrigger === 'hover' && (hasChildren || option.isLeaf === false)) {
  99. expandProps.on = {
  100. mouseenter: this.delayOnSelect.bind(this, onSelect),
  101. mouseleave: this.delayOnSelect.bind(this),
  102. click: onSelect
  103. };
  104. }
  105. if (this.isActiveOption(option, menuIndex)) {
  106. menuItemCls += ' ' + prefixCls + '-menu-item-active';
  107. expandProps.ref = this.getMenuItemRef(menuIndex);
  108. }
  109. if (option.disabled) {
  110. menuItemCls += ' ' + prefixCls + '-menu-item-disabled';
  111. }
  112. var loadingIconNode = null;
  113. if (option.loading) {
  114. menuItemCls += ' ' + prefixCls + '-menu-item-loading';
  115. loadingIconNode = loadingIcon || null;
  116. }
  117. var title = '';
  118. if (option.title) {
  119. title = option.title;
  120. } else if (typeof option[this.getFieldName('label')] === 'string') {
  121. title = option[this.getFieldName('label')];
  122. }
  123. expandProps.attrs.title = title;
  124. expandProps['class'] = menuItemCls;
  125. return h(
  126. 'li',
  127. expandProps,
  128. [option[this.getFieldName('label')], expandIconNode, loadingIconNode]
  129. );
  130. },
  131. getActiveOptions: function getActiveOptions(values) {
  132. var _this4 = this;
  133. var activeValue = values || this.activeValue;
  134. var options = this.options;
  135. return (0, _arrayTreeFilter2['default'])(options, function (o, level) {
  136. return o[_this4.getFieldName('value')] === activeValue[level];
  137. }, { childrenKeyName: this.getFieldName('children') });
  138. },
  139. getShowOptions: function getShowOptions() {
  140. var _this5 = this;
  141. var options = this.options;
  142. var result = this.getActiveOptions().map(function (activeOption) {
  143. return activeOption[_this5.getFieldName('children')];
  144. }).filter(function (activeOption) {
  145. return !!activeOption;
  146. });
  147. result.unshift(options);
  148. return result;
  149. },
  150. delayOnSelect: function delayOnSelect(onSelect) {
  151. var _this6 = this;
  152. for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  153. args[_key - 1] = arguments[_key];
  154. }
  155. if (this.delayTimer) {
  156. clearTimeout(this.delayTimer);
  157. this.delayTimer = null;
  158. }
  159. if (typeof onSelect === 'function') {
  160. this.delayTimer = setTimeout(function () {
  161. onSelect(args);
  162. _this6.delayTimer = null;
  163. }, 150);
  164. }
  165. },
  166. scrollActiveItemToView: function scrollActiveItemToView() {
  167. // scroll into view
  168. var optionsLength = this.getShowOptions().length;
  169. for (var i = 0; i < optionsLength; i++) {
  170. var itemComponent = this.$refs['menuItems_' + i];
  171. if (itemComponent) {
  172. var target = itemComponent;
  173. target.parentNode.scrollTop = target.offsetTop;
  174. }
  175. }
  176. },
  177. isActiveOption: function isActiveOption(option, menuIndex) {
  178. var _activeValue = this.activeValue,
  179. activeValue = _activeValue === undefined ? [] : _activeValue;
  180. return activeValue[menuIndex] === option[this.getFieldName('value')];
  181. },
  182. getMenuItemRef: function getMenuItemRef(index) {
  183. return 'menuItems_' + index;
  184. }
  185. },
  186. render: function render() {
  187. var _this7 = this;
  188. var h = arguments[0];
  189. var prefixCls = this.prefixCls,
  190. dropdownMenuColumnStyle = this.dropdownMenuColumnStyle;
  191. return h('div', [this.getShowOptions().map(function (options, menuIndex) {
  192. return h(
  193. 'ul',
  194. { 'class': prefixCls + '-menu', key: menuIndex, style: dropdownMenuColumnStyle },
  195. [options.map(function (option) {
  196. return _this7.getOption(option, menuIndex);
  197. })]
  198. );
  199. })]);
  200. }
  201. };