From af3fbeb99b9d2b80433bb25ec7c1158ae8addda6 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Fri, 4 Nov 2022 09:40:26 +0800
Subject: [PATCH] feat(client): add filter option

---
 .../schema-component/antd/select/Select.tsx   | 28 ++++++++++++++++---
 .../antd/select/demos/demo2.tsx               |  2 +-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/select/Select.tsx b/packages/core/client/src/schema-component/antd/select/Select.tsx
index 5932089d8..75aa2fa94 100644
--- a/packages/core/client/src/schema-component/antd/select/Select.tsx
+++ b/packages/core/client/src/schema-component/antd/select/Select.tsx
@@ -17,9 +17,11 @@ const ObjectSelect = (props: Props) => {
     if (isEmptyObject(v)) {
       return;
     }
-    const values = toArr(v).filter(item => item).map((val) => {
-      return typeof val === 'object' ? val[fieldNames.value] : val;
-    });
+    const values = toArr(v)
+      .filter((item) => item)
+      .map((val) => {
+        return typeof val === 'object' ? val[fieldNames.value] : val;
+      });
     const current = getCurrentOptions(values, options, fieldNames)?.map((val) => {
       return {
         label: val[fieldNames.label],
@@ -38,6 +40,13 @@ const ObjectSelect = (props: Props) => {
       labelInValue
       options={options}
       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) => {
         const current = getCurrentOptions(
           toArr(changed).map((v) => v.value),
@@ -62,7 +71,18 @@ export const Select = connect(
     if (objectValue) {
       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(
     {
diff --git a/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx
index 127a245f4..60406adf1 100644
--- a/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx
+++ b/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx
@@ -27,7 +27,7 @@ const schema = {
       'x-decorator': 'FormItem',
       'x-component': 'Select',
       'x-component-props': {
-        mode: 'tags',
+        mode: 'multiple',
       },
       enum: dataSource,
       'x-reactions': {