import Drawer from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import { Radio, Select } from '../..';
const Option = Select.Option;
const onChange = function (value) {
    console.log(value);
};
const onBlur = function (e) {
    console.log(/onblur/, e);
};
const onToggleHighlightItem = function (item, type) {
    console.log(item, type);
};
class Demo extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            placement: 'right',
        };
        this.onPlacementChange = dir => {
            this.setState({
                placement: dir,
            });
        };
    }
    render() {
        const drawerProps = {
            placement: this.state.placement,
            closeMode: 'mask',
            top: 0,
            footer: true,
            bodyStyle: { padding: 0 },
        };
        return (React.createElement("div", null,
            React.createElement(Radio.Group, { dataSource: ['right', 'bottom', 'left', 'top'], defaultValue: 'right', onChange: this.onPlacementChange }),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(Select, { id: "basic-demo", popupComponent: Drawer, 
                // @ts-ignore
                popupProps: drawerProps, autoWidth: false, onChange: onChange, onBlur: onBlur, 
                // @ts-ignore
                onToggleHighlightItem: onToggleHighlightItem, defaultValue: "jack", "aria-label": "name is", hasClear: true },
                React.createElement(Option, { value: "jack" }, "Jack"),
                React.createElement(Option, { value: "frank" }, "Frank"),
                React.createElement(Option, { value: "hugo" }, "Hugo"))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('drawer-demo-4'));
