taro-material/weapp/components/pagination/index.js

Mini Program components that implement Google's Material Design.

import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import AtButton from '../button/index'
import AtComponent from '../../common/component'

const MIN_MAXPAGE = 1
const getMaxPage = (maxPage = 0) => {
  if (maxPage <= 0) return MIN_MAXPAGE
  return maxPage
}

const createPickerRange = max => {
  const range = new Array(max).fill(0).map((val, index) => index + 1)
  return range
}

export default class AtPagination extends AtComponent {
  constructor () {
    super(...arguments)
    const { current, pageSize, total } = this.props
    const maxPage = getMaxPage(Math.ceil(total / pageSize))
    this.state = {
      current,
      maxPage,
      pickerRange: createPickerRange(maxPage),
    }
  }

  onPrev () {
    let { current } = this.state
    const originCur = current
    current -= 1
    current = Math.max(1, current)
    if (originCur === current) return
    this.props.onPageChange && this.props.onPageChange({ type: 'prev', current })
    this.setState({ current })
  }

  onNext () {
    let { current } = this.state
    const originCur = current
    const { maxPage } = this.state
    current += 1
    current = Math.min(maxPage, current)
    if (originCur === current) return
    this.props.onPageChange && this.props.onPageChange({ type: 'next', current })
    this.setState({ current })
  }

  componentWillReceiveProps (props) {
    const { total, pageSize, current } = props
    const maxPage = getMaxPage(Math.ceil(total / pageSize))
    if (maxPage !== this.state.maxPage) {
      this.setState({
        maxPage,
        pickerRange: createPickerRange(maxPage),
      })
    }
    if (current !== this.state.current) {
      this.setState({ current })
    }
  }

  onPickerChange (evt) {
    const { value } = evt.detail
    const current = +value + 1
    if (current === this.state.current) return
    this.props.onPageChange && this.props.onPageChange({ type: 'pick', current })
    this.setState({
      current,
    })
  }

  render () {
    const {
      icon,
      // pickerSelect,
      customStyle,
    } = this.props
    const {
      current,
      maxPage,
      // pickerRange,
    } = this.state

    const rootClassName = ['at-pagination']

    const prevDisabled = maxPage === MIN_MAXPAGE || current === 1
    const nextDisabled = maxPage === MIN_MAXPAGE || current === maxPage

    const classObject = {
      'at-pagination--icon': icon,
    }

    return (
      <View
        className={classNames(rootClassName, classObject, this.props.className)}
        style={customStyle}
      >
        <View className='at-pagination__btn-prev'>
          {icon && (
            <AtButton onClick={this.onPrev.bind(this)} size='small' disabled={prevDisabled}>
              <Text className='at-icon at-icon-chevron-left'></Text>
            </AtButton>
          )}
          {!icon && <AtButton onClick={this.onPrev.bind(this)} size='small' disabled={prevDisabled}>上一页</AtButton>}
        </View>
        <View className='at-pagination__number'>
          <Text className='at-pagination__number-current'>{current}</Text>/{ maxPage }
        </View>
        <View className='at-pagination__btn-next'>
          {icon && (
            <AtButton onClick={this.onNext.bind(this)} size='small' disabled={nextDisabled}>
              <Text className='at-icon at-icon-chevron-right'></Text>
            </AtButton>
          )}
          {!icon && <AtButton onClick={this.onNext.bind(this)} size='small' disabled={nextDisabled}>下一页</AtButton>}
        </View>
        {/* {pickerSelect && <View className='at-pagination__number'>
          {<Picker mode='selector' range={pickerRange} value={current - 1} onChange={this.onPickerChange.bind(this)}>
            <Text className='at-pagination__number-current'>{current}</Text>/{ maxPage }
          </Picker>}
        </View>} */}
        {/* {!pickerSelect && <View className='at-pagination__number'>
          <Text className='at-pagination__number-current'>{current}</Text>/{ maxPage }
        </View>} */}
      </View>
    )
  }
}

AtPagination.defaultProps = {
  current: 1,
  total: 0,
  pageSize: 20,
  icon: false,
  pickerSelect: false,
  customStyle: {},
  onPageChange: () => {},
}

AtPagination.propTypes = {
  current: PropTypes.number,
  total: PropTypes.number,
  pageSize: PropTypes.number,
  icon: PropTypes.bool,
  pickerSelect: PropTypes.bool,
  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  onPageChange: PropTypes.func,
}