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

[WIP] Fix pop node height 100% #44

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions assets/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,12 @@

.@{triggerPrefixCls} {
position: absolute;
left: -9999px;
top: -9999px;
z-index: 1050;

&-hidden {
display: none;
}

.effect() {
animation-duration: 0.3s;
animation-fill-mode: both;
Expand Down Expand Up @@ -64,4 +62,4 @@
}
}

@import "./index/Mask";
@import "./index/Mask";
2 changes: 2 additions & 0 deletions src/Popup.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@ const Popup = React.createClass({
this.currentAlignClassName = null;
}
const newStyle = {
top: 0,
left: 0,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

默认给 popupDOMNode 加上 top 和 left,避免影响页面原有的布局。

...style,
...this.getZIndexStyle(),
};
Expand Down
6 changes: 0 additions & 6 deletions src/Trigger.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,6 @@ const Trigger = React.createClass({
getContainer(instance) {
const { props } = instance;
const popupContainer = document.createElement('div');
// Make sure default popup container will never cause scrollbar appearing
// https://github.com/react-component/trigger/issues/41
popupContainer.style.position = 'absolute';
popupContainer.style.top = '0';
popupContainer.style.left = '0';
popupContainer.style.width = '100%';
const mountNode = props.getPopupContainer ?
props.getPopupContainer(findDOMNode(instance)) : props.getDocument().body;
mountNode.appendChild(popupContainer);
Expand Down
64 changes: 64 additions & 0 deletions tests/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -624,6 +624,53 @@ describe('rc-trigger', function main() {
}

describe('github issues', () => {
// https://github.com/react-component/trigger/issues/42
// just working on `npm run chrome-test` when scrollbar is on
it('popup node position should not be affected by scrollbar', () => {
document.documentElement.style.width = '100%';
document.documentElement.style.height = '100%';
document.body.style.width = '100%';
document.body.style.height = '100%';
document.body.style.margin = '0px';
document.body.style.padding = '0px';
div.style.position = '';
div.style.height = '100%';
div.style.margin = '0px';
div.style.padding = '0px';

const trigger = ReactDOM.render(
<Trigger
action={['click']}
popupAlign={placementAlignMap.top}
popup={<span>1</span>}
mouseEnterDelay={0}
mouseLeaveDelay={0}
>
<div style={{ position: 'absolute', right: 150, display: 'inline-block', top: 150 }}>
trigger
</div>
</Trigger>
, div);
const domNode = ReactDOM.findDOMNode(trigger);
Simulate.click(domNode);
const firstLeft = trigger.getPopupDomNode().style.left;
Simulate.click(domNode);
Simulate.click(domNode);
const secondLeft = trigger.getPopupDomNode().style.left;
expect(firstLeft).to.equal(secondLeft);

document.documentElement.style.width = '';
document.documentElement.style.height = '';
document.body.style.width = '';
document.body.style.height = '';
document.body.style.margin = '0';
document.body.style.padding = '0';
div.style.position = 'relative';
div.style.height = '100%';
div.style.margin = '0';
div.style.padding = '0';
});

Copy link
Member Author

@afc163 afc163 Feb 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个用例在 npm run chrome-test 下可以重现 #41 的问题。需要把 OSX 的滚动条调成『始终』。

npm test 里貌似不会出现滚动条。

// https://github.com/ant-design/ant-design/issues/5047
// https://github.com/react-component/trigger/pull/43
it('render text without break lines', () => {
Expand Down Expand Up @@ -654,5 +701,22 @@ describe('rc-trigger', function main() {
// height should be same, should not have break lines inside words
expect(popupNodeHeightOfOneWord).to.equal(popupNodeHeightOfSeveralWords);
});

// https://github.com/ant-design/ant-design/issues/5092
it('popup node height should be 100% as body', () => {
const trigger = ReactDOM.render(
<Trigger
popupVisible
popupAlign={placementAlignMap.top}
popup={<span>i am a pop up</span>}
popupStyle={{ height: '100%' }}
>
<div>trigger</div>
</Trigger>
, div);

// height should be same, should not have break lines inside words
expect(trigger.getPopupDomNode().offsetHeight).to.above(0);
});
});
});