From 7373ce07582b5f853fbd392076fa2fbd34e7aa16 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 3 Nov 2016 16:05:59 +0800 Subject: [PATCH] Add react-lazy-load for Transfer perfermance, close #2860 --- components/transfer/demo/large-data.md | 64 ++++++++++++++++++++++++++ components/transfer/index.en-US.md | 5 +- components/transfer/index.tsx | 15 ++++-- components/transfer/index.zh-CN.md | 3 +- components/transfer/list.tsx | 28 +++++++---- components/transfer/style/index.less | 1 + package.json | 1 + typings/custom-typings.d.ts | 2 + 8 files changed, 100 insertions(+), 19 deletions(-) create mode 100644 components/transfer/demo/large-data.md diff --git a/components/transfer/demo/large-data.md b/components/transfer/demo/large-data.md new file mode 100644 index 0000000000..090eba2266 --- /dev/null +++ b/components/transfer/demo/large-data.md @@ -0,0 +1,64 @@ +--- +order: 4 +debug: true +title: + zh-CN: 大数据性能测试 + en-US: Performance Test +--- + +## zh-CN + +2000 条数据。 + +## en-US + +2000 items. + +````jsx +import { Transfer } from 'antd'; + +const App = React.createClass({ + getInitialState() { + return { + mockData: [], + targetKeys: [], + }; + }, + componentDidMount() { + this.getMock(); + }, + getMock() { + const targetKeys = []; + const mockData = []; + for (let i = 0; i < 2000; i++) { + const data = { + key: i.toString(), + title: `content${i + 1}`, + description: `description of content${i + 1}`, + chosen: Math.random() * 2 > 1, + }; + if (data.chosen) { + targetKeys.push(data.key); + } + mockData.push(data); + } + this.setState({ mockData, targetKeys }); + }, + handleChange(targetKeys, direction, moveKeys) { + console.log(targetKeys, direction, moveKeys); + this.setState({ targetKeys }); + }, + render() { + return ( + item.title} + /> + ); + }, +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md index 325f2294f8..f42d6f9b87 100644 --- a/components/transfer/index.en-US.md +++ b/components/transfer/index.en-US.md @@ -15,7 +15,6 @@ To transfer the elements between two columns in an intuitive and efficient way. ## API - | Property | Description | Type | Default | |-----------|------------------------------------------|------------|--------| | dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | Array | [] | @@ -31,11 +30,11 @@ To transfer the elements between two columns in an intuitive and efficient way. | searchPlaceholder | The hint text of the search box. | String | 'Search here' | | notFoundContent | Text to display when a column is empty. | React.node | 'The list is empty' | | footer | A function used for rendering the footer. | Function(props) | | - +| lazy | property of [react-lazy-load](https://github.com/loktar00/react-lazy-load) for lazy rendering items | Object | `{ height: 32, offset: 32 }` | ## Warning -According the [standard](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children) of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier. +According the [standard](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children) of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier. If there's no `key` in your data, you should use `rowKey` to specify the key that will be used for uniquely identify each element. ```jsx diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 8d238d9416..051f974822 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -35,6 +35,7 @@ export interface TransferProps { filterOption: (inputValue: any, item: any) => boolean; body?: (props: any) => any; rowKey?: (record: any) => string; + lazy?: {}; } export interface TransferContext { @@ -73,6 +74,7 @@ export default class Transfer extends React.Component { body: PropTypes.func, footer: PropTypes.func, rowKey: PropTypes.func, + lazy: PropTypes.object, }; static contextTypes = { @@ -255,7 +257,7 @@ export default class Transfer extends React.Component { const { prefixCls = 'ant-transfer', operations = [], showSearch, notFoundContent, searchPlaceholder, body, footer, listStyle, className = '', - filterOption, render, + filterOption, render, lazy, } = this.props; const { leftFilter, rightFilter, leftCheckedKeys, rightCheckedKeys } = this.state; @@ -271,7 +273,8 @@ export default class Transfer extends React.Component { const titles = this.getTitles(); return (
- { body={body} footer={footer} prefixCls={`${prefixCls}-list`} + lazy={lazy} /> - { moveToLeft={this.moveToLeft} className={`${prefixCls}-operation`} /> - { body={body} footer={footer} prefixCls={`${prefixCls}-list`} + lazy={lazy} />
); diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index 026906dd9e..3880736a9b 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -16,7 +16,6 @@ title: Transfer ## API - | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------|------------|--------| | dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | Array | [] | @@ -33,7 +32,7 @@ title: Transfer | searchPlaceholder | 搜索框的默认值 | String | '请输入搜索内容' | | notFoundContent | 当列表为空时显示的内容 | React.node | '列表为空' | | footer | 底部渲染函数 | Function(props) | | - +| lazy | Transfer 使用了 [react-lazy-load](https://github.com/loktar00/react-lazy-load) 优化性能，这里可以设置相关参数 | Object | `{ height: 32, offset: 32 }` | ## 注意 diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index e9e1924543..39e97921c5 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -5,6 +5,7 @@ import classNames from 'classnames'; import Animate from 'rc-animate'; import PureRenderMixin from 'rc-util/lib/PureRenderMixin'; import assign from 'object-assign'; +import Lazyload from 'react-lazy-load'; import { TransferItem } from './index'; function noop() { @@ -35,6 +36,7 @@ export interface TransferListProps { position?: string; notFoundContent?: React.ReactNode | string; filterOption: (filterText: any, item: any) => boolean; + lazy?: {}; } export interface TransferListContext { @@ -135,7 +137,7 @@ export default class TransferList extends React.Component this.handleSelect(item)} - > - key === item.key)} disabled={item.disabled} /> - {renderedEl} - + +
  • this.handleSelect(item)} + > + key === item.key)} disabled={item.disabled} /> + {renderedEl} +
    • +     ); }); diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index f56cf56937..c1d20d8cf4 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -98,6 +98,7 @@ white-space: nowrap; text-overflow: ellipsis; padding: 7px 15px; + min-height: 32px; transition: all 0.3s ease; } diff --git a/package.json b/package.json index 1c4dc7a82f..fb5d72d107 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "rc-tree-select": "~1.8.0", "rc-upload": "~2.2.0", "rc-util": "^4.0.1", + "react-lazy-load": "^3.0.10", "react-slick": "~0.14.2", "shallowequal": "^0.2.2", "warning": "~3.0.0" diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts index e0b46ce082..0a1a968908 100644 --- a/typings/custom-typings.d.ts +++ b/typings/custom-typings.d.ts @@ -76,6 +76,8 @@ declare module 'rc-collapse'; declare module 'rc-form*'; +declare module 'react-lazy-load'; + declare var process: { env: { NODE_ENV: string