mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

Improve transfer perfermance, close #2112

Browse Source
This commit is contained in:
afc163 2016-06-21 17:41:39 +08:00
parent 48e8c513f5
commit 3c408e0d22
2 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/transfer/index.jsx
View File

@ -55,13 +55,28 @@ export default class Transfer extends React.Component {
}
componentWillReceiveProps(nextProps) {
const { leftCheckedKeys, rightCheckedKeys } = this.state;
const { leftDataSource, rightDataSource } = this.splitDataSource(nextProps);
this.setState({
leftCheckedKeys: leftCheckedKeys.filter(data => leftDataSource.filter(leftData => leftData.key === data).length),
rightCheckedKeys: rightCheckedKeys.filter(data => rightDataSource.filter(rightData => rightData.key === data).length),
});
if (nextProps.targetKeys !== this.props.targetKeys ||
nextProps.dataSource !== this.props.dataSource) {
// clear cached splited dataSource
this.splitedDataSource = null;
const { dataSource, targetKeys } = nextProps;
// clear key nolonger existed
// clear checkedKeys according to targetKeys
this.setState({
leftCheckedKeys: leftCheckedKeys
.filter(data => dataSource.filter(item => item.key === data).length)
.filter(data => targetKeys.filter(key => key === data).length === 0),
rightCheckedKeys: rightCheckedKeys
.filter(data => dataSource.filter(item => item.key === data).length)
.filter(data => targetKeys.filter(key => key === data).length > 0),
});
}
}
splitDataSource(props) {
if (this.splitedDataSource) {
return this.splitedDataSource;
}
const { targetKeys } = props;
let { dataSource } = props;
@ -86,10 +101,12 @@ export default class Transfer extends React.Component {
});
}
return {
this.splitedDataSource = {
leftDataSource,
rightDataSource,
};
return this.splitedDataSource;
}
moveTo = (direction) => {
@ -194,7 +211,7 @@ export default class Transfer extends React.Component {
handleSelect = (direction, selectedItem, checked) => {
const { leftCheckedKeys, rightCheckedKeys } = this.state;
const holder = direction === 'left' ? leftCheckedKeys : rightCheckedKeys;
const holder = direction === 'left' ? [...leftCheckedKeys] : [...rightCheckedKeys];
let index;
holder.forEach((key, i) => {
if (key === selectedItem.key) {

6
components/transfer/list.jsx
View File

@ -3,6 +3,7 @@ import Checkbox from '../checkbox';
import Search from './search';
import classNames from 'classnames';
import Animate from 'rc-animate';
import PureRenderMixin from 'react-addons-pure-render-mixin';
function noop() {
}
@ -60,6 +61,10 @@ export default class TransferList extends React.Component {
}, 0);
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
handleSelectAll = () => {
this.props.handleSelectAll();
}
@ -128,7 +133,6 @@ export default class TransferList extends React.Component {
} else {
itemText = renderResult;
}
const filterResult = this.matchFilter(itemText, filter);
return !!filterResult;
}).map((item) => {