feat(select&check-select): Add searchOnInit api (#3004) (#3015)

* feat(select): Add searchOnInit api (#3004) * chore(use-search-mode): 完善searchOnInit代码 * chore: 修改变更记录文件 * fix(check-select): 修复searchOnInit模式下初始化数据没显示问题
XiaoMi · Nov 6, 2024 · b2d784b · b2d784b
1 parent f807f7d
commit b2d784b
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 4 deletions.
diff --git a/.changeset/clever-monkeys-speak.md 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
@@ -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
@@ -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<T = any> {
    * 异步加载数据
    */
   dataSource?: UseDataSource<T>
+  /**
+   * 初始化时执行一次搜索，仅在 dataSource 不为空时有效
+   */
+  searchOnInit?: boolean
   //  DataSourceFun | TreeSelectDataSource | Promise<TreeSelectDataItem[]>
   strategies: any[]
 }

diff --git a/packages/ui/check-select/src/CheckSelect.tsx b/packages/ui/check-select/src/CheckSelect.tsx
@@ -67,6 +67,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
       invalid,
       // search
       dataSource,
+      searchOnInit,
       filterOption,
       searchable: searchableProp,
       render: titleRender,
@@ -144,6 +145,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
       searchable: searchableProp,
       keyword: keywordProp,
       strategies: [dataSourceStrategy, customSearchStrategy, filterSearchStrategy],
+      searchOnInit,
     })
 
     // 拦截 titleRender，自定义高亮展示
@@ -170,7 +172,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
       [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<CheckSelectMergedItem[]>
+  /**
+   * 初始化时执行一次搜索，仅在 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
@@ -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
@@ -61,6 +61,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
       searchable: searchableProp,
       keyword: keywordProp,
       dataSource,
+      searchOnInit,
       filterOption,
       // popper
       visible,
@@ -132,6 +133,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
       searchable: searchableProp,
       keyword: keywordProp,
       strategies: [dataSourceStrategy, customSearchStrategy, filterSearchStrategy],
+      searchOnInit,
     })
 
     // 拦截 titleRender，自定义高亮展示
@@ -380,6 +382,10 @@ export interface SelectProps
    * 异步加载数据
    */
   dataSource?: UseDataSource<SelectMergedItem[]>
+  /**
+   * 初始化时执行一次搜索，仅在 dataSource 不为空时有效
+   */
+  searchOnInit?: boolean
   /**
    * 搜索时触发
    */

diff --git 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 =