rmc-list-view@0.11.5

/* eslint-disable no-console */
/* eslint react/prop-types: 0, react/no-multi-comp: 0 */
import '../assets/index.less';
import React from 'react';
import ReactDOM from 'react-dom';
import ListView from '../src';

const NUM_ROWS = 20;
let pageIndex = 0;

function genData(pIndex = 0) {
  const dataBlob = {};
  for (let i = 0; i < NUM_ROWS; i++) {
    const ii = (pIndex * NUM_ROWS) + i;
    dataBlob[`${ii}`] = `row - ${ii}`;
  }
  return dataBlob;
}

const MySectionBodyWrapper = (props) => {
  return (<table className="my-section-body">
    <thead><tr><td>table title</td></tr></thead>
    <tbody>{props.children}</tbody>
  </table>);
};

class Demo extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    this.state = {
      dataSource,
      isLoading: true,
    };
  }

  componentDidMount() {
    // simulate initial Ajax
    setTimeout(() => {
      this.rData = genData();
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        isLoading: false,
      });
    }, 600);
  }

  onEndReached = (event) => {
    console.log('fire onEndReached');
    // load new data
    // hasMore: from backend data, indicates whether it is the last page, here is false
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    console.log('reach end', event);
    this.setState({ isLoading: true });
    setTimeout(() => {
      this.rData = { ...this.rData, ...genData(++pageIndex) };
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        isLoading: false,
      });
    }, 1000);
  }

  render() {
    return (<div>
      <ListView
        ref={el => this.lv = el}
        dataSource={this.state.dataSource}
        useBodyScroll
        renderHeader={() => <div style={{ padding: 30 }}>设置了`useBodyScroll`</div>}
        renderFooter={() =>
          <div style={{ padding: 30 }}>{this.state.isLoading ? 'loading...' : 'loaded'}</div>}
        renderBodyComponent={() => <div className="for-body-demo" />}
        renderSectionBodyWrapper={(sectionID) => <MySectionBodyWrapper key={sectionID} />}
        renderRow={(rowData) => (<tr style={{ height: 50 }}>
          <td>{rowData} Let me keep typing here so it wraps at least one line.</td>
        </tr>)}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={100}
        pageSize={10}
      />
      <div dangerouslySetInnerHTML={{
        __html: navigator.userAgent.match(/Android|iPhone|iPad|iPod/i) ?
          '<style>#qrcode, .highlight{ display: none }</style>' : '',
      }}
      />
    </div>);
  }
}

ReactDOM.render(<Demo />, document.getElementById('__react-content'));