test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-03 04:30:06 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

fix: Transfer showSelectAll={false} should hide dropdown (#31746)

Browse Source 
close #31728
This commit is contained in:
afc163 2021-08-10 19:20:53 +08:00 committed by GitHub
parent f8dc2231d5
commit c0ff844bf7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 63 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
components/transfer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3089,6 +3089,21 @@ Array [
<div
class="ant-transfer-list-header"
>
<label
class="ant-checkbox-wrapper ant-transfer-list-checkbox"
>
<span
class="ant-checkbox"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
<span
aria-label="down"
class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
@ -3791,6 +3806,21 @@ Array [
<div
class="ant-transfer-list-header"
>
<label
class="ant-checkbox-wrapper ant-transfer-list-checkbox"
>
<span
class="ant-checkbox"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
<span
aria-label="down"
class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
@ -4200,25 +4230,6 @@ exports[`renders ./components/transfer/demo/tree-transfer.md correctly 1`] = `
<div
class="ant-transfer-list-header"
>
<span
aria-label="down"
class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
<span
class="ant-transfer-list-header-selected"
>
@ -4507,25 +4518,6 @@ exports[`renders ./components/transfer/demo/tree-transfer.md correctly 1`] = `
<div
class="ant-transfer-list-header"
>
<span
aria-label="down"
class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
<span
class="ant-transfer-list-header-selected"
>

6
components/transfer/__tests__/dropdown.test.js
View File

@ -72,6 +72,12 @@ describe('Transfer.Dropdown', () => {
jest.useRealTimers();
});
it('should hide checkbox and dropdown icon when showSelectAll={false}', () => {
const wrapper = mount(<Transfer {...listProps} showSelectAll={false} />);
expect(wrapper.find('.ant-transfer-list-header-dropdown').length).toBe(0);
expect(wrapper.find('.ant-transfer-list-header .ant-transfer-list-checkbox').length).toBe(0);
});
describe('select invert', () => {
[
{ name: 'with pagination', props: listProps, index: 2, keys: ['c', 'd'] },

2
components/transfer/demo/table-transfer.md
View File

@ -19,7 +19,7 @@ import difference from 'lodash/difference';
// Customize Table Transfer
const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
<Transfer {...restProps} showSelectAll={false}>
<Transfer {...restProps}>
{({
direction,
filteredItems,

34
components/transfer/list.tsx
View File

@ -75,7 +75,7 @@ interface TransferListState {
}
export default class TransferList<
RecordType extends KeyWiseTransferItem
RecordType extends KeyWiseTransferItem,
> extends React.PureComponent<TransferListProps<RecordType>, TransferListState> {
static defaultProps = {
dataSource: [],
@ -234,16 +234,20 @@ export default class TransferList<
);
}
getCheckBox(
filteredItems: RecordType[],
onItemSelectAll: (dataSource: string[], checkAll: boolean) => void,
showSelectAll?: boolean,
disabled?: boolean,
prefixCls?: string,
): false | JSX.Element {
getCheckBox({
filteredItems,
onItemSelectAll,
disabled,
prefixCls,
}: {
filteredItems: RecordType[];
onItemSelectAll: (dataSource: string[], checkAll: boolean) => void;
disabled?: boolean;
prefixCls?: string;
}): false | JSX.Element {
const checkStatus = this.getCheckStatus(filteredItems);
const checkedAll = checkStatus === 'all';
const checkAllCheckbox = showSelectAll !== false && (
const checkAllCheckbox = (
<Checkbox
disabled={disabled}
checked={checkedAll}
@ -311,7 +315,7 @@ export default class TransferList<
renderList,
onItemSelectAll,
onItemRemove,
showSelectAll,
showSelectAll = true,
showRemove,
pagination,
} = this.props;
@ -349,7 +353,7 @@ export default class TransferList<
const checkAllCheckbox =
!showRemove &&
!pagination &&
this.getCheckBox(filteredItems, onItemSelectAll, showSelectAll, disabled, prefixCls);
this.getCheckBox({ filteredItems, onItemSelectAll, disabled, prefixCls });
let menu: React.ReactElement | null = null;
if (showRemove) {
@ -444,8 +448,12 @@ export default class TransferList<
<div className={listCls} style={style}>
{/* Header */}
<div className={`${prefixCls}-header`}>
{checkAllCheckbox}
{dropdown}
{showSelectAll ? (
<>
{checkAllCheckbox}
{dropdown}
</>
) : null}
<span className={`${prefixCls}-header-selected`}>
{this.getSelectAllLabel(checkedKeys.length, filteredItems.length)}
</span>

5
components/transfer/style/customize.less
View File

@ -17,6 +17,11 @@
border: 0;
border-radius: 0;
.@{table-prefix-cls}-selection-column {
width: 40px;
min-width: 40px;
}
> .@{table-prefix-cls}-content {
// Header background color
> .@{table-prefix-cls}-body > table > .@{table-prefix-cls}-thead > tr > th {