Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix getContainer no body, overflow: hidden does not delete #137

Merged
merged 5 commits into from Jun 8, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
28 changes: 17 additions & 11 deletions src/DrawerChild.tsx
Expand Up @@ -98,15 +98,18 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
} catch (err) {}
this.passive = passiveSupported ? { passive: false } : false;
}
const { open } = this.props;
const { open, getContainer } = this.props;
const container = getContainer && getContainer();
this.drawerId = `drawer_id_${Number(
(Date.now() + Math.random())
.toString()
.replace('.', Math.round(Math.random() * 9).toString()),
).toString(16)}`;
this.getLevelDom(this.props);
if (open) {
currentDrawer[this.drawerId] = open;
if (container && container.parentNode === document.body) {
currentDrawer[this.drawerId] = open;
}
// 默认打开状态时推出 level;
this.openLevelTransition();
this.forceUpdate(() => {
Expand All @@ -116,12 +119,15 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
}

public componentDidUpdate(prevProps: IDrawerChildProps) {
const { open } = this.props;
const { open, getContainer } = this.props;
const container = getContainer && getContainer();
if (open !== prevProps.open) {
if (open) {
this.domFocus();
}
currentDrawer[this.drawerId] = !!open;
if (container && container.parentNode === document.body) {
currentDrawer[this.drawerId] = !!open;
}
this.openLevelTransition();
}
}
Expand Down Expand Up @@ -238,7 +244,7 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
) => {
const { placement, levelMove, duration, ease, showMask } = this.props;
// router 切换时可能会导至页面失去滚动条,所以需要时时获取。
this.levelDom.forEach((dom) => {
this.levelDom.forEach(dom => {
dom.style.transition = `transform ${duration} ${ease}`;
addEventListener(dom, transitionEnd, this.transitionEnd);
let levelValue = open ? value : 0;
Expand Down Expand Up @@ -436,7 +442,7 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
};

private getCurrentDrawerSome = () =>
!Object.keys(currentDrawer).some((key) => currentDrawer[key]);
!Object.keys(currentDrawer).some(key => currentDrawer[key]);

private getLevelDom = ({ level, getContainer }: IDrawerChildProps) => {
if (windowIsUndefined) {
Expand All @@ -460,8 +466,8 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
}
});
} else if (level) {
dataToArray(level).forEach((key) => {
document.querySelectorAll(key).forEach((item) => {
dataToArray(level).forEach(key => {
document.querySelectorAll(key).forEach(item => {
this.levelDom.push(item);
});
});
Expand Down Expand Up @@ -556,7 +562,7 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
className={`${prefixCls}-mask`}
onClick={maskClosable ? onClose : undefined}
style={maskStyle}
ref={(c) => {
ref={c => {
this.maskDom = c as HTMLElement;
}}
/>
Expand All @@ -569,13 +575,13 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
width: isNumeric(width) ? `${width}px` : width,
height: isNumeric(height) ? `${height}px` : height,
}}
ref={(c) => {
ref={c => {
this.contentWrapper = c as HTMLElement;
}}
>
<div
className={`${prefixCls}-content`}
ref={(c) => {
ref={c => {
this.contentDom = c as HTMLElement;
}}
onTouchStart={
Expand Down
45 changes: 33 additions & 12 deletions tests/index.spec.tsx
@@ -1,13 +1,15 @@
import { mount } from 'enzyme';
import * as React from 'react';
import toJson from 'enzyme-to-json';
import Drawer from '../src/';
import Drawer from '../src';

function Div(props) {
const { show, ...otherProps } = props
const { show, ...otherProps } = props;
return (
<div className="div-wrapper">
{show && <Drawer wrapperClassName="drawer-wrapper" defaultOpen {...otherProps} />}
{show && (
<Drawer wrapperClassName="drawer-wrapper" defaultOpen {...otherProps} />
)}
</div>
);
}
Expand All @@ -18,7 +20,11 @@ function DrawerComp(props: { open?: boolean }) {
<div id="a" style={{ position: 'absolute', top: 0, left: 0 }}>
test1
</div>
<Drawer getContainer={null} open={props.open} wrapperClassName="drawer-wrapper" />
<Drawer
getContainer={null}
open={props.open}
wrapperClassName="drawer-wrapper"
/>
</div>
);
}
Expand All @@ -32,7 +38,10 @@ function createStartTouchEventObject({ x = 0, y = 0 }) {
}

function createMoveTouchEventObject({ x = 0, y = 0 }) {
return { touches: [createClientXY(x, y)], changedTouches: [createClientXY(x, y)] };
return {
touches: [createClientXY(x, y)],
changedTouches: [createClientXY(x, y)],
};
}

describe('rc-drawer-menu', () => {
Expand Down Expand Up @@ -64,11 +73,19 @@ describe('rc-drawer-menu', () => {
});

it('default open drawer', () => {
instance = mount(<Drawer handler={<i className="a">a</i>} defaultOpen={true} level={[]} />);
instance = mount(
<Drawer handler={<i className="a">a</i>} defaultOpen level={[]} />,
);
const drawer = instance.find('.drawer-content-wrapper').instance() as any;
const content = instance.find('.drawer-content');
content.simulate('touchStart', createStartTouchEventObject({ x: 100, y: 0 }));
content.simulate('touchMove', createMoveTouchEventObject({ x: 150, y: 10 }));
content.simulate(
'touchStart',
createStartTouchEventObject({ x: 100, y: 0 }),
);
content.simulate(
'touchMove',
createMoveTouchEventObject({ x: 150, y: 10 }),
);
content.simulate('touchEnd', createMoveTouchEventObject({ x: 200, y: 0 }));
content.simulate('touchStart', createStartTouchEventObject({ x: 0, y: 0 }));
content.simulate('touchMove', createMoveTouchEventObject({ x: 0, y: 10 }));
Expand All @@ -78,7 +95,7 @@ describe('rc-drawer-menu', () => {
});

it('handler is null,open=true', () => {
instance = mount(<Drawer handler={null} open={true} level={null} />);
instance = mount(<Drawer handler={null} open level={null} />);
expect(toJson(instance.render())).toMatchSnapshot();
});
it('handler is null,open=false', () => {
Expand Down Expand Up @@ -111,12 +128,16 @@ describe('rc-drawer-menu', () => {
it('getContainer is null', () => {
instance = mount(
<div className="react-wrapper">
<div id="a" className="a" style={{ position: 'absolute', top: 0, left: 0 }}>
<div
id="a"
className="a"
style={{ position: 'absolute', top: 0, left: 0 }}
>
test1
</div>
<Drawer
getContainer={null}
defaultOpen={true}
defaultOpen
level="#a"
wrapperClassName="drawer-wrapper"
/>
Expand Down Expand Up @@ -146,7 +167,7 @@ describe('rc-drawer-menu', () => {
expect(content.style.transform).toBe('translateX(-100%)');
});
it('will unmount', () => {
instance = mount(<Div show={true} />);
instance = mount(<Div show />);
const divWrapper = instance.find('.div-wrapper').instance() as any;
const content = instance.find('.drawer-content-wrapper').instance() as any;
console.log(content.style.transform);
Expand Down