import React from "react";
import {List} from 'antd'
import _ from 'lodash'
import "./index.less"

export default class ListView extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
    this.debounced = null
  }
  componentWillUnmount() {
    this.debounced && this.debounced.cancel();
    this.listRef = null;
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.data !== this.props.data && nextProps.data.length === this.props.data.length) {
      this.forceUpdateGrid();
    }
  }
  forceUpdateGrid = () => {
    this.debounced && this.debounced.cancel();
    this.debounced = _.debounce(() => this.forceUpdate(), 200);
    this.debounced();
  };

  // 渲染列表项
  rowRender = ({ key, index, style }) => {
    const { data, renderItem } = this.props;
    const item = data[index];
    return (
      <div key={key} style={style}>
        {renderItem(item, index)}
      </div>
    );
  };

  render() {
    const { data = [], rowRenderer } = this.props;
    return (
      <div className="List-Non-Vir">
        {data.length > 0 && <List
          dataSource ={data}
          renderItem={(item) => rowRenderer({ item})}
        />}
      </div>
    );
  }
}
