separate item component

components/transfer/item.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import classNames from 'classnames';
+import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
+import assign from 'object-assign';
+import Lazyload from 'react-lazy-load';
+import Checkbox from '../checkbox';
+
+function isRenderResultPlainObject(result) {
+  return result && !React.isValidElement(result) &&
+    Object.prototype.toString.call(result) === '[object Object]';
+}
+
+export default class Item extends React.Component<any, any> {
+  shouldComponentUpdate(...args) {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
+  }
+  matchFilter = (text) => {
+    const { filter, filterOption, item } = this.props;
+    if (filterOption) {
+      return filterOption(filter, item);
+    }
+    return text.indexOf(filter) >= 0;
+  }
+  render() {
+    const { render, filter, item, lazy, checked, prefixCls, onClick } = this.props;
+    const renderResult = render(item);
+    let renderedText;
+    let renderedEl;
+    if (isRenderResultPlainObject(renderResult)) {
+      renderedText = renderResult.value;
+      renderedEl = renderResult.label;
+    } else {
+      renderedText = renderResult;
+      renderedEl = renderResult;
+    }
+
+    if (filter && filter.trim() && !this.matchFilter(renderedText)) {
+      return null;
+    }
+
+    const className = classNames({
+      [`${prefixCls}-content-item`]: true,
+      [`${prefixCls}-content-item-disabled`]: item.disabled,
+    });
+
+    const lazyProps = assign({
+      height: 32,
+      offset: 500,
+      throttle: 0,
+      debounce: false,
+    }, lazy);
+
+    return (
+      <Lazyload {...lazyProps}>
+        <li
+          className={className}
+          title={renderedText}
+          onClick={item.disabled ? undefined : () => onClick(item)}
+        >
+          <Checkbox checked={checked} disabled={item.disabled} />
+          <span>{renderedEl}</span>
+        </li>
+      </Lazyload>
+    );
+  }
+}

components/transfer/list.tsx

@@ -1,21 +1,15 @@
 import React from 'react';
-import Checkbox from '../checkbox';
 import Search from './search';
 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';
+import Item from './item';
 
 function noop() {
 }
 
-export function isRenderResultPlainObject(result) {
-  return result && !React.isValidElement(result) &&
-    Object.prototype.toString.call(result) === '[object Object]';
-}
-
 export interface TransferListProps {
   prefixCls: string;
   dataSource: TransferItem[];
@@ -128,16 +122,8 @@ export default class TransferList extends React.Component<TransferListProps, any
     );
   }
 
-  matchFilter(filterText, item, text) {
-    const filterOption = this.props.filterOption;
-    if (filterOption) {
-      return filterOption(filterText, item);
-    }
-    return text.indexOf(filterText) >= 0;
-  }
-
   render() {
-    const { prefixCls, dataSource, titleText, filter, checkedKeys, lazy,
+    const { prefixCls, dataSource, titleText, filter, checkedKeys, lazy, filterOption,
             body = noop, footer = noop, showSearch, render = noop, style } = this.props;
 
     let { searchPlaceholder, notFoundContent } = this.props;
@@ -154,49 +140,22 @@ export default class TransferList extends React.Component<TransferListProps, any
     const filteredDataSource: TransferItem[] = [];
 
     const showItems = dataSource.map((item) => {
-      const renderResult = render(item);
-
-      if (isRenderResultPlainObject(renderResult)) {
-        return {
-          item: item,
-          renderedText: renderResult.value,
-          renderedEl: renderResult.label,
-        };
-      }
-      return {
-        item: item,
-        renderedText: renderResult,
-        renderedEl: renderResult,
-      };
-    }).filter(({ item, renderedText }) => {
-      return !(filter && filter.trim() && !this.matchFilter(filter, item, renderedText));
-    }).map(({ item, renderedText, renderedEl }) => {
       if (!item.disabled) {
         filteredDataSource.push(item);
       }
-
+      const checked = checkedKeys.indexOf(item.key) >= 0;
-      const className = classNames({
-        [`${prefixCls}-content-item`]: true,
-        [`${prefixCls}-content-item-disabled`]: item.disabled,
-      });
-      const lazyProps = assign({
-        height: 32,
-        offset: 500,
-        throttle: 0,
-        debounce: false,
-      }, lazy);
       return (
-        <Lazyload key={item.key} {...lazyProps}>
+        <Item
-          <li
+          key={item.key}
-            key={item.key}
+          item={item}
-            className={className}
+          lazy={lazy}
-            title={renderedText}
+          render={render}
-            onClick={item.disabled ? undefined : () => this.handleSelect(item)}
+          filter={filter}
-          >
+          filterOption={filterOption}
-            <Checkbox checked={checkedKeys.some(key => key === item.key)} disabled={item.disabled} />
+          checked={checked}
-            <span>{renderedEl}</span>
+          prefixCls={prefixCls}
-          </li>
+          onClick={this.handleSelect}
-        </Lazyload>
+        />
       );
     });