mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

docs: Rewrite AutoComplete demos to ES6 component

Browse Source
This commit is contained in:
Wei Zhu 2017-02-19 20:12:41 +08:00
parent ae67f5cc20
commit eb29fdada3
5 changed files with 51 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/auto-complete/demo/antd.md
View File

@ -20,13 +20,12 @@ function onSelect(value) {
console.log('onSelect', value);
}
const Complete = React.createClass({
getInitialState() {
return {
dataSource: [],
};
},
handleChange(value) {
class Complete extends React.Component {
state = {
dataSource: [],
}
handleChange = (value) => {
this.setState({
dataSource: !value ? [] : [
value,
@ -34,10 +33,12 @@ const Complete = React.createClass({
value + value + value,
],
});
},
handleKeyPress(ev) {
}
handleKeyPress = (ev) => {
console.log('handleKeyPress', ev);
},
}
render() {
const { dataSource } = this.state;
return (
@ -51,8 +52,8 @@ const Complete = React.createClass({
<textarea onKeyPress={this.handleKeyPress} style={{ height: 50 }} />
</AutoComplete>
);
},
});
}
}
ReactDOM.render(<Complete />, mountNode);
````

20
components/auto-complete/demo/basic.md
View File

@ -20,13 +20,12 @@ function onSelect(value) {
console.log('onSelect', value);
}
const Complete = React.createClass({
getInitialState() {
return {
dataSource: [],
};
},
handleChange(value) {
class Complete extends React.Component {
state = {
dataSource: [],
}
handleChange = (value) => {
this.setState({
dataSource: !value ? [] : [
value,
@ -34,7 +33,8 @@ const Complete = React.createClass({
value + value + value,
],
});
},
}
render() {
const { dataSource } = this.state;
return (
@ -46,8 +46,8 @@ const Complete = React.createClass({
placeholder="input here"
/>
);
},
});
}
}
ReactDOM.render(<Complete />, mountNode);
````

14
components/auto-complete/demo/non-case-sensitive.md
View File

@ -19,12 +19,14 @@ import { AutoComplete } from 'antd';
const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
function Complete() {
return (<AutoComplete
style={{ width: 200 }}
dataSource={dataSource}
placeholder="try to type `b`"
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
/>);
return (
<AutoComplete
style={{ width: 200 }}
dataSource={dataSource}
placeholder="try to type `b`"
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
/>
);
}
ReactDOM.render(<Complete />, mountNode);

20
components/auto-complete/demo/options.md
View File

@ -18,13 +18,12 @@ import { AutoComplete } from 'antd';
const Option = AutoComplete.Option;
const Complete = React.createClass({
getInitialState() {
return {
result: [],
};
},
handleChange(value) {
class Complete extends React.Component {
state = {
result: [],
}
handleChange = (value) => {
let result;
if (!value || value.indexOf('@') >= 0) {
result = [];
@ -32,7 +31,8 @@ const Complete = React.createClass({
result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
}
this.setState({ result });
},
}
render() {
const { result } = this.state;
const children = result.map((email) => {
@ -47,8 +47,8 @@ const Complete = React.createClass({
{children}
</AutoComplete>
);
},
});
}
}
ReactDOM.render(<Complete />, mountNode);
````

20
components/auto-complete/demo/uncertain-category.md
View File

@ -52,19 +52,19 @@ function renderOption(item) {
);
}
const Complete = React.createClass({
getInitialState() {
return {
dataSource: [],
};
},
handleChange(value) {
class Complete extends React.Component {
state = {
dataSource: [],
}
handleChange = (value) => {
if (value) {
this.setState({
dataSource: searchResult(value),
});
}
},
}
render() {
const { dataSource } = this.state;
return (
@ -89,8 +89,8 @@ const Complete = React.createClass({
</AutoComplete>
</div>
);
},
});
}
}
ReactDOM.render(<Complete />, mountNode);
````