mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Fix wired Transfer repaint problem in IE or Edge

Browse Source 
close #9697

https://stackoverflow.com/q/27947912/3040605
This commit is contained in:
afc163 2018-06-30 22:22:09 +08:00
parent a3e245731b
commit a516358298
1 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/transfer/list.tsx
View File

@ -9,6 +9,10 @@ import Search from './search';
import Item from './item';
import triggerEvent from '../_util/triggerEvent';
function isIEorEDGE() {
return (document as any).documentMode || /Edge/.test(navigator.userAgent);
}
function noop() {
}
@ -52,6 +56,8 @@ export default class TransferList extends React.Component<TransferListProps, any
timer: number;
triggerScrollTimer: number;
fixIERepaintTimer: number;
notFoundNode: HTMLDivElement;
constructor(props: TransferListProps) {
super(props);
@ -71,6 +77,7 @@ export default class TransferList extends React.Component<TransferListProps, any
componentWillUnmount() {
clearTimeout(this.timer);
clearTimeout(this.triggerScrollTimer);
clearTimeout(this.fixIERepaintTimer);
}
shouldComponentUpdate(...args: any[]) {
@ -107,10 +114,12 @@ export default class TransferList extends React.Component<TransferListProps, any
triggerEvent(listNode, 'scroll');
}
}, 0);
this.fixIERepaint();
}
handleClear = () => {
this.props.handleClear();
this.fixIERepaint();
}
matchFilter = (text: string, item: TransferItem) => {
@ -131,6 +140,24 @@ export default class TransferList extends React.Component<TransferListProps, any
};
}
saveNotFoundRef = (node: HTMLDivElement) => {
this.notFoundNode = node;
}
// Fix IE/Edge repaint
// https://github.com/ant-design/ant-design/issues/9697
// https://stackoverflow.com/q/27947912/3040605
fixIERepaint() {
if (!isIEorEDGE()) {
return;
}
this.fixIERepaintTimer = window.setTimeout(() => {
if (this.notFoundNode) {
this.notFoundNode.className = this.notFoundNode.className;
}
}, 0);
}
render() {
const {
prefixCls, dataSource, titleText, checkedKeys, lazy,
@ -203,7 +230,7 @@ export default class TransferList extends React.Component<TransferListProps, any
>
{showItems}
</Animate>
<div className={`${prefixCls}-body-not-found`}>
<div className={`${prefixCls}-body-not-found`} ref={this.saveNotFoundRef}>
{notFoundContent}
</div>
</div>