feat:自定义筛选组件,优化用户输入跟踪,在筛选项顶部添加一个用户的原始输入 (#491)
Reviewed-on: daoyoucloud/tachycode#491 Co-authored-by: bai.jingfeng <bai.jingfeng@foxmail.com> Co-committed-by: bai.jingfeng <bai.jingfeng@foxmail.com>
This commit is contained in:
		
							parent
							
								
									5134a3fce0
								
							
						
					
					
						commit
						4a295a216f
					
				| @ -1,6 +1,6 @@ | ||||
| { | ||||
|   "name": "@hera/plugin-core", | ||||
|   "version": "1.6.0", | ||||
|   "version": "1.6.1", | ||||
|   "displayName": "Hera platform", | ||||
|   "displayName.zh-CN": "赫拉平台", | ||||
|   "description": "Hera platform as nocobase plugin.", | ||||
|  | ||||
| @ -1,4 +1,4 @@ | ||||
| import React, { useEffect, useState } from 'react'; | ||||
| import React, { useState } from 'react'; | ||||
| import { AutoComplete as AntdAutoComplete } from 'antd'; | ||||
| import { connect, useFieldSchema } from '@formily/react'; | ||||
| import { useAPIClient } from '@nocobase/client'; | ||||
| @ -8,42 +8,54 @@ import { fuzzysearch } from '../../utils'; | ||||
| export const AutoComplete = connect((props) => { | ||||
|   const { fieldNames, params: fieldFilter } = props; | ||||
|   const fieldSchema = useFieldSchema(); | ||||
|   const [defultValue, setDefultValue] = useState([]); | ||||
|   const targetKey = fieldNames.value; | ||||
|   const api = useAPIClient(); | ||||
|   const [defultOptions, setDefultOptions] = useState([]); | ||||
|   const [options, setOptions] = useState([]); | ||||
| 
 | ||||
|   const getNoDuplicateTextOptions = (rawOptions) => { | ||||
|     const targetOptions = rawOptions.filter((option, index, self) => { | ||||
|       return self.findIndex((item) => item[targetKey] === option[targetKey]) === index; | ||||
|     }); | ||||
|     return targetOptions; | ||||
|   }; | ||||
| 
 | ||||
|   useAsyncEffect(async () => { | ||||
|     const defultOptions = await api.request({ | ||||
|     const { | ||||
|       data: { data: rawOptions }, | ||||
|     } = await api.request({ | ||||
|       url: fieldSchema['collectionName'] + ':list', | ||||
|       params: { | ||||
|         pageSize: 99999, | ||||
|         filter: fieldFilter ? { ...fieldFilter.filter } : {}, | ||||
|       }, | ||||
|     }); | ||||
|     changLable(defultOptions?.data?.data); | ||||
|     const targetOptions = getNoDuplicateTextOptions(rawOptions); | ||||
|     setDefultOptions(targetOptions); | ||||
|     setOptions(targetOptions); | ||||
|   }, [fieldFilter?.filter, fieldSchema['collectionName']]); | ||||
| 
 | ||||
|   useEffect(() => { | ||||
|     changLable(defultValue); | ||||
|   }, [fieldNames?.label]); | ||||
| 
 | ||||
|   const changLable = (defultOptions) => { | ||||
|     if (defultOptions) { | ||||
|       const items = []; | ||||
|       defultOptions.forEach((item) => { | ||||
|         if (!items.filter((option) => option[fieldNames.value] === item[fieldNames.value]).length) { | ||||
|           items.push(item); | ||||
|         } | ||||
|       }); | ||||
|       setDefultValue(items); | ||||
|       setOptions(items); | ||||
|   const onSearch = (value) => { | ||||
|     // 在筛选项开头跟踪用户的原始输入值
 | ||||
|     if (value) { | ||||
|       setOptions([ | ||||
|         { | ||||
|           [targetKey]: value, | ||||
|         }, | ||||
|         ...defultOptions, | ||||
|       ]); | ||||
|     } else { | ||||
|       setOptions(defultOptions); | ||||
|     } | ||||
|   }; | ||||
| 
 | ||||
|   return ( | ||||
|     <AntdAutoComplete | ||||
|       {...props} | ||||
|       options={options} | ||||
|       filterOption={(inputValue, option) => fuzzysearch(inputValue, option[fieldNames.value].toString())} | ||||
|       filterOption={(inputValue, option) => fuzzysearch(inputValue, option[targetKey].toString())} | ||||
|       allowClear | ||||
|       onSearch={onSearch} | ||||
|     /> | ||||
|   ); | ||||
| }); | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user