import './demo4.css';
import 'whatwg-fetch';
import CascaderSelect from '..';
import React from 'react';
import ReactDOM from 'react-dom';
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = (value, data, extra) => {
            console.log(value, data, extra);
        };
        this.state = {
            data: [],
            value: [],
        };
    }
    componentDidMount() {
        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
            .then(response => response.json())
            .then(data => this.setState({ data, value: ['2975'] }))
            .catch(e => console.log(e));
    }
    filter(searchValue, path) {
        return (searchValue === '' ||
            path
                .map(({ value, label }) => `${value}${label}`)
                .join('')
                .match(searchValue));
    }
    render() {
        return (React.createElement("div", { className: "search-demo" },
            React.createElement(CascaderSelect, { showSearch: true, style: { width: '240px' }, dataSource: this.state.data, placeholder: "\u641C\u7D22\u540D\u5B57", onChange: this.handleChange }),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(CascaderSelect, { showSearch: true, filter: this.filter, style: { width: '240px' }, dataSource: this.state.data, onChange: this.handleChange, placeholder: "\u641C\u7D22\u540D\u5B57\u6216id\u503C" })));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('cascader-select-demo-4'));
