Skip to content

Commit a23cff2

Browse files
MuxinFengMuxinFeng
authored
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
1 parent 53bf823 commit a23cff2

File tree

9 files changed

+27
-93
lines changed

9 files changed

+27
-93
lines changed

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,6 @@ export default () => (
8787
| defaultOpen | control select default open | bool | |
8888
| placeholder | select placeholder | React Node | |
8989
| showSearch | whether show search input in single mode | bool | true |
90-
| showArrow | whether show arrow | bool | true (single mode), false (multiple mode) |
9190
| allowClear | whether allowClear | bool | false |
9291
| 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 |
9392
| tagRender | render custom tags. | (props: CustomTagProps) => ReactNode | - |
@@ -119,7 +118,7 @@ export default () => (
119118
| showAction | actions trigger the dropdown to show | String[]? | - |
120119
| autoFocus | focus select after mount | Bool | - |
121120
| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
122-
| inputIcon | specify the select arrow icon | ReactNode | - |
121+
| suffixIcon | specify the select arrow icon | ReactNode | - |
123122
| clearIcon | specify the clear icon | ReactNode | - |
124123
| removeIcon | specify the remove icon | ReactNode | - |
125124
| menuItemSelectedIcon | specify the item selected icon | ReactNode \| (props: MenuItemProps) => ReactNode | - |

‎docs/examples/custom-icon.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable no-console, max-classes-per-file */
2-
import React from 'react';
32
import Select, { Option } from 'rc-select';
3+
import React from 'react';
44
import '../../assets/index.less';
55

66
const arrowPath =
@@ -98,12 +98,11 @@ class CustomIconComponent extends React.Component {
9898
onInputKeyDown={this.onKeyDown}
9999
notFoundContent=""
100100
allowClear
101-
showArrow
102101
placeholder="please select"
103102
value={value}
104103
mode="combobox"
105104
backfill
106-
inputIcon={({ searchValue }) => {
105+
suffixIcon={({ searchValue }) => {
107106
if (searchValue) {
108107
return '😺';
109108
}
@@ -193,7 +192,7 @@ class Test extends React.Component {
193192
onChange={this.onChange}
194193
onFocus={() => console.log('focus')}
195194
tokenSeparators={[' ', ',']}
196-
inputIcon={getSvg(arrowPath)}
195+
suffixIcon={getSvg(arrowPath)}
197196
clearIcon={getSvg(clearPath)}
198197
removeIcon={getSvg(clearPath)}
199198
menuItemSelectedIcon={menuItemSelectedIcon}

‎docs/examples/multiple.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ for (let i = 10; i < 36; i += 1) {
1515
class Test extends React.Component {
1616
state = {
1717
useAnim: false,
18-
showArrow: false,
18+
suffixIcon: null,
1919
loading: false,
2020
value: ['a10'],
2121
searchValue: "",
@@ -44,7 +44,7 @@ class Test extends React.Component {
4444

4545
showArrow = e => {
4646
this.setState({
47-
showArrow: e.target.checked,
47+
suffixIcon: e.target.checked ? <div>arrow</div> : null,
4848
});
4949
};
5050

@@ -61,7 +61,7 @@ class Test extends React.Component {
6161
}
6262

6363
render() {
64-
const { useAnim, showArrow, loading, value } = this.state;
64+
const { useAnim, loading, value, suffixIcon } = this.state;
6565
return (
6666
<div>
6767
<h2>multiple select（scroll the menu）</h2>
@@ -74,7 +74,7 @@ class Test extends React.Component {
7474
<p />
7575
<label htmlFor="showArrow">
7676
showArrow
77-
<input id="showArrow" checked={showArrow} type="checkbox" onChange={this.showArrow} />
77+
<input id="showArrow" checked={!!suffixIcon} type="checkbox" onChange={this.showArrow} />
7878
</label>
7979
</p>
8080
<p>
@@ -93,7 +93,7 @@ class Test extends React.Component {
9393
style={{ width: 500 }}
9494
mode="multiple"
9595
loading={loading}
96-
showArrow={showArrow}
96+
suffixIcon={suffixIcon}
9797
allowClear
9898
optionFilterProp="children"
9999
optionLabelProp="children"

‎docs/examples/suggest.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable no-console */
2-
import React from 'react';
32
import Select, { Option } from 'rc-select';
3+
import React from 'react';
44
import '../../assets/index.less';
55

66
import { fetch } from './common/tbFetchSuggest';
@@ -59,7 +59,7 @@ class Test extends React.Component {
5959
placeholder="placeholder"
6060
defaultActiveFirstOption={false}
6161
getInputElement={() => <Input className="custom-input" />}
62-
showArrow={false}
62+
suffixIcon={null}
6363
notFoundContent=""
6464
onChange={this.fetchData}
6565
onSelect={this.onSelect}

‎src/BaseSelect.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -169,8 +169,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
169169

170170
// >>> Icons
171171
allowClear?: boolean;
172-
showArrow?: boolean;
173-
inputIcon?: RenderNode;
172+
suffixIcon?: RenderNode;
174173
/** Clear all icon */
175174
clearIcon?: RenderNode;
176175
/** Selector remove icon */
@@ -255,8 +254,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
255254

256255
// Icons
257256
allowClear,
258-
showArrow,
259-
inputIcon,
257+
suffixIcon,
260258
clearIcon,
261259

262260
// Dropdown
@@ -676,17 +674,16 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
676674
// ==================================================================
677675

678676
// ============================= Arrow ==============================
679-
const mergedShowArrow =
680-
showArrow !== undefined ? showArrow : loading || (!multiple && mode !== 'combobox');
677+
const showSuffixIcon = !!suffixIcon || loading;
681678
let arrowNode: React.ReactNode;
682679

683-
if (mergedShowArrow) {
680+
if (showSuffixIcon) {
684681
arrowNode = (
685682
<TransBtn
686683
className={classNames(`${prefixCls}-arrow`, {
687684
[`${prefixCls}-arrow-loading`]: loading,
688685
})}
689-
customizeIcon={inputIcon}
686+
customizeIcon={suffixIcon}
690687
customizeIconProps={{
691688
loading,
692689
searchValue: mergedSearchValue,
@@ -738,7 +735,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
738735
[`${prefixCls}-multiple`]: multiple,
739736
[`${prefixCls}-single`]: !multiple,
740737
[`${prefixCls}-allow-clear`]: allowClear,
741-
[`${prefixCls}-show-arrow`]: mergedShowArrow,
738+
[`${prefixCls}-show-arrow`]: showSuffixIcon,
742739
[`${prefixCls}-disabled`]: disabled,
743740
[`${prefixCls}-loading`]: loading,
744741
[`${prefixCls}-open`]: mergedOpen,

‎tests/Multiple.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -376,12 +376,12 @@ describe('Select.Multiple', () => {
376376
</Select>,
377377
);
378378

379-
expect(wrapper.find('.rc-select-arrow-icon').length).toBeFalsy();
379+
expect(wrapper.find('.rc-select-arrow').length).toBeFalsy();
380380

381381
wrapper.setProps({
382-
showArrow: true,
382+
suffixIcon: <div>arrow</div>,
383383
});
384-
expect(wrapper.find('.rc-select-arrow-icon').length).toBeTruthy();
384+
expect(wrapper.find('.rc-select-arrow').length).toBeTruthy();
385385
});
386386

387387
it('block input when fast backspace', () => {

‎tests/Select.test.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ describe('Select.Basic', () => {
4242
className="select-test"
4343
value="2"
4444
placeholder="Select a number"
45-
showArrow
4645
allowClear
4746
showSearch
4847
{...props}

‎tests/__snapshots__/Select.test.tsx.snap‎

Lines changed: 6 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ exports[`Select.Basic filterOption could be true as described in default value 1
110110

111111
exports[`Select.Basic no search 1`] = `
112112
<div
113-
class="rc-select rc-select-single rc-select-show-arrow"
113+
class="rc-select rc-select-single"
114114
>
115115
<div
116116
class="rc-select-selector"
@@ -142,24 +142,14 @@ exports[`Select.Basic no search 1`] = `
142142
1
143143
</span>
144144
</div>
145-
<span
146-
aria-hidden="true"
147-
class="rc-select-arrow"
148-
style="user-select:none;-webkit-user-select:none"
149-
unselectable="on"
150-
>
151-
<span
152-
class="rc-select-arrow-icon"
153-
/>
154-
</span>
155145
</div>
156146
`;
157147

158148
exports[`Select.Basic render renders aria-attributes correctly 1`] = `
159149
<div
160150
aria-label="some-label"
161151
aria-labelledby="test-id"
162-
class="antd select-test antd-single antd-allow-clear antd-show-arrow antd-show-search"
152+
class="antd select-test antd-single antd-allow-clear antd-show-search"
163153
>
164154
<div
165155
class="antd-selector"
@@ -190,16 +180,6 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
190180
2
191181
</span>
192182
</div>
193-
<span
194-
aria-hidden="true"
195-
class="antd-arrow"
196-
style="user-select:none;-webkit-user-select:none"
197-
unselectable="on"
198-
>
199-
<span
200-
class="antd-arrow-icon"
201-
/>
202-
</span>
203183
<span
204184
aria-hidden="true"
205185
class="antd-clear"
@@ -217,7 +197,7 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
217197

218198
exports[`Select.Basic render renders correctly 1`] = `
219199
<div
220-
class="antd select-test antd-single antd-allow-clear antd-show-arrow antd-show-search"
200+
class="antd select-test antd-single antd-allow-clear antd-show-search"
221201
>
222202
<div
223203
class="antd-selector"
@@ -246,16 +226,6 @@ exports[`Select.Basic render renders correctly 1`] = `
246226
2
247227
</span>
248228
</div>
249-
<span
250-
aria-hidden="true"
251-
class="antd-arrow"
252-
style="user-select:none;-webkit-user-select:none"
253-
unselectable="on"
254-
>
255-
<span
256-
class="antd-arrow-icon"
257-
/>
258-
</span>
259229
<span
260230
aria-hidden="true"
261231
class="antd-clear"
@@ -273,7 +243,7 @@ exports[`Select.Basic render renders correctly 1`] = `
273243

274244
exports[`Select.Basic render renders data-attributes correctly 1`] = `
275245
<div
276-
class="antd select-test antd-single antd-allow-clear antd-show-arrow antd-show-search"
246+
class="antd select-test antd-single antd-allow-clear antd-show-search"
277247
data-id="12345"
278248
data-test="test-id"
279249
>
@@ -304,16 +274,6 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
304274
2
305275
</span>
306276
</div>
307-
<span
308-
aria-hidden="true"
309-
class="antd-arrow"
310-
style="user-select:none;-webkit-user-select:none"
311-
unselectable="on"
312-
>
313-
<span
314-
class="antd-arrow-icon"
315-
/>
316-
</span>
317277
<span
318278
aria-hidden="true"
319279
class="antd-clear"
@@ -331,7 +291,7 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
331291

332292
exports[`Select.Basic render renders disabled select correctly 1`] = `
333293
<div
334-
class="antd select-test antd-single antd-allow-clear antd-show-arrow antd-disabled antd-show-search"
294+
class="antd select-test antd-single antd-allow-clear antd-disabled antd-show-search"
335295
>
336296
<div
337297
class="antd-selector"
@@ -361,24 +321,14 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
361321
2
362322
</span>
363323
</div>
364-
<span
365-
aria-hidden="true"
366-
class="antd-arrow"
367-
style="user-select:none;-webkit-user-select:none"
368-
unselectable="on"
369-
>
370-
<span
371-
class="antd-arrow-icon"
372-
/>
373-
</span>
374324
</div>
375325
`;
376326

377327
exports[`Select.Basic render renders dropdown correctly 1`] = `null`;
378328

379329
exports[`Select.Basic render renders role prop correctly 1`] = `
380330
<div
381-
class="antd select-test antd-single antd-allow-clear antd-show-arrow antd-show-search"
331+
class="antd select-test antd-single antd-allow-clear antd-show-search"
382332
role="button"
383333
>
384334
<div
@@ -408,16 +358,6 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
408358
2
409359
</span>
410360
</div>
411-
<span
412-
aria-hidden="true"
413-
class="antd-arrow"
414-
style="user-select:none;-webkit-user-select:none"
415-
unselectable="on"
416-
>
417-
<span
418-
class="antd-arrow-icon"
419-
/>
420-
</span>
421361
<span
422362
aria-hidden="true"
423363
class="antd-clear"

‎tests/__snapshots__/ssr.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
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>"`;
3+
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>"`;

0 commit comments

Comments
 (0)