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:
bai.jingfeng 2024-03-25 21:34:08 +08:00 committed by sealday
parent 5134a3fce0
commit 4a295a216f
2 changed files with 32 additions and 20 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@hera/plugin-core", "name": "@hera/plugin-core",
"version": "1.6.0", "version": "1.6.1",
"displayName": "Hera platform", "displayName": "Hera platform",
"displayName.zh-CN": "赫拉平台", "displayName.zh-CN": "赫拉平台",
"description": "Hera platform as nocobase plugin.", "description": "Hera platform as nocobase plugin.",

View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react'; import React, { useState } from 'react';
import { AutoComplete as AntdAutoComplete } from 'antd'; import { AutoComplete as AntdAutoComplete } from 'antd';
import { connect, useFieldSchema } from '@formily/react'; import { connect, useFieldSchema } from '@formily/react';
import { useAPIClient } from '@nocobase/client'; import { useAPIClient } from '@nocobase/client';
@ -8,42 +8,54 @@ import { fuzzysearch } from '../../utils';
export const AutoComplete = connect((props) => { export const AutoComplete = connect((props) => {
const { fieldNames, params: fieldFilter } = props; const { fieldNames, params: fieldFilter } = props;
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const [defultValue, setDefultValue] = useState([]); const targetKey = fieldNames.value;
const api = useAPIClient(); const api = useAPIClient();
const [defultOptions, setDefultOptions] = useState([]);
const [options, setOptions] = 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 () => { useAsyncEffect(async () => {
const defultOptions = await api.request({ const {
data: { data: rawOptions },
} = await api.request({
url: fieldSchema['collectionName'] + ':list', url: fieldSchema['collectionName'] + ':list',
params: { params: {
pageSize: 99999, pageSize: 99999,
filter: fieldFilter ? { ...fieldFilter.filter } : {}, filter: fieldFilter ? { ...fieldFilter.filter } : {},
}, },
}); });
changLable(defultOptions?.data?.data); const targetOptions = getNoDuplicateTextOptions(rawOptions);
setDefultOptions(targetOptions);
setOptions(targetOptions);
}, [fieldFilter?.filter, fieldSchema['collectionName']]); }, [fieldFilter?.filter, fieldSchema['collectionName']]);
useEffect(() => { const onSearch = (value) => {
changLable(defultValue); // 在筛选项开头跟踪用户的原始输入值
}, [fieldNames?.label]); if (value) {
setOptions([
const changLable = (defultOptions) => { {
if (defultOptions) { [targetKey]: value,
const items = []; },
defultOptions.forEach((item) => { ...defultOptions,
if (!items.filter((option) => option[fieldNames.value] === item[fieldNames.value]).length) { ]);
items.push(item); } else {
} setOptions(defultOptions);
});
setDefultValue(items);
setOptions(items);
} }
}; };
return ( return (
<AntdAutoComplete <AntdAutoComplete
{...props} {...props}
options={options} options={options}
filterOption={(inputValue, option) => fuzzysearch(inputValue, option[fieldNames.value].toString())} filterOption={(inputValue, option) => fuzzysearch(inputValue, option[targetKey].toString())}
allowClear allowClear
onSearch={onSearch}
/> />
); );
}); });