ant-design-vue/components/vc-menu/DOMWrap.jsx

306 lines
9.1 KiB
Vue
Raw Normal View History

2019-01-12 11:33:27 +08:00
import PropTypes from '../_util/vue-types';
import ResizeObserver from 'resize-observer-polyfill';
import SubMenu from './SubMenu';
import BaseMixin from '../_util/BaseMixin';
import { getWidth, setStyle, menuAllProps } from './util';
import { cloneElement } from '../_util/vnode';
2020-01-19 16:58:38 +08:00
import { getClass, getPropsData, getEvents, getListeners } from '../_util/props-util';
2018-03-19 10:16:27 +08:00
2018-11-05 21:03:25 +08:00
const canUseDOM = !!(
typeof window !== 'undefined' &&
window.document &&
window.document.createElement
2019-01-12 11:33:27 +08:00
);
2018-11-05 21:03:25 +08:00
2019-01-12 11:33:27 +08:00
const MENUITEM_OVERFLOWED_CLASSNAME = 'menuitem-overflowed';
const FLOAT_PRECISION_ADJUST = 0.5;
2018-11-05 21:03:25 +08:00
// Fix ssr
if (canUseDOM) {
2019-01-12 11:33:27 +08:00
require('mutationobserver-shim');
2018-11-05 21:03:25 +08:00
}
const DOMWrap = {
2017-12-08 14:31:53 +08:00
name: 'DOMWrap',
2018-11-05 21:03:25 +08:00
mixins: [BaseMixin],
2019-01-12 11:33:27 +08:00
data() {
this.resizeObserver = null;
this.mutationObserver = null;
2018-11-05 21:03:25 +08:00
// original scroll size of the list
2019-01-12 11:33:27 +08:00
this.originalTotalWidth = 0;
2018-11-05 21:03:25 +08:00
// copy of overflowed items
2019-01-12 11:33:27 +08:00
this.overflowedItems = [];
2018-11-05 21:03:25 +08:00
// cache item of the original items (so we can track the size and order)
2019-01-12 11:33:27 +08:00
this.menuItemSizes = [];
2018-11-05 21:03:25 +08:00
return {
lastVisibleIndex: undefined,
2019-01-12 11:33:27 +08:00
};
2018-11-05 21:03:25 +08:00
},
2019-01-12 11:33:27 +08:00
mounted() {
2018-11-05 21:03:25 +08:00
this.$nextTick(() => {
2019-01-12 11:33:27 +08:00
this.setChildrenWidthAndResize();
2018-11-05 21:03:25 +08:00
if (this.level === 1 && this.mode === 'horizontal') {
2019-01-12 11:33:27 +08:00
const menuUl = this.$el;
2018-11-05 21:03:25 +08:00
if (!menuUl) {
2019-01-12 11:33:27 +08:00
return;
2018-11-05 21:03:25 +08:00
}
this.resizeObserver = new ResizeObserver(entries => {
2019-01-12 11:33:27 +08:00
entries.forEach(this.setChildrenWidthAndResize);
2018-11-05 21:03:25 +08:00
});
2019-01-12 11:33:27 +08:00
[].slice
.call(menuUl.children)
.concat(menuUl)
.forEach(el => {
this.resizeObserver.observe(el);
});
2018-11-05 21:03:25 +08:00
if (typeof MutationObserver !== 'undefined') {
this.mutationObserver = new MutationObserver(() => {
this.resizeObserver.disconnect();
2019-01-12 11:33:27 +08:00
[].slice
.call(menuUl.children)
.concat(menuUl)
.forEach(el => {
this.resizeObserver.observe(el);
});
this.setChildrenWidthAndResize();
});
this.mutationObserver.observe(menuUl, {
attributes: false,
childList: true,
subTree: false,
});
2018-11-05 21:03:25 +08:00
}
}
2019-01-12 11:33:27 +08:00
});
2018-11-05 21:03:25 +08:00
},
2019-01-12 11:33:27 +08:00
beforeDestroy() {
2018-11-05 21:03:25 +08:00
if (this.resizeObserver) {
2019-01-12 11:33:27 +08:00
this.resizeObserver.disconnect();
2018-11-05 21:03:25 +08:00
}
if (this.mutationObserver) {
2019-01-12 11:33:27 +08:00
this.resizeObserver.disconnect();
2018-11-05 21:03:25 +08:00
}
},
methods: {
// get all valid menuItem nodes
2019-01-12 11:33:27 +08:00
getMenuItemNodes() {
const { prefixCls } = this.$props;
const ul = this.$el;
2018-11-05 21:03:25 +08:00
if (!ul) {
2019-01-12 11:33:27 +08:00
return [];
2018-11-05 21:03:25 +08:00
}
// filter out all overflowed indicator placeholder
2019-01-12 11:33:27 +08:00
return [].slice.call(ul.children).filter(node => {
return node.className.split(' ').indexOf(`${prefixCls}-overflowed-submenu`) < 0;
});
2017-12-08 14:31:53 +08:00
},
2018-11-05 21:03:25 +08:00
2019-01-12 11:33:27 +08:00
getOverflowedSubMenuItem(keyPrefix, overflowedItems, renderPlaceholder) {
const { overflowedIndicator, level, mode, prefixCls, theme } = this.$props;
2018-11-05 21:03:25 +08:00
if (level !== 1 || mode !== 'horizontal') {
2019-01-12 11:33:27 +08:00
return null;
2018-11-05 21:03:25 +08:00
}
// put all the overflowed item inside a submenu
// with a title of overflow indicator ('...')
2019-01-12 11:33:27 +08:00
const copy = this.$slots.default[0];
const { title, eventKey, ...rest } = getPropsData(copy); // eslint-disable-line no-unused-vars
2018-11-05 21:03:25 +08:00
2019-01-12 11:33:27 +08:00
let style = {};
let key = `${keyPrefix}-overflowed-indicator`;
2018-11-05 21:03:25 +08:00
if (overflowedItems.length === 0 && renderPlaceholder !== true) {
style = {
display: 'none',
2019-01-12 11:33:27 +08:00
};
2018-11-05 21:03:25 +08:00
} else if (renderPlaceholder) {
style = {
visibility: 'hidden',
// prevent from taking normal dom space
position: 'absolute',
2019-01-12 11:33:27 +08:00
};
key = `${key}-placeholder`;
2018-11-05 21:03:25 +08:00
}
2019-01-12 11:33:27 +08:00
const popupClassName = theme ? `${prefixCls}-${theme}` : '';
const props = {};
menuAllProps.props.forEach(k => {
if (rest[k] !== undefined) {
2019-01-12 11:33:27 +08:00
props[k] = rest[k];
}
2019-01-12 11:33:27 +08:00
});
2018-11-05 21:03:25 +08:00
const subMenuProps = {
props: {
title: overflowedIndicator,
2018-11-05 21:03:25 +08:00
popupClassName,
...props,
2018-11-05 21:03:25 +08:00
eventKey: `${keyPrefix}-overflowed-indicator`,
disabled: false,
},
class: `${prefixCls}-overflowed-submenu`,
key,
style,
on: getEvents(copy),
2019-01-12 11:33:27 +08:00
};
2018-11-05 21:03:25 +08:00
2019-01-12 11:33:27 +08:00
return <SubMenu {...subMenuProps}>{overflowedItems}</SubMenu>;
2017-12-08 14:31:53 +08:00
},
2018-11-05 21:03:25 +08:00
// memorize rendered menuSize
2019-01-12 11:33:27 +08:00
setChildrenWidthAndResize() {
2018-11-05 21:03:25 +08:00
if (this.mode !== 'horizontal') {
2019-01-12 11:33:27 +08:00
return;
2018-11-05 21:03:25 +08:00
}
2019-01-12 11:33:27 +08:00
const ul = this.$el;
2018-11-05 21:03:25 +08:00
if (!ul) {
2019-01-12 11:33:27 +08:00
return;
2018-11-05 21:03:25 +08:00
}
2019-01-12 11:33:27 +08:00
const ulChildrenNodes = ul.children;
2018-11-05 21:03:25 +08:00
if (!ulChildrenNodes || ulChildrenNodes.length === 0) {
2019-01-12 11:33:27 +08:00
return;
2018-11-05 21:03:25 +08:00
}
2019-01-12 11:33:27 +08:00
const lastOverflowedIndicatorPlaceholder = ul.children[ulChildrenNodes.length - 1];
2018-11-05 21:03:25 +08:00
// need last overflowed indicator for calculating length;
2019-01-12 11:33:27 +08:00
setStyle(lastOverflowedIndicatorPlaceholder, 'display', 'inline-block');
2018-11-05 21:03:25 +08:00
2019-01-12 11:33:27 +08:00
const menuItemNodes = this.getMenuItemNodes();
2018-11-05 21:03:25 +08:00
// reset display attribute for all hidden elements caused by overflow to calculate updated width
// and then reset to original state after width calculation
2019-01-12 11:33:27 +08:00
const overflowedItems = menuItemNodes.filter(
c => c.className.split(' ').indexOf(MENUITEM_OVERFLOWED_CLASSNAME) >= 0,
);
2018-11-05 21:03:25 +08:00
overflowedItems.forEach(c => {
2019-01-12 11:33:27 +08:00
setStyle(c, 'display', 'inline-block');
});
2018-11-05 21:03:25 +08:00
2019-01-12 11:33:27 +08:00
this.menuItemSizes = menuItemNodes.map(c => getWidth(c));
2018-11-05 21:03:25 +08:00
overflowedItems.forEach(c => {
2019-01-12 11:33:27 +08:00
setStyle(c, 'display', 'none');
});
this.overflowedIndicatorWidth = getWidth(ul.children[ul.children.length - 1]);
this.originalTotalWidth = this.menuItemSizes.reduce((acc, cur) => acc + cur, 0);
this.handleResize();
2018-11-05 21:03:25 +08:00
// prevent the overflowed indicator from taking space;
2019-01-12 11:33:27 +08:00
setStyle(lastOverflowedIndicatorPlaceholder, 'display', 'none');
2018-01-02 19:05:02 +08:00
},
2018-11-05 21:03:25 +08:00
2019-01-12 11:33:27 +08:00
handleResize() {
2018-11-05 21:03:25 +08:00
if (this.mode !== 'horizontal') {
2019-01-12 11:33:27 +08:00
return;
2018-11-05 21:03:25 +08:00
}
2019-01-12 11:33:27 +08:00
const ul = this.$el;
2018-11-05 21:03:25 +08:00
if (!ul) {
2019-01-12 11:33:27 +08:00
return;
2018-11-05 21:03:25 +08:00
}
2019-01-12 11:33:27 +08:00
const width = getWidth(ul);
2018-11-05 21:03:25 +08:00
2019-01-12 11:33:27 +08:00
this.overflowedItems = [];
let currentSumWidth = 0;
2018-11-05 21:03:25 +08:00
// index for last visible child in horizontal mode
2019-01-12 11:33:27 +08:00
let lastVisibleIndex;
2018-11-05 21:03:25 +08:00
2019-01-08 23:03:13 +08:00
// float number comparison could be problematic
// e.g. 0.1 + 0.2 > 0.3 =====> true
// thus using FLOAT_PRECISION_ADJUST as buffer to help the situation
if (this.originalTotalWidth > width + FLOAT_PRECISION_ADJUST) {
2019-01-12 11:33:27 +08:00
lastVisibleIndex = -1;
2018-11-05 21:03:25 +08:00
this.menuItemSizes.forEach(liWidth => {
2019-01-12 11:33:27 +08:00
currentSumWidth += liWidth;
2018-11-05 21:03:25 +08:00
if (currentSumWidth + this.overflowedIndicatorWidth <= width) {
2019-01-12 11:33:27 +08:00
lastVisibleIndex++;
2018-11-05 21:03:25 +08:00
}
2019-01-12 11:33:27 +08:00
});
2017-12-08 14:31:53 +08:00
}
2018-11-05 21:03:25 +08:00
2019-01-12 11:33:27 +08:00
this.setState({ lastVisibleIndex });
2018-11-05 21:03:25 +08:00
},
2019-01-12 11:33:27 +08:00
renderChildren(children) {
2018-11-05 21:03:25 +08:00
// need to take care of overflowed items in horizontal mode
2019-01-12 11:33:27 +08:00
const { lastVisibleIndex } = this.$data;
const className = getClass(this);
2018-11-05 21:03:25 +08:00
return (children || []).reduce((acc, childNode, index) => {
2019-01-12 11:33:27 +08:00
let item = childNode;
const eventKey = getPropsData(childNode).eventKey;
2018-11-05 21:03:25 +08:00
if (this.mode === 'horizontal') {
2019-01-12 11:33:27 +08:00
let overflowed = this.getOverflowedSubMenuItem(eventKey, []);
if (lastVisibleIndex !== undefined && className[`${this.prefixCls}-root`] !== -1) {
2018-11-05 21:03:25 +08:00
if (index > lastVisibleIndex) {
item = cloneElement(
childNode,
// 这里修改 eventKey 是为了防止隐藏状态下还会触发 openkeys 事件
{
style: { display: 'none' },
props: { eventKey: `${eventKey}-hidden` },
class: { ...getClass(childNode), [MENUITEM_OVERFLOWED_CLASSNAME]: true },
},
2019-01-12 11:33:27 +08:00
);
2018-11-05 21:03:25 +08:00
}
if (index === lastVisibleIndex + 1) {
this.overflowedItems = children.slice(lastVisibleIndex + 1).map(c => {
return cloneElement(
c,
// children[index].key will become '.$key' in clone by default,
// we have to overwrite with the correct key explicitly
2019-01-12 11:33:27 +08:00
{ key: getPropsData(c).eventKey, props: { mode: 'vertical-left' } },
);
});
overflowed = this.getOverflowedSubMenuItem(eventKey, this.overflowedItems);
2018-11-05 21:03:25 +08:00
}
}
2019-01-12 11:33:27 +08:00
const ret = [...acc, overflowed, item];
2018-11-05 21:03:25 +08:00
if (index === children.length - 1) {
// need a placeholder for calculating overflowed indicator width
2019-01-12 11:33:27 +08:00
ret.push(this.getOverflowedSubMenuItem(eventKey, [], true));
2018-11-05 21:03:25 +08:00
}
2019-01-12 11:33:27 +08:00
return ret;
2018-11-05 21:03:25 +08:00
}
2019-01-12 11:33:27 +08:00
return [...acc, item];
}, []);
2017-12-08 14:31:53 +08:00
},
},
2018-11-05 21:03:25 +08:00
2019-01-12 11:33:27 +08:00
render() {
const Tag = this.$props.tag;
2017-12-08 14:31:53 +08:00
const tagProps = {
2020-01-19 16:58:38 +08:00
on: getListeners(this),
2019-01-12 11:33:27 +08:00
};
return <Tag {...tagProps}>{this.renderChildren(this.$slots.default)}</Tag>;
2017-12-08 14:31:53 +08:00
},
2019-01-12 11:33:27 +08:00
};
2018-03-19 10:16:27 +08:00
2018-11-05 21:03:25 +08:00
DOMWrap.props = {
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']),
prefixCls: PropTypes.string,
level: PropTypes.number,
theme: PropTypes.string,
overflowedIndicator: PropTypes.node,
visible: PropTypes.bool,
hiddenClassName: PropTypes.string,
tag: PropTypes.string.def('div'),
2019-01-12 11:33:27 +08:00
};
2018-11-05 21:03:25 +08:00
2019-01-12 11:33:27 +08:00
export default DOMWrap;