feat(client): add filter option
This commit is contained in:
parent
4da82af4f7
commit
af3fbeb99b
packages/core/client/src/schema-component/antd/select
@ -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(
|
||||||
{
|
{
|
||||||
|
@ -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': {
|
||||||
|
Loading…
Reference in New Issue
Block a user