1 | import { createVNode as _createVNode, isVNode as _isVNode } from "vue";
|
2 |
|
3 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
4 |
|
5 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
6 |
|
7 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
8 |
|
9 | import { getComponent, findDOMNode } from '../_util/props-util';
|
10 | import PropTypes from '../_util/vue-types';
|
11 | import arrayTreeFilter from 'array-tree-filter';
|
12 | import BaseMixin from '../_util/BaseMixin';
|
13 |
|
14 | function _isSlot(s) {
|
15 | return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
|
16 | }
|
17 |
|
18 | export default {
|
19 | name: 'CascaderMenus',
|
20 | mixins: [BaseMixin],
|
21 | inheritAttrs: false,
|
22 | props: {
|
23 | value: PropTypes.array.def([]),
|
24 | activeValue: PropTypes.array.def([]),
|
25 | options: PropTypes.array,
|
26 | prefixCls: PropTypes.string.def('rc-cascader-menus'),
|
27 | expandTrigger: PropTypes.string.def('click'),
|
28 |
|
29 | visible: PropTypes.looseBool.def(false),
|
30 | dropdownMenuColumnStyle: PropTypes.object,
|
31 | defaultFieldNames: PropTypes.object,
|
32 | fieldNames: PropTypes.object,
|
33 | expandIcon: PropTypes.any,
|
34 | loadingIcon: PropTypes.any
|
35 | },
|
36 | data: function data() {
|
37 | this.menuItems = {};
|
38 | return {};
|
39 | },
|
40 | watch: {
|
41 | visible: function visible(val) {
|
42 | var _this = this;
|
43 |
|
44 | if (val) {
|
45 | this.$nextTick(function () {
|
46 | _this.scrollActiveItemToView();
|
47 | });
|
48 | }
|
49 | }
|
50 | },
|
51 | mounted: function mounted() {
|
52 | var _this2 = this;
|
53 |
|
54 | this.$nextTick(function () {
|
55 | _this2.scrollActiveItemToView();
|
56 | });
|
57 | },
|
58 | methods: {
|
59 | getFieldName: function getFieldName(name) {
|
60 | var _this$$props = this.$props,
|
61 | fieldNames = _this$$props.fieldNames,
|
62 | defaultFieldNames = _this$$props.defaultFieldNames;
|
63 |
|
64 | return fieldNames[name] || defaultFieldNames[name];
|
65 | },
|
66 | getOption: function getOption(option, menuIndex) {
|
67 | var _this3 = this;
|
68 |
|
69 | var prefixCls = this.prefixCls,
|
70 | expandTrigger = this.expandTrigger;
|
71 | var loadingIcon = getComponent(this, 'loadingIcon');
|
72 | var expandIcon = getComponent(this, 'expandIcon');
|
73 |
|
74 | var onSelect = function onSelect(e) {
|
75 | _this3.__emit('select', option, menuIndex, e);
|
76 | };
|
77 |
|
78 | var onItemDoubleClick = function onItemDoubleClick(e) {
|
79 | _this3.__emit('itemDoubleClick', option, menuIndex, e);
|
80 | };
|
81 |
|
82 | var key = option[this.getFieldName('value')];
|
83 | var expandProps = {
|
84 | onClick: onSelect,
|
85 | onDblclick: onItemDoubleClick
|
86 | };
|
87 | var menuItemCls = "".concat(prefixCls, "-menu-item");
|
88 | var expandIconNode = null;
|
89 | var hasChildren = option[this.getFieldName('children')] && option[this.getFieldName('children')].length > 0;
|
90 |
|
91 | if (hasChildren || option.isLeaf === false) {
|
92 | menuItemCls += " ".concat(prefixCls, "-menu-item-expand");
|
93 |
|
94 | if (!option.loading) {
|
95 | expandIconNode = _createVNode("span", {
|
96 | "class": "".concat(prefixCls, "-menu-item-expand-icon")
|
97 | }, _isSlot(expandIcon) ? expandIcon : {
|
98 | default: function _default() {
|
99 | return [expandIcon];
|
100 | }
|
101 | });
|
102 | }
|
103 | }
|
104 |
|
105 | if (expandTrigger === 'hover' && (hasChildren || option.isLeaf === false)) {
|
106 | expandProps = {
|
107 | onMouseenter: this.delayOnSelect.bind(this, onSelect),
|
108 | onMouseleave: this.delayOnSelect.bind(this),
|
109 | onClick: onSelect
|
110 | };
|
111 | }
|
112 |
|
113 | if (this.isActiveOption(option, menuIndex)) {
|
114 | menuItemCls += " ".concat(prefixCls, "-menu-item-active");
|
115 | expandProps.ref = this.saveMenuItem(menuIndex);
|
116 | }
|
117 |
|
118 | if (option.disabled) {
|
119 | menuItemCls += " ".concat(prefixCls, "-menu-item-disabled");
|
120 | }
|
121 |
|
122 | var loadingIconNode = null;
|
123 |
|
124 | if (option.loading) {
|
125 | menuItemCls += " ".concat(prefixCls, "-menu-item-loading");
|
126 | loadingIconNode = loadingIcon || null;
|
127 | }
|
128 |
|
129 | var title = '';
|
130 |
|
131 | if (option.title) {
|
132 | title = option.title;
|
133 | } else if (typeof option[this.getFieldName('label')] === 'string') {
|
134 | title = option[this.getFieldName('label')];
|
135 | }
|
136 |
|
137 | return _createVNode("li", _objectSpread(_objectSpread({
|
138 | "key": Array.isArray(key) ? key.join('__ant__') : key,
|
139 | "class": menuItemCls,
|
140 | "title": title
|
141 | }, expandProps), {}, {
|
142 | "role": "menuitem",
|
143 | "onMousedown": function onMousedown(e) {
|
144 | return e.preventDefault();
|
145 | }
|
146 | }), [option[this.getFieldName('label')], expandIconNode, loadingIconNode]);
|
147 | },
|
148 | getActiveOptions: function getActiveOptions(values) {
|
149 | var _this4 = this;
|
150 |
|
151 | var activeValue = values || this.activeValue;
|
152 | var options = this.options;
|
153 | return arrayTreeFilter(options, function (o, level) {
|
154 | return o[_this4.getFieldName('value')] === activeValue[level];
|
155 | }, {
|
156 | childrenKeyName: this.getFieldName('children')
|
157 | });
|
158 | },
|
159 | getShowOptions: function getShowOptions() {
|
160 | var _this5 = this;
|
161 |
|
162 | var options = this.options;
|
163 | var result = this.getActiveOptions().map(function (activeOption) {
|
164 | return activeOption[_this5.getFieldName('children')];
|
165 | }).filter(function (activeOption) {
|
166 | return !!activeOption;
|
167 | });
|
168 | result.unshift(options);
|
169 | return result;
|
170 | },
|
171 | delayOnSelect: function delayOnSelect(onSelect) {
|
172 | var _this6 = this;
|
173 |
|
174 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
175 | args[_key - 1] = arguments[_key];
|
176 | }
|
177 |
|
178 | if (this.delayTimer) {
|
179 | clearTimeout(this.delayTimer);
|
180 | this.delayTimer = null;
|
181 | }
|
182 |
|
183 | if (typeof onSelect === 'function') {
|
184 | this.delayTimer = setTimeout(function () {
|
185 | onSelect(args);
|
186 | _this6.delayTimer = null;
|
187 | }, 150);
|
188 | }
|
189 | },
|
190 | scrollActiveItemToView: function scrollActiveItemToView() {
|
191 |
|
192 | var optionsLength = this.getShowOptions().length;
|
193 |
|
194 | for (var i = 0; i < optionsLength; i++) {
|
195 | var itemComponent = this.menuItems[i];
|
196 |
|
197 | if (itemComponent) {
|
198 | var target = findDOMNode(itemComponent);
|
199 | target.parentNode.scrollTop = target.offsetTop;
|
200 | }
|
201 | }
|
202 | },
|
203 | isActiveOption: function isActiveOption(option, menuIndex) {
|
204 | var _this$activeValue = this.activeValue,
|
205 | activeValue = _this$activeValue === void 0 ? [] : _this$activeValue;
|
206 | return activeValue[menuIndex] === option[this.getFieldName('value')];
|
207 | },
|
208 | saveMenuItem: function saveMenuItem(index) {
|
209 | var _this7 = this;
|
210 |
|
211 | return function (node) {
|
212 | _this7.menuItems[index] = node;
|
213 | };
|
214 | }
|
215 | },
|
216 | render: function render() {
|
217 | var _this8 = this;
|
218 |
|
219 | var prefixCls = this.prefixCls,
|
220 | dropdownMenuColumnStyle = this.dropdownMenuColumnStyle;
|
221 | return _createVNode("div", null, [this.getShowOptions().map(function (options, menuIndex) {
|
222 | return _createVNode("ul", {
|
223 | "class": "".concat(prefixCls, "-menu"),
|
224 | "key": menuIndex,
|
225 | "style": dropdownMenuColumnStyle
|
226 | }, [options.map(function (option) {
|
227 | return _this8.getOption(option, menuIndex);
|
228 | })]);
|
229 | })]);
|
230 | }
|
231 | }; |
\ | No newline at end of file |