Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Nov 6, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
66942ad
feat(select): Add searchOnInit api (#3004)
zyprepare Sep 19, 2024
9adae0e
chore(use-search-mode): 完善searchOnInit代码
zyprepare Sep 24, 2024
d9a4cd2
chore: 修改变更记录文件
zyprepare Oct 9, 2024
0fdc12c
fix(check-select): 修复searchOnInit模式下初始化数据没显示问题
zyprepare Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/clever-monkeys-speak.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@hi-ui/hiui": minor
---

feat(select): Add searchOnInit api
feat(check-select): Add searchOnInit api
7 changes: 7 additions & 0 deletions .changeset/rude-ways-look.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@hi-ui/use-search-mode": minor
"@hi-ui/check-select": minor
"@hi-ui/select": minor
---

feat: Add searchOnInit api
11 changes: 8 additions & 3 deletions packages/hooks/use-search-mode/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export const useSearchMode = ({
searchable: searchableProp,
strategies,
keyword: keywordProp,
searchOnInit,
}: UseSearchModeProps) => {
const [keyword, setKeyword] = useUncontrolledState('', keywordProp)

Expand All @@ -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(
Expand All @@ -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 {
Expand Down Expand Up @@ -108,6 +109,10 @@ export interface UseSearchModeProps<T = any> {
* 异步加载数据
*/
dataSource?: UseDataSource<T>
/**
* 初始化时执行一次搜索，仅在 dataSource 不为空时有效
*/
searchOnInit?: boolean
// DataSourceFun | TreeSelectDataSource | Promise<TreeSelectDataItem[]>
strategies: any[]
}
Expand Down
8 changes: 7 additions & 1 deletion packages/ui/check-select/src/CheckSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
invalid,
// search
dataSource,
searchOnInit,
filterOption,
searchable: searchableProp,
render: titleRender,
Expand Down Expand Up @@ -144,6 +145,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
searchable: searchableProp,
keyword: keywordProp,
strategies: [dataSourceStrategy, customSearchStrategy, filterSearchStrategy],
searchOnInit,
})

// 拦截 titleRender，自定义高亮展示
Expand All @@ -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])
Expand Down Expand Up @@ -461,6 +463,10 @@ export interface CheckSelectProps
* 异步加载数据
*/
dataSource?: UseDataSource<CheckSelectMergedItem[]>
/**
* 初始化时执行一次搜索，仅在 dataSource 不为空时有效
*/
searchOnInit?: boolean
/**
* 自定义下拉菜单底部渲染
*/
Expand Down
1 change: 1 addition & 0 deletions packages/ui/check-select/stories/data-source.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const DataSource = () => {
// searchPlaceholder="请输入搜索内容"
data={data}
onChange={console.log}
// searchOnInit
dataSource={(keyword) => {
console.log('DataSource', keyword)
const url =
Expand Down
6 changes: 6 additions & 0 deletions packages/ui/select/src/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
searchable: searchableProp,
keyword: keywordProp,
dataSource,
searchOnInit,
filterOption,
// popper
visible,
Expand Down Expand Up @@ -132,6 +133,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
searchable: searchableProp,
keyword: keywordProp,
strategies: [dataSourceStrategy, customSearchStrategy, filterSearchStrategy],
searchOnInit,
})

// 拦截 titleRender，自定义高亮展示
Expand Down Expand Up @@ -380,6 +382,10 @@ export interface SelectProps
* 异步加载数据
*/
dataSource?: UseDataSource<SelectMergedItem[]>
/**
* 初始化时执行一次搜索，仅在 dataSource 不为空时有效
*/
searchOnInit?: boolean
/**
* 搜索时触发
*/
Expand Down
1 change: 1 addition & 0 deletions packages/ui/select/stories/data-source.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const DataSource = () => {
// searchPlaceholder="请输入搜索内容"
data={data}
onChange={console.log}
// searchOnInit
dataSource={(keyword) => {
console.log('DataSource', keyword)
const url =
Expand Down