feat(form:select,cascader,tree-select): default value when cleared (#…

…1844)
ng-alain · Nov 5, 2024 · 655806d · 655806d
1 parent 8f9e5c0
commit 655806d
Show file tree

Hide file tree

Showing 13 changed files with 28 additions and 7 deletions.
diff --git a/packages/form/src/widgets/select/index.en-US.md b/packages/form/src/widgets/select/index.en-US.md
@@ -26,6 +26,7 @@ Select.
 | `[placeholder]` | Placeholder | `string` | - |
 | `[autoClearSearchValue]` | Whether clear search box when an option is selected, only valid when `mode` is `multiple` or `tags`. | `boolean` | `true` |
 | `[allowClear]` | Allow clear | `boolean` | `false` |
+| `[clearValue]` | Default value when cleared | `any` | `undefined` |
 | `[borderless]` | Whether has border | `boolean` | `false` |
 | `[autoFocus]` | Focused by default | `boolean` | `false` |
 | `[dropdownClassName]` | className property of dropdown list | `string` | - |

diff --git a/packages/form/src/widgets/select/index.zh-CN.md b/packages/form/src/widgets/select/index.zh-CN.md
@@ -26,6 +26,7 @@ order: 6
 | `[placeholder]` | 在文字框中显示提示讯息 | `string` | - |
 | `[autoClearSearchValue]` | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效。 | `boolean` | `true` |
 | `[allowClear]` | 支持清除 | `boolean` | `false` |
+| `[clearValue]` | 清空时默认值 | `any` | `undefined` |
 | `[borderless]` | 是否无边框 | `boolean` | `false` |
 | `[autoFocus]` | 默认获取焦点 | `boolean` | `false` |
 | `[dropdownClassName]` | 下拉菜单的 className 属性 | `string` | - |

diff --git a/packages/form/src/widgets/select/schema.ts b/packages/form/src/widgets/select/schema.ts
@@ -132,6 +132,11 @@ export interface SFSelectWidgetSchema extends SFUISchemaItem {
    */
   clearIcon?: TemplateRef<NzSafeAny>;
 
+  /**
+   * 清空时默认值，默认：`undefined`
+   */
+  clearValue?: NzSafeAny;
+
   /**
    * 自定义当前选中的条目图标
    */

diff --git a/packages/form/src/widgets/select/select.widget.spec.ts b/packages/form/src/widgets/select/select.widget.spec.ts
@@ -140,8 +140,9 @@ describe('form: widget: select', () => {
           default: 1,
           ui: {
             widget,
-            allowClear: true
-          }
+            allowClear: true,
+            clearValue: 2
+          } as SFSelectWidgetSchema
         }
       }
     };
@@ -151,7 +152,7 @@ describe('form: widget: select', () => {
       .time()
       .typeEvent('click', '.ant-select-close-icon')
       .time()
-      .checkValue('/a', undefined)
+      .checkValue('/a', 2)
       .asyncEnd();
   }));
 

diff --git a/packages/form/src/widgets/select/select.widget.ts b/packages/form/src/widgets/select/select.widget.ts
@@ -161,7 +161,7 @@ export class SelectWidget extends ControlUIWidget<SFSelectWidgetSchema> implemen
     if (this.ui.change) {
       this.ui.change(values, this.getOrgData(values));
     }
