import React from 'react';
import ReactDOM from 'react-dom';
import Select from '..';

function generateItem(start, end) {
  const arr = [];
  for (let i = start; i < end; i++) {
    arr.push({ label: `option${i}`, value: `option${i}` });
  }
  return arr;
}
interface PageStates {
  dataSource: Array<any>;
}

class App extends React.Component<{}, PageStates> {
  onScroll: (e: any) => void;
  constructor(props) {
    super(props);
    this.state = {
      dataSource: generateItem(0, 10),
    };
    this.onScroll = e => {
      const scrollHeight = e.target.scrollHeight;
      const clientHeight = e.target.clientHeight;
      const scrollTop = e.target.scrollTop;
      console.log(scrollTop, clientHeight, scrollHeight);

      if (scrollTop + clientHeight === scrollHeight) {
        const dataSource = this.state.dataSource;
        const otherData = generateItem(
          dataSource.length,
          dataSource.length + 10,
        );

        console.log(dataSource, otherData);
        this.setState({
          dataSource: dataSource.concat(otherData),
        });
      }
    };
  } // 内容总高度 // 窗口高度 //滚动高度 // 到达底部
  render() {
    return (
      <Select
        style={{ width: 200 }}
        dataSource={this.state.dataSource}
        menuProps={{ onScroll: this.onScroll }}
        // @ts-ignore
        autoHighlightFirstItem={false}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('select-demo-16'));