refactor: rm showArrow prop (#956)

* refactor: rm showArrow prop * test: fix test * docs: change readme * fix: rename inputIcon * fix: add showSuffixIcon prop * Revert "fix: add showSuffixIcon prop" This reverts commit 95390d4. * test: update snapshots
react-component · Jul 13, 2023 · a23cff2 · a23cff2
1 parent 53bf823
commit a23cff2
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -87,7 +87,6 @@ export default () => (
 | defaultOpen | control select default open | bool |  |
 | placeholder | select placeholder | React Node |  |
 | showSearch | whether show search input in single mode | bool | true |
-| showArrow | whether show arrow | bool | true (single mode), false (multiple mode) |
 | allowClear | whether allowClear | bool | false |
 | tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | bool | false |
 | tagRender | render custom tags. | (props: CustomTagProps) => ReactNode | - |
@@ -119,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
@@ -1,6 +1,6 @@
 /* eslint-disable no-console, max-classes-per-file */
-import React from 'react';
 import Select, { Option } from 'rc-select';
+import React from 'react';
 import '../../assets/index.less';
 
 const arrowPath =
@@ -98,12 +98,11 @@ class CustomIconComponent extends React.Component {
             onInputKeyDown={this.onKeyDown}
             notFoundContent=""
             allowClear
-            showArrow
             placeholder="please select"
             value={value}
             mode="combobox"
             backfill
-            inputIcon={({ searchValue }) => {
+            suffixIcon={({ searchValue }) => {
               if (searchValue) {
                 return '😺';
               }
@@ -193,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,
-    showArrow: false,
+    suffixIcon: null,
     loading: false,
     value: ['a10'],
     searchValue: "",
@@ -44,7 +44,7 @@ class Test extends React.Component {
 
   showArrow = e => {
     this.setState({
-      showArrow: e.target.checked,
+      suffixIcon: e.target.checked ? <div>arrow</div> : null,
     });
   };
 
@@ -61,7 +61,7 @@ class Test extends React.Component {
   }
 
   render() {
-    const { useAnim, showArrow, loading, value } = 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={showArrow} 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}
-            showArrow={showArrow}
+            suffixIcon={suffixIcon}
             allowClear
             optionFilterProp="children"
             optionLabelProp="children"

diff --git a/docs/examples/suggest.tsx b/docs/examples/suggest.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';
 
 import { fetch } from './common/tbFetchSuggest';
@@ -59,7 +59,7 @@ class Test extends React.Component {
             placeholder="placeholder"
             defaultActiveFirstOption={false}
             getInputElement={() => <Input className="custom-input" />}
-            showArrow={false}
+            suffixIcon={null}
             notFoundContent=""
             onChange={this.fetchData}
             onSelect={this.onSelect}

diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx
@@ -169,8 +169,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
 
   // >>> Icons
   allowClear?: boolean;
-  showArrow?: boolean;
-  inputIcon?: RenderNode;
+  suffixIcon?: RenderNode;
   /** Clear all icon */
   clearIcon?: RenderNode;
   /** Selector remove icon */
@@ -255,8 +254,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
 
     // Icons
     allowClear,
-    showArrow,
-    inputIcon,
+    suffixIcon,
     clearIcon,
 
     // Dropdown
@@ -676,17 +674,16 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
   // ==================================================================
 
   // ============================= Arrow ==============================
-  const mergedShowArrow =
-    showArrow !== undefined ? showArrow : loading || (!multiple && mode !== 'combobox');
+  const showSuffixIcon = !!suffixIcon || loading;
   let arrowNode: React.ReactNode;
 
-  if (mergedShowArrow) {
+  if (showSuffixIcon) {
     arrowNode = (
       <TransBtn
         className={classNames(`${prefixCls}-arrow`, {
           [`${prefixCls}-arrow-loading`]: loading,
         })}
-        customizeIcon={inputIcon}
+        customizeIcon={suffixIcon}
         customizeIconProps={{
           loading,
           searchValue: mergedSearchValue,
@@ -738,7 +735,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
     [`${prefixCls}-multiple`]: multiple,
     [`${prefixCls}-single`]: !multiple,
     [`${prefixCls}-allow-clear`]: allowClear,
-    [`${prefixCls}-show-arrow`]: mergedShowArrow,
+    [`${prefixCls}-show-arrow`]: showSuffixIcon,
     [`${prefixCls}-disabled`]: disabled,
     [`${prefixCls}-loading`]: loading,
     [`${prefixCls}-open`]: mergedOpen,

diff --git a/tests/Multiple.test.tsx b/tests/Multiple.test.tsx
@@ -376,12 +376,12 @@ describe('Select.Multiple', () => {
       </Select>,
     );
 
-    expect(wrapper.find('.rc-select-arrow-icon').length).toBeFalsy();
+    expect(wrapper.find('.rc-select-arrow').length).toBeFalsy();
 
     wrapper.setProps({
-      showArrow: true,
+      suffixIcon: <div>arrow</div>,
     });
-    expect(wrapper.find('.rc-select-arrow-icon').length).toBeTruthy();
+    expect(wrapper.find('.rc-select-arrow').length).toBeTruthy();
   });
 
   it('block input when fast backspace', () => {

diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx
@@ -42,7 +42,6 @@ describe('Select.Basic', () => {
           className="select-test"
           value="2"
           placeholder="Select a number"
-          showArrow
           allowClear
           showSearch
           {...props}

diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap
@@ -110,7 +110,7 @@ exports[`Select.Basic filterOption could be true as described in default value 1
 
 exports[`Select.Basic no search 1`] = `
 <div
-  class="rc-select rc-select-single rc-select-show-arrow"
+  class="rc-select rc-select-single"
 >
   <div
     class="rc-select-selector"
@@ -142,24 +142,14 @@ exports[`Select.Basic no search 1`] = `
       1
     </span>
   </div>
-  <span
-    aria-hidden="true"
-    class="rc-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
-    unselectable="on"
-  >
-    <span
-      class="rc-select-arrow-icon"
-    />
-  </span>
 </div>
 `;
 
 exports[`Select.Basic render renders aria-attributes correctly 1`] = `
 <div
   aria-label="some-label"
   aria-labelledby="test-id"
-  class="antd select-test antd-single antd-allow-clear antd-show-arrow antd-show-search"
+  class="antd select-test antd-single antd-allow-clear antd-show-search"
 >
   <div
     class="antd-selector"
@@ -190,16 +180,6 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
       2
     </span>
   </div>
-  <span
-    aria-hidden="true"
-    class="antd-arrow"
-    style="user-select:none;-webkit-user-select:none"
-    unselectable="on"
-  >
-    <span
-      class="antd-arrow-icon"
-    />
-  </span>
   <span
     aria-hidden="true"
     class="antd-clear"
@@ -217,7 +197,7 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
 
 exports[`Select.Basic render renders correctly 1`] = `
 <div
-  class="antd select-test antd-single antd-allow-clear antd-show-arrow antd-show-search"
+  class="antd select-test antd-single antd-allow-clear antd-show-search"
 >
   <div
     class="antd-selector"
@@ -246,16 +226,6 @@ exports[`Select.Basic render renders correctly 1`] = `
       2
     </span>
   </div>
-  <span
-    aria-hidden="true"
-    class="antd-arrow"
-    style="user-select:none;-webkit-user-select:none"
-    unselectable="on"
-  >
-    <span
-      class="antd-arrow-icon"
-    />
-  </span>
   <span
     aria-hidden="true"
     class="antd-clear"
@@ -273,7 +243,7 @@ exports[`Select.Basic render renders correctly 1`] = `
 
 exports[`Select.Basic render renders data-attributes correctly 1`] = `
 <div
-  class="antd select-test antd-single antd-allow-clear antd-show-arrow antd-show-search"
+  class="antd select-test antd-single antd-allow-clear antd-show-search"
   data-id="12345"
   data-test="test-id"
 >
@@ -304,16 +274,6 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
       2
     </span>
   </div>
-  <span
-    aria-hidden="true"
-    class="antd-arrow"
-    style="user-select:none;-webkit-user-select:none"
-    unselectable="on"
-  >
-    <span
-      class="antd-arrow-icon"
-    />
-  </span>
   <span
     aria-hidden="true"
     class="antd-clear"
@@ -331,7 +291,7 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
 
 exports[`Select.Basic render renders disabled select correctly 1`] = `
 <div
-  class="antd select-test antd-single antd-allow-clear antd-show-arrow antd-disabled antd-show-search"
+  class="antd select-test antd-single antd-allow-clear antd-disabled antd-show-search"
 >
   <div
     class="antd-selector"
@@ -361,24 +321,14 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
       2
     </span>
   </div>
-  <span
-    aria-hidden="true"
-    class="antd-arrow"
-    style="user-select:none;-webkit-user-select:none"
-    unselectable="on"
-  >
-    <span
-      class="antd-arrow-icon"
-    />
-  </span>
 </div>
 `;
 
 exports[`Select.Basic render renders dropdown correctly 1`] = `null`;
 
 exports[`Select.Basic render renders role prop correctly 1`] = `
 <div
-  class="antd select-test antd-single antd-allow-clear antd-show-arrow antd-show-search"
+  class="antd select-test antd-single antd-allow-clear antd-show-search"
   role="button"
 >
   <div
@@ -408,16 +358,6 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
       2
     </span>
   </div>
-  <span
-    aria-hidden="true"
-    class="antd-arrow"
-    style="user-select:none;-webkit-user-select:none"
-    unselectable="on"
-  >
-    <span
-      class="antd-arrow-icon"
-    />
-  </span>
   <span
     aria-hidden="true"
     class="antd-clear"

diff --git a/tests/__snapshots__/ssr.test.tsx.snap b/tests/__snapshots__/ssr.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single rc-select-show-arrow"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autoComplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="undefined_list" aria-autocomplete="list" aria-controls="undefined_list" aria-activedescendant="undefined_list_0" value="" readonly="" unselectable="on" style="opacity:0"/></span><span class="rc-select-selection-placeholder"></span></div><span class="rc-select-arrow" style="user-select:none;-webkit-user-select:none" unselectable="on" aria-hidden="true"><span class="rc-select-arrow-icon"></span></span></div>"`;
+exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autoComplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="undefined_list" aria-autocomplete="list" aria-controls="undefined_list" aria-activedescendant="undefined_list_0" value="" readonly="" unselectable="on" style="opacity:0"/></span><span class="rc-select-selection-placeholder"></span></div></div>"`;