diff --git a/.changeset/clever-monkeys-speak.md b/.changeset/clever-monkeys-speak.md new file mode 100644 index 000000000..541cde5b0 --- /dev/null +++ b/.changeset/clever-monkeys-speak.md @@ -0,0 +1,6 @@ +--- +"@hi-ui/hiui": minor +--- + +feat(select): Add searchOnInit api +feat(check-select): Add searchOnInit api diff --git a/.changeset/rude-ways-look.md b/.changeset/rude-ways-look.md new file mode 100644 index 000000000..dec82e2c1 --- /dev/null +++ b/.changeset/rude-ways-look.md @@ -0,0 +1,7 @@ +--- +"@hi-ui/use-search-mode": minor +"@hi-ui/check-select": minor +"@hi-ui/select": minor +--- + +feat: Add searchOnInit api diff --git a/packages/hooks/use-search-mode/src/index.ts b/packages/hooks/use-search-mode/src/index.ts index 14009d5ed..891b7902d 100644 --- a/packages/hooks/use-search-mode/src/index.ts +++ b/packages/hooks/use-search-mode/src/index.ts @@ -20,6 +20,7 @@ export const useSearchMode = ({ searchable: searchableProp, strategies, keyword: keywordProp, + searchOnInit, }: UseSearchModeProps) => { const [keyword, setKeyword] = useUncontrolledState('', keywordProp) @@ -43,11 +44,11 @@ export const useSearchMode = ({ const runSearch = useCallback( (keyword: string) => { if (!searchable) return - if (keyword && runSearchStrategy) { + if ((keyword || searchOnInit) && runSearchStrategy) { runSearchStrategy(keyword, setStateInSearch) } }, - [searchable, runSearchStrategy] + [searchable, searchOnInit, runSearchStrategy] ) const onSearch = useCallback( @@ -69,7 +70,7 @@ export const useSearchMode = ({ runSearch(keywordLatestRef.current) }, [keywordLatestRef, runSearch]) - const inSearch = !!keyword + const inSearch = !!keyword || searchOnInit const isEmpty = inSearch && stateInSearch.data.length === 0 return { @@ -108,6 +109,10 @@ export interface UseSearchModeProps { * 异步加载数据 */ dataSource?: UseDataSource + /** + * 初始化时执行一次搜索,仅在 dataSource 不为空时有效 + */ + searchOnInit?: boolean // DataSourceFun | TreeSelectDataSource | Promise strategies: any[] } diff --git a/packages/ui/check-select/src/CheckSelect.tsx b/packages/ui/check-select/src/CheckSelect.tsx index 5a36b991f..d50da765d 100644 --- a/packages/ui/check-select/src/CheckSelect.tsx +++ b/packages/ui/check-select/src/CheckSelect.tsx @@ -67,6 +67,7 @@ export const CheckSelect = forwardRef( invalid, // search dataSource, + searchOnInit, filterOption, searchable: searchableProp, render: titleRender, @@ -144,6 +145,7 @@ export const CheckSelect = forwardRef( searchable: searchableProp, keyword: keywordProp, strategies: [dataSourceStrategy, customSearchStrategy, filterSearchStrategy], + searchOnInit, }) // 拦截 titleRender,自定义高亮展示 @@ -170,7 +172,7 @@ export const CheckSelect = forwardRef( [titleRender, searchValue, searchMode] ) - const shouldUseSearch = !!searchValue && !hasError + const shouldUseSearch = (!!searchValue || searchOnInit) && !hasError const showData = useMemo(() => { return shouldUseSearch ? stateInSearch.data : flattedData }, [shouldUseSearch, flattedData, stateInSearch.data]) @@ -461,6 +463,10 @@ export interface CheckSelectProps * 异步加载数据 */ dataSource?: UseDataSource + /** + * 初始化时执行一次搜索,仅在 dataSource 不为空时有效 + */ + searchOnInit?: boolean /** * 自定义下拉菜单底部渲染 */ diff --git a/packages/ui/check-select/stories/data-source.stories.tsx b/packages/ui/check-select/stories/data-source.stories.tsx index 6fac6c253..cdddfaa97 100644 --- a/packages/ui/check-select/stories/data-source.stories.tsx +++ b/packages/ui/check-select/stories/data-source.stories.tsx @@ -35,6 +35,7 @@ export const DataSource = () => { // searchPlaceholder="请输入搜索内容" data={data} onChange={console.log} + // searchOnInit dataSource={(keyword) => { console.log('DataSource', keyword) const url = diff --git a/packages/ui/select/src/Select.tsx b/packages/ui/select/src/Select.tsx index dec864c72..673478d61 100644 --- a/packages/ui/select/src/Select.tsx +++ b/packages/ui/select/src/Select.tsx @@ -61,6 +61,7 @@ export const Select = forwardRef( searchable: searchableProp, keyword: keywordProp, dataSource, + searchOnInit, filterOption, // popper visible, @@ -132,6 +133,7 @@ export const Select = forwardRef( searchable: searchableProp, keyword: keywordProp, strategies: [dataSourceStrategy, customSearchStrategy, filterSearchStrategy], + searchOnInit, }) // 拦截 titleRender,自定义高亮展示 @@ -380,6 +382,10 @@ export interface SelectProps * 异步加载数据 */ dataSource?: UseDataSource + /** + * 初始化时执行一次搜索,仅在 dataSource 不为空时有效 + */ + searchOnInit?: boolean /** * 搜索时触发 */ diff --git a/packages/ui/select/stories/data-source.stories.tsx b/packages/ui/select/stories/data-source.stories.tsx index 1dfeb9b23..56ab2ab2d 100644 --- a/packages/ui/select/stories/data-source.stories.tsx +++ b/packages/ui/select/stories/data-source.stories.tsx @@ -35,6 +35,7 @@ export const DataSource = () => { // searchPlaceholder="请输入搜索内容" data={data} onChange={console.log} + // searchOnInit dataSource={(keyword) => { console.log('DataSource', keyword) const url =