{
this.dom = c;
}}
{...domContProps}
tabIndex={-1}
>
{showMask && (
{
this.maskDom = c;
}}
// {...{ directives: directivesMaskDom }}
/>
)}
{
this.contentWrapper = c;
}}
// {...{ directives: directivesContentWrapper }}
>
{
this.contentDom = c;
}}
// {...{ directives: directivesContentDom }}
onTouchstart={open ? this.removeStartHandler : noop} // 跑用例用
onTouchmove={open ? this.removeMoveHandler : noop} // 跑用例用
>
{children}
{handlerChildren}
);
},
getOpen() {
return this.open !== undefined ? this.open : this.sOpen;
},
getTouchParentScroll(root, currentTarget, differX, differY) {
if (!currentTarget || currentTarget === document) {
return false;
}
// root 为 drawer-content 设定了 overflow, 判断为 root 的 parent 时结束滚动；
if (currentTarget === root.parentNode) {
return true;
}
const isY = Math.max(Math.abs(differX), Math.abs(differY)) === Math.abs(differY);
const isX = Math.max(Math.abs(differX), Math.abs(differY)) === Math.abs(differX);
const scrollY = currentTarget.scrollHeight - currentTarget.clientHeight;
const scrollX = currentTarget.scrollWidth - currentTarget.clientWidth;
/**
*
* 在没设定 overflow: auto 或 scroll 时，currentTarget 里获取不到 scrollTop 或 scrollLeft,
* 预先用 scrollTo 来滚动，如果取出的值跟滚动前取出不同，则 currnetTarget 被设定了 overflow; 否则就是上面这种。
*/
const t = currentTarget.scrollTop;
const l = currentTarget.scrollLeft;
if (currentTarget.scrollTo) {
currentTarget.scrollTo(currentTarget.scrollLeft + 1, currentTarget.scrollTop + 1);
}
const currentT = currentTarget.scrollTop;
const currentL = currentTarget.scrollLeft;
if (currentTarget.scrollTo) {
currentTarget.scrollTo(currentTarget.scrollLeft - 1, currentTarget.scrollTop - 1);
}
if (
(isY &&
(!scrollY ||
!(currentT - t) ||
(scrollY &&
((currentTarget.scrollTop >= scrollY && differY < 0) ||
(currentTarget.scrollTop <= 0 && differY > 0))))) ||
(isX &&
(!scrollX ||
!(currentL - l) ||
(scrollX &&
((currentTarget.scrollLeft >= scrollX && differX < 0) ||
(currentTarget.scrollLeft <= 0 && differX > 0)))))
) {
return this.getTouchParentScroll(root, currentTarget.parentNode, differX, differY);
}
return false;
},
removeStartHandler(e) {
if (e.touches.length > 1) {
return;
}
this.startPos = {
x: e.touches[0].clientX,
y: e.touches[0].clientY,
};
},
removeMoveHandler(e) {
if (e.changedTouches.length > 1) {
return;
}
const currentTarget = e.currentTarget;
const differX = e.changedTouches[0].clientX - this.startPos.x;
const differY = e.changedTouches[0].clientY - this.startPos.y;
if (
currentTarget === this.maskDom ||
currentTarget === this.handlerdom ||
(currentTarget === this.contentDom &&
this.getTouchParentScroll(currentTarget, e.target, differX, differY))
) {
e.preventDefault();
}
},
trnasitionEnd(e) {
removeEventListener(e.target, transitionEnd, this.trnasitionEnd);
e.target.style.transition = '';
},
defaultGetContainer() {
if (windowIsUndefined) {
return null;
}
const container = document.createElement('div');
this.parent.appendChild(container);
if (this.wrapperClassName) {
container.className = this.wrapperClassName;
}
return container;
},
},
render() {
const { getContainer, wrapperClassName, handler, forceRender } = this.$props;
const open = this.getOpen();
let portal = null;
currentDrawer[this.drawerId] = open ? this.container : open;
const children = this.getChildToRender(this.sFirstEnter ? open : false);
if (!getContainer) {
// const directives = [
// {
// name: 'ant-ref',
// value: c => {
// this.container = c;
// },
// },
// ];
return (
{
this.container = c;
}}
>
{children}
);
}
if (!this.container || (!open && !this.sFirstEnter)) {
return null;
}
// 如果有 handler 为内置强制渲染；
const $forceRender = !!handler || forceRender;
if ($forceRender || open || this.dom) {
portal =
{children};
}
return portal;
},
};
export default Drawer;