import React from 'react';
import ReactDOM from 'react-dom';
import Search from '..';
const dataSource = [
    {
        label: 'Recent label',
        value: 'Recent',
    },
    {
        label: 'dress label',
        value: 'dress',
    },
    {
        label: 'sunglasses label',
        value: 'sunglasses',
    },
    {
        label: 't-shirt label',
        value: 't-shirt',
    },
];
class App extends React.Component {
    onSearch(value, filterValue) {
        console.log('onSearch', value, filterValue);
    }
    onChange(value, type, e) {
        console.log('onChange', value, type, e);
        this.setState({
            value,
        });
    }
    render() {
        return (React.createElement("div", null,
            React.createElement("p", null, "auto highlight first item"),
            React.createElement(Search, { dataSource: dataSource, style: { width: '400px' }, fillProps: "label", onChange: this.onChange.bind(this), onSearch: this.onSearch.bind(this) }),
            React.createElement("p", null, "no default highlight item, should use UP/DOWN"),
            React.createElement(Search
            // @ts-ignore
            , { 
                // @ts-ignore
                autoHighlightFirstItem: false, style: { width: '400px' }, fillProps: "label", dataSource: dataSource, onChange: this.onChange.bind(this), onSearch: this.onSearch.bind(this) })));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('search-demo-2'));
