Skip to content

Commit 424bcfd

Browse files
li-jia-nanli-jia-nan
authored
chore: code optimization (#1011)
1 parent 3fb972e commit 424bcfd

File tree

10 files changed

+118
-131
lines changed

10 files changed

+118
-131
lines changed

‎docs/examples/mul-suggest.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@ class Test extends React.Component {
1111
value: [],
1212
};
1313

14-
onChange = value => {
14+
onChange = (value) => {
1515
console.log('onChange ', value);
1616
this.setState({
1717
value,
1818
});
1919
};
2020

21-
fetchData = value => {
22-
fetch(value, data => {
21+
fetchData = (value) => {
22+
fetch(value, (data) => {
2323
this.setState({
2424
data,
2525
});
@@ -28,7 +28,7 @@ class Test extends React.Component {
2828

2929
render() {
3030
const { data, value } = this.state;
31-
const options = data.map(d => (
31+
const options = data.map((d) => (
3232
<Option key={d.value}>
3333
<i>{d.text}</i>
3434
</Option>

‎docs/examples/mul-tag-suggest.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@ class Test extends React.Component {
1111
value: [],
1212
};
1313

14-
onChange = value => {
14+
onChange = (value) => {
1515
console.log('onChange ', value);
1616
this.setState({
1717
value,
1818
});
1919
};
2020

21-
onSelect = value => {
21+
onSelect = (value) => {
2222
console.log('select ', value);
2323
};
2424

25-
fetchData = value => {
26-
fetch(value, data => {
25+
fetchData = (value) => {
26+
fetch(value, (data) => {
2727
this.setState({
2828
data,
2929
});
@@ -32,7 +32,7 @@ class Test extends React.Component {
3232

3333
render() {
3434
const { value, data } = this.state;
35-
const options = data.map(d => (
35+
const options = data.map((d) => (
3636
<Option key={d.value}>
3737
<i>{d.text}</i>
3838
</Option>

‎docs/examples/multiple-readonly.tsx‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import React from 'react';
33
import Select, { Option } from 'rc-select';
44
import '../../assets/index.less';
55

6-
const children = [];
6+
const children: React.ReactNode[] = [];
7+
78
for (let i = 10; i < 36; i += 1) {
89
// 11 => readonly selected item
910
children.push(
@@ -13,40 +14,35 @@ for (let i = 10; i < 36; i += 1) {
1314
);
1415
}
1516

16-
class Test extends React.Component {
17-
state = {
18-
value: ['b11'],
19-
};
17+
const Test: React.FC = () => {
18+
const [value, setValue] = React.useState<string[]>(['b11']);
2019

21-
onChange = value => {
22-
console.log('onChange', value);
23-
this.setState({ value });
20+
const onChange = (v: any) => {
21+
console.log('onChange', v);
22+
setValue(v);
2423
};
2524

26-
render() {
27-
const { value } = this.state;
28-
return (
29-
<div>
30-
<h2>multiple readonly default selected item</h2>
31-
<div style={{ width: 300 }}>
32-
<Select
33-
mode="multiple"
34-
value={value}
35-
animation="slide-up"
36-
choiceTransitionName="rc-select-selection__choice-zoom"
37-
style={{ width: 500 }}
38-
optionFilterProp="children"
39-
optionLabelProp="children"
40-
placeholder="please select"
41-
onChange={this.onChange}
42-
>
43-
{children}
44-
</Select>
45-
</div>
25+
return (
26+
<div>
27+
<h2>multiple readonly default selected item</h2>
28+
<div style={{ width: 300 }}>
29+
<Select
30+
mode="multiple"
31+
value={value}
32+
animation="slide-up"
33+
choiceTransitionName="rc-select-selection__choice-zoom"
34+
style={{ width: 500 }}
35+
optionFilterProp="children"
36+
optionLabelProp="children"
37+
placeholder="please select"
38+
onChange={onChange}
39+
>
40+
{children}
41+
</Select>
4642
</div>
47-
);
48-
}
49-
}
43+
</div>
44+
);
45+
};
5046

5147
export default Test;
5248
/* eslint-enable */

‎docs/examples/multiple.tsx‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import React from 'react';
33
import Select, { Option } from 'rc-select';
44
import '../../assets/index.less';
55

6-
const children = [];
6+
const children: React.ReactNode[] = [];
7+
78
for (let i = 10; i < 36; i += 1) {
89
children.push(
910
<Option key={i.toString(36) + i} disabled={i === 10} title={`中文${i}`}>
@@ -18,7 +19,7 @@ class Test extends React.Component {
1819
suffixIcon: null,
1920
loading: false,
2021
value: ['a10'],
21-
searchValue: "",
22+
searchValue: '',
2223
};
2324

2425
onChange = (value, options) => {
@@ -36,29 +37,29 @@ class Test extends React.Component {
3637
console.log(args);
3738
};
3839

39-
useAnim = e => {
40+
useAnim = (e) => {
4041
this.setState({
4142
useAnim: e.target.checked,
4243
});
4344
};
4445

45-
showArrow = e => {
46+
showArrow = (e) => {
4647
this.setState({
4748
suffixIcon: e.target.checked ? <div>arrow</div> : null,
4849
});
4950
};
5051

51-
loading = e => {
52+
loading = (e) => {
5253
this.setState({
5354
loading: e.target.checked,
5455
});
5556
};
5657

57-
setSearchValue = val => {
58+
setSearchValue = (val) => {
5859
this.setState({
5960
searchValue: val,
60-
})
61-
}
61+
});
62+
};
6263

6364
render() {
6465
const { useAnim, loading, value, suffixIcon } = this.state;
@@ -74,7 +75,12 @@ class Test extends React.Component {
7475
<p />
7576
<label htmlFor="showArrow">
7677
showArrow
77-
<input id="showArrow" checked={!!suffixIcon} type="checkbox" onChange={this.showArrow} />
78+
<input
79+
id="showArrow"
80+
checked={!!suffixIcon}
81+
type="checkbox"
82+
onChange={this.showArrow}
83+
/>
7884
</label>
7985
</p>
8086
<p>
@@ -102,33 +108,32 @@ class Test extends React.Component {
102108
placeholder="please select"
103109
onChange={this.onChange}
104110
onFocus={() => console.log('focus')}
105-
onBlur={v => console.log('blur', v)}
111+
onBlur={(v) => console.log('blur', v)}
106112
tokenSeparators={[' ', ',']}
107113
>
108114
{children}
109115
</Select>
110116
</div>
111117

112-
113118
<h2>multiple select with autoClearSearchValue = false</h2>
114119
<div style={{ width: 300 }}>
115120
<Select
116-
value={value}
117-
style={{ width: 500 }}
118-
mode="multiple"
119-
autoClearSearchValue={false}
120-
showSearch={true}
121-
searchValue={this.state.searchValue}
122-
onSearch={this.setSearchValue}
123-
optionFilterProp="children"
124-
optionLabelProp="children"
125-
onSelect={this.onSelect}
126-
onDeselect={this.onDeselect}
127-
placeholder="please select"
128-
onChange={this.onChange}
129-
onFocus={() => console.log('focus')}
130-
onBlur={v => console.log('blur', v)}
131-
tokenSeparators={[' ', ',']}
121+
value={value}
122+
style={{ width: 500 }}
123+
mode="multiple"
124+
autoClearSearchValue={false}
125+
showSearch={true}
126+
searchValue={this.state.searchValue}
127+
onSearch={this.setSearchValue}
128+
optionFilterProp="children"
129+
optionLabelProp="children"
130+
onSelect={this.onSelect}
131+
onDeselect={this.onDeselect}
132+
placeholder="please select"
133+
onChange={this.onChange}
134+
onFocus={() => console.log('focus')}
135+
onBlur={(v) => console.log('blur', v)}
136+
tokenSeparators={[' ', ',']}
132137
>
133138
{children}
134139
</Select>

‎src/BaseSelect.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ export function isMultiple(mode: Mode) {
209209
return mode === 'tags' || mode === 'multiple';
210210
}
211211

212-
const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {
212+
const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref) => {
213213
const {
214214
id,
215215
prefixCls,
@@ -807,14 +807,8 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
807807
>
808808
{mockFocused && !mergedOpen && (
809809
<span
810-
style={{
811-
width: 0,
812-
height: 0,
813-
position: 'absolute',
814-
overflow: 'hidden',
815-
opacity: 0,
816-
}}
817810
aria-live="polite"
811+
style={{ width: 0, height: 0, position: 'absolute', overflow: 'hidden', opacity: 0 }}
818812
>
819813
{/* Merge into one string to make screen reader work as expect */}
820814
{`${displayValues

‎src/OptionList.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
8888
const current = (index + i * offset + len) % len;
8989

9090
const { group, data } = memoFlattenOptions[current];
91+
9192
if (!group && !data.disabled) {
9293
return current;
9394
}

‎src/Select.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,8 +163,8 @@ function isRawValue(value: DraftValueType): value is RawValueType {
163163
return !value || typeof value !== 'object';
164164
}
165165

166-
const Select = React.forwardRef(
167-
(props: SelectProps<any, DefaultOptionType>, ref: React.Ref<BaseSelectRef>) => {
166+
const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionType>>(
167+
(props, ref) => {
168168
const {
169169
id,
170170
mode,

‎src/Selector/Input.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ interface InputProps {
3333
>;
3434
}
3535

36-
const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (
37-
{
36+
const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref) => {
37+
const {
3838
prefixCls,
3939
id,
4040
inputElement,
@@ -54,9 +54,8 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (
5454
onCompositionEnd,
5555
open,
5656
attrs,
57-
},
58-
ref,
59-
) => {
57+
} = props;
58+
6059
let inputNode: React.ComponentElement<any, any> = inputElement || <input />;
6160

6261
const { ref: originRef, props: originProps } = inputNode;

0 commit comments

Comments
 (0)