ContentListView.js 4.69 KB
/**
 * Created by zzz on 2019/3/5.
 */
'use strict';
import React, {Component} from "react";
import ReactNative, {View, Text, Image, ListView, StyleSheet, Dimensions, TouchableOpacity, Platform, RefreshControl, NativeModules
} from 'react-native';

import YH_PtrRefresh from '../../../common/components/YH_PtrRefresh';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';

import ContentEmptyView from './ContentEmptyView'
import ContentLikedListCell from './ContentLikedListCell'
import ContentFansListCell from './ContentFansListCell'

export default class ContentListView extends Component {
    constructor(props) {
        super(props);

        this._renderRow = this._renderRow.bind(this);
        this._renderFooter = this._renderFooter.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    _renderFooter(){
      return (
          <View style={[{height: 50}, {backgroundColor: 'white'}, {justifyContent:'center'}]}>
          </View>
      )
    }

    _renderRow(rowData, sectionID, rowID) {
        let showLine = this.props.contentList.length === +rowID+1 ? false : true;

        return (

          <View>

            { this.props.contentListId === '1' ?
              <ContentLikedListCell
                  key={'row'+ rowID}
                  data={rowData}
                  showLine={showLine}
                  jumpToPersonalGrassPage={this.props.jumpToPersonalGrassPage}
                  jumpToGrassDetailPage={this.props.jumpToGrassDetailPage}
              />

              :

              <ContentFansListCell
                  key={'row'+ rowID}
                  data={rowData}
                  showLine={showLine}
                  updateAttentionAction={this.props.updateAttentionAction}
                  jumpToPersonalGrassPage={this.props.jumpToPersonalGrassPage}
              />
            }

            </View>

        );
    }

    render() {
      let {contentList, isPullToRefresh, shouldShowEmpty} = this.props;

      if (shouldShowEmpty) {
            return (
                <View style={styles.container}>
                    <ContentEmptyView
                        listId={this.props.contentListId}
                    />
                </View>
            );
        }

      return (
          <View style={styles.container}>
          {
              Platform.OS === 'ios' ?
              <ListView
                  ref={(c) => {
                      this.listView = c;
                  }}
                  contentContainerStyle={styles.contentContainer}
                  dataSource={this.dataSource.cloneWithRows(contentList)}
                  renderRow={this._renderRow}
                  renderFooter={this._renderFooter}
                  enableEmptySections={true}
                  enablePullToRefresh={true}
                  isOnPullToRefresh={isPullToRefresh}
                  showsVerticalScrollIndicator={false}
                  onRefreshData={() => {
                      this.props.onRefresh && this.props.onRefresh();
                  }}
                  onEndReached={() => {
                      if (contentList.size !== 0) {
                          this.props.onEndReached && this.props.onEndReached();
                      }
                  }}
              />
              :
              <ListView
                  ref={(c) => {
                      this.listView = c;
                  }}
                  contentContainerStyle={styles.contentContainer}
                  dataSource={this.dataSource.cloneWithRows(contentList)}
                  renderRow={this._renderRow}
                  renderFooter={this._renderFooter}
                  enableEmptySections={true}
                  enablePullToRefresh={true}
                  showsVerticalScrollIndicator={false}
                  refreshControl={
                          <YH_PtrRefresh
                              refreshing={isPullToRefresh}
                              onRefresh={() => {
                                  this.props.onRefresh && this.props.onRefresh();
                              }}
                              colors={['#000000', '#ff0000']}
                              progressBackgroundColor="#ffffff"
                          />
                    }
                    onEndReached={() => {
                        if (contentList.size !== 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
              />
          }
          </View>
      );
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    contentContainer: {
    },
})