refactor: (Transfer) CC => FC (#39958)

* refactor: (Transfer) CC => FC

* add

* fix

* add

* add

* fix

* fix

* add displayName

* add useEffect

* fix

* add useMergedState

* add

* fix

* fix

* fix snap

* rerun

* rerun ci

* rename

components/transfer/ListBody.tsx

@@ -142,7 +142,6 @@ class ListBody<RecordType extends KeyWiseTransferItem> extends React.Component<
           {this.getItems().map(({ renderedEl, renderedText, item }: RenderedItem<RecordType>) => {
             const { disabled } = item;
             const checked = selectedKeys.includes(item.key);
-
             return (
               <ListItem
                 disabled={globalDisabled || disabled}
@@ -159,7 +158,6 @@ class ListBody<RecordType extends KeyWiseTransferItem> extends React.Component<
             );
           })}
         </ul>
-
         {paginationNode}
       </>
     );

components/transfer/index.tsx

@@ -1,8 +1,10 @@
 import classNames from 'classnames';
-import * as React from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import type { ChangeEvent, CSSProperties } from 'react';
 import type { ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
-import { ConfigConsumer } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import type { FormItemStatusContextProps } from '../form/context';
 import { FormItemInputContext } from '../form/context';
 import LocaleReceiver from '../locale/LocaleReceiver';
 import defaultLocale from '../locale/en_US';
@@ -79,8 +81,8 @@ export interface TransferProps<RecordType> {
   onChange?: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void;
   onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
   style?: React.CSSProperties;
-  listStyle?: ((style: ListStyle) => React.CSSProperties) | React.CSSProperties;
+  listStyle?: ((style: ListStyle) => CSSProperties) | CSSProperties;
-  operationStyle?: React.CSSProperties;
+  operationStyle?: CSSProperties;
   titles?: React.ReactNode[];
   operations?: string[];
   showSearch?: boolean;
@@ -88,9 +90,7 @@ export interface TransferProps<RecordType> {
   locale?: Partial<TransferLocale>;
   footer?: (
     props: TransferListProps<RecordType>,
-    info?: {
+    info?: { direction: TransferDirection },
-      direction: TransferDirection;
-    },
   ) => React.ReactNode;
   rowKey?: (record: RecordType) => string;
   onSearch?: (direction: TransferDirection, value: string) => void;
@@ -103,11 +103,6 @@ export interface TransferProps<RecordType> {
   status?: InputStatus;
 }
 
-interface TransferState {
-  sourceSelectedKeys: string[];
-  targetSelectedKeys: string[];
-}
-
 interface TransferFCProps {
   prefixCls: string;
   className: string;
@@ -116,96 +111,113 @@ interface TransferFCProps {
 }
 
 const TransferFC: React.FC<TransferFCProps> = (props) => {
-  const { prefixCls } = props;
+  const { prefixCls, className, style, children } = props;
-
   const [wrapSSR, hashId] = useStyle(prefixCls);
-
   return wrapSSR(
-    <div className={classNames(props.className, hashId)} style={props.style}>
+    <div className={classNames(className, hashId)} style={style}>
-      {props.children}
+      {children}
     </div>,
   );
 };
 
-class Transfer<RecordType extends TransferItem = TransferItem> extends React.Component<
+const Transfer = <RecordType extends TransferItem = TransferItem>(
-  TransferProps<RecordType>,
+  props: TransferProps<RecordType>,
-  TransferState
+) => {
-> {
+  const {
-  // For high-level customized Transfer @dqaria
+    dataSource = [],
-  static List = List;
+    targetKeys = [],
-
+    selectedKeys = [],
-  static Operation = Operation;
+    selectAllLabels = [],
-
+    operations = [],
-  static Search = Search;
+    style = {},
-
+    listStyle = {},
-  static getDerivedStateFromProps<T>({
+    locale = {},
-    selectedKeys,
+    titles,
-    targetKeys,
+    className,
+    disabled,
+    showSearch = false,
+    operationStyle,
+    showSelectAll,
+    oneWay,
     pagination,
+    status: customStatus,
+    prefixCls: customizePrefixCls,
+    filterOption,
+    render,
+    footer,
     children,
-  }: TransferProps<T>) {
+    rowKey,
-    if (selectedKeys) {
+    onScroll,
-      const mergedTargetKeys = targetKeys || [];
+    onChange,
-      return {
+    onSearch,
-        sourceSelectedKeys: selectedKeys.filter((key) => !mergedTargetKeys.includes(key)),
+    onSelectChange,
-        targetSelectedKeys: selectedKeys.filter((key) => mergedTargetKeys.includes(key)),
+  } = props;
-      };
-    }
 
+  const [sourceSelectedKeys, setSourceSelectedKeys] = useState<string[]>(
+    selectedKeys.filter((key) => !targetKeys.includes(key)),
+  );
+
+  const [targetSelectedKeys, setTargetSelectedKeys] = useState<string[]>(
+    selectedKeys.filter((key) => targetKeys.includes(key)),
+  );
+
+  useEffect(() => {
+    if (props.selectedKeys) {
+      setSourceSelectedKeys(() => selectedKeys.filter((key) => !targetKeys.includes(key)));
+      setTargetSelectedKeys(() => selectedKeys.filter((key) => targetKeys.includes(key)));
+    }
+  }, [props.selectedKeys, props.targetKeys]);
+
+  if (process.env.NODE_ENV !== 'production') {
     warning(
       !pagination || !children,
       'Transfer',
       '`pagination` not support customize render list.',
     );
-
-    return null;
   }
 
-  separatedDataSource: {
+  const setStateKeys = useCallback(
-    leftDataSource: RecordType[];
+    (direction: TransferDirection, keys: string[] | ((prevKeys: string[]) => string[])) => {
-    rightDataSource: RecordType[];
+      if (direction === 'left') {
-  } | null = null;
+        setSourceSelectedKeys((prev) => (typeof keys === 'function' ? keys(prev || []) : keys));
+      } else {
+        setTargetSelectedKeys((prev) => (typeof keys === 'function' ? keys(prev || []) : keys));
+      }
+    },
+    [sourceSelectedKeys, targetSelectedKeys],
+  );
 
-  constructor(props: TransferProps<RecordType>) {
+  const handleSelectChange = useCallback(
-    super(props);
+    (direction: TransferDirection, holder: string[]) => {
+      if (direction === 'left') {
+        onSelectChange?.(holder, targetSelectedKeys);
+      } else {
+        onSelectChange?.(sourceSelectedKeys, holder);
+      }
+    },
+    [sourceSelectedKeys, targetSelectedKeys],
+  );
 
-    const { selectedKeys = [], targetKeys = [] } = props;
+  const getTitles = (transferLocale: TransferLocale): React.ReactNode[] =>
-    this.state = {
+    titles ?? transferLocale.titles ?? [];
-      sourceSelectedKeys: selectedKeys.filter((key) => !targetKeys.includes(key)),
-      targetSelectedKeys: selectedKeys.filter((key) => targetKeys.includes(key)),
-    };
-  }
 
-  setStateKeys = (
+  const getLocale = (transferLocale: TransferLocale, renderEmpty: RenderEmptyHandler) => ({
-    direction: TransferDirection,
+    ...transferLocale,
-    keys: string[] | ((prevKeys: string[]) => string[]),
+    notFoundContent: renderEmpty('Transfer'),
-  ) => {
+    ...locale,
-    if (direction === 'left') {
+  });
-      this.setState(({ sourceSelectedKeys }) => ({
+
-        sourceSelectedKeys: typeof keys === 'function' ? keys(sourceSelectedKeys || []) : keys,
+  const handleLeftScroll = (e: React.SyntheticEvent<HTMLUListElement>) => {
-      }));
+    onScroll?.('left', e);
-    } else {
-      this.setState(({ targetSelectedKeys }) => ({
-        targetSelectedKeys: typeof keys === 'function' ? keys(targetSelectedKeys || []) : keys,
-      }));
-    }
   };
 
-  getTitles(transferLocale: TransferLocale): React.ReactNode[] {
+  const handleRightScroll = (e: React.SyntheticEvent<HTMLUListElement>) => {
-    return this.props.titles ?? transferLocale.titles ?? [];
+    onScroll?.('right', e);
-  }
-
-  getLocale = (transferLocale: TransferLocale, renderEmpty: RenderEmptyHandler) => {
-    const { locale = {} } = this.props;
-    return { ...transferLocale, notFoundContent: renderEmpty('Transfer'), ...locale };
   };
 
-  moveTo = (direction: TransferDirection) => {
+  const moveTo = (direction: TransferDirection) => {
-    const { targetKeys = [], dataSource = [], onChange } = this.props;
-    const { sourceSelectedKeys, targetSelectedKeys } = this.state;
     const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
     const dataSourceDisabledKeysMap = groupDisabledKeysMap(dataSource);
-
     // filter the disabled options
     const newMoveKeys = moveKeys.filter((key) => !dataSourceDisabledKeysMap.has(key));
     const newMoveKeysMap = groupKeysMap(newMoveKeys);
@@ -217,62 +229,53 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
 
     // empty checked keys
     const oppositeDirection = direction === 'right' ? 'left' : 'right';
-    this.setStateKeys(oppositeDirection, []);
+    setStateKeys(oppositeDirection, []);
-    this.handleSelectChange(oppositeDirection, []);
+    handleSelectChange(oppositeDirection, []);
-
     onChange?.(newTargetKeys, direction, newMoveKeys);
   };
 
-  moveToLeft = () => this.moveTo('left');
+  const moveToLeft = () => {
+    moveTo('left');
+  };
 
-  moveToRight = () => this.moveTo('right');
+  const moveToRight = () => {
+    moveTo('right');
+  };
 
-  onItemSelectAll = (direction: TransferDirection, selectedKeys: string[], checkAll: boolean) => {
+  const onItemSelectAll = (direction: TransferDirection, keys: string[], checkAll: boolean) => {
-    this.setStateKeys(direction, (prevKeys) => {
+    setStateKeys(direction, (prevKeys) => {
       let mergedCheckedKeys: string[] = [];
       if (checkAll) {
         // Merge current keys with origin key
-        mergedCheckedKeys = Array.from(new Set<string>([...prevKeys, ...selectedKeys]));
+        mergedCheckedKeys = Array.from(new Set<string>([...prevKeys, ...keys]));
       } else {
-        const selectedKeysMap = groupKeysMap(selectedKeys);
+        const selectedKeysMap = groupKeysMap(keys);
         // Remove current keys from origin keys
         mergedCheckedKeys = prevKeys.filter((key) => !selectedKeysMap.has(key));
       }
-
+      handleSelectChange(direction, mergedCheckedKeys);
-      this.handleSelectChange(direction, mergedCheckedKeys);
-
       return mergedCheckedKeys;
     });
   };
 
-  onLeftItemSelectAll = (selectedKeys: string[], checkAll: boolean) =>
+  const onLeftItemSelectAll = (keys: string[], checkAll: boolean) => {
-    this.onItemSelectAll('left', selectedKeys, checkAll);
+    onItemSelectAll('left', keys, checkAll);
-
-  onRightItemSelectAll = (selectedKeys: string[], checkAll: boolean) =>
-    this.onItemSelectAll('right', selectedKeys, checkAll);
-
-  handleFilter = (direction: TransferDirection, e: React.ChangeEvent<HTMLInputElement>) => {
-    const { onSearch } = this.props;
-    const { value } = e.target;
-    onSearch?.(direction, value);
   };
 
-  handleLeftFilter = (e: React.ChangeEvent<HTMLInputElement>) => this.handleFilter('left', e);
+  const onRightItemSelectAll = (keys: string[], checkAll: boolean) => {
-
+    onItemSelectAll('right', keys, checkAll);
-  handleRightFilter = (e: React.ChangeEvent<HTMLInputElement>) => this.handleFilter('right', e);
-
-  handleClear = (direction: TransferDirection) => {
-    const { onSearch } = this.props;
-    onSearch?.(direction, '');
   };
 
-  handleLeftClear = () => this.handleClear('left');
+  const leftFilter = (e: ChangeEvent<HTMLInputElement>) => onSearch?.('left', e.target.value);
 
-  handleRightClear = () => this.handleClear('right');
+  const rightFilter = (e: ChangeEvent<HTMLInputElement>) => onSearch?.('right', e.target.value);
 
-  onItemSelect = (direction: TransferDirection, selectedKey: string, checked: boolean) => {
+  const handleLeftClear = () => onSearch?.('left', '');
-    const { sourceSelectedKeys, targetSelectedKeys } = this.state;
+
-    const holder = direction === 'left' ? [...sourceSelectedKeys] : [...targetSelectedKeys];
+  const handleRightClear = () => onSearch?.('right', '');
+
+  const onItemSelect = (direction: TransferDirection, selectedKey: string, checked: boolean) => {
+    const holder = [...(direction === 'left' ? sourceSelectedKeys : targetSelectedKeys)];
     const index = holder.indexOf(selectedKey);
     if (index > -1) {
       holder.splice(index, 1);
@@ -280,77 +283,46 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
     if (checked) {
       holder.push(selectedKey);
     }
-    this.handleSelectChange(direction, holder);
+    handleSelectChange(direction, holder);
-
+    if (!props.selectedKeys) {
-    if (!this.props.selectedKeys) {
+      setStateKeys(direction, holder);
-      this.setStateKeys(direction, holder);
     }
   };
 
-  onLeftItemSelect = (selectedKey: string, checked: boolean) =>
+  const onLeftItemSelect = (selectedKey: string, checked: boolean) => {
-    this.onItemSelect('left', selectedKey, checked);
+    onItemSelect('left', selectedKey, checked);
+  };
 
-  onRightItemSelect = (selectedKey: string, checked: boolean) =>
+  const onRightItemSelect = (selectedKey: string, checked: boolean) => {
-    this.onItemSelect('right', selectedKey, checked);
+    onItemSelect('right', selectedKey, checked);
-
+  };
-  onRightItemRemove = (selectedKeys: string[]) => {
-    const { targetKeys = [], onChange } = this.props;
-
-    this.setStateKeys('right', []);
 
+  const onRightItemRemove = (keys: string[]) => {
+    setStateKeys('right', []);
     onChange?.(
-      targetKeys.filter((key) => !selectedKeys.includes(key)),
+      targetKeys.filter((key) => !keys.includes(key)),
       'left',
-      [...selectedKeys],
+      [...keys],
     );
   };
 
-  handleScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => {
+  const handleListStyle = (
-    const { onScroll } = this.props;
+    listStyles: TransferProps<RecordType>['listStyle'],
-    onScroll?.(direction, e);
-  };
-
-  handleLeftScroll = (e: React.SyntheticEvent<HTMLUListElement>) => this.handleScroll('left', e);
-
-  handleRightScroll = (e: React.SyntheticEvent<HTMLUListElement>) => this.handleScroll('right', e);
-
-  handleSelectChange(direction: TransferDirection, holder: string[]) {
-    const { sourceSelectedKeys, targetSelectedKeys } = this.state;
-    const { onSelectChange } = this.props;
-    if (!onSelectChange) {
-      return;
-    }
-
-    if (direction === 'left') {
-      onSelectChange(holder, targetSelectedKeys);
-    } else {
-      onSelectChange(sourceSelectedKeys, holder);
-    }
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  handleListStyle = (
-    listStyle: TransferProps<RecordType>['listStyle'],
     direction: TransferDirection,
-  ) => {
+  ): CSSProperties => {
-    if (typeof listStyle === 'function') {
+    if (typeof listStyles === 'function') {
-      return listStyle({ direction });
+      return listStyles({ direction });
     }
-    return listStyle;
+    return listStyles || {};
   };
 
-  separateDataSource() {
+  const separateDataSource = () => {
-    const { dataSource = [], rowKey, targetKeys = [] } = this.props;
-
     const leftDataSource: KeyWise<RecordType>[] = [];
     const rightDataSource: KeyWise<RecordType>[] = new Array(targetKeys.length);
     const targetKeysMap = groupKeysMap(targetKeys);
     dataSource.forEach((record: KeyWise<RecordType>) => {
       if (rowKey) {
-        record = {
+        record = { ...record, key: rowKey(record) };
-          ...record,
-          key: rowKey(record),
-        };
       }
       // rightDataSource should be ordered by targetKeys
       // leftDataSource should be ordered by dataSource
@@ -360,136 +332,116 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
         leftDataSource.push(record);
       }
     });
+    return { leftDataSource, rightDataSource };
+  };
 
-    return {
+  const configContext = useContext<ConfigConsumerProps>(ConfigContext);
-      leftDataSource,
+  const formItemContext = useContext<FormItemStatusContextProps>(FormItemInputContext);
-      rightDataSource,
-    };
-  }
 
-  render() {
+  const { getPrefixCls, renderEmpty, direction } = configContext;
-    return (
+  const { hasFeedback, status } = formItemContext;
-      <LocaleReceiver componentName="Transfer" defaultLocale={defaultLocale.Transfer}>
-        {(contextLocale) => (
-          <ConfigConsumer>
-            {({ getPrefixCls, renderEmpty, direction }: ConfigConsumerProps) => (
-              <FormItemInputContext.Consumer>
-                {({ hasFeedback, status: contextStatus }) => {
-                  const {
-                    prefixCls: customizePrefixCls,
-                    className,
-                    disabled,
-                    operations = [],
-                    showSearch = false,
-                    footer,
-                    style,
-                    listStyle = {},
-                    operationStyle,
-                    filterOption,
-                    render,
-                    children,
-                    showSelectAll,
-                    oneWay,
-                    pagination,
-                    status: customStatus,
-                  } = this.props;
-                  const prefixCls = getPrefixCls('transfer', customizePrefixCls);
-                  const locale = this.getLocale(contextLocale, renderEmpty || defaultRenderEmpty);
-                  const { sourceSelectedKeys, targetSelectedKeys } = this.state;
-                  const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
-                  const mergedPagination = !children && pagination;
+  const prefixCls = getPrefixCls('transfer', customizePrefixCls);
+  const mergedStatus = getMergedStatus(status, customStatus);
+  const mergedPagination = !children && pagination;
 
-                  const { leftDataSource, rightDataSource } = this.separateDataSource();
+  const { leftDataSource, rightDataSource } = separateDataSource();
-                  const leftActive = targetSelectedKeys.length > 0;
-                  const rightActive = sourceSelectedKeys.length > 0;
 
-                  const cls = classNames(
+  const leftActive = targetSelectedKeys.length > 0;
-                    prefixCls,
+  const rightActive = sourceSelectedKeys.length > 0;
-                    {
-                      [`${prefixCls}-disabled`]: disabled,
-                      [`${prefixCls}-customize-list`]: !!children,
-                      [`${prefixCls}-rtl`]: direction === 'rtl',
-                    },
-                    getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
-                    className,
-                  );
 
-                  const titles = this.getTitles(locale);
+  const cls = classNames(
-                  const selectAllLabels = this.props.selectAllLabels || [];
+    prefixCls,
-                  return (
+    {
-                    <TransferFC prefixCls={prefixCls} className={cls} style={style}>
+      [`${prefixCls}-disabled`]: disabled,
-                      <List<KeyWise<RecordType>>
+      [`${prefixCls}-customize-list`]: !!children,
-                        prefixCls={`${prefixCls}-list`}
+      [`${prefixCls}-rtl`]: direction === 'rtl',
-                        titleText={titles?.[0]}
+    },
-                        dataSource={leftDataSource}
+    getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
-                        filterOption={filterOption}
+    className,
-                        style={this.handleListStyle(listStyle, 'left')}
+  );
-                        checkedKeys={sourceSelectedKeys}
+
-                        handleFilter={this.handleLeftFilter}
+  return (
-                        handleClear={this.handleLeftClear}
+    <LocaleReceiver componentName="Transfer" defaultLocale={defaultLocale.Transfer}>
-                        onItemSelect={this.onLeftItemSelect}
+      {(contextLocale) => {
-                        onItemSelectAll={this.onLeftItemSelectAll}
+        const listLocale = getLocale(contextLocale, renderEmpty || defaultRenderEmpty);
-                        render={render}
+        const [leftTitle, rightTitle] = getTitles(listLocale);
-                        showSearch={showSearch}
+        return (
-                        renderList={children}
+          <TransferFC prefixCls={prefixCls} className={cls} style={style}>
-                        footer={footer}
+            <List<KeyWise<RecordType>>
-                        onScroll={this.handleLeftScroll}
+              prefixCls={`${prefixCls}-list`}
-                        disabled={disabled}
+              titleText={leftTitle}
-                        direction={direction === 'rtl' ? 'right' : 'left'}
+              dataSource={leftDataSource}
-                        showSelectAll={showSelectAll}
+              filterOption={filterOption}
-                        selectAllLabel={selectAllLabels[0]}
+              style={handleListStyle(listStyle, 'left')}
-                        pagination={mergedPagination}
+              checkedKeys={sourceSelectedKeys}
-                        {...locale}
+              handleFilter={leftFilter}
-                      />
+              handleClear={handleLeftClear}
-                      <Operation
+              onItemSelect={onLeftItemSelect}
-                        className={`${prefixCls}-operation`}
+              onItemSelectAll={onLeftItemSelectAll}
-                        rightActive={rightActive}
+              render={render}
-                        rightArrowText={operations[0]}
+              showSearch={showSearch}
-                        moveToRight={this.moveToRight}
+              renderList={children}
-                        leftActive={leftActive}
+              footer={footer}
-                        leftArrowText={operations[1]}
+              onScroll={handleLeftScroll}
-                        moveToLeft={this.moveToLeft}
+              disabled={disabled}
-                        style={operationStyle}
+              direction={direction === 'rtl' ? 'right' : 'left'}
-                        disabled={disabled}
+              showSelectAll={showSelectAll}
-                        direction={direction}
+              selectAllLabel={selectAllLabels[0]}
-                        oneWay={oneWay}
+              pagination={mergedPagination}
-                      />
+              {...listLocale}
-                      <List<KeyWise<RecordType>>
+            />
-                        prefixCls={`${prefixCls}-list`}
+            <Operation
-                        titleText={titles?.[1]}
+              className={`${prefixCls}-operation`}
-                        dataSource={rightDataSource}
+              rightActive={rightActive}
-                        filterOption={filterOption}
+              rightArrowText={operations[0]}
-                        style={this.handleListStyle(listStyle, 'right')}
+              moveToRight={moveToRight}
-                        checkedKeys={targetSelectedKeys}
+              leftActive={leftActive}
-                        handleFilter={this.handleRightFilter}
+              leftArrowText={operations[1]}
-                        handleClear={this.handleRightClear}
+              moveToLeft={moveToLeft}
-                        onItemSelect={this.onRightItemSelect}
+              style={operationStyle}
-                        onItemSelectAll={this.onRightItemSelectAll}
+              disabled={disabled}
-                        onItemRemove={this.onRightItemRemove}
+              direction={direction}
-                        render={render}
+              oneWay={oneWay}
-                        showSearch={showSearch}
+            />
-                        renderList={children}
+            <List<KeyWise<RecordType>>
-                        footer={footer}
+              prefixCls={`${prefixCls}-list`}
-                        onScroll={this.handleRightScroll}
+              titleText={rightTitle}
-                        disabled={disabled}
+              dataSource={rightDataSource}
-                        direction={direction === 'rtl' ? 'left' : 'right'}
+              filterOption={filterOption}
-                        showSelectAll={showSelectAll}
+              style={handleListStyle(listStyle, 'right')}
-                        selectAllLabel={selectAllLabels[1]}
+              checkedKeys={targetSelectedKeys}
-                        showRemove={oneWay}
+              handleFilter={rightFilter}
-                        pagination={mergedPagination}
+              handleClear={handleRightClear}
-                        {...locale}
+              onItemSelect={onRightItemSelect}
-                      />
+              onItemSelectAll={onRightItemSelectAll}
-                    </TransferFC>
+              onItemRemove={onRightItemRemove}
-                  );
+              render={render}
-                }}
+              showSearch={showSearch}
-              </FormItemInputContext.Consumer>
+              renderList={children}
-            )}
+              footer={footer}
-          </ConfigConsumer>
+              onScroll={handleRightScroll}
-        )}
+              disabled={disabled}
-      </LocaleReceiver>
+              direction={direction === 'rtl' ? 'left' : 'right'}
-    );
+              showSelectAll={showSelectAll}
-  }
+              selectAllLabel={selectAllLabels[1]}
+              showRemove={oneWay}
+              pagination={mergedPagination}
+              {...listLocale}
+            />
+          </TransferFC>
+        );
+      }}
+    </LocaleReceiver>
+  );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  Transfer.displayName = 'Transfer';
 }
 
+Transfer.List = List;
+Transfer.Search = Search;
+Transfer.Operation = Operation;
+
 export default Transfer;

components/transfer/list.tsx

@@ -428,4 +428,8 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
   );
 };
 
+if (process.env.NODE_ENV !== 'production') {
+  TransferList.displayName = 'TransferList';
+}
+
 export default TransferList;

components/transfer/operation.tsx

@@ -18,41 +18,48 @@ export interface TransferOperationProps {
   oneWay?: boolean;
 }
 
-const Operation = ({
+const Operation: React.FC<TransferOperationProps> = (props) => {
-  disabled,
+  const {
-  moveToLeft,
+    disabled,
-  moveToRight,
+    moveToLeft,
-  leftArrowText = '',
+    moveToRight,
-  rightArrowText = '',
+    leftArrowText = '',
-  leftActive,
+    rightArrowText = '',
-  rightActive,
+    leftActive,
-  className,
+    rightActive,
-  style,
+    className,
-  direction,
+    style,
-  oneWay,
+    direction,
-}: TransferOperationProps) => (
+    oneWay,
-  <div className={className} style={style}>
+  } = props;
-    <Button
+  return (
-      type="primary"
+    <div className={className} style={style}>
-      size="small"
-      disabled={disabled || !rightActive}
-      onClick={moveToRight}
-      icon={direction !== 'rtl' ? <RightOutlined /> : <LeftOutlined />}
-    >
-      {rightArrowText}
-    </Button>
-    {!oneWay && (
       <Button
         type="primary"
         size="small"
-        disabled={disabled || !leftActive}
+        disabled={disabled || !rightActive}
-        onClick={moveToLeft}
+        onClick={moveToRight}
-        icon={direction !== 'rtl' ? <LeftOutlined /> : <RightOutlined />}
+        icon={direction !== 'rtl' ? <RightOutlined /> : <LeftOutlined />}
       >
-        {leftArrowText}
+        {rightArrowText}
       </Button>
-    )}
+      {!oneWay && (
-  </div>
+        <Button
-);
+          type="primary"
+          size="small"
+          disabled={disabled || !leftActive}
+          onClick={moveToLeft}
+          icon={direction !== 'rtl' ? <LeftOutlined /> : <RightOutlined />}
+        >
+          {leftArrowText}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  Operation.displayName = 'Operation';
+}
 
 export default Operation;

components/transfer/search.tsx

@@ -12,7 +12,7 @@ export interface TransferSearchProps {
   disabled?: boolean;
 }
 
-export default function Search(props: TransferSearchProps) {
+const Search: React.FC<TransferSearchProps> = (props) => {
   const { placeholder = '', value, prefixCls, disabled, onChange, handleClear } = props;
 
   const handleChange = React.useCallback(
@@ -36,4 +36,10 @@ export default function Search(props: TransferSearchProps) {
       prefix={<SearchOutlined />}
     />
   );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  Search.displayName = 'Search';
 }
+
+export default Search;