test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 20:19:44 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
lijianan 2023-01-04 15:09:03 +08:00 committed by GitHub
parent a9bab97d92
commit dc2686d7eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 288 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/transfer/ListBody.tsx
View File

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

402
components/transfer/index.tsx
View File

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

4
components/transfer/list.tsx
View File

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

13
components/transfer/operation.tsx
View File

@ -18,7 +18,8 @@ export interface TransferOperationProps {
oneWay?: boolean; oneWay?: boolean;
} }
const Operation = ({ const Operation: React.FC<TransferOperationProps> = (props) => {
const {
disabled, disabled,
moveToLeft, moveToLeft,
moveToRight, moveToRight,
@ -30,7 +31,8 @@ const Operation = ({
style, style,
direction, direction,
oneWay, oneWay,
}: TransferOperationProps) => ( } = props;
return (
<div className={className} style={style}> <div className={className} style={style}>
<Button <Button
type="primary" type="primary"
@ -53,6 +55,11 @@ const Operation = ({
</Button> </Button>
)} )}
</div> </div>
); );
};
if (process.env.NODE_ENV !== 'production') {
Operation.displayName = 'Operation';
}
export default Operation; export default Operation;

8
components/transfer/search.tsx
View File

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