-    this.setValue(values == null ? undefined : values);
+    this.setValue(values == null ? this.ui.clearValue : values);
   }
 
   private getOrgData(values: SFValue): SFSchemaEnum | SFSchemaEnum[] {

diff --git a/packages/form/widgets/cascader/index.en-US.md b/packages/form/widgets/cascader/index.en-US.md
@@ -42,6 +42,7 @@ Every select triggers a HTTP request, data source is from `asyncData`; includes
 | `[placeholder]` | Placeholder | `string` | - |
 | `[showSearch]` | Whether support search | `bool` | `false` |
 | `[allowClear]` | Whether show clear button | `bool` | `true` |
+| `[clearValue]` | Default value when cleared | `any` | `undefined` |
 | `[clearText]` | Title of clear button | `string` | `清除` |
 | `[showArrow]` | Whether show arrow | `bool` | `true` |
 | `[showInput]` | Whether show input | `bool` | `true` |

diff --git a/packages/form/widgets/cascader/index.zh-CN.md b/packages/form/widgets/cascader/index.zh-CN.md
@@ -42,6 +42,7 @@ type: Non-built-in widgets
 | `[placeholder]` | 在文字框中显示提示讯息 | `string` | - |
 | `[showSearch]` | 是否支持搜索 | `bool` | `false` |
 | `[allowClear]` | 是否显示清除按钮 | `bool` | `true` |
+| `[clearValue]` | 清空时默认值 | `any` | `undefined` |
 | `[clearText]` | 清除按钮的标题 | `string` | `清除` |
 | `[showArrow]` | 是否显示箭头 | `bool` | `true` |
 | `[showInput]` | 是否显示输入框 | `bool` | `true` |

diff --git a/packages/form/widgets/cascader/schema.ts b/packages/form/widgets/cascader/schema.ts
@@ -24,6 +24,11 @@ export interface SFCascaderWidgetSchema extends SFUISchemaItem {
    */
   allowClear?: boolean;
 
+  /**
+   * 清空时默认值，默认：`undefined`
+   */
+  clearValue?: NzSafeAny;
+
   /**
    * 清除按钮的标题，默认：`清除`
    */

diff --git a/packages/form/widgets/cascader/widget.ts b/packages/form/widgets/cascader/widget.ts
@@ -83,7 +83,7 @@ export class CascaderWidget extends ControlUIWidget<SFCascaderWidgetSchema> impl
   }
 
   _change(value: NzSafeAny[] | null): void {
-    this.setValue(value);
+    this.setValue(value == null ? this.ui.clearValue : value);
     if (this.ui.change) {
       this.ui.change(value);
     }

diff --git a/packages/form/widgets/tree-select/index.en-US.md b/packages/form/widgets/tree-select/index.en-US.md
@@ -32,6 +32,7 @@ Non-built-in modules need to additionally register `withTreeSelectWidget` in [js
 | `[placeholder]` | Placeholder | `string` | - |
 | `[notFoundContent]` | Text to display when a column is empty | `string` | - |
 | `[allowClear]` | Whether show clear button | `boolean` | `false` |
+| `[clearValue]` | Default value when cleared | `any` | `undefined` |
 | `[dropdownMatchSelectWidth]` | Determine whether the dropdown menu and the select input are the same width | `boolean` | `true` |
 | `[dropdownStyle]` | Set the style of the dropdown menu | `object` | - |
 | `[dropdownClassName]` | Set className of the dropdown menu | `string` | - |

diff --git a/packages/form/widgets/tree-select/index.zh-CN.md b/packages/form/widgets/tree-select/index.zh-CN.md
@@ -32,6 +32,7 @@ type: Non-built-in widgets
 | `[placeholder]` | 在文字框中显示提示讯息 | `string` | - |
 | `[notFoundContent]` | 当下拉列表为空时显示的内容 | `string` | - |
 | `[allowClear]` | 支持清除 | `boolean` | `false` |
+| `[clearValue]` | 清空时默认值 | `any` | `undefined` |
 | `[dropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` |
 | `[dropdownStyle]` | 下拉菜单的 style 属性 | `object` | - |
 | `[dropdownClassName]` | 下拉菜单的 className 属性 | `string` | - |

diff --git a/packages/form/widgets/tree-select/schema.ts b/packages/form/widgets/tree-select/schema.ts
@@ -20,6 +20,11 @@ export interface SFTreeSelectWidgetSchema extends SFUISchemaItem {
    */
   allowClear?: boolean;
 
+  /**
+   * 清空时默认值，默认：`undefined`
+   */
+  clearValue?: NzSafeAny;
+
   /**
    * 下拉菜单和选择器同宽，默认：`true`
    */

diff --git a/packages/form/widgets/tree-select/widget.ts b/packages/form/widgets/tree-select/widget.ts
@@ -92,9 +92,8 @@ export class TreeSelectWidget extends ControlUIWidget<SFTreeSelectWidgetSchema>
   }
 
   change(value: NzSafeAny[] | NzSafeAny): void {
-    console.log(value);
     if (this.ui.change) this.ui.change(value);
-    this.setValue(value);
+    this.setValue(value == null ? this.ui.clearValue : value);
   }
 
   expandChange(e: NzFormatEmitEvent): void {