import React from 'react';
import ReactDOM from 'react-dom';
import Select from '..';
const Option = Select.Option;
const onChange = function (value) {
    console.log(value);
};
const onToggleHighlightItem = function () {
    console.log('onToggleHighlightItem');
};
const onFocus = () => {
    console.log('focus');
};
const onBlur = () => {
    console.log('blur');
};
ReactDOM.render(React.createElement("div", null,
    React.createElement(Select, { id: "basic-demo", onChange: onChange, onToggleHighlightItem: onToggleHighlightItem, defaultValue: "jack", onFocus: onFocus, onBlur: onBlur, "aria-label": "name is", style: { marginRight: 8 }, size: 'xs' },
        React.createElement(Option, { value: "jack" }, "Jack"),
        React.createElement(Option, { value: "frank" }, "Frank"),
        React.createElement(Option, { value: "hugo" }, "Hugo")),
    React.createElement(Select, { defaultValue: "clear", hasClear: true, size: 'small', style: { marginRight: 8 } },
        React.createElement(Option, { value: "jack" }, "Jack"),
        React.createElement(Option, { value: "frank" }, "Frank"),
        React.createElement(Option, { value: "clear" }, "clear")),
    React.createElement(Select, { placeholder: "show search", showSearch: true, hasClear: true, size: 'medium', style: { marginRight: 8 } },
        React.createElement(Option, { value: "jack" }, "Jack"),
        React.createElement(Option, { value: "frank" }, "Frank"),
        React.createElement(Option, { value: "hugo" }, "Hugo")),
    React.createElement(Select, { disabled: true, defaultValue: "frank", size: 'large', style: { marginRight: 8 } },
        React.createElement(Option, { value: "jack" }, "Jack"),
        React.createElement(Option, { value: "frank" }, "Frank"),
        React.createElement(Option, { value: "hugo" }, "Hugo")),
    React.createElement("br", null),
    React.createElement("br", null),
    React.createElement("div", { style: { background: '#f3f3f3', padding: '10px' } },
        React.createElement(Select, { id: "basic-demo", onChange: onChange, onToggleHighlightItem: onToggleHighlightItem, defaultValue: "jack", onFocus: onFocus, onBlur: onBlur, "aria-label": "name is", style: { marginRight: 8 }, size: 'xs', theme: 'grey' },
            React.createElement(Option, { value: "jack" }, "Jack"),
            React.createElement(Option, { value: "frank" }, "Frank"),
            React.createElement(Option, { value: "hugo" }, "Hugo")),
        React.createElement(Select, { defaultValue: "clear", hasClear: true, size: 'small', style: { marginRight: 8 }, theme: 'grey' },
            React.createElement(Option, { value: "jack" }, "Jack"),
            React.createElement(Option, { value: "frank" }, "Frank"),
            React.createElement(Option, { value: "clear" }, "clear")),
        React.createElement(Select, { placeholder: "show search", showSearch: true, hasClear: true, size: 'medium', theme: 'grey', style: { marginRight: 8 } },
            React.createElement(Option, { value: "jack" }, "Jack"),
            React.createElement(Option, { value: "frank" }, "Frank"),
            React.createElement(Option, { value: "hugo" }, "Hugo")),
        React.createElement(Select, { disabled: true, defaultValue: "frank", size: 'large', theme: 'grey', style: { marginRight: 8 } },
            React.createElement(Option, { value: "jack" }, "Jack"),
            React.createElement(Option, { value: "frank" }, "Frank"),
            React.createElement(Option, { value: "hugo" }, "Hugo")))), document.getElementById('select-demo-1'));
