yylib-quick-mobile/dist/yylib/library/YYReply.js

yylib-quick-mobile

import React from 'react';
import ReactDOM from 'react-dom';
import {PullToRefresh, ListView } from 'antd-mobile';
import YYComment from './YYComment';
import './YYReply.less';
function MyBody(props) {
  return (
    <div className="am-list-body my-body">
      {props.children}
    </div>
  );
}
class YYReply extends React.Component{
  constructor(props) {
      super(props);
      const dataSource = new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2,
      });

      this.state = {
          dataSource,
          isLoading: true,
          refreshing:true,
          height:document.documentElement.clientHeight-148,
          initdata:[],            //第一次传的列表参数
          footer:'',               //页脚是否显示加载完成
      };
  }
  componentDidMount() {
      const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
      setTimeout(() => {
          let data = this.props.data;  //获取列表初始值
          if(this.props.isreached){
              this.setState({
                  footer:'加载完成',
              })
          } else {
              this.setState({
                  footer:'',
              })
          }
          if(this.props.data.length!==0){
              this.setState({
                  initdata:data,
                  height:hei,
                  dataSource: this.state.dataSource.cloneWithRows(data),
                  isLoading: false,
                  refreshing:false,
              });
          }
          else {
            this.setState({
              isLoading:false,
              refreshing:false
            })
          }
      }, 1000);
  }
  componentWillReceiveProps(nextprops){
      let _self = this;
      if(nextprops.data!==this.props.data){
          const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
          setTimeout(() => {
              let data = this.props.data;  //获取列表初始值
              if(this.props.isreached){
                  this.setState({
                      footer:'加载完成',
                  })
              } else {
                  this.setState({
                      footer:'',
                  })
              }
              this.setState({
                  initdata:data,
                  height:hei,
                  dataSource: this.state.dataSource.cloneWithRows(data),
                  isLoading: false,
                  refreshing:false,
              });
          }, 600);
      } else if(nextprops.appendData!==this.props.appendData){
              if (_self.state.isLoading && !_self.state.hasMore) {
                  return;
              }
              _self.setState({ isLoading: true });
              setTimeout(() => {
                  _self.rData = [..._self.state.initdata,..._self.props.appendData];
                  _self.setState({
                      initdata:_self.rData,
                      dataSource: _self.state.dataSource.cloneWithRows(_self.rData),
                      isLoading: false,
                  });
              }, 1000);


      }
  }
  renderReplies(replies) {
    var repliesData = [];
    if (replies&&replies.length) {
      replies.map((item,index)=>{
        var reply = (
          <div key={item.id} className='reply-item'>
            <span className='createDate'>{item.createDate}</span>
            <span className='name'>{item.username}</span>
            回复
            <span className='name'>{item.replyName}</span>
            :{item.content}
          </div>
        );
        repliesData.push(reply);
      });
    }
    if (repliesData.length) {
      return (<div className='reply-list'>{repliesData}</div>);
    }
  }
  createRow(rowData, sectionID, rowID, highlightRow){
    return (
      <div className='comment-item' key={rowData.id}>
        <div className='name'>{rowData.username}</div>
        <div className='content'>{rowData.content}</div>
        {this.renderReplies(rowData.replies)}
        <div className='oper'>
          <div className='createDate'>{rowData.createDate}</div>
          <YYComment item={rowData}
            selectRow={this.props.selectRow}
            send={this.send.bind(this)}
            liked={this.liked.bind(this)}/>
        </div>
      </div>
      );
  }
  send(param) {
    this.props.send(param);
  }
  liked(id){
    this.props.liked(id);
  }
  onEndReached () {
    this.props.reached();
  }
  onRefresh() {
    this.props.refresh();
  }
	render(){
    var {dataSource,refreshing,isLoading,footer,height} = this.state;
		return (
      <div>
        <ListView
        className='yy-reply-list'
          ref={el => this.lv = el}
          dataSource={dataSource}
          renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
            {isLoading ? '正在加载...' : footer}
          </div>)}
          renderBodyComponent={()=> <MyBody/>}
          renderRow={(rowData, sectionID, rowID, highlightRow)=>this.createRow(rowData, sectionID, rowID, highlightRow)}
          style={{
            height: height,
            overflow: 'auto',
          }}
          pageSize={10}
          onScroll={() => { console.log('scroll'); }}
          scrollRenderAheadDistance={500}
          onEndReached={this.onEndReached.bind(this)}
          onEndReachedThreshold={10}
          pullToRefresh={
              <PullToRefresh
                  distanceToRefresh={25}
                  refreshing={refreshing}
                  onRefresh={this.onRefresh.bind(this)}/>
          }/>
          <YYComment
          position='fixed'
          selectRow={this.props.selectRow}
          send={this.send.bind(this)}/>
      </div>)
	}
}
YYReply.defaultProps={
  data:[],
  init:[]
}
export default  YYReply;