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

const dataSource = [];

function generateLi(index) {
  return (
    <li key={`key-${index}`} style={{ lineHeight: '20px' }}>
      key-{index}
    </li>
  );
}
function generateData(len) {
  for (let i = 0; i < len; i++) {
    dataSource.push(generateLi(i));
  }
}

class App extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      initial: 50,
      dataSource: generateData(1000),
    };
  }
  onClick() {
    this.setState({
      initial: this.state.initial + 20,
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.onClick.bind(this)}>
          jump to {this.state.initial + 20}
        </button>
        <br />
        <br />
        <div className={'virtual-box'}>
          <VirtualList ref="virtual" jumpIndex={this.state.initial}>
            {dataSource}
          </VirtualList>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('virtual-list-demo-2'));