From 48095836d7b2bb5e3ce864e63a9d02a77df48da3 Mon Sep 17 00:00:00 2001 From: OriginRing Date: Wed, 28 Aug 2024 12:15:20 +0800 Subject: [PATCH] feat(module:transfer): use nzOneWay to make Transfer the one way style fix: #8643 --- components/transfer/demo/advanced.md | 2 +- components/transfer/demo/can-move.md | 2 +- components/transfer/demo/custom-item.md | 2 +- components/transfer/demo/one-way.md | 16 +++++ components/transfer/demo/one-way.ts | 46 +++++++++++++ components/transfer/demo/search.md | 2 +- components/transfer/demo/status.md | 2 +- components/transfer/demo/table-transfer.md | 2 +- components/transfer/demo/tree-transfer.md | 2 +- components/transfer/doc/index.en-US.md | 3 +- components/transfer/doc/index.zh-CN.md | 49 ++++++------- .../transfer/transfer-list.component.ts | 68 +++++++++++++++---- components/transfer/transfer.component.ts | 59 +++++++++------- components/transfer/transfer.spec.ts | 20 ++++++ 14 files changed, 204 insertions(+), 71 deletions(-) create mode 100644 components/transfer/demo/one-way.md create mode 100644 components/transfer/demo/one-way.ts diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md index 3e62263a94..77abfadf4f 100644 --- a/components/transfer/demo/advanced.md +++ b/components/transfer/demo/advanced.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 4 title: zh-CN: 高级用法 en-US: Advanced diff --git a/components/transfer/demo/can-move.md b/components/transfer/demo/can-move.md index e3a6a34ce6..a520272eb1 100644 --- a/components/transfer/demo/can-move.md +++ b/components/transfer/demo/can-move.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 6 debug: true title: zh-CN: 二次校验 diff --git a/components/transfer/demo/custom-item.md b/components/transfer/demo/custom-item.md index 1c167820e5..9a2219b267 100644 --- a/components/transfer/demo/custom-item.md +++ b/components/transfer/demo/custom-item.md @@ -1,5 +1,5 @@ --- -order: 3 +order: 5 title: zh-CN: 自定义渲染行数据 en-US: Custom datasource diff --git a/components/transfer/demo/one-way.md b/components/transfer/demo/one-way.md new file mode 100644 index 0000000000..23c1ad2518 --- /dev/null +++ b/components/transfer/demo/one-way.md @@ -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. + + diff --git a/components/transfer/demo/one-way.ts b/components/transfer/demo/one-way.ts new file mode 100644 index 0000000000..ad1b59d548 --- /dev/null +++ b/components/transfer/demo/one-way.ts @@ -0,0 +1,46 @@ +import { Component, OnInit } from '@angular/core'; + +import { TransferItem } from 'ng-zorro-antd/transfer'; + +@Component({ + selector: 'nz-demo-transfer-one-way', + template: ` + +
+ +
+
+ ` +}) +export class NzDemoTransferOneWayComponent 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); + } +} diff --git a/components/transfer/demo/search.md b/components/transfer/demo/search.md index 6df5aafb99..a55f4be357 100644 --- a/components/transfer/demo/search.md +++ b/components/transfer/demo/search.md @@ -1,5 +1,5 @@ --- -order: 1 +order: 2 title: zh-CN: 带搜索框 en-US: Search diff --git a/components/transfer/demo/status.md b/components/transfer/demo/status.md index 062e64098b..da84acdb34 100644 --- a/components/transfer/demo/status.md +++ b/components/transfer/demo/status.md @@ -1,5 +1,5 @@ --- -order: 7 +order: 11 title: zh-CN: 自定义状态 en-US: Status diff --git a/components/transfer/demo/table-transfer.md b/components/transfer/demo/table-transfer.md index d6583e48ee..63ef6ca475 100644 --- a/components/transfer/demo/table-transfer.md +++ b/components/transfer/demo/table-transfer.md @@ -1,5 +1,5 @@ --- -order: 5 +order: 8 title: zh-CN: 表格穿梭框 en-US: Table Transfer diff --git a/components/transfer/demo/tree-transfer.md b/components/transfer/demo/tree-transfer.md index 8593e5fd44..969fe1969c 100644 --- a/components/transfer/demo/tree-transfer.md +++ b/components/transfer/demo/tree-transfer.md @@ -1,5 +1,5 @@ --- -order: 6 +order: 9 title: zh-CN: 树穿梭框 en-US: Tree Transfer diff --git a/components/transfer/doc/index.en-US.md b/components/transfer/doc/index.en-US.md index e9efed5f3a..2224878166 100644 --- a/components/transfer/doc/index.en-US.md +++ b/components/transfer/doc/index.en-US.md @@ -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[]` | `['', '']` | @@ -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` | - | | `[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` | - | | `(nzSearchChange)` | A callback function which is executed when search field are changed | `EventEmitter` | - | diff --git a/components/transfer/doc/index.zh-CN.md b/components/transfer/doc/index.zh-CN.md index 7dc4d3d314..db539c1d22 100644 --- a/components/transfer/doc/index.zh-CN.md +++ b/components/transfer/doc/index.zh-CN.md @@ -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 \| null>` | `[null, null]` | -| `[nzRender]` | 每行数据渲染模板，见示例 | `TemplateRef` | - | -| `[nzFooter]` | 底部渲染模板，见示例 | `TemplateRef` | - | -| `[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` | - | -| `[nzSelectedKeys]` | 设置被选中的 key 集合 | `string[]` | - | -| `[nzTargetKeys]` | 显示在右侧框数据的 key 集合 | `string[]` | - | -| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | -| `(nzChange)` | 选项在两栏之间转移时的回调函数 | `EventEmitter` | - | -| `(nzSearchChange)` | 搜索框内容时改变时的回调函数 | `EventEmitter` | - | -| `(nzSelectChange)` | 选中项发生改变时的回调函数 | `EventEmitter` | - | +| 参数 | 说明 | 类型 | 默认值 | +|-------------------------|---------------------------------------------------------------------------------------------|--------------------------------------------------------|----------------| +| `[nzDataSource]` | 数据源，其中若数据属性 `direction: 'right'` 将会被渲染到右边一栏中或使用 `nzTargetKeys` | `TransferItem[]` | `[]` | +| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | +| `[nzTitles]` | 标题集合，顺序从左至右 | `string[]` | `['', '']` | +| `[nzOperations]` | 操作文案集合，顺序从下至上 | `string[]` | `['', '']` | +| `[nzListStyle]` | 两个穿梭框的自定义样式，等同 `ngStyle` | `object` | - | +| `[nzItemUnit]` | 单数单位 | `string` | `'项目'` | +| `[nzItemsUnit]` | 复数单位 | `string` | `'项目'` | +| `[nzRenderList]` | 自定义渲染列表，见示例 | `Array \| null>` | `[null, null]` | +| `[nzRender]` | 每行数据渲染模板，见示例 | `TemplateRef` | - | +| `[nzFooter]` | 底部渲染模板，见示例 | `TemplateRef` | - | +| `[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` | - | +| `[nzSelectedKeys]` | 设置被选中的 key 集合 | `string[]` | - | +| `[nzTargetKeys]` | 显示在右侧框数据的 key 集合 | `string[]` | - | +| `[nzOneWay]` | 展示为单向样式 | `boolean` | `false` | +| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | +| `(nzChange)` | 选项在两栏之间转移时的回调函数 | `EventEmitter` | - | +| `(nzSearchChange)` | 搜索框内容时改变时的回调函数 | `EventEmitter` | - | +| `(nzSelectChange)` | 选中项发生改变时的回调函数 | `EventEmitter` | - | #### TransferItem diff --git a/components/transfer/transfer-list.component.ts b/components/transfer/transfer-list.component.ts index 023a8728dc..7e97e62b24 100644 --- a/components/transfer/transfer-list.component.ts +++ b/components/transfer/transfer-list.component.ts @@ -24,8 +24,10 @@ import { import { Observable, fromEvent, merge } from 'rxjs'; import { startWith, switchMap } from 'rxjs/operators'; +import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzCheckboxComponent, NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { NzEmptyModule } from 'ng-zorro-antd/empty'; +import { NzIconModule } from 'ng-zorro-antd/icon'; import { RenderListContext, TransferDirection, TransferItem, TransferStat } from './interface'; import { NzTransferSearchComponent } from './transfer-search.component'; @@ -36,7 +38,7 @@ import { NzTransferSearchComponent } from './transfer-search.component'; preserveWhitespaces: false, template: `
- @if (showSelectAll) { + @if (showSelectAll && !oneWay) {