Skip to content

Commit 99fd4de

Browse files
OriginRingOriginRing
authored
feat(module:transfer): add nzOneWay to support one way style (#8717)
1 parent f695882 commit 99fd4de

14 files changed

+204
-71
lines changed

‎components/transfer/demo/advanced.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 2
2+
order: 4
33
title:
44
zh-CN: 高级用法
55
en-US: Advanced

‎components/transfer/demo/can-move.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 4
2+
order: 6
33
debug: true
44
title:
55
zh-CN: 二次校验

‎components/transfer/demo/custom-item.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 3
2+
order: 5
33
title:
44
zh-CN: 自定义渲染行数据
55
en-US: Custom datasource

‎components/transfer/demo/one-way.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
order: 1
3+
title:
4+
zh-CN: 单向样式
5+
en-US: One Way
6+
---
7+
8+
## zh-CN
9+
10+
通过 `nzOneWay` 将 Transfer 转为单向样式。
11+
12+
## en-US
13+
14+
Use `nzOneWay` to make Transfer the one way style.
15+
16+

‎components/transfer/demo/one-way.ts

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
import { TransferItem } from 'ng-zorro-antd/transfer';
4+
5+
@Component({
6+
selector: 'nz-demo-transfer-one-way',
7+
template: `
8+
<nz-transfer
9+
[nzDataSource]="list"
10+
[nzDisabled]="disabled"
11+
[nzTitles]="['Source', 'Target']"
12+
(nzSelectChange)="select($event)"
13+
[nzSelectedKeys]="['0', '2', '3']"
14+
nzOneWay
15+
(nzChange)="change($event)"
16+
></nz-transfer>
17+
<div style="margin-top: 8px;">
18+
<nz-switch [(ngModel)]="disabled" nzCheckedChildren="disabled" nzUnCheckedChildren="disabled"></nz-switch>
19+
<div></div>
20+
</div>
21+
`
22+
})
23+
export class NzDemoTransferOneWayComponent implements OnInit {
24+
list: TransferItem[] = [];
25+
disabled = false;
26+
27+
ngOnInit(): void {
28+
for (let i = 0; i < 20; i++) {
29+
this.list.push({
30+
key: i.toString(),
31+
title: `content${i + 1}`,
32+
disabled: i % 3 < 1
33+
});
34+
}
35+
36+
[2, 3].forEach(idx => (this.list[idx].direction = 'right'));
37+
}
38+
39+
select(ret: {}): void {
40+
console.log('nzSelectChange', ret);
41+
}
42+
43+
change(ret: {}): void {
44+
console.log('nzChange', ret);
45+
}
46+
}

‎components/transfer/demo/search.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 1
2+
order: 2
33
title:
44
zh-CN: 带搜索框
55
en-US: Search

‎components/transfer/demo/status.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 7
2+
order: 11
33
title:
44
zh-CN: 自定义状态
55
en-US: Status

‎components/transfer/demo/table-transfer.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 5
2+
order: 8
33
title:
44
zh-CN: 表格穿梭框
55
en-US: Table Transfer

‎components/transfer/demo/tree-transfer.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 6
2+
order: 9
33
title:
44
zh-CN: 树穿梭框
55
en-US: Tree Transfer

‎components/transfer/doc/index.en-US.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
2323
### nz-transfer:standalone
2424

2525
| Property | Description | Type | Default |
26-
| ----------------------- |-----------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------ |-----------------------|
26+
|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------ |-----------------------|
2727
| `[nzDataSource]` | Used for setting the data source. Except for the elements whose keys are `direction: 'right'` prop, or using `nzTargetKeys` prop. | `TransferItem[]` | `[]` |
2828
| `[nzDisabled]` | Whether the transfer is disabled | `boolean` | `false` |
2929
| `[nzTitles]` | A set of titles that are sorted from left to right. | `string[]` | `['', '']` |
@@ -42,6 +42,7 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
4242
| `[nzCanMove]` | A function to determine what items should be moved (by default all checked items are moved). please refer to the case. | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
4343
| `[nzSelectedKeys]` | A set of keys of selected items. | `string[]` | - |
4444
| `[nzTargetKeys]` | A set of keys of elements that are listed on the right column. | `string[]` | - |
45+
| `[nzOneWay]` | Display as single direction style | `boolean` | `false` |
4546
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
4647
| `(nzChange)` | A callback function that is executed when the transfer between columns is complete. | `EventEmitter<TransferChange>` | - |
4748
| `(nzSearchChange)` | A callback function which is executed when search field are changed | `EventEmitter<TransferSearchChange>` | - |

‎components/transfer/doc/index.zh-CN.md

+25-24
Original file line numberDiff line numberDiff line change
@@ -24,30 +24,31 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
2424

2525
### nz-transfer:standalone
2626

27-
| 参数 | 说明 | 类型 | 默认值 |
28-
| ----------------------- |------------------------------------------------------------------------------------------------------| ------------------------------------------------------ |----------------|
29-
| `[nzDataSource]` | 数据源，其中若数据属性 `direction: 'right'` 将会被渲染到右边一栏中或使用 `nzTargetKeys` | `TransferItem[]` | `[]` |
30-
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
31-
| `[nzTitles]` | 标题集合，顺序从左至右 | `string[]` | `['', '']` |
32-
| `[nzOperations]` | 操作文案集合，顺序从下至上 | `string[]` | `['', '']` |
33-
| `[nzListStyle]` | 两个穿梭框的自定义样式，等同 `ngStyle` | `object` | - |
34-
| `[nzItemUnit]` | 单数单位 | `string` | `'项目'` |
35-
| `[nzItemsUnit]` | 复数单位 | `string` | `'项目'` |
36-
| `[nzRenderList]` | 自定义渲染列表，见示例 | `Array<TemplateRef<void> \| null>` | `[null, null]` |
37-
| `[nzRender]` | 每行数据渲染模板，见示例 | `TemplateRef<void>` | - |
38-
| `[nzFooter]` | 底部渲染模板，见示例 | `TemplateRef<void>` | - |
39-
| `[nzShowSelectAll]` | 是否显示全选框 | `boolean` | `true` |
40-
| `[nzShowSearch]` | 是否显示搜索框 | `boolean` | `false` |
41-
| `[nzFilterOption]` | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(inputValue: string, item: TransferItem) => boolean` | - |
42-
| `[nzSearchPlaceholder]` | 搜索框的默认值 | `string` | `'请输入搜索内容'` |
43-
| `[nzNotFoundContent]` | 当列表为空时显示的内容 | `string` | `'列表为空'` |
44-
| `[nzCanMove]` | 穿梭时二次校验。**注意：** 穿梭组件内部始终只保留一份数据，二次校验过程中需取消穿梭项则直接删除该项；具体用法见示例。 | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
45-
| `[nzSelectedKeys]` | 设置被选中的 key 集合 | `string[]` | - |
46-
| `[nzTargetKeys]` | 显示在右侧框数据的 key 集合 | `string[]` | - |
47-
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
48-
| `(nzChange)` | 选项在两栏之间转移时的回调函数 | `EventEmitter<TransferChange>` | - |
49-
| `(nzSearchChange)` | 搜索框内容时改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |
50-
| `(nzSelectChange)` | 选中项发生改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |
27+
| 参数 | 说明 | 类型 | 默认值 |
28+
|-------------------------|---------------------------------------------------------------------------------------------|--------------------------------------------------------|----------------|
29+
| `[nzDataSource]` | 数据源，其中若数据属性 `direction: 'right'` 将会被渲染到右边一栏中或使用 `nzTargetKeys` | `TransferItem[]` | `[]` |
30+
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
31+
| `[nzTitles]` | 标题集合，顺序从左至右 | `string[]` | `['', '']` |
32+
| `[nzOperations]` | 操作文案集合，顺序从下至上 | `string[]` | `['', '']` |
33+
| `[nzListStyle]` | 两个穿梭框的自定义样式，等同 `ngStyle` | `object` | - |
34+
| `[nzItemUnit]` | 单数单位 | `string` | `'项目'` |
35+
| `[nzItemsUnit]` | 复数单位 | `string` | `'项目'` |
36+
| `[nzRenderList]` | 自定义渲染列表，见示例 | `Array<TemplateRef<void> \| null>` | `[null, null]` |
37+
| `[nzRender]` | 每行数据渲染模板，见示例 | `TemplateRef<void>` | - |
38+
| `[nzFooter]` | 底部渲染模板，见示例 | `TemplateRef<void>` | - |
39+
| `[nzShowSelectAll]` | 是否显示全选框 | `boolean` | `true` |
40+
| `[nzShowSearch]` | 是否显示搜索框 | `boolean` | `false` |
41+
| `[nzFilterOption]` | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(inputValue: string, item: TransferItem) => boolean` | - |
42+
| `[nzSearchPlaceholder]` | 搜索框的默认值 | `string` | `'请输入搜索内容'` |
43+
| `[nzNotFoundContent]` | 当列表为空时显示的内容 | `string` | `'列表为空'` |
44+
| `[nzCanMove]` | 穿梭时二次校验。**注意：** 穿梭组件内部始终只保留一份数据，二次校验过程中需取消穿梭项则直接删除该项；具体用法见示例。 | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
45+
| `[nzSelectedKeys]` | 设置被选中的 key 集合 | `string[]` | - |
46+
| `[nzTargetKeys]` | 显示在右侧框数据的 key 集合 | `string[]` | - |
47+
| `[nzOneWay]` | 展示为单向样式 | `boolean` | `false` |
48+
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
49+
| `(nzChange)` | 选项在两栏之间转移时的回调函数 | `EventEmitter<TransferChange>` | - |
50+
| `(nzSearchChange)` | 搜索框内容时改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |
51+
| `(nzSelectChange)` | 选中项发生改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |
5152

5253
#### TransferItem
5354

0 commit comments

Comments
 (0)