src/pullup/index.js - phoenix-ui

import React from 'react'
import PropTypes from 'prop-types'
import {findDOMNode} from 'react-dom'
import Component from '../utils/Component'
import classnames from 'classnames'
import {setPhPrefix, getClientHeight, getScrollTop, getDocumentHeight, preventDefault} from '../utils/Tool'
import Logger from '../utils/logger'
 
import Button from '../button'
import Icon from '../icon'
 
import '../style'
import 'phoenix-styles/less/modules/pullup.less'
 
/**
 * 加载更多组件<br/>
 * - 书写时PullUp组件在可加载列表的后面。
 * - 通过mode设置加载更多的模式，有点击按钮加载更多，以及滑到最底端自动加载，可选 [auto,button] 2种参数。
 * - 通过status设置当前状态，只需要在请求结束返回相应状态，包含请求成功返回2，请求成功并再没有数据返回4，请求失败返回3。
 * - 可通过tips设置按钮文字和状态提示语，默认['加载更多','','加载成功','加载失败','没有更多']，分别对应status的状态。
 * - 可通过phStyle设置按钮的样式，如果当前mode为auto设置无效。
 * - 可通过loadCallback设置点击按钮加载或滑到底部自动加载的回调函数，如果状态为4不执行。
 * - 如果当前列表存在自定义的滚动条，需要通过getTarget传递滚动的目标，且滚动元素的子元素必须只有一个。
 *
 * 主要属性和接口：
 * - mode:加载更多的模式，默认auto。
 * - status:当前状态:0加载更多, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多。
 * - tips:按钮文字和状态提示语，默认['加载更多','','加载成功','加载失败','没有更多']。
 * - phStyle:按钮的样式，默认'primary'。
 * - loadCallback:点击按钮加载或滑到底部自动加载的回调函数。
 * - getTarget: 如果当前列表存在自定义的滚动条，需要传递滚动的目标。
 * 
 * 示例：
 * ```code
 *  <div style={{height:'300px',overflow:'auto'}} ref={(list)=>this.list=list}> // 用到getTarget需要保证只有一个子元素，包裹住滚动的所有内容
 *      <div> 
 *          <List>...</List> // 可加载列表的位置
 *          <PullUp mode='button' status={this.state.status} 
 *              tips={['点击加载更多','加载中...','加载成功！','加载失败！','没有更多']} 
 *              phStyle='primary' 
 *              loadCallback={this.loadCallback.bind(this)}
 *              getTarget={()=>{return list;}} />
 *      </div>
 *  </div>
 * ```
 * 
 * @class PullUp
 * @module 操作类组件
 * @extends Component
 * @constructor
 * @since 2.0.0
 * @demo pullup|pullup.js {展示}
 * @show true
 * */
const MAX_HEIGHT = 800
 
export default class PullUp extends Component{
    static propTypes = {
        /**
         * 样式前缀
         * @property classPrefix
         * @type String
         * @default 'pullup'
         * */
        classPrefix: PropTypes.string,
         /**
         * 加载更多的模式，可选[auto,button], 默认auto
         * @property mode
         * @type String
         * @default 'auto'
         **/
        mode:PropTypes.string,
        /**
         * 加载状态：0初始状态, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多
         * @property status
         * @type Number
         * @default 0
         **/
        status: PropTypes.number,
        /**
         * 加载5个状态的文字描述，默认['加载更多','','加载成功','加载失败','没有更多']
         * @property tips
         * @type Array
         * @default ['加载更多','加载中','加载成功','加载失败','没有更多']
         **/
        tips: PropTypes.array,
        /**
         * 按钮颜色，默认primary
         * @property phStyle
         * @type Array
         * @default 'primary'
         **/
        phStyle: PropTypes.string,
        /**
         * 滑到底部自动加载的回调函数，用户在该函数内自定义请求
         * @method loadCallback
         * @type Function
         * @default null
         **/
        loadCallback: PropTypes.func,
        /**
         * 如果当前列表存在自定义的滚动条，需要传递滚动的目标
         * @method getTarget
         * @type Function
         * @default null
         * @return {object} 目标元素的ref
         **/
        getTarget: PropTypes.func
    }
 
    static defaultProps ={
        status: 4, // 0初始状态, 1加载中, 2加载成功, 3加载失败, 4没有更多
        mode: 'auto',
        phStyle: 'primary',
        tips: ['加载更多','','加载成功','加载失败','没有更多'],
        classPrefix:'pullup',
        hardware: true,
        classMapping : {}
    }
 
    constructor(props,context){ // 记得做数据没有触底的判断
        super(props,context)
        new Logger('PullUp')
 
        this.state = {
            status: props.status
        }
 
        if(props.mode=='button') return
 
        this.touchBottom = false
        this.distanceY = 0
    }
 
    scrollHandler(e){
        let {status} = this.state,
            {getTarget} = this.props,
            target = e.target
        
        if(getTarget){
            this.scrollTop = target.scrollTop
            this.bodyHeight = target.clientHeight
            this.documentHeight = target.children[0].offsetHeight
        }else{
            this.scrollTop = getScrollTop()
            this.bodyHeight = getClientHeight()
            this.documentHeight = getDocumentHeight()
        }
        // console.log('this.scrollTop', this.scrollTop)
        // console.log('this.bodyHeight', this.bodyHeight)
        // console.log('this.documentHeight', this.documentHeight)
 
        this.pullTop = this.documentHeight - this.pullUp.offsetHeight
        // if(!this.pullHeight) this.pullHeight = this.pullUp.offsetHeight
 
        if(this.scrollTop + this.bodyHeight >= this.pullTop){
            this.touchBottom = true
            
            if(status==3) return 
            this.loadCallback()
        }else{
            this.touchBottom = false
        }
    }
 
