Skip to content

Commit

Permalink
chore: code optimization (#1011)
Browse files Browse the repository at this point in the history
  • Loading branch information
@li-jia-nan
li-jia-nan committed Dec 27, 2023
1 parent 3fb972e commit 424bcfd
Show file tree
Hide file tree
Showing 10 changed files with 118 additions and 131 deletions.
8 changes: 4 additions & 4 deletions docs/examples/mul-suggest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ class Test extends React.Component {
value: [],
};

onChange = value => {
onChange = (value) => {
console.log('onChange ', value);
this.setState({
value,
});
};

fetchData = value => {
fetch(value, data => {
fetchData = (value) => {
fetch(value, (data) => {
this.setState({
data,
});
Expand All @@ -28,7 +28,7 @@ class Test extends React.Component {

render() {
const { data, value } = this.state;
const options = data.map(d => (
const options = data.map((d) => (
<Option key={d.value}>
<i>{d.text}</i>
</Option>
Expand Down
10 changes: 5 additions & 5 deletions docs/examples/mul-tag-suggest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@ class Test extends React.Component {
value: [],
};

onChange = value => {
onChange = (value) => {
console.log('onChange ', value);
this.setState({
value,
});
};

onSelect = value => {
onSelect = (value) => {
console.log('select ', value);
};

fetchData = value => {
fetch(value, data => {
fetchData = (value) => {
fetch(value, (data) => {
this.setState({
data,
});
Expand All @@ -32,7 +32,7 @@ class Test extends React.Component {

render() {
const { value, data } = this.state;
const options = data.map(d => (
const options = data.map((d) => (
<Option key={d.value}>
<i>{d.text}</i>
</Option>
Expand Down
58 changes: 27 additions & 31 deletions docs/examples/multiple-readonly.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import React from 'react';
import Select, { Option } from 'rc-select';
import '../../assets/index.less';

const children = [];
const children: React.ReactNode[] = [];

for (let i = 10; i < 36; i += 1) {
// 11 => readonly selected item
children.push(
Expand All @@ -13,40 +14,35 @@ for (let i = 10; i < 36; i += 1) {
);
}

class Test extends React.Component {
state = {
value: ['b11'],
};
const Test: React.FC = () => {
const [value, setValue] = React.useState<string[]>(['b11']);

onChange = value => {
console.log('onChange', value);
this.setState({ value });
const onChange = (v: any) => {
console.log('onChange', v);
setValue(v);
};

render() {
const { value } = this.state;
return (
<div>
<h2>multiple readonly default selected item</h2>
<div style={{ width: 300 }}>
<Select
mode="multiple"
value={value}
animation="slide-up"
choiceTransitionName="rc-select-selection__choice-zoom"
style={{ width: 500 }}
optionFilterProp="children"
optionLabelProp="children"
placeholder="please select"
onChange={this.onChange}
>
{children}
</Select>
</div>
return (
<div>
<h2>multiple readonly default selected item</h2>
<div style={{ width: 300 }}>
<Select
mode="multiple"
value={value}
animation="slide-up"
choiceTransitionName="rc-select-selection__choice-zoom"
style={{ width: 500 }}
optionFilterProp="children"
optionLabelProp="children"
placeholder="please select"
onChange={onChange}
>
{children}
</Select>
</div>
);
}
}
</div>
);
};

export default Test;
/* eslint-enable */
59 changes: 32 additions & 27 deletions docs/examples/multiple.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import React from 'react';
import Select, { Option } from 'rc-select';
import '../../assets/index.less';

const children = [];
const children: React.ReactNode[] = [];

for (let i = 10; i < 36; i += 1) {
children.push(
<Option key={i.toString(36) + i} disabled={i === 10} title={`中文${i}`}>
Expand All @@ -18,7 +19,7 @@ class Test extends React.Component {
suffixIcon: null,
loading: false,
value: ['a10'],
searchValue: "",
searchValue: '',
};

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

useAnim = e => {
useAnim = (e) => {
this.setState({
useAnim: e.target.checked,
});
};

showArrow = e => {
showArrow = (e) => {
this.setState({
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, suffixIcon } = this.state;
Expand All @@ -74,7 +75,12 @@ class Test extends React.Component {
<p />
<label htmlFor="showArrow">
showArrow
<input id="showArrow" checked={!!suffixIcon} type="checkbox" onChange={this.showArrow} />
<input
id="showArrow"
checked={!!suffixIcon}
type="checkbox"
onChange={this.showArrow}
/>
</label>
</p>
<p>
Expand Down Expand Up @@ -102,33 +108,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>
Expand Down
10 changes: 2 additions & 8 deletions src/BaseSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ export function isMultiple(mode: Mode) {
return mode === 'tags' || mode === 'multiple';
}

const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {
const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref) => {
const {
id,
prefixCls,
Expand Down Expand Up @@ -807,14 +807,8 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
>
{mockFocused && !mergedOpen && (
<span
style={{
width: 0,
height: 0,
position: 'absolute',
overflow: 'hidden',
opacity: 0,
}}
aria-live="polite"
style={{ width: 0, height: 0, position: 'absolute', overflow: 'hidden', opacity: 0 }}
>
{/* Merge into one string to make screen reader work as expect */}
{`${displayValues
Expand Down
1 change: 1 addition & 0 deletions src/OptionList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
const current = (index + i * offset + len) % len;

const { group, data } = memoFlattenOptions[current];

if (!group && !data.disabled) {
return current;
}
Expand Down
4 changes: 2 additions & 2 deletions src/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,8 +163,8 @@ function isRawValue(value: DraftValueType): value is RawValueType {
return !value || typeof value !== 'object';
}

const Select = React.forwardRef(
(props: SelectProps<any, DefaultOptionType>, ref: React.Ref<BaseSelectRef>) => {
const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionType>>(
(props, ref) => {
const {
id,
mode,
Expand Down
9 changes: 4 additions & 5 deletions src/Selector/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ interface InputProps {
>;
}

const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (
{
const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref) => {
const {
prefixCls,
id,
inputElement,
Expand All @@ -54,9 +54,8 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (
onCompositionEnd,
open,
attrs,
},
ref,
) => {
} = props;

let inputNode: React.ComponentElement<any, any> = inputElement || <input />;

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

1 comment on commit 424bcfd

@vercel
Copy link

@vercel vercel bot commented on 424bcfd Dec 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

select – ./

select-react-component.vercel.app
select.vercel.app
select-git-master-react-component.vercel.app

Please sign in to comment.