Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow name prop to be passed to <Select> #793

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Allow name prop to be passed to <Select> #793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
68 changes: 17 additions & 51 deletions docs/examples/auto-adjust-dropdown.tsx
View file
Open in desktop
Expand Up @@ -8,7 +8,8 @@ class Test extends React.Component {
value: '3',
};

onChange = e => {
onChange = (e) => {
console.log(`e`, e);
let value;
if (e && e.target) {
({ value } = e.target);
Expand All @@ -35,48 +36,29 @@ class Test extends React.Component {
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Select
name="my-select"
onChange={this.onChange}
dropdownMatchSelectWidth={500}
value={value}
>
<Option value="1">
Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
</Option>
<Option value="2">
Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
</Option>
<Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
<Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
<Option value="3">Jill</Option>
</Select>
</div>
<div>
<Select
onChange={this.onChange}
dropdownMatchSelectWidth={500}
value={value}
>
<Option value="1">
Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
</Option>
<Option value="2">
Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
</Option>{' '}
<Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
<Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
<Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>{' '}
<Option value="3">Jill</Option>
</Select>
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div>
<Select
onChange={this.onChange}
dropdownMatchSelectWidth={500}
value={value}
>
<Option value="1">
Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
</Option>
<Option value="2">
Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
</Option>
<Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
<Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
<Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
<Option value="3">Jill</Option>
</Select>
</div>
Expand All @@ -88,32 +70,16 @@ class Test extends React.Component {
}}
>
<div>
<Select
onChange={this.onChange}
dropdownMatchSelectWidth={500}
value={value}
>
<Option value="1">
Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
</Option>
<Option value="2">
Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
</Option>
<Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
<Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
<Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
<Option value="3">Jill</Option>
</Select>
</div>
<div>
<Select
onChange={this.onChange}
dropdownMatchSelectWidth={500}
value={value}
>
<Option value="1">
Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
</Option>
<Option value="2">
Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
</Option>
<Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
<Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
<Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
<Option value="3">Jill</Option>
</Select>
</div>
Expand Down
5 changes: 3 additions & 2 deletions docs/examples/combobox.tsx
View file
Open in desktop
Expand Up @@ -25,7 +25,7 @@ class Combobox extends React.Component {
});
};

onKeyDown = e => {
onKeyDown = (e) => {
const { value } = this.state;
if (e.keyCode === 13) {
console.log('onEnter', value);
Expand All @@ -40,7 +40,7 @@ class Combobox extends React.Component {
console.log('onSearch:', text);
};

onAsyncChange = value => {
onAsyncChange = (value) => {
window.clearTimeout(this.timeoutId);

this.setState({
Expand Down Expand Up @@ -81,6 +81,7 @@ class Combobox extends React.Component {
</p>
<div>
<Select
name="my_combobox"
disabled={disabled}
style={{ width: 500 }}
onChange={this.onChange}
Expand Down
9 changes: 5 additions & 4 deletions docs/examples/controlled.tsx
View file
Open in desktop
Expand Up @@ -16,7 +16,7 @@ class Controlled extends React.Component<{}, ControlledState> {
open: true,
};

onChange = e => {
onChange = (e) => {
let value;
if (e && e.target) {
({ value } = e.target);
Expand All @@ -35,15 +35,15 @@ class Controlled extends React.Component<{}, ControlledState> {
});
};

onBlur = v => {
onBlur = (v) => {
console.log('onBlur', v);
};

onFocus = () => {
console.log('onFocus');
};

onDropdownVisibleChange = open => {
onDropdownVisibleChange = (open) => {
this.setState({ open });
};

Expand All @@ -58,6 +58,7 @@ class Controlled extends React.Component<{}, ControlledState> {
<div style={{ width: 300 }}>
<Select
id="my-select"
name="my-select"
value={value}
placeholder="placeholder"
listHeight={200}
Expand Down Expand Up @@ -88,7 +89,7 @@ class Controlled extends React.Component<{}, ControlledState> {
<Option value="31" text="yiminghe">
yiminghe
</Option>
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
<Option key={i} value={i} text={String(i)}>
{i}-text
</Option>
Expand Down
2 changes: 2 additions & 0 deletions docs/examples/custom-icon.tsx
View file
Open in desktop
Expand Up @@ -90,6 +90,7 @@ class CustomIconComponent extends React.Component {
</p>
<div style={{ width: 300 }}>
<Select
name="my-select"
className="custom-select"
disabled={disabled}
style={{ width: 500 }}
Expand Down Expand Up @@ -178,6 +179,7 @@ class Test extends React.Component {
</p>
<div style={{ width: 300 }}>
<Select
name="my-select2"
className="custom-select"
value={value}
animation={useAnim ? 'slide-up' : null}
Expand Down
8 changes: 5 additions & 3 deletions docs/examples/custom-tags.tsx
View file
Open in desktop
Expand Up @@ -50,6 +50,8 @@ const Test: React.FC = () => {

<div>
<Select
id="my-select"
name="my-select"
placeholder="placeholder"
mode="tags"
style={{ width: 500 }}
Expand All @@ -58,14 +60,14 @@ const Test: React.FC = () => {
maxTagTextLength={10}
value={value}
onChange={(val: string[], option) => {
console.log('change:', val, option);
console.log('change---:', { val, option });
setValue(val);
}}
onSelect={(val, option) => {
console.log('selected', val, option);
console.log('selected', { val, option });
}}
onDeselect={(val, option) => {
console.log('deselected', val, option);
console.log('deselected', { val, option });
}}
tokenSeparators={[',']}
tagRender={tagRender}
Expand Down
3 changes: 2 additions & 1 deletion docs/examples/dropdownRender.tsx
View file
Open in desktop
Expand Up @@ -40,6 +40,7 @@ class Test extends React.Component {

<div>
<Select
name="my-select"
placeholder="placeholder"
mode="tags"
style={{ width: 500 }}
Expand All @@ -50,7 +51,7 @@ class Test extends React.Component {
tokenSeparators={[' ', ',']}
onFocus={() => console.log('focus')}
onBlur={() => console.log('blur')}
dropdownRender={menu => (
dropdownRender={(menu) => (
<React.Fragment>
<div
onClick={() => {
Expand Down
7 changes: 4 additions & 3 deletions docs/examples/email.tsx
View file
Open in desktop
Expand Up @@ -8,18 +8,18 @@ class Test extends React.Component {
options: [],
};

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

onChange = value => {
onChange = (value) => {
console.log('onChange', value);
let options: React.ReactNode = [];
if (value) {
if (value.indexOf('@') >= 0) {
options = <Option key={value}>{value}</Option>;
} else {
options = ['gmail.com', 'yahoo.com', 'outlook.com'].map(domain => {
options = ['gmail.com', 'yahoo.com', 'outlook.com'].map((domain) => {
const email = `${value}@${domain}`;
return <Option key={email}>{email}</Option>;
});
Expand All @@ -34,6 +34,7 @@ class Test extends React.Component {
const { options } = this.state;
return (
<Select
name="my-select"
mode="combobox"
notFoundContent={false}
style={{ width: 200 }}
Expand Down
2 changes: 2 additions & 0 deletions docs/examples/filterSort.tsx
View file
Open in desktop
Expand Up @@ -17,6 +17,7 @@ const Test = () => (
<div>
<h3> with filter sort </h3>
<Select
name="my-select1"
showSearch
style={{ width: 500 }}
filterSort={sorterByLabel}
Expand All @@ -25,6 +26,7 @@ const Test = () => (
></Select>
<h3> without filter sort </h3>
<Select
name="my-select2"
showSearch
style={{ width: 500 }}
optionFilterProp="label"
Expand Down
9 changes: 5 additions & 4 deletions docs/examples/force-suggest.tsx
View file
Open in desktop
Expand Up @@ -12,16 +12,16 @@ class Test extends React.Component {
value: undefined,
};

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

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

render() {
const { data, value, disabled } = this.state;
const options = data.map(d => (
const options = data.map((d) => (
<Option key={d.value}>
<i>{d.text}</i>
</Option>
Expand All @@ -57,6 +57,7 @@ class Test extends React.Component {
</p>
<div>
<Select
name="my-select"
labelInValue
showSearch
onSearch={this.fetchData}
Expand Down
5 changes: 3 additions & 2 deletions docs/examples/getPopupContainer.tsx
View file
Open in desktop
Expand Up @@ -11,9 +11,9 @@ class Test extends React.Component {
destroy: false,
};

getPopupContainer = node => node.parentNode;
getPopupContainer = (node) => node.parentNode;

setVisible = open => {
setVisible = (open) => {
this.setState({
open,
});
Expand Down Expand Up @@ -50,6 +50,7 @@ class Test extends React.Component {
<Dialog visible={open} onClose={this.close}>
<div style={{ marginTop: 20, position: 'relative' }}>
<Select
name="my-select"
placeholder="placeholder"
style={{ width: 200 }}
getPopupContainer={this.getPopupContainer}
Expand Down
3 changes: 2 additions & 1 deletion docs/examples/loading.tsx
View file
Open in desktop
Expand Up @@ -50,6 +50,7 @@ class Test extends React.Component {

<div style={{ width: 300 }}>
<Select
name="my-select"
value={value}
style={{ width: 500 }}
mode="multiple"
Expand All @@ -60,7 +61,7 @@ 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}
Expand Down
9 changes: 5 additions & 4 deletions docs/examples/mul-suggest.tsx
View file
Open in desktop
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 All @@ -39,6 +39,7 @@ class Test extends React.Component {

<div>
<Select
name="my-select"
value={value}
labelInValue
style={{ width: 500 }}
Expand Down