feat(client): add filter option

This commit is contained in:
chenos 2022-11-04 09:40:26 +08:00
parent 4da82af4f7
commit af3fbeb99b
2 changed files with 25 additions and 5 deletions
packages/core/client/src/schema-component/antd/select

View File

@ -17,9 +17,11 @@ const ObjectSelect = (props: Props) => {
if (isEmptyObject(v)) { if (isEmptyObject(v)) {
return; return;
} }
const values = toArr(v).filter(item => item).map((val) => { const values = toArr(v)
return typeof val === 'object' ? val[fieldNames.value] : val; .filter((item) => item)
}); .map((val) => {
return typeof val === 'object' ? val[fieldNames.value] : val;
});
const current = getCurrentOptions(values, options, fieldNames)?.map((val) => { const current = getCurrentOptions(values, options, fieldNames)?.map((val) => {
return { return {
label: val[fieldNames.label], label: val[fieldNames.label],
@ -38,6 +40,13 @@ const ObjectSelect = (props: Props) => {
labelInValue labelInValue
options={options} options={options}
fieldNames={fieldNames} fieldNames={fieldNames}
showSearch
filterOption={(input, option) => (option?.[fieldNames.label || 'label'] ?? '').includes(input)}
filterSort={(optionA, optionB) =>
(optionA?.[fieldNames.label || 'label'] ?? '')
.toLowerCase()
.localeCompare((optionB?.[fieldNames.label || 'label'] ?? '').toLowerCase())
}
onChange={(changed) => { onChange={(changed) => {
const current = getCurrentOptions( const current = getCurrentOptions(
toArr(changed).map((v) => v.value), toArr(changed).map((v) => v.value),
@ -62,7 +71,18 @@ export const Select = connect(
if (objectValue) { if (objectValue) {
return <ObjectSelect {...others} />; return <ObjectSelect {...others} />;
} }
return <AntdSelect {...others} value={others.value || undefined}/>; return (
<AntdSelect
showSearch
filterOption={(input, option) => (option?.label ?? '').includes(input)}
filterSort={(optionA, optionB) =>
(optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
}
allowClear
{...others}
value={others.value || undefined}
/>
);
}, },
mapProps( mapProps(
{ {

View File

@ -27,7 +27,7 @@ const schema = {
'x-decorator': 'FormItem', 'x-decorator': 'FormItem',
'x-component': 'Select', 'x-component': 'Select',
'x-component-props': { 'x-component-props': {
mode: 'tags', mode: 'multiple',
}, },
enum: dataSource, enum: dataSource,
'x-reactions': { 'x-reactions': {