mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
This reverts commit 15580483ce
.
This commit is contained in:
parent
90f1dfa58c
commit
317c6469a2
@ -216,7 +216,7 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list"
|
||||
class="ant-transfer-list ant-transfer-list-with-footer"
|
||||
style="width:250px;height:300px"
|
||||
>
|
||||
<div
|
||||
@ -352,6 +352,19 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list-footer"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-sm"
|
||||
style="float:right;margin:5px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
reload
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
@ -558,31 +558,3 @@ describe('immutable data', () => {
|
||||
expect(wrapper).toMatchRenderedSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('footer render source and target', () => {
|
||||
// https://github.com/ant-design/ant-design/issues/28082
|
||||
it('currently render footer', () => {
|
||||
const differentFooter = () => ({
|
||||
source: (
|
||||
<Button size="small" className="sourceFooter">
|
||||
reload
|
||||
</Button>
|
||||
),
|
||||
target: (
|
||||
<Button size="small" className="targetFooter">
|
||||
reload
|
||||
</Button>
|
||||
),
|
||||
});
|
||||
const defaultFooter = () => (
|
||||
<Button size="small" className="defaultFooter">
|
||||
reload
|
||||
</Button>
|
||||
);
|
||||
const wrapper = mount(<Transfer footer={differentFooter} />);
|
||||
const wrapper2 = mount(<Transfer footer={defaultFooter} />);
|
||||
expect(wrapper.exists('.sourceFooter')).toEqual(true);
|
||||
expect(wrapper.exists('.targetFooter')).toEqual(true);
|
||||
expect(wrapper2.exists('.defaultFooter')).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
@ -50,13 +50,11 @@ class App extends React.Component {
|
||||
this.setState({ targetKeys });
|
||||
};
|
||||
|
||||
renderFooter = () => ({
|
||||
source: (
|
||||
renderFooter = () => (
|
||||
<Button size="small" style={{ float: 'right', margin: 5 }} onClick={this.getMock}>
|
||||
reload
|
||||
</Button>
|
||||
),
|
||||
});
|
||||
);
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
@ -24,7 +24,7 @@ One or more elements can be selected from either column, one click on the proper
|
||||
| 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 | [RecordType extends TransferItem = TransferItem](https://git.io/vMM64)\[] | \[] | |
|
||||
| disabled | Whether disabled transfer | boolean | false | |
|
||||
| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | - | |
|
||||
| footer | A function used for rendering the footer | (props) => ReactNode \| { source: ReactNode, target: ReactNode } | - | { source: ReactNode, target: ReactNode }: 4.12.3 |
|
||||
| footer | A function used for rendering the footer | (props) => ReactNode | - | |
|
||||
| listStyle | A custom CSS style used for rendering the transfer columns | object \| ({direction: `left` \| `right`}) => object | - | |
|
||||
| locale | The i18n text including filter, empty text, item unit, etc | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | { itemUnit: `item`, itemsUnit: `items`, notFoundContent: `The list is empty`, searchPlaceholder: `Search here` } | |
|
||||
| oneWay | Display as single direction style | boolean | false | 4.3.0 |
|
||||
|
@ -58,6 +58,7 @@ export interface TransferLocale {
|
||||
removeAll: string;
|
||||
removeCurrent: string;
|
||||
}
|
||||
|
||||
export interface TransferProps<RecordType> {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
@ -76,14 +77,7 @@ export interface TransferProps<RecordType> {
|
||||
showSearch?: boolean;
|
||||
filterOption?: (inputValue: string, item: RecordType) => boolean;
|
||||
locale?: Partial<TransferLocale>;
|
||||
footer?: (
|
||||
props: TransferListProps<RecordType>,
|
||||
) =>
|
||||
| React.ReactNode
|
||||
| {
|
||||
source?: React.ReactNode;
|
||||
target?: React.ReactNode;
|
||||
};
|
||||
footer?: (props: TransferListProps<RecordType>) => React.ReactNode;
|
||||
rowKey?: (record: RecordType) => string;
|
||||
onSearch?: (direction: TransferDirection, value: string) => void;
|
||||
onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => void;
|
||||
|
@ -27,7 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
|
||||
| dataSource | 数据源,其中的数据将会被渲染到左边一栏中,`targetKeys` 中指定的除外 | [RecordType extends TransferItem = TransferItem](https://git.io/vMM64)\[] | \[] | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| filterOption | 接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 true,反之则返回 false | (inputValue, option): boolean | - | |
|
||||
| footer | 底部渲染函数 | (props) => ReactNode \| { source: ReactNode, target: ReactNode } | - | { source: ReactNode, target: ReactNode }: 4.12.3 |
|
||||
| footer | 底部渲染函数 | (props) => ReactNode | - | |
|
||||
| listStyle | 两个穿梭框的自定义样式 | object\|({direction: `left` \| `right`}) => object | - | |
|
||||
| locale | 各种语言 | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | { itemUnit: `项`, itemsUnit: `项`, searchPlaceholder: `请输入搜索内容` } | |
|
||||
| oneWay | 展示为单向样式 | boolean | false | 4.3.0 |
|
||||
|
@ -39,10 +39,7 @@ export interface RenderedItem<RecordType> {
|
||||
}
|
||||
|
||||
type RenderListFunction<T> = (props: TransferListBodyProps<T>) => React.ReactNode;
|
||||
type FooterRender = {
|
||||
source?: React.ReactNode;
|
||||
target?: React.ReactNode;
|
||||
};
|
||||
|
||||
export interface TransferListProps<RecordType> extends TransferLocale {
|
||||
prefixCls: string;
|
||||
titleText: React.ReactNode;
|
||||
@ -62,7 +59,7 @@ export interface TransferListProps<RecordType> extends TransferLocale {
|
||||
itemUnit: string;
|
||||
itemsUnit: string;
|
||||
renderList?: RenderListFunction<RecordType>;
|
||||
footer?: (props: TransferListProps<RecordType>) => React.ReactNode | FooterRender;
|
||||
footer?: (props: TransferListProps<RecordType>) => React.ReactNode;
|
||||
onScroll: (e: React.UIEvent<HTMLUListElement>) => void;
|
||||
disabled?: boolean;
|
||||
direction: TransferDirection;
|
||||
@ -315,27 +312,10 @@ export default class TransferList<
|
||||
showSelectAll,
|
||||
showRemove,
|
||||
pagination,
|
||||
direction,
|
||||
} = this.props;
|
||||
|
||||
// Custom Layout
|
||||
// Distinguish different footer
|
||||
const tempDom = footer && footer(this.props);
|
||||
let footerDom;
|
||||
function isFooterRender(obj: any): obj is FooterRender {
|
||||
return obj.source || obj.target;
|
||||
}
|
||||
if (tempDom) {
|
||||
if (isFooterRender(tempDom)) {
|
||||
if (direction === 'left') {
|
||||
footerDom = tempDom.source;
|
||||
} else {
|
||||
footerDom = tempDom.target;
|
||||
}
|
||||
} else {
|
||||
footerDom = tempDom;
|
||||
}
|
||||
}
|
||||
const footerDom = footer && footer(this.props);
|
||||
|
||||
const listCls = classNames(prefixCls, {
|
||||
[`${prefixCls}-with-pagination`]: pagination,
|
||||
|
Loading…
Reference in New Issue
Block a user