fix: rename inputIcon

react-component · Jul 3, 2023 · a30c78b · a30c78b
1 parent 77aa29b
commit a30c78b
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,12 @@
 
 React Select
 
-[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url]
+[![NPM version][npm-image]][npm-url]
+[![npm download][download-image]][download-url]
+[![build status][github-actions-image]][github-actions-url]
+[![Codecov][codecov-image]][codecov-url]
+[![bundle size][bundlephobia-image]][bundlephobia-url]
+[![dumi][dumi-image]][dumi-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-select.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-select
@@ -113,7 +118,7 @@ export default () => (
 | showAction | actions trigger the dropdown to show | String[]? | - |
 | autoFocus | focus select after mount | Bool | - |
 | autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
-| inputIcon | specify the select arrow icon | ReactNode | - |
+| suffixIcon | specify the select arrow icon | ReactNode | - |
 | clearIcon | specify the clear icon | ReactNode | - |
 | removeIcon | specify the remove icon | ReactNode | - |
 | menuItemSelectedIcon | specify the item selected icon | ReactNode \| (props: MenuItemProps) => ReactNode | - |

diff --git a/docs/examples/custom-icon.tsx b/docs/examples/custom-icon.tsx
@@ -102,7 +102,7 @@ class CustomIconComponent extends React.Component {
             value={value}
             mode="combobox"
             backfill
-            inputIcon={({ searchValue }) => {
+            suffixIcon={({ searchValue }) => {
               if (searchValue) {
                 return '😺';
               }
@@ -192,7 +192,7 @@ class Test extends React.Component {
             onChange={this.onChange}
             onFocus={() => console.log('focus')}
             tokenSeparators={[' ', ',']}
-            inputIcon={getSvg(arrowPath)}
+            suffixIcon={getSvg(arrowPath)}
             clearIcon={getSvg(clearPath)}
             removeIcon={getSvg(clearPath)}
             menuItemSelectedIcon={menuItemSelectedIcon}

diff --git a/docs/examples/multiple.tsx b/docs/examples/multiple.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
-import React from 'react';
 import Select, { Option } from 'rc-select';
+import React from 'react';
 import '../../assets/index.less';
 
 const children = [];
@@ -15,10 +15,10 @@ for (let i = 10; i < 36; i += 1) {
 class Test extends React.Component {
   state = {
     useAnim: false,
-    inputIcon: null,
+    suffixIcon: null,
     loading: false,
     value: ['a10'],
-    searchValue: "",
+    searchValue: '',
   };
 
   onChange = (value, options) => {
@@ -36,32 +36,32 @@ class Test extends React.Component {
     console.log(args);
   };
 
-  useAnim = e => {
+  useAnim = (e) => {
     this.setState({
       useAnim: e.target.checked,
     });
   };
 
-  showArrow = e => {
+  showArrow = (e) => {
     this.setState({
-      inputIcon: e.target.checked ? <div>arrow</div> : null,
+      suffixIcon: e.target.checked ? <div>arrow</div> : null,
     });
   };
 
-  loading = e => {
+  loading = (e) => {
     this.setState({
       loading: e.target.checked,
     });
   };
 
-  setSearchValue = val => {
+  setSearchValue = (val) => {
     this.setState({
       searchValue: val,
-    })
-  }
+    });
+  };
 
   render() {
-    const { useAnim, loading, value, inputIcon } = this.state;
+    const { useAnim, loading, value, suffixIcon } = this.state;
     return (
       <div>
         <h2>multiple select（scroll the menu）</h2>
@@ -74,7 +74,12 @@ class Test extends React.Component {
           <p />
           <label htmlFor="showArrow">
             showArrow
-            <input id="showArrow" checked={!!inputIcon} type="checkbox" onChange={this.showArrow} />
+            <input
+              id="showArrow"
+              checked={!!suffixIcon}
+              type="checkbox"
+              onChange={this.showArrow}
+            />
           </label>
         </p>
         <p>
@@ -93,7 +98,7 @@ class Test extends React.Component {
             style={{ width: 500 }}
             mode="multiple"
             loading={loading}
-            inputIcon={inputIcon}
+            suffixIcon={suffixIcon}
             allowClear
             optionFilterProp="children"
             optionLabelProp="children"
@@ -102,33 +107,32 @@ class Test extends React.Component {
             placeholder="please select"
             onChange={this.onChange}
             onFocus={() => console.log('focus')}
-            onBlur={v => console.log('blur', v)}
+            onBlur={(v) => console.log('blur', v)}
             tokenSeparators={[' ', ',']}
           >
             {children}
           </Select>
         </div>
 
-
         <h2>multiple select with autoClearSearchValue = false</h2>
         <div style={{ width: 300 }}>
           <Select
-              value={value}
-              style={{ width: 500 }}
-              mode="multiple"
-              autoClearSearchValue={false}
-              showSearch={true}
-              searchValue={this.state.searchValue}
-              onSearch={this.setSearchValue}
-              optionFilterProp="children"
-              optionLabelProp="children"
-              onSelect={this.onSelect}
-              onDeselect={this.onDeselect}
-              placeholder="please select"
-              onChange={this.onChange}
-              onFocus={() => console.log('focus')}
-              onBlur={v => console.log('blur', v)}
-              tokenSeparators={[' ', ',']}
+            value={value}
+            style={{ width: 500 }}
+            mode="multiple"
+            autoClearSearchValue={false}
+            showSearch={true}
+            searchValue={this.state.searchValue}
+            onSearch={this.setSearchValue}
+            optionFilterProp="children"
+            optionLabelProp="children"
+            onSelect={this.onSelect}
+            onDeselect={this.onDeselect}
+            placeholder="please select"
+            onChange={this.onChange}
+            onFocus={() => console.log('focus')}
+            onBlur={(v) => console.log('blur', v)}
+            tokenSeparators={[' ', ',']}
           >
             {children}
           </Select>

diff --git a/docs/examples/suggest.tsx b/docs/examples/suggest.tsx
@@ -59,7 +59,7 @@ class Test extends React.Component {
             placeholder="placeholder"
             defaultActiveFirstOption={false}
             getInputElement={() => <Input className="custom-input" />}
-            inputIcon={null}
+            suffixIcon={null}
             notFoundContent=""
             onChange={this.fetchData}
             onSelect={this.onSelect}

diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx
@@ -169,7 +169,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
 
   // >>> Icons
   allowClear?: boolean;
-  inputIcon?: RenderNode;
+  suffixIcon?: RenderNode;
   /** Clear all icon */
   clearIcon?: RenderNode;
   /** Selector remove icon */
@@ -254,7 +254,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
 
     // Icons
     allowClear,
-    inputIcon,
+    suffixIcon,
     clearIcon,
 
     // Dropdown
@@ -674,7 +674,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
   // ==================================================================
 
   // ============================= Arrow ==============================
-  const showInputIcon = !!inputIcon || loading || (!multiple && mode !== 'combobox');
+  const showInputIcon = !!suffixIcon || loading;
   let arrowNode: React.ReactNode;
 
   if (showInputIcon) {
@@ -683,7 +683,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
         className={classNames(`${prefixCls}-arrow`, {
           [`${prefixCls}-arrow-loading`]: loading,
         })}
-        customizeIcon={inputIcon}
+        customizeIcon={suffixIcon}
         customizeIconProps={{
           loading,
           searchValue: mergedSearchValue,

diff --git a/tests/Multiple.test.tsx b/tests/Multiple.test.tsx
@@ -1,23 +1,22 @@
 import { mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
-import React from 'react';
-import Select, { Option, OptGroup } from '../src';
-import focusTest from './shared/focusTest';
+import Select, { OptGroup, Option } from '../src';
+import allowClearTest from './shared/allowClearTest';
 import blurTest from './shared/blurTest';
-import hoverTest from './shared/hoverTest';
-import renderTest from './shared/renderTest';
-import removeSelectedTest from './shared/removeSelectedTest';
 import dynamicChildrenTest from './shared/dynamicChildrenTest';
+import focusTest from './shared/focusTest';
+import hoverTest from './shared/hoverTest';
 import inputFilterTest from './shared/inputFilterTest';
+import removeSelectedTest from './shared/removeSelectedTest';
+import renderTest from './shared/renderTest';
 import {
   expectOpen,
-  toggleOpen,
-  selectItem,
-  injectRunAllTimers,
   findSelection,
+  injectRunAllTimers,
   removeSelection,
+  selectItem,
+  toggleOpen,
 } from './utils/common';
-import allowClearTest from './shared/allowClearTest';
 
 describe('Select.Multiple', () => {
   injectRunAllTimers(jest);
@@ -379,7 +378,7 @@ describe('Select.Multiple', () => {
     expect(wrapper.find('.rc-select-arrow').length).toBeFalsy();
 
     wrapper.setProps({
-      inputIcon: <div>arrow</div>,
+      suffixIcon: <div>arrow</div>,
     });
     expect(wrapper.find('.rc-select-arrow').length).toBeTruthy();
   });
@@ -622,15 +621,10 @@ describe('Select.Multiple', () => {
     });
   });
 
-  describe("autoClearSearchValue", () => {
+  describe('autoClearSearchValue', () => {
     it('search value should not show when autoClearSearchValue is undefined', () => {
       const wrapper = mount(
-        <Select
-          mode="multiple"
-          open={false}
-          showSearch={true}
-          searchValue="test"
-        />,
+        <Select mode="multiple" open={false} showSearch={true} searchValue="test" />,
       );
       expect(wrapper.find('input').props().value).toBe('');
     });
@@ -648,12 +642,12 @@ describe('Select.Multiple', () => {
     });
     it('search value should no clear when autoClearSearchValue is false', () => {
       const wrapper = mount(
-          <Select
-              mode="multiple"
-              autoClearSearchValue={false}
-              showSearch={true}
-              searchValue="test"
-          />,
+        <Select
+          mode="multiple"
+          autoClearSearchValue={false}
+          showSearch={true}
+          searchValue="test"
+        />,
       );
 
       toggleOpen(wrapper);
@@ -662,12 +656,7 @@ describe('Select.Multiple', () => {
     });
     it('search value should clear when autoClearSearchValue is true', () => {
       const wrapper = mount(
-          <Select
-              mode="multiple"
-              autoClearSearchValue={true}
-              showSearch={true}
-              searchValue="test"
-          />,
+        <Select mode="multiple" autoClearSearchValue={true} showSearch={true} searchValue="test" />,
       );
       toggleOpen(wrapper);
       toggleOpen(wrapper);