Skip to content

Commit

Permalink
feat(module:transfer): use nzOneWay to make Transfer the one way style
Browse files Browse the repository at this point in the history 
fix: #8643
  • Loading branch information
OriginRing committed Aug 28, 2024
1 parent 3ccca11 commit 0577a85
Show file tree
Hide file tree
Showing 14 changed files with 204 additions and 71 deletions.
2 changes: 1 addition & 1 deletion components/transfer/demo/advanced.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 2
order: 4
title:
zh-CN: 高级用法
en-US: Advanced
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/demo/can-move.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 4
order: 6
debug: true
title:
zh-CN: 二次校验
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/demo/custom-item.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 3
order: 5
title:
zh-CN: 自定义渲染行数据
en-US: Custom datasource
Expand Down
16 changes: 16 additions & 0 deletions components/transfer/demo/on-way.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
order: 1
title:
zh-CN: 单向样式
en-US: One Way
---

## zh-CN

通过 `nzOneWay` 将 Transfer 转为单向样式。

## en-US

Use `nzOneWay` to make Transfer the one way style.


46 changes: 46 additions & 0 deletions components/transfer/demo/on-way.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { Component, OnInit } from '@angular/core';

import { TransferItem } from 'ng-zorro-antd/transfer';

@Component({
selector: 'nz-demo-transfer-on-way',
template: `
<nz-transfer
[nzDataSource]="list"
[nzDisabled]="disabled"
[nzTitles]="['Source', 'Target']"
(nzSelectChange)="select($event)"
[nzSelectedKeys]="['0', '2', '3']"
nzOneWay
(nzChange)="change($event)"
></nz-transfer>
<div style="margin-top: 8px;">
<nz-switch [(ngModel)]="disabled" nzCheckedChildren="disabled" nzUnCheckedChildren="disabled"></nz-switch>
<div></div>
</div>
`
})
export class NzDemoTransferOnWayComponent implements OnInit {
list: TransferItem[] = [];
disabled = false;

ngOnInit(): void {
for (let i = 0; i < 20; i++) {
this.list.push({
key: i.toString(),
title: `content${i + 1}`,
disabled: i % 3 < 1
});
}

[2, 3].forEach(idx => (this.list[idx].direction = 'right'));
}

select(ret: {}): void {
console.log('nzSelectChange', ret);
}

change(ret: {}): void {
console.log('nzChange', ret);
}
}
2 changes: 1 addition & 1 deletion components/transfer/demo/search.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 1
order: 2
title:
zh-CN: 带搜索框
en-US: Search
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/demo/status.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 7
order: 11
title:
zh-CN: 自定义状态
en-US: Status
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/demo/table-transfer.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 5
order: 8
title:
zh-CN: 表格穿梭框
en-US: Table Transfer
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/demo/tree-transfer.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 6
order: 9
title:
zh-CN: 树穿梭框
en-US: Tree Transfer
Expand Down
3 changes: 2 additions & 1 deletion components/transfer/doc/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
### nz-transfer:standalone

| Property | Description | Type | Default |
| ----------------------- |-----------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------ |-----------------------|
|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------ |-----------------------|
| `[nzDataSource]` | Used for setting the data source. Except for the elements whose keys are `direction: 'right'` prop, or using `nzTargetKeys` prop. | `TransferItem[]` | `[]` |
| `[nzDisabled]` | Whether the transfer is disabled | `boolean` | `false` |
| `[nzTitles]` | A set of titles that are sorted from left to right. | `string[]` | `['', '']` |
Expand All @@ -42,6 +42,7 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
| `[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[]>` | - |
| `[nzSelectedKeys]` | A set of keys of selected items. | `string[]` | - |
| `[nzTargetKeys]` | A set of keys of elements that are listed on the right column. | `string[]` | - |
| `[nzOneWay]` | Display as single direction style | `boolean` | `false` |
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
| `(nzChange)` | A callback function that is executed when the transfer between columns is complete. | `EventEmitter<TransferChange>` | - |
| `(nzSearchChange)` | A callback function which is executed when search field are changed | `EventEmitter<TransferSearchChange>` | - |
Expand Down
49 changes: 25 additions & 24 deletions components/transfer/doc/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,30 +24,31 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';

### nz-transfer:standalone

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

#### TransferItem

Expand Down
Loading

0 comments on commit 0577a85

Please sign in to comment.