feat: AutoComplete support customize clear button (#43745)

* feat: AutoCOmplete support customize clear button * feat: update snapshots * feat: update snapshots * feat: reset prettier format * feat: reset prettier format
2024-11-30 02:59:04 +08:00 · 2023-07-25 10:00:23 +08:00 · 2023-07-25 10:00:23 +08:00 · b4035b09b1
commit b4035b09b1
parent 5112817296
7 changed files with 215 additions and 5 deletions
--- a/components/auto-complete/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/auto-complete/tests/snapshots/demo-extend.test.ts.snap
@ -1,5 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`renders components/auto-complete/demo/allowClear.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
+    style="width: 200px;"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-activedescendant="rc_select_TEST_OR_SSR_list_-1"
+          aria-autocomplete="list"
+          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="rc_select_TEST_OR_SSR_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          id="rc_select_TEST_OR_SSR"
+          role="combobox"
+          type="search"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        UnClearable
+      </span>
+    </div>
+    <div
+      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+    >
+      <div>
+        <div
+          class="ant-select-item-empty"
+          id="rc_select_TEST_OR_SSR_list"
+          role="listbox"
+        />
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-select ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search"
+    style="width: 200px;"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-activedescendant="rc_select_TEST_OR_SSR_list_-1"
+          aria-autocomplete="list"
+          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="rc_select_TEST_OR_SSR_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          id="rc_select_TEST_OR_SSR"
+          role="combobox"
+          type="search"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        Customized clear icon
+      </span>
+    </div>
+    <div
+      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+    >
+      <div>
+        <div
+          class="ant-select-item-empty"
+          id="rc_select_TEST_OR_SSR_list"
+          role="listbox"
+        />
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/auto-complete/demo/basic.tsx extend context correctly 1`] = `
 Array [
  <div
--- a/components/auto-complete/tests/snapshots/demo.test.ts.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.ts.snap
@ -1,5 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`renders components/auto-complete/demo/allowClear.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
+    style="width:200px"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          role="combobox"
+          type="search"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        UnClearable
+      </span>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-select ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search"
+    style="width:200px"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          role="combobox"
+          type="search"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        Customized clear icon
+      </span>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/auto-complete/demo/basic.tsx correctly 1`] = `
 Array [
  <div
--- a/components/auto-complete/demo/allowClear.md
+++ b/components/auto-complete/demo/allowClear.md
@ -0,0 +1,7 @@
+## zh-CN
+
+自定义清除按钮
+
+## en-US
+
+Customize clear button
--- a/components/auto-complete/demo/allowClear.tsx
+++ b/components/auto-complete/demo/allowClear.tsx
@ -0,0 +1,37 @@
+import { CloseSquareFilled } from '@ant-design/icons';
+import { AutoComplete } from 'antd';
+import React, { useState } from 'react';
+
+const mockVal = (str: string, repeat = 1) => ({
+  value: str.repeat(repeat),
+});
+
+const App: React.FC = () => {
+  const [options, setOptions] = useState<{ value: string }[]>([]);
+
+  const getPanelValue = (searchText: string) =>
+    !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
+
+  return (
+    <>
+      <AutoComplete
+        options={options}
+        style={{ width: 200 }}
+        onSearch={(text) => setOptions(getPanelValue(text))}
+        placeholder="UnClearable"
+        allowClear={false}
+      />
+      <br />
+      <br />
+      <AutoComplete
+        options={options}
+        style={{ width: 200 }}
+        onSearch={(text) => setOptions(getPanelValue(text))}
+        placeholder="Customized clear icon"
+        allowClear={{ clearIcon: <CloseSquareFilled /> }}
+      />
+    </>
+  );
+};
+
+export default App;
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -33,6 +33,7 @@ The differences with Select are:
 <code src="./demo/uncertain-category.tsx">Lookup-Patterns - Uncertain Category</code>
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/borderless.tsx">Borderless</code>
+<code src="./demo/allowClear.tsx">Customize clear button</code>
 <code src="./demo/form-debug.tsx" debug>Debug in Form</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>

@ -40,7 +41,7 @@ The differences with Select are:

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| allowClear | Show clear button | boolean | false |  |
+| allowClear | Show clear button, 5.8.0: `{ clearIcon?: ReactNode }` | boolean \| { clearIcon?: ReactNode } | false |  |
 | autoFocus | If get focus when component mounted | boolean | false |  |
 | backfill | If backfill selected item the input when using keyboard | boolean | false |  |
 | bordered | Whether has border style | boolean | true |  |
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -34,6 +34,7 @@ demo:
 <code src="./demo/uncertain-category.tsx">查询模式 - 不确定类目</code>
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/borderless.tsx">无边框</code>
+<code src="./demo/allowClear.tsx">自定义清除按钮</code>
 <code src="./demo/form-debug.tsx" debug>在 Form 中 Debug</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>

@ -41,7 +42,7 @@ demo:

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| allowClear | 支持清除 | boolean | false |  |
+| allowClear | 支持清除，5.8.0: `{ clearIcon?: ReactNode }` | boolean \| { clearIcon?: ReactNode } | false |  |
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
 | bordered | 是否有边框 | boolean | true |  |
--- a/package.json
+++ b/package.json
@ -122,7 +122,7 @@
    "copy-to-clipboard": "^3.2.0",
    "dayjs": "^1.11.1",
    "qrcode.react": "^3.1.0",
-    "rc-cascader": "~3.13.0",
+    "rc-cascader": "3.14.0",
    "rc-checkbox": "~3.1.0",
    "rc-collapse": "~3.7.0",
    "rc-dialog": "~9.1.0",
@ -142,7 +142,7 @@
    "rc-rate": "~2.12.0",
    "rc-resize-observer": "^1.2.0",
    "rc-segmented": "~2.2.0",
-    "rc-select": "~14.6.0",
+    "rc-select": "~14.7.0",
    "rc-slider": "~10.1.0",
    "rc-steps": "~6.0.1",
    "rc-switch": "~4.1.0",
@ -151,7 +151,7 @@
    "rc-textarea": "~1.3.3",
    "rc-tooltip": "~6.0.0",
    "rc-tree": "~5.7.6",
-    "rc-tree-select": "~5.10.0",
+    "rc-tree-select": "5.11.0",
    "rc-upload": "~4.3.0",
    "rc-util": "^5.32.0",
    "scroll-into-view-if-needed": "^3.0.3",