From 4d82491c6024c194111eb2a261367174b0cb24cc Mon Sep 17 00:00:00 2001 From: xiamiao1121 <74885998+xiamiao1121@users.noreply.github.com> Date: Thu, 1 Aug 2024 09:47:59 +0800 Subject: [PATCH] =?UTF-8?q?feat(select):=20=E6=96=B0=E5=A2=9E=E5=B8=A6?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=83=85=E5=86=B5=E4=B8=8B=EF=BC=8C=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E5=8F=89=E5=8F=B7=E6=8C=89=E9=92=AE=E6=97=B6=E4=B8=8B?= =?UTF-8?q?=E6=8B=89=E6=A1=86=E5=90=8C=E6=97=B6=E6=B8=85=E7=A9=BA(#2945)?= =?UTF-8?q?=20(#2948)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(select): 新增带搜索情况下，点击叉号按钮时下拉框同时清空(#2945) * chore(select): 生成变更记录文件 * feat(select): 暴露onClear接口和searchValueProp传参 * chore(select): 删除无用console * chore: refactor code * chore: refactor code --------- Co-authored-by: xiamiao --- .changeset/healthy-needles-cheer.md | 5 +++++ .changeset/ten-countries-kick.md | 5 +++++ packages/ui/picker/src/Picker.tsx | 18 ++++++++++++++++-- packages/ui/select/src/Select.tsx | 15 +++++++++++++-- .../stories/search-controlled.stories.tsx | 3 +++ 5 files changed, 42 insertions(+), 4 deletions(-) create mode 100644 .changeset/healthy-needles-cheer.md create mode 100644 .changeset/ten-countries-kick.md diff --git a/.changeset/healthy-needles-cheer.md b/.changeset/healthy-needles-cheer.md new file mode 100644 index 000000000..1d9f07a0f --- /dev/null +++ b/.changeset/healthy-needles-cheer.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/select": minor +--- + +feat: 新增带搜索情况下，点击叉号按钮时下拉框同时清空 diff --git a/.changeset/ten-countries-kick.md b/.changeset/ten-countries-kick.md new file mode 100644 index 000000000..1910eb287 --- /dev/null +++ b/.changeset/ten-countries-kick.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(select): 新增带搜索情况下，点击叉号按钮时下拉框同时清空 diff --git a/packages/ui/picker/src/Picker.tsx b/packages/ui/picker/src/Picker.tsx index 0af79ec82..391709b33 100644 --- a/packages/ui/picker/src/Picker.tsx +++ b/packages/ui/picker/src/Picker.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useCallback, useState } from 'react' +import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react' import { cx, getPrefixCls } from '@hi-ui/classname' import { __DEV__ } from '@hi-ui/env' import { HiBaseHTMLFieldProps, useLocaleContext } from '@hi-ui/core' @@ -48,6 +48,7 @@ export const Picker = forwardRef( trigger, footer, onOverlayScroll, + innerRef, ...rest }, ref @@ -72,7 +73,6 @@ export const Picker = forwardRef( onSearch, Object.is ) - // const inSearch = searchable && !!searchValue // const isEmpty = inSearch && showEmpty const resetSearchOnClosed = keywordProp === undefined @@ -141,6 +141,12 @@ export const Picker = forwardRef( const cls = cx(prefixCls, className, `${prefixCls}--${menuVisible ? 'open' : 'closed'}`) + useImperativeHandle(innerRef, () => ({ + resetSearch: () => { + resetSearchOnClosed && resetSearch() + }, + })) + return (
( } ) +export interface PickerHelper { + resetSearch: () => void +} + export interface PickerProps extends HiBaseHTMLFieldProps<'div'> { /** * 是否禁用 @@ -304,6 +314,10 @@ export interface PickerProps extends HiBaseHTMLFieldProps<'div'> { * 开启内容区域可滚动 */ scrollable?: boolean + /** + * 提供辅助方法的内部引用 + */ + innerRef?: React.Ref } if (__DEV__) { diff --git a/packages/ui/select/src/Select.tsx b/packages/ui/select/src/Select.tsx index faa4b3de9..1183c5a28 100644 --- a/packages/ui/select/src/Select.tsx +++ b/packages/ui/select/src/Select.tsx @@ -16,7 +16,7 @@ import { useLatestCallback } from '@hi-ui/use-latest' import VirtualList, { useCheckInVirtual } from '@hi-ui/virtual-list' import type { ListRef } from 'rc-virtual-list' import { isArrayNonEmpty, isUndef } from '@hi-ui/type-assertion' -import { Picker, PickerProps } from '@hi-ui/picker' +import { Picker, PickerProps, PickerHelper } from '@hi-ui/picker' import { Highlighter } from '@hi-ui/highlighter' import { UseDataSource } from '@hi-ui/use-data-source' import { @@ -77,13 +77,14 @@ export const Select = forwardRef( onSelect: onSelectProp, onSearch: onSearchProp, onKeyDown: onKeyDownProp, + onClear: onClearProp, customRender, ...rest }, ref ) => { const i18n = useLocaleContext() - + const innerRef = useRef() const placeholder = isUndef(placeholderProp) ? i18n.get('select.placeholder') : placeholderProp const [menuVisible, menuVisibleAction] = useUncontrolledToggle({ @@ -228,6 +229,7 @@ export const Select = forwardRef( ( value={value} onChange={(value, item) => { tryChangeValue(value, item.raw) + // 非受控模式下清空下拉框 + if (value === '') { + innerRef.current?.resetSearch() + onClearProp?.() + } }} size={size} data={mergedData} @@ -377,6 +384,10 @@ export interface SelectProps * 搜索时触发 */ onSearch?: (keyword: string) => void + /** + * 点击关闭按钮时触发 + */ + onClear?: () => void /** * 设置大小 */ diff --git a/packages/ui/select/stories/search-controlled.stories.tsx b/packages/ui/select/stories/search-controlled.stories.tsx index 292ae341f..3aba0fd2a 100644 --- a/packages/ui/select/stories/search-controlled.stories.tsx +++ b/packages/ui/select/stories/search-controlled.stories.tsx @@ -47,6 +47,9 @@ export const SearchControlled = () => { setKeyword(value) console.log('onSearch', value) }} + onClear={() => { + setKeyword('') + }} placeholder="请选择品类" searchPlaceholder="请输入搜索内容" data={data}