var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import './demo14.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Select from '..';
import classNames from 'classnames';
/* eslint-disable react/prop-types, react/no-multi-comp */
// prevent onBlur
function preventDefault(e) {
    e.preventDefault();
}
class CustomMenu extends React.Component {
    constructor(props) {
        super(props);
        this.data = [
            {
                label: 'value1',
                value: 1,
            },
            {
                label: 'value2',
                value: 2,
            },
        ];
    }
    onClick(item) {
        this.props.onChange(item);
    }
    renderItems() {
        return this.data.map(item => (React.createElement("li", { onClick: this.onClick.bind(this, item), key: item.value }, item.label)));
    }
    render() {
        const _a = this.props, { className } = _a, others = __rest(_a, ["className"]);
        const cls = classNames('overlay-content', className);
        return (React.createElement("ul", Object.assign({ className: cls }, others), this.renderItems()));
    }
}
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.handleSelect = value => {
            this.setState({
                value,
                visible: false,
            });
        };
        this.onVisibleChange = visible => {
            this.setState({
                visible,
            });
        };
        this.state = {
            value: null,
            visible: false,
        };
    }
    render() {
        const popupContent = (React.createElement("div", { style: { border: '1px solid', background: 'white' } },
            React.createElement("div", { style: {
                    borderBottom: '1px solid',
                    background: 'white',
                    padding: 10,
                    fontSize: '12px',
                } }, "custom header"),
            React.createElement(CustomMenu, { className: "", onChange: this.handleSelect, onMouseDown: preventDefault }),
            React.createElement("div", { style: {
                    borderTop: '1px solid',
                    background: 'white',
                    padding: 10,
                    fontSize: '12px',
                } }, "custom footer")));
        const popupProps = {
            triggerClickKeycode: [13, 32, 40], // space, enter, down-arrow
        };
        return (React.createElement("div", { className: "demo-container" },
            React.createElement(Select, { placeholder: "custom popupContent", visible: this.state.visible, onVisibleChange: this.onVisibleChange, value: this.state.value, popupProps: popupProps, popupContent: popupContent, style: { width: 200 } })));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('select-demo-14'));
