From 11d27afa4d9f956244b589f47ed5478d15d9e686 Mon Sep 17 00:00:00 2001 From: sunhao Date: Thu, 16 Jan 2025 15:52:21 +0800 Subject: [PATCH] * picker: support for clearing searchbox on select value from multi box. --- lib/picker/src/component/picker-menu.tsx | 11 +++++------ lib/picker/src/component/picker.tsx | 20 ++++++++++++++++++++ lib/picker/src/types/picker-menu-props.ts | 1 + lib/picker/src/types/picker-options.ts | 1 + 4 files changed, 27 insertions(+), 6 deletions(-) diff --git a/lib/picker/src/component/picker-menu.tsx b/lib/picker/src/component/picker-menu.tsx index 59174d826e..740d2da3c7 100644 --- a/lib/picker/src/component/picker-menu.tsx +++ b/lib/picker/src/component/picker-menu.tsx @@ -149,22 +149,21 @@ export class PickerMenu extends PickPop { if (Array.isArray(item.items) && item.items.every(x => this._disabledSet.has(x.value as string))) { return; } - const {multiple, onToggleValue, onSelect, togglePop, onDeselect} = this.props; + const {multiple, onPick} = this.props; if (multiple) { if (item.items) { const map = getValueMap(item.items as NestedItem[]); const values = [...map.values()].filter(x => !x.items && !this._disabledSet.has(x.value as string)).map(x => x.value as string); if ($(target).closest('.item').children('.item-inner.selected').length) { - onDeselect(values); + onPick({diselect: values}); } else { - onSelect(values); + onPick({select: values}); } } else { - onToggleValue(value); + onPick({toggle: value}); } } else { - onSelect(value); - togglePop(false, {search: ''}); + onPick({select: value}); } }; diff --git a/lib/picker/src/component/picker.tsx b/lib/picker/src/component/picker.tsx index afa38be622..9c135df10a 100644 --- a/lib/picker/src/component/picker.tsx +++ b/lib/picker/src/component/picker.tsx @@ -31,6 +31,7 @@ export class Picker { + const {toggle, select, diselect} = options; + if (toggle !== undefined) { + this.toggleValue(toggle); + } else if (select !== undefined) { + this.select(select); + } else if (diselect !== undefined) { + this.deselect(diselect); + } + if (this.props.multiple) { + if (this.props.clearSearchOnSelect && this.state.search?.length) { + this.focusSearch(''); + } + } else { + this.toggle(false, {search: ''} as S); + } + }; + protected _getPopProps(props: RenderableProps, state: Readonly): PickerMenuProps { return { ...super._getPopProps(props, state), @@ -370,6 +389,7 @@ export class Picker extends Pi exceedLimitHint?: string; picker?: Picker; + onPick: (options: {toggle?: string, select?: string | string[], diselect?: string | string[]}) => void; onSelect: (values: string | string[]) => void; onDeselect: (values: string | string[]) => void; onClear: () => void; diff --git a/lib/picker/src/types/picker-options.ts b/lib/picker/src/types/picker-options.ts index 033aa14c1c..f8a09163e0 100644 --- a/lib/picker/src/types/picker-options.ts +++ b/lib/picker/src/types/picker-options.ts @@ -29,6 +29,7 @@ export interface PickerOptions extends Pick searchHint?: string; hotkeys?: HotkeysSettings; caretClass?: ClassNameLike; + clearSearchOnSelect?: boolean; onDeselect?: (values: string | string[]) => false | void; onSelect?: (values: string | string[]) => false | void;