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.

Sign up for GitHub

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

Jump to bottom

fix: Hide popup no need re-align #203

Merged
merged 1 commit into from Oct 12, 2020
Merged

fix: Hide popup no need re-align #203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/index.tsx
View file
Open in desktop
Expand Up @@ -583,7 +583,7 @@ export function generateTrigger(
* @param popupVisible Show or not the popup element
* @param event SyntheticEvent, used for `pointAlign`
*/
setPopupVisible(popupVisible, event?) {
setPopupVisible(popupVisible: boolean, event?: { pageX: number, pageY: number }) {
const { alignPoint } = this.props;
const { popupVisible: prevPopupVisible } = this.state;

Expand All @@ -597,7 +597,7 @@ export function generateTrigger(
}

// Always record the point position since mouseEnterDelay will delay the show
if (alignPoint && event) {
if (alignPoint && event && popupVisible) {
this.setPoint(event);
}
}
Expand Down
63 changes: 52 additions & 11 deletions tests/point.test.jsx
View file
Open in desktop
Expand Up @@ -16,11 +16,16 @@ describe('Trigger.Point', () => {
});

class Demo extends React.Component {
popup = <div className="point-popup">POPUP</div>;
popup = (<div className="point-popup">POPUP</div>);

render() {
return (
<Trigger popup={this.popup} popupAlign={{ points: ['tl'] }} alignPoint {...this.props}>
<Trigger
popup={this.popup}
popupAlign={{ points: ['tl'] }}
alignPoint
{...this.props}
>
<div className="point-region" />
</Trigger>
);
Expand All @@ -36,7 +41,9 @@ describe('Trigger.Point', () => {
.first()
.getDOMNode();

expect(popup.style).toEqual(expect.objectContaining({ left: '-989px', top: '-979px' }));
expect(popup.style).toEqual(
expect.objectContaining({ left: '-989px', top: '-979px' }),
);
});

it('hover', () => {
Expand All @@ -48,33 +55,59 @@ describe('Trigger.Point', () => {
.first()
.getDOMNode();

expect(popup.style).toEqual(expect.objectContaining({ left: '-989px', top: '-979px' }));
expect(popup.style).toEqual(
expect.objectContaining({ left: '-989px', top: '-979px' }),
);
});

describe('contextMenu', () => {
it('basic', () => {
const wrapper = mount(<Demo action={['contextMenu']} />);
const wrapper = mount(
<Demo action={['contextMenu']} hideAction={['click']} />,
);
wrapper.trigger('contextMenu', { pageX: 10, pageY: 20 });

const popup = wrapper
.find('.rc-trigger-popup')
.first()
.getDOMNode();

expect(popup.style).toEqual(expect.objectContaining({ left: '-989px', top: '-979px' }));
expect(popup.style).toEqual(
expect.objectContaining({ left: '-989px', top: '-979px' }),
);

// Not trigger point update when close
const clickEvent = {};
const pagePropDefine = {
get: () => {
throw new Error('should not read when close');
},
};
Object.defineProperties(clickEvent, {
pageX: pagePropDefine,
pageY: pagePropDefine,
});
wrapper
.find('Trigger')
.instance()
.onClick(clickEvent);
});

// https://github.com/ant-design/ant-design/issues/17043
it('not prevent default', done => {
const wrapper = mount(<Demo showAction={['contextMenu']} hideAction={['click']} />);
const wrapper = mount(
<Demo showAction={['contextMenu']} hideAction={['click']} />,
);
wrapper.trigger('contextMenu', { pageX: 10, pageY: 20 });

const popup = wrapper
.find('.rc-trigger-popup')
.first()
.getDOMNode();

expect(popup.style).toEqual(expect.objectContaining({ left: '-989px', top: '-979px' }));
expect(popup.style).toEqual(
expect.objectContaining({ left: '-989px', top: '-979px' }),
);

// Click to close
wrapper.trigger('click', {
Expand All @@ -91,7 +124,11 @@ describe('Trigger.Point', () => {
function testPlacement(name, builtinPlacements, afterAll) {
it(name, () => {
const wrapper = mount(
<Demo action={['click']} builtinPlacements={builtinPlacements} popupPlacement="right" />,
<Demo
action={['click']}
builtinPlacements={builtinPlacements}
popupPlacement="right"
/>,
);
wrapper.trigger('click', { pageX: 10, pageY: 20 });

Expand All @@ -100,7 +137,9 @@ describe('Trigger.Point', () => {
.first()
.getDOMNode();

expect(popup.style).toEqual(expect.objectContaining({ left: '-989px', top: '-979px' }));
expect(popup.style).toEqual(
expect.objectContaining({ left: '-989px', top: '-979px' }),
);

if (afterAll) {
afterAll(wrapper);
Expand All @@ -124,7 +163,9 @@ describe('Trigger.Point', () => {
},
wrapper => {
expect(
wrapper.find('div.rc-trigger-popup').hasClass('rc-trigger-popup-placement-left'),
wrapper
.find('div.rc-trigger-popup')
.hasClass('rc-trigger-popup-placement-left'),
).toBeTruthy();
},
);
Expand Down