2019-01-12 11:33:27 +08:00
|
|
|
import { filterEmpty, parseStyleText } from './props-util';
|
2019-07-24 19:21:27 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
export function cloneVNode(vnode, deep) {
|
|
|
|
const componentOptions = vnode.componentOptions;
|
|
|
|
const data = vnode.data;
|
2018-02-05 11:18:50 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
let listeners = {};
|
2018-02-05 11:18:50 +08:00
|
|
|
if (componentOptions && componentOptions.listeners) {
|
2019-01-12 11:33:27 +08:00
|
|
|
listeners = { ...componentOptions.listeners };
|
2018-02-05 11:18:50 +08:00
|
|
|
}
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
let on = {};
|
2018-02-05 11:18:50 +08:00
|
|
|
if (data && data.on) {
|
2019-01-12 11:33:27 +08:00
|
|
|
on = { ...data.on };
|
2018-02-05 11:18:50 +08:00
|
|
|
}
|
2018-01-18 18:58:36 +08:00
|
|
|
|
2017-12-14 12:13:15 +08:00
|
|
|
const cloned = new vnode.constructor(
|
|
|
|
vnode.tag,
|
2018-02-05 11:18:50 +08:00
|
|
|
data ? { ...data, on } : data,
|
2017-12-14 12:13:15 +08:00
|
|
|
vnode.children,
|
|
|
|
vnode.text,
|
|
|
|
vnode.elm,
|
|
|
|
vnode.context,
|
2018-02-05 11:18:50 +08:00
|
|
|
componentOptions ? { ...componentOptions, listeners } : componentOptions,
|
2019-01-12 11:33:27 +08:00
|
|
|
vnode.asyncFactory,
|
|
|
|
);
|
|
|
|
cloned.ns = vnode.ns;
|
|
|
|
cloned.isStatic = vnode.isStatic;
|
|
|
|
cloned.key = vnode.key;
|
|
|
|
cloned.isComment = vnode.isComment;
|
|
|
|
cloned.fnContext = vnode.fnContext;
|
|
|
|
cloned.fnOptions = vnode.fnOptions;
|
|
|
|
cloned.fnScopeId = vnode.fnScopeId;
|
|
|
|
cloned.isCloned = true;
|
2018-01-08 18:31:04 +08:00
|
|
|
if (deep) {
|
|
|
|
if (vnode.children) {
|
2019-01-12 11:33:27 +08:00
|
|
|
cloned.children = cloneVNodes(vnode.children, true);
|
2018-01-08 18:31:04 +08:00
|
|
|
}
|
|
|
|
if (componentOptions && componentOptions.children) {
|
2019-01-12 11:33:27 +08:00
|
|
|
componentOptions.children = cloneVNodes(componentOptions.children, true);
|
2018-01-08 18:31:04 +08:00
|
|
|
}
|
2017-12-14 12:13:15 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
return cloned;
|
2017-12-14 12:13:15 +08:00
|
|
|
}
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
export function cloneVNodes(vnodes, deep) {
|
|
|
|
const len = vnodes.length;
|
|
|
|
const res = new Array(len);
|
2017-12-14 12:13:15 +08:00
|
|
|
for (let i = 0; i < len; i++) {
|
2019-01-12 11:33:27 +08:00
|
|
|
res[i] = cloneVNode(vnodes[i], deep);
|
2017-12-14 12:13:15 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
return res;
|
2017-12-14 12:13:15 +08:00
|
|
|
}
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
export function cloneElement(n, nodeProps = {}, deep) {
|
|
|
|
let ele = n;
|
2018-01-29 18:57:20 +08:00
|
|
|
if (Array.isArray(n)) {
|
2019-01-12 11:33:27 +08:00
|
|
|
ele = filterEmpty(n)[0];
|
2018-01-29 18:57:20 +08:00
|
|
|
}
|
|
|
|
if (!ele) {
|
2019-01-12 11:33:27 +08:00
|
|
|
return null;
|
2018-01-29 18:57:20 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
const node = cloneVNode(ele, deep);
|
2020-03-31 15:11:55 +08:00
|
|
|
// // 函数式组件不支持clone https://github.com/vueComponent/ant-design-vue/pull/1947
|
|
|
|
// warning(
|
|
|
|
// !(node.fnOptions && node.fnOptions.functional),
|
|
|
|
// `can not use cloneElement for functional component (${node.fnOptions && node.fnOptions.name})`,
|
|
|
|
// );
|
2019-01-12 11:33:27 +08:00
|
|
|
const { props = {}, key, on = {}, children, directives = [] } = nodeProps;
|
|
|
|
const data = node.data || {};
|
|
|
|
let cls = {};
|
|
|
|
let style = {};
|
2018-03-03 19:14:03 +08:00
|
|
|
const {
|
2018-03-02 22:12:52 +08:00
|
|
|
attrs = {},
|
2018-01-09 14:21:15 +08:00
|
|
|
ref,
|
2018-03-02 22:12:52 +08:00
|
|
|
domProps = {},
|
2018-03-03 19:14:03 +08:00
|
|
|
style: tempStyle = {},
|
|
|
|
class: tempCls = {},
|
2018-03-13 10:19:00 +08:00
|
|
|
scopedSlots = {},
|
2019-01-12 11:33:27 +08:00
|
|
|
} = nodeProps;
|
2018-03-03 19:14:03 +08:00
|
|
|
|
|
|
|
if (typeof data.style === 'string') {
|
2019-01-12 11:33:27 +08:00
|
|
|
style = parseStyleText(data.style);
|
2018-03-03 19:14:03 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
style = { ...data.style, ...style };
|
2018-03-03 19:14:03 +08:00
|
|
|
}
|
|
|
|
if (typeof tempStyle === 'string') {
|
2019-01-12 11:33:27 +08:00
|
|
|
style = { ...style, ...parseStyleText(style) };
|
2018-03-03 19:14:03 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
style = { ...style, ...tempStyle };
|
2018-03-03 19:14:03 +08:00
|
|
|
}
|
|
|
|
|
2018-07-29 19:33:41 +08:00
|
|
|
if (typeof data.class === 'string' && data.class.trim() !== '') {
|
2019-01-12 11:33:27 +08:00
|
|
|
data.class.split(' ').forEach(c => {
|
|
|
|
cls[c.trim()] = true;
|
|
|
|
});
|
2019-07-24 19:21:27 +08:00
|
|
|
} else if (Array.isArray(data.class)) {
|
|
|
|
classNames(data.class)
|
|
|
|
.split(' ')
|
|
|
|
.forEach(c => {
|
|
|
|
cls[c.trim()] = true;
|
|
|
|
});
|
2018-03-03 19:14:03 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
cls = { ...data.class, ...cls };
|
2018-03-03 19:14:03 +08:00
|
|
|
}
|
2018-07-29 19:33:41 +08:00
|
|
|
if (typeof tempCls === 'string' && tempCls.trim() !== '') {
|
2019-01-12 11:33:27 +08:00
|
|
|
tempCls.split(' ').forEach(c => {
|
|
|
|
cls[c.trim()] = true;
|
|
|
|
});
|
2018-03-03 19:14:03 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
cls = { ...cls, ...tempCls };
|
2018-03-03 19:14:03 +08:00
|
|
|
}
|
2018-03-02 22:12:52 +08:00
|
|
|
node.data = Object.assign({}, data, {
|
2018-03-03 19:14:03 +08:00
|
|
|
style,
|
2018-03-02 22:12:52 +08:00
|
|
|
attrs: { ...data.attrs, ...attrs },
|
2018-03-03 19:14:03 +08:00
|
|
|
class: cls,
|
2018-03-02 22:12:52 +08:00
|
|
|
domProps: { ...data.domProps, ...domProps },
|
2018-03-13 10:19:00 +08:00
|
|
|
scopedSlots: { ...data.scopedSlots, ...scopedSlots },
|
2018-05-04 12:16:17 +08:00
|
|
|
directives: [...(data.directives || []), ...directives],
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-03-03 19:14:03 +08:00
|
|
|
|
2018-01-17 16:12:53 +08:00
|
|
|
if (node.componentOptions) {
|
2019-01-12 11:33:27 +08:00
|
|
|
node.componentOptions.propsData = node.componentOptions.propsData || {};
|
|
|
|
node.componentOptions.listeners = node.componentOptions.listeners || {};
|
|
|
|
node.componentOptions.propsData = { ...node.componentOptions.propsData, ...props };
|
|
|
|
node.componentOptions.listeners = { ...node.componentOptions.listeners, ...on };
|
2018-02-09 18:42:19 +08:00
|
|
|
if (children) {
|
2019-01-12 11:33:27 +08:00
|
|
|
node.componentOptions.children = children;
|
2018-02-09 18:42:19 +08:00
|
|
|
}
|
2018-01-25 17:40:46 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
node.data.on = { ...(node.data.on || {}), ...on };
|
2018-01-17 16:12:53 +08:00
|
|
|
}
|
|
|
|
|
2017-12-14 12:13:15 +08:00
|
|
|
if (key !== undefined) {
|
2019-01-12 11:33:27 +08:00
|
|
|
node.key = key;
|
|
|
|
node.data.key = key;
|
2017-12-14 12:13:15 +08:00
|
|
|
}
|
2018-01-09 14:21:15 +08:00
|
|
|
if (typeof ref === 'string') {
|
2019-01-12 11:33:27 +08:00
|
|
|
node.data.ref = ref;
|
2018-01-09 14:21:15 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
return node;
|
2017-12-14 12:13:15 +08:00
|
|
|
}
|