Browse Source

Revert "feat: add api for transfer (#29288)" (#29541)

This reverts commit 15580483ce.
pull/29553/head
二货机器人 4 years ago
committed by GitHub
parent
commit
317c6469a2
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 15
      components/transfer/__tests__/__snapshots__/demo.test.js.snap
  2. 28
      components/transfer/__tests__/index.test.js
  3. 6
      components/transfer/demo/advanced.md
  4. 2
      components/transfer/index.en-US.md
  5. 10
      components/transfer/index.tsx
  6. 2
      components/transfer/index.zh-CN.md
  7. 26
      components/transfer/list.tsx

15
components/transfer/__tests__/__snapshots__/demo.test.js.snap

@ -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>
`;

28
components/transfer/__tests__/index.test.js

@ -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);
});
});

6
components/transfer/demo/advanced.md

@ -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 (

2
components/transfer/index.en-US.md

@ -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 |

10
components/transfer/index.tsx

@ -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;

2
components/transfer/index.zh-CN.md

@ -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 |

26
components/transfer/list.tsx

@ -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…
Cancel
Save