yylib-quick-mobile/dist/yylib/list-view/YYList.js

yylib-quick-mobile

import React from 'react';
import ReactDOM from 'react-dom';
import {PullToRefresh, List, ListView,SwipeAction,Badge} from "antd-mobile";
import YYIcon  from '../icon/YYIcon';
import './YYList.less';
import  _  from 'lodash';
import classnames from 'classnames';
const Item = List.Item;
const Brief = Item.Brief;


function MyBody(props){
    return(
        <div className="am-list-body my-body">
            {props.children}
        </div>
    )
}

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

        this.state = {
            dataSource,
            appendData:[],
            isLoading: true,
            refreshing:true,
            initdata:[],            //第一次传的列表参数
            footer:'',//页脚是否显示加载完成
            pageSize:1,//每页条数
            postUrl:"",
            current: 1,//当前页码,
            hasMore: true
        };
    }

    componentDidMount() {
        let {RunInDesign}=this.props;//当前的运行环境 RunInDesign为true时，说明在设计环境
        if(RunInDesign){
        	this.createDesignData(this.props);
        }
        if(this.props.pullToRefresh){
        	setTimeout(()=>{
        		this.setState({isLoading:false})
        	},300)
        }
    }
    /******生成设计期间的数据******/
    createDesignData(props){
    	this.setState({footer:""});
    	let {initialListSize,titleName,rightName,bottomName,thumbName}=props;//根据初始时首屏显示的数据进行生成假数据  假数据囊括所有可能出现的页面元素
    	var  data=[];
    	for(var i=0;i<initialListSize;i++){
            var item = {};
            item[titleName] = "title"+(i+1);
            item[rightName] = "extra content";
            item[bottomName] = "subtitle";
            item[thumbName] = "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png";
    		data.push(item);
    	}
        let  ds=this.state.dataSource.cloneWithRows(data);
    	this.setState({dataSource:ds,isLoading:false,refreshing:false})
    }
    componentWillReceiveProps(nextprops){
        let _self = this;
        if(nextprops.data&&nextprops.data.length>0){
            let data = nextprops.data;
            this.setState({
                initdata:data,
                dataSource: this.state.dataSource.cloneWithRows(data),
                isLoading: false,
                refreshing:false,
            });
        } else if(nextprops.appendData&&nextprops.appendData.length>0){
            if (_self.state.isLoading && !_self.state.hasMore) {
                return;
            }
            _self.setState({ isLoading: true });
            _self.rData = [..._self.state.initdata,...nextprops.appendData];
            _self.setState({
                dataSource: _self.state.dataSource.cloneWithRows(_self.rData),
                isLoading: false,

            });
        }
        if(nextprops.RunInDesign){
        	this.createDesignData(nextprops);
        }
    }
    onRefresh = () => {
        let _self = this;
        _self.setState({refreshing:true,isLoading:false});
        if(this.props.onRefresh){
            this.props.onRefresh();
        }else{
        	setTimeout(()=>{
                _self.rData = [..._self.state.initdata];
                _self.setState({
                    dataSource:_self.state.dataSource.cloneWithRows(_self.rData),
                    refreshing:false,
                    isLoading:false,
                });
           },300)
        }
    }
    /*****点击事件******/
    _clickItem(row){
    	if(this.props.onClick){
    		this.props.onClick(row);
    	}
    }
    /**右侧滑动栏的按钮方法--start*/
    firstPress = (rowData) => {
      if(this.props.firstPress){
        this.props.firstPress(rowData);
      }
    }
    secondPress = (rowData) => {
      if(this.props.secondPress){
        this.props.secondPress(rowData);
      }
    }
    onOpen = (rowData) => {
      if(this.props.onOpen){
        this.props.onOpen(rowData);
      }
    }
    onClose = (rowData) => {
      if(this.props.onClose){
        this.props.onClose(rowData);
      }
    }
    /**右侧滑动栏的按钮方法--end*/
    /*****生成一行数据*******/
    createRow(rowData, sectionID, rowID, highlightRow){
        var _self = this;
        var cloneData=_.cloneDeep(rowData);
    	let {secondButtonText,firstButtonText,RunInDesign,
            titleName,rightName,bottomName,thumbName,
            showRight,showThumb,showArrow,showBottom,showHeader,
            arrow,showSwipeAction,autoClose,wrap,disabledFirst,
            disabledSecond,renderRow,damping}=this.props;
        if(renderRow) {
           return renderRow(rowData, sectionID, rowID, highlightRow);
        }
    	let rightButtons = [];
        if (disabledFirst) {
          rightButtons.push({ text: firstButtonText?firstButtonText:"取消",  onPress: this.firstPress.bind(this,rowData), style: { backgroundColor: '#ddd', color: 'white' }});
        }
        if (disabledSecond) {
            rightButtons.push({text:secondButtonText?secondButtonText:'删除', onPress: this.secondPress.bind(this,rowData),style: { backgroundColor: '#F4333C', color: 'white' }});
        }
        if (showSwipeAction){
        	var renderListItem = null;
            if (this.props.renderItem&&typeof this.props.renderItem=="function") { this.props.renderItem(cloneData);}
              renderListItem = (
                <SwipeAction
                   right={rightButtons}
                   autoClose={autoClose}
                   onOpen={this.onOpen.bind(_self,rowData)}
                   onClose={this.onClose.bind(this,rowData)}>
                <Item key={rowData.id?rowData.id:rowID} onClick={this._clickItem.bind(this,rowData)} extra={showRight?cloneData[rightName]:""}    arrow={showArrow?arrow:""} thumb={showThumb?this.getThumb(cloneData):""} wrap={wrap}>
                    {cloneData['isOffline']&&<Badge text={'暂'} style={{ marginRight: 2 }} />}
                    {cloneData[titleName]}
                    {!showBottom||(<Brief>{cloneData[bottomName]}</Brief>)}
                </Item>
                </SwipeAction>
              );
              return renderListItem;

        }
        else {
        	    var renderListItem = null;
                if (this.props.renderItem&&typeof this.props.renderItem=="function") {
                	this.props.renderItem(cloneData)
                }
                renderListItem = (
                    <Item key={rowData.id?rowData.id:rowID} onClick={this._clickItem.bind(this,rowData)} extra={showRight?cloneData[rightName]:""} arrow={showArrow?arrow:""} thumb={showThumb?this.getThumb(cloneData):""} wrap={wrap}>
                        {cloneData['isOffline']&&<Badge text={'暂'} style={{ marginRight: 2 }} />}
                        {cloneData[titleName]}
                        {!showBottom||(<Brief>{cloneData[bottomName]}</Brief>)}
                    </Item>
                );
                return renderListItem;
        }
    }
     getThumb(data){
    	let {useIcon,thumbIcon,thumbIconColor,thumbName,IconSize}=this.props;
    	if(useIcon){
           if(thumbIcon){
           	   return  (<YYIcon type={thumbIcon} color={thumbIconColor} size={IconSize}  />)
           }
           return null;
    	}else{
    		if(data&&data[thumbName]){
    			return  data[thumbName]
    		}
    		return  ""
    	}

    }
    //上拉加载
    onEndReached = (event) => {
      setTimeout(()=>{
        this.setState({refreshing:false,isLoading:true});
        if(this.props.onEndReached){
            this.props.onEndReached();
        }
      },300)
    }
    /****设置数据***/
    setData(data){
    	let  ds=this.state.dataSource.cloneWithRows(data);
    	setTimeout(()=>{
    		  this.setState({initdata:data,dataSource:ds,isLoading:false,refreshing:false});
    	},300)
    }
    setIsLoading(flag) {
      this.setState({isLoading:flag});
    }
    setAppendData(data) {
      let {initdata}=this.state;
      this.rData = [...initdata,...data]
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        initdata: this.rData,
        isLoading: false,
        appendData:data,
      });
    }
    renderHeader(){
    	let {header}=this.props;
    	return (<div>{header}</div>);
    }
    renderFooter() {
    	let  {footerBefore,footerAfter,showFooter,lastPage}=this.props;
    	if(showFooter){
    		 return (<div style={{ padding: 10, textAlign: 'center' }}>
                 {this.state.isLoading ? footerBefore : lastPage ? footerAfter : ''}
             </div>);
    	}
    	return  (<div></div>)
      }
    render() {
        let {refreshing, isLoading, dataSource} = this.state;
        let{onEndReachedThreshold,cutheight,RunInDesign,pageSize,header,showHeader,initialListSize,style,rightAlign,visible,damping,...restProps}=this.props;
     var  height="calc(100% - "+cutheight+")";
        let wrapClz = classnames('yy-list am-list', (!visible&&'hidden'),this.props.rightAlign,this.props.className);
        return (
            <ListView
                {...restProps}
                initialListSize={initialListSize}
                ref={el => this.lv = el}
                key={1}
                dataSource={dataSource}
                renderHeader={showHeader?this.renderHeader.bind(this):null}
                renderFooter={this.renderFooter.bind(this)}
                renderRow={(rowData, sectionID, rowID, highlightRow)=>this.createRow(rowData, sectionID, rowID, highlightRow)}
                className={wrapClz}
                pageSize={pageSize}
                renderBodyComponent={()=> <MyBody/>}
                style={Object.assign({},style,{height:height,overflow:'auto'})}
                onScroll={() => {}}
                scrollRenderAheadDistance={500}
                onEndReached={this.onEndReached}
                onEndReachedThreshold={onEndReachedThreshold}
                pullToRefresh={
                	this.props.onRefresh?
                	<PullToRefresh
                        distanceToRefresh={25}
                        refreshing={refreshing}
                        onRefresh={this.onRefresh}
                        damping={damping}/>:null
                }/>
        );
    }
}
YYList.defaultProps={
    data:[],
    appendData:[],
    initialListSize:4,
    visible:true,
    autoClose:true,
    customDraw:false,
    showFooter:true,//显示底部内容
    lastPage:false,
    footerBefore:"正在加载",
    footerAfter:"加载完成",
    useIcon:false,
    thumbIcon:"Home",
    thumbIconColor:"#0091fa",
    IconSize:"md",
    damping:100,
}
module.exports=YYList;