fix: rename inputIcon

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

Hide file tree

Showing 6 changed files with 20 additions and 15 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
@@ -15,7 +15,7 @@ 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: "",
@@ -44,7 +44,7 @@ class Test extends React.Component {
 
   showArrow = e => {
     this.setState({
-      inputIcon: e.target.checked ? <div>arrow</div> : null,
+      suffixIcon: e.target.checked ? <div>arrow</div> : null,
     });
   };
 
@@ -61,7 +61,7 @@ class Test extends React.Component {
   }
 
   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,7 @@ 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 +93,7 @@ class Test extends React.Component {
             style={{ width: 500 }}
             mode="multiple"
             loading={loading}
-            inputIcon={inputIcon}
+            suffixIcon={suffixIcon}
             allowClear
             optionFilterProp="children"
             optionLabelProp="children"

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
@@ -379,7 +379,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();
   });