    componentWillReceiveProps(nextProps){
        if(nextProps.status !== this.state.status){
            this.setState({
                status: nextProps.status
            })
        }
    }
 
    componentDidMount(){
        let pullUpElem = findDOMNode(this.pullUp)
 
        this.scrollHandle = this.scrollHandler.bind(this)
        this.scrollElem = window
 
        this.dragElem = pullUpElem.parentNode
        this.prevElem = pullUpElem.previousElementSibling
        this.addClass(this.dragElem, 'animated')
        this.props.hardware && this.addClass(this.prevElem, 'hardware')
 
        this.dragEventHandle(this.dragElem)
 
        if(this.props.getTarget){
            setTimeout(()=>{
                this.scrollElem = this.props.getTarget()
                this.scrollElem.addEventListener('scroll', this.scrollHandle, false)
            },0);  
        }else{
            this.scrollElem.addEventListener('scroll', this.scrollHandle, false)
        }              
    }
 
    dragEventHandle(elem){
        this.touchStartHandle = this.touchStartHandle.bind(this)
        elem.addEventListener('touchstart', this.touchStartHandle, false)
 
        this.touchMoveHandle = this.touchMoveHandle.bind(this)
        elem.addEventListener('touchmove', this.touchMoveHandle, false)
 
        this.touchEndHandle = this.touchEndHandle.bind(this)
        elem.addEventListener('touchend', this.touchEndHandle, false)
 
        this.touchCancelHandle = this.touchCancelHandle.bind(this)
        elem.addEventListener('touchcancel', this.touchCancelHandle, false)
    }
 
    componentDidUpdate(){
        let {status} = this.state
 
        // 只有加载成功并传值才重置状态
        if(status==2){
            this.setState({
                status: 0
            })
        }
    }
 
    loadCallback(){
        this.touchBottom = false
 
        let {loadCallback} = this.props,
            {status} = this.state
 
        // 如果已经没有更多，不再继续请求数据的操作
        if(status==4 || status==1) return
 
        // 状态置为加载中(状态为0或3时执行)
        this.setState({
            status: 1
        }, ()=>{
            if(loadCallback) loadCallback()
        })
    }
 
    touchStartHandle(e){
        // preventDefault(e)
        if(!this.touchBottom) return
        
        this.distanceY = 0
        this.starY = event.touches[0].pageY
    }
 
    touchMoveHandle(e){
        // preventDefault(e)
        if(!this.touchBottom) return
 
        this.moveY = event.touches[0].pageY
        this.distanceY = this.moveY - this.starY
 
        if(this.distanceY>=0) return
 
        this.distanceY = Math.abs(this.distanceY)
 
        this.transform = Math.min(1, MAX_HEIGHT/this.distanceY) * Math.min(MAX_HEIGHT, this.distanceY)
        this.dragElem.style.transform = 'translateY('+(-this.transform)+'px)'   
    }
 
    touchEndHandle(e){
        // preventDefault(e)
        if(!this.touchBottom) return
 
        this.starY = this.moveY
 
        this.dragElem.style.transform = 'translateY(0)'
        
        if(Math.abs(this.distanceY) <= 80 || this.distanceY>=0) return
 
        this.loadCallback()
    }
 
    touchCancelHandle(){
        this.dragElem.style.transform = 'translateY(0)'
    }
 
    componentWillUnmount(){
        if(this.props.mode=='button') return
 
        this.scrollElem.removeEventListener('scroll', this.scrollHandle, false)
 
        this.dragElem.removeEventListener('touchstart', this.touchStartHandle, false)
        this.dragElem.removeEventListener('touchmove', this.touchMoveHandle, false)
        this.dragElem.removeEventListener('touchend', this.touchEndHandle, false)
    }
 
    renderContent(){
        let {mode, tips, phStyle} = this.props,
            {status} = this.state
 
        if(mode=='button'){
            return (
                <Button phStyle={status==3?'error':phStyle} disabled={status==4||status==1} 
                    onClick={this.loadCallback.bind(this)}>
                    {this.renderIcon(status)}
                    {tips[status]}
                </Button>
            )            
        }else{
            return (
                <div className={setPhPrefix('pullup-tip')}>
                    {this.renderIcon(status)}
                    {tips[status]}
                </div>
            )
        }        
    }
 
    renderIcon(status){
        if(status==1){
            return <Icon className='gfs-icon-loading' phIcon='loading-gray' phSize='sm' />;
        }    
    }
 
    renderPullUp(){
        return (
            <div {...this.otherProps} ref={(pullUp)=>{this.pullUp=pullUp}} className={classnames(this.getProperty(true),this.props.className)}>
                {this.renderContent()}
            </div>
        )
    }
 
    render(){
        return this.renderPullUp()
    }
}
模块/类

src/pullup/index.js